getDefaultChains: default sequence supported chains (#105)

* Adding sequence chains * Updating examples and docs to use getDefaultChains * Adding useChain hook to get current Chain or Chain by chainId
0xsequence · Jul 17, 2024 · 0f24a96 · 0f24a96
1 parent 9675eac
commit 0f24a96
Show file tree

Hide file tree

Showing 16 changed files with 338 additions and 276 deletions.
diff --git a/README.md b/README.md
@@ -33,15 +33,15 @@ React apps must be wrapped by a Wagmi client and the KitWalletProvider component
 
 ```js
 import MyPage from './components/MyPage'
-import { KitProvider, getDefaultConnectors } from '@0xsequence/kit'
+import { KitProvider, getDefaultConnectors, getDefaultChains } from '@0xsequence/kit'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createConfig, http, WagmiProvider } from 'wagmi'
 import { mainnet, polygon, Chain } from 'wagmi/chains'
 
 const queryClient = new QueryClient()
 
 function App() {
-  const chains = [mainnet, polygon] as [Chain, ...Chain[]]
+  const chains = getDefaultChains(/* optional array of chain ids to filter */)
 
   const projectAccessKey = 'xyz'
 
@@ -72,7 +72,7 @@ function App() {
         </KitProvider>
       </QueryClientProvider>
     </WagmiProvider>
-  );
+  )
 }
 ```
 

diff --git a/examples/components/package.json b/examples/components/package.json
@@ -9,7 +9,7 @@
   },
   "peerDependencies": {
     "@0xsequence/design-system": ">= 1.7.3",
-    "@0xsequence/network": ">= 1.9.36",
+    "@0xsequence/network": ">= 1.9.37",
     "wagmi": "*"
   },
   "private": true

diff --git a/examples/components/src/Header.tsx b/examples/components/src/Header.tsx
@@ -10,15 +10,9 @@ import {
   ChevronDownIcon,
   SignoutIcon
 } from '@0xsequence/design-system'
-import { ChainId } from '@0xsequence/network'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { useState } from 'react'
-import { useAccount, useChainId, useDisconnect, useSwitchChain } from 'wagmi'
-
-const networks = [
-  { chainId: ChainId.ARBITRUM_SEPOLIA, title: 'Arbitrum Sepolia' },
-  { chainId: ChainId.ARBITRUM_NOVA, title: 'Arbitrum Nova' }
-]
+import { useAccount, useChainId, useChains, useDisconnect, useSwitchChain } from 'wagmi'
 
 export const Header = () => {
   return (
@@ -135,6 +129,7 @@ const AccountMenu = () => {
 }
 
 const NetworkSelect = () => {
+  const chains = useChains()
   const chainId = useChainId()
   const { switchChain } = useSwitchChain()
   const [isOpen, toggleOpen] = useState(false)
@@ -159,7 +154,7 @@ const NetworkSelect = () => {
           <Box alignItems="center" gap="2">
             <NetworkImage chainId={chainId} size="sm" />
             <Text display={{ sm: 'none', lg: 'block' }} variant="normal" fontWeight="bold" color="text100">
-              {networks.find(x => x.chainId === chainId)?.title || chainId}
+              {chains.find(chain => chain.id === chainId)?.name || chainId}
             </Text>
           </Box>
 
@@ -181,20 +176,20 @@ const NetworkSelect = () => {
               flexDirection="column"
               gap="2"
             >
-              {networks.map(({ chainId, title }) => (
+              {chains.map(chain => (
                 <Button
-                  key={chainId}
+                  key={chain.id}
                   width="full"
                   shape="square"
                   onClick={() => {
-                    switchChain({ chainId })
+                    switchChain({ chainId: chain.id })
                     toggleOpen(false)
                   }}
-                  leftIcon={() => <NetworkImage chainId={chainId} size="sm" />}
+                  leftIcon={() => <NetworkImage chainId={chain.id} size="sm" />}
                   label={
                     <Box alignItems="center" gap="2">
                       <Text variant="normal" fontWeight="bold" color="text100">
-                        {title}
+                        {chain.name}
                       </Text>
                     </Box>
                   }

diff --git a/examples/next/package.json b/examples/next/package.json
@@ -15,7 +15,7 @@
     "@0xsequence/kit-checkout": "workspace:*",
     "@0xsequence/kit-wallet": "workspace:*",
     "@0xsequence/kit-example-shared-components": "workspace:*",
-    "@0xsequence/network": "^1.9.36",
+    "@0xsequence/network": "^1.9.37",
     "@tanstack/react-query": "^5.37.1",
     "next": "14.2.3",
     "react": "^18.3.1",

diff --git a/examples/next/src/config.ts b/examples/next/src/config.ts
@@ -1,8 +1,14 @@
-import { KitConfig, getKitConnectWallets, getDefaultConnectors, getDefaultWaasConnectors, mock } from '@0xsequence/kit'
-import { findNetworkConfig, allNetworks } from '@0xsequence/network'
+import {
+  KitConfig,
+  getKitConnectWallets,
+  getDefaultConnectors,
+  getDefaultWaasConnectors,
+  mock,
+  getDefaultChains
+} from '@0xsequence/kit'
+import { ChainId } from '@0xsequence/network'
 import { Transport, zeroAddress } from 'viem'
 import { cookieStorage, createConfig, createStorage, http } from 'wagmi'
-import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
 
 export type ConnectionMode = 'waas' | 'universal'
 
@@ -12,23 +18,13 @@ const enableConfirmationModal = false
 
 const projectAccessKey = 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
 
-const chains = [arbitrumNova, arbitrumSepolia, mainnet, polygon] as const satisfies Chain[]
+const chains = getDefaultChains([ChainId.ARBITRUM_NOVA, ChainId.ARBITRUM_SEPOLIA])
 const transports = chains.reduce<Record<number, Transport>>((acc, chain) => {
-  const network = findNetworkConfig(allNetworks, chain.id)
-
-  if (network) {
-    acc[chain.id] = http(network.rpcUrl)
-  }
+  acc[chain.id] = http()
 
   return acc
 }, {})
 
-chains.forEach(chain => {
-  const network = findNetworkConfig(allNetworks, chain.id)
-  if (!network) return
-  transports[chain.id] = http(network.rpcUrl)
-})
-
 const waasConfigKey = 'eyJwcm9qZWN0SWQiOjE2ODE1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0='
 const googleClientId = '970987756660-35a6tc48hvi8cev9cnknp0iugv9poa23.apps.googleusercontent.com'
 const appleClientId = 'com.horizon.sequence.waas'
@@ -38,7 +34,7 @@ const getWaasConnectors = () => {
   const connectors = [
     ...getDefaultWaasConnectors({
       walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
-      defaultChainId: arbitrumSepolia.id,
+      defaultChainId: ChainId.ARBITRUM_NOVA,
       waasConfigKey,
       googleClientId,
       appleClientId,
@@ -63,7 +59,7 @@ const getUniversalConnectors = () => {
   const connectors = [
     ...getDefaultConnectors({
       walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
-      defaultChainId: arbitrumNova.id,
+      defaultChainId: ChainId.ARBITRUM_NOVA,
       appName: 'demo app',
       projectAccessKey
     }),
@@ -101,27 +97,27 @@ export const kitConfig: KitConfig = {
     // Native token
     {
       contractAddress: zeroAddress,
-      chainId: arbitrumNova.id
+      chainId: ChainId.ARBITRUM_NOVA
     },
     // Native token
     {
       contractAddress: zeroAddress,
-      chainId: arbitrumSepolia.id
+      chainId: ChainId.ARBITRUM_SEPOLIA
     },
     // Waas demo NFT
     {
       contractAddress: '0x0d402c63cae0200f0723b3e6fa0914627a48462e',
-      chainId: arbitrumNova.id
+      chainId: ChainId.ARBITRUM_NOVA
     },
     // Waas demo NFT
     {
       contractAddress: '0x0d402c63cae0200f0723b3e6fa0914627a48462e',
-      chainId: arbitrumSepolia.id
+      chainId: ChainId.ARBITRUM_SEPOLIA
     },
     // Skyweaver assets
     {
       contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
-      chainId: polygon.id
+      chainId: ChainId.POLYGON
     }
   ]
 }
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -16,7 +16,7 @@
     "@0xsequence/kit-checkout": "workspace:*",
     "@0xsequence/kit-wallet": "workspace:*",
     "@0xsequence/kit-example-shared-components": "workspace:*",
-    "@0xsequence/network": "^1.9.36",
+    "@0xsequence/network": "^1.9.37",
     "@tanstack/react-query": "^5.37.1",
     "framer-motion": "^8.5.2",
     "react": "^18.3.1",

diff --git a/examples/react/src/config.ts b/examples/react/src/config.ts
@@ -1,8 +1,14 @@
-import { KitConfig, getKitConnectWallets, getDefaultConnectors, getDefaultWaasConnectors, mock } from '@0xsequence/kit'
-import { findNetworkConfig, allNetworks } from '@0xsequence/network'
+import {
+  KitConfig,
+  getKitConnectWallets,
+  getDefaultConnectors,
+  getDefaultWaasConnectors,
+  mock,
+  getDefaultChains
+} from '@0xsequence/kit'
+import { ChainId } from '@0xsequence/network'
 import { Transport, zeroAddress } from 'viem'
 import { createConfig, http } from 'wagmi'
-import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
 
 export type ConnectionMode = 'waas' | 'universal'
 
@@ -15,23 +21,12 @@ const connectionMode: ConnectionMode = searchParams.get('mode') === 'universal'
 const isDebugMode = searchParams.has('debug')
 const projectAccessKey = isDebugMode ? 'AQAAAAAAAAK2JvvZhWqZ51riasWBftkrVXE' : 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
 
-const chains = [arbitrumNova, arbitrumSepolia, mainnet, polygon] as const satisfies Chain[]
+const chains = getDefaultChains([ChainId.ARBITRUM_NOVA, ChainId.ARBITRUM_SEPOLIA])
 const transports = chains.reduce<Record<number, Transport>>((acc, chain) => {
-  const network = findNetworkConfig(allNetworks, chain.id)
-
-  if (network) {
-    acc[chain.id] = http(network.rpcUrl)
-  }
-
+  acc[chain.id] = http()
   return acc
 }, {})
 
-chains.forEach(chain => {
-  const network = findNetworkConfig(allNetworks, chain.id)
-  if (!network) return
-  transports[chain.id] = http(network.rpcUrl)
-})
-
 const waasConfigKey = isDebugMode
   ? 'eyJwcm9qZWN0SWQiOjY5NCwicnBjU2VydmVyIjoiaHR0cHM6Ly9kZXYtd2Fhcy5zZXF1ZW5jZS5hcHAiLCJlbWFpbFJlZ2lvbiI6ImNhLWNlbnRyYWwtMSIsImVtYWlsQ2xpZW50SWQiOiI1NGF0bjV1cGk2M3FjNTlhMWVtM3ZiaHJzbiJ9'
   : 'eyJwcm9qZWN0SWQiOjE2ODE1LCJlbWFpbFJlZ2lvbiI6ImNhLWNlbnRyYWwtMSIsImVtYWlsQ2xpZW50SWQiOiI2N2V2NXVvc3ZxMzVmcGI2OXI3NnJoYnVoIiwicnBjU2VydmVyIjoiaHR0cHM6Ly93YWFzLnNlcXVlbmNlLmFwcCJ9'
@@ -45,7 +40,7 @@ const getWaasConnectors = () => {
   const connectors = [
     ...getDefaultWaasConnectors({
       walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
-      defaultChainId: arbitrumNova.id,
+      defaultChainId: ChainId.ARBITRUM_NOVA,
       waasConfigKey,
       googleClientId,
       appleClientId,
@@ -71,7 +66,7 @@ const getUniversalConnectors = () => {
   const connectors = [
     ...getDefaultConnectors({
       walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
-      defaultChainId: arbitrumNova.id,
+      defaultChainId: ChainId.ARBITRUM_NOVA,
       appName: 'demo app',
       projectAccessKey
     }),
@@ -105,27 +100,27 @@ export const kitConfig: KitConfig = {
     // Native token
     {
       contractAddress: zeroAddress,
-      chainId: arbitrumNova.id
+      chainId: ChainId.ARBITRUM_NOVA
     },
     // Native token
     {
       contractAddress: zeroAddress,
-      chainId: arbitrumSepolia.id
+      chainId: ChainId.ARBITRUM_SEPOLIA
     },
     // Waas demo NFT
     {
       contractAddress: '0x0d402c63cae0200f0723b3e6fa0914627a48462e',
-      chainId: arbitrumNova.id
+      chainId: ChainId.ARBITRUM_NOVA
     },
     // Waas demo NFT
     {
       contractAddress: '0x0d402c63cae0200f0723b3e6fa0914627a48462e',
-      chainId: arbitrumSepolia.id
+      chainId: ChainId.ARBITRUM_SEPOLIA
     },
     // Skyweaver assets
     {
       contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
-      chainId: polygon.id
+      chainId: ChainId.POLYGON
     }
   ]
 }
diff --git a/packages/checkout/package.json b/packages/checkout/package.json
@@ -31,13 +31,13 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@0xsequence/api": "^1.9.36",
-    "@0xsequence/indexer": "^1.9.36",
-    "@0xsequence/metadata": "^1.9.36",
-    "@0xsequence/network": "^1.9.36",
+    "@0xsequence/api": "^1.9.37",
+    "@0xsequence/indexer": "^1.9.37",
+    "@0xsequence/metadata": "^1.9.37",
+    "@0xsequence/network": "^1.9.37",
     "@paperxyz/react-client-sdk": "^1.1.3",
     "@tanstack/react-query": "^5.37.1",
-    "0xsequence": "^1.9.36",
+    "0xsequence": "^1.9.37",
     "react-copy-to-clipboard": "^5.1.0"
   },
   "peerDependencies": {

diff --git a/packages/kit/README.md b/packages/kit/README.md
@@ -34,15 +34,15 @@ React apps must be wrapped by a Wagmi client and the KitWalletProvider component
 
 ```js
 import MyPage from './components/MyPage'
-import { KitProvider, getDefaultConnectors } from '@0xsequence/kit'
+import { KitProvider, getDefaultConnectors, getDefaultChains } from '@0xsequence/kit'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createConfig, http, WagmiProvider } from 'wagmi'
 import { mainnet, polygon, Chain } from 'wagmi/chains'
 
 const queryClient = new QueryClient()
 
 function App() {
-  const chains = [mainnet, polygon] as [Chain, ...Chain[]]
+  const chains = getDefaultChains(/* optional array of chain ids to filter */)
 
   const projectAccessKey = 'xyz'
 
@@ -73,7 +73,7 @@ function App() {
         </KitProvider>
       </QueryClientProvider>
     </WagmiProvider>
-  );
+  )
 }
 ```
 

diff --git a/packages/kit/package.json b/packages/kit/package.json
@@ -36,22 +36,22 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@0xsequence/api": "^1.9.36",
-    "@0xsequence/auth": "^1.9.36",
-    "@0xsequence/core": "^1.9.36",
+    "@0xsequence/api": "^1.9.37",
+    "@0xsequence/auth": "^1.9.37",
+    "@0xsequence/core": "^1.9.37",
     "@0xsequence/design-system": "^1.7.3",
     "@0xsequence/ethauth": "^0.8.1",
-    "@0xsequence/indexer": "^1.9.36",
-    "@0xsequence/metadata": "^1.9.36",
-    "@0xsequence/network": "^1.9.36",
-    "@0xsequence/provider": "^1.9.36",
-    "@0xsequence/utils": "^1.9.36",
+    "@0xsequence/indexer": "^1.9.37",
+    "@0xsequence/metadata": "^1.9.37",
+    "@0xsequence/network": "^1.9.37",
+    "@0xsequence/provider": "^1.9.37",
+    "@0xsequence/utils": "^1.9.37",
     "framer-motion": "^8.5.2",
     "uuid": "^10.0.0"
   },
   "peerDependencies": {
-    "0xsequence": ">= 1.9.36",
-    "@0xsequence/waas": ">= 1.9.36",
+    "0xsequence": ">= 1.9.37",
+    "@0xsequence/waas": ">= 1.9.37",
     "@react-oauth/google": ">= 0.11.1",
     "@tanstack/react-query": ">= 5.0.0",
     "ethers": ">= 5.7.2 < 6",
@@ -62,7 +62,7 @@
     "wagmi": ">= 2.0.0"
   },
   "devDependencies": {
-    "0xsequence": "^1.9.36",
+    "0xsequence": "^1.9.37",
     "@tanstack/react-query": "^5.37.1",
     "@types/uuid": "^9.0.8",
     "ethers": "5.7.2",