From 9e878997945f72de2ef131df5898bcc71853d47c Mon Sep 17 00:00:00 2001
From: oceans404 <steph.orpilla@nillion.com>
Date: Thu, 11 Apr 2024 11:01:00 -0700
Subject: [PATCH 1/4] add a password manager app

---
 .../nextjs/app/nillion-pw-manager/page.tsx    | 240 ++++++++++++++++++
 packages/nextjs/app/page.tsx                  |  13 +
 .../nextjs/components/nillion/Dropdown.tsx    |  36 +++
 .../nextjs/components/nillion/SecretForm.tsx  | 133 ++++++----
 4 files changed, 371 insertions(+), 51 deletions(-)
 create mode 100644 packages/nextjs/app/nillion-pw-manager/page.tsx
 create mode 100644 packages/nextjs/components/nillion/Dropdown.tsx

diff --git a/packages/nextjs/app/nillion-pw-manager/page.tsx b/packages/nextjs/app/nillion-pw-manager/page.tsx
new file mode 100644
index 0000000..3d6ebd1
--- /dev/null
+++ b/packages/nextjs/app/nillion-pw-manager/page.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { NextPage } from "next";
+import { useAccount } from "wagmi";
+import { CopyString } from "~~/components/nillion/CopyString";
+import Dropdown from "~~/components/nillion/Dropdown";
+import { NillionOnboarding } from "~~/components/nillion/NillionOnboarding";
+import RetrieveSecretCommand from "~~/components/nillion/RetrieveSecretCommand";
+import SecretForm from "~~/components/nillion/SecretForm";
+import { Address } from "~~/components/scaffold-eth";
+import { getUserKeyFromSnap } from "~~/utils/nillion/getUserKeyFromSnap";
+import { retrieveSecretBlob } from "~~/utils/nillion/retrieveSecretBlob";
+import { storeSecretsBlob } from "~~/utils/nillion/storeSecretsBlob";
+
+interface StoredSecrets {
+  [secretName: string]: string; // store_id
+}
+const Home: NextPage = () => {
+  const { address: connectedAddress } = useAccount();
+  const [connectedToSnap, setConnectedToSnap] = useState<boolean>(false);
+  const [userKey, setUserKey] = useState<string | null>(null);
+  const [userId, setUserId] = useState<string | null>(null);
+  const [nillion, setNillion] = useState<any>(null);
+  const [nillionClient, setNillionClient] = useState<any>(null);
+  const [selectedSecretName, setSelectedSecretName] = useState<string>("");
+  const [selectedStoreId, setSelectedStoreId] = useState<string | null>(null);
+  const [latestSecretName, setLatestSecretName] = useState<string | null>(null);
+  const [storedSecrets, setStoredSecrets] = useState<StoredSecrets>({});
+  const [retrievedValue, setRetrievedValue] = useState<string | null>(null);
+
+  async function handleConnectToSnap() {
+    const snapResponse = await getUserKeyFromSnap();
+    setUserKey(snapResponse?.user_key || null);
+    setConnectedToSnap(snapResponse?.connectedToSnap || false);
+  }
+
+  useEffect(() => {
+    if (userKey) {
+      const getNillionClientLibrary = async () => {
+        const nillionClientUtil = await import("~~/utils/nillion/nillionClient");
+        const libraries = await nillionClientUtil.getNillionClient(userKey);
+        setNillion(libraries.nillion);
+        setNillionClient(libraries.nillionClient);
+        return libraries.nillionClient;
+      };
+
+      getNillionClientLibrary().then(nillionClient => {
+        const user_id = nillionClient.user_id;
+        setUserId(user_id);
+      });
+    }
+  }, [userKey]);
+
+  async function handleSecretFormSubmit(
+    secretName: string,
+    secretValue: string,
+    permissionedUserIdForRetrieveSecret: string | null,
+    permissionedUserIdForUpdateSecret: string | null,
+    permissionedUserIdForDeleteSecret: string | null,
+  ) {
+    await storeSecretsBlob(
+      nillion,
+      nillionClient,
+      [{ name: secretName, value: secretValue }],
+      permissionedUserIdForRetrieveSecret ? [permissionedUserIdForRetrieveSecret] : [],
+      permissionedUserIdForUpdateSecret ? [permissionedUserIdForUpdateSecret] : [],
+      permissionedUserIdForDeleteSecret ? [permissionedUserIdForDeleteSecret] : [],
+    ).then((store_id: string) => {
+      setStoredSecrets(prevSecrets => ({
+        ...prevSecrets,
+        [secretName]: store_id,
+      }));
+
+      setLatestSecretName(secretName);
+    });
+  }
+
+  async function handleRetrieveSecretBlob(store_id: string, secret_name: string) {
+    await retrieveSecretBlob(nillionClient, store_id, secret_name).then(setRetrievedValue);
+  }
+
+  const handleSecretDropdownSelection = (secretName: string) => {
+    setSelectedSecretName(secretName);
+    setSelectedStoreId(storedSecrets[secretName]);
+  };
+
+  const resetNillion = () => {
+    setConnectedToSnap(false);
+    setUserKey(null);
+    setUserId(null);
+    setNillion(null);
+    setNillionClient(null);
+  };
+
+  const resetForm = () => {
+    setLatestSecretName(null);
+    setRetrievedValue(null);
+  };
+
+  useEffect(() => {
+    if (!connectedAddress) {
+      resetNillion();
+    }
+  }, [connectedAddress]);
+
+  return (
+    <>
+      <div className="flex items-center flex-col pt-10">
+        <div className="px-5 flex flex-col">
+          <h1 className="text-xl">
+            <span className="block text-4xl font-bold text-center">Nillion Password Manager</span>
+
+            {!connectedAddress && <p>Connect your MetaMask Flask wallet</p>}
+            {connectedAddress && connectedToSnap && !userKey && (
+              <a target="_blank" href="https://nillion-snap-site.vercel.app/" rel="noopener noreferrer">
+                <button className="btn btn-sm btn-primary mt-4">
+                  No Nillion User Key - Generate and store user key here
+                </button>
+              </a>
+            )}
+          </h1>
+
+          {connectedAddress && (
+            <div className="flex justify-center items-center space-x-2">
+              <p className="my-2 font-medium">Connected Wallet Address:</p>
+              <Address address={connectedAddress} />
+            </div>
+          )}
+
+          {connectedAddress && !connectedToSnap && (
+            <button className="btn btn-sm btn-primary mt-4" onClick={handleConnectToSnap}>
+              Connect to Snap with your Nillion User Key
+            </button>
+          )}
+
+          {connectedToSnap && (
+            <div>
+              {userKey && (
+                <div>
+                  <div className="flex justify-center items-center space-x-2">
+                    <p className="my-2 font-medium">
+                      🤫 Nillion User Key from{" "}
+                      <a target="_blank" href="https://nillion-snap-site.vercel.app/" rel="noopener noreferrer">
+                        MetaMask Flask
+                      </a>
+                      :
+                    </p>
+
+                    <CopyString str={userKey} />
+                  </div>
+
+                  {userId && (
+                    <div className="flex justify-center items-center space-x-2">
+                      <p className="my-2 font-medium">Connected as Nillion User ID:</p>
+                      <CopyString str={userId} />
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
+          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
+            {!connectedToSnap ? (
+              <NillionOnboarding />
+            ) : (
+              <div className="flex flex-row justify-between">
+                {/* Store secret blob */}
+                <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center w-full rounded-3xl my-2 justify-between mx-5">
+                  <h1 className="text-xl">Store a new password</h1>
+                  <div className="flex flex-row w-full justify-between items-center my-10 mx-10">
+                    <div className="flex-1 px-2">
+                      {latestSecretName ? (
+                        <>
+                          <RetrieveSecretCommand
+                            secretType="SecretBlob"
+                            userKey={userKey}
+                            storeId={storedSecrets[latestSecretName]}
+                            secretName={latestSecretName || ""}
+                          />
+                          <button className="btn btn-sm btn-primary mt-4" onClick={resetForm}>
+                            Add another password
+                          </button>
+                        </>
+                      ) : (
+                        <SecretForm
+                          secretName={""}
+                          onSubmit={handleSecretFormSubmit}
+                          secretType="text"
+                          isLoading={false}
+                          // use customSecretName boolean prop to signal that the form should set the secret name
+                          customSecretName
+                          hidePermissions
+                          itemName="password"
+                        />
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Retrieve secret blob */}
+
+                <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center w-full rounded-3xl my-2 justify-between mx-5">
+                  <h1 className="text-xl">Retrieve passwords from Nillion</h1>
+                  <div className="flex flex-row w-full justify-between items-center my-10 mx-10">
+                    <div className="flex-1 px-2 flex-col">
+                      <div>
+                        <Dropdown
+                          options={Object.keys(storedSecrets).map(s => ({ value: s, label: s }))}
+                          onDropdownUpdate={selectedName => handleSecretDropdownSelection(selectedName)}
+                          itemName="a password"
+                          disabled={Object.keys(storedSecrets).length === 0}
+                        />
+                      </div>
+
+                      <button
+                        className="btn btn-sm btn-primary mt-4"
+                        onClick={() => handleRetrieveSecretBlob(selectedStoreId || "", selectedSecretName)}
+                        disabled={!selectedStoreId}
+                      >
+                        Retrieve and decode {selectedSecretName}
+                      </button>
+
+                      {retrievedValue && <p>✅ Retrieved value: {retrievedValue}</p>}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Home;
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index cc92660..c6a25f3 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -38,6 +38,19 @@ const Home: NextPage = () => {
               packages/hardhat/contracts
             </code>
           </p>
+
+          <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center rounded-3xl">
+            <span className="block text-2xl font-bold pb-4">Nillion demo apps</span>
+            <Link href="/nillion-pw-manager" passHref className="link">
+              Nillion Password Manager
+            </Link>{" "}
+            <Link href="/nillion-hello-world-complete" passHref className="link">
+              Nillion Hello World
+            </Link>{" "}
+            <Link href="/nillion-compute" passHref className="link">
+              Nillion Blind Compute
+            </Link>{" "}
+          </div>
         </div>
 
         <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
diff --git a/packages/nextjs/components/nillion/Dropdown.tsx b/packages/nextjs/components/nillion/Dropdown.tsx
new file mode 100644
index 0000000..cc3048a
--- /dev/null
+++ b/packages/nextjs/components/nillion/Dropdown.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+
+interface DropdownOption {
+  value: string;
+  label: string;
+}
+
+interface DropdownProps {
+  options: DropdownOption[];
+  onDropdownUpdate: (value: string) => void;
+  disabled?: boolean;
+  itemName?: string;
+}
+
+const Dropdown: React.FC<DropdownProps> = ({ options, onDropdownUpdate, itemName, disabled = false }) => {
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+  const handleSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = e.target.value;
+    setSelectedOption(selectedValue);
+    onDropdownUpdate(selectedValue);
+  };
+
+  return (
+    <select value={selectedOption || ""} onChange={e => handleSelect(e)} disabled={disabled}>
+      <option value="">Select {itemName} name</option>
+      {options.map((option, index) => (
+        <option key={index} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default Dropdown;
diff --git a/packages/nextjs/components/nillion/SecretForm.tsx b/packages/nextjs/components/nillion/SecretForm.tsx
index 942b3ae..9d841b5 100644
--- a/packages/nextjs/components/nillion/SecretForm.tsx
+++ b/packages/nextjs/components/nillion/SecretForm.tsx
@@ -13,6 +13,9 @@ interface SecretFormProps {
   isDisabled?: boolean;
   isLoading?: boolean;
   secretType: "text" | "number"; // text for SecretBlob, number for SecretInteger
+  customSecretName?: boolean;
+  hidePermissions?: boolean;
+  itemName?: string;
 }
 
 const SecretForm: React.FC<SecretFormProps> = ({
@@ -20,8 +23,12 @@ const SecretForm: React.FC<SecretFormProps> = ({
   secretName,
   isDisabled = false,
   isLoading = false,
-  secretType, // Destructure this prop
+  customSecretName = false,
+  secretType,
+  hidePermissions = false,
+  itemName = "secret",
 }) => {
+  const [secretNameFromForm, setSecretNameFromForm] = useState(secretName);
   const [secret, setSecret] = useState("");
   const [loading, setLoading] = useState(isLoading);
   const [permissionedUserIdForRetrieveSecret, setPermissionedUserIdForRetrieveSecret] = useState("");
@@ -33,7 +40,7 @@ const SecretForm: React.FC<SecretFormProps> = ({
     e.preventDefault();
     setLoading(true);
     onSubmit(
-      secretName,
+      secretNameFromForm,
       secret,
       permissionedUserIdForRetrieveSecret,
       permissionedUserIdForUpdateSecret,
@@ -51,13 +58,31 @@ const SecretForm: React.FC<SecretFormProps> = ({
     "Storing secret..."
   ) : (
     <form onSubmit={handleSubmit} className={isDisabled ? "opacity-50" : ""}>
-      <h1>Store secret: {secretName}</h1>
+      {!customSecretName && <h1>Store secret: {secretName}</h1>}
+      {customSecretName && (
+        <div>
+          <label htmlFor="secret" className="block text-sm font-medium text-gray-700">
+            Set {itemName} name
+          </label>
+          <input
+            id="secret"
+            value={secretNameFromForm}
+            onChange={e => setSecretNameFromForm(e.target.value)}
+            required
+            disabled={isDisabled}
+            className={`mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm ${
+              isDisabled ? "cursor-not-allowed bg-gray-100" : "bg-white"
+            }`}
+          />
+        </div>
+      )}
+
       <div>
         <label htmlFor="secret" className="block text-sm font-medium text-gray-700">
-          Set secret value
+          Set {itemName} value
         </label>
         <input
-          type={secretType} // Use the prop here
+          type={secretType}
           id="secret"
           value={secret}
           onChange={e => setSecret(e.target.value)}
@@ -70,7 +95,7 @@ const SecretForm: React.FC<SecretFormProps> = ({
       </div>
 
       {/* can only compute on secret integers - don't show for SecretBlobs */}
-      {secretType === "number" && (
+      {!hidePermissions && secretType === "number" && (
         <div className="mt-4">
           <label htmlFor="permissionedUserIdForComputeSecret" className="block text-sm font-medium text-gray-700">
             Optional: Set a user id to grant compute permissions to another user
@@ -88,53 +113,59 @@ const SecretForm: React.FC<SecretFormProps> = ({
         </div>
       )}
 
-      <div className="mt-4">
-        <label htmlFor="permissionedUserIdForRetrieveSecret" className="block text-sm font-medium text-gray-700">
-          Optional: Set a user id to grant retrieve permissions to another user
-        </label>
-        <input
-          type="text"
-          id="permissionedUserIdForRetrieveSecret"
-          value={permissionedUserIdForRetrieveSecret}
-          onChange={e => setPermissionedUserIdForRetrieveSecret(e.target.value)}
-          disabled={isDisabled}
-          className={`mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm ${
-            isDisabled ? "cursor-not-allowed bg-gray-100" : "bg-white"
-          }`}
-        />
-      </div>
+      {!hidePermissions && (
+        <div className="mt-4">
+          <label htmlFor="permissionedUserIdForRetrieveSecret" className="block text-sm font-medium text-gray-700">
+            Optional: Set a user id to grant retrieve permissions to another user
+          </label>
+          <input
+            type="text"
+            id="permissionedUserIdForRetrieveSecret"
+            value={permissionedUserIdForRetrieveSecret}
+            onChange={e => setPermissionedUserIdForRetrieveSecret(e.target.value)}
+            disabled={isDisabled}
+            className={`mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm ${
+              isDisabled ? "cursor-not-allowed bg-gray-100" : "bg-white"
+            }`}
+          />
+        </div>
+      )}
 
-      <div className="mt-4">
-        <label htmlFor="permissionedUserIdForUpdateSecret" className="block text-sm font-medium text-gray-700">
-          Optional: Set a user id to grant update permissions to another user
-        </label>
-        <input
-          type="text"
-          id="permissionedUserIdForUpdateSecret"
-          value={permissionedUserIdForUpdateSecret}
-          onChange={e => setPermissionedUserIdForUpdateSecret(e.target.value)}
-          disabled={isDisabled}
-          className={`mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm ${
-            isDisabled ? "cursor-not-allowed bg-gray-100" : "bg-white"
-          }`}
-        />
-      </div>
+      {!hidePermissions && (
+        <div className="mt-4">
+          <label htmlFor="permissionedUserIdForUpdateSecret" className="block text-sm font-medium text-gray-700">
+            Optional: Set a user id to grant update permissions to another user
+          </label>
+          <input
+            type="text"
+            id="permissionedUserIdForUpdateSecret"
+            value={permissionedUserIdForUpdateSecret}
+            onChange={e => setPermissionedUserIdForUpdateSecret(e.target.value)}
+            disabled={isDisabled}
+            className={`mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm ${
+              isDisabled ? "cursor-not-allowed bg-gray-100" : "bg-white"
+            }`}
+          />
+        </div>
+      )}
 
-      <div className="mt-4">
-        <label htmlFor="permissionedUserIdForDeleteSecret" className="block text-sm font-medium text-gray-700">
-          Optional: Set a user id to grant delete permissions to another user
-        </label>
-        <input
-          type="text"
-          id="permissionedUserIdForDeleteSecret"
-          value={permissionedUserIdForDeleteSecret}
-          onChange={e => setPermissionedUserIdForDeleteSecret(e.target.value)}
-          disabled={isDisabled}
-          className={`mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm ${
-            isDisabled ? "cursor-not-allowed bg-gray-100" : "bg-white"
-          }`}
-        />
-      </div>
+      {!hidePermissions && (
+        <div className="mt-4">
+          <label htmlFor="permissionedUserIdForDeleteSecret" className="block text-sm font-medium text-gray-700">
+            Optional: Set a user id to grant delete permissions to another user
+          </label>
+          <input
+            type="text"
+            id="permissionedUserIdForDeleteSecret"
+            value={permissionedUserIdForDeleteSecret}
+            onChange={e => setPermissionedUserIdForDeleteSecret(e.target.value)}
+            disabled={isDisabled}
+            className={`mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm ${
+              isDisabled ? "cursor-not-allowed bg-gray-100" : "bg-white"
+            }`}
+          />
+        </div>
+      )}
 
       <button
         type="submit"

From 52c9087b2151a14cfff1c92dec85a159b2187d92 Mon Sep 17 00:00:00 2001
From: oceans404 <steph.orpilla@nillion.com>
Date: Thu, 11 Apr 2024 13:04:03 -0700
Subject: [PATCH 2/4] (fix) shorten navbar titles for better fit

---
 packages/nextjs/components/Header.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 7deec54..52e1c80 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -20,15 +20,15 @@ export const menuLinks: HeaderMenuLink[] = [
     href: "/",
   },
   {
-    label: "🖥️ Nillion Blind Computation Demo",
+    label: "🖥️ Blind Computation",
     href: "/nillion-compute",
   },
   {
-    label: "🎯 Nillion Hello World",
+    label: "🎯 Hello World",
     href: "/nillion-hello-world",
   },
   {
-    label: "✅ Nillion Hello World Demo",
+    label: "✅ Hello World",
     href: "/nillion-hello-world-complete",
   },
   {

From d4dabc285291e224dbbf4c38a9471ce95a548061 Mon Sep 17 00:00:00 2001
From: oceans404 <steph.orpilla@nillion.com>
Date: Thu, 11 Apr 2024 16:43:48 -0700
Subject: [PATCH 3/4] test WL nodekey for hosting

---
 packages/nextjs/utils/nillion/nillionClient.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs/utils/nillion/nillionClient.ts b/packages/nextjs/utils/nillion/nillionClient.ts
index 2f8b281..d679d37 100644
--- a/packages/nextjs/utils/nillion/nillionClient.ts
+++ b/packages/nextjs/utils/nillion/nillionClient.ts
@@ -32,7 +32,12 @@ export const getNillionClient = async (userKey: string) => {
   await nillion.default();
   const nillionUserKey = nillion.UserKey.from_base58(userKey);
   // temporary fix for an issue where nodekey cannot be reused between calls
-  const nodeKey = nillion.NodeKey.from_seed(`scaffold-eth-${Math.floor(Math.random() * 10000)}`);
+  const wl = process.env.NEXT_PUBLIC_NILLION_NODEKEY_WL
+    ? process.env.NEXT_PUBLIC_NILLION_NODEKEY_WL.split(", ")
+    : [`scaffold-eth-${Math.floor(Math.random() * 10000)}`];
+  const randomElement = wl[Math.floor(Math.random() * wl.length)];
+
+  const nodeKey = nillion.NodeKey.from_seed(randomElement);
   console.log(nillionConfig);
 
   const client = initializeNillionClient(

From 94a3ed12a937d6af8b59dfc523c4f58ca5b4090e Mon Sep 17 00:00:00 2001
From: oceans404 <steph.orpilla@nillion.com>
Date: Fri, 12 Apr 2024 07:28:40 -0700
Subject: [PATCH 4/4] add NillionClient types

---
 packages/nextjs/app/nillion-pw-manager/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nextjs/app/nillion-pw-manager/page.tsx b/packages/nextjs/app/nillion-pw-manager/page.tsx
index 3d6ebd1..c8d8935 100644
--- a/packages/nextjs/app/nillion-pw-manager/page.tsx
+++ b/packages/nextjs/app/nillion-pw-manager/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import type * as NillionTypes from "@nillion/nillion-client-js-browser/nillion_client_js_browser.d.ts";
 import type { NextPage } from "next";
 import { useAccount } from "wagmi";
 import { CopyString } from "~~/components/nillion/CopyString";