Added Wallet Verification code

SnickerdoodleLabs · May 27, 2022 · c696c60 · c696c60
1 parent 05bc6f3
commit c696c60
Show file tree

Hide file tree

Showing 9 changed files with 1,924 additions and 1,905 deletions.
diff --git a/packages/browserExtension/src/contract/abi.js b/packages/browserExtension/src/contract/abi.js
@@ -0,0 +1,64 @@
+export const abi_RequestForData = [
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "trustedForwarder",
+        type: "address",
+      },
+    ],
+    stateMutability: "nonpayable",
+    type: "constructor",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "who",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "string",
+        name: "CID",
+        type: "string",
+      },
+    ],
+    name: "RequestForData",
+    type: "event",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "forwarder",
+        type: "address",
+      },
+    ],
+    name: "isTrustedForwarder",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "string",
+        name: "CID",
+        type: "string",
+      },
+    ],
+    name: "requestForData",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+];
diff --git a/packages/browserExtension/src/manifest.json b/packages/browserExtension/src/manifest.json
@@ -8,10 +8,8 @@
     "default_popup": "popup.html",
     "default_icon": "icon-34.png"
   },
-  "chrome_url_overrides": {
-    "newtab": "newtab.html"
-  },
-  "permissions": ["notifications"],
+
+  "permissions": ["notifications", "storage", "activeTab", "scripting"],
   "icons": {
     "128": "icon-128.png"
   },

diff --git a/packages/browserExtension/src/pages/Background/index.js b/packages/browserExtension/src/pages/Background/index.js
@@ -1,17 +1,26 @@
-import detectEthereumProvider from '@metamask/detect-provider';
-
 console.log('This is the background page.');
 console.log('Put the background scripts here.');
 
-export default async function connect() {
-  const provider = await detectEthereumProvider();
 
-  if (provider) {
-    // From now on, this should always be true:
-    // provider === window.ethereum
-    //startApp(provider); // initialize your app
-    console.log(' MetaMask!');
-  } else {
-    console.log('Please install MetaMask!');
+chrome.runtime.onMessage.addListener(
+  function(request, sender, sendResponse) {
+    console.log(sender.tab ?
+                "from a content script:" + sender.tab.url :
+                "from the extension");
+    if (request.greeting === "hello")
+      sendResponse({farewell: "goodbye"});
   }
-}
+);
+
+function showStayHydratedNotification() {
+  chrome.notifications.create({
+    type: 'basic',
+    iconUrl: 'stay_hydrated.png',
+    title: 'Time to Hydrate',
+    message: 'Everyday I\'m Guzzlin\'!',
+    buttons: [
+      { title: 'Keep it Flowing.' }
+    ],
+    priority: 0
+  });
+}
diff --git a/packages/browserExtension/src/pages/Content/index.js b/packages/browserExtension/src/pages/Content/index.js
@@ -1,6 +1,10 @@
 import { printLine } from './modules/print';
 
-console.log('Content script works!');
+
+chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
+    console.log('response', response);
+  });
+console.log('2 Content script works!');
 console.log('Must reload extension for modifications to take effect.');
 
 printLine("Using the 'printLine' function from the Print Module");
diff --git a/packages/browserExtension/src/pages/Popup/Popup.jsx b/packages/browserExtension/src/pages/Popup/Popup.jsx
@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import Greetings from '../../containers/Greetings/Greetings';
-import './Popup.css';
-import createMetaMaskProvider from 'metamask-extension-provider';
-import { ethers } from 'ethers';
-import connect from '../Background';
+import React, { useEffect, useState } from "react";
+import Greetings from "../../containers/Greetings/Greetings";
+import "./Popup.css";
+import createMetaMaskProvider from "metamask-extension-provider";
+import { ethers } from "ethers";
+import connect from "../Background";
+import { abi_RequestForData } from "../../contract/abi";
 
 // https://github.com/MetaMask/extension-provider
 // import { initializeProvider } from '@metamask/providers';
@@ -14,158 +15,101 @@ const Popup = () => {
   const [connected, setConnected] = useState(false);
   const [provider, setProvider] = useState(false);
   const [messages, setMessages] = useState([]);
+  const [signer, setSigner] = useState(undefined);
 
-  const abi = [
-    {
-      inputs: [
-        {
-          internalType: 'address',
-          name: 'trustedForwarder',
-          type: 'address',
-        },
-      ],
-      stateMutability: 'nonpayable',
-      type: 'constructor',
-    },
-    {
-      anonymous: false,
-      inputs: [
-        {
-          indexed: true,
-          internalType: 'address',
-          name: 'who',
-          type: 'address',
-        },
-        {
-          indexed: false,
-          internalType: 'string',
-          name: 'CID',
-          type: 'string',
-        },
-      ],
-      name: 'RequestForData',
-      type: 'event',
-    },
-    {
-      inputs: [
-        {
-          internalType: 'address',
-          name: 'forwarder',
-          type: 'address',
-        },
-      ],
-      name: 'isTrustedForwarder',
-      outputs: [
-        {
-          internalType: 'bool',
-          name: '',
-          type: 'bool',
-        },
-      ],
-      stateMutability: 'view',
-      type: 'function',
-    },
-    {
-      inputs: [
-        {
-          internalType: 'string',
-          name: 'CID',
-          type: 'string',
-        },
-      ],
-      name: 'requestForData',
-      outputs: [],
-      stateMutability: 'nonpayable',
-      type: 'function',
-    },
-  ];
+  async function connectMetamask() {
+    console.log("connectMetamask");
 
-  function v2() {
-    connect();
-  }
-  function connectMetamask() {
     const provider = createMetaMaskProvider();
-
-    console.log('p2', provider);
+    console.log("p", provider);
 
     if (provider) {
-      console.log('provider detected', provider);
+      console.log("provider detected", provider);
       setProvider(provider);
 
-      provider
-        .request({ method: 'eth_requestAccounts' })
-        .then((accounts) => {
-          setAccounts(accounts);
-          setConnected(true);
+      const accounts = await provider.request({
+        method: "eth_requestAccounts",
+      });
 
-          console.log('accounts ', accounts);
+      setAccounts(accounts);
+      setConnected(true);
+      const connectedProvider = new ethers.providers.Web3Provider(provider);
+      console.log(" Connected Provider ", connectedProvider);
+      setSigner(connectedProvider.getSigner());
+      console.log(" Signer Provider ", connectedProvider.getSigner());
 
-          // Start Listening..
-          //verify(provider, accounts[0]);
-          listenToEvents(provider);
-        })
-        .catch((err) => {
-          // Some unexpected error.
-          // For backwards compatibility reasons, if no accounts are available,
-          // eth_accounts will return an empty array.
-          console.error(err);
-        });
+      console.log("accounts ", accounts);
+      listenToEvents(provider);
+      // Start Listening..
+      //verify(provider, accounts[0]);
+      //listenToEvents(provider);
     }
   }
 
   async function listenToEvents(provider) {
-    const contractAddress = '0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512';
-    console.log(' provider 1', provider);
+    const contractAddress = "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512";
+    console.log(" provider 1", provider);
     const ethProvider = new ethers.providers.Web3Provider(provider);
-    const contract = new ethers.Contract(contractAddress, abi, ethProvider);
+    const contract = new ethers.Contract(
+      contractAddress,
+      abi_RequestForData,
+      ethProvider,
+    );
 
-    contract.on('RequestForData', (e, cid) => {
-      console.log('Received Evemt', ' Address ', e, ' CID ', cid);
+    contract.on("RequestForData", (e, cid) => {
+      console.log("Received Evemt", " Address ", e, " CID ", cid);
       setMessages((prev) => [...prev, cid]);
     });
   }
 
-  function verify(provider, from) {
-    console.log(' Provider ', provider);
-    const msgParams = {
+  function messageToVerify() {
+    return JSON.stringify({
       domain: {
+        // Defining the chain aka Rinkeby testnet or Ethereum Main Net
         chainId: 1,
-        name: 'Snickerdoodle Consent Contract',
-        verifyingContract: '0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512',
-        version: '1',
+        // Give a user friendly name to the specific contract you are signing for.
+        name: "SnickerDoodle Consent Contract",
+        // If name isn't enough add verifying contract to make sure you are establishing contracts with the proper entity
+        verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
+        // Just let's you know the latest version. Definitely make sure the field name is correct.
+        version: "1",
       },
 
+      // Defining the message signing data content.
       message: {
-        contents: 'Hello, from Snickerdoodle',
+        contents: "You are signing Snickerdoodle's Consent Contract",
+        from: {
+          name: "SnickerDoodle",
+        },
+        to: [
+          {
+            wallets: [accounts[0]],
+          },
+        ],
       },
-    };
+      // Refers to the keys of the *types* object below.
+    });
+  }
 
-    var params = [from, JSON.stringify(msgParams)];
-    provider.sendAsync(
-      {
-        method: 'eth_signTypedData_v4',
-        params,
-        from,
-      },
-      (result) => console.log(result)
-    );
+  async function verify() {
+    const signature = await signer.signMessage(messageToVerify());
+    console.log(" signature ", signature);
   }
 
-  // function notify() {
-  //   chrome.runtime.sendMessage({ greeting: 'hello' }, function (response) {
-  //     console.log(response.farewell);
-  //   });
-  // }
   return (
     <div className="App">
       <header className="App-header">
         Hello Snickerdoodle!
         {connected ? (
-          <ul>
-            {accounts.map((account) => (
-              <li key={account}> {account}</li>
-            ))}
-          </ul>
+          <>
+            {" "}
+            <button onClick={verify}>Signature Verify</button>
+            <ul>
+              {accounts.map((account) => (
+                <li key={account}> {account}</li>
+              ))}
+            </ul>
+          </>
         ) : (
           <button onClick={connectMetamask}>
             Connect to Metamask And Listen to Events
@@ -175,9 +119,9 @@ const Popup = () => {
           Make sure that your Metamask is pointing at right Ethernet Network!
           HardHat local host or Avalanche.
         </p>
-        <div> {messages.length > 0 ? 'Messages Received' : ''} </div>
+        <div> {messages.length > 0 ? "Messages Received" : ""} </div>
         <ul>
-          {' '}
+          {" "}
           {messages.map((message, index) => (
             <li key={index}>{message}</li>
           ))}