feat: init up to devnet

README.md

@@ -14,7 +14,7 @@ This will create a new Nillion app in the your desired directory.
 2. Clones an example Next.js project with App Router Settings
    a. Installs `@nillion/client-react-hooks` which has all your needs to use Nillion and Nada.
 3. Installs an Nada projects with a pyenv
-4. Then follow along the QuickStart [guide](https://github.com/NillionNetwork/awesome-nillion/issues/2) to do the following:
+4. Then follow along the QuickStart [guide](https://docs.nillion.com/quickstart-install) to do the following:
    - Create a simple Nada App
    - Connect a Nextjs <> Nada Program
 

examples/nextjs/README.md

@@ -1,10 +1,8 @@
-## Nextjs Example for Create Nillion App (CNA)
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-![Example Demo](./public/example_demo.png)
+## Getting Started
 
-Welcome the Nextjs Example for CNA.
-
-Once the CLI insturctions have finished, you can run the developent server:
+First, run the development server:
 
 ```bash
 npm run dev
@@ -18,4 +16,21 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-Then follow the rest of the instructions from the Quickstart guide [here.](https://github.com/NillionNetwork/awesome-nillion/issues/2)
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

examples/nextjs/app/components/DeleteValues.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useNilDeleteValues } from "@nillion/client-react-hooks";
+import { Uuid } from "@nillion/client-vms";
+import { type ChangeEvent, type FC, useState } from "react";
+
+export const DeleteValues: FC = () => {
+  const mutation = useNilDeleteValues();
+  const [id, setId] = useState("");
+  const isValidUuid = Uuid.safeParse(id).success;
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>): void {
+    setId(event.target.value.trim());
+  }
+
+  function handleClick(): void {
+    const options = { id };
+    mutation.execute(options);
+  }
+
+  return (
+    <div className="border border-gray-400 rounded-lg p-4 w-full max-w-md">
+      <h2 className="text-2xl font-bold mb-2">Delete Values</h2>
+      <ul className="mt-4">
+        <li className="mt-2">Status: {mutation.status}</li>
+        <li className="mt-2">
+          <input
+            type="text"
+            value={id}
+            onChange={handleChange}
+            placeholder="Store ID"
+            className="w-full p-2 mb-2 border border-gray-300 rounded text-black"
+          />
+        </li>
+      </ul>
+      <button
+        className={`flex items-center justify-center w-40 px-4 py-2 md:mt-4 text-sm font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 ${
+          !isValidUuid ? "opacity-50 cursor-not-allowed" : ""
+        }`}
+        onClick={handleClick}
+        disabled={!isValidUuid}
+      >
+        Execute
+      </button>
+    </div>
+  );
+};

examples/nextjs/app/components/InstructionsTab.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState } from 'react';
-import KeplrWalletConnector from './KeplrWallet';
-import { Login } from './Login';
+// import KeplrWalletConnector from './KeplrWallet';
+// import { Login } from './Login';
 import { TestNetContent } from './TestNetContent';
 import { WelcomeContent } from './WelcomeContent';
 
@@ -39,13 +39,13 @@ 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 />
+            {/* <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 />
+            {/* <KeplrWalletConnector /> */}
           </div>
         )}
       </div>