feat: minimal ui

front/src/app/layout.tsx

@@ -29,7 +29,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               <SmartWalletProvider>
                 <WalletConnectProvider>
                   <ThemeProvider attribute="class">
-                    <Theme style={css}>
+                    <Theme style={css} radius={"full"} accentColor={"red"}>
                       <ModalProvider>{children}</ModalProvider>
                     </Theme>
                   </ThemeProvider>

front/src/components/OnBoarding/index.tsx

@@ -1,24 +1,44 @@
-import { WebAuthn } from "@/libs/web-authn/service/web-authn";
 import { useMe } from "@/providers/MeProvider";
-import { ReloadIcon } from "@radix-ui/react-icons";
-import { Button, Flex, Link, TextField } from "@radix-ui/themes";
+import { GitHubLogoIcon, ReloadIcon, SunIcon, MoonIcon } from "@radix-ui/react-icons";
+import {
+  Button,
+  Flex,
+  Heading,
+  Link,
+  TextField,
+  Blockquote,
+  Text,
+  Kbd,
+  Switch,
+} from "@radix-ui/themes";
 import { CSSProperties, useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { useTheme } from "next-themes";
+import ThemeButton from "../ThemeButton";
 
 const css: CSSProperties = {
   flexGrow: 1,
   gap: "1rem",
 };
 
-const cssBtn: CSSProperties = {
-  // opacity: 0,
-  cursor: "pointer",
-  width: "100%",
-  // height: "100%",
-  // background: "transparent",
-  // outline: "none",
-  // border: "none",
-  //position: "absolute",
-};
+const Container = styled(Flex)`
+  position: relative;
+  width: 100%;
+  gap: 2rem;
+  background-color: "red";
+`;
+
+const Hero = styled(Flex)`
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+`;
+
+const Title = styled(Heading)`
+  text-align: center;
+`;
 
 export default function OnBoarding() {
   const [username, setUsername] = useState("");
@@ -28,17 +48,68 @@ export default function OnBoarding() {
 
   if (!createForm) {
     return (
-      <Flex style={css} align="center" justify="center" direction="column">
+      <Container align="center" justify={"between"} direction="column">
+        <ThemeButton
+          style={{
+            position: "absolute",
+            top: "0rem",
+            right: "0rem",
+          }}
+        />
+        <Hero>
+          <Title as="h1" size={"8"}>
+            Smart Wallet
+          </Title>
+          <Link href="https://github.com/passkeys-4337/smart-wallet">
+            <Kbd size={"6"}>
+              <GitHubLogoIcon style={{ marginRight: ".5rem" }} />
+              passkeys-4337
+            </Kbd>
+          </Link>
+        </Hero>
+
         {isLoading && <ReloadIcon className="spinner" />}
-        {!isLoading && <Button onClick={() => get()}> Sign In</Button>}
-        {!isLoading && <Link onClick={() => setCreateForm(true)}>or create a new account</Link>}
-      </Flex>
+        {!isLoading && (
+          <Button style={{ width: "200px" }} variant={"outline"} size={"3"} onClick={() => get()}>
+            SIGN IN
+          </Button>
+        )}
+        <Link onClick={() => !isLoading && setCreateForm(true)} size={"2"}>
+          or create a new account
+        </Link>
+      </Container>
     );
   }
 
   return (
-    <Flex style={css} align="center" justify="center" direction="column">
+    <Container align="center" justify={"between"} direction="column">
+      <ThemeButton
+        style={{
+          position: "absolute",
+          top: "0rem",
+          right: "0rem",
+        }}
+      />
+      <Hero>
+        <Title as="h1" size={"8"}>
+          Smart Wallet
+        </Title>
+        <Link href="https://github.com/passkeys-4337/smart-wallet">
+          <Kbd size={"6"}>
+            <GitHubLogoIcon style={{ marginRight: ".5rem" }} />
+            passkeys-4337
+          </Kbd>
+        </Link>
+      </Hero>
+
       <form
+        style={{
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          alignItems: "center",
+        }}
         onSubmit={(e) => {
           e.preventDefault();
           username && create(username);
@@ -48,15 +119,23 @@ export default function OnBoarding() {
           required
           value={username}
           onChange={(e) => setUsername(e.target.value)}
-          placeholder="account name"
+          placeholder="Name"
           disabled={isLoading}
+          size={"3"}
+          style={{ width: "200px", padding: "0.5rem" }}
         />
-        {!isLoading && <Button type={"submit"}>CREATE</Button>}
+        {!isLoading && (
+          <Button style={{ width: "200px" }} variant={"outline"} size={"3"} type={"submit"}>
+            NEW ACCOUNT
+          </Button>
+        )}
         {isLoading && <ReloadIcon className="spinner" />}
       </form>
       {!isLoading && (
-        <Link onClick={() => setCreateForm(false)}>or sign in to an existing account</Link>
+        <Link onClick={() => setCreateForm(false)} size={"2"}>
+          or sign in to an existing account
+        </Link>
       )}
-    </Flex>
+    </Container>
   );
 }

front/src/components/ThemeButton/index.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { SunIcon, MoonIcon } from "@radix-ui/react-icons";
+import { Button } from "@radix-ui/themes";
+import { useTheme } from "next-themes";
+import { CSSProperties, useEffect, useState } from "react";
+
+type Props = {
+  style?: CSSProperties;
+};
+
+export default function ThemeButton({ style }: Props) {
+  const { theme, setTheme, systemTheme } = useTheme();
+
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return null;
+
+  return (
+    <Button
+      style={style}
+      variant={"soft"}
+      onClick={() => {
+        if (theme === "system") {
+          setTheme(systemTheme === "dark" ? "light" : "dark");
+          return;
+        }
+        if (theme === "dark") {
+          setTheme("light");
+          return;
+        }
+        if (theme === "light") {
+          setTheme("dark");
+          return;
+        }
+      }}
+    >
+      {(theme === "system" && systemTheme === "dark") || theme === "dark" ? (
+        <SunIcon />
+      ) : (
+        <MoonIcon />
+      )}
+    </Button>
+  );
+}

front/src/providers/MeProvider/index.tsx

@@ -17,7 +17,11 @@ export type Me = {
 
 function useMeHook() {
   const [isLoading, setIsLoading] = useState(false);
-  const [me, setMe] = useState<Me | null>(null);
+  const [me, setMe] = useState<Me | null>(
+    typeof window !== "undefined"
+      ? JSON.parse(localStorage.getItem("hocuspocus.me") ?? "null")
+      : null,
+  );
   const [isReturning, setIsReturning] = useState(false);
 
   function disconnect() {