From 9484568378eb7fe80e419d935d469cc01f6d6ccf Mon Sep 17 00:00:00 2001 From: Hien Le Date: Wed, 10 Apr 2024 12:17:23 +0700 Subject: [PATCH] fix: overview render based on api --- app/[server]/nft/page.tsx | 13 +- app/[server]/page.tsx | 126 +++++++---- app/auth/github-successfully/page.tsx | 13 +- components/header/header.tsx | 7 + components/header/left-slot.tsx | 19 ++ components/header/right-slot.tsx | 27 +++ components/logo.tsx | 11 +- components/overview/Card.tsx | 2 +- components/overview/FlexibleStakingCard.tsx | 160 +++++++++----- components/profile-dropdown.tsx | 203 ++++++++++++++++-- .../stake/fixed/fixed-stake-content.tsx | 7 +- .../stake/fixed/fixed-stake-response.tsx | 8 +- .../stake/flexible/flexible-stake-content.tsx | 40 ++-- .../stake/flexible/flexible-stake-modal.tsx | 46 ++-- .../flexible/flexible-stake-response.tsx | 16 +- components/stake/stake-input.tsx | 22 +- components/token-image.tsx | 32 +++ next.config.mjs | 12 +- package.json | 1 + pnpm-lock.yaml | 13 ++ public/svg/exit.svg | 3 + public/svg/hourglass.svg | 6 +- public/svg/rocket-launch.svg | 12 +- services/contracts/Pool.ts | 180 ++++++---------- services/contracts/Token.ts | 64 +++--- store/flexible-staking.ts | 200 +++++++++-------- store/token-staking.ts | 43 ++-- store/wallet.ts | 83 +++++++ utils/number.ts | 13 +- utils/string.ts | 14 ++ 30 files changed, 909 insertions(+), 487 deletions(-) create mode 100644 components/header/header.tsx create mode 100644 components/header/left-slot.tsx create mode 100644 components/header/right-slot.tsx create mode 100644 components/token-image.tsx create mode 100644 public/svg/exit.svg create mode 100644 store/wallet.ts create mode 100644 utils/string.ts diff --git a/app/[server]/nft/page.tsx b/app/[server]/nft/page.tsx index bfc5b37..bac8ac9 100644 --- a/app/[server]/nft/page.tsx +++ b/app/[server]/nft/page.tsx @@ -1,11 +1,9 @@ "use client"; import { Footer } from "@/components/footer"; -import { LoginPopover } from "@/components/login-popover"; -import { Logo } from "@/components/logo"; +import { Header } from "@/components/header/header"; import { NFTList } from "@/components/nft/nft-list"; -import ProfileDropdown from "@/components/profile-dropdown"; -import { Button, Separator, Table, TopBar, Typography } from "@mochi-ui/core"; +import { Button, Separator, Typography } from "@mochi-ui/core"; import { ArrowTopRightLine } from "@mochi-ui/icons"; import { useLoginWidget } from "@mochi-web3/login-widget"; import Image from "next/image"; @@ -176,14 +174,9 @@ const NFT = () => { }; export default function Page() { - const { isLoggedIn } = useLoginWidget(); - return (
- } - rightSlot={!isLoggedIn ? : } - /> +
diff --git a/app/[server]/page.tsx b/app/[server]/page.tsx index b71623b..6cf38a0 100644 --- a/app/[server]/page.tsx +++ b/app/[server]/page.tsx @@ -1,13 +1,9 @@ "use client"; import { Footer } from "@/components/footer"; -import { LoginPopover } from "@/components/login-popover"; -import { Logo } from "@/components/logo"; -import ProfileDropdown from "@/components/profile-dropdown"; -import { Button, IconButton, TopBar, Typography } from "@mochi-ui/core"; +import { Button, IconButton, Typography } from "@mochi-ui/core"; import { EyeHiddenSolid, EyeShowSolid } from "@mochi-ui/icons"; import { useLoginWidget } from "@mochi-web3/login-widget"; -import Image from "next/image"; import { Suspense, useEffect, useState } from "react"; import { FlexibleStakingCard } from "@/components/overview/FlexibleStakingCard"; import { FixedStakingCard } from "@/components/overview/FixedStakingCard"; @@ -15,42 +11,58 @@ import { NFTCard } from "@/components/overview/NFTCard"; import { useFlexibleStaking } from "@/store/flexible-staking"; import { utils } from "@consolelabs/mochi-formatter"; import { useTokenStaking } from "@/store/token-staking"; +import { formatUnits, parseUnits } from "ethers/lib/utils"; +import clsx from "clsx"; +import { TokenImage } from "@/components/token-image"; +import { Header } from "@/components/header/header"; const Overview = () => { const { isLoggedIn } = useLoginWidget(); - const [showInfo, setShowInfo] = useState(true); - const { balance, stakedAmount, totalEarnedRewards, tokenPrice } = - useFlexibleStaking(); - const { fetchStakingTokens } = useTokenStaking(); + const { stakingPools, fetchStakingPools } = useTokenStaking(); + const { + balance, + stakedAmount, + totalEarnedRewards, + stakingToken, + rewardToken, + } = useFlexibleStaking(); + const [showInfo, setShowInfo] = useState(false); useEffect(() => { - fetchStakingTokens(); - }, [fetchStakingTokens]); + fetchStakingPools(); + }, [fetchStakingPools]); + + useEffect(() => { + if (!!balance && !showInfo) { + setShowInfo(true); + } + }, [balance, showInfo]); return (
- {isLoggedIn ? ( + {!isLoggedIn ? ( + + Log in to see your available assets to stake + + ) : balance.isZero() ? ( + + You don't have available assets to stake in your wallet. + + ) : ( You have{" "} - {showInfo ? utils.formatTokenDigit(balance) : "*****"} - {" "} - ICY and{" "} - - {showInfo ? utils.formatTokenDigit(0) : "*****"} - {" "} - DFG and{" "} - - {utils.formatTokenDigit(0)} + {showInfo + ? utils.formatTokenDigit( + formatUnits(balance, stakingToken?.token_decimal) + ) + : "*****"} {" "} - assets across 1{" "} - networks available to stake. - - ) : ( - - Log in to see your available assets to stake + {stakingToken?.token_symbol} across{" "} + 1 networks available + to stake. )} {isLoggedIn && ( @@ -88,13 +100,28 @@ const Overview = () => { {showInfo - ? utils.formatUsdDigit(stakedAmount * tokenPrice) + ? utils.formatUsdDigit( + formatUnits( + stakedAmount + .mul( + parseUnits( + String(stakingToken?.token_price || 1) + ) + ) + .div(parseUnits("1")), + stakingToken?.token_decimal + ) + ) : "*********"}
- icy - dfg + {stakingPools.map((each) => ( + + ))}
@@ -104,7 +131,18 @@ const Overview = () => { {showInfo - ? utils.formatUsdDigit(totalEarnedRewards * tokenPrice) + ? utils.formatUsdDigit( + formatUnits( + totalEarnedRewards + .mul( + parseUnits( + String(rewardToken?.token_price || 1) + ) + ) + .div(parseUnits("1")), + rewardToken?.token_decimal + ) + ) : "********"}
@@ -120,10 +158,21 @@ const Overview = () => {
)} -
-