chore: Upgrade wagmi and rainkit (#532)

bnb-chain · Apr 24, 2024 · 37cda6a · 37cda6a
1 parent 94c4b83
commit 37cda6a
Show file tree

Hide file tree

Showing 5 changed files with 16,078 additions and 10,040 deletions.
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -22,7 +22,8 @@
     "@ethersproject/wallet": "^5.7.0",
     "@metamask/eth-sig-util": "^5.0.2",
     "@next/font": "13.1.6",
-    "@rainbow-me/rainbowkit": "^1.3.0",
+    "@rainbow-me/rainbowkit": "^2.0.5",
+    "@tanstack/react-query": "^5.32.0",
     "@types/node": "^18.7.1",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
@@ -37,8 +38,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "^4.7.4",
-    "viem": "^1.0.6",
-    "wagmi": "^1.4.7"
+    "viem": "^2.9.26",
+    "wagmi": "^2.5.20"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.199",

diff --git a/examples/nextjs/src/components/walletInfo/index.tsx b/examples/nextjs/src/components/walletInfo/index.tsx
@@ -6,7 +6,7 @@ export const WalletInfo = () => {
 
   return (
     <div>
-      <ConnectButton accountStatus="address" />
+      <ConnectButton accountStatus="address" chainStatus="name" showBalance />
     </div>
   );
 };
diff --git a/examples/nextjs/src/config/index.ts b/examples/nextjs/src/config/index.ts
@@ -1,9 +1,7 @@
-import { getWalletConnectConnector, Wallet } from '@rainbow-me/rainbowkit';
-import { Chain, configureChains, mainnet } from 'wagmi';
-import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
-import { InjectedConnector } from 'wagmi/connectors/injected';
-import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
-import { publicProvider } from 'wagmi/providers/public';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import { rainbowWallet, walletConnectWallet, trustWallet } from '@rainbow-me/rainbowkit/wallets';
+import { createConfig, http } from 'wagmi';
+import { Chain, mainnet, bscGreenfield } from 'wagmi/chains';
 import * as env from './env';
 
 export const GRPC_URL = env.GRPC_URL;
@@ -16,7 +14,7 @@ export const CROSS_CHAIN_CONTRACT_ADDRESS = env.CROSS_CHAIN_CONTRACT_ADDRESS;
 
 const greenFieldChain: Chain = {
   id: GREEN_CHAIN_ID,
-  network: 'greenfield',
+  name: 'greenfield',
   rpcUrls: {
     default: {
       http: [GREENFIELD_RPC_URL],
@@ -25,18 +23,16 @@ const greenFieldChain: Chain = {
       http: [GREENFIELD_RPC_URL],
     },
   },
-  name: 'greenfield',
   nativeCurrency: {
     name: 'BNB',
     symbol: 'BNB',
     decimals: 18,
   },
 };
 
-const bscChain: Chain = {
+export const bscChain: Chain = {
   id: BSC_CHAIN_ID,
   name: 'BSC',
-  network: 'QA - bsc smart chain',
   rpcUrls: {
     default: {
       http: [BSC_RPC_URL],
@@ -56,67 +52,24 @@ const bscChain: Chain = {
   // testnet: true,
 };
 
-const { chains, publicClient, webSocketPublicClient } = configureChains(
+const connectors = connectorsForWallets(
   [
-    mainnet,
     {
-      ...greenFieldChain,
-      iconUrl:
-        'https://github.com/wagmi-dev/wagmi/assets/5653652/44446c8c-5c72-4e89-b8eb-3042ef618eed',
+      groupName: 'Recommended',
+      wallets: [rainbowWallet, walletConnectWallet, trustWallet],
     },
-    bscChain,
   ],
-  [publicProvider()],
-);
-
-const coinbaseWalletConnector = new CoinbaseWalletConnector({
-  chains,
-  options: {
-    appName: 'wagmi',
-  },
-});
-
-const trustWalletConnector = new InjectedConnector({
-  chains,
-  options: {
-    name: 'GN',
-    shimDisconnect: true,
-    // TODO: rainbowkit conflict
-    getProvider: () => (typeof window !== 'undefined' ? (window as any).trustwallet : undefined),
+  {
+    appName: 'gnfd demo',
+    projectId: '9bf3510aab08be54d5181a126967ee71',
   },
-});
-
-const metaMaskWalletConnector = new MetaMaskConnector({ chains });
-
-export interface MyWalletOptions {
-  projectId: string;
-  chains: Chain[];
-}
+);
 
-const RainbowTrustWalletConnector = ({ chains, projectId }: MyWalletOptions): Wallet => ({
-  id: '_trust-wallet',
-  name: 'Trust Wallet',
-  iconUrl: 'https://my-image.xyz',
-  iconBackground: '#0c2f78',
-  downloadUrls: {
-    android: 'https://play.google.com/store/apps/details?id=my.wallet',
-    ios: 'https://apps.apple.com/us/app/my-wallet',
-    chrome: 'https://chrome.google.com/webstore/detail/my-wallet',
-    qrCode: 'https://my-wallet/qr',
-  },
-  createConnector: () => {
-    return {
-      connector: trustWalletConnector,
-    };
+export const wagmiConfig = createConfig({
+  chains: [mainnet, bscChain, greenFieldChain],
+  transports: {
+    [mainnet.id]: http(),
+    [bscChain.id]: http(),
   },
+  connectors,
 });
-
-export {
-  publicClient,
-  webSocketPublicClient,
-  chains,
-  metaMaskWalletConnector,
-  coinbaseWalletConnector,
-  trustWalletConnector,
-  RainbowTrustWalletConnector,
-};
diff --git a/examples/nextjs/src/pages/_app.tsx b/examples/nextjs/src/pages/_app.tsx
@@ -1,45 +1,21 @@
-import { chains, publicClient, webSocketPublicClient } from '@/config';
+import { wagmiConfig } from '@/config';
 import '@/styles/globals.css';
-import {
-  connectorsForWallets,
-  getDefaultWallets,
-  RainbowKitProvider,
-} from '@rainbow-me/rainbowkit';
+import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import '@rainbow-me/rainbowkit/styles.css';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { AppProps } from 'next/app';
-import { createConfig, WagmiConfig } from 'wagmi';
+import { WagmiProvider } from 'wagmi';
 
-const projectId = '9bf3510aab08be54d5181a126967ee71';
-const { wallets } = getDefaultWallets({
-  projectId,
-  appName: 'greenfield js sdk demo',
-  chains,
-});
-
-const connectors = connectorsForWallets([
-  ...wallets,
-  // {
-  //   groupName: 'Recommended',
-  //   wallets: [
-  //     trustWallet({ projectId, chains, shimDisconnect: true }),
-  //     // RainbowTrustWalletConnector({ projectId, chains }),
-  //   ],
-  // },
-]);
-
-const wagmiConfig = createConfig({
-  autoConnect: true,
-  connectors,
-  webSocketPublicClient,
-  publicClient,
-});
+const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <RainbowKitProvider modalSize="compact" chains={chains}>
-        <Component {...pageProps} />
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider modalSize="compact">
+          <Component {...pageProps} />
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }