Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Devin/1734393518 add example code tab #7

Merged
merged 5 commits into from
Dec 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions app/components/Tabs.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
"use client";
import { useState } from "react";

export default function Tabs({ tabs }) {
const [activeTab, setActiveTab] = useState(0);

return (
<div>
<div className="border-b border-gray-200">
<nav className="-mb-px flex" aria-label="Tabs">
{tabs.map((tab, index) => (
<button
key={tab.label}
onClick={() => setActiveTab(index)}
className={`
py-2 px-4 border-b-2 font-medium text-sm
${
activeTab === index
? "border-orange-500 text-orange-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
}
`}
>
{tab.label}
</button>
))}
</nav>
</div>
<div className="mt-4">{tabs[activeTab].content}</div>
</div>
);
}
118 changes: 97 additions & 21 deletions app/createSecrets/page.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -227,21 +230,49 @@ export default function Secrets() {
{currentSecret && (
<div className="space-y-4">
<div className="bg-orange-50 p-4 rounded-lg border border-orange-200">
<h3 className="text-sm font-semibold text-gray-900 mb-2">Secret Object:</h3>
<div className="relative">
<pre className="font-mono text-sm text-gray-900 break-all whitespace-pre-wrap">
{JSON.stringify(currentSecret, null, 2)}
</pre>
<button
onClick={() =>
copyToClipboard(JSON.stringify(currentSecret), "secret object")
}
className="absolute top-2 right-2 p-2 hover:bg-orange-100 rounded"
title="Copy secret object"
>
<Copy className="h-4 w-4 text-gray-800" />
</button>
</div>
<h3 className="text-sm font-semibold text-gray-900 mb-2">Secret Details:</h3>
<Tabs
tabs={[
{
label: "Secret Object",
content: (
<div className="relative">
<pre className="font-mono text-sm text-gray-900 break-all whitespace-pre-wrap">
{JSON.stringify(currentSecret, null, 2)}
</pre>
<button
onClick={() =>
copyToClipboard(JSON.stringify(currentSecret), "secret object")
}
className="absolute top-2 right-2 p-2 hover:bg-orange-100 rounded"
title="Copy secret object"
>
<Copy className="h-4 w-4 text-gray-800" />
</button>
</div>
),
},
{
label: "Example Code",
content: (
<div className="relative">
<pre className="font-mono text-sm text-gray-900 break-all whitespace-pre-wrap">
{generateExampleCode(currentSecret)}
</pre>
<button
onClick={() =>
copyToClipboard(generateExampleCode(currentSecret), "example code")
}
className="absolute top-2 right-2 p-2 hover:bg-orange-100 rounded"
title="Copy example code"
>
<Copy className="h-4 w-4 text-gray-800" />
</button>
</div>
),
},
]}
/>
</div>
</div>
)}
Expand Down Expand Up @@ -281,10 +312,55 @@ export default function Secrets() {
<div className="font-mono text-sm text-gray-900 break-all bg-white p-2 rounded">
{item.litActionCid}
</div>
<div className="font-semibold text-gray-900 mt-4">Secret Object:</div>
<pre className="font-mono text-sm text-gray-900 break-all whitespace-pre-wrap bg-white p-3 rounded">
{JSON.stringify(item.secretObject, null, 2)}
</pre>
<div className="font-semibold text-gray-900 mt-4">Secret Details:</div>
<Tabs
tabs={[
{
label: "Secret Object",
content: (
<div className="relative">
<pre className="font-mono text-sm text-gray-900 break-all whitespace-pre-wrap bg-white p-3 rounded">
{JSON.stringify(item.secretObject, null, 2)}
</pre>
<button
onClick={() =>
copyToClipboard(
JSON.stringify(item.secretObject),
"secret object"
)
}
className="absolute top-2 right-2 p-2 hover:bg-orange-100 rounded"
title="Copy secret object"
>
<Copy className="h-4 w-4 text-gray-800" />
</button>
</div>
),
},
{
label: "Example Code",
content: (
<div className="relative">
<pre className="font-mono text-sm text-gray-900 break-all whitespace-pre-wrap bg-white p-3 rounded">
{generateExampleCode(item.secretObject)}
</pre>
<button
onClick={() =>
copyToClipboard(
generateExampleCode(item.secretObject),
"example code"
)
}
className="absolute top-2 right-2 p-2 hover:bg-orange-100 rounded"
title="Copy example code"
>
<Copy className="h-4 w-4 text-gray-800" />
</button>
</div>
),
},
]}
/>
</div>
</div>
))}
Expand Down
55 changes: 44 additions & 11 deletions app/mySecrets/page.jsx
Original file line number Diff line number Diff line change
@@ -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([]);
Expand Down Expand Up @@ -76,17 +78,48 @@ const SecretsListPage = () => {
</div>

<div>
<label className="text-sm font-medium text-gray-900">Secret Object</label>
<div className="mt-1 relative">
<pre className="bg-gray-50 rounded p-3 pr-10 font-mono text-sm break-all whitespace-pre-wrap text-gray-900">
{JSON.stringify(secret.secretObject, null, 2)}
</pre>
<button
onClick={() => copyToClipboard(JSON.stringify(secret.secretObject), "secret object")}
className="absolute right-2 top-2 text-gray-800 hover:text-gray-900"
>
<Copy className="h-4 w-4" />
</button>
<label className="text-sm font-medium text-gray-900">Secret Details</label>
<div className="mt-1">
<Tabs
tabs={[
{
label: "Secret Object",
content: (
<div className="relative">
<pre className="bg-gray-50 rounded p-3 pr-10 font-mono text-sm break-all whitespace-pre-wrap text-gray-900">
{JSON.stringify(secret.secretObject, null, 2)}
</pre>
<button
onClick={() =>
copyToClipboard(JSON.stringify(secret.secretObject), "secret object")
}
className="absolute right-2 top-2 text-gray-800 hover:text-gray-900"
>
<Copy className="h-4 w-4" />
</button>
</div>
),
},
{
label: "Example Code",
content: (
<div className="relative">
<pre className="bg-gray-50 rounded p-3 pr-10 font-mono text-sm break-all whitespace-pre-wrap text-gray-900">
{generateExampleCode(secret.secretObject)}
</pre>
<button
onClick={() =>
copyToClipboard(generateExampleCode(secret.secretObject), "example code")
}
className="absolute right-2 top-2 text-gray-800 hover:text-gray-900"
>
<Copy className="h-4 w-4" />
</button>
</div>
),
},
]}
/>
</div>
</div>

Expand Down
32 changes: 32 additions & 0 deletions app/utils/codeGenerator.js
Original file line number Diff line number Diff line change
@@ -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,
}
});
`;
}
Loading