LIT-Protocol · spacesailor24 · May 7, 2024 · May 2, 2024 · May 4, 2024 · May 4, 2024
diff --git a/eip-191-signing/browser/.env.example b/eip-191-signing/browser/.env.example
@@ -0,0 +1 @@
+PKP_PUBLIC_KEY=
diff --git a/eip-191-signing/browser/.gitignore b/eip-191-signing/browser/.gitignore
@@ -0,0 +1,4 @@
+.env
+.cache
+dist
+node_modules
diff --git a/eip-191-signing/browser/README.md b/eip-191-signing/browser/README.md
@@ -0,0 +1,8 @@
+# Running this Example
+
+1. `yarn`
+2. `yarn start`
+3. Click the `Click Me` button
+4. Connect your wallet
+5. Sign a message to generate a SessionSig
+6. The PKP signed message will be in the JavaScript console
diff --git a/eip-191-signing/browser/package.json b/eip-191-signing/browser/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "generating-eip-191-sigs-in-browser",
+  "version": "0.1.0",
+  "description": "Example of generating an EIP-191 signature using a Lit Action",
+  "source": "src/index.html",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel ./src/index.html"
+  },
+  "dependencies": {
+    "@lit-protocol/auth-browser": "^6.0.0-alpha.4",
+    "@lit-protocol/auth-helpers": "^6.0.0-alpha.4",
+    "@lit-protocol/constants": "^6.0.0-alpha.10",
+    "@lit-protocol/contracts-sdk": "^6.0.0-alpha.10",
+    "@lit-protocol/lit-node-client": "^6.0.0-alpha.4",
+    "ethers": "5.7.2"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.12.5",
+    "tslib": "^2.6.2"
+  }
+}
diff --git a/eip-191-signing/browser/src/index.html b/eip-191-signing/browser/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lit Session Signature Example</title>
+  </head>
+  <body>
+    <button id="myButton">Click Me</button>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/eip-191-signing/browser/src/index.js b/eip-191-signing/browser/src/index.js
@@ -0,0 +1,141 @@
+import { LitNodeClient } from "@lit-protocol/lit-node-client";
+import { LitNetwork } from "@lit-protocol/constants";
+import {
+  createSiweMessageWithRecaps,
+  generateAuthSig,
+  LitAbility,
+  LitActionResource,
+  LitPKPResource,
+} from "@lit-protocol/auth-helpers";
+import { disconnectWeb3 } from "@lit-protocol/auth-browser";
+import { LitContracts } from "@lit-protocol/contracts-sdk";
+import * as ethers from "ethers";
+
+import { litActionCode } from "./litAction";
+
+const PKP_PUBLIC_KEY = process.env.PKP_PUBLIC_KEY;
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.getElementById("myButton").addEventListener("click", buttonClick);
+});
+
+async function buttonClick() {
+  try {
+    console.log("Clicked");
+
+    const provider = new ethers.providers.Web3Provider(window.ethereum);
+    await provider.send("eth_requestAccounts", []);
+    const ethersSigner = provider.getSigner();
+    console.log("Connected account:", await ethersSigner.getAddress());
+
+    const litNodeClient = await getLitNodeClient();
+
+    const sessionSigs = await getSessionSigs(litNodeClient, ethersSigner);
+    console.log("Got Session Signatures!");
+
+    const litActionSignatures = await litNodeClient.executeJs({
+      sessionSigs,
+      code: litActionCode,
+      jsParams: {
+        dataToSign: ethers.utils.arrayify(
+          ethers.utils.keccak256([1, 2, 3, 4, 5])
+        ),
+        publicKey: await getPkpPublicKey(ethersSigner),
+        sigName: "sig",
+      },
+    });
+    console.log("litActionSignatures: ", litActionSignatures);
+
+    verifySignature(litActionSignatures.signatures.sig);
+  } catch (error) {
+    console.error(error);
+  } finally {
+    disconnectWeb3();
+  }
+}
+
+async function getLitNodeClient() {
+  const litNodeClient = new LitNodeClient({
+    litNetwork: LitNetwork.Cayenne,
+  });
+
+  console.log("Connecting litNodeClient to network...");
+  await litNodeClient.connect();
+
+  console.log("litNodeClient connected!");
+  return litNodeClient;
+}
+
+async function getPkpPublicKey(ethersSigner) {
+  if (PKP_PUBLIC_KEY !== undefined && PKP_PUBLIC_KEY !== "")
+    return PKP_PUBLIC_KEY;
+
+  const pkp = await mintPkp(ethersSigner);
+  console.log("Minted PKP!", pkp);
+  return pkp.publicKey;
+}
+
+async function mintPkp(ethersSigner) {
+  console.log("Minting new PKP...");
+  const litContracts = new LitContracts({
+    signer: ethersSigner,
+    network: LitNetwork.Cayenne,
+  });
+
+  await litContracts.connect();
+
+  return (await litContracts.pkpNftContractUtils.write.mint()).pkp;
+}
+
+async function getSessionSigs(litNodeClient, ethersSigner) {
+  console.log("Getting Session Signatures...");
+  return litNodeClient.getSessionSigs({
+    chain: "ethereum",
+    expiration: new Date(Date.now() + 1000 * 60 * 60 * 24).toISOString(), // 24 hours
+    resourceAbilityRequests: [
+      {
+        resource: new LitPKPResource("*"),
+        ability: LitAbility.PKPSigning,
+      },
+      {
+        resource: new LitActionResource("*"),
+        ability: LitAbility.LitActionExecution,
+      },
+    ],
+    authNeededCallback: getAuthNeededCallback(litNodeClient, ethersSigner),
+  });
+}
+
+function getAuthNeededCallback(litNodeClient, ethersSigner) {
+  return async ({ resourceAbilityRequests, expiration, uri }) => {
+    const toSign = await createSiweMessageWithRecaps({
+      uri,
+      expiration,
+      resources: resourceAbilityRequests,
+      walletAddress: await ethersSigner.getAddress(),
+      nonce: await litNodeClient.getLatestBlockhash(),
+      litNodeClient,
+    });
+
+    return await generateAuthSig({
+      signer: ethersSigner,
+      toSign,
+    });
+  };
+}
+
+function verifySignature(signature) {
+  console.log("Verifying signature...");
+  const dataSigned = `0x${signature.dataSigned}`;
+  const encodedSig = ethersUtils.joinSignature({
+    v: signature.recid,
+    r: `0x${signature.r}`,
+    s: `0x${signature.s}`,
+  });
+
+  const recoveredPubkey = ethersUtils.recoverPublicKey(dataSigned, encodedSig);
+  console.log("Recovered uncompressed public key: ", recoveredPubkey);
+
+  const recoveredAddress = ethersUtils.recoverAddress(dataSigned, encodedSig);
+  console.log("Recovered address from signature: ", recoveredAddress);
+}
diff --git a/eip-191-signing/browser/src/litAction.js b/eip-191-signing/browser/src/litAction.js
@@ -0,0 +1,9 @@
+export const litActionCode = `
+(async () => {
+  const sigShare = await LitActions.signEcdsa({
+    toSign: dataToSign,
+    publicKey,
+    sigName,
+  });
+})();
+`;