✍️

.gitignore

@@ -1,2 +1,6 @@
 out
-cache
+cache
+
+ui/node_modules
+ui/.next
+ui/.env

ui/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_WC_ID=YOUR_WALLET_CONNECT_ID

ui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

ui/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

ui/.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies = false

ui/README.md

@@ -0,0 +1,29 @@
+This is a [RainbowKit](https://rainbowkit.com) + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org/) project bootstrapped with [`create-rainbowkit`](https://github.com/rainbow-me/rainbowkit/tree/main/packages/create-rainbowkit).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about this stack, take a look at the following resources:
+
+- [RainbowKit Documentation](https://rainbowkit.com) - Learn how to customize your wallet connection flow.
+- [wagmi Documentation](https://wagmi.sh) - Learn how to interact with Ethereum.
+- [Next.js Documentation](https://nextjs.org/docs) - Learn how to build a Next.js application.
+
+You can check out [the RainbowKit GitHub repository](https://github.com/rainbow-me/rainbowkit) - 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 the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

ui/components/shell.tsx

@@ -0,0 +1,134 @@
+import { useForm } from "react-hook-form";
+import { Form, FormControl, FormField, FormItem } from "./ui/form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import {
+  BaseError,
+  useAccount,
+  useWaitForTransactionReceipt,
+  useWriteContract,
+} from "wagmi";
+import { IntentsEngineAbi } from "../lib/abi/IntentsEngineAbi";
+import { IE_ADDRESS } from "../lib/constants";
+import { parseEther } from "viem";
+
+const formSchema = z.object({
+  command: z.string().min(2),
+});
+
+export const Shell = () => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      command: "",
+    },
+  });
+  const { address, chain } = useAccount();
+  const { data: hash, writeContract, isPending, error } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess: isConfirmed } =
+    useWaitForTransactionReceipt({
+      hash,
+    });
+
+  async function onSubmit({ command }: z.infer<typeof formSchema>) {
+    try {
+      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 });
+
+      if (command.includes("swap")) {
+        // approve the router to spend the token
+
+      }
+
+      writeContract({
+        address: IE_ADDRESS,
+        abi: IntentsEngineAbi,
+        functionName: "command",
+        value,
+        args: [command],
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  const id = (
+    <p className="uppercase">
+      {chain?.id}:{address}
+      {">"}
+    </p>
+  );
+  return (
+    <div className="p-1 h-full text-white font-mono">
+      <div className="mb-3">
+        <p>Nani Intents Shell {"[ Version 0.0.1 ]"}</p>
+        <p>(c) 2023 Nani Kotoba LLC. All rights reserved.</p>
+        {chain && <p>Connected to {chain.name}.</p>}
+      </div>
+      <div>
+        {chain ? (
+          <div>
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="mb-2 flex flex-row"
+              >
+                <FormField
+                  control={form.control}
+                  name="command"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center space-x-1 space-y-0">
+                      {id}
+                      <FormControl>
+                        <input
+                          className="min-w-[580px] bg-black text-white focus:outline-none w-full"
+                          {...field}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <button className="hidden" type="submit">
+                  Submit
+                </button>
+              </form>
+            </Form>
+            {hash && (
+              <div className="flex flex-row space-x-1">
+                {id}
+                <p> Transaction Hash: {hash}</p>
+              </div>
+            )}
+            {isConfirming && (
+              <div className="flex flex-row space-x-1">
+                {id}
+                <p>Waiting for confirmation...</p>
+              </div>
+            )}
+            {isConfirmed && (
+              <div className="flex flex-row items-center space-x-1">
+                {id}
+                <p className="text-green-500">Transaction confirmed.</p>
+              </div>
+            )}
+          </div>
+        ) : (
+          <p>Connect to a network to start</p>
+        )}
+        {error && (
+          <div className="flex flex-row space-x-1">
+            {id}
+            <p className="text-red-500">Error: {(error as BaseError).shortMessage || error.message}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};