LIT-Protocol · awisniew207 · Sep 18, 2024
diff --git a/lit-action-using-fetch/browser/.env.example b/lit-action-using-fetch/browser/.env.example
@@ -1 +1,2 @@
-PKP_PUBLIC_KEY=
+VITE_LIT_PKP_PUBLIC_KEY=
+VITE_LIT_CAPACITY_CREDIT_TOKEN_ID=
diff --git a/lit-action-using-fetch/browser/.eslintrc.cjs b/lit-action-using-fetch/browser/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/lit-action-using-fetch/browser/.gitignore b/lit-action-using-fetch/browser/.gitignore
@@ -1,4 +1,24 @@
-.env
-.cache
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
 dist
-node_modules
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/lit-action-using-fetch/browser/README.md b/lit-action-using-fetch/browser/README.md
@@ -1,8 +1,44 @@
-# 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
+# Implementing Fetch Within a Lit Action in the Browser
+
+This code example demonstrates a Lit Action that fetches data from an API and conditionally signs a message based on the retrieved information.
+
+## Understanding the Implementation
+
+1. You will be prompted by your wallet (i.e. MetaMask) to connect an account to the site
+2. Connect to the Lit network using the `LitNodeClient` on the `datil-test` network
+3. Connect the `LitContracts` client to the Lit network (`datil-test` in this case)
+4. **If not provided in the .env file**: Mint a [`PKP`](https://developer.litprotocol.com/user-wallets/pkps/overview)
+5. **If not provided in the .env file**: Mint a [`capacityCreditsNFT`](https://developer.litprotocol.com/sdk/capacity-credits) and define the request limit and expiration date
+6. You will then be prompted to sign a message, this message will create the `capacityDelegationAuthSig` that will be used to pay for Lit usage
+7. After signing, the Lit Action will be executed. The console will then show the Lit Action response and whether the signature was successful
+
+## Running this Example
+
+### Install the Dependencies
+
+In this directory, `lit-action-using-fetch/browser`, run `yarn` to install the project dependencies.
+
+### Specifying Your Lit PKP's Public Key and CapacityCredit Token ID
+
+If you already have a Lit PKP that you'd like to use, you can copy the contents of the provided `.env.example` to a `.env` file to specify it. If you don't have a PKP, or wish to use a new one for this example, then you can skip this step and one will be created for you when you run this example. This is also the case for the Lit Capacity Credit Token ID; you can provide one or have one minted for you.
+
+**NOTE** In order for a new Lit PKP to be minted for you, you **must** have `tstLPX` tokens. You can receive some `tstLPX` using the faucet available [here](https://chronicle-yellowstone-faucet.getlit.dev/).
+
+```
+cp .env.example .env
+```
+
+Your `.env` file should look like:
+
+```
+VITE_LIT_PKP_PUBLIC_KEY=yourPublicKey
+VITE_LIT_CAPACITY_CREDIT_TOKEN_ID=yourCapacityCreditTokenId
+```
+
+### Starting the Example
+
+In this directory, `lit-action-using-fetch/browser`, run `yarn dev` to bundle all of this code and serve the HTML file at: [http://localhost:5173](http://localhost:5173).
+
+After starting and waiting for Vite to serve the website, you should see a page with a single button that says: `Run Example`.
+
+Before you click the button, open up the JavaScript console in your browser so you can see the output of this example.
diff --git a/lit-action-using-fetch/browser/index.html b/lit-action-using-fetch/browser/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lit Action Fetch Signing Example</title>
+    <style>
+      body, html {
+        margin: 0;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      #root {
+        width: 100%;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>