feat: add testnet login and features

examples/nextjs/app/components/AddTestnetChain.tsx

@@ -0,0 +1,60 @@
+import { config } from "../config/Chain";
+import Image from "next/image";
+
+const checkKeplr = async () => {
+  try {
+    const keplr = window.keplr;
+    if (!keplr) {
+      throw new Error("Please install Keplr extension");
+    }
+  } catch (err: unknown) {
+    if (err instanceof Error) {
+      console.log(err.message);
+    } else {
+      console.log("An unknown error occurred");
+    }
+  }
+};
+
+const addDevnetChain = async () => {
+  try {
+    await checkKeplr();
+
+    const chainId = "nillion-chain-testnet-1";
+    const keplr = window.keplr;
+    if (!keplr) {
+      throw new Error("Keplr not found");
+    }
+
+    try {
+      await keplr.getKey(chainId);
+      console.log("Chain already exists in Keplr!");
+    } catch {
+      console.log("Adding new chain to Keplr...");
+      await keplr.experimentalSuggestChain(config);
+    }
+    await keplr.enable(chainId);
+  } catch (error: unknown) {
+    console.error("Error:", error);
+    if (
+      error instanceof Error &&
+      error.message.includes("chain not supported")
+    ) {
+      console.log(
+        "This chain needs to be manually added with chainInfo configuration",
+      );
+    }
+    throw error;
+  }
+};
+
+export const AddTestnetChain: React.FC = () => {
+  return (
+    <button
+      onClick={addDevnetChain}
+      className="px-4 py-2 border dark:bg-gray-100 border-gray-300 rounded text-white rounded hover:bg-gray-200 transition-colors mr-2 flex items-center"
+    >
+      <Image src="/nillion_n.png" alt="Nillion Icon" width={24} height={24} />
+    </button>
+  );
+};

examples/nextjs/app/components/DeleteValues.tsx

@@ -28,7 +28,7 @@ export const DeleteValues: FC = () => {
             type="text"
             value={id}
             onChange={handleChange}
-            placeholder="Store ID"
+            placeholder="Store Id"
             className="w-full p-2 mb-2 border border-gray-300 rounded text-black"
           />
         </li>

examples/nextjs/app/components/InstructionsTab.tsx

@@ -1,12 +1,10 @@
 "use client";
 
-import { useState } from 'react';
-// import KeplrWalletConnector from './KeplrWallet';
-// import { Login } from './Login';
+import { useState, type FC } from "react";
 import { TestNetContent } from './TestNetContent';
 import { WelcomeContent } from './WelcomeContent';
 
-const InstructionsTab = () => {
+export const InstructionsTab: FC = () => {
   const [activeTab, setActiveTab] = useState('devnet');
 
   return (
@@ -39,18 +37,14 @@ const InstructionsTab = () => {
           <div className="space-y-6">
             <h2 className={`text-2xl font-bold dark:text-white text-gray-800 mb-4`}>Devnet Instructions</h2>
             <WelcomeContent />
-            {/* <Login /> */}
           </div>
         ) : (
           <div className="space-y-6">
             <h2 className={`text-2xl font-bold dark:text-white text-gray-800 mb-4`}>Testnet Instructions</h2>
             <TestNetContent />
-            {/* <KeplrWalletConnector /> */}
           </div>
         )}
       </div>
     </div>
   );
-};
-
-export default InstructionsTab;
+};

examples/nextjs/app/components/InvokeCompute.tsx

@@ -11,6 +11,7 @@ export const InvokeCompute: FC = () => {
   const { client } = useNillion();
   const mutation = useNilInvokeCompute();
   const [programId, setProgramId] = useState("");
+  const [copiedComputeResult, setComputeResultCopied] = useState(false);
   const isValidProgramId = ProgramId.safeParse(programId).success;
 
   function handleChange(event: ChangeEvent<HTMLInputElement>): void {
@@ -52,7 +53,7 @@ export const InvokeCompute: FC = () => {
         Current values are 4 & 2. Refer to InvokeCompute.tsx
       </p>
       <div className="mt-2">
-        Program id:{" "}
+        Program Id:{" "}
         <input
           className="w-full p-2 mb-2 border border-gray-300 rounded text-black"
           type="text"
@@ -62,17 +63,19 @@ export const InvokeCompute: FC = () => {
       </div>
       <ol className="list-disc pl-5">
         <li className="mt-2">Status: {mutation.status}</li>
-        <li className="my-2">
-          Compute result id:
+        <li className="mt-2">
+          Compute result Id:
           {mutation.isSuccess ? (
             <>
               {`${resultId.substring(0, 4)}...${resultId.substring(resultId.length - 4)}`}
               <button
                 onClick={() => {
                   navigator.clipboard.writeText(resultId);
+                  setComputeResultCopied(true);
+                  setTimeout(() => setComputeResultCopied(false), 2000);
                 }}
               >
-                📋
+                {!copiedComputeResult ? " 📋" : " ✅"}
               </button>
             </>
           ) : (
@@ -81,7 +84,7 @@ export const InvokeCompute: FC = () => {
         </li>
       </ol>
       <button
-        className={`flex items-center justify-center px-4 py-2 border rounded text-black mb-4 ${
+        className={`flex items-center justify-center px-4 py-2 border mt-2 rounded text-black mb-4 ${
           !isValidProgramId
             ? "opacity-50 cursor-not-allowed bg-gray-200"
             : "bg-white hover:bg-gray-100"