feat: wagmi v2 support (#26)

* feat: update style * style tuning * feat: wagmi v2 support * chore: update example * chore: update docs deps * Resolve conflict * fix: next build * 0.1.0-beta.0 * 0.1.0-beta.1 * 0.1.0-beta.1 * chore: update [email protected] * fix: type * changeset * 0.1.0-beta.2 * update doc * 0.1.0
RabbyHub · Oct 9, 2024 · 488c16f · 488c16f
1 parent eaf02a9
commit 488c16f
Show file tree

Hide file tree

Showing 73 changed files with 15,526 additions and 8,362 deletions.
diff --git a/README.md b/README.md
@@ -7,25 +7,31 @@ RabbyKit offers a true web3 solution to help connect your Dapp with wallets, eff
 #### npm
 
 ```sh
-npm i @rabby-wallet/rabbykit @wagmi/core@1 viem@1
+npm i @rabby-wallet/rabbykit @wagmi/core@2 viem@2.x
 ```
 
 #### yarn
 
 ```sh
-yarn add @rabby-wallet/rabbykit @wagmi/core@1 viem@1
+yarn add @rabby-wallet/rabbykit @wagmi/core@2 viem@2.x
 ```
 
 #### pnpm
 
 ```sh
-pnpm add @rabby-wallet/rabbykit @wagmi/core@1 viem@1
+pnpm add @rabby-wallet/rabbykit @wagmi/core@2 viem@2.x
 ```
 
 #### bun
 
 ```sh
-bun add @rabby-wallet/rabbykit @wagmi/core@1 viem@1
+bun add @rabby-wallet/rabbykit @wagmi/core@2 [email protected]
+```
+
+## Not ready to migrate to @wagmi/core@2 yet?
+
+```sh
+npm i @rabby-wallet/[email protected] @wagmi/core@1 viem@1
 ```
 
 ## Documentation

diff --git a/examples/next-wagmi/package.json b/examples/next-wagmi/package.json
@@ -11,10 +11,11 @@
   "dependencies": {
     "@rabby-wallet/rabbykit": "workspace:*",
     "next": "^14.1.1",
+    "@tanstack/react-query": "^5.52.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^1.11.0",
-    "wagmi": "^1.4.2"
+    "viem": "^2.20.0",
+    "wagmi": "^2.12.7"
   },
   "devDependencies": {
     "@types/node": "^17.0.31",

diff --git a/examples/next-wagmi/src/app/page.tsx b/examples/next-wagmi/src/app/page.tsx
@@ -1,21 +1,21 @@
-import { Account } from '../components/Account'
-import { Balance } from '../components/Balance'
-import { BlockNumber } from '../components/BlockNumber'
-import { Connect } from '../components/Connect'
-import { Connected } from '../components/Connected'
-import { NetworkSwitcher } from '../components/NetworkSwitcher'
-import { ReadContract } from '../components/ReadContract'
-import { ReadContracts } from '../components/ReadContracts'
-import { ReadContractsInfinite } from '../components/ReadContractsInfinite'
-import { SendTransaction } from '../components/SendTransaction'
-import { SendTransactionPrepared } from '../components/SendTransactionPrepared'
-import { SignMessage } from '../components/SignMessage'
-import { SignTypedData } from '../components/SignTypedData'
-import { Token } from '../components/Token'
-import { WatchContractEvents } from '../components/WatchContractEvents'
-import { WatchPendingTransactions } from '../components/WatchPendingTransactions'
-import { WriteContract } from '../components/WriteContract'
-import { WriteContractPrepared } from '../components/WriteContractPrepared'
+import { Account } from "../components/Account";
+import { Balance } from "../components/Balance";
+import { BlockNumber } from "../components/BlockNumber";
+import { Connect } from "../components/Connect";
+import { Connected } from "../components/Connected";
+import { NetworkSwitcher } from "../components/NetworkSwitcher";
+import { ReadContract } from "../components/ReadContract";
+import { ReadContracts } from "../components/ReadContracts";
+import { ReadContractsInfinite } from "../components/ReadContractsInfinite";
+import { SendTransaction } from "../components/SendTransaction";
+import { SendTransactionPrepared } from "../components/SendTransactionPrepared";
+import { SignMessage } from "../components/SignMessage";
+import { SignTypedData } from "../components/SignTypedData";
+import { Token } from "../components/Token";
+import { WatchContractEvents } from "../components/WatchContractEvents";
+import { WatchPendingTransactions } from "../components/WatchPendingTransactions";
+import { WriteContract } from "../components/WriteContract";
+import { WriteContractPrepared } from "../components/WriteContractPrepared";
 
 export default function Page() {
   return (
@@ -88,5 +88,5 @@ export default function Page() {
         <WriteContractPrepared />
       </Connected>
     </div>
-  )
+  );
 }
diff --git a/examples/next-wagmi/src/app/providers.tsx b/examples/next-wagmi/src/app/providers.tsx
@@ -1,31 +1,23 @@
 "use client";
 
 import * as React from "react";
-import { WagmiConfig } from "wagmi";
-// import { createModal } from "@rabby-wallet/rabbykit";
+import { WagmiProvider } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import { config } from "../wagmi";
 
-// export let rabbyKit = () => {
-//   let kit: ReturnType<typeof createModal> | undefined;
-
-//   return (p: Parameters<typeof createModal>) => {
-//     if (!kit) {
-//       kit = createModal(...p);
-//     }
-//     return kit;
-//   };
-// };
+const queryClient = new QueryClient();
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
     setMounted(true);
-    // createModal({
-    //   wagmi: config,
-    //   appName: "test",
-    //   projectId: "58a22d2bc1c793fc31c117ad9ceba8d9",
-    // });
   }, []);
-  return <WagmiConfig config={config}>{mounted && children}</WagmiConfig>;
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        {mounted && children}
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
 }
diff --git a/examples/next-wagmi/src/components/Balance.tsx b/examples/next-wagmi/src/components/Balance.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client";
 
-import { useState } from 'react'
-import type { Address } from 'wagmi'
-import { useAccount, useBalance } from 'wagmi'
+import { useState } from "react";
+import { useAccount, useBalance } from "wagmi";
+import type { Address } from "viem";
 
 export function Balance() {
   return (
@@ -15,35 +15,34 @@ export function Balance() {
         <FindBalance />
       </div>
     </>
-  )
+  );
 }
 
 export function AccountBalance() {
-  const { address } = useAccount()
+  const { address } = useAccount();
   const { data, refetch } = useBalance({
     address,
-    watch: true,
-  })
+  });
 
   return (
     <div>
       {data?.formatted}
       <button onClick={() => refetch()}>refetch</button>
     </div>
-  )
+  );
 }
 
 export function FindBalance() {
-  const [address, setAddress] = useState('')
+  const [address, setAddress] = useState("");
   const { data, isLoading, refetch } = useBalance({
     address: address as Address,
-  })
+  });
 
-  const [value, setValue] = useState('')
+  const [value, setValue] = useState("");
 
   return (
     <div>
-      Find balance:{' '}
+      Find balance:{" "}
       <input
         onChange={(e) => setValue(e.target.value)}
         placeholder="wallet address"
@@ -52,9 +51,9 @@ export function FindBalance() {
       <button
         onClick={() => (value === address ? refetch() : setAddress(value))}
       >
-        {isLoading ? 'fetching...' : 'fetch'}
+        {isLoading ? "fetching..." : "fetch"}
       </button>
       <div>{data?.formatted}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/next-wagmi/src/components/Connect.tsx b/examples/next-wagmi/src/components/Connect.tsx
@@ -4,12 +4,10 @@ import { BaseError } from "viem";
 import { useAccount, useConfig, useConnect, useDisconnect } from "wagmi";
 import { useEffect, useRef } from "react";
 import { createModal } from "@rabby-wallet/rabbykit";
-import { supportChains } from "../wagmi";
 
 export function Connect() {
   const { connector, isConnected } = useAccount();
-  const { connect, connectors, error, isLoading, pendingConnector } =
-    useConnect();
+  const { error } = useConnect();
   const { disconnect } = useDisconnect();
 
   const rabbyKitRef = useRef<ReturnType<typeof createModal>>();
@@ -19,10 +17,7 @@ export function Connect() {
     if (!rabbyKitRef.current) {
       rabbyKitRef.current = createModal({
         showWalletConnect: true,
-        chains: supportChains,
-        wagmi: config,
-        appName: "test",
-        projectId: "58a22d2bc1c793fc31c117ad9ceba8d9",
+        wagmi: config as any,
         customButtons: [],
       });
     }

diff --git a/examples/next-wagmi/src/components/NetworkSwitcher.tsx b/examples/next-wagmi/src/components/NetworkSwitcher.tsx
@@ -1,34 +1,33 @@
-'use client'
+"use client";
 
-import { useNetwork, useSwitchNetwork } from 'wagmi'
+import { useAccount, useSwitchChain } from "wagmi";
 
 export function NetworkSwitcher() {
-  const { chain } = useNetwork()
-  const { chains, error, isLoading, pendingChainId, switchNetwork } =
-    useSwitchNetwork()
+  const { chain } = useAccount();
+  const { chains, error, isPending, variables, switchChain } = useSwitchChain();
 
   return (
     <div>
       <div>
         Connected to {chain?.name ?? chain?.id}
-        {chain?.unsupported && ' (unsupported)'}
+        {/* {chain?.unsupported && " (unsupported)"} */}
       </div>
       <br />
-      {switchNetwork && (
+      {switchChain && (
         <div>
-          Switch to:{' '}
+          Switch to:{" "}
           {chains.map((x) =>
             x.id === chain?.id ? null : (
-              <button key={x.id} onClick={() => switchNetwork(x.id)}>
+              <button key={x.id} onClick={() => switchChain({ chainId: x.id })}>
                 {x.name}
-                {isLoading && x.id === pendingChainId && ' (switching)'}
+                {isPending && x.id === variables.chainId && " (switching)"}
               </button>
-            ),
+            )
           )}
         </div>
       )}
 
       <div>{error?.message}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/next-wagmi/src/components/ReadContract.tsx b/examples/next-wagmi/src/components/ReadContract.tsx
@@ -1,10 +1,11 @@
-'use client'
+"use client";
 
-import { useState } from 'react'
-import { BaseError } from 'viem'
-import { type Address, useContractRead } from 'wagmi'
+import { useState } from "react";
+import { BaseError } from "viem";
+import { useContractRead } from "wagmi";
+import type { Address } from "viem";
 
-import { wagmiContractConfig } from './contracts'
+import { wagmiContractConfig } from "./contracts";
 
 export function ReadContract() {
   return (
@@ -15,14 +16,14 @@ export function ReadContract() {
         <TotalSupply />
       </div>
     </div>
-  )
+  );
 }
 
 function TotalSupply() {
   const { data, isRefetching, refetch } = useContractRead({
     ...wagmiContractConfig,
-    functionName: 'totalSupply',
-  })
+    functionName: "totalSupply",
+  });
 
   return (
     <div>
@@ -32,24 +33,24 @@ function TotalSupply() {
         onClick={() => refetch()}
         style={{ marginLeft: 4 }}
       >
-        {isRefetching ? 'loading...' : 'refetch'}
+        {isRefetching ? "loading..." : "refetch"}
       </button>
     </div>
-  )
+  );
 }
 
 function BalanceOf() {
   const [address, setAddress] = useState<Address>(
-    '0xa5cc3c03994DB5b0d9A5eEdD10CabaB0813678AC',
-  )
+    "0xa5cc3c03994DB5b0d9A5eEdD10CabaB0813678AC"
+  );
   const { data, error, isLoading, isSuccess } = useContractRead({
     ...wagmiContractConfig,
-    functionName: 'balanceOf',
+    functionName: "balanceOf",
     args: [address],
-    enabled: Boolean(address),
-  })
+    // enabled: Boolean(address),
+  });
 
-  const [value, setValue] = useState<string>(address)
+  const [value, setValue] = useState<string>(address);
 
   return (
     <div>
@@ -61,9 +62,9 @@ function BalanceOf() {
         value={value}
       />
       <button onClick={() => setAddress(value as Address)}>
-        {isLoading ? 'fetching...' : 'fetch'}
+        {isLoading ? "fetching..." : "fetch"}
       </button>
       {error && <div>{(error as BaseError).shortMessage}</div>}
     </div>
-  )
+  );
 }