feat: various UI improvements (#53)

passkeys-4337 · Nov 27, 2023 · 475c40c · 475c40c
1 parent dfb30f7
commit 475c40c
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 25 deletions.
diff --git a/front/src/app/api/users/[id]/route.ts b/front/src/app/api/users/[id]/route.ts
@@ -16,8 +16,5 @@ export async function GET(_req: Request, { params }: { params: { id: Hex } }) {
   });
 
   const balance = await PUBLIC_CLIENT.getBalance({ address: user.account });
-
-  console.log("balance", balance);
-
   return Response.json(JSON.parse(stringify({ ...user, id: toHex(user.id), balance })));
 }
diff --git a/front/src/app/api/users/save/route.ts b/front/src/app/api/users/save/route.ts
@@ -38,17 +38,6 @@ export async function POST(req: Request) {
     args: [pubKey],
   });
 
-  // await PUBLIC_CLIENT.waitForTransactionReceipt({ hash });
-
-  // const createdUser = await PUBLIC_CLIENT.readContract({
-  //   address: process.env.NEXT_PUBLIC_FACTORY_CONTRACT_ADDRESS as Hex,
-  //   abi: FACTORY_ABI,
-  //   functionName: "getUser",
-  //   args: [BigInt(id)],
-  // });
-
-  // send 1 wei to the user
-  // so that anyone can send a transaction to the user's smart wallet
   await walletClient.sendTransaction({
     to: smartWalletAddress,
     value: BigInt(1),

diff --git a/front/src/app/favicon.ico b/front/src/app/favicon.ico
diff --git a/front/src/app/layout.tsx b/front/src/app/layout.tsx
@@ -11,8 +11,9 @@ import { Metadata } from "next";
 import { ModalOnWCEvent } from "@/libs/wallet-connect/ModalOnWCEvent";
 
 export const metadata: Metadata = {
-  title: "Smart Wallet",
-  description: "Passkeys X ERC-4337",
+  title: "Smart Wallet - ERC-4337 x Passkeys",
+  description:
+    "Simple implementation of an ERC-4337 contract wallet controlled by Passkeys to enhance user experience and self-custodian private keys security.",
   viewport: {
     width: "device-width",
     height: "device-height",

diff --git a/front/src/components/SettingsPage/index.tsx b/front/src/components/SettingsPage/index.tsx
@@ -36,7 +36,7 @@ export default function SettingsPage() {
           Settings
         </Heading>
         <Flex direction="column" width={"100%"} align={"start"} gap={"2"}>
-          <Text>On Base Goerli network only:</Text>
+          <Text>On Sepolia testnet only:</Text>
           <Flex style={{ width: "100%" }} align={"center"} gap="2" justify={"between"}>
             <Tooltip content="Copied!" open={isCopied}>
               <Button

diff --git a/front/src/components/TopBar/index.tsx b/front/src/components/TopBar/index.tsx
@@ -1,17 +1,26 @@
 import { GearIcon } from "@radix-ui/react-icons";
-import { Flex, IconButton } from "@radix-ui/themes";
+import { Flex, IconButton, Text } from "@radix-ui/themes";
 import Address from "../Address";
 import Link from "next/link";
 
 export default function TopBar() {
   return (
-    <Flex width="100%" justify="between" align="center">
-      <Address style={{ alignSelf: "center" }} />
+    <Flex width="100%" justify="between" align="center" style={{ position: "relative" }}>
+      <Flex gap="2" align={"center"}>
+        <Address style={{ alignSelf: "center" }} />
+      </Flex>
+
       <Link href={"/settings"}>
         <IconButton variant="soft" size={"3"}>
           <GearIcon />
         </IconButton>
       </Link>
+      <Text
+        size="1"
+        style={{ color: "var(--gray-6)", position: "absolute", top: "2.5rem", left: "1.1rem" }}
+      >
+        on Sepolia testnet
+      </Text>
     </Flex>
   );
 }
diff --git a/front/src/providers/BalanceProvider/index.tsx b/front/src/providers/BalanceProvider/index.tsx
@@ -7,7 +7,7 @@ import { Hex, formatEther, zeroAddress } from "viem";
 
 function useBalanceHook() {
   // balance in usd
-  const [balance, setBalance] = useState<string>("0.00");
+  const [balance, setBalance] = useState<string>("--.--");
   const [increment, setIncrement] = useState<number>(0);
 
   const { me } = useMe();
@@ -18,8 +18,6 @@ function useBalanceHook() {
       setBalance("0.00");
       return;
     }
-
-    console.log(user.balance);
     const priceData = await fetch("/api/price?ids=ethereum&currencies=usd");
     const price: number = Math.trunc((await priceData.json()).ethereum.usd * 100);
     const balance = formatEther((BigInt(user.balance) * BigInt(price)) / BigInt(100));
@@ -30,7 +28,7 @@ function useBalanceHook() {
     setIncrement((prev) => prev + 1);
   }, []);
 
-  let interval = useRef<any>(null);
+  let interval = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     if (!me?.keyId) return;
@@ -41,7 +39,7 @@ function useBalanceHook() {
     }, 3000);
 
     return () => {
-      clearInterval(interval.current);
+      interval.current && clearInterval(interval.current);
     };
   }, [me, getBalance, increment]);