v0.69.58

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adex-interface",
-  "version": "0.69.49",
+  "version": "0.69.61",
   "private": true,
   "dependencies": {
     "@ambire/login-sdk-core": "^0.0.21",

public/robots.txt

@@ -1,3 +1,3 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow: /
+Allow: /

src/App.tsx

@@ -29,11 +29,8 @@ function GlobalStyles() {
     <Global
       styles={(theme: MantineTheme) => ({
         [theme.other.media.print]: {
-          body: {
-            visibility: 'hidden'
-          },
-          'body #printable': {
-            visibility: 'visible'
+          '#root': {
+            display: 'none'
           }
         }
       })}

src/Router.tsx

@@ -6,7 +6,7 @@ import Billing from 'components/Billing'
 import GetStarted from 'components/GetStarted'
 import CampaignAnalytics from 'components/CampaignAnalytics'
 import { createBrowserRouter, Navigate, useLocation, useRouteError, Link } from 'react-router-dom'
-import { Button } from '@mantine/core'
+import { Button, Loader, Center } from '@mantine/core'
 
 import useAccount from 'hooks/useAccount'
 import Deposit from 'components/Deposit'
@@ -33,14 +33,27 @@ function ErrorBoundary() {
 }
 
 function RequireAuth({ children, admin }: { children: JSX.Element; admin?: boolean }) {
-  const { authenticated, isAdmin } = useAccount()
+  const {
+    authenticated,
+    isAdmin,
+    adexAccount: { loaded }
+  } = useAccount()
+
   const location = useLocation()
 
+  if (!loaded) {
+    return (
+      <Center>
+        <Loader type="dots" />
+      </Center>
+    )
+  }
+
   if (!authenticated) {
     return <Navigate to="/login" state={{ from: location }} replace />
   }
 
-  if (admin && isAdmin) {
+  if (admin && !isAdmin) {
     return <Navigate to="/404" state={{ from: location }} replace />
   }
 
@@ -107,7 +120,7 @@ export const router = createBrowserRouter(
         {
           path: 'admin/:tabValue',
           element: (
-            <RequireAuth>
+            <RequireAuth admin>
               <CampaignsDataProvider type="admin">
                 <AdminPanel />
               </CampaignsDataProvider>

src/components/AdminPanel/AccountDetails.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react'
-import { SimpleGrid, Box, Title, Paper, Loader, Center } from '@mantine/core'
+import { SimpleGrid, Box, Loader, Center, Fieldset } from '@mantine/core'
 import useAdmin from 'hooks/useAdmin'
 import { useParams } from 'react-router-dom'
 import Dashboard from 'components/Dashboard'
@@ -39,34 +39,22 @@ function AccountDetails() {
         //   { maxWidth: 'md', cols: 1, spacing: 'xl' }
         // ]}
       >
-        <Paper p="sm" withBorder>
-          <Title order={5} c="brand">
-            Account info form
-          </Title>
+        <Fieldset legend="Account info form">
           <AccountInfo accountData={accountData} />
-        </Paper>
-        <Paper p="sm" withBorder>
-          <Title order={5} c="brand">
-            Deposit form
-          </Title>
+        </Fieldset>
+        <Fieldset legend="Deposit form">
           <AdminDeposit accountData={accountData} />
-        </Paper>
+        </Fieldset>
       </SimpleGrid>
       <SimpleGrid spacing="xl" mt="xl">
-        <Paper p="sm" withBorder>
-          <Title order={5} c="brand">
-            Activity
-          </Title>
+        <Fieldset legend="Activity">
           <FundsActivity accountData={accountData} />
-        </Paper>
+        </Fieldset>
       </SimpleGrid>
       <SimpleGrid spacing="xl" mt="xl">
-        <Paper p="sm" withBorder>
-          <Title order={5} c="brand">
-            Campaigns
-          </Title>
+        <Fieldset legend="Campaigns">
           <Dashboard isAdminPanel accountId={accountId} />
-        </Paper>
+        </Fieldset>
       </SimpleGrid>
     </Box>
   )

src/components/AdminPanel/AccountDetailsElements.tsx

@@ -2,12 +2,12 @@ import { useMemo } from 'react'
 import { Account } from 'types'
 import { Box, Text, MantineColor } from '@mantine/core'
 
-import CustomTable, { TableElement } from 'components/common/CustomTable'
+import CustomTable, { DataElement } from 'components/common/CustomTable'
 import { parseBigNumTokenAmountToDecimal, toOperationEntry } from 'helpers'
 
 export const FundsActivity = ({ accountData }: { accountData: Account }) => {
   const elements = useMemo(() => {
-    const data: TableElement['elements'] = [
+    const data: DataElement[] = [
       ...accountData.fundsDeposited.deposits.map((x) => toOperationEntry('deposit', x)),
       ...accountData.fundsOnCampaigns.perCampaign.map((x) => toOperationEntry('campaignOpen', x)),
       ...accountData.refundsFromCampaigns.perCampaign.map((x) =>
@@ -16,21 +16,32 @@ export const FundsActivity = ({ accountData }: { accountData: Account }) => {
     ]
       .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
 
-      .map((x) => {
+      .map((x, i) => {
         const sign = x.type === 'campaignOpen' ? '-' : '+'
         const color: MantineColor = sign === '-' ? 'darkred' : 'darkgreen'
         return {
-          name: <Text c={color} tt="capitalize" fw="bold">{`${sign} ${x.name}`}</Text>,
-          date: x.date?.toLocaleDateString() || '',
-          amount: (
-            <Text c={color} tt="capitalize" fw="bold">{`${sign} ${parseBigNumTokenAmountToDecimal(
-              x.amount,
-              x.token.decimals
-            )}`}</Text>
-          ),
+          id: x.id + i,
+          columns: [
+            {
+              value: x.type,
+              element: <Text c={color} tt="capitalize" fw="bold">{`${sign} ${x.name}`}</Text>
+            },
+            { value: x.date.getTime(), element: x.date?.toLocaleDateString() || '' },
+            {
+              value: Number(x.amount),
+              element: (
+                <Text
+                  c={color}
+                  tt="capitalize"
+                  fw="bold"
+                  style={{ whiteSpace: 'nowrap' }}
+                >{`${sign} ${parseBigNumTokenAmountToDecimal(x.amount, x.token.decimals)}`}</Text>
+              )
+            },
 
-          token: x.token.name,
-          actionId: x.id
+            { value: x.token.name },
+            { value: x.id }
+          ]
         }
       })
 
@@ -43,7 +54,8 @@ export const FundsActivity = ({ accountData }: { accountData: Account }) => {
     <Box>
       <CustomTable
         headings={['Type', 'Date', 'Amount', 'Token', 'Tx/Campaign id']}
-        elements={elements}
+        data={elements}
+        defaultSortIndex={1}
         pageSize={10}
       />
     </Box>

src/components/AdminPanel/Accounts.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useCallback, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Loader, Box, Badge, TextInput, Stack, Group } from '@mantine/core'
+import { Box, Badge, TextInput, Stack, Group, LoadingOverlay } from '@mantine/core'
 
-import CustomTable from 'components/common/CustomTable'
+import CustomTable, { DataElement } from 'components/common/CustomTable'
 import useAdmin from 'hooks/useAdmin'
 import VisibilityIcon from 'resources/icons/Visibility'
 
@@ -49,7 +49,7 @@ const AdminAnalytics = () => {
     ).toLocaleString()
     const totalAccounts = accArr.length
 
-    const elements = accArr
+    const elements: DataElement[] = accArr
       .filter((x) =>
         (
           x.name +
@@ -80,19 +80,33 @@ const AdminAnalytics = () => {
       .map((a) => {
         return {
           id: a.id,
-          accountId: a.name || a.id,
-          verified: a?.billingDetails?.verified ? '✅' : '❌',
-          email: a.info?.email,
-          balance: parseBigNumTokenAmountToDecimal(
-            a.availableBalance,
-            a.balanceToken.decimals
-          ).toFixed(2),
-          campaigns: a.fundsOnCampaigns.perCampaign.length,
-          fudsOnCampaigns: parseBigNumTokenAmountToDecimal(
-            a.fundsOnCampaigns.total - a.refundsFromCampaigns.total,
-            a.balanceToken.decimals
-          ).toFixed(2),
-          created: new Date(a.created).toLocaleDateString()
+          columns: [
+            { value: a.name || a.id },
+            {
+              value: a?.billingDetails?.verified ? 1 : 0,
+              element: a?.billingDetails?.verified ? '✅' : '❌'
+            },
+            { value: a.info?.email || '' },
+            {
+              value: a.availableBalance,
+              element: parseBigNumTokenAmountToDecimal(
+                a.availableBalance,
+                a.balanceToken.decimals
+              ).toFixed(2)
+            },
+            { value: a.fundsOnCampaigns.perCampaign.length },
+            {
+              value: a.fundsOnCampaigns.total - a.refundsFromCampaigns.total,
+              element: parseBigNumTokenAmountToDecimal(
+                a.fundsOnCampaigns.total - a.refundsFromCampaigns.total,
+                a.balanceToken.decimals
+              ).toFixed(2)
+            },
+            {
+              value: new Date(a.created).getTime(),
+              element: new Date(a.created).toLocaleDateString()
+            }
+          ]
         }
       })
 
@@ -125,11 +139,10 @@ const AdminAnalytics = () => {
     ]
   }, [handlePreview])
 
-  return initialDataLoading ? (
-    <Loader size="xl" type="dots" color="violet" />
-  ) : (
+  return (
     <Stack>
-      <Group align="center" justify="left" gap="xs" mb="md" wrap="wrap">
+      <Group align="center" justify="left" gap="sm" mb="md" wrap="wrap" pos="relative">
+        <LoadingOverlay visible={initialDataLoading} loaderProps={{ children: ' ' }} />
         <Box>Totals: </Box>
         <Badge leftSection="Accounts" size="lg">
           ({data.totalAccounts})
@@ -148,7 +161,13 @@ const AdminAnalytics = () => {
           miw={420}
         />
       </Group>
-      <CustomTable headings={headings} elements={data.elements} pageSize={10} actions={actions} />
+      <CustomTable
+        headings={headings}
+        data={data.elements}
+        pageSize={10}
+        actions={actions}
+        loading={initialDataLoading}
+      />
     </Stack>
   )
 }