From 4d2042cf0a300b46fae61477d6b533b4b67c2af7 Mon Sep 17 00:00:00 2001 From: Chris Cassano <1285652+glitch003@users.noreply.github.com> Date: Wed, 18 Dec 2024 03:55:02 +0700 Subject: [PATCH] Devin/1734393518 add example code tab (#7) * feat: add example code tab to secret displays Co-Authored-By: Chris Cassano * prettier * better example code * include ipfsCid in secretObject --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- app/components/Tabs.jsx | 32 ++++++++++ app/createSecrets/page.jsx | 118 ++++++++++++++++++++++++++++++------- app/mySecrets/page.jsx | 55 +++++++++++++---- app/utils/codeGenerator.js | 32 ++++++++++ 4 files changed, 205 insertions(+), 32 deletions(-) create mode 100644 app/components/Tabs.jsx create mode 100644 app/utils/codeGenerator.js diff --git a/app/components/Tabs.jsx b/app/components/Tabs.jsx new file mode 100644 index 0000000..d5d538c --- /dev/null +++ b/app/components/Tabs.jsx @@ -0,0 +1,32 @@ +"use client"; +import { useState } from "react"; + +export default function Tabs({ tabs }) { + const [activeTab, setActiveTab] = useState(0); + + return ( +
+
+ +
+
{tabs[activeTab].content}
+
+ ); +} diff --git a/app/createSecrets/page.jsx b/app/createSecrets/page.jsx index d2127fb..10c929d 100644 --- a/app/createSecrets/page.jsx +++ b/app/createSecrets/page.jsx @@ -3,6 +3,8 @@ import React, { useState, useEffect } from "react"; import { LitNodeClient, encryptString } from "@lit-protocol/lit-node-client"; import { useNetwork } from "../contexts/NetworkContext"; import { Copy, Trash2 } from "lucide-react"; +import Tabs from "../components/Tabs"; +import { generateExampleCode } from "../utils/codeGenerator"; export default function Secrets() { const { network } = useNetwork(); @@ -87,8 +89,9 @@ export default function Secrets() { const secretObject = { encryptedData: ciphertext, dataToEncryptHash, - accessControlConditions, // Include access control conditions - litNetwork: network, // Include network information + accessControlConditions, + litNetwork: network, + ipfsCid: litActionCid, }; setCurrentSecret(secretObject); @@ -227,21 +230,49 @@ export default function Secrets() { {currentSecret && (
-

Secret Object:

-
- 
-                      {JSON.stringify(currentSecret, null, 2)}
-
- -
+

Secret Details:

+ + 
+                              {JSON.stringify(currentSecret, null, 2)}
+
+ +
+ ), + }, + { + label: "Example Code", + content: ( +
+ 
+                              {generateExampleCode(currentSecret)}
+
+ +
+ ), + }, + ]} + />
)} @@ -281,10 +312,55 @@ export default function Secrets() {
{item.litActionCid}
-
Secret Object:
- 
-                      {JSON.stringify(item.secretObject, null, 2)}
-
+
Secret Details:
+ + 
+                                {JSON.stringify(item.secretObject, null, 2)}
+
+ + + ), + }, + { + label: "Example Code", + content: ( +
+ 
+                                {generateExampleCode(item.secretObject)}
+
+ +
+ ), + }, + ]} + /> ))} diff --git a/app/mySecrets/page.jsx b/app/mySecrets/page.jsx index e6a73cb..614b45e 100644 --- a/app/mySecrets/page.jsx +++ b/app/mySecrets/page.jsx @@ -1,6 +1,8 @@ "use client"; import React, { useState, useEffect } from "react"; import { Plus, Search, Copy, Trash2 } from "lucide-react"; +import Tabs from "../components/Tabs"; +import { generateExampleCode } from "../utils/codeGenerator"; const SecretsListPage = () => { const [secrets, setSecrets] = useState([]); @@ -76,17 +78,48 @@ const SecretsListPage = () => {
- -
- 
-              {JSON.stringify(secret.secretObject, null, 2)}
-
- + +
+ + 
+                        {JSON.stringify(secret.secretObject, null, 2)}
+
+ +
+ ), + }, + { + label: "Example Code", + content: ( +
+ 
+                        {generateExampleCode(secret.secretObject)}
+
+ +
+ ), + }, + ]} + />
diff --git a/app/utils/codeGenerator.js b/app/utils/codeGenerator.js new file mode 100644 index 0000000..121b8bc --- /dev/null +++ b/app/utils/codeGenerator.js @@ -0,0 +1,32 @@ +export function generateExampleCode(secretObject) { + return `// Example code for using your encrypted secret +const { encryptedData, dataToEncryptHash, accessControlConditions, litNetwork, ipfsCid } = ${JSON.stringify(secretObject, null, 2)}; + +// Initialize Lit client +const client = new LitNodeClient({ litNetwork }); +await client.connect(); + +// Auth your user by getting session sigs. This is setup to use metamask as the signer in a browser, but you can use any signer. +// Docs on doing this on the server side are here: https://developer.litprotocol.com/sdk/access-control/quick-start#obtain-asessionsigson-the-server-side +const sessionSigs = await this.litNodeClient.getSessionSigs({ + chain: "ethereum", + resourceAbilityRequests: [ + { + resource: new LitActionResource("*"), + ability: LIT_ABILITY.LitActionExecution, + }, + ], +}); + +// Run the lit action, which can use the secret internally +const response = await litNodeClient.executeJs({ + sessionSigs, + ipfsCid, + jsParams: { + encryptedData, + dataToEncryptHash, + accessControlConditions, + } +}); +`; +}