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 => (