add zircuit network definition

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';
@@ -192,6 +193,33 @@ export default function NetworkSelector() {
         </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
@@ -345,9 +373,13 @@ export default function NetworkSelector() {
                                   ? blastLogo
                                   : lookupChain(chainId)
                                           .displayName.toLowerCase()
-                                          .includes('sepolia')
-                                    ? sepoliaLogo
-                                    : ETH
+                                          .includes('zircuit')
+                                    ? zircuitLogo
+                                    : lookupChain(chainId)
+                                            .displayName.toLowerCase()
+                                            .includes('sepolia')
+                                      ? sepoliaLogo
+                                      : ETH
                     }
                 >
                     <MenuContent
@@ -357,6 +389,7 @@ export default function NetworkSelector() {
                         {chainMap.has('0x1') && ethereumNetwork}
                         {chainMap.has('0x13e31') && blastNetwork}
                         {chainMap.has('0x82750') && scrollNetwork}
+                        {chainMap.has('0xbf04') && zircuitNetwork}
                         {includeCanto &&
                             platformName === 'ambient' &&
                             cantoNetwork}

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 };

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
+        );
+    },
+};

src/ambient-utils/types/chainIds.ts

@@ -5,4 +5,5 @@ export type chainIds =
     | '0xaa36a7'
     | '0xa0c71fd'
     | '0x8274f'
-    | '0x13e31';
+    | '0x13e31'
+    | '0xbf04';

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: {
@@ -23,6 +24,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' },
+            ],
+        },
         // ethereum mainnet
         '0x1': {
             color: 'purple_dark',

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',

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';

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,
+};

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':

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',