fix networks showing as mainnet

examples/react/src/App.tsx

@@ -7,7 +7,7 @@ import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
 import Homepage from './components/Homepage'
 import { WagmiConfig, createConfig, configureChains } from 'wagmi'
 import { publicProvider } from 'wagmi/providers/public'
-import { mainnet, polygon } from 'wagmi/chains'
+import { mainnet, polygon, arbitrumGoerli } from 'wagmi/chains'
 
 import '@0xsequence/design-system/styles.css'
 
@@ -37,23 +37,23 @@ function App() {
       // logoUrlDarkMode: 'sw-logo-white.svg',
       // logoUrlLightMode: 'sw-logo-black.svg',
     },
-    displayedAssets: [
-      // Matic token
-      {
-        contractAddress: ethers.constants.AddressZero,
-        chainId: 137,
-      },
-      // USDC token
-      {
-        contractAddress: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
-        chainId: 137,
-      },
-      // skyweaver collectibles
-      {
-        contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
-        chainId: 137
-      }
-    ],
+    // displayedAssets: [
+    //   // Matic token
+    //   {
+    //     contractAddress: ethers.constants.AddressZero,
+    //     chainId: 137,
+    //   },
+    //   // USDC token
+    //   {
+    //     contractAddress: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+    //     chainId: 137,
+    //   },
+    //   // skyweaver collectibles
+    //   {
+    //     contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
+    //     chainId: 137
+    //   }
+    // ],
   }
 
   return (

examples/react/src/components/Footer.tsx

@@ -28,9 +28,10 @@ export const Footer = () => {
   const Socials = () => {
     return (
       <Box gap="4" justifyContent="center" alignItems="center">
-        {socialLinks.map(socialLink => {
+        {socialLinks.map((socialLink, index) => {
           return (
             <Box
+              key={index}
               className={sharedStyles.clickable}
               onClick={() => window.open(socialLink.url)}
             >

packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { ethers } from 'ethers'
+import { useNetwork } from 'wagmi'
 import { Box, Card, Image, Text } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
-
 import { CoinIcon } from '../../../shared/components/CoinIcon'
 import { Skeleton } from '../../../shared/components/Skeleton'
 
@@ -22,6 +22,7 @@ export const OrderSummaryItem = ({
   quantityRaw,
   chainId,
 }: OrderSummaryItem) => {
+  const { chains = [] } = useNetwork()
   const {
     data: tokenMetadata,
     isLoading: isTokenMetadataLoading,
@@ -47,7 +48,7 @@ export const OrderSummaryItem = ({
     )
   }
 
-  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
   const { name = 'unknown', image, decimals = 0 } = tokenMetadata || {}
 
   const {

packages/checkout/src/views/CheckoutSelection/index.tsx

@@ -12,7 +12,7 @@ import {
 
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 
-import { useAccount } from 'wagmi'
+import { useAccount, useNetwork } from 'wagmi'
 
 import { OrderSummaryItem } from './component/OrderSummaryItem'
 
@@ -32,6 +32,7 @@ import {
 import * as styles from './styles.css'
 
 export const CheckoutSelection = () => {
+  const { chains = [] } = useNetwork()
   const { setNavigation } = useNavigation()
   const { closeCheckout, settings } = useCheckoutModal()
   const { address: accountAddress } = useAccount()
@@ -60,7 +61,7 @@ export const CheckoutSelection = () => {
   const isLoading = (contractInfoLoading || balancesLoading) && cryptoCheckoutSettings
 
   const isNativeToken  = compareAddress(cryptoCheckoutSettings?.coinQuantity?.contractAddress || '', ethers.constants.AddressZero)
-  const nativeTokenInfo = getNativeTokenInfoByChainId(cryptoCheckoutSettings?.chainId || 1)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(cryptoCheckoutSettings?.chainId || 1, chains)
 
   const coinDecimals = isNativeToken ? nativeTokenInfo.decimals : contractInfoData?.decimals || 0
   const coinSymbol = isNativeToken ? nativeTokenInfo.symbol : contractInfoData?.symbol || 'COIN'

packages/kit/src/utils/tokens.ts

@@ -1,3 +1,5 @@
+import { Chain } from 'wagmi'
+
 export interface NativeTokenInfo {
   name: string,
   symbol: string,
@@ -99,6 +101,24 @@ export const getChainIdList = () => {
   return Object.keys(nativeTokenInfos).map(chainId => parseInt(chainId))
 }
 
-export const getNativeTokenInfoByChainId = (chainId: number) => {
-  return nativeTokenInfos[chainId] || nativeTokenInfos[1]
+
+export const defaultNativeTokenInfo = (chainId: number, wagmiChains: Chain[]) => {
+  const foundChain = wagmiChains.find(chain => chain.id === chainId)
+
+  if (foundChain) {
+    return {
+      name: foundChain.name,
+      symbol: foundChain.nativeCurrency.symbol,
+      decimals: foundChain.nativeCurrency.decimals,
+      logoURI: nativeTokenInfos[1].logoURI,
+      blockExplorerName: foundChain.blockExplorers?.default.name,
+      blockExplorerUrl: foundChain.blockExplorers?.default.url
+    }
+  }
+
+  return
+}
+
+export const getNativeTokenInfoByChainId = (chainId: number, wagmiChains: Chain[]) => {
+  return nativeTokenInfos[chainId] || defaultNativeTokenInfo(chainId, wagmiChains) || nativeTokenInfos[1]
 }

packages/wallet/src/shared/NetworkBadge.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Box, Image, Text } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, getChainColor, getChainBGColor } from '@0xsequence/kit'
+import { useNetwork } from 'wagmi'
 
 import {
   getNetworkConfigAndClients,
@@ -14,8 +15,9 @@ interface NetworkBadgeProps {
 export const NetworkBadge = ({
   chainId
 }: NetworkBadgeProps) => {
+  const { chains = [] }  = useNetwork()
   const { network } = getNetworkConfigAndClients(chainId)
-  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
   const chainColor = getChainColor(chainId)
   const chainBGColor = getChainBGColor(chainId)
 

packages/wallet/src/shared/SendItemInfo.tsx

@@ -3,6 +3,7 @@ import { Box, Image, Text, vars } from '@0xsequence/design-system'
 import React from 'react'
 import { Skeleton } from './Skeleton'
 import { ethers } from 'ethers'
+import { useNetwork } from 'wagmi'
 
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 
@@ -50,10 +51,11 @@ export const SendItemInfo = ({
   chainId,
   showSquareImage,
 }: SendItemInfoProps) => {
+  const { chains = [] } = useNetwork()
   const { fiatCurrency } = useSettings()
   const formattedBalance = ethers.utils.formatUnits(balance, decimals)
   const balanceDisplayed = formatDisplay(formattedBalance)
-  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
 
   return (
     <Box alignItems="flex-end" justifyContent="space-between">

packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx

@@ -13,6 +13,7 @@ import {
   vars
 } from '@0xsequence/design-system'
 import dayjs from 'dayjs'
+import { useNetwork } from 'wagmi'
 
 import * as sharedStyles from '../../shared/styles.css'
 import { Skeleton } from '../../shared/Skeleton'
@@ -35,6 +36,7 @@ interface TransactionHistoryItemProps {
 export const TransactionHistoryItem = ({
   transaction
 }: TransactionHistoryItemProps) => {
+  const { chains = [] } = useNetwork()
   const { fiatCurrency } = useSettings()
   const { setNavigation } = useNavigation()
 
@@ -74,7 +76,7 @@ export const TransactionHistoryItem = ({
 
   const { transfers } = transaction
 
-  const nativeTokenInfo = getNativeTokenInfoByChainId(transaction.chainId)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(transaction.chainId, chains)
 
   const getTransactionIconByType = (transferType: TxnTransferType) => {
     switch(transferType) {
@@ -162,7 +164,7 @@ export const TransactionHistoryItem = ({
 
         </Box>
         {amounts.map((amount, index) => {
-          const nativeTokenInfo = getNativeTokenInfoByChainId(transaction.chainId)
+          const nativeTokenInfo = getNativeTokenInfoByChainId(transaction.chainId, chains)
           const isNativeToken = compareAddress(transfer.contractAddress, ethers.constants.AddressZero)
           const isCollectible = transfer.contractInfo?.type === 'ERC721' || transfer.contractInfo?.type === 'ERC1155'
           let decimals

packages/wallet/src/views/CoinDetails/index.tsx

@@ -3,7 +3,7 @@ import { ethers } from 'ethers'
 import { Box, Button, Image, SendIcon, Text, vars } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 
-import { useAccount } from 'wagmi'
+import { useAccount, useNetwork } from 'wagmi'
 
 import { CoinDetailsSkeleton } from './Skeleton'
 
@@ -35,6 +35,7 @@ export const CoinDetails = ({
   contractAddress,
   chainId
 }: CoinDetailsProps) => {
+  const { chains = [] } = useNetwork()
   const { setNavigation } = useNavigation()
   const { fiatCurrency, hideUnlistedTokens } = useSettings()
 
@@ -82,10 +83,10 @@ export const CoinDetails = ({
   }
 
   const isNativeToken = compareAddress(contractAddress, ethers.constants.AddressZero)
-  const logo = isNativeToken ? getNativeTokenInfoByChainId(chainId).logoURI : dataCoinBalance?.contractInfo?.logoURI
-  const symbol = isNativeToken ? getNativeTokenInfoByChainId(chainId).symbol : dataCoinBalance?.contractInfo?.symbol
-  const name = isNativeToken ? getNativeTokenInfoByChainId(chainId).name : dataCoinBalance?.contractInfo?.name
-  const decimals = isNativeToken ? getNativeTokenInfoByChainId(chainId).decimals : dataCoinBalance?.contractInfo?.decimals
+  const logo = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).logoURI : dataCoinBalance?.contractInfo?.logoURI
+  const symbol = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).symbol : dataCoinBalance?.contractInfo?.symbol
+  const name = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).name : dataCoinBalance?.contractInfo?.name
+  const decimals = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).decimals : dataCoinBalance?.contractInfo?.decimals
   const formattedBalance = ethers.utils.formatUnits(dataCoinBalance?.balance || '0', decimals)
   const balanceDisplayed = formatDisplay(formattedBalance)
 

packages/wallet/src/views/CollectibleDetails/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ethers } from 'ethers'
-import { useAccount } from 'wagmi'
+import { useAccount, useNetwork } from 'wagmi'
 import { Box, Button, Image, SendIcon, Text, vars } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 
@@ -35,6 +35,7 @@ export const CollectibleDetails = ({
   chainId,
   tokenId,
 }: CollectibleDetailsProps) => {
+  const { chains = [] } = useNetwork()
   const { address: accountAddress } = useAccount()
   const { fiatCurrency } = useSettings()
   const { setNavigation } = useNavigation()
@@ -95,7 +96,7 @@ export const CollectibleDetails = ({
     })
   }
 
-  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
   const collectionLogo = dataCollectibleBalance?.contractInfo?.logoURI
   const collectionName = dataCollectibleBalance?.contractInfo?.name || 'Unknown Collection'
 

packages/wallet/src/views/Home/components/AssetSummary/CoinTile/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { ethers } from 'ethers'
+import { useNetwork } from 'wagmi'
 import { Box, Text } from '@0xsequence/design-system'
 import { TokenBalance } from '@0xsequence/indexer'
 
@@ -27,9 +28,10 @@ interface CoinTileProps {
 export const CoinTile = ({
   balance
 }: CoinTileProps) => {
+  const { chains = [] } = useNetwork()
   const { fiatCurrency } = useSettings()
   const isNativeToken = compareAddress(balance.contractAddress, ethers.constants.AddressZero)
-  const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId, chains)
 
   const { data: dataCoinPrices = [], isLoading: isLoadingCoinPrice } = useCoinPrices({
     tokens: [{

packages/wallet/src/views/Receive.tsx

@@ -9,10 +9,10 @@ import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 
 export const Receive = () => {
   const { address } = useAccount()
-  const { chain } = useNetwork()
+  const { chain, chains = [] } = useNetwork()
   const [isCopied, setCopied] = useState<boolean>(false)
 
-  const nativeTokenInfo = getNativeTokenInfoByChainId(chain?.id || 1)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(chain?.id || 1, chains)
 
   useEffect(() => {
     if (isCopied) {

packages/wallet/src/views/Search/SearchWallet.tsx

@@ -3,7 +3,7 @@ import { ethers } from 'ethers'
 import { Box, SearchIcon, Text, TextInput, vars } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 import Fuse from 'fuse.js'
-import { useAccount } from 'wagmi'
+import { useAccount, useNetwork } from 'wagmi'
 
 import { BalanceItem } from './components/BalanceItem'
 import { WalletLink } from './components/WalletLink'
@@ -19,6 +19,7 @@ import {
 import { compareAddress, computeBalanceFiat } from '../../utils'
 
 export const SearchWallet = () => {
+  const { chains = [] } = useNetwork()
   const { fiatCurrency, hideUnlistedTokens, selectedNetworks } = useSettings()
   const [search, setSearch] = useState('')
   const { address: accountAddress } = useAccount()
@@ -72,7 +73,7 @@ export const SearchWallet = () => {
 
   const indexedCoinBalances: IndexedData[] = coinBalances.map((balance, index) => {
     if (compareAddress(balance.contractAddress, ethers.constants.AddressZero)) {
-      const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId)
+      const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId, chains)
 
       return {
         index,

packages/wallet/src/views/Search/SearchWalletViewAll.tsx

@@ -13,7 +13,7 @@ import {
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 import { BalanceItem } from './components/BalanceItem'
 import Fuse from 'fuse.js'
-import { useAccount } from 'wagmi'
+import { useAccount, useNetwork } from 'wagmi'
 
 import { Skeleton } from '../../shared/Skeleton'
 import { SCROLLBAR_WIDTH } from '../../constants'
@@ -32,6 +32,7 @@ interface SearchWalletViewAllProps {
 export const SearchWalletViewAll = ({
   defaultTab
 }: SearchWalletViewAllProps) => {
+  const { chains = [] } = useNetwork()
   const { fiatCurrency, hideUnlistedTokens, selectedNetworks } = useSettings()
   const [search, setSearch] = useState('')
   const [selectedTab, setSelectedTab] = useState(defaultTab)
@@ -93,7 +94,7 @@ export const SearchWalletViewAll = ({
 
   const indexedCoinBalances: IndexedData[] = coinBalances.map((balance, index) => {
     if (compareAddress(balance.contractAddress, ethers.constants.AddressZero)) {
-      const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId)
+      const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId, chains)
 
       return {
         index,

packages/wallet/src/views/Search/components/BalanceItem.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { ethers } from 'ethers'
+import { useNetwork } from 'wagmi'
 import { Box, Image, Text, ChevronRightIcon } from '@0xsequence/design-system'
 import { TokenBalance } from '@0xsequence/indexer'
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
@@ -20,9 +21,10 @@ interface BalanceItemProps {
 export const BalanceItem = ({
   balance
 }: BalanceItemProps) => {
+  const { chains = [] } = useNetwork()
   const { setNavigation } = useNavigation()
   const isNativeToken = compareAddress(balance.contractAddress, ethers.constants.AddressZero) 
-  const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId, chains)
   const logoURI = isNativeToken ? nativeTokenInfo.logoURI : balance?.contractInfo?.logoURI
   const tokenName = isNativeToken ? nativeTokenInfo.name : balance?.contractInfo?.name || 'Unknown'