updated store and retrieve secret blob with new api

README.md

@@ -102,7 +102,7 @@ Run smart contract test with `yarn hardhat:test`
 - Visit the Nillion Hello World page: `http://localhost:3000/nillion-hello-world`
 - Notice that the buttons and functionality for this page are not hooked up yet.
 - Edit the code for this page in `packages/nextjs/app/nillion-hello-world/page.tsx` to complete each of the 🎯 TODOs to get the page working
-- Need a hint on how to get something working? Take a look at the completed `packages/nextjs/app/nillion-hello-world/page-complete.tsx` page
+- Need a hint on how to get something working? Take a look at the completed `packages/nextjs/app/nillion-hello-world-complete/page.tsx` page
 
 ## About Scaffold-ETH 2
 

packages/nextjs/app/nillion-compute/page.tsx

@@ -6,6 +6,7 @@ import { useAccount } from "wagmi";
 import CodeSnippet from "~~/components/nillion/CodeSnippet";
 import { CopyString } from "~~/components/nillion/CopyString";
 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 { compute } from "~~/utils/nillion/compute";
@@ -204,22 +205,13 @@ const Home: NextPage = () => {
                   <div className="flex flex-row w-full justify-between items-center my-10 mx-10">
                     {Object.keys(storedSecretsNameToStoreId).map(key => (
                       <div className="flex-1 px-2" key={key}>
-                        {!!storedSecretsNameToStoreId[key] ? (
-                          <span>
-                            ✅ Stored SecretInteger {key} <br />{" "}
-                            <CopyString str={storedSecretsNameToStoreId[key] || ""} textBefore={`store_id: `} full />
-                            <br />
-                            <p>
-                              👀 Optional: Copy and run the following command to retrieve-secret from the command line
-                              to see the value of {key} using the nillion SDK tool
-                            </p>
-                            <CopyString
-                              str={retrieveSecretCommand(userKey, storedSecretsNameToStoreId[key], key)}
-                              start={30}
-                              end={30}
-                              code
-                            />
-                          </span>
+                        {!!storedSecretsNameToStoreId[key] && userKey ? (
+                          <RetrieveSecretCommand
+                            secretType="SecretInteger"
+                            userKey={userKey}
+                            storeId={storedSecretsNameToStoreId[key]}
+                            secretName={key}
+                          />
                         ) : (
                           <SecretForm
                             secretName={key}

packages/nextjs/app/nillion-hello-world/page-complete.tsx → packages/nextjs/app/nillion-hello-world-complete/page.tsx

@@ -5,6 +5,7 @@ import type { NextPage } from "next";
 import { useAccount } from "wagmi";
 import { CopyString } from "~~/components/nillion/CopyString";
 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";
@@ -68,22 +69,24 @@ const Home: NextPage = () => {
   // Once this is done, the form will be hooked up to store your secret blob
   async function handleSecretFormSubmit(secretName: string, secretValue: string) {
     // call storeSecretsBlob, then handle the promise that resolves with a store_id
-    await storeSecretsBlob(nillion, nillionClient, secretValue, secretName).then((store_id: string) => {
-      // inside of the "then" method, console log the store_id
-      console.log("Secret stored at store_id:", store_id);
-      // update state: set storedSecretName
-      setStoredSecretName(secretName);
-      // update state: set storeId
-      setStoreId(store_id);
-    });
+    await storeSecretsBlob(nillion, nillionClient, [{ name: secretName, value: secretValue }]).then(
+      (store_id: string) => {
+        // inside of the "then" method, console log the store_id
+        console.log("Secret stored at store_id:", store_id);
+        // update state: set storedSecretName
+        setStoredSecretName(secretName);
+        // update state: set storeId
+        setStoreId(store_id);
+      },
+    );
   }
 
   // ✅ #4 DONE: complete this asynchronous function to retrieve and read the value of a secret blob
   // Once this is done, you can retrieve the stored message from Nillion
   async function handleRetrieveSecretBlob(store_id: string, secret_name: string) {
     // call retrieveSecretBlob then handle the promise that resolves with the retrieved value
     // update state: set retrievedValue
-    await retrieveSecretBlob(nillion, nillionClient, store_id, secret_name).then(setRetrievedValue);
+    await retrieveSecretBlob(nillionClient, store_id, secret_name).then(setRetrievedValue);
   }
 
   // reset nillion values
@@ -114,25 +117,18 @@ const Home: NextPage = () => {
         <div className="px-5 flex flex-col">
           <h1 className="text-xl">
             <span className="block text-4xl font-bold text-center">
-              Store and Retrieve &quot;Hello World&quot; with Nillion - Completed verion!
+              Store and Retrieve &quot;Hello World&quot; with Nillion: ✅ Completed verion
             </span>
 
             <p className="text-center text-lg">
-              Complete the &quot;🎯 TODOs &quot; within the code of this page to hook up this page to store and retrieve
-              SecretBlob secrets in Nillion.
+              This is the completed version of hello-world, hooked up to store and retrieve SecretBlob secrets in
+              Nillion.
             </p>
 
             <p className="text-center text-lg">
-              Get started by editing{" "}
+              Check out this completed code in{" "}
               <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-                packages/nextjs/app/nillion-hello-world/page.tsx
-              </code>
-            </p>
-
-            <p>
-              Need a hint on how to get something working? Take a look at the completed{" "}
-              <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-                packages/nextjs/app/nillion-hello-world/page-complete.tsx
+                packages/nextjs/app/nillion-hello-world-complete/page.tsx
               </code>
             </p>
 
@@ -199,13 +195,17 @@ const Home: NextPage = () => {
                   <div className="flex flex-row w-full justify-between items-center my-10 mx-10">
                     <div className="flex-1 px-2">
                       {!!storeId ? (
-                        <p>
-                          ✅ Stored SecretBlob {storedSecretName} <br />{" "}
-                          <CopyString str={storeId || ""} textBefore={`store_id: `} full />
+                        <>
+                          <RetrieveSecretCommand
+                            secretType="SecretBlob"
+                            userKey={userKey}
+                            storeId={storeId}
+                            secretName={storedSecretName}
+                          />
                           <button className="btn btn-sm btn-primary mt-4" onClick={resetForm}>
                             Reset
                           </button>
-                        </p>
+                        </>
                       ) : (
                         <SecretForm
                           secretName={storedSecretName}

packages/nextjs/app/nillion-hello-world/page.tsx

@@ -5,6 +5,7 @@ import type { NextPage } from "next";
 import { useAccount } from "wagmi";
 import { CopyString } from "~~/components/nillion/CopyString";
 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";
@@ -100,7 +101,7 @@ const Home: NextPage = () => {
         <div className="px-5 flex flex-col">
           <h1 className="text-xl">
             <span className="block text-4xl font-bold text-center">
-              Complete the code 🎯 TODOs to store and retrieve secrets on Nillion
+              Store and Retrieve &quot;Hello World&quot; with Nillion: 🎯 TODO version
             </span>
 
             <p className="text-center text-lg">
@@ -115,10 +116,10 @@ const Home: NextPage = () => {
               </code>
             </p>
 
-            <p>
+            <p className="text-center text-lg">
               Need a hint on how to get something working? Take a look at the completed{" "}
               <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-                packages/nextjs/app/nillion-hello-world/page-complete.tsx
+                packages/nextjs/app/nillion-hello-world-complete/page.tsx
               </code>
             </p>
 
@@ -185,13 +186,17 @@ const Home: NextPage = () => {
                   <div className="flex flex-row w-full justify-between items-center my-10 mx-10">
                     <div className="flex-1 px-2">
                       {!!storeId ? (
-                        <p>
-                          ✅ Stored SecretBlob {storedSecretName} <br />{" "}
-                          <CopyString str={storeId || ""} textBefore={`store_id: `} full />
+                        <>
+                          <RetrieveSecretCommand
+                            secretType="SecretBlob"
+                            userKey={userKey}
+                            storeId={storeId}
+                            secretName={storedSecretName}
+                          />
                           <button className="btn btn-sm btn-primary mt-4" onClick={resetForm}>
                             Reset
                           </button>
-                        </p>
+                        </>
                       ) : (
                         <SecretForm
                           secretName={storedSecretName}

packages/nextjs/components/Header.tsx

@@ -27,6 +27,10 @@ export const menuLinks: HeaderMenuLink[] = [
     label: "🎯 Nillion Hello World",
     href: "/nillion-hello-world",
   },
+  {
+    label: "✅ Nillion Hello World Demo",
+    href: "/nillion-hello-world-complete",
+  },
   {
     label: "Debug Contracts",
     href: "/debug",

packages/nextjs/components/nillion/CopyString.tsx

@@ -11,7 +11,7 @@ export const CopyString: React.FC<{
   code?: boolean;
 }> = ({ str, textBefore = "", start = 5, end = 5, full, code }) => {
   return (
-    <p className="flex text-center items-center justify-around">
+    <span className="flex text-center items-center justify-around">
       <span className="flex ">
         {textBefore}
         {code ? (
@@ -28,6 +28,6 @@ export const CopyString: React.FC<{
           />
         </CopyToClipboard>
       </span>
-    </p>
+    </span>
   );
 };

packages/nextjs/components/nillion/RetrieveSecretCommand.tsx

@@ -0,0 +1,23 @@
+import { CopyString } from "~~/components/nillion/CopyString";
+import { retrieveSecretCommand } from "~~/utils/nillion/retrieveSecretCommand";
+
+const RetrieveSecretCommand: React.FC<{
+  userKey: string | null;
+  storeId: string | null;
+  secretName: string;
+  secretType: string;
+}> = ({ userKey, storeId, secretName, secretType }) => {
+  return (
+    <span>
+      ✅ Stored {secretType} {secretName} <br /> <CopyString str={storeId || ""} textBefore={`store_id: `} full />
+      <br />
+      <p>
+        👀 Optional: Copy and run the following command to retrieve-secret from the command line to see the value of{" "}
+        {secretName} using the nillion SDK tool
+      </p>
+      <CopyString str={retrieveSecretCommand(userKey, storeId, secretName)} start={30} end={30} code />
+    </span>
+  );
+};
+
+export default RetrieveSecretCommand;

packages/nextjs/utils/nillion/retrieveSecretBlob.ts

@@ -1,16 +1,17 @@
 import { nillionConfig } from "./nillionConfig";
 
-export async function retrieveSecretBlob(
-  nillion: any,
-  nillionClient: any,
-  store_id: string,
-  secret_name: string,
-): Promise<string> {
+export async function retrieveSecretBlob(nillionClient: any, store_id: string, secret_name: string): Promise<string> {
   try {
+    // retrieves SecretBlob from client
     const retrieved = await nillionClient.retrieve_secret(nillionConfig.cluster_id, store_id, secret_name);
-    const decodedByteArray = await nillion.decode_bytearray_secret(retrieved);
-    const decodeToString = new TextDecoder("utf-8").decode(decodedByteArray);
-    return decodeToString;
+
+    // gets byte array value
+    const byteArraySecret = retrieved.to_byte_array();
+
+    // decodes byte array to string
+    const decodedValue = new TextDecoder("utf-8").decode(byteArraySecret);
+
+    return decodedValue;
   } catch (error: any) {
     return error;
   }

packages/nextjs/utils/nillion/retrieveSecretInteger.ts

@@ -1,7 +1,6 @@
 import { nillionConfig } from "./nillionConfig";
 
 export async function retrieveSecretInteger(
-  nillion: any,
   nillionClient: any,
   store_id: string,
   secret_name: string,

packages/nextjs/utils/nillion/storeSecretsBlob.ts

@@ -1,23 +1,26 @@
 import { nillionConfig } from "./nillionConfig";
 
-export async function storeSecretsBlob(
-  nillion: any,
-  nillionClient: any,
-  secretValue: string,
-  secretName: string,
-): Promise<string> {
+interface JsInput {
+  name: string;
+  value: string;
+}
+
+export async function storeSecretsBlob(nillion: any, nillionClient: any, secretsToStore: JsInput[]): Promise<string> {
   try {
     // create secrets object
     const secrets = new nillion.Secrets();
 
-    // encode secret blob for storage
-    const encoder = new TextEncoder();
-    const encoded = await nillion.encode_blob_secret(secretName, {
-      bytes: encoder.encode(secretValue),
-    });
+    // iterate through secretsToStore, inserting each into the secrets object
+    for (const secret of secretsToStore) {
+      // encodes secret as a byteArray
+      const byteArraySecret = new TextEncoder().encode(secret.value);
+
+      // create new SecretBlob with encoded secret
+      const newSecret = nillion.Secret.new_blob(byteArraySecret);
 
-    // insert encoded blob(s) into secrets object
-    await secrets.insert(encoded);
+      // insert the secret into secrets object
+      secrets.insert(secret.name, newSecret);
+    }
 
     // store secrets
     const store_id = await nillionClient.store_secrets(nillionConfig.cluster_id, secrets);