feat: homepage done (#45)

passkeys-4337 · Nov 23, 2023 · bfe18f0 · bfe18f0
1 parent eecab79
commit bfe18f0
Show file tree

Hide file tree

Showing 14 changed files with 606 additions and 284 deletions.
diff --git a/front/src/app/api/users/[id]/txs/route.ts b/front/src/app/api/users/[id]/txs/route.ts
diff --git a/front/src/app/layout.tsx b/front/src/app/layout.tsx
@@ -7,7 +7,6 @@ import { SmartWalletProvider } from "@/libs/smart-wallet/SmartWalletProvider";
 import { ModalProvider } from "@/providers/ModalProvider";
 import { BalanceProvider } from "@/providers/BalanceProvider";
 import { MeProvider } from "@/providers/MeProvider";
-import { TransactionProvider } from "@/providers/TransactionProvider";
 import { Metadata } from "next";
 import { ModalOnWCEvent } from "@/libs/wallet-connect/ModalOnWCEvent";
 
@@ -36,21 +35,19 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en" suppressHydrationWarning>
       <body>
         <MeProvider>
-          <TransactionProvider>
-            <BalanceProvider>
-              <SmartWalletProvider>
-                <WalletConnectProvider>
-                  <ThemeProvider attribute="class">
-                    <Theme style={css} radius={"full"} accentColor={"red"}>
-                      <ModalProvider>
-                        <ModalOnWCEvent>{children}</ModalOnWCEvent>
-                      </ModalProvider>
-                    </Theme>
-                  </ThemeProvider>
-                </WalletConnectProvider>
-              </SmartWalletProvider>
-            </BalanceProvider>
-          </TransactionProvider>
+          <BalanceProvider>
+            <SmartWalletProvider>
+              <WalletConnectProvider>
+                <ThemeProvider attribute="class">
+                  <Theme style={css} radius={"full"} accentColor={"teal"}>
+                    <ModalProvider>
+                      <ModalOnWCEvent>{children}</ModalOnWCEvent>
+                    </ModalProvider>
+                  </Theme>
+                </ThemeProvider>
+              </WalletConnectProvider>
+            </SmartWalletProvider>
+          </BalanceProvider>
         </MeProvider>
       </body>
     </html>

diff --git a/front/src/components/Address/index.tsx b/front/src/components/Address/index.tsx
@@ -25,6 +25,7 @@ export default function Address(props: Props) {
           setTimeout(() => setIsCopied(false), 1000);
         }}
         style={{ ...props.style, display: "flex", alignItems: "center", gap: "6px" }}
+        size={"3"}
       >
         <AvatarIcon fill="red" />
         {me?.account.slice(0, 6)}...{me?.account.slice(-4)}

diff --git a/front/src/components/Balance/index.tsx b/front/src/components/Balance/index.tsx
@@ -5,7 +5,7 @@ import { Flex, Text } from "@radix-ui/themes";
 import { CSSProperties, useEffect } from "react";
 
 const css: CSSProperties = {
-  padding: "2.5rem 0",
+  padding: "4rem 0",
 };
 
 export default function Balance() {

diff --git a/front/src/components/History/index.tsx b/front/src/components/History/index.tsx
@@ -1,57 +1,33 @@
 "use client";
 
-import { useTransaction } from "@/providers/TransactionProvider";
-import { Badge, Box, Button, Flex, Link, Separator, Text } from "@radix-ui/themes";
-import { Log } from "viem";
+import { Button, Flex, Callout } from "@radix-ui/themes";
+import { useMe } from "@/providers/MeProvider";
+import { ArrowRightIcon } from "@radix-ui/react-icons";
+import LogoAnimatedLight from "../LogoAnimatedLight";
 
 export default function History() {
-  const { loading, txs, getLastTxs, unwatchLogs } = useTransaction();
-
-  if (loading)
-    return (
-      <Text style={{ marginTop: "2rem", marginBottom: "4rem" }}>
-        Fetching latest transactions...
-      </Text>
-    );
+  const { me } = useMe();
 
   return (
-    <Flex direction="column" style={{ marginTop: "2rem", marginBottom: "4rem" }}>
-      <Flex direction="row" gap="2" justify="between">
-        <Text size="6" weight="bold">
-          History
-        </Text>
-      </Flex>
-      <Separator my="3" size="4" color="gray" />
-
-      <Flex direction="column" gap="2">
-        {!loading &&
-          Array.isArray(txs) &&
-          txs.map((tx: Log) => {
-            return (
-              <Box key={tx?.blockNumber}>
-                <Flex direction="row" gap="1" justify="between">
-                  <Text size="2">
-                    <Link
-                      href={`https://goerli.basescan.org/tx/${tx.transactionHash}`}
-                      target="_blank"
-                    >
-                      {tx?.transactionHash?.toString().slice(0, 4)}...
-                      {tx?.transactionHash?.toString().slice(-4)}
-                    </Link>
-                  </Text>
-                  <Text size="1">
-                    {(tx as unknown as { args: { status: boolean } }).args.status}
-                  </Text>
-                  {(tx as unknown as { args: { success: boolean } })?.args.success ? (
-                    <Badge color="green">Complete</Badge>
-                  ) : (
-                    <Badge color="red">Failed</Badge>
-                  )}
-                </Flex>
-              </Box>
-            );
-          })}
+    <Callout.Root style={{ marginTop: "var(--space-4)" }}>
+      <LogoAnimatedLight style={{ width: "60%", marginBottom: ".5rem" }} />
+      <Callout.Text>
+        You smart contract wallet is deployed during the first transaction that you make. You can
+        still receive tokens and ETH on your smart contract wallet address in the meantime.
+      </Callout.Text>
+      <Flex direction="row" gap="1" justify="between">
+        <Button
+          size="2"
+          variant="outline"
+          style={{ marginTop: ".3rem" }}
+          onClick={() => {
+            window.open(`https://sepolia.etherscan.io/address/${me?.account}`, "_blank");
+          }}
+        >
+          Browse history on etherscan
+          <ArrowRightIcon />
+        </Button>
       </Flex>
-    </Flex>
+    </Callout.Root>
   );
 }
diff --git a/front/src/components/HomePage/index.tsx b/front/src/components/HomePage/index.tsx
@@ -7,6 +7,7 @@ import Balance from "../Balance";
 import NavBar from "../NavBar";
 import History from "../History";
 import TopBar from "../TopBar";
+import LogoAnimated from "../LogoAnimated";
 
 export default function Home() {
   const { me, isMounted } = useMe();
@@ -15,10 +16,12 @@ export default function Home() {
 
   if (me) {
     return (
-      <Flex direction="column" width="100%">
-        <TopBar />
-        <Balance />
-        <NavBar />
+      <Flex direction="column" width="100%" justify={"between"}>
+        <Flex direction="column" width="100%">
+          <TopBar />
+          <Balance />
+          <NavBar />
+        </Flex>
         <History />
       </Flex>
     );

diff --git a/front/src/components/LogoAnimatedLight/index.tsx b/front/src/components/LogoAnimatedLight/index.tsx