README setup instructions

README.md

@@ -2,20 +2,6 @@
 
 This template has all the power of Scaffold-ETH 2 with a Nillion integration
 
-## About Scaffold-ETH 2
-
-🧪 [Scaffold-ETH 2](https://docs.scaffoldeth.io) is an open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.
-
-⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, Viem, and Typescript.
-
-- ✅ **Contract Hot Reload**: Your frontend auto-adapts to your smart contract as you edit it.
-- 🪝 **[Custom hooks](https://docs.scaffoldeth.io/hooks/)**: Collection of React hooks wrapper around [wagmi](https://wagmi.sh/) to simplify interactions with smart contracts with typescript autocompletion.
-- 🧱 [**Components**](https://docs.scaffoldeth.io/components/): Collection of common web3 components to quickly build your frontend.
-- 🔥 **Burner Wallet & Local Faucet**: Quickly test your application with a burner wallet and local faucet.
-- 🔐 **Integration with Wallet Providers**: Connect to different wallet providers and interact with the Ethereum network.
-
-![Debug Contracts tab](https://github.com/scaffold-eth/scaffold-eth-2/assets/55535804/b237af0c-5027-4849-a5c1-2e31495cccb1)
-
 ## Requirements
 
 Before you begin, you need to install the following tools:
@@ -41,35 +27,90 @@ To get started with Scaffold-ETH 2, follow the steps below:
 ```
 git clone https://github.com/NillionNetwork/scaffold-eth-with-nillion.git
 cd scaffold-eth-with-nillion
-yarn install
 ```
 
-Download the [Nillion Javascript Client](https://docs.nillion.com/quickstart#download-binaries) to a local folder
+Installation steps
+
+Complete these temporary install steps to install the private @nillion/nillion-client-js-browser package
 
-Install the Nillion Javascript client as an additional dependency
+Remove the @nillion/nillion-client-js-browser package
+
+```
+yarn remove @nillion/nillion-client-js-browser
+```
+
+Reinstall @nillion/nillion-client-js-browser with your NPM_TOKEN
+
+```
+NPM_TOKEN=your_npm_token npm i @nillion/nillion-client-js-browser
+```
+
+Then install the rest of the dependencies
 
 ```bash
-yarn add @nillion/nillion-client-js-browser
-yarn add {path-to-nillion-js-client-folder}
+yarn install
 ```
 
-2. Run a local network in the first terminal:
+3. Run a local network in the first terminal:
 
 ```
 yarn chain
 ```
 
 This command starts a local Ethereum network using Hardhat. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in `hardhat.config.ts`.
 
-3. On a second terminal, deploy the test contract:
+4. On a second terminal, deploy the test contract:
 
 ```
 yarn deploy
 ```
 
 This command deploys a test smart contract to the local network. The contract is located in `packages/hardhat/contracts` and can be modified to suit your needs. The `yarn deploy` command uses the deploy script located in `packages/hardhat/deploy` to deploy the contract to the network. You can also customize the deploy script.
 
-4. On a third terminal, start your NextJS app:
+5. On a third terminal, run a Nillion local cluster
+
+Install [Nillion SDK Binaries](https://docs.nillion.com/quickstart#download-binaries) following the [Install binaries guide](https://docs.nillion.com/quickstart#install-the-nillion-sdk) if you don't have Nillion SDK tools installed locally
+
+Then use the nillion [run-local-cluster tool](https://docs.nillion.com/program-simulator) to spin up a local cluster of Nillion nodes. You will run your app against this local cluster
+
+```
+./run-local-cluster
+```
+
+After a moment, the tool will log custom cluster information into your command line, for example:
+
+```bash
+# Example run-local-cluster output
+ℹ️ cluster id is 798d89ce-37f4-4d7d-aab9-ba511ae67ccc
+ℹ️ using 256 bit prime
+ℹ️ storing state in /var/folders/1_/2yw8krkx5q5dn2jbhx69s4_r0000gn/T/.tmpfyozMh
+⛓️ starting blockchain node...
+✔️ blockchain node running on endpoint http://localhost:55501
+🏃 starting node 12D3KooWSqDTmdKdJ6AWaVMgUKdLBBVeF6mRo2sLuqbgjjCFEtDK
+⏳ waiting until bootnode is up...
+🏃 starting node 12D3KooWQecC226DfT1q1CiYPxRGiJhrXpeLxV8AtcPZeKYB3wog
+🏃 starting node 12D3KooWQc45ubzkGN6P3qipdUdFEgDTTjYtU3UuBbK7hBzJe5Ng
+🏃 starting node 12D3KooWBXSwSu77B4vp5QQGL5nt959w2HjQDGcgiZKhaQRkd95J
+🏃 starting node 12D3KooWBPfggEeDSSsfHya55oRH9gWgWeeC3yHF2GiQSXeSp91P
+🎁 wallet keys written to /var/folders/1_/2yw8krkx5q5dn2jbhx69s4_r0000gn/T/.tmpfyozMh/private-keys.txt
+📝 payments configuration written to /var/folders/1_/2yw8krkx5q5dn2jbhx69s4_r0000gn/T/.tmpfyozMh/payments-config.yaml
+🥾 bootnode config written to /var/folders/1_/2yw8krkx5q5dn2jbhx69s4_r0000gn/T/.tmpfyozMh/bootnode.yaml
+📝 configuration written to /Users/steph/Library/Application Support/nillion.nil-cli/config.yaml
+✔️ cluster is running, bootnode is at /ip4/127.0.0.1/tcp/55692/p2p/12D3KooWSqDTmdKdJ6AWaVMgUKdLBBVeF6mRo2sLuqbgjjCFEtDK
+🔗 websocket: /ip4/127.0.0.1/tcp/55693/ws/p2p/12D3KooWSqDTmdKdJ6AWaVMgUKdLBBVeF6mRo2sLuqbgjjCFEtDK
+```
+
+Use the output values to update all values within your [packages/nextjs/utils/nillion/nillionConfig.ts](https://github.com/NillionNetwork/scaffold-eth-with-nillion/blob/main/packages/nextjs/utils/nillion/nillionConfig.ts) file. Make the following updates:
+
+- update websockets to be an array containing the output 🔗 websocket
+- update cluster_id to the output ℹ️ cluster id
+- update rpc_endpoint to the blockchain_rpc_endpoint value written into the 📝 payments configuration file
+- update blinding_factors_manager to the blinding_factors_manager_sc_address value written into the 📝 payments configuration file
+- update payments to the payments_sc_address value written into the 📝 payments configuration file
+- update chain_id to the chain_id value written into the 📝 payments configuration file
+- update private_key to one of the rotating values written into the 🎁 wallet keys file
+
+6. On a fourth terminal, start your NextJS app:
 
 ```
 yarn start
@@ -83,7 +124,28 @@ Run smart contract test with `yarn hardhat:test`
 - Edit your frontend in `packages/nextjs/pages`
 - Edit your deployment scripts in `packages/hardhat/deploy`
 
-5. Connect to Nillion
+7. Visit the Nillion Blind Computation demo page and try the working demo
+
+- Visit the Nillion Blind Computation page to try out Blind Computation: `http://localhost:3000/nillion-compute`
+- Optinally edit the code for this page in `packages/nextjs/app/nillion-compute/page.tsx`
+
+8. Complete the TODOs in the Hello World page to hook up a working Nillion store and retrieve example
+
+- 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/nillion-hello-world/page-complete.tsx` page
 
-- Visit the Nillion page on: `http://localhost:3000/nillion`
-- Edit the Nillion page code in `packages/nextjs/app/nillion`
+## About Scaffold-ETH 2
+
+🧪 [Scaffold-ETH 2](https://docs.scaffoldeth.io) is an open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.
+
+⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, Viem, and Typescript.
+
+- ✅ **Contract Hot Reload**: Your frontend auto-adapts to your smart contract as you edit it.
+- 🪝 **[Custom hooks](https://docs.scaffoldeth.io/hooks/)**: Collection of React hooks wrapper around [wagmi](https://wagmi.sh/) to simplify interactions with smart contracts with typescript autocompletion.
+- 🧱 [**Components**](https://docs.scaffoldeth.io/components/): Collection of common web3 components to quickly build your frontend.
+- 🔥 **Burner Wallet & Local Faucet**: Quickly test your application with a burner wallet and local faucet.
+- 🔐 **Integration with Wallet Providers**: Connect to different wallet providers and interact with the Ethereum network.
+
+![Debug Contracts tab](https://github.com/scaffold-eth/scaffold-eth-2/assets/55535804/b237af0c-5027-4849-a5c1-2e31495cccb1)

package.json

@@ -37,7 +37,7 @@
     "lint-staged": "^13.0.3"
   },
   "dependencies": {
-    "@nillion/nillion-client-js-browser": "^0.1.18",
+    "@nillion/nillion-client-js-browser": "^0.1.21",
     "react-syntax-highlighter": "^15.5.0"
   }
 }

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

@@ -114,7 +114,7 @@ const Home: NextPage = () => {
       <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">Build a Blind Computation App with Nillion</span>
+            <span className="block text-4xl font-bold">Demo: Explore Blind Computation on Nillion</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">

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

@@ -22,7 +22,8 @@ const Home: NextPage = () => {
   const [storeId, setStoreId] = useState<string | null>(null);
   const [retrievedValue, setRetrievedValue] = useState<string | null>(null);
 
-  // ✅ DONE: complete this function to connect to the MetaMask Snap
+  // ✅ #1 DONE: complete this function to connect to the MetaMask Snap
+  // Once this is done, the "Connect to Snap with Nillion User Key" button will work
   async function handleConnectToSnap() {
     // call getUserKeyFromSnap
     const snapResponse = await getUserKeyFromSnap();
@@ -32,7 +33,8 @@ const Home: NextPage = () => {
     setConnectedToSnap(snapResponse?.connectedToSnap || false);
   }
 
-  // ✅ DONE: complete this useEffect hook to set up Nillion once a userKey exists
+  // ✅ #2 DONE: complete this useEffect hook to set up Nillion once a userKey exists
+  // Once this is done, you can call nillion libraries from the page
   useEffect(() => {
     // conditional execution: Check if userKey exists before implementing logic
     if (userKey) {
@@ -62,7 +64,8 @@ const Home: NextPage = () => {
     }
   }, [userKey]);
 
-  // ✅ DONE: complete this asynchronous function to process the submission of a form used for storing secrets
+  // ✅ #3 DONE: complete this asynchronous function to process the submission of a form used for storing secrets
+  // 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) => {
@@ -75,7 +78,8 @@ const Home: NextPage = () => {
     });
   }
 
-  // ✅ DONE: complete this asynchronous function to retrieve and read the value of a secret blob
+  // ✅ #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
@@ -109,7 +113,29 @@ const Home: NextPage = () => {
       <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">Store and Retrieve &quot;Hello World&quot; with Nillion</span>
+            <span className="block text-4xl font-bold text-center">
+              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.
+            </p>
+
+            <p className="text-center text-lg">
+              Get started by editing{" "}
+              <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
+                packages/nextjs/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/nillion-hello-world/page-complete.tsx
+              </code>
+            </p>
+
             {!connectedAddress && <p>Connect your MetaMask Flask wallet</p>}
             {connectedAddress && connectedToSnap && !userKey && (
               <a target="_blank" href="https://nillion-snap-site.vercel.app/" rel="noopener noreferrer">

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

@@ -22,14 +22,16 @@ const Home: NextPage = () => {
   const [storeId, setStoreId] = useState<string | null>(null);
   const [retrievedValue, setRetrievedValue] = useState<string | null>(null);
 
-  // 🎯 TODO complete this function to connect to the MetaMask Snap
+  // 🎯 TODO #1 complete this function to connect to the MetaMask Snap
+  // Once this is done, the "Connect to Snap with Nillion User Key" button will work
   async function handleConnectToSnap() {
     // call getUserKeyFromSnap
     // update state: set userKey with the response from getUserKeyFromSnap
     // update state: set connectedToSnap based on the response from getUserKeyFromSnap
   }
 
-  // 🎯 TODO complete this useEffect hook to set up Nillion once a userKey exists
+  // 🎯 TODO #2 complete this useEffect hook to set up Nillion once a userKey exists
+  // Once this is done, you can call nillion libraries from the page
   useEffect(() => {
     // conditional execution: Check if userKey exists before implementing logic
     if (userKey) {
@@ -54,15 +56,17 @@ const Home: NextPage = () => {
     }
   }, [userKey]);
 
-  // 🎯 TODO complete this asynchronous function to process the submission of a form used for storing secrets
+  // 🎯 TODO #3 complete this asynchronous function to process the submission of a form used for storing secrets
+  // 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
     // inside of the "then" method, console log the store_id
     // update state: set storedSecretName
     // update state: set storeId
   }
 
-  // 🎯 TODO complete this asynchronous function to retrieve and read the value of a secret blob
+  // 🎯 TODO #4 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
@@ -95,12 +99,27 @@ const Home: NextPage = () => {
       <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">Store and Retrieve &quot;Hello World&quot; with Nillion</span>
+            <span className="block text-4xl font-bold text-center">
+              Complete the code 🎯 TODOs to store and retrieve secrets on Nillion
+            </span>
 
-            <p className="block text-m  w-50">
+            <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. Need a hint on how to get something working? Take a look at
-              `nillion-hello-world/page-complete.tsx`
+              SecretBlob secrets in Nillion.
+            </p>
+
+            <p className="text-center text-lg">
+              Get started by editing{" "}
+              <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
+                packages/nextjs/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/nillion-hello-world/page-complete.tsx
+              </code>
             </p>
 
             {!connectedAddress && <p>Connect your MetaMask Flask wallet</p>}

packages/nextjs/components/Header.tsx

@@ -20,12 +20,12 @@ export const menuLinks: HeaderMenuLink[] = [
     href: "/",
   },
   {
-    label: "Nillion Hello World",
-    href: "/nillion-hello-world",
+    label: "🖥️ Nillion Blind Computation Demo",
+    href: "/nillion-compute",
   },
   {
-    label: "Nillion Blind Computation",
-    href: "/nillion-compute",
+    label: "🎯 Nillion Hello World",
+    href: "/nillion-hello-world",
   },
   {
     label: "Debug Contracts",

packages/nextjs/utils/nillion/nillionConfig.ts

@@ -1,16 +1,16 @@
 export const nillionConfig = {
-  websockets: ["/ip4/127.0.0.1/tcp/63305/ws/p2p/12D3KooWFwP3xbuVVbFS5hnae6Vbb4dN4bSNrG3eBP2M7XM7V1qH"],
-  cluster_id: "17db6f7b-903d-470e-9ff1-37c12d0d5efc",
+  websockets: ["/ip4/127.0.0.1/tcp/55693/ws/p2p/12D3KooWSqDTmdKdJ6AWaVMgUKdLBBVeF6mRo2sLuqbgjjCFEtDK"],
+  cluster_id: "798d89ce-37f4-4d7d-aab9-ba511ae67ccc",
   payments_config: {
-    rpc_endpoint: "http://localhost:63121",
+    rpc_endpoint: "http://localhost:55501",
     smart_contract_addresses: {
       blinding_factors_manager: "a513e6e4b8f2a923d98304ec87f64353c4d5c853",
       payments: "5fc8d32690cc91d4c39d9d3abcbd16989f875707",
     },
     signer: {
       wallet: {
         chain_id: 31337,
-        private_key: "92db14e403b83dfe3df233f83dfa3a0d7096f21ca9b0d6d6b8d88b2b4ec1564e",
+        private_key: "df57089febbacf7ba0bc227dafbffa9fc08a93fdc68e1e42411a14efcf23656e",
       },
     },
   },