Merge pull request #5 from 0xsequence/wagmi-v2

Wagmi v2
0xsequence · Feb 7, 2024 · 168ff23 · 168ff23
2 parents a4c3bc7 + 8c6191e
commit 168ff23
Show file tree

Hide file tree

Showing 50 changed files with 3,156 additions and 1,445 deletions.
diff --git a/README.md b/README.md
@@ -19,11 +19,11 @@ View the [demo](https://0xsequence.github.io/kit)! 👀
 To install this package:
 
 ```bash
-npm install @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence
+npm install @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query
 # or
-pnpm install @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence
+pnpm install @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query
 # or
-yarn add @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence
+yarn add @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query
 ```
 
 ### Setting up the Library
@@ -34,37 +34,43 @@ React apps must be wrapped by a Wagmi client and the KitWalletProvider component
 import MyPage from './components/MyPage'
 import { KitProvider } from '@0xsequence/kit'
 import { getDefaultConnectors } from '@0xsequence/kit-connectors'
-import { configureChains, createConfig, WagmiConfig } from 'wagmi'
-import { publicProvider } from 'wagmi/providers/public'
-import { mainnet, polygon } from 'wagmi/chains'
+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, publicClient, webSocketPublicClient } = configureChains(
-    [polygon, mainnet],
-    [publicProvider()],
-  )
+  const chains = [mainnet, polygon] as [Chain, ...Chain[]]
+
+  const projectAccessKey = 'xyz'
 
   const connectors = getDefaultConnectors({
-    chains,
-    projectAccessKey: '<get your project key at https://sequence.build>',
-    walletConnectProjectId: '<your wallet connect project id goes here>',
+    walletConnectProjectId: 'wallet-connect-id',
     defaultChainId: 137,
-    appName: 'my app'
+    appName: 'demo app',
+    projectAccessKey
   })
 
+  const transports = {}
+
+  chains.forEach(chain => {
+    transports[chain.id] = http()
+  })
 
   const config = createConfig({
-    autoConnect: true,
-    publicClient,
-    webSocketPublicClient,
-    connectors
+    transports,
+    connectors,
+    chains
   })
 
   return (
     <WagmiConfig config={config}>
-      <KitProvider>
-        <MyPage />
-      </KitProvider>
+      <QueryClientProvider client={queryClient}> 
+        <KitProvider>
+          <MyPage />
+        </KitProvider>
+      </QueryClientProvider>
     </WagmiConfig>
   );
 }

diff --git a/examples/react/package.json b/examples/react/package.json
@@ -10,15 +10,16 @@
     "@0xsequence/kit-checkout": "workspace:*",
     "@0xsequence/kit-connectors": "workspace:*",
     "@0xsequence/kit-wallet": "workspace:*",
+    "@tanstack/react-query": "^4.36.1",
     "@vanilla-extract/css": "^1.9.3",
     "ethers": "^5.7.2",
     "framer-motion": "^8.5.2",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.3",
-    "viem": "1.10.7",
-    "wagmi": "^1.3.9"
+    "viem": "^2.0.6",
+    "wagmi": "^2.5.4"
   },
   "devDependencies": {
     "@types/node": "^16.18.11",

diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -1,62 +1,63 @@
+import { sequence } from '0xsequence'
 import { ethers } from 'ethers'
 import qs from 'query-string'
 import { ThemeProvider } from '@0xsequence/design-system'
-import { KitProvider, THEMES, KitConfig, getKitConnectWallets } from '@0xsequence/kit'
+import { KitProvider, KitConfig, getKitConnectWallets } from '@0xsequence/kit'
 import { getDefaultConnectors, mock } from '@0xsequence/kit-connectors'
 import { KitWalletProvider } from '@0xsequence/kit-wallet'
 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 { http } from 'viem'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createConfig, http, WagmiProvider } from 'wagmi'
+import { mainnet, polygon, Chain } from 'wagmi/chains'
 
 import '@0xsequence/design-system/styles.css'
 
+const queryClient = new QueryClient() 
+
 function App() {
   // append ?debug=true to url to enable debug mode 
   const { debug } = qs.parse(location.search)
   const isDebugMode = debug === 'true'
 
-  const { chains, publicClient, webSocketPublicClient } = configureChains(
-    [polygon, mainnet],
-    [publicProvider()],
-  )
+  const chains = [mainnet, polygon] as [Chain, ...Chain[]]
+
+  const projectAccessKey = 'iK0DPkHRt0IFo8o4M3fZIIOAAAAAAAAAA'
 
   const connectors = [
     ...getDefaultConnectors({
-      chains,
       walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
       defaultChainId: 137,
       appName: 'demo app',
-      projectAccessKey: 'iK0DPkHRt0IFo8o4M3fZIIOAAAAAAAAAA'
+      projectAccessKey
     }),
     ...(
       isDebugMode
       ?
-        getKitConnectWallets([
+        getKitConnectWallets(projectAccessKey, [
           mock({
-            chains,
-            options: {
-              chain: polygon,
-              account: '0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9',
-              transport: http()
-            }
+            accounts: ['0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9'],
           })
         ])
       : []
     )
   ]
 
+  const transports = {}
+
+  chains.forEach(chain => {
+    const network = sequence.network.findNetworkConfig(sequence.network.allNetworks, chain.id)
+    if (!network) return
+    transports[chain.id] = http(network.rpcUrl)
+  })
+
   const config = createConfig({
-    autoConnect: true,
-    publicClient,
-    webSocketPublicClient,
-    connectors
+    transports,
+    connectors,
+    chains
   })
 
   const kitConfig: KitConfig = {
-    projectAccessKey: 'iK0DPkHRt0IFo8o4M3fZIIOAAAAAAAAAA',
     defaultTheme: 'dark',
     signIn: {
       projectName: 'Skyweaver',
@@ -83,19 +84,21 @@ function App() {
   }
 
   return (
-    <WagmiConfig config={config}>
-      <KitProvider config={kitConfig} >
-        <KitWalletProvider>
-          <KitCheckoutProvider>
-            <div id="app">
-              <ThemeProvider root="#app" scope="app" theme="dark">
-                <Homepage />
-              </ThemeProvider>
-            </div>
-          </KitCheckoutProvider>
-        </KitWalletProvider>
-      </KitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}> 
+        <KitProvider config={kitConfig} >
+          <KitWalletProvider>
+            <KitCheckoutProvider>
+              <div id="app">
+                <ThemeProvider root="#app" scope="app" theme="dark">
+                  <Homepage />
+                </ThemeProvider>
+              </div>
+            </KitCheckoutProvider>
+          </KitWalletProvider>
+        </KitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
 

diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx
@@ -3,7 +3,14 @@ import qs from 'query-string'
 import { useOpenConnectModal, signEthAuthProof, validateEthProof, useTheme as useKitTheme } from '@0xsequence/kit'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { useCheckoutModal } from '@0xsequence/kit-checkout'
-import { useDisconnect, useAccount, useWalletClient, usePublicClient, useSwitchNetwork, useChainId } from 'wagmi'
+import {
+  useDisconnect,
+  useAccount,
+  useWalletClient,
+  usePublicClient,
+  useChainId,
+  useSwitchChain
+} from 'wagmi'
 import {
   Box,
   Button,
@@ -30,7 +37,8 @@ function Homepage() {
   const { triggerCheckout } = useCheckoutModal()
   const { disconnect } = useDisconnect()
   const { data: walletClient } = useWalletClient()
-  const { switchNetwork } = useSwitchNetwork()
+  const { switchChain } = useSwitchChain()
+
   const chainId = useChainId()
 
   const publicClient = usePublicClient()
@@ -173,9 +181,9 @@ function Homepage() {
 
   const onSwitchNetwork = () => {
     if (chainId === 1) {
-      switchNetwork(137)
+      switchChain({ chainId: 137 })
     } else {
-      switchNetwork(1)
+      switchChain({ chainId: 1 })
     }
   }
 

diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "ts-node": "^10.9.1",
     "tsx": "^3.12.1",
     "typescript": "~5.3.3",
-    "wagmi": "^1.3.9"
+    "wagmi": "^2.5.4"
   },
   "resolutions": {},
   "workspaces": [

diff --git a/packages/checkout/README.md b/packages/checkout/README.md
@@ -27,11 +27,13 @@ import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
 const App = () => {
   return (
     <WagmiConfig config={config}>
-      <KitProvider>
-        <KitCheckoutProvider>
-          <Page />
-        </KitCheckoutProvider>
-      </KitProvider>
+      <QueryClientProvider client={queryClient}> 
+        <KitProvider>
+          <KitCheckoutProvider>
+            <Page />
+          </KitCheckoutProvider>
+        </KitProvider>
+      </QueryClientProvider>
     </WagmiConfig>
   )
 }

diff --git a/packages/checkout/package.json b/packages/checkout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/kit-checkout",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Checkout UI for Sequence Kit",
   "repository": "https://github.com/0xsequence/kit/tree/master/packages/checkout",
   "main": "dist/0xsequence-kit-checkout.cjs.js",
@@ -30,7 +30,7 @@
     "framer-motion": ">=8.5.2",
     "react": ">=17",
     "react-dom": ">=17",
-    "wagmi": ">=1.3.9",
+    "wagmi": ">=2.0.0",
     "@0xsequence/kit": "workspace:*"
   },
   "devDependencies": {
@@ -43,7 +43,7 @@
     "framer-motion": "^8.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "wagmi": "^1.3.9",
+    "wagmi": "^2.5.4",
     "@0xsequence/kit": "workspace:*"
   },
   "files": [

diff --git a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { ethers } from 'ethers'
-import { useNetwork } from 'wagmi'
+import { useConfig } from 'wagmi'
 import { Box, Card, Image, Text } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 import { CoinIcon } from '../../../shared/components/CoinIcon'
@@ -22,7 +22,7 @@ export const OrderSummaryItem = ({
   quantityRaw,
   chainId,
 }: OrderSummaryItem) => {
-  const { chains = [] } = useNetwork()
+  const { chains } = useConfig() 
   const {
     data: tokenMetadata,
     isLoading: isTokenMetadataLoading,
@@ -48,7 +48,7 @@ export const OrderSummaryItem = ({
     )
   }
 
-  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, [...chains])
   const { name = 'unknown', image, decimals = 0 } = tokenMetadata || {}
 
   const {

diff --git a/packages/checkout/src/views/CheckoutSelection/index.tsx b/packages/checkout/src/views/CheckoutSelection/index.tsx
@@ -12,7 +12,7 @@ import {
 
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 
-import { useAccount, useNetwork } from 'wagmi'
+import { useAccount, useConfig } from 'wagmi'
 
 import { OrderSummaryItem } from './component/OrderSummaryItem'
 
@@ -32,7 +32,7 @@ import {
 import * as styles from './styles.css'
 
 export const CheckoutSelection = () => {
-  const { chains = [] } = useNetwork()
+  const { chains } = useConfig()
   const { setNavigation } = useNavigation()
   const { closeCheckout, settings } = useCheckoutModal()
   const { address: accountAddress } = useAccount()

diff --git a/packages/connectors/package.json b/packages/connectors/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/kit-connectors",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Wallets for Sequence Kit",
   "repository": "https://github.com/0xsequence/kit/tree/master/packages/connectors",
   "main": "dist/0xsequence-kit-connectors.cjs.js",
@@ -13,8 +13,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@0xsequence/provider": "^1.8.2",
-    "@0xsequence/wagmi-connector": "^2.1.4"
+    "@0xsequence/provider": "^1.8.2"
   },
   "devDependencies": {
     "@0xsequence/design-system": "^1.1.0",
@@ -26,8 +25,8 @@
     "@0xsequence/design-system": ">=1.1.0",
     "react": ">=17",
     "react-dom": ">=17",
-    "viem": ">=1.4.1",
-    "wagmi": ">=1.3.9",
+    "viem": ">=2.0.0",
+    "wagmi": ">=2.0.0",
     "@0xsequence/kit": "workspace:*"
   },
   "files": [