Skip to content

Commit

Permalink
feat: overview
Browse files Browse the repository at this point in the history
  • Loading branch information
@leduyhien152
leduyhien152 committed Mar 18, 2024
1 parent 1c19498 commit b927c2f
Show file tree
Hide file tree
Showing 4 changed files with 367 additions and 32 deletions.
320 changes: 319 additions & 1 deletion app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,336 @@
import { LoginPopover } from "@/components/login-popover";
import { Logo } from "@/components/logo";
import ProfileDropdown from "@/components/profile-dropdown";
import { TopBar } from "@mochi-ui/core";
import {
Avatar,
Badge,
BadgeIcon,
Button,
IconButton,
Separator,
TopBar,
Typography,
} from "@mochi-ui/core";
import {
Discord,
EyeHiddenSolid,
EyeShowSolid,
WalletSolid,
} from "@mochi-ui/icons";
import { useLoginWidget } from "@mochi-web3/login-widget";
import Link from "next/link";
import { useState } from "react";

export default function Home() {
const { isLoggedIn } = useLoginWidget();
const [showInfo, setShowInfo] = useState(false);

return (
<main>
<TopBar
leftSlot={<Logo />}
rightSlot={!isLoggedIn ? <LoginPopover /> : <ProfileDropdown />}
/>
<div className="max-w-6xl pt-8 pb-16 px-4 mx-auto space-y-14">
<div className="flex gap-8 flex-col lg:flex-row items-center lg:items-start">
<Typography level="h3" fontWeight="lg" className="flex-1">
You have <span className="text-primary-solid">513.24</span> ICY and{" "}
<span className="text-danger-solid">1478.31</span> DFG and{" "}
<span className="text-success-solid">2</span> assets across{" "}
<span className="text-secondary-solid">1</span> networks available
to stake.
</Typography>
<div className="rounded-2xl border border-divider bg-background-level1 p-4 w-96 max-w-full">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-1">
<Typography level="h6" fontWeight="lg">
My Earn
</Typography>
<IconButton
label="Show info"
variant="link"
disabled={!isLoggedIn}
onClick={() => setShowInfo(!showInfo)}
>
{showInfo ? (
<EyeShowSolid className="w-5 h-5 text-text-disabled" />
) : (
<EyeHiddenSolid className="w-5 h-5 text-text-disabled" />
)}
</IconButton>
</div>
<WalletSolid className="w-5 h-5 text-text-icon-primary" />
</div>
<div className="flex items-center justify-between py-3 border-b border-divider">
<div className="space-y-0.5">
<Typography level="p6" className="text-text-tertiary">
Total amount staked
</Typography>
<Typography level="h6" fontWeight="lg">
{showInfo ? "$1,264.32" : "*********"}
</Typography>
</div>
<div className="flex items-center space-x-1 ml-2">
<Avatar src="" className="w-[20px] h-[20px]" />
<Avatar src="" className="w-[20px] h-[20px]" />
</div>
</div>
<div className="grid grid-cols-2 gap-6 items-center py-3">
<div className="space-y-0.5">
<Typography level="p6" className="text-text-tertiary">
Rewards earned
</Typography>
<Typography level="h6" fontWeight="lg" color="success">
{showInfo ? "0" : "********"}
</Typography>
</div>
<div className="space-y-0.5">
<Typography level="p6" className="text-text-tertiary">
NFT staking
</Typography>
<Typography level="h6" fontWeight="lg">
{showInfo ? "0" : "********"}
</Typography>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-fit mx-auto gap-4">
<div className="rounded-2xl border border-divider p-4 space-y-4 max-w-sm flex flex-col">
<Badge
appearance="neutral"
className="border border-neutral-soft-active w-fit"
>
<BadgeIcon>
<Avatar src="" className="w-4 h-4" />
</BadgeIcon>
<Typography level="p5">Solana</Typography>
</Badge>
<div className="text-center">
<Avatar className="w-[72px] h-[72px]" src="" />
</div>
<Typography className="text-xl font-semibold text-center">
ICY
</Typography>
<Typography level="p5" className="flex-1">
Earn competitive returns by staking ICY tokens and NFTs. Fixed
yield is achieved at maturity, but you can exit anytime at its
current market price.
</Typography>
<div className="flex items-center text-center">
<div className="space-y-0.5 flex-1">
<Typography level="p6" className="text-text-tertiary">
Wallet Balance
</Typography>
<Typography level="h7" fontWeight="lg">
513.24
</Typography>
</div>
<Separator orientation="vertical" className="!h-8" />
<div className="space-y-0.5 flex-1">
<Typography level="p6" className="text-text-tertiary">
Token Price
</Typography>
<Typography level="h7" fontWeight="lg">
1 ICY ≈ $1.5
</Typography>
</div>
</div>
<div className="rounded-lg border border-divider bg-background-level1 p-4 space-y-2">
<Typography level="h9" color="primary" className="text-center">
Fixed APR
</Typography>
<div className="flex items-baseline justify-center space-x-1">
<Typography level="h5" fontWeight="lg">
28.7
</Typography>
<Typography level="h7" fontWeight="lg">
%
</Typography>
</div>
</div>
<Button size="lg" className="w-full">
Stake
</Button>
</div>
<div className="rounded-2xl border border-divider p-4 space-y-4 max-w-sm flex flex-col">
<Badge
appearance="neutral"
className="border border-neutral-soft-active w-fit"
>
<BadgeIcon>
<Avatar src="" className="w-4 h-4" />
</BadgeIcon>
<Typography level="p5">Arbitrum</Typography>
</Badge>
<div className="text-center">
<Avatar className="w-[72px] h-[72px]" src="" />
</div>
<Typography className="text-xl font-semibold text-center">
DFG
</Typography>
<Typography level="p5" className="flex-1">
DFG is a tradable and transferable representation of ICY, along
with staking rewards. ICY becomes more valuable over time as you
stake and accumulate DFG rewards.
</Typography>
<div className="flex items-center text-center">
<div className="space-y-0.5 flex-1">
<Typography level="p6" className="text-text-tertiary">
Wallet Balance
</Typography>
<Typography level="h7" fontWeight="lg">
513.24
</Typography>
</div>
<Separator orientation="vertical" className="!h-8" />
<div className="space-y-0.5 flex-1">
<Typography level="p6" className="text-text-tertiary">
Token Price
</Typography>
<Typography level="h7" fontWeight="lg">
1 DFG ≈ $1.5
</Typography>
</div>
</div>
<div className="rounded-lg border border-divider bg-background-level1 p-4 space-y-2">
<Typography level="h9" color="primary" className="text-center">
Est. APR
</Typography>
<div className="flex items-baseline justify-center space-x-1">
<Typography level="h5" fontWeight="lg">
28.7
</Typography>
<Typography level="h7" fontWeight="lg">
%
</Typography>
</div>
</div>
<Button size="lg" className="w-full">
Stake
</Button>
</div>
<div className="rounded-2xl border border-divider p-4 space-y-4 max-w-sm flex flex-col md:col-span-full md:self-center lg:col-span-1 lg:self-auto">
<Badge
appearance="neutral"
className="border border-neutral-soft-active w-fit"
>
<BadgeIcon>
<Avatar src="" className="w-4 h-4" />
</BadgeIcon>
<Typography level="p5">Arbitrum</Typography>
</Badge>
<div className="text-center">
<Avatar className="w-[72px] h-[72px]" src="" />
</div>
<Typography className="text-xl font-semibold text-center">
Dwarves NFT collection
</Typography>
<Typography level="p5" className="flex-1">
The Dwarves NFT collection takes you to the magical world of the
Norse dwarves, where brave warriors, skilled blacksmiths, and
clever inventors live.
</Typography>
<div className="flex items-center text-center">
<div className="space-y-0.5 flex-1">
<Typography level="p6" className="text-text-tertiary">
Your NFT
</Typography>
<Typography level="h7" fontWeight="lg">
0
</Typography>
</div>
<Separator orientation="vertical" className="!h-8" />
<div className="space-y-0.5 flex-1">
<Typography level="p6" className="text-text-tertiary">
NFT staking
</Typography>
<Typography level="h7" fontWeight="lg">
0
</Typography>
</div>
</div>
<div className="rounded-lg border border-divider bg-background-level1 p-4 space-y-2">
<Typography level="h9" color="primary" className="text-center">
Average Booting Attached
</Typography>
<div className="flex items-baseline justify-center space-x-1">
<Typography level="h5" fontWeight="lg">
25
</Typography>
<Typography level="h7" fontWeight="lg">
%
</Typography>
</div>
</div>
<Button size="lg" className="w-full">
Stake
</Button>
</div>
</div>
</div>
<div className="max-w-6xl pt-8 pb-24 px-4 mx-auto space-y-2 flex flex-col items-center">
<Typography level="h4" fontWeight="lg" className="text-center pb-6">
Start earning in 3 steps
</Typography>
{[
{
title: "Connect Discord",
description:
"To check if you're real person, we'd like you to connect your Discord account.",
action: (
<Button>
Connect Social
<Discord className="w-4 h-4" />
</Button>
),
},
{
title: "Connect Wallet",
description:
"Connect your wallet so we can calculate your points based on your onchain activity with DeFi protocols and NFTs on other networks. Use your most active wallet for more points.",
action: (
<Button disabled>
Connect Wallet
<WalletSolid className="w-4 h-4" />
</Button>
),
},
{
title: "Stake ICY",
description: (
<>
Stake ICY to receive DFG and revenue share rewards. Learn more
how to{" "}
<Link href="#" className="border-b border-text-secondary">
earn ICY
</Link>
</>
),
action: <Button disabled>Stake tokens</Button>,
},
].map(({ title, description, action }, index) => (
<div
key={title}
className="rounded-lg border border-divider px-6 py-4 w-full max-w-2xl flex items-center gap-8"
>
<div className="flex-1 space-y-2">
<div className="flex items-center space-x-4">
<div className="text-xs font-semibold w-6 h-6 flex items-center justify-center rounded-full border border-neutral-outline-border">
{index + 1}
</div>
<Typography className="text-xl font-semibold">
{title}
</Typography>
</div>
<Typography level="p5" color="textSecondary">
{description}
</Typography>
</div>
{action}
</div>
))}
</div>
</main>
);
}
59 changes: 32 additions & 27 deletions components/logo.tsx
View file

Large diffs are not rendered by default.

17 changes: 13 additions & 4 deletions components/profile-dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import Link from "next/link";
import { ReactNode } from "react";
import { version as appVersion } from "../package.json";
import { utils } from "@consolelabs/mochi-formatter";
import { useRouter } from "next/navigation";
import { ROUTES } from "@/constants/routes";

export default function ProfileDropdown({
children,
Expand All @@ -22,7 +24,8 @@ export default function ProfileDropdown({
children?: ReactNode;
className?: string;
}) {
const { isLoggedIn, profile } = useLoginWidget();
const { isLoggedIn, profile, logout } = useLoginWidget();
const { push, replace } = useRouter();

let triggerRender = null;
if (children) {
Expand Down Expand Up @@ -56,9 +59,15 @@ export default function ProfileDropdown({
bottom: 32,
}}
>
<Link href="#">
<DropdownMenuItem hasPaddingLeft>Logout</DropdownMenuItem>
</Link>
<DropdownMenuItem
hasPaddingLeft
onClick={() => {
logout();
replace(ROUTES.HOME);
}}
>
Logout
</DropdownMenuItem>
<DropdownMenuSeparator className="hidden lg:flex" />
<DropdownMenuSeparator className="lg:hidden !mt-auto" />
<DropdownMenuLabel className="flex flex-col">
Expand Down
3 changes: 3 additions & 0 deletions constants/routes.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const ROUTES = {
HOME: "/",
};

0 comments on commit b927c2f

Please sign in to comment.