Merge pull request #26 from memoriaXII/feat/upgrade-plugin-version

chore: remove rainbowkit

apps/web/package.json

@@ -10,15 +10,15 @@
     "typechain": "typechain --out-dir src/config/abi/types --target=ethers-v5 \"src/config/abi/*.json\""
   },
   "dependencies": {
-    "@rainbow-me/rainbowkit": "^0.8.1",
     "@typechain/ethers-v5": "^10.1.0",
-    "ethers": "^5.7.0",
+    "ethers": "^5.0.0",
+    "framer-motion": "^7.3.6",
     "next": "^13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "^1.57.1",
     "typechain": "^8.1.0",
-    "wagmi": "^0.6.4"
+    "wagmi": "^0.12.0"
   },
   "devDependencies": {
     "@types/node": "18.7.13",

apps/web/src/components/Button/ConnectButton.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable @typescript-eslint/no-shadow */
+import { useAccount, useConnect, useDisconnect, useEnsAvatar, useEnsName } from 'wagmi';
+
+const ConnectButton = () => {
+  const { address, connector, isConnected } = useAccount();
+  const { data: ensAvatar } = useEnsAvatar({ address });
+  const { data: ensName } = useEnsName({ address });
+  const { connect, connectors, error, isLoading, pendingConnector } = useConnect();
+  const { disconnect } = useDisconnect();
+
+  if (isConnected) {
+    return (
+      <div>
+        <img src={ensAvatar || ''} alt="ENS Avatar" />
+        <div>{ensName ? `${ensName} (${address})` : address}</div>
+        <div>Connected to {connector?.name}</div>
+        <button type="button" onClick={() => disconnect()}>
+          Disconnect
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {connectors.map((connector) => {
+        if (!connector) return null;
+        return (
+          <button
+            type="button"
+            disabled={!connector.ready}
+            key={connector.id}
+            onClick={() => connect({ connector })}>
+            {connector.name}
+            {!connector.ready && ' (unsupported)'}
+            {isLoading && connector.id === pendingConnector?.id && ' (connecting)'}
+          </button>
+        );
+      })}
+
+      {error && <div>{error.message}</div>}
+    </div>
+  );
+};
+
+export default ConnectButton;

apps/web/src/pages/_app.tsx

@@ -1,27 +1,53 @@
-import { midnightTheme, RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import '@rainbow-me/rainbowkit/styles.css';
+import { WagmiConfig, createClient, mainnet, configureChains } from 'wagmi';
+
+import { alchemyProvider } from 'wagmi/providers/alchemy';
+import { publicProvider } from 'wagmi/providers/public';
+
+import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
+import { InjectedConnector } from 'wagmi/connectors/injected';
+import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
 import 'styles/globals.scss';
 import type { AppProps } from 'next/app';
-import { useEffect, useState } from 'react';
-import { configureChains } from 'wagmi';
-import { publicProvider } from 'wagmi/providers/public';
-import { goerli } from 'wagmi/chains';
-import WagmiProvider from './WagmiProvider';
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => setMounted(true), []);
-  if (!mounted) return null;
-
-  const { chains } = configureChains([goerli], [publicProvider()]);
+  const { chains, provider, webSocketProvider } = configureChains(
+    [mainnet],
+    [alchemyProvider({ apiKey: 'yourAlchemyApiKey' }), publicProvider()]
+  );
 
+  // Set up client
+  const client = createClient({
+    autoConnect: true,
+    connectors: [
+      new MetaMaskConnector({ chains }),
+      new CoinbaseWalletConnector({
+        chains,
+        options: {
+          appName: 'wagmi'
+        }
+      }),
+      new WalletConnectConnector({
+        chains,
+        options: {
+          projectId: '...'
+        }
+      }),
+      new InjectedConnector({
+        chains,
+        options: {
+          name: 'Injected',
+          shimDisconnect: true
+        }
+      })
+    ],
+    provider,
+    webSocketProvider
+  });
   return (
-    <WagmiProvider>
-      <RainbowKitProvider chains={chains} theme={midnightTheme()} coolMode>
-        <Component {...pageProps} />
-      </RainbowKitProvider>
-    </WagmiProvider>
+    <WagmiConfig client={client}>
+      <Component {...pageProps} />
+    </WagmiConfig>
   );
 };
 

apps/web/src/pages/index.tsx

@@ -1,9 +1,15 @@
-import { ConnectButton } from '@rainbow-me/rainbowkit';
+/* eslint-disable react/button-has-type */
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import Image from 'next/image';
 import styles from 'styles/Home.module.scss';
 
+import dynamic from 'next/dynamic';
+
+const ConnectButton = dynamic(() => import('../components/Button/ConnectButton'), {
+  ssr: false
+});
+
 const Home: NextPage = () => (
   <>
     <Head>
@@ -18,9 +24,7 @@ const Home: NextPage = () => (
           Get started by editing&nbsp;
           <code className={styles.code}>pages/index.js</code>
         </p>
-        <div>
-          <ConnectButton />
-        </div>
+        <ConnectButton />
       </div>
 
       <div className={styles.center}>