From ce68db3ffa952a902f5b883c378e15efa3c42fc9 Mon Sep 17 00:00:00 2001
From: Ben Wolski <benwolski@gmail.com>
Date: Mon, 29 Jul 2024 19:29:03 -0400
Subject: [PATCH] add zircuit network definition

---
 .../NetworkSelector/NetworkSelector.tsx       | 39 ++++++++++++++++--
 src/ambient-utils/constants/networks/index.ts | 26 ++++++++----
 .../constants/networks/zircuitMainnet.ts      | 40 +++++++++++++++++++
 src/ambient-utils/types/chainIds.ts           |  3 +-
 .../branding/ambientProductionBrandAssets.ts  | 10 +++++
 src/assets/branding/defaultBrandAssets.ts     | 10 +++++
 src/assets/branding/index.ts                  |  1 +
 src/assets/branding/zircuitBrandAssets.ts     | 23 +++++++++++
 .../images/logos/zircuit-light-logo.svg       | 18 +++++++++
 .../images/networks/zircuit-green-icon.svg    | 11 +++++
 src/contexts/BrandContext.tsx                 |  3 ++
 src/index.tsx                                 |  2 +
 12 files changed, 174 insertions(+), 12 deletions(-)
 create mode 100644 src/ambient-utils/constants/networks/zircuitMainnet.ts
 create mode 100644 src/assets/branding/zircuitBrandAssets.ts
 create mode 100644 src/assets/images/logos/zircuit-light-logo.svg
 create mode 100644 src/assets/images/networks/zircuit-green-icon.svg

diff --git a/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx b/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx
index b77f60a868..a4e16abed6 100644
--- a/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx
+++ b/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx
@@ -20,6 +20,7 @@ import { Text } from '../../../../styled/Common';
 import { RiExternalLinkLine } from 'react-icons/ri';
 import cantoLogo from '../../../../assets/images/networks/canto.png';
 import scrollLogo from '../../../../assets/images/networks/scroll_logo.svg';
+import zircuitLogo from '../../../../assets/images/networks/zircuit-green-icon.svg';
 import blastLogo from '../../../../assets/images/networks/blast_logo.png';
 import blastSepoliaLogo from '../../../../assets/images/networks/blast_sepolia_logo.webp';
 import scrollSepoliaLogo from '../../../../assets/images/networks/scroll_sepolia_logo.webp';
@@ -155,6 +156,33 @@ export default function NetworkSelector(props: propsIF) {
         </NetworkItem>
     );
 
+    const zircuitNetwork: JSX.Element = (
+        <NetworkItem
+            id='zircuit_network_selector'
+            onClick={() => handleClick(chainMap.get('0xbf04'))}
+            key='zircuit'
+            custom={0}
+            variants={ItemEnterAnimation}
+            tabIndex={0}
+        >
+            <ChainNameStatus tabIndex={0} active={chainId === '0xbf04'}>
+                <img
+                    src={zircuitLogo}
+                    alt='scroll network'
+                    width='22px'
+                    height='22px'
+                    style={{ borderRadius: '50%', marginLeft: '-2px' }}
+                />
+                <Text
+                    color={chainId === '0xbf04' ? 'accent1' : 'white'}
+                    style={{ marginLeft: '5px' }}
+                >
+                    {'Zircuit'}
+                </Text>
+            </ChainNameStatus>
+        </NetworkItem>
+    );
+
     // JSX element to select canto network (external link)
     const cantoNetwork: JSX.Element = (
         <NetworkItem
@@ -308,9 +336,13 @@ export default function NetworkSelector(props: propsIF) {
                                   ? blastLogo
                                   : lookupChain(chainId)
                                           .displayName.toLowerCase()
-                                          .includes('sepolia')
-                                    ? sepoliaLogo
-                                    : ETH
+                                          .includes('zircuit')
+                                    ? zircuitLogo
+                                    : lookupChain(chainId)
+                                            .displayName.toLowerCase()
+                                            .includes('sepolia')
+                                      ? sepoliaLogo
+                                      : ETH
                     }
                 >
                     <MenuContent
@@ -320,6 +352,7 @@ export default function NetworkSelector(props: propsIF) {
                         {chainMap.has('0x1') && ethereumNetwork}
                         {chainMap.has('0x13e31') && blastNetwork}
                         {chainMap.has('0x82750') && scrollNetwork}
+                        {chainMap.has('0xbf04') && zircuitNetwork}
                         {includeCanto &&
                             platformName === 'ambient' &&
                             cantoNetwork}
diff --git a/src/ambient-utils/constants/networks/index.ts b/src/ambient-utils/constants/networks/index.ts
index 5cee9a9f6f..bb8e39d2f1 100644
--- a/src/ambient-utils/constants/networks/index.ts
+++ b/src/ambient-utils/constants/networks/index.ts
@@ -2,6 +2,7 @@ import { NetworkIF, TokenIF, chainIds } from '../../types';
 import { ethereumSepolia } from './ethereumSepolia';
 import { ethereumMainnet } from './ethereumMainnet';
 import { scrollMainnet } from './scrollMainnet';
+import { zircuitMainnet } from './zircuitMainnet';
 import { scrollSepolia } from './scrollSepolia';
 import { blastSepolia } from './blastSepolia';
 import { blast } from './blastNetwork';
@@ -12,6 +13,7 @@ import {
     blastBrandAssets,
     scrollBrandAssets,
     futaBrandAssets,
+    zircuitBrandAssets,
 } from '../../../assets/branding';
 
 export const brand: string | undefined =
@@ -21,6 +23,7 @@ const networks: NetworkIF[] = [
     ethereumSepolia,
     ethereumMainnet,
     scrollMainnet,
+    zircuitMainnet,
     scrollSepolia,
     blastSepolia,
     blast,
@@ -46,14 +49,20 @@ export const supportedNetworks: { [x: string]: NetworkIF } =
     brand === 'blast'
         ? getNetworks(Object.keys(blastBrandAssets.networks))
         : brand === 'scroll'
-        ? getNetworks(Object.keys(scrollBrandAssets.networks))
-        : brand === 'futa'
-        ? getNetworks(Object.keys(futaBrandAssets.networks))
-        : brand === 'ambientProduction'
-        ? getNetworks(Object.keys(ambientProductionBrandAssets.networks))
-        : brand === 'ambientTestnet'
-        ? getNetworks(Object.keys(ambientTestnetBrandAssets.networks))
-        : getNetworks(Object.keys(defaultBrandAssets.networks));
+          ? getNetworks(Object.keys(scrollBrandAssets.networks))
+          : brand === 'zircuit'
+            ? getNetworks(Object.keys(zircuitBrandAssets.networks))
+            : brand === 'futa'
+              ? getNetworks(Object.keys(futaBrandAssets.networks))
+              : brand === 'ambientProduction'
+                ? getNetworks(
+                      Object.keys(ambientProductionBrandAssets.networks),
+                  )
+                : brand === 'ambientTestnet'
+                  ? getNetworks(Object.keys(ambientTestnetBrandAssets.networks))
+                  : getNetworks(Object.keys(defaultBrandAssets.networks));
+
+console.log({ brand, supportedNetworks });
 
 export function getDefaultPairForChain(chainId: string): [TokenIF, TokenIF] {
     return [
@@ -65,6 +74,7 @@ export function getDefaultPairForChain(chainId: string): [TokenIF, TokenIF] {
 export { ethereumSepolia };
 export { ethereumMainnet };
 export { scrollMainnet };
+export { zircuitMainnet };
 export { scrollSepolia };
 export { blastSepolia };
 export { blast };
diff --git a/src/ambient-utils/constants/networks/zircuitMainnet.ts b/src/ambient-utils/constants/networks/zircuitMainnet.ts
new file mode 100644
index 0000000000..52970bfdfc
--- /dev/null
+++ b/src/ambient-utils/constants/networks/zircuitMainnet.ts
@@ -0,0 +1,40 @@
+import { lookupChain } from '@crocswap-libs/sdk/dist/context';
+import { scrollETH, scrollUSDC } from '../defaultTokens';
+import { NetworkIF } from '../../types/NetworkIF';
+import { TopPool } from './TopPool';
+import { Provider } from 'ethers';
+import { GCGO_SCROLL_URL } from '../gcgo';
+import { bigIntToFloat } from '@crocswap-libs/sdk';
+
+export const ZIRCUIT_RPC_URL =
+    import.meta.env.VITE_ZIRCUIT_RPC_URL !== undefined
+        ? import.meta.env.VITE_ZIRCUIT_RPC_URL
+        : 'https://zircuit1-mainnet.p2pify.com/';
+
+const chain = {
+    chainId: 48900,
+    name: 'Zircuit',
+    currency: 'ETH',
+    rpcUrl: 'https://zircuit1-mainnet.p2pify.com/',
+    explorerUrl: 'https://explorermainnet.zircuit.com',
+};
+
+export const zircuitMainnet: NetworkIF = {
+    chainId: '0xbf04',
+    graphCacheUrl: GCGO_SCROLL_URL,
+    evmRpcUrl: ZIRCUIT_RPC_URL,
+    chain: chain,
+    shouldPollBlock: true,
+    marketData: '0xbf04',
+    defaultPair: [scrollETH, scrollUSDC],
+    topPools: [
+        new TopPool(scrollETH, scrollUSDC, lookupChain('0x82750').poolIndex),
+    ],
+    getGasPriceInGwei: async (provider?: Provider) => {
+        if (!provider) return 0;
+        return (
+            bigIntToFloat((await provider.getFeeData()).gasPrice || BigInt(0)) *
+            1e-9
+        );
+    },
+};
diff --git a/src/ambient-utils/types/chainIds.ts b/src/ambient-utils/types/chainIds.ts
index 5b6e076f71..d105f2d053 100644
--- a/src/ambient-utils/types/chainIds.ts
+++ b/src/ambient-utils/types/chainIds.ts
@@ -5,4 +5,5 @@ export type chainIds =
     | '0xaa36a7'
     | '0xa0c71fd'
     | '0x8274f'
-    | '0x13e31';
+    | '0x13e31'
+    | '0xbf04';
diff --git a/src/assets/branding/ambientProductionBrandAssets.ts b/src/assets/branding/ambientProductionBrandAssets.ts
index c21919ef88..6b9069cd7d 100644
--- a/src/assets/branding/ambientProductionBrandAssets.ts
+++ b/src/assets/branding/ambientProductionBrandAssets.ts
@@ -2,6 +2,7 @@ import { brandIF } from './types';
 import large from '../images/logos/large.svg';
 import scrollLogo from '../../assets/images/logos/scroll_brand_logo.svg';
 import blastLogo from '../../assets/images/logos/blast_logo.svg';
+import zircuitLogo from '../../assets/images/logos/zircuit-light-logo.svg';
 
 export const ambientProductionBrandAssets: brandIF = {
     networks: {
@@ -28,6 +29,15 @@ export const ambientProductionBrandAssets: brandIF = {
                 { content: blastLogo, processAs: 'image' },
             ],
         },
+        // zircuit mainnet
+        '0xbf04': {
+            color: 'purple_dark',
+            hero: [
+                { content: 'ambient', processAs: 'text' },
+                { content: '×', processAs: 'separator' },
+                { content: zircuitLogo, processAs: 'image' },
+            ],
+        },
     },
     platformName: 'ambient',
     fontSet: 'ambient',
diff --git a/src/assets/branding/defaultBrandAssets.ts b/src/assets/branding/defaultBrandAssets.ts
index 23cea90cf4..f4703b97fb 100644
--- a/src/assets/branding/defaultBrandAssets.ts
+++ b/src/assets/branding/defaultBrandAssets.ts
@@ -2,6 +2,7 @@ import { brandIF } from './types';
 import large from '../images/logos/large.svg';
 import scrollLogo from '../../assets/images/logos/scroll_brand_logo.svg';
 import blastLogo from '../../assets/images/logos/blast_logo.svg';
+import zircuitLogo from '../../assets/images/logos/zircuit-light-logo.svg';
 
 export const defaultBrandAssets: brandIF = {
     networks: {
@@ -51,6 +52,15 @@ export const defaultBrandAssets: brandIF = {
                 { content: blastLogo, processAs: 'image' },
             ],
         },
+        // zircuit mainnet
+        '0xbf04': {
+            color: 'purple_dark',
+            hero: [
+                { content: 'ambient', processAs: 'text' },
+                { content: '×', processAs: 'separator' },
+                { content: zircuitLogo, processAs: 'image' },
+            ],
+        },
     },
     platformName: 'ambient',
     fontSet: 'ambient',
diff --git a/src/assets/branding/index.ts b/src/assets/branding/index.ts
index 5105d02d23..1dcd1187b3 100644
--- a/src/assets/branding/index.ts
+++ b/src/assets/branding/index.ts
@@ -3,4 +3,5 @@ export { ambientProductionBrandAssets } from './ambientProductionBrandAssets';
 export { ambientTestnetBrandAssets } from './ambientTestnetBrandAssets';
 export { blastBrandAssets } from './blastBrandAssets';
 export { scrollBrandAssets } from './scrollBrandAssets';
+export { zircuitBrandAssets } from './zircuitBrandAssets';
 export { futaBrandAssets } from './futaBrandAssets';
diff --git a/src/assets/branding/zircuitBrandAssets.ts b/src/assets/branding/zircuitBrandAssets.ts
new file mode 100644
index 0000000000..1d1b8b4107
--- /dev/null
+++ b/src/assets/branding/zircuitBrandAssets.ts
@@ -0,0 +1,23 @@
+import { brandIF } from './types';
+import large from '../images/logos/large.svg';
+import zircuitLogo from '../../assets/images/logos/zircuit-light-logo.svg';
+
+export const zircuitBrandAssets: brandIF = {
+    networks: {
+        // zircuit mainnet
+        '0xbf04': {
+            color: 'purple_dark',
+            hero: [
+                { content: 'ambient', processAs: 'text' },
+                { content: '×', processAs: 'separator' },
+                { content: zircuitLogo, processAs: 'image' },
+            ],
+        },
+    },
+    platformName: 'zircuit',
+    fontSet: 'ambient',
+    showPoints: true,
+    showDexStats: true,
+    headerImage: large as string,
+    includeCanto: false,
+};
diff --git a/src/assets/images/logos/zircuit-light-logo.svg b/src/assets/images/logos/zircuit-light-logo.svg
new file mode 100644
index 0000000000..6e0356b1a5
--- /dev/null
+++ b/src/assets/images/logos/zircuit-light-logo.svg
@@ -0,0 +1,18 @@
+<svg width="732" height="200" viewBox="0 0 732 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M256.973 144.808L327.932 49.9662H257.92V31.3662H354.422V48.1052L283.463 142.952H355.369V161.547H256.973V144.808Z" fill="#F4F1E5"/>
+<path d="M364.827 31.3662H385.642V50.8919H364.827V31.3662ZM365.774 68.5614H384.695V161.547H365.774V68.5614Z" fill="#F4F1E5"/>
+<path d="M396.052 68.5645H412.137L414.031 76.934H414.977C418.195 73.4001 421.222 68.5645 432.956 68.5645H449.988V85.3035H434.85C421.605 85.3035 414.982 91.812 414.982 104.646V161.555H396.062V68.5693L396.052 68.5645Z" fill="#F4F1E5"/>
+<path d="M539.856 128.998C536.83 142.946 524.718 163.402 496.334 163.402C467.951 163.402 449.03 143.876 449.03 115.05C449.03 86.2249 468.897 66.6992 496.334 66.6992C523.771 66.6992 536.83 87.3434 539.856 100.172H520.936C517.909 91.8029 510.717 83.4334 496.339 83.4334C480.254 83.4334 467.956 95.708 467.956 115.046C467.956 134.383 480.254 146.663 496.339 146.663C511.478 146.663 518.856 136.432 520.936 128.998H539.856Z" fill="#F4F1E5"/>
+<path d="M549.316 68.5645H568.236V124.355C568.236 136.441 577.886 146.672 590.944 146.672C605.136 146.672 615.546 136.441 615.546 124.355V68.5645H634.466V161.55H617.434L615.541 152.25H614.594C612.514 154.294 610.243 156.155 607.594 157.828C603.051 160.619 596.051 163.406 587.157 163.406C564.449 163.406 549.311 148.716 549.311 124.355V68.5645H549.316Z" fill="#F4F1E5"/>
+<path d="M646.76 31.3662H667.574V50.8919H646.76V31.3662ZM647.707 68.5614H666.628V161.547H647.707V68.5614Z" fill="#F4F1E5"/>
+<path d="M691.229 86.2301H676.09V68.5654H691.229V42.5312H710.149V68.5654H731.91V86.2301H710.149V139.229C710.149 142.946 712.043 144.807 715.825 144.807H731.91V161.546H712.043C698.607 161.546 691.229 154.107 691.229 142.02V86.2301Z" fill="#F4F1E5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 100.004C0 44.7722 44.6407 0 99.7008 0C154.771 0 199.411 44.7722 199.407 99.9995C199.407 119.562 193.804 137.81 184.126 153.219C181.457 157.465 178.484 161.495 175.227 165.283L99.8333 89.6674L35.0012 154.686L24.2973 165.421C21.0302 161.642 18.0476 157.618 15.379 153.377C5.6365 137.938 0 119.63 0 100.004ZM172.696 138.971L173.608 137.141L173.613 137.146C179.333 125.702 182.355 112.856 182.355 100.004C182.355 54.2974 145.278 17.1118 99.7057 17.1118C54.133 17.1118 17.0616 54.2974 17.0616 100.004C17.0616 112.924 20.1128 125.825 25.8867 137.313L26.804 139.133L99.8333 65.889L172.696 138.971ZM99.7048 200C124.527 200 147.235 190.903 164.689 175.848V175.843L99.8372 110.8L34.8629 175.961C52.2924 190.953 74.8826 200 99.7048 200Z" fill="url(#paint0_linear_6469_19411)"/>
+<defs>
+<linearGradient id="paint0_linear_6469_19411" x1="99.7033" y1="-1.26496e-08" x2="99.9993" y2="200" gradientUnits="userSpaceOnUse">
+<stop stop-color="#169E00"/>
+<stop offset="0.49" stop-color="#00C537"/>
+<stop offset="1" stop-color="#00B1C9"/>
+</linearGradient>
+</defs>
+</svg>
+
diff --git a/src/assets/images/networks/zircuit-green-icon.svg b/src/assets/images/networks/zircuit-green-icon.svg
new file mode 100644
index 0000000000..25c6ee8513
--- /dev/null
+++ b/src/assets/images/networks/zircuit-green-icon.svg
@@ -0,0 +1,11 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" rx="256" fill="#092306"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50 256.51C50 142.455 142.183 50 255.883 50C369.603 50 461.787 142.455 461.776 256.5C461.776 296.896 450.208 334.579 430.221 366.4C424.711 375.168 418.572 383.488 411.845 391.312L256.157 235.164L122.278 369.427L100.174 391.596C93.4275 383.793 87.2685 375.482 81.7577 366.725C61.6394 334.843 50 297.038 50 256.51ZM406.618 336.976L408.503 333.197L408.513 333.207C420.324 309.575 426.564 283.048 426.564 256.51C426.564 162.125 350.001 85.3361 255.893 85.3361C161.785 85.3361 85.2323 162.125 85.2323 256.51C85.2323 283.19 91.5332 309.829 103.456 333.553L105.351 337.312L256.157 186.061L406.618 336.976ZM255.891 463C307.149 463 354.041 444.214 390.084 413.125V413.115L256.165 278.801L121.992 413.359C157.984 444.316 204.633 463 255.891 463Z" fill="url(#paint0_linear_6452_19271)"/>
+<defs>
+<linearGradient id="paint0_linear_6452_19271" x1="255.888" y1="50" x2="256.499" y2="463" gradientUnits="userSpaceOnUse">
+<stop stop-color="#169E00"/>
+<stop offset="0.49" stop-color="#00C537"/>
+<stop offset="1" stop-color="#00B1C9"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/contexts/BrandContext.tsx b/src/contexts/BrandContext.tsx
index 5189648484..ddb4553089 100644
--- a/src/contexts/BrandContext.tsx
+++ b/src/contexts/BrandContext.tsx
@@ -10,6 +10,7 @@ import {
     ambientProductionBrandAssets,
     ambientTestnetBrandAssets,
     futaBrandAssets,
+    zircuitBrandAssets,
 } from '../assets/branding';
 import { UserDataContext } from './UserDataContext';
 
@@ -67,6 +68,8 @@ export const BrandContextProvider = (props: { children: ReactNode }) => {
                 return blastBrandAssets;
             case 'scroll':
                 return scrollBrandAssets;
+            case 'zircuit':
+                return zircuitBrandAssets;
             case 'futa':
                 return futaBrandAssets;
             case 'ambientProduction':
diff --git a/src/index.tsx b/src/index.tsx
index 3f895967b9..f1332161bd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,6 +15,7 @@ import {
     WALLETCONNECT_PROJECT_ID,
 } from './ambient-utils/constants';
 import scrollLogo from './assets/images/networks/scroll_logo.webp';
+import zircuitLogo from './assets/images/networks/zircuit-green-icon.svg';
 import blastLogo from './assets/images/networks/blast_logo.png';
 import blastSepoliaLogo from './assets/images/networks/blast_sepolia_logo.webp';
 import scrollSepoliaLogo from './assets/images/networks/scroll_sepolia_logo.webp';
@@ -68,6 +69,7 @@ const modal = createWeb3Modal({
         534351: scrollSepoliaLogo,
         534352: scrollLogo,
         11155111: sepoliaLogo,
+        48900: zircuitLogo,
     },
     termsConditionsUrl: '/terms',
     privacyPolicyUrl: '/privacy',