From 0f24a96e8b71ae373b42f4693348cf29319a81ae Mon Sep 17 00:00:00 2001 From: Corban Brook Date: Wed, 17 Jul 2024 14:28:48 -0400 Subject: [PATCH] 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 --- README.md | 6 +- examples/components/package.json | 2 +- examples/components/src/Header.tsx | 21 +- examples/next/package.json | 2 +- examples/next/src/config.ts | 40 ++- examples/react/package.json | 2 +- examples/react/src/config.ts | 41 ++- packages/checkout/package.json | 10 +- packages/kit/README.md | 6 +- packages/kit/package.json | 22 +- packages/kit/src/chains/index.ts | 44 +++ packages/kit/src/config/defaultChains.ts | 21 ++ packages/kit/src/hooks/useChain.ts | 9 + packages/kit/src/index.ts | 8 +- packages/wallet/package.json | 10 +- pnpm-lock.yaml | 370 +++++++++++------------ 16 files changed, 338 insertions(+), 276 deletions(-) create mode 100644 packages/kit/src/chains/index.ts create mode 100644 packages/kit/src/config/defaultChains.ts create mode 100644 packages/kit/src/hooks/useChain.ts 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 => (