LIT-Protocol · spacesailor24 · May 7, 2024 · May 2, 2024 · May 3, 2024 · May 3, 2024
diff --git a/lit-action-using-fetch/browser/.env.example b/lit-action-using-fetch/browser/.env.example
@@ -0,0 +1 @@
+PKP_PUBLIC_KEY=
diff --git a/lit-action-using-fetch/browser/.gitignore b/lit-action-using-fetch/browser/.gitignore
@@ -0,0 +1,4 @@
+.env
+.cache
+dist
+node_modules
diff --git a/lit-action-using-fetch/browser/README.md b/lit-action-using-fetch/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/lit-action-using-fetch/browser/package.json b/lit-action-using-fetch/browser/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "lit-action-using-fetch-browser",
+  "version": "0.1.0",
+  "description": "Example of executing a Lit Action that makes a API request using Fetch",
+  "source": "src/index.html",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel ./src/index.html"
+  },
+  "dependencies": {
+    "@dotenvx/dotenvx": "^0.37.1",
+    "@lit-protocol/auth-browser": "^6.0.0-alpha.11",
+    "@lit-protocol/auth-helpers": "^6.0.0-alpha.11",
+    "@lit-protocol/constants": "^6.0.0-alpha.11",
+    "@lit-protocol/contracts-sdk": "^6.0.0-alpha.11",
+    "@lit-protocol/lit-node-client": "^6.0.0-alpha.11",
+    "ethers": "5.7.2"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.12.5"
+  }
+}
diff --git a/lit-action-using-fetch/browser/src/index.html b/lit-action-using-fetch/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/lit-action-using-fetch/browser/src/index.js b/lit-action-using-fetch/browser/src/index.js
@@ -0,0 +1,130 @@
+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 { LitContracts } from "@lit-protocol/contracts-sdk";
+import { disconnectWeb3 } from "@lit-protocol/auth-browser";
+import * as ethers from "ethers";
+
+import { litActionCode } from "./litAction";
+
+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 message = new Uint8Array(
+      await crypto.subtle.digest(
+        "SHA-256",
+        new TextEncoder().encode("Hello world")
+      )
+    );
+    const litActionSignatures = await litNodeClient.executeJs({
+      sessionSigs,
+      code: litActionCode,
+      jsParams: {
+        toSign: message,
+        publicKey: await getPkpPublicKey(),
+        sigName: "sig",
+      },
+    });
+    console.log("litActionSignatures: ", litActionSignatures);
+  } 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 (
+    process.env.PKP_PUBLIC_KEY !== undefined &&
+    process.env.PKP_PUBLIC_KEY !== ""
+  )
+    return process.env.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 LitActionResource("*"),
+        ability: LitAbility.LitActionExecution,
+      },
+      {
+        resource: new LitPKPResource("*"),
+        ability: LitAbility.PKPSigning,
+      },
+    ],
+    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,
+    });
+
+    const authSig = await generateAuthSig({
+      signer: ethersSigner,
+      toSign,
+    });
+
+    return authSig;
+  };
+}
diff --git a/lit-action-using-fetch/browser/src/litAction.js b/lit-action-using-fetch/browser/src/litAction.js
@@ -0,0 +1,19 @@
+export const litActionCode = `
+(async () => {
+  const url = "https://api.weather.gov/gridpoints/TOP/31,80/forecast";
+  const resp = await fetch(url).then((response) => response.json());
+  const temp = resp.properties.periods[0].temperature;
+
+  console.log(temp);
+
+  // only sign if the temperature is above 60. If it's below 60, exit.
+  if (temp < 60) {
+    return;
+  }
+
+  // this requests a signature share from the Lit Node
+  // the signature share will be automatically returned in the HTTP response from the node
+  // all the params (toSign, publicKey, sigName) are passed in from the LitJsSdk.executeJs() function
+  const sigShare = await LitActions.signEcdsa({ toSign, publicKey, sigName });
+})();
+`;