more forms

SmartInvoiceXYZ · Jan 27, 2024 · 2fcd0d3 · 2fcd0d3
1 parent bc91ae1
commit 2fcd0d3
Show file tree

Hide file tree

Showing 34 changed files with 605 additions and 493 deletions.
diff --git a/packages/constants/src/config.ts b/packages/constants/src/config.ts
@@ -96,18 +96,18 @@ export const CONFIG: Config = {
         [toLower('0xf8DBd458f841424e2fD5fBDf18A7dEA17eb2211D')]: LEXDAO_DATA,
       },
     },
-    31337: {
-      SUBGRAPH: 'psparacino/goerli-smart-invoices',
-      WRAPPED_NATIVE_TOKEN: toLower(
-        '0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6',
-      ) as Address,
-      INVOICE_FACTORY: toLower(
-        '0x5FbDB2315678afecb367f032d93F642f64180aa3',
-      ) as Address,
-      RESOLVERS: {
-        [toLower('0x1206b51217271FC3ffCa57d0678121983ce0390E')]: LEXDAO_DATA,
-      },
-    },
+    // 31337: {
+    //   SUBGRAPH: 'psparacino/goerli-smart-invoices',
+    //   WRAPPED_NATIVE_TOKEN: toLower(
+    //     '0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6',
+    //   ) as Address,
+    //   INVOICE_FACTORY: toLower(
+    //     '0x5FbDB2315678afecb367f032d93F642f64180aa3',
+    //   ) as Address,
+    //   RESOLVERS: {
+    //     [toLower('0x1206b51217271FC3ffCa57d0678121983ce0390E')]: LEXDAO_DATA,
+    //   },
+    // },
   },
 };
 

diff --git a/packages/dapp/pages/contracts.tsx b/packages/dapp/pages/contracts.tsx
@@ -2,19 +2,26 @@ import {
   Heading,
   Link,
   Spinner,
+  Stack,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
   Text,
   useBreakpointValue,
 } from '@chakra-ui/react';
 import { CONFIG } from '@smart-invoice/constants';
 import { useFetchTokens } from '@smart-invoice/hooks';
 import { Container } from '@smart-invoice/ui';
 import {
+  chainsMap,
   getAccountString,
   getAddressLink,
   getInvoiceFactoryAddress,
   getKeys,
-  getTokenInfo,
   getTokens,
+  getTokenSymbol,
 } from '@smart-invoice/utils';
 import _ from 'lodash';
 import React from 'react';
@@ -27,69 +34,76 @@ function Contracts() {
   const { data } = useFetchTokens();
   const { tokenData, allTokens } = _.pick(data, ['tokenData', 'allTokens']);
 
-  if (tokenData && allTokens) {
+  if (!tokenData || !allTokens) {
     return (
-      <Container overlay color="white">
-        <Heading
-          fontWeight="normal"
-          mb="1rem"
-          mx="1rem"
-          textTransform="uppercase"
-          textAlign="center"
-          color="red.500"
-        >
-          Contracts
-        </Heading>
-
-        {chainIds.map(chainId => {
-          const INVOICE_FACTORY = getInvoiceFactoryAddress(chainId) || '0x';
-          const TOKENS = getTokens(allTokens, chainId);
-
-          return (
-            <>
-              <Text textAlign="center">NETWORK CHAIN ID: {chainId}</Text>
-
-              <Text textAlign="center">
-                INVOICE FACTORY:{' '}
-                <Link
-                  href={getAddressLink(chainId, INVOICE_FACTORY)}
-                  isExternal
-                  color="red.500"
-                >
-                  {isSmallScreen
-                    ? getAccountString(INVOICE_FACTORY)
-                    : INVOICE_FACTORY}
-                </Link>
-              </Text>
-
-              {TOKENS?.map(token => (
-                <Text textAlign="center" key={token}>
-                  {`ERC20 TOKEN ${
-                    getTokenInfo(chainId, token, tokenData).symbol
-                  }: `}
+      <Container>
+        <Text>Contract Information Loading</Text>
+        <br />
 
-                  <Link
-                    href={getAddressLink(chainId, token)}
-                    isExternal
-                    color="red.500"
-                  >
-                    {isSmallScreen ? getAccountString(token) : token}
-                  </Link>
-                </Text>
-              ))}
-              <br />
-            </>
-          );
-        })}
+        <Spinner />
       </Container>
     );
   }
+
   return (
-    <Container>
-      <Text>Contract Information Loading</Text>
-      <br />
+    <Container overlay>
+      <Stack minH="800px" my={10}>
+        <Heading textTransform="uppercase" textAlign="center" color="blue.500">
+          Contracts
+        </Heading>
+
+        <Tabs>
+          <TabList>
+            {_.map(chainIds, chainId => (
+              <Tab key={chainId}>{chainsMap(chainId)?.name}</Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {_.map(chainIds, chainId => {
+              const INVOICE_FACTORY = getInvoiceFactoryAddress(chainId) || '0x';
+              const TOKENS = getTokens(allTokens, chainId);
+
+              return (
+                <TabPanel>
+                  <Stack spacing={1}>
+                    <Text textAlign="center">
+                      INVOICE FACTORY:{' '}
+                      <Link
+                        href={getAddressLink(chainId, INVOICE_FACTORY)}
+                        isExternal
+                        fontWeight={600}
+                        color="blue.500"
+                      >
+                        {isSmallScreen
+                          ? getAccountString(INVOICE_FACTORY)
+                          : INVOICE_FACTORY}
+                      </Link>
+                    </Text>
+
+                    {TOKENS?.map(token => {
+                      return (
+                        <Text textAlign="center" key={token}>
+                          {`ERC20 TOKEN ${getTokenSymbol(chainId, token, tokenData)}: `}
 
-      <Spinner />
+                          <Link
+                            href={getAddressLink(chainId, token)}
+                            isExternal
+                            fontWeight={600}
+                            color="blue.500"
+                          >
+                            {isSmallScreen ? getAccountString(token) : token}
+                          </Link>
+                        </Text>
+                      );
+                    })}
+                    <br />
+                  </Stack>
+                </TabPanel>
+              );
+            })}
+          </TabPanels>
+        </Tabs>
+      </Stack>
     </Container>
   );
 }