chore: prettier

examples/nextjs/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "arrowParens": "always",
+  "semi": true,
+  "useTabs": false,
+  "singleQuote": false
+}

examples/nextjs/app/components/Compute.tsx

@@ -57,26 +57,31 @@ export const Compute: FC = () => {
           "Compute"
         )}
       </button>
-      <p className="my-2 italic text-sm mt-2">Current values are 4 & 2. Refer to ComputeOutput.tsx</p>
+      <p className="my-2 italic text-sm mt-2">
+        Current values are 4 & 2. Refer to ComputeOutput.tsx
+      </p>
       <ul className="list-disc pl-5 mt-4">
         <li className="mt-2">Status: {nilCompute.status}</li>
         <li className="mt-2">
-          Compute output id: {nilCompute.isSuccess ? (
+          Compute output id:
+          {nilCompute.isSuccess ? (
             <>
               {`${nilCompute.data?.substring(0, 4)}...${nilCompute.data?.substring(nilCompute.data.length - 4)}`}
               <button
                 onClick={() => {
                   setCopiedComputeOutputID(true);
-                  navigator.clipboard.writeText(nilCompute.data)
+                  navigator.clipboard.writeText(nilCompute.data);
                   setTimeout(() => setCopiedComputeOutputID(false), 2000);
                 }}
               >
                 {!copiedComputeOutputID ? " 📋" : " ✅"}
               </button>
             </>
-          ) : "idle"}
+          ) : (
+            "idle"
+          )}
         </li>
       </ul>
     </div>
   );
-};
+};

examples/nextjs/app/components/ComputeOutput.tsx

@@ -53,4 +53,4 @@ export const ComputeOutput: FC = () => {
       </ul>
     </div>
   );
-};
+};

examples/nextjs/app/components/FetchValue.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { useNilFetchValue } from "@nillion/client-react-hooks";
 
 export default function FetchValue() {
@@ -27,23 +27,23 @@ export default function FetchValue() {
       />
       <button
         className={`flex items-center justify-center w-40 px-4 py-2 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 ${
-          !id || nilFetch.isLoading ? 'opacity-50 cursor-not-allowed' : ''
+          !id || nilFetch.isLoading ? "opacity-50 cursor-not-allowed" : ""
         }`}
         onClick={handleClick}
         disabled={!id || nilFetch.isLoading}
       >
         {nilFetch.isLoading ? (
           <div className="w-5 h-5 border-t-2 border-b-2 border-gray-900 rounded-full animate-spin"></div>
         ) : (
-          <>
-            Fetch
-          </>
+          <>Fetch</>
         )}
       </button>
       <ul className="mt-4">
         <li className="mt-2">Status: {nilFetch.status}</li>
-        <li className="mt-2">Secret: {nilFetch.isSuccess ? nilFetch.data : "idle"}</li>
+        <li className="mt-2">
+          Secret: {nilFetch.isSuccess ? nilFetch.data : "idle"}
+        </li>
       </ul>
     </div>
   );
-}
+}

examples/nextjs/app/components/Login.tsx

@@ -7,21 +7,22 @@ import { useEffect, useState } from "react";
 export const Login = () => {
   const { authenticated, login, logout } = useNillionAuth();
   // Feel free to set this to other values + useSetState
-  const SEED = "example-secret-seed"
-  const SECRET_KEY = "9a975f567428d054f2bf3092812e6c42f901ce07d9711bc77ee2cd81101f42c5"
+  const SEED = "example-secret-seed";
+  const SECRET_KEY =
+    "9a975f567428d054f2bf3092812e6c42f901ce07d9711bc77ee2cd81101f42c5";
 
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    console.log('authenticated', authenticated);
+    console.log("authenticated", authenticated);
   }, [authenticated]);
 
   const handleLogin = async () => {
     try {
       setIsLoading(true);
       const credentials: UserCredentials = {
         userSeed: SEED,
-        signer: () => createSignerFromKey(SECRET_KEY)
+        signer: () => createSignerFromKey(SECRET_KEY),
       };
       await login(credentials);
     } catch (err) {
@@ -45,20 +46,20 @@ export const Login = () => {
   return (
     <div className="flex-row flex my-6">
       {authenticated ? (
-        <button 
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" 
-          onClick={handleLogout} 
+        <button
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          onClick={handleLogout}
           disabled={isLoading}
         >
-          {isLoading ? 'Logging out...' : 'Logout'}
+          {isLoading ? "Logging out..." : "Logout"}
         </button>
       ) : (
-        <button 
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" 
-          onClick={handleLogin} 
+        <button
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          onClick={handleLogin}
           disabled={isLoading}
         >
-          {isLoading ? 'Logging in...' : 'Login'}
+          {isLoading ? "Logging in..." : "Login"}
         </button>
       )}
     </div>

examples/nextjs/app/components/StoreProgram.tsx

@@ -85,21 +85,25 @@ export const StoreProgram: FC = () => {
         <li className="mt-2">Status: {nilStoreProgram.status}</li>
         <li className="mt-2">File name: {fileName || "unset"}</li>
         <li className="mt-2">
-          Program id: {nilStoreProgram.isSuccess ? (
+          Program id:
+          {nilStoreProgram.isSuccess ? (
             <>
               {`${nilStoreProgram.data?.substring(0, 4)}...${nilStoreProgram.data?.substring(nilStoreProgram.data.length - 4)}`}
               <button
                 onClick={() => {
                   setProgramIDCopied(true);
-                  navigator.clipboard.writeText(nilStoreProgram.data)
-                  setTimeout(() => setProgramIDCopied(false), 2000);                }}
+                  navigator.clipboard.writeText(nilStoreProgram.data);
+                  setTimeout(() => setProgramIDCopied(false), 2000);
+                }}
               >
                 {!copiedProgramID ? " 📋" : " ✅"}
               </button>
             </>
-          ) : "idle"}
+          ) : (
+            "idle"
+          )}
         </li>
       </ul>
     </div>
   );
-};
+};

examples/nextjs/app/components/StoreValue.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { useNilStoreValue } from "@nillion/client-react-hooks";
 
 export default function StoreValue() {
@@ -20,43 +20,44 @@ export default function StoreValue() {
         type="number"
         className="w-full p-2 mb-2 border border-gray-300 rounded text-black"
         placeholder="Secret value"
-        value={secret || ''}
+        value={secret || ""}
         onChange={(e) => setSecret(Number(e.target.value))}
       />
       <button
         className={`flex items-center justify-center w-40 px-4 py-2 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 ${
-          !secret || nilStore.isLoading ? 'opacity-50 cursor-not-allowed' : ''
+          !secret || nilStore.isLoading ? "opacity-50 cursor-not-allowed" : ""
         }`}
         onClick={handleClick}
         disabled={!secret || nilStore.isLoading}
       >
         {nilStore.isLoading ? (
           <div className="w-5 h-5 border-t-2 border-b-2 border-gray-900 rounded-full animate-spin"></div>
         ) : (
-          <>
-            Store
-          </>
+          <>Store</>
         )}
       </button>
       <ul className="mt-4">
         <li className="mt-2">Status: {nilStore.status}</li>
         <li className="mt-2">
-          Id: {nilStore.isSuccess ? (
+          Id:
+          {nilStore.isSuccess ? (
             <>
               {`${nilStore.data?.substring(0, 6)}...${nilStore.data?.substring(nilStore.data.length - 6)}`}
               <button
                 onClick={() => {
-                    setCopied(true);
-                    navigator.clipboard.writeText(nilStore.data)
-                    setTimeout(() => setCopied(false), 2000);
+                  setCopied(true);
+                  navigator.clipboard.writeText(nilStore.data);
+                  setTimeout(() => setCopied(false), 2000);
                 }}
               >
                 {!copied ? " 📋" : " ✅"}
               </button>
             </>
-          ) : "idle"}
+          ) : (
+            "idle"
+          )}
         </li>
       </ul>
     </div>
   );
-}
+}

examples/nextjs/app/components/WelcomeContent.tsx

@@ -1,39 +1,47 @@
 import Image from "next/image";
 
 export const WelcomeContent = () => {
-
-    return(  
-        <>
-            <Image
-                src="/logo.svg"
-                alt="Next.js logo"
-                width={180}
-                height={38}
-                priority
-            />
-            <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)] mt-4">
-                <li className="mb-2">
-                    Follow along the quickstart guide <a href="https://github.com/NillionNetwork/awesome-nillion/issues/2" target="_blank" className="underline" rel="noopener noreferrer">here</a>
-                </li>
-                <li className="mb-2">
-                    Reach out to us on {""}
-                    <a 
-                    href="https://github.com/orgs/NillionNetwork/discussions"
-                    target="_blank" 
-                    className="underline"
-                    rel="noopener noreferrer">
-                    Github Discussions 
-                    </a> 
-                    {""} if you get stuck
-                </li> 
-                <li>
-                    Make sure you are running 
-                    <code className="bg-gray-700 rounded-md p-1 mx-1">
-                        nillion-devnet
-                    </code> 
-                    in a separate terminal.
-                </li>       
-            </ol>
-        </> 
-    )
-}
+  return (
+    <>
+      <Image
+        src="/logo.svg"
+        alt="Next.js logo"
+        width={180}
+        height={38}
+        priority
+      />
+      <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)] mt-4">
+        <li className="mb-2">
+          Follow along the quickstart guide
+          <a
+            href="https://github.com/NillionNetwork/awesome-nillion/issues/2"
+            target="_blank"
+            className="underline"
+            rel="noopener noreferrer"
+          >
+            here
+          </a>
+        </li>
+        <li className="mb-2">
+          Reach out to us on
+          <a
+            href="https://github.com/orgs/NillionNetwork/discussions"
+            target="_blank"
+            className="underline"
+            rel="noopener noreferrer"
+          >
+            Github Discussions
+          </a>
+          {""} if you get stuck
+        </li>
+        <li>
+          Make sure you are running
+          <code className="bg-gray-700 rounded-md p-1 mx-1">
+            nillion-devnet
+          </code>
+          in a separate terminal.
+        </li>
+      </ol>
+    </>
+  );
+};

examples/nextjs/app/page.tsx

@@ -3,15 +3,15 @@ import { Login } from "./components/Login";
 import StoreValue from "./components/StoreValue";
 import FetchValue from "./components/FetchValue";
 import { StoreProgram } from "./components/StoreProgram";
-import { Compute }  from "./components/Compute";
-import {ComputeOutput} from './components/ComputeOutput';
+import { Compute } from "./components/Compute";
+import { ComputeOutput } from "./components/ComputeOutput";
 
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-center p-24">
       <div className="w-full flex flex-col items-center font-mono text-sm">
         <WelcomeContent />
-        <Login/>
+        <Login />
         <div className="flex flex-col gap-4 max-w-4xl mx-auto w-full">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 justify-items-center">
             <StoreValue />
@@ -22,7 +22,7 @@ export default function Home() {
             <Compute />
             <ComputeOutput />
           </div>
-      </div>
+        </div>
       </div>
     </main>
   );

examples/nextjs/next.config.mjs

@@ -1,19 +1,18 @@
 /* eslint-disable */
 /** @type {import("next").NextConfig} */
 const nextConfig = {
-    async headers() {
-      return [
-        {
-          source: "/:path*",
-          // headers required for @nillion/client-wasm's wasm artefact
-          headers: [
-            { key: "Cross-Origin-Embedder-Policy", value: "require-corp" },
-            { key: "Cross-Origin-Opener-Policy", value: "same-origin" },
-          ],
-        },
-      ];
-    },
-  };
-
-  export default nextConfig;
-
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        // headers required for @nillion/client-wasm's wasm artefact
+        headers: [
+          { key: "Cross-Origin-Embedder-Policy", value: "require-corp" },
+          { key: "Cross-Origin-Opener-Policy", value: "same-origin" },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;