diff --git a/app/page.tsx b/app/page.tsx index 3e74a4f..56d89af 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,11 +3,29 @@ 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 (
@@ -15,6 +33,306 @@ export default function Home() { leftSlot={} rightSlot={!isLoggedIn ? : } /> +
+
+ + You have 513.24 ICY and{" "} + 1478.31 DFG and{" "} + 2 assets across{" "} + 1 networks available + to stake. + +
+
+
+ + My Earn + + setShowInfo(!showInfo)} + > + {showInfo ? ( + + ) : ( + + )} + +
+ +
+
+
+ + Total amount staked + + + {showInfo ? "$1,264.32" : "*********"} + +
+
+ + +
+
+
+
+ + Rewards earned + + + {showInfo ? "0" : "********"} + +
+
+ + NFT staking + + + {showInfo ? "0" : "********"} + +
+
+
+
+
+
+ + + + + Solana + +
+ +
+ + ICY + + + 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. + +
+
+ + Wallet Balance + + + 513.24 + +
+ +
+ + Token Price + + + 1 ICY ≈ $1.5 + +
+
+
+ + Fixed APR + +
+ + 28.7 + + + % + +
+
+ +
+
+ + + + + Arbitrum + +
+ +
+ + DFG + + + 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. + +
+
+ + Wallet Balance + + + 513.24 + +
+ +
+ + Token Price + + + 1 DFG ≈ $1.5 + +
+
+
+ + Est. APR + +
+ + 28.7 + + + % + +
+
+ +
+
+ + + + + Arbitrum + +
+ +
+ + Dwarves NFT collection + + + The Dwarves NFT collection takes you to the magical world of the + Norse dwarves, where brave warriors, skilled blacksmiths, and + clever inventors live. + +
+
+ + Your NFT + + + 0 + +
+ +
+ + NFT staking + + + 0 + +
+
+
+ + Average Booting Attached + +
+ + 25 + + + % + +
+
+ +
+
+
+
+ + Start earning in 3 steps + + {[ + { + title: "Connect Discord", + description: + "To check if you're real person, we'd like you to connect your Discord account.", + action: ( + + ), + }, + { + 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: ( + + ), + }, + { + title: "Stake ICY", + description: ( + <> + Stake ICY to receive DFG and revenue share rewards. Learn more + how to{" "} + + earn ICY + + + ), + action: , + }, + ].map(({ title, description, action }, index) => ( +
+
+
+
+ {index + 1} +
+ + {title} + +
+ + {description} + +
+ {action} +
+ ))} +
); } diff --git a/components/logo.tsx b/components/logo.tsx index d54db11..209d06e 100644 --- a/components/logo.tsx +++ b/components/logo.tsx @@ -1,31 +1,36 @@ +import { ROUTES } from "@/constants/routes"; +import Link from "next/link"; + export const Logo = () => { return ( - - - - - - - - - - + + + + + + + + + + + + ); }; diff --git a/components/profile-dropdown.tsx b/components/profile-dropdown.tsx index 25c891b..2dea150 100644 --- a/components/profile-dropdown.tsx +++ b/components/profile-dropdown.tsx @@ -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, @@ -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) { @@ -56,9 +59,15 @@ export default function ProfileDropdown({ bottom: 32, }} > - - Logout - + { + logout(); + replace(ROUTES.HOME); + }} + > + Logout + diff --git a/constants/routes.ts b/constants/routes.ts new file mode 100644 index 0000000..dd249cc --- /dev/null +++ b/constants/routes.ts @@ -0,0 +1,3 @@ +export const ROUTES = { + HOME: "/", +};