NaniDAO · nerderlyne · Feb 19, 2024 · Feb 16, 2024 · Feb 16, 2024 · Feb 16, 2024
diff --git a/ui/styles/globals.css → ui/app/globals.css b/ui/styles/globals.css → ui/app/globals.css
@@ -6,8 +6,14 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  background-color: black;
+  font-family: 'VT323', monospace !important;
+}
+
+.default-font {
+  font-family: "VT323", monospace;
+  font-weight: 400;
+  font-style: normal;
 }
 
 a {

diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
@@ -0,0 +1,81 @@
+import { Metadata, Viewport } from "next";
+
+import { siteConfig } from "@/lib/site";
+
+import "@/app/globals.css";
+import "@rainbow-me/rainbowkit/styles.css";
+
+import { cn } from "@/lib/utils";
+import { Providers } from "@/components/providers";
+
+export const metadata: Metadata = {
+  title: { default: "Intents Engine", template: `%s | ${siteConfig.name}` },
+  description: siteConfig.description,
+  authors: [
+    {
+      name: siteConfig.author,
+      url: siteConfig.githubUrl,
+    },
+  ],
+  generator: "Next.js",
+  keywords: siteConfig.keywords,
+  icons: {
+    icon: "/logo.webp",
+    apple: "/apple-touch-icon.png",
+  },
+  metadataBase: new URL(siteConfig.baseUrl),
+  openGraph: {
+    type: "website",
+    title: siteConfig.name,
+    description: siteConfig.description,
+    url: siteConfig.baseUrl,
+    siteName: siteConfig.name,
+  },
+  twitter: {
+    card: "summary_large_image",
+    site: siteConfig.baseUrl,
+    siteId: siteConfig.twitterId,
+    creator: siteConfig.author,
+    creatorId: siteConfig.twitterId,
+    description: siteConfig.description,
+    title: siteConfig.name,
+  },
+};
+
+export const viewport: Viewport = {
+  width: "device-width", // This will make the width of the page follow the screen-width of the device (which will vary depending on the device).
+  height: "device-height", // Similar to the above, but for height.
+  initialScale: 1, // This defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size.
+  minimumScale: 1, // This defines the minimum zoom level to which the user can zoom out. Keeping this as 1 disallows the user to zoom out beyond the initial scale.
+  maximumScale: 1, // This defines the maximum zoom level to which the user can zoom in. This can be set as per your requirement.
+  userScalable: false, // This allows the user to zoom in or out on the webpage. 'no' will prevent the user from zooming.
+  viewportFit: "cover", // This can be set to 'auto', 'contain', or 'cover'. 'cover' implies that the viewport should cover the whole screen.
+  interactiveWidget: "resizes-visual", // This can be set to 'resizes-visual', 'resizes-content', or 'overlays-content'. 'resizes-visual' implies that the widget can resize the visual viewport.
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html
+      lang="en"
+      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" />
+
+      </head>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/ui/app/page.tsx b/ui/app/page.tsx
@@ -0,0 +1,13 @@
+import { Shell } from "@/components/shell";
+import { Header } from "@/components/header";
+
+const Home = () => {
+  return (
+    <main className="p-1">
+      <Header />
+      <Shell />
+    </main>
+  );
+};
+
+export default Home;
diff --git a/ui/bun.lockb b/ui/bun.lockb
diff --git a/ui/components/account.tsx b/ui/components/account.tsx
@@ -0,0 +1,40 @@
+"use client";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
+import { useAccount, useSwitchChain } from "wagmi";
+
+export const Account = () => {
+  const { isConnected, isReconnecting, chain } = useAccount();
+  const { chains, switchChain } = useSwitchChain();
+  const { openConnectModal, connectModalOpen } = useConnectModal();
+
+  if (!isConnected)
+    return (
+      <button
+        className="italic hover:underline focus:outline-none"
+        onClick={openConnectModal}
+      >
+        Connect
+      </button>
+    );
+
+  if (connectModalOpen) return <p className="animate-spin">⧗</p>;
+
+  if (isReconnecting) return <p>Reconnecting...</p>;
+
+  return (
+    <p>
+      Connected to{" "}
+      <select
+        defaultValue={chain?.id}
+        className="text-black"
+        onChange={(e) => switchChain({ chainId: Number(e.target.value) })}
+      >
+        {chains.map((chain) => (
+          <option key={chain.id} value={chain.id}>
+            {chain.name}
+          </option>
+        ))}
+      </select>
+    </p>
+  );
+};
diff --git a/ui/components/header.tsx b/ui/components/header.tsx
@@ -0,0 +1,11 @@
+import { Account } from "./account";
+
+export const Header = () => {
+  return (
+    <div className="mb-3">
+      <p>Nani Intents Shell {"[ Version 1.0.0 ]"}</p>
+      <p className="mb-2">(c) 2024 Nani Kotoba DAO LLC. All rights reserved.</p>
+      <Account />
+    </div>
+  );
+};
diff --git a/ui/pages/_app.tsx → ui/components/providers.tsx b/ui/pages/_app.tsx → ui/components/providers.tsx
@@ -1,17 +1,14 @@
-import "../styles/globals.css";
-import "@rainbow-me/rainbowkit/styles.css";
-import type { AppProps } from "next/app";
+"use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
-import {
-  mainnet,
-  sepolia,
-} from "wagmi/chains";
+import { mainnet, sepolia } from "wagmi/chains";
 import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { siteConfig } from "@/lib/site";
 
 const config = getDefaultConfig({
-  appName: "NANI Intents Engine",
+  appName: siteConfig.name, 
+  appDescription: siteConfig.description,
   projectId: process.env.NEXT_PUBLIC_WC_ID!,
   chains: [
     mainnet,
@@ -22,16 +19,12 @@ const config = getDefaultConfig({
 
 const client = new QueryClient();
 
-function MyApp({ Component, pageProps }: AppProps) {
+export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={client}>
-        <RainbowKitProvider>
-          <Component {...pageProps} />
-        </RainbowKitProvider>
+        <RainbowKitProvider>{children}</RainbowKitProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );
 }
-
-export default MyApp;
diff --git a/ui/components/shell-history.tsx b/ui/components/shell-history.tsx
@@ -0,0 +1,15 @@
+'use client'
+import useShellStore from "@/lib/use-shell-store"
+
+export const ShellHistory = () => {
+    const history = useShellStore(state => state.history)
+
+    return (
+        <div>
+            {history.map((line, i) => (
+                <div className="mt-1" key={i}>{line}</div>
+            ))}
+        </div>
+    )
+}
+