From 8c5398455512d1b202c86d42a5dbe3b966a5ae08 Mon Sep 17 00:00:00 2001 From: Hien Le Date: Tue, 19 Mar 2024 10:41:49 +0700 Subject: [PATCH] feat: overview --- app/page.tsx | 339 +++++++++++++++++++++++++++++++- components/logo.tsx | 59 +++--- components/profile-dropdown.tsx | 18 +- constants/routes.ts | 3 + package.json | 1 + pnpm-lock.yaml | 10 + tailwind.config.ts | 2 + 7 files changed, 399 insertions(+), 33 deletions(-) create mode 100644 constants/routes.ts diff --git a/app/page.tsx b/app/page.tsx index 3e74a4f..18b9081 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,325 @@ export default function Home() { leftSlot={} rightSlot={!isLoggedIn ? : } /> +
+
+
+ {isLoggedIn ? ( + + You have{" "} + + {showInfo ? 513.24 : "*****"} + {" "} + ICY and{" "} + + {showInfo ? 1478.31 : "*****"} + {" "} + DFG and 2 assets + across 1 networks + available to stake. + + ) : ( + + Log in to see your available assets to stake + + )} + {isLoggedIn && ( +
+
+
+ + 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 + + + {isLoggedIn ? (showInfo ? "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 + + + {isLoggedIn ? (showInfo ? "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 + + + {isLoggedIn ? (showInfo ? "0" : "*****") : "--"} + +
+ +
+ + NFT staking + + + {isLoggedIn ? (showInfo ? "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..92b5554 100644 --- a/components/profile-dropdown.tsx +++ b/components/profile-dropdown.tsx @@ -10,10 +10,11 @@ import { DropdownMenuPortal, } from "@mochi-ui/core"; import { useLoginWidget } from "@mochi-web3/login-widget"; -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 +23,8 @@ export default function ProfileDropdown({ children?: ReactNode; className?: string; }) { - const { isLoggedIn, profile } = useLoginWidget(); + const { isLoggedIn, profile, logout } = useLoginWidget(); + const { push } = useRouter(); let triggerRender = null; if (children) { @@ -56,9 +58,15 @@ export default function ProfileDropdown({ bottom: 32, }} > - - Logout - + { + logout(); + push(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: "/", +}; diff --git a/package.json b/package.json index 0590293..81160ee 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "@consolelabs/mochi-formatter": "^20.0.5", "@mochi-ui/core": "^0.13.4", + "@mochi-ui/icons": "^0.7.4", "@mochi-ui/theme": "^0.17.0", "@mochi-web3/login-widget": "^0.2.11", "@radix-ui/react-slider": "^1.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 10e270c..323c076 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: '@mochi-ui/core': specifier: ^0.13.4 version: 0.13.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0)(tailwindcss@3.3.0) + '@mochi-ui/icons': + specifier: ^0.7.4 + version: 0.7.4(react-dom@18.0.0)(react@18.0.0) '@mochi-ui/theme': specifier: ^0.17.0 version: 0.17.0(tailwindcss@3.3.0) @@ -278,6 +281,7 @@ packages: /@emotion/memoize@0.7.4: resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} + requiresBuild: true dev: false optional: true @@ -2058,6 +2062,7 @@ packages: dependencies: is-glob: 4.0.3 micromatch: 4.0.5 + napi-wasm: 1.1.0 dev: false bundledDependencies: - napi-wasm @@ -7742,6 +7747,10 @@ packages: hasBin: true dev: false + /napi-wasm@1.1.0: + resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==} + dev: false + /natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true @@ -7839,6 +7848,7 @@ packages: /node-gyp-build@4.8.0: resolution: {integrity: sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==} hasBin: true + requiresBuild: true dev: false /node-releases@2.0.14: diff --git a/tailwind.config.ts b/tailwind.config.ts index 258aa43..ac1f84a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,6 +5,8 @@ import animate from "tailwindcss-animate"; /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./node_modules/@mochi-ui/theme/dist/components/**/*.{js,jsx,ts,tsx}", + "./app/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", ], plugins: [mochiui(), animate], };