Merge pull request #12 from SnickerdoodleLabs/feat/chain-id

feat: add chain id and signature message

packages/browserExtension/src/pages/Content/components/App/App.tsx

@@ -70,8 +70,10 @@ const App = () => {
   // Event handlers
   const onWalletConnectionCompleted = (e: Event) => {
     // @ts-ignore
-    const { accounts, signature } = e.detail;
+    const { accounts, signature, chainId } = e.detail;
     console.log("accounts received: ", accounts);
+    console.log("signature received: ", signature);
+    console.log("chainId received: ", chainId);
     chrome.storage.sync.set({ accountAddress: accounts }, function () {
       console.log("Value is set to" + accounts);
     });

packages/browserExtension/src/pages/Content/components/Screens/ConnectWallet/ConnectWallet.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Typography } from "@material-ui/core";
 
 import Modal, { useGenericModalStyles } from "../../Modals/Modal";
-import { EAPP_STATE } from "../../../constants";
+import { EAPP_STATE, signatureMessage } from "../../../constants";
 
 interface IConnectWalletProps {
   changeAppState: (state: EAPP_STATE) => void;
@@ -14,7 +14,11 @@ const ConnectWallet: React.FC<IConnectWalletProps> = ({
   const modalClasses = useGenericModalStyles();
 
   const onPrimaryButtonClick = () => {
-    document.dispatchEvent(new CustomEvent("SD_CONNECT_TO_WALLET_REQUEST"));
+    document.dispatchEvent(
+      new CustomEvent("SD_CONNECT_TO_WALLET_REQUEST", {
+        detail: { signatureMessage },
+      }),
+    );
   };
   const onSecondaryButtonClick = () => {
     changeAppState(EAPP_STATE.DISMISSED);

packages/browserExtension/src/pages/Content/constants/index.ts

@@ -45,3 +45,5 @@ export const REWARD_DATA: Array<IRewardItem> = [
     rewardName: "ATG-36 Helmet",
   },
 ];
+
+export const signatureMessage = `Welcome to Snickerdoodle! This transaction proves that you own this wallet so that only you benefit from the data it produces.`;

packages/browserExtension/src/pages/Content/injectables/walletConnection.js

@@ -66,33 +66,20 @@ const getAccounts = async () => {
   });
 };
 const getSignature = async (
-  SIGNATURE_DOMAIN =  {
-    name: "SnickerDoodle Protocol",
-    version: "0.0.1",
-  },
-  SIGNATURE_TYPES= {
-    AuthorizedGateway: [
-      { name: "Message", type: "string" },
-      { name: "Nonce", type: "string" },
-    ],
-  },
-  signatureValue =  {
-    Message: "default SD wallet message",
-    Nonce: "default nonce",
-},
+  signatureMessage
 ) => {
   const connectedProvider = new window.ethers.providers.Web3Provider(
     providersObject[Web3ProviderKeys.METAMASK],
   );
   const signer = connectedProvider.getSigner();
 
-  const signature = await signer._signTypedData(
-    SIGNATURE_DOMAIN,
-    SIGNATURE_TYPES,
-    signatureValue,
+  const signature = await signer.signMessage(
+   signatureMessage
   );
 
-  return signature;
+  const network = await connectedProvider.getNetwork();
+
+  return { chainId: network?.chainId, signature };
 };
 
 document.addEventListener("SD_CONNECT_TO_WALLET_REQUEST", async (e) => {
@@ -102,11 +89,12 @@ document.addEventListener("SD_CONNECT_TO_WALLET_REQUEST", async (e) => {
     return;
   }
   try {
+    const signatureMessage = e?.detail?.signatureMessage;
     document.dispatchEvent(new CustomEvent("SD_WALLET_CONNECTION_PENDING"));
     const accounts = await getAccounts();
     document.dispatchEvent(new CustomEvent("SD_WALLET_CONNECTED"));
-    const signature =await getSignature();
-    document.dispatchEvent(new CustomEvent("SD_WALLET_CONNECTION_COMPLETED", {detail: {  accounts,signature }}))
+    const {signature, chainId} = await getSignature(signatureMessage);
+    document.dispatchEvent(new CustomEvent("SD_WALLET_CONNECTION_COMPLETED", {detail: {  accounts, signature, chainId }}))
   } catch (e) {
     document.dispatchEvent(new CustomEvent("SD_WALLET_ERROR", {detail: {e}}))
   }