SD-95: Add base sepolia

Author: rAskVAL

src/domains/chains/components/ChainSelector.tsx

@@ -1,10 +1,10 @@
 import { useMediaQuery } from '@react-hookz/web';
 import { useAppKitNetwork } from '@reown/appkit/react';
 import styled from 'styled-components';
-import { objectEntries } from 'tsafe';
 
 import ChainIcon from 'src/domains/chains/components/ChainIcon';
-import chainsDefinitions, { Definition } from 'src/domains/chains/utils/definitions';
+import { Definition } from 'src/domains/chains/utils/definitions';
+import supportedChains from 'src/domains/chains/utils/supportedChains';
 import useChain from 'src/domains/chains/utils/useChain';
 import Button from 'src/domains/misc/components/Button';
 import CIcon from 'src/domains/misc/components/CIcon';
@@ -15,17 +15,16 @@ import vars from 'src/domains/styling/utils/vars';
 
 const CHAIN_SELECTOR_WIDTH = 246;
 
-const mainnetChains = objectEntries(chainsDefinitions).map(([, net]) => net.mainnet);
-const testnetChains = objectEntries(chainsDefinitions).map(([, net]) => net.testnet);
+const { testnet, mainnet } = supportedChains;
 
 const ChainSelector = () => {
   const chainConfig = useChain();
   const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINTS.sm})`);
   const { switchNetwork } = useAppKitNetwork();
-  const isSelectedChainTestnet = testnetChains.some(c => c.id === chainConfig?.id);
+  const isSelectedChainTestnet = testnet.some(c => c.id === chainConfig?.id);
 
   const renderOption = (chain: Definition) => {
-    const isTestnet = testnetChains.some(c => c.id === chain.id);
+    const isTestnet = testnet.some(c => c.id === chain.id);
 
     return {
       onClick: () => void switchNetwork(chain),
@@ -44,8 +43,8 @@ const ChainSelector = () => {
     <StyledSelectBox
       align="start"
       sections={[
-        { title: 'Mainnet', options: mainnetChains.map(renderOption) },
-        { title: 'Testnet', options: testnetChains.map(renderOption) },
+        { title: 'Mainnet', options: mainnet.map(renderOption) },
+        { title: 'Testnet', options: testnet.map(renderOption) },
       ]}
     >
       <StyledButton variant="secondary">

src/domains/chains/utils/clients/wagmiAdapter.ts

@@ -1,12 +1,8 @@
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
-import { objectEntries } from 'tsafe';
 
-import chainsDefinitions from 'src/domains/chains/utils/definitions';
+import supportedChains from 'src/domains/chains/utils/supportedChains';
 
-const mainnetNetworks = objectEntries(chainsDefinitions).map(([_, network]) => network.mainnet);
-const testnetNetworks = objectEntries(chainsDefinitions).map(([_, network]) => network.testnet);
-
-const networks = [...mainnetNetworks, ...testnetNetworks];
+const { all: networks } = supportedChains;
 const projectId = import.meta.env.PUBLIC_VAR_REOWN_PROJECT_ID;
 
 export default new WagmiAdapter({

src/domains/chains/utils/definitions/chains/base/base.ts

@@ -1,44 +1,24 @@
-import { base, baseSepolia } from 'viem/chains';
+import { baseSepolia } from 'viem/chains';
 
+import CBtcIcon from '../../commonTokensIcons/cBtc.svg?react';
 import NativeTokenIcon from '../../commonTokensIcons/eth.svg?react';
 import UsdcIcon from '../../commonTokensIcons/usdc.svg?react';
-import UsdtIcon from '../../commonTokensIcons/usdt.svg?react';
-import WBtcIcon from '../../commonTokensIcons/wBtc.svg?react';
-import WEthIcon from '../../commonTokensIcons/wBtc.svg?react';
 import { ChainConfig } from '../../definitions';
 
 import ChainIcon from './base.svg?react';
 
 const config: ChainConfig = {
-  mainnet: {
-    ...base,
-    ChainIcon,
-    NativeTokenIcon,
-    whitelistedTokens: {
-      '0x0555E30da8f98308EdB960aa94C0Db47230d2B9c': { icon: WBtcIcon },
-      '0xf28587b974BF0323d1f17F65eF33D19b66f4a97d': { icon: WBtcIcon },
-      '0x4200000000000000000000000000000000000006': { icon: WEthIcon },
-      '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913': { icon: UsdcIcon },
-      '0xfde4C96c8593536E31F229EA8f37b2ADa2699bb2': { icon: UsdtIcon },
-    },
-    urlPathSegment: 'base',
-  },
   testnet: {
     ...baseSepolia,
     shielderConfig: {
-      shielderContractAddress: '0x72B16db09D234A69a7e2df05503923A885eCe0Ea',
-      // TODO(SD-31): Replace the placeholder relayer URL with chain-specific URLs once provided.
-      // https://cardinal-cryptography.atlassian.net/browse/SD-31
-      relayerUrl: 'https://shielder-relayer-dev.test.azero.dev',
+      shielderContractAddress: '0x2098a5f59DAB63F1a2aB7C0715DA437D1efB012B',
+      relayerUrl: 'https://shielder-relayer-v2.test.azero.dev/base-testnet',
     },
     ChainIcon,
     NativeTokenIcon,
     whitelistedTokens: {
-      '0x1bf0aeb4C1A1C0896887814d679defcc1325EdE3': { icon: WBtcIcon },
-      '0xE707a4609c5c34b6F7328dd674DBb0823E575963': { icon: WBtcIcon },
-      '0x4200000000000000000000000000000000000006': { icon: WEthIcon },
-      '0xf7464321dE37BdE4C03AAeeF6b1e7b71379A9a64': { icon: UsdcIcon },
-      '0xd7e9C75C6C05FdE929cAc19bb887892de78819B7': { icon: UsdtIcon },
+      '0x31e9bF3Bd30204360C966E0cE4e33ED0A74C8556': { icon: CBtcIcon },
+      '0xda3699eb401Ce640bdBfCE148A9D00FA652409e1': { icon: UsdcIcon },
     },
     urlPathSegment: 'base-sepolia',
   },

src/domains/chains/utils/definitions/commonTokensIcons/cBtc.svg

@@ -5,6 +5,7 @@ import { NetworkEnvironment } from 'src/domains/chains/types/misc';
 
 import alephZero from './chains/alephZero';
 import arbitrum from './chains/arbitrum';
+import base from './chains/base';
 
 export type Definition = {
   id: number,
@@ -21,10 +22,10 @@ export type Definition = {
   urlPathSegment: string,
 } & Pick<Chain, 'id' | 'nativeCurrency' | 'rpcUrls' | 'blockExplorers'>;
 
-export type ChainConfig = Record<NetworkEnvironment, Definition>;
+export type ChainConfig = Partial<Record<NetworkEnvironment, Definition>>;
 
 export default {
   alephZero,
   arbitrum,
-  // base,
+  base,
 } satisfies Record<string, ChainConfig>;

src/domains/chains/utils/definitions/definitions.ts

@@ -1,11 +1,15 @@
 import { objectEntries } from 'tsafe';
 
 import definitions from 'src/domains/chains/utils/definitions';
+import isDefined from 'src/domains/misc/utils/isDefined';
 
 export default (chainId: number | string) => {
   const configEntry = objectEntries(definitions)
-    .flatMap(([chain, chainGroup]) =>
-      objectEntries(chainGroup).flatMap(([_, definition]) => ({ ...definition, chain }))
+    .flatMap(([chain, group]) =>
+      objectEntries(group)
+        .map(([, def]) => def)
+        .filter(isDefined)
+        .map(def => ({ ...def, chain }))
     )
     .find(({ id }) => id === chainId);
 

src/domains/chains/utils/getChainConfigById.ts

@@ -0,0 +1,14 @@
+import { objectEntries } from 'tsafe';
+
+import isDefined from 'src/domains/misc/utils/isDefined';
+
+import chainsDefinitions from './definitions';
+
+const mainnetChains = objectEntries(chainsDefinitions).map(([, net]) => net.mainnet).filter(isDefined);
+const testnetChains = objectEntries(chainsDefinitions).map(([, net]) => net.testnet).filter(isDefined);
+
+export default {
+  mainnet: mainnetChains,
+  testnet: testnetChains,
+  all: [...mainnetChains, ...testnetChains],
+};

src/domains/chains/utils/supportedChains.ts

@@ -15,5 +15,5 @@ export default () => {
     }))
   );
 
-  return configs.find(({ config }) => config.id === connectedChain.id)?.networkEnvironment;
+  return configs.find(({ config }) => config && config.id === connectedChain.id)?.networkEnvironment;
 };

src/domains/chains/utils/useConnectedChainNetworkEnvironment.ts

@@ -1,15 +1,12 @@
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useRef } from 'react';
-import { objectEntries } from 'tsafe';
 import { useSwitchChain } from 'wagmi';
 
-import chainsDefinitions from 'src/domains/chains/utils/definitions';
+import supportedChains from 'src/domains/chains/utils/supportedChains';
 import useChain from 'src/domains/chains/utils/useChain';
 import router from 'src/domains/routing/utils/router';
 
-const mainnetChains = objectEntries(chainsDefinitions).map(([_, network]) => network.mainnet);
-const testnetChains = objectEntries(chainsDefinitions).map(([_, network]) => network.testnet);
-const allChainsDefinitions = [...mainnetChains, ...testnetChains];
+const { all: allChainsDefinitions } = supportedChains;
 
 const useSyncChainWithUrl = () => {
   const initialChainPath = useRef<string | null>(null);

src/domains/chains/utils/useSyncChainWithUrl.ts

@@ -0,0 +1,3 @@
+export default <T>(
+  v: T | null | undefined,
+): v is NonNullable<T> => v != null;