[wip] fix: add WalletConnect v2 support

.env.local.sample

@@ -1,6 +1,7 @@
 NEXT_PUBLIC_INFURA_RPC=""
 NEXT_PUBLIC_INFURA_ID=""
+NEXT_PUBLIC_WALLETCONNECT_ID=""
 MONGODB_URL=""
 MONGODB_DB=""
 NOTIFICATION_HOOK=""
-MIN_COMP=""
+MIN_COMP=""

components/header.js

@@ -44,7 +44,7 @@ export default function Header() {
       <div>
         {/* Logo */}
         <div>
-          <Link href={`/`}>
+          <Link href={`/`} legacyBehavior>
             <a>
               <img
                 src="brand/compound-logo.svg"
@@ -60,14 +60,14 @@ export default function Header() {
         <div>
           <ul>
             <li>
-              <Link href={`/`}>
+              <Link href={`/`} legacyBehavior>
                 <a className={router.pathname === "/" ? styles.active : null}>
                   Vote
                 </a>
               </Link>
             </li>
             <li>
-              <Link href={`/delegate`}>
+              <Link href={`/delegate`} legacyBehavior>
                 <a
                   className={
                     router.pathname === "/delegate" ? styles.active : null
@@ -128,12 +128,12 @@ export default function Header() {
         >
           <ul>
             <li>
-              <Link href={`/`}>
+              <Link href={`/`} legacyBehavior>
                 <a>Vote</a>
               </Link>
             </li>
             <li>
-              <Link href={`/delegate`}>
+              <Link href={`/delegate`} legacyBehavior>
                 <a>Delegate</a>
               </Link>
             </li>

containers/vote.js

@@ -61,7 +61,7 @@ function useVote() {
           // If no error
           if (!error) {
             // Resolve promise with resulting signature
-            resolve(result.result);
+            resolve(result);
           } else {
             // Reject promise with resulting error
             reject(error);

containers/web3p.js

@@ -1,54 +1,33 @@
 import { useContext } from "react";
 import Web3 from "web3"; // Web3
-import Web3Modal from "web3modal"; // Web3Modal
 import { useState, useEffect } from "react"; // State management
 import { createContainer } from "unstated-next"; // Unstated-next containerization
-import WalletConnectProvider from "@walletconnect/web3-provider"; // WalletConnectProvider (Web3Modal)
-import { RPCWeb3Provider } from '@compound-finance/comet-extension';
-import { useRPC } from '../components/hooks/useRPC';
+import { EthereumProvider } from "@walletconnect/ethereum-provider"; // EthereumProvider (WalletConnect3Modal)
+import { RPCWeb3Provider } from "@compound-finance/comet-extension";
+import { useRPC } from "../components/hooks/useRPC";
 import { Embedded } from "containers"; // Embedded
 
-// Web3Modal provider options
-const providerOptions = {
-  walletconnect: {
-    package: WalletConnectProvider,
-    options: {
-      // Inject Infura
-      infuraId: process.env.NEXT_PUBLIC_INFURA_ID,
-    },
-  },
-};
-
 function useWeb3() {
   const embedded = useContext(Embedded);
   const rpc = useRPC();
   const [web3, setWeb3] = useState(null); // Web3 provider
-  const [modal, setModal] = useState(null); // Web3Modal
   const [address, setAddress] = useState(null); // ETH address
 
-  /**
-   * Sets up web3Modal and saves to state
-   */
-  const setupWeb3Modal = () => {
-    // Create new web3Modal
-    const web3Modal = new Web3Modal({
-      network: "mainnet",
-      cacheProvider: true,
-      providerOptions: providerOptions,
-    });
-
-    // Set web3Modal
-    setModal(web3Modal);
-  };
-
   /**
    * Authenticate, save web3 provider, and save eth address
    */
   const authenticate = async () => {
-    // Toggle modal
     let provider;
+    // Toggle modal
     if (!embedded) {
-      provider = await modal.connect();
+      // EthereumProvider provider options (triggers WalletConnectModal)
+      provider = await EthereumProvider.init({
+        projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_ID,
+        chains: [1], // mainnet
+        showQrModal: true, // prompts modal using @walletconnect/modal
+        methods: ["eth_signTypedData_v4"],
+      });
+      await provider.enable();
     } else {
       provider = new RPCWeb3Provider(rpc.sendRPC);
     }
@@ -90,10 +69,7 @@ function useWeb3() {
 
   // On mount
   useEffect(() => {
-    // Setup web3modal
-    if (!embedded) {
-      setupWeb3Modal();
-    } else {
+    if (embedded) {
       authenticate();
     }
   }, []);

package.json

@@ -15,20 +15,21 @@
     "@davatar/react": "^1.8.1",
     "@ethersproject/providers": "^5.5.2",
     "@metamask/eth-sig-util": "^4.0.0",
-    "@walletconnect/web3-provider": "^1.6.6",
+    "@walletconnect/ethereum-provider": "^2.9.0",
+    "@walletconnect/modal": "^2.6.0",
     "axios": "^0.21.0",
     "dayjs": "^1.9.6",
+    "eslint-config-next": "^13.4.10",
     "mongodb": "^3.6.3",
-    "next": "10.0.3",
+    "next": "^13.4.10",
     "nprogress": "^0.2.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hamburger-menu": "^1.2.1",
     "react-spinners": "^0.9.0",
     "sass": "^1.29.0",
     "unstated-next": "^1.1.0",
-    "web3": "1.7.3",
-    "web3modal": "^1.9.2"
+    "web3": "1.7.3"
   },
   "volta": {
     "node": "16.16.0"