feat: add swap page

protofire · Oct 4, 2024 · 86b357d · 86b357d
1 parent 347bdee
commit 86b357d
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 42 deletions.
diff --git a/lib/hooks/useNavItems.tsx b/lib/hooks/useNavItems.tsx
@@ -214,6 +214,11 @@ export default function useNavItems(): ReturnType {
         text: 'Other',
         icon: 'gear',
         subItems: [
+          {
+            text: 'Swap',
+            nextRoute: { pathname: '/swap' as const },
+            isActive: pathname.startsWith('/swap'),
+          },
           {
             text: 'Verify contract',
             nextRoute: { pathname: '/contract-verification' as const },

diff --git a/lib/metadata/getPageOgType.ts b/lib/metadata/getPageOgType.ts
@@ -46,6 +46,7 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/name-domains/[name]': 'Regular page',
   '/validators': 'Root page',
   '/gas-tracker': 'Root page',
+  '/swap': 'Regular page',
 
   // service routes, added only to make typescript happy
   '/login': 'Regular page',

diff --git a/lib/metadata/templates/description.ts b/lib/metadata/templates/description.ts
@@ -49,7 +49,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/name-domains/[name]': DEFAULT_TEMPLATE,
   '/validators': DEFAULT_TEMPLATE,
   '/gas-tracker': DEFAULT_TEMPLATE,
-
+  '/swap': DEFAULT_TEMPLATE,
   // service routes, added only to make typescript happy
   '/login': DEFAULT_TEMPLATE,
   '/api/media-type': DEFAULT_TEMPLATE,

diff --git a/lib/metadata/templates/title.ts b/lib/metadata/templates/title.ts
@@ -44,6 +44,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/name-domains/[name]': '%name% domain details',
   '/validators': 'validators list',
   '/gas-tracker': 'gas tracker',
+  '/swap': 'swap',
 
   // service routes, added only to make typescript happy
   '/login': 'login',

diff --git a/lib/mixpanel/getPageType.ts b/lib/mixpanel/getPageType.ts
@@ -44,6 +44,7 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/name-domains/[name]': 'Domain details',
   '/validators': 'Validators list',
   '/gas-tracker': 'Gas tracker',
+  '/swap': 'Swap',
 
   // service routes, added only to make typescript happy
   '/login': 'Login',

diff --git a/nextjs/nextjs-routes.d.ts b/nextjs/nextjs-routes.d.ts
@@ -46,6 +46,7 @@ declare module "nextjs-routes" {
     | StaticRoute<"/search-results">
     | DynamicRoute<"/staking-tx/[hash]", { "hash": string }>
     | StaticRoute<"/stats">
+    | StaticRoute<"/swap">
     | DynamicRoute<"/token/[hash]", { "hash": string }>
     | DynamicRoute<"/token/[hash]/instance/[id]", { "hash": string; "id": string }>
     | StaticRoute<"/tokens">

diff --git a/pages/swap.tsx b/pages/swap.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const Swap = dynamic(() => import('ui/pages/Swap'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/tokens">
+      <Swap/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { base as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/ui/pages/Swap.tsx b/ui/pages/Swap.tsx
@@ -0,0 +1,21 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+const SwapPage = () => {
+  return (
+    <Box display="flex" justifyContent="center" alignItems="center">
+      <iframe
+        id="simpleswap-frame"
+        name="SimpleSwap Widget"
+        width="528px"
+        height="392px"
+        src="https://simpleswap.io/widget/62d3bc7d-58e0-4815-87da-36fa3bd878ac"
+        style={{
+          borderRadius: '32px',
+        }}
+      ></iframe>
+    </Box>
+  );
+};
+
+export default SwapPage;
diff --git a/ui/snippets/footer/Footer.tsx b/ui/snippets/footer/Footer.tsx
@@ -16,7 +16,6 @@ import IntTxsIndexingStatus from './IntTxsIndexingStatus';
 const MAX_LINKS_COLUMNS = 4;
 
 const Footer = () => {
-
   const BLOCKSCOUT_LINKS = [
     {
       icon: 'edit' as const,
@@ -40,31 +39,43 @@ const Footer = () => {
 
   const fetch = useFetch();
 
-  const { isPlaceholderData, data: linksData } = useQuery<unknown, ResourceError<unknown>, Array<CustomLinksGroup>>({
+  const { isPlaceholderData, data: linksData } = useQuery<
+  unknown,
+  ResourceError<unknown>,
+  Array<CustomLinksGroup>
+  >({
     queryKey: [ 'footer-links' ],
-    queryFn: async() => fetch(config.UI.footer.links || '', undefined, { resource: 'footer-links' }),
+    queryFn: async() =>
+      fetch(config.UI.footer.links || '', undefined, {
+        resource: 'footer-links',
+      }),
     enabled: Boolean(config.UI.footer.links),
     staleTime: Infinity,
     placeholderData: [],
   });
 
-  const colNum = isPlaceholderData ? 1 : Math.min(linksData?.length || Infinity, MAX_LINKS_COLUMNS) + 1;
-
-  const renderNetworkInfo = React.useCallback((gridArea?: GridProps['gridArea']) => {
-    return (
-      <Flex
-        gridArea={ gridArea }
-        flexWrap="wrap"
-        columnGap={ 8 }
-        rowGap={ 6 }
-        mb={{ base: 5, lg: 0 }}
-        _empty={{ display: 'none' }}
-      >
-        { !config.UI.indexingAlert.intTxs.isHidden && <IntTxsIndexingStatus/> }
-        <NetworkAddToWallet/>
-      </Flex>
-    );
-  }, []);
+  const colNum = isPlaceholderData ?
+    1 :
+    Math.min(linksData?.length || Infinity, MAX_LINKS_COLUMNS) + 1;
+
+  const renderNetworkInfo = React.useCallback(
+    (gridArea?: GridProps['gridArea']) => {
+      return (
+        <Flex
+          gridArea={ gridArea }
+          flexWrap="wrap"
+          columnGap={ 8 }
+          rowGap={ 6 }
+          mb={{ base: 5, lg: 0 }}
+          _empty={{ display: 'none' }}
+        >
+          { !config.UI.indexingAlert.intTxs.isHidden && <IntTxsIndexingStatus/> }
+          <NetworkAddToWallet/>
+        </Flex>
+      );
+    },
+    [],
+  );
 
   const containerProps: GridProps = {
     as: 'footer',
@@ -78,33 +89,46 @@ const Footer = () => {
   if (config.UI.footer.links) {
     return (
       <Grid { ...containerProps }>
-        <div>
-          { renderNetworkInfo() }
-        </div>
+        <div>{ renderNetworkInfo() }</div>
 
         <Grid
-          gap={{ base: 6, lg: colNum === MAX_LINKS_COLUMNS + 1 ? 2 : 8, xl: 12 }}
+          gap={{
+            base: 6,
+            lg: colNum === MAX_LINKS_COLUMNS + 1 ? 2 : 8,
+            xl: 12,
+          }}
           gridTemplateColumns={{
             base: 'repeat(auto-fill, 160px)',
           }}
           justifyContent={{ lg: 'flex-end' }}
           mt={{ base: 8, lg: 0 }}
         >
-          {
-            ([
-              { title: 'Blockscout', links: BLOCKSCOUT_LINKS },
-              ...(linksData || []),
-            ])
-              .slice(0, colNum)
-              .map(linkGroup => (
-                <Box key={ linkGroup.title }>
-                  <Skeleton fontWeight={ 500 } mb={ 3 } display="inline-block" isLoaded={ !isPlaceholderData }>{ linkGroup.title }</Skeleton>
-                  <VStack spacing={ 1 } alignItems="start">
-                    { linkGroup.links.map(link => <FooterLinkItem { ...link } key={ link.text } isLoading={ isPlaceholderData }/>) }
-                  </VStack>
-                </Box>
-              ))
-          }
+          { [
+            { title: 'Blockscout', links: BLOCKSCOUT_LINKS },
+            ...(linksData || []),
+          ]
+            .slice(0, colNum)
+            .map((linkGroup) => (
+              <Box key={ linkGroup.title }>
+                <Skeleton
+                  fontWeight={ 500 }
+                  mb={ 3 }
+                  display="inline-block"
+                  isLoaded={ !isPlaceholderData }
+                >
+                  { linkGroup.title }
+                </Skeleton>
+                <VStack spacing={ 1 } alignItems="start">
+                  { linkGroup.links.map((link) => (
+                    <FooterLinkItem
+                      { ...link }
+                      key={ link.text }
+                      isLoading={ isPlaceholderData }
+                    />
+                  )) }
+                </VStack>
+              </Box>
+            )) }
         </Grid>
       </Grid>
     );
@@ -119,7 +143,6 @@ const Footer = () => {
         `,
       }}
     >
-
       { renderNetworkInfo({ lg: 'network' }) }
 
       <Grid
@@ -137,7 +160,9 @@ const Footer = () => {
         justifySelf={{ lg: 'end' }}
         mt={{ base: 2, lg: 0 }}
       >
-        { BLOCKSCOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
+        { BLOCKSCOUT_LINKS.map((link) => (
+          <FooterLinkItem { ...link } key={ link.text }/>
+        )) }
       </Grid>
     </Grid>
   );