diff --git a/README.md b/README.md
index f5d86291..87577aad 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ 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'
@@ -41,7 +41,7 @@ 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() {
- );
+ )
}
```
diff --git a/examples/components/package.json b/examples/components/package.json
index d2adc733..d9805bc5 100644
--- 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
index 465d9f80..00f34ba9 100644
--- 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 = () => {
- {networks.find(x => x.chainId === chainId)?.title || chainId}
+ {chains.find(chain => chain.id === chainId)?.name || chainId}
@@ -181,20 +176,20 @@ const NetworkSelect = () => {
flexDirection="column"
gap="2"
>
- {networks.map(({ chainId, title }) => (
+ {chains.map(chain => (