Merge pull request #9 from NillionNetwork/add-testnet-config

(feat) add nillion testnet example env for nucleus builders

README.md

@@ -14,10 +14,12 @@ Before you begin, you need to install the following tools:
   ```
   curl https://nilup.nilogy.xyz/install.sh | bash
   ```
+
   - Confirm `nilup` installation
     ```
     nilup -V
     ```
+
 - [Nillion SDK tools](https://docs.nillion.com/nillion-sdk-and-tools) Use `nilup` to install these:
   ```bash
   nilup install latest
@@ -216,6 +218,16 @@ Run smart contract test with `yarn hardhat:test`
 - 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-complete/page.tsx` page
 
+## Connecting to Nillion Testnet
+
+Today only Nucleus builders have been allowlisted to connect to the Nillion Testnet.
+
+In step 4, `yarn nillion-devnet` sets up the scaffold to run a devnet (a local nillion network).
+
+To instead connect to the Nillion Testnet, replace testnet values from `packages/nextjs/.env.nilliontestnet` with the devnet ones in your `packages/nextjs/.env`. Make sure that your `NEXT_PUBLIC_NILLION_NODEKEY_ALLOWLISTED_SEED` is one you shared with the Nillion team when allowlisting your peer id for the testnet.
+
+Now when you run the NextJS app, your app will connect to the Nillion Testnet.
+
 ## 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.

packages/hardhat/deployments/nillionTestnet/.chainId

@@ -0,0 +1 @@
+22255222

packages/hardhat/hardhat.config.ts

@@ -126,6 +126,10 @@ const config: HardhatUserConfig = {
       url: "https://sepolia.publicgoods.network",
       accounts: [deployerPrivateKey],
     },
+    nillionTestnet: {
+      url: "https://rpc-endpoint.testnet-fe.nilogy.xyz",
+      accounts: [deployerPrivateKey],
+    },
   },
   // configuration for harhdat-verify plugin
   etherscan: {

packages/nextjs/.env.nilliontestnet

@@ -0,0 +1,17 @@
+NEXT_PUBLIC_NILLION_WEBSOCKETS=/dns/node-1.testnet-fe.nillion-network.nilogy.xyz/tcp/14211/wss/p2p/12D3KooWNbB2dobuVpH5qetmWnamsKr1G9rC5Sbvj2UsMt3jvQxK
+NEXT_PUBLIC_NILLION_CLUSTER_ID=f592f8ea-7651-4ab8-b692-ef149b783dc9
+NEXT_PUBLIC_NILLION_BLOCKCHAIN_RPC_ENDPOINT=https://rpc-endpoint.testnet-fe.nilogy.xyz
+NEXT_PUBLIC_NILLION_BLINDING_FACTORS_MANAGER_SC_ADDRESS=0xa841c8814aae50790f79b5bfa6c5ecd25071655e
+NEXT_PUBLIC_NILLION_PAYMENTS_SC_ADDRESS=0x27303ed96fdf3986413c2e0879f7b1a9b17ee7f5
+NEXT_PUBLIC_NILLION_CHAIN_ID=22255222
+NEXT_PUBLIC_NILLION_BOOTNODE_MULTIADDRESS=/dns/node-1.testnet-fe.nillion-network.nilogy.xyz/tcp/14111/p2p/12D3KooWNbB2dobuVpH5qetmWnamsKr1G9rC5Sbvj2UsMt3jvQxK
+
+# you must be allowlisted to connect to the testnet
+# add your allowlisted nodekey seed here
+NEXT_PUBLIC_NILLION_NODEKEY_ALLOWLISTED_SEED=
+
+# this should be a private key that is loaded with testnet eth
+NEXT_PUBLIC_NILLION_WALLET_PRIVATE_KEY=
+
+# tells scaffold.config.ts to connect to the testnet
+NEXT_PUBLIC_USE_NILLION_TESTNET=true

packages/nextjs/app/debug/_components/DebugContracts.tsx

@@ -32,29 +32,32 @@ export function DebugContracts() {
         <>
           {contractNames.length > 1 && (
             <div className="flex flex-row gap-2 w-full max-w-7xl pb-1 px-6 lg:px-10 flex-wrap">
-              {contractNames.map(contractName => (
-                <button
-                  className={`btn btn-secondary btn-sm font-light hover:border-transparent ${
-                    contractName === selectedContract
-                      ? "bg-base-300 hover:bg-base-300 no-animation"
-                      : "bg-base-100 hover:bg-secondary"
-                  }`}
-                  key={contractName}
-                  onClick={() => setSelectedContract(contractName)}
-                >
-                  {contractName}
-                  {contractsData[contractName].external && (
-                    <span className="tooltip tooltip-top tooltip-accent" data-tip="External contract">
-                      <BarsArrowUpIcon className="h-4 w-4 cursor-pointer" />
-                    </span>
-                  )}
-                </button>
-              ))}
+              {contractNames.map(contractNameIn => {
+                const contractName = String(contractNameIn);
+                return (
+                  <button
+                    className={`btn btn-secondary btn-sm font-light hover:border-transparent ${
+                      contractName === selectedContract
+                        ? "bg-base-300 hover:bg-base-300 no-animation"
+                        : "bg-base-100 hover:bg-secondary"
+                    }`}
+                    key={contractName}
+                    onClick={() => setSelectedContract(contractName)}
+                  >
+                    {contractName}
+                    {contractsData[contractName].external && (
+                      <span className="tooltip tooltip-top tooltip-accent" data-tip="External contract">
+                        <BarsArrowUpIcon className="h-4 w-4 cursor-pointer" />
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
             </div>
           )}
           {contractNames.map(contractName => (
             <ContractUI
-              key={contractName}
+              key={String(contractName)}
               contractName={contractName}
               className={contractName === selectedContract ? "" : "hidden"}
             />

packages/nextjs/app/debug/_components/contract/ContractUI.tsx

@@ -17,7 +17,8 @@ type ContractUIProps = {
 /**
  * UI component to interface with deployed contracts.
  **/
-export const ContractUI = ({ contractName, className = "" }: ContractUIProps) => {
+export const ContractUI = ({ contractName: contractNameIn, className = "" }: ContractUIProps) => {
+  const contractName = String(contractNameIn);
   const [refreshDisplayVariables, triggerRefreshDisplayVariables] = useReducer(value => !value, false);
   const { targetNetwork } = useTargetNetwork();
   const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName);

packages/nextjs/contracts/deployedContracts.ts

@@ -5,9 +5,9 @@
 import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 
 const deployedContracts = {
-  31337: {
+  22255222: {
     YourContract: {
-      address: "0x5FbDB2315678afecb367f032d93F642f64180aa3",
+      address: "0x1314bf308272cf3BF20B4aAA62e973eCE6ADFbF8",
       abi: [
         {
           inputs: [

packages/nextjs/hooks/scaffold-eth/useDeployedContractInfo.ts

@@ -11,7 +11,7 @@ import { Contract, ContractCodeStatus, ContractName, contracts } from "~~/utils/
 export const useDeployedContractInfo = <TContractName extends ContractName>(contractName: TContractName) => {
   const isMounted = useIsMounted();
   const { targetNetwork } = useTargetNetwork();
-  const deployedContract = contracts?.[targetNetwork.id]?.[contractName as ContractName] as Contract<TContractName>;
+  const deployedContract = contracts?.[targetNetwork.id]?.[contractName as string] as Contract<TContractName>;
   const [status, setStatus] = useState<ContractCodeStatus>(ContractCodeStatus.LOADING);
   const publicClient = usePublicClient({ chainId: targetNetwork.id });
 

packages/nextjs/scaffold.config.ts

@@ -1,4 +1,5 @@
 import * as chains from "viem/chains";
+import { defineChain } from "viem/utils";
 
 export type ScaffoldConfig = {
   targetNetworks: readonly chains.Chain[];
@@ -9,9 +10,26 @@ export type ScaffoldConfig = {
   walletAutoConnect: boolean;
 };
 
+const nillionTestnet: chains.Chain = defineChain({
+  id: 22255222,
+  name: "Nillion Testnet",
+  network: "nillion-fe-testnet",
+  nativeCurrency: {
+    decimals: 18,
+    name: "Ether",
+    symbol: "ETH",
+  },
+  rpcUrls: {
+    default: { http: ["https://rpc-endpoint.testnet-fe.nilogy.xyz"] },
+    public: { http: ["https://rpc-endpoint.testnet-fe.nilogy.xyz"] },
+  },
+});
+
+const targetNetwork = process.env.NEXT_PUBLIC_USE_NILLION_TESTNET === "true" ? nillionTestnet : chains.hardhat;
+
 const scaffoldConfig = {
   // The networks on which your DApp is live
-  targetNetworks: [chains.hardhat],
+  targetNetworks: [targetNetwork],
 
   // The interval at which your front-end polls the RPC servers for new data
   // it has no effect if you only target the local network (default is 4000)

packages/nextjs/utils/nillion/nillionClient.ts

@@ -32,11 +32,10 @@ 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 wl = process.env.NEXT_PUBLIC_NILLION_NODEKEY_WL
-    ? process.env.NEXT_PUBLIC_NILLION_NODEKEY_WL.split(", ")
+  const wl = process.env.NEXT_PUBLIC_NILLION_NODEKEY_ALLOWLISTED_SEED
+    ? process.env.NEXT_PUBLIC_NILLION_NODEKEY_ALLOWLISTED_SEED.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);
 

packages/nextjs/utils/scaffold-eth/contract.ts

@@ -79,6 +79,7 @@ type IsContractDeclarationMissing<TYes, TNo> = typeof contractsData extends { [k
 
 type ContractsDeclaration = IsContractDeclarationMissing<GenericContractsDeclaration, typeof contractsData>;
 
+// @ts-ignore TODO remove ignore once Nillion Testnet chain id is added to viem
 type Contracts = ContractsDeclaration[ConfiguredChainId];
 
 export type ContractName = keyof Contracts;