Immediatly Relay Votes

.env.local.sample

@@ -1,5 +1,6 @@
 NEXT_PUBLIC_INFURA_RPC=""
 NEXT_PUBLIC_INFURA_ID=""
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=""
 MONGODB_URL=""
 MONGODB_DB=""
 NOTIFICATION_HOOK=""

components/header.js

@@ -45,36 +45,34 @@ export default function Header() {
         {/* Logo */}
         <div>
           <Link href={`/`}>
-            <a>
-              <img
-                src="brand/compound-logo.svg"
-                alt="Compound logo"
-                height="30"
-                width="136"
-              />
-            </a>
+            <img
+              src="brand/compound-logo.svg"
+              alt="Compound logo"
+              height="30"
+              width="136"
+            />
           </Link>
         </div>
 
         {/* Menu */}
         <div>
           <ul>
             <li>
-              <Link href={`/`}>
-                <a className={router.pathname === "/" ? styles.active : null}>
-                  Vote
-                </a>
+              <Link
+                href={`/`}
+                className={router.pathname === "/" ? styles.active : null}
+              >
+                Vote
               </Link>
             </li>
             <li>
-              <Link href={`/delegate`}>
-                <a
-                  className={
-                    router.pathname === "/delegate" ? styles.active : null
-                  }
-                >
-                  Delegate
-                </a>
+              <Link
+                href={`/delegate`}
+                className={
+                  router.pathname === "/delegate" ? styles.active : null
+                }
+              >
+                Delegate
               </Link>
             </li>
           </ul>
@@ -128,14 +126,10 @@ export default function Header() {
         >
           <ul>
             <li>
-              <Link href={`/`}>
-                <a>Vote</a>
-              </Link>
+              <Link href={`/`}>Vote</Link>
             </li>
             <li>
-              <Link href={`/delegate`}>
-                <a>Delegate</a>
-              </Link>
+              <Link href={`/delegate`}>Delegate</Link>
             </li>
           </ul>
           {address ? (

containers/delegate.js

@@ -1,90 +1,51 @@
 import axios from "axios"; // Axios requests
 import { web3p } from "containers"; // Web3
-import { COMP_ABI } from "helpers/abi"; // Compound (COMP) Governance Token ABI
+import { COMP_ABI, COMP_ADDRESS } from "helpers/abi"; // Compound (COMP) Governance Token ABI
 import { useState, useEffect } from "react"; // State management
 import { createContainer } from "unstated-next"; // Unstated-next containerization
 
 // Reference implementation: https://github.com/TennisBowling/comp.vote/blob/master/bySig/delegate_by_signature.html
 function useDelegate() {
   // Context
-  const { web3, address } = web3p.useContainer();
+  const { publicClient, walletClient, address } = web3p.useContainer();
 
   // Local state
   const [currentDelegate, setCurrentDelegate] = useState(null); // Current delegate
 
   /**
-   * Generate delegation message
+   * Sign an EIP-712 delegation message
    * @param {string} delegatee address to delegate voting power to
-   * @param {integer} nonce transaction nonce
+   * @param {bigint} nonce transaction nonce
    */
-  const createDelegateBySigMessage = (delegatee, nonce = 0) => {
-    // Types
-    const types = {
-      EIP712Domain: [
-        { name: "name", type: "string" },
-        { name: "chainId", type: "uint256" },
-        { name: "verifyingContract", type: "address" },
-      ],
-      Delegation: [
-        { name: "delegatee", type: "address" },
-        { name: "nonce", type: "uint256" },
-        { name: "expiry", type: "uint256" },
-      ],
-    };
-
-    // Return message to sign
-    return JSON.stringify({
-      types,
-      primaryType: "Delegation",
-      // Compound COMP token contract
+  const signDelegation = async (delegatee, nonce) => {
+    return walletClient.signTypedData({
+      account: address,
       domain: {
         name: "Compound",
         chainId: 1,
-        verifyingContract: "0xc00e94cb662c3520282e6f5717214004a7f26888",
+        verifyingContract: COMP_ADDRESS,
+      },
+      types: {
+        Delegation: [
+          { name: "delegatee", type: "address" },
+          { name: "nonce", type: "uint256" },
+          { name: "expiry", type: "uint256" },
+        ],
       },
-      // Message
+      primaryType: "Delegation",
       message: {
-        // Delegatee address
         delegatee,
-        nonce: nonce,
-        expiry: 10e9,
+        nonce,
+        expiry: BigInt(10e9),
       },
     });
   };
 
-  /**
-   * Returns promise of web3 signature
-   * @param {string} msgParams to sign
-   */
-  const signDelegation = async (msgParams) => {
-    // Return promise
-    return new Promise((resolve, reject) => {
-      // Sign message
-      web3.currentProvider.sendAsync(
-        {
-          method: "eth_signTypedData_v4",
-          params: [address, msgParams],
-          from: address,
-        },
-        async (error, result) => {
-          // If no error
-          if (!error) {
-            // Resolve promise with resulting signature
-            resolve(result.result);
-          } else {
-            // Reject promise with resulting error
-            reject(error);
-          }
-        }
-      );
-    });
-  };
-
   /**
    * POSTS delegation to back-end
    * @param {string} delegatee address to delegate voting power to
-   * @param {integer} nonce transaction nonce
-   * @param {string} signedMsg from Web3
+   * @param {bigint} nonce transaction nonce
+   * @param {string} signedMsg hex signature from wallet
    */
   const castDelegation = async (delegatee, nonce, signedMsg) => {
     // Collect r, s, v
@@ -101,56 +62,45 @@ function useDelegate() {
         v,
         expiry: 10e9,
         delegatee,
-        nonce,
+        nonce: nonce.toString(),
       })
-      // If successful
       .then(() => {
-        // Alert successful
         alert("Success!");
       })
-      // Else,
       .catch((error) => {
-        // Alert error message
         alert("Error: " + error.response.data.message);
       });
   };
 
   /**
    * Create a delegation to delegatee
-   * @param {string} delegate address to delegate voting power to
+   * @param {string} delegatee address to delegate voting power to
    */
   const createDelegation = async (delegatee) => {
-    // Compound (COMP) Governance token contract
-    const compoundContract = new web3.eth.Contract(
-      COMP_ABI,
-      "0xc00e94cb662c3520282e6f5717214004a7f26888"
-    );
-
-    // Collect interaction nonce
-    const nonce = await compoundContract.methods.nonces(address).call();
+    const nonce = await publicClient.readContract({
+      address: COMP_ADDRESS,
+      abi: COMP_ABI,
+      functionName: "nonces",
+      args: [address],
+    });
 
-    // Generate delegation message to sign
-    const msgParams = createDelegateBySigMessage(delegatee, nonce);
-    const signedMsg = await signDelegation(msgParams);
+    const signedMsg = await signDelegation(delegatee, nonce);
 
-    // POST vote to server
+    // POST delegation to server
     await castDelegation(delegatee, nonce, signedMsg);
   };
 
   /**
    * Checks if a user has an existing delegation
    */
   const checkDelegation = async () => {
-    // Compound (COMP) Governance token contract
-    const compoundContract = new web3.eth.Contract(
-      COMP_ABI,
-      "0xc00e94cb662c3520282e6f5717214004a7f26888"
-    );
-
-    // Collect current delegate
-    const delegate = await compoundContract.methods.delegates(address).call();
+    const delegate = await publicClient.readContract({
+      address: COMP_ADDRESS,
+      abi: COMP_ABI,
+      functionName: "delegates",
+      args: [address],
+    });
 
-    // Update delegate in state
     const noDelegate = "0x0000000000000000000000000000000000000000";
     if (delegate !== noDelegate) setCurrentDelegate(delegate);
   };
@@ -161,7 +111,7 @@ function useDelegate() {
     setCurrentDelegate(null);
 
     // If authenticated
-    if (web3 && address) {
+    if (publicClient && address) {
       // Recheck delegation status
       checkDelegation();
     }