Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: homepage done #45

Merged
merged 1 commit into from
Nov 23, 2023
+606 −284
Merged

feat: homepage done #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 0 additions & 73 deletions front/src/app/api/users/[id]/txs/route.ts
View file
Open in desktop

This file was deleted.

29 changes: 13 additions & 16 deletions front/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions front/src/components/Address/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
2 changes: 1 addition & 1 deletion front/src/components/Balance/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
72 changes: 24 additions & 48 deletions front/src/components/History/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
11 changes: 7 additions & 4 deletions front/src/components/HomePage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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>
);
Expand Down
75 changes: 75 additions & 0 deletions front/src/components/LogoAnimatedLight/index.tsx
View file
Open in desktop

Large diffs are not rendered by default.

Loading