Using ChainId enum when referencing chain ids

0xsequence · May 23, 2024 · eceaf6a · eceaf6a
1 parent 8670159
commit eceaf6a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 17 deletions.
diff --git a/examples/next/src/app/components/Connected.tsx b/examples/next/src/app/components/Connected.tsx
@@ -2,7 +2,7 @@ import { Box, Text, Card, Button, Select, SignoutIcon } from '@0xsequence/design
 import { signEthAuthProof, useIndexerClient, useStorage, useWaasFeeOptions, validateEthProof } from '@0xsequence/kit'
 import { CheckoutSettings } from '@0xsequence/kit-checkout'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
-import { allNetworks } from '@0xsequence/network'
+import { ChainId, allNetworks } from '@0xsequence/network'
 import { ComponentProps, useEffect, useState } from 'react'
 import { formatUnits, parseUnits } from 'viem'
 import {
@@ -206,10 +206,10 @@ export const Connected = () => {
   // }
 
   const onSwitchNetwork = () => {
-    if (chainId === 421614) {
-      switchChain({ chainId: 42170 })
+    if (chainId === ChainId.ARBITRUM_SEPOLIA) {
+      switchChain({ chainId: ChainId.ARBITRUM_NOVA })
     } else {
-      switchChain({ chainId: 421614 })
+      switchChain({ chainId: ChainId.ARBITRUM_SEPOLIA })
     }
 
     setLastTxnDataHash(undefined)
@@ -486,7 +486,7 @@ export const Alert = ({ title, description, secondaryDescription, variant, butto
 export const getCheckoutSettings = (_address?: string) => {
   const checkoutSettings: CheckoutSettings = {
     cryptoCheckout: {
-      chainId: 137,
+      chainId: ChainId.POLYGON,
       triggerTransaction: async () => {
         console.log('triggered transaction')
       },
@@ -497,13 +497,13 @@ export const getCheckoutSettings = (_address?: string) => {
     },
     orderSummaryItems: [
       {
-        chainId: 137,
+        chainId: ChainId.POLYGON,
         contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
         tokenId: '66597',
         quantityRaw: '100'
       },
       {
-        chainId: 137,
+        chainId: ChainId.POLYGON,
         contractAddress: '0x624e4fa6980afcf8ea27bfe08e2fb5979b64df1c',
         tokenId: '1741',
         quantityRaw: '100'

diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx
@@ -29,7 +29,7 @@ import {
 } from '@0xsequence/kit'
 import { useCheckoutModal } from '@0xsequence/kit-checkout'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
-import { allNetworks } from '@0xsequence/network'
+import { ChainId, allNetworks } from '@0xsequence/network'
 import { ethers } from 'ethers'
 import { AnimatePresence } from 'framer-motion'
 import React, { useEffect } from 'react'
@@ -369,7 +369,7 @@ export const Homepage = () => {
         address || '',
         checkoutTokenContractAddress,
         checkoutTokenId,
-        137,
+        ChainId.POLYGON,
         1,
         true
       )
@@ -382,10 +382,10 @@ export const Homepage = () => {
   }
 
   const onSwitchNetwork = () => {
-    if (chainId === 421614) {
-      switchChain({ chainId: 42170 })
+    if (chainId === ChainId.ARBITRUM_SEPOLIA) {
+      switchChain({ chainId: ChainId.ARBITRUM_NOVA })
     } else {
-      switchChain({ chainId: 421614 })
+      switchChain({ chainId: ChainId.ARBITRUM_SEPOLIA })
     }
 
     setLastTxnDataHash(undefined)

diff --git a/packages/checkout/src/views/TransactionSuccess.tsx b/packages/checkout/src/views/TransactionSuccess.tsx
@@ -1,5 +1,6 @@
 import { sequence } from '0xsequence'
 import { Box, CheckmarkIcon, Text } from '@0xsequence/design-system'
+import { ChainId } from '@0xsequence/network'
 import React, { useEffect } from 'react'
 
 import { TransactionSuccessNavigation } from '../contexts'
@@ -10,7 +11,7 @@ export const TransactionSuccess = () => {
   const nav = useNavigation()
   const navigation = nav.navigation as TransactionSuccessNavigation
 
-  const chainId = settings?.sardineCheckout?.chainId || 137
+  const chainId = settings?.sardineCheckout?.chainId || ChainId.POLYGON
   const network = sequence.network.allNetworks.find(n => n.chainId === chainId)
 
   useEffect(() => {

diff --git a/packages/kit/src/components/KitProvider/index.tsx b/packages/kit/src/components/KitProvider/index.tsx
@@ -2,6 +2,7 @@
 
 import { sequence } from '0xsequence'
 import { Box, Button, Card, Collapsible, Modal, Text, ThemeProvider } from '@0xsequence/design-system'
+import { ChainId } from '@0xsequence/network'
 import { GoogleOAuthProvider } from '@react-oauth/google'
 import { ethers } from 'ethers'
 import { AnimatePresence } from 'framer-motion'
@@ -39,7 +40,7 @@ export const KitProvider = (props: KitConnectProviderProps) => {
     position = 'center',
     displayedAssets: displayedAssetsSetting = [],
     ethAuth = {} as EthAuthSettings,
-    disableAnalytics = false,
+    disableAnalytics = false
   } = config
 
   const defaultAppName = signIn.projectName || 'app'
@@ -249,7 +250,7 @@ export const KitProvider = (props: KitConnectProviderProps) => {
                                   <TxnDetails
                                     address={address ?? ''}
                                     txs={pendingRequestConfirmation.txs ?? []}
-                                    chainId={pendingRequestConfirmation.chainId ?? 137}
+                                    chainId={pendingRequestConfirmation.chainId ?? ChainId.POLYGON}
                                   />
 
                                   <Collapsible label="Transaction data" marginTop="4">

diff --git a/packages/kit/src/utils/tokens.ts b/packages/kit/src/utils/tokens.ts
@@ -117,7 +117,7 @@ export const defaultNativeTokenInfo = (chainId: number, wagmiChains: readonly [C
       name: foundChain.nativeCurrency.name,
       symbol: foundChain.nativeCurrency.symbol,
       decimals: foundChain.nativeCurrency.decimals,
-      logoURI: nativeTokenInfos[1].logoURI,
+      logoURI: nativeTokenInfos[ChainId.MAINNET]!.logoURI,
       blockExplorerName: foundChain.blockExplorers?.default.name,
       blockExplorerUrl: foundChain.blockExplorers?.default.url
     }
@@ -127,5 +127,5 @@ export const defaultNativeTokenInfo = (chainId: number, wagmiChains: readonly [C
 }
 
 export const getNativeTokenInfoByChainId = (chainId: number, wagmiChains: readonly [Chain, ...Chain[]]) => {
-  return nativeTokenInfos[chainId] || defaultNativeTokenInfo(chainId, wagmiChains) || nativeTokenInfos[1]
+  return nativeTokenInfos[chainId] || defaultNativeTokenInfo(chainId, wagmiChains) || nativeTokenInfos[ChainId.MAINNET]!
 }