serialize 😬

NaniDAO · Feb 19, 2024 · 837ad51 · 837ad51
1 parent 24db464
commit 837ad51
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 75 deletions.
diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
@@ -61,17 +61,20 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={cn(
-        "min-h-full bg-black text-white w-screen",
-        "default-font",
-      )}
+      className={cn("min-h-full bg-black text-white w-screen", "default-font")}
       suppressHydrationWarning
     >
       <head>
-      <link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet" />
-
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=VT323&display=swap"
+          rel="stylesheet"
+        />
       </head>
       <body>
         <Providers>{children}</Providers>

diff --git a/ui/components/providers.tsx b/ui/components/providers.tsx
@@ -7,7 +7,7 @@ import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { siteConfig } from "@/lib/site";
 
 const config = getDefaultConfig({
-  appName: siteConfig.name, 
+  appName: siteConfig.name,
   appDescription: siteConfig.description,
   projectId: process.env.NEXT_PUBLIC_WC_ID!,
   chains: [

diff --git a/ui/components/shell-history.tsx b/ui/components/shell-history.tsx
@@ -1,15 +1,16 @@
-'use client'
-import useShellStore from "@/lib/use-shell-store"
+"use client";
+import useShellStore from "@/lib/use-shell-store";
 
 export const ShellHistory = () => {
-    const history = useShellStore(state => state.history)
+  const history = useShellStore((state) => state.history);
 
-    return (
-        <div>
-            {history.map((line, i) => (
-                <div className="mt-1" key={i}>{line}</div>
-            ))}
+  return (
+    <div>
+      {history.map((line, i) => (
+        <div className="mt-1" key={i}>
+          {line}
         </div>
-    )
-}
-
+      ))}
+    </div>
+  );
+};
diff --git a/ui/components/shell.tsx b/ui/components/shell.tsx
@@ -4,14 +4,21 @@ import { Form, FormControl, FormField, FormItem } from "./ui/form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import {
+  serialize,
   useAccount,
   useEnsName,
   usePublicClient,
   useWriteContract,
 } from "wagmi";
 import { IntentsEngineAbi } from "../lib/abi/IntentsEngineAbi";
 import { ETH_ADDRESS, IE_ADDRESS } from "../lib/constants";
-import { erc20Abi, isAddress, isAddressEqual, maxUint256, parseEther } from "viem";
+import {
+  erc20Abi,
+  isAddress,
+  isAddressEqual,
+  maxUint256,
+  parseEther,
+} from "viem";
 import { mainnet } from "viem/chains";
 import useShellStore from "@/lib/use-shell-store";
 import { ShellHistory } from "./shell-history";
@@ -21,18 +28,20 @@ const formSchema = z.object({
 });
 
 const createId = (chainId?: number, user?: string) => {
-  return (<p className="uppercase">
-  {chainId ? chainId : <span className="animate-spin">☼</span>}:\
-  {!user ? (
-    <span className="animate-spin">☼</span>
-  ) : !isAddress(user) ? (
-    user.slice(0, -4)
-  ) : (
-    user
-  )}
-  {">"}
-</p>)
-}
+  return (
+    <p className="uppercase">
+      {chainId ? chainId : <span className="animate-spin">☼</span>}:\
+      {!user ? (
+        <span className="animate-spin">☼</span>
+      ) : !isAddress(user) ? (
+        user.slice(0, -4)
+      ) : (
+        user
+      )}
+      {">"}
+    </p>
+  );
+};
 
 export const Shell = () => {
   const form = useForm<z.infer<typeof formSchema>>({
@@ -46,20 +55,27 @@ export const Shell = () => {
     address,
     chainId: mainnet.id,
   });
-  const {
-    writeContractAsync,
-  } = useWriteContract();
+  const { writeContractAsync } = useWriteContract();
   const client = usePublicClient();
 
   const addLine = useShellStore((state) => state.addLine);
 
-  const addCommand = ({ chainId, user, command }: {
-    chainId?: number
-    user?: string
-    command: string
+  const addCommand = ({
+    chainId,
+    user,
+    command,
+  }: {
+    chainId?: number;
+    user?: string;
+    command: string;
   }) => {
-    addLine(<div className="flex flex-row items-center space-x-1">{createId(chainId, user)}<p>{command}</p></div>);
-  }
+    addLine(
+      <div className="flex flex-row items-center space-x-1">
+        {createId(chainId, user)}
+        <p>{command}</p>
+      </div>,
+    );
+  };
 
   const addError = (error: Error) => {
     addLine(<p className="text-[red]">{error.message}</p>);
@@ -71,40 +87,27 @@ export const Shell = () => {
       addCommand({ chainId: chain?.id, user: name ?? address, command });
       if (!client) throw new Error("No client available");
       if (!address) throw new Error("No wallet connected");
-  
+
       const regex = /(\d+(\.\d+)?)\s*eth/i;
       const match = command.match(regex);
       let value = 0n; // Default value if no match is found
-  
+
       if (match && match[1]) {
         // Convert the matched value to a number
         value = parseEther(match[1]);
       }
-  
+
       console.log({ command, value });
-  
+
       const preview = await client.readContract({
         address: IE_ADDRESS,
         abi: IntentsEngineAbi,
         functionName: "previewCommand",
         args: [command],
       });
 
-      addLine(<p>
-        Preview: {JSON.stringify(preview)}
-      </p>)
-
-      const confirm = window.confirm(
-        `Are you sure you want to execute the following command?\n\n${preview}\n\n`,
-      );
-
-      console.log({ preview, confirm });
-
-      if (!confirm) {
-        addLine(<p className="text-[orange]">Command cancelled.</p>);
-        return;
-      }
-
+      addLine(<p>Preview: {serialize(preview)}</p>);
+
       if (!isAddressEqual(preview[2], ETH_ADDRESS)) {
         // consent to spend tokens
         const allowance = await client.readContract({
@@ -113,9 +116,9 @@ export const Shell = () => {
           functionName: "allowance",
           args: [address, IE_ADDRESS],
         });
-  
+
         console.log({ allowance });
-  
+
         if (allowance < preview[1]) {
           // we do a lil approve dance
           const approveTxHash = await writeContractAsync({
@@ -124,41 +127,45 @@ export const Shell = () => {
             functionName: "approve",
             args: [IE_ADDRESS, maxUint256],
           });
-  
+
           addLine(<p>Approve TX Hash: {approveTxHash}</p>);
-  
+
           const allowanceReceipt = await client.waitForTransactionReceipt({
             hash: approveTxHash,
             confirmations: 1,
           });
-  
-          addLine(<p>Allowance Set. Receipt: {JSON.stringify(allowanceReceipt)}</p>);
+
+          addLine(<p>Allowance Set. Receipt: {serialize(allowanceReceipt)}</p>);
         }
       }
-  
+
       const commandTxHash = await writeContractAsync({
         address: IE_ADDRESS,
         abi: IntentsEngineAbi,
         functionName: "command",
         value,
         args: [command],
       });
-  
+
       addLine(<p>Command TX Hash: {commandTxHash}</p>);
-  
+
       const commandReceipt = await client.waitForTransactionReceipt({
         hash: commandTxHash,
         confirmations: 1,
       });
-
-      addLine(<p>Command Executed. Receipt: {JSON.stringify(commandReceipt)}</p>);
+
+      addLine(
+        <p>Command Executed. Receipt: {JSON.stringify(commandReceipt)}</p>,
+      );
     } catch (error) {
       console.error(error);
-      error instanceof Error ? addError(error) : addError(new Error("Unknown error"));
+      error instanceof Error
+        ? addError(error)
+        : addError(new Error("Unknown error"));
     }
   }
- 
-  const id = createId(chain?.id, name ?? address) 
+
+  const id = createId(chain?.id, name ?? address);
 
   if (!isConnected || !address || !chain) return null;