Merge pull request #234 from 0xsequence/kit-wagmi-v2

kit wagmi v2 docs
0xsequence · Feb 7, 2024 · cf06eac · cf06eac
2 parents f5fb81c + a11211b
commit cf06eac
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 76 deletions.
diff --git a/docs/150-wallet/05-connectors/02-kit/02-getting-started.mdx b/docs/150-wallet/05-connectors/02-kit/02-getting-started.mdx
@@ -11,11 +11,11 @@ In this guide, we will walk you through installing Sequence Kit, triggering the
 Sequence Kit is modular, allowing you to install only the necessary packages. To get started, install the `kit` core package, the `connectors` package for interfacing with various wallet providers, and the `wallet` for the embedded wallet. Additionally, install other dependencies such as wagmi, viem, and 0xsequence.
 
 ```bash
-npm install @0xsequence/kit @0xsequence/kit-connectors @0xsequence/kit-wallet 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 @0xsequence/kit-wallet 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 @0xsequence/kit-wallet wagmi [email protected] viem 0xsequence
+yarn add @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query
 ```
 
 # Setting Up the Kit Wrapper
@@ -26,40 +26,45 @@ To utilize the core kit wrapper for connecting web3 wallets to your application,
 
 ```jsx
 import MyPage from './components/MyPage'
-import { KitProvider, KitConfig } from '@0xsequence/kit'
+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 = '<access-key>'
 
   const connectors = getDefaultConnectors({
-    chains,
-    walletConnectProjectId: '<project_id>',
-    defaultChainId: 137
+    walletConnectProjectId: 'wallet-connect-id',
+    defaultChainId: 137,
+    appName: 'demo app',
+    projectAccessKey
+  })
+
+  const transports = {}
+
+  chains.forEach(chain => {
+    transports[chain.id] = http()
   })
 
   const config = createConfig({
-    autoConnect: true,
-    publicClient,
-    webSocketPublicClient,
-    connectors
+    transports,
+    connectors,
+    chains
   })
 
-  const kitConfig: KitConfig = {
-    projectAccessKey: '<access_key>'
-  }
-
   return (
     <WagmiConfig config={config}>
-      <KitProvider>
-        <MyPage />
-      </KitProvider>
+      <QueryClientProvider client={queryClient}> 
+        <KitProvider>
+          <MyPage />
+        </KitProvider>
+      </QueryClientProvider>
     </WagmiConfig>
   );
 }
@@ -79,11 +84,13 @@ import { KitWalletProvider } from '@0xsequence/kit-wallet'
 const App = () => {
   return (
     <WagmiConfig config={config}>
-      <KitProvider config={kitConfig}>
-        <KitWalletProvider>
-          <Page />
-        </KitWalletProvider>
-      </KitProvider>
+      <QueryClientProvider client={queryClient}> 
+        <KitProvider config={kitConfig}>
+          <KitWalletProvider>
+            <Page />
+          </KitWalletProvider>
+        </KitProvider>
+      </QueryClientProvider>
     </WagmiConfig>
   )
 }
@@ -93,43 +100,48 @@ The complete code will then look like this:
 
 ```jsx
 import MyPage from './components/MyPage'
-import { KitProvider, KitConfig } from '@0xsequence/kit'
+import { KitProvider } from '@0xsequence/kit'
 import { getDefaultConnectors } from '@0xsequence/kit-connectors'
 import { KitWalletProvider } from '@0xsequence/kit-wallet'
-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 = '<access-key>'
 
   const connectors = getDefaultConnectors({
-    chains,
-    walletConnectProjectId: '<project_id>',
-    defaultChainId: 137
+    walletConnectProjectId: 'wallet-connect-id',
+    defaultChainId: 137,
+    appName: 'demo app',
+    projectAccessKey
   })
 
+  const transports = {}
+
+  chains.forEach(chain => {
+    transports[chain.id] = http()
+  })
+
   const config = createConfig({
-    autoConnect: true,
-    publicClient,
-    webSocketPublicClient,
-    connectors
+    transports,
+    connectors,
+    chains
   })
 
-  const kitConfig: KitConfig = {
-    projectAccessKey: '<access_key>'
-  }
-
   return (
     <WagmiConfig config={config}>
-      <KitProvider config={kitConfig}>
-        <KitWalletProvider>
-          <MyPage />
-        </KitWalletProvider>
-      </KitProvider>
+      <QueryClientProvider client={queryClient}> 
+        <KitProvider>
+          <KitWalletProvider>
+            <MyPage />
+          </KitWalletProvider>
+        </KitProvider>
+      </QueryClientProvider>
     </WagmiConfig>
   );
 }

diff --git a/docs/150-wallet/05-connectors/02-kit/04-checkout.mdx b/docs/150-wallet/05-connectors/02-kit/04-checkout.mdx
@@ -30,11 +30,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/docs/150-wallet/05-connectors/02-kit/05-custom-connectors.mdx b/docs/150-wallet/05-connectors/02-kit/05-custom-connectors.mdx
@@ -11,16 +11,13 @@ Sequence Kit provides official connectors via the [@0xsequence/kit-connectors](h
 To create a custom connector, you can use an existing connector as a basis. For example, the [Metamask Connector](https://github.com/0xsequence/kit/blob/master/packages/connectors/src/connectors/metamask/metamask.ts) is a good starting point. Here's an example of how to create a custom connector:
 
 ```tsx
-export const myCustomConnector = ({ chains }: MyCustomConnectorOptions) => ({
+export const myCustomConnector = (options: MyCustomConnectorOptions) => ({
   id: 'my-custom-connector',
   name: 'My Custom Connector',
   logoDark: MyCustomLogoDark,
   logoLight: MyCustomLogoLight,
   createConnector: () => {
-    const connector = new MyCustomConnector({
-      chains,
-      // Customize connector options here
-    });
+    const connector = myCustomConnector(options);
     return connector;
   },
 });
@@ -42,21 +39,21 @@ import { getKitConnectWallets } from '@0xsequence/kit';
 
 const connectors = getKitConnectWallets([
   google({
-    chains,
-    options: {
-      defaultNetwork: 137,
-    },
+    defaultNetwork: 137,
+    connect: {
+      app: 'my-app',
+      projectAccessKey: '<access-key>'
+    }
   }),
   // ... other connectors
-  myCustomConnector({ chains }),
+  myCustomConnector({ appName: 'my-app' }),
 ]);
 
 const config = createConfig({
-  autoConnect: true,
-  publicClient,
-  webSocketPublicClient,
+  transports,
   connectors,
-});
+  chains
+})
 ```
 
 Next, use your custom connector by specifying its `id` in either the `socialAuthOptions` or `walletAuthOptions` field of the Sequence Kit configuration:
@@ -71,9 +68,11 @@ const kitConfig = {
 
 return (
   <WagmiConfig config={wagmiConfig}>
-    <KitProvider config={kitConfig}>
-      <App />
-    </KitProvider>
+    <QueryClientProvider client={queryClient}>
+      <KitProvider config={kitConfig}>
+        <App />
+      </KitProvider>
+    </QueryClientProvider>
   </WagmiConfig>
 );
 ```