Skip to content

Commit 250db26

Browse files
leduyhien152leduyhien152
committed
Merge branch 'develop' into preview
2 parents d144547 + e87f0f0 commit 250db26

30 files changed

+909
-487
lines changed

‎app/[server]/nft/page.tsx

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
"use client";
22

33
import { Footer } from "@/components/footer";
4-
import { LoginPopover } from "@/components/login-popover";
5-
import { Logo } from "@/components/logo";
4+
import { Header } from "@/components/header/header";
65
import { NFTList } from "@/components/nft/nft-list";
7-
import ProfileDropdown from "@/components/profile-dropdown";
8-
import { Button, Separator, Table, TopBar, Typography } from "@mochi-ui/core";
6+
import { Button, Separator, Typography } from "@mochi-ui/core";
97
import { ArrowTopRightLine } from "@mochi-ui/icons";
108
import { useLoginWidget } from "@mochi-web3/login-widget";
119
import Image from "next/image";
@@ -176,14 +174,9 @@ const NFT = () => {
176174
};
177175

178176
export default function Page() {
179-
const { isLoggedIn } = useLoginWidget();
180-
181177
return (
182178
<main>
183-
<TopBar
184-
leftSlot={<Logo />}
185-
rightSlot={!isLoggedIn ? <LoginPopover /> : <ProfileDropdown />}
186-
/>
179+
<Header />
187180
<Suspense>
188181
<NFT />
189182
</Suspense>

‎app/[server]/page.tsx

Lines changed: 85 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,68 @@
11
"use client";
22

33
import { Footer } from "@/components/footer";
4-
import { LoginPopover } from "@/components/login-popover";
5-
import { Logo } from "@/components/logo";
6-
import ProfileDropdown from "@/components/profile-dropdown";
7-
import { Button, IconButton, TopBar, Typography } from "@mochi-ui/core";
4+
import { Button, IconButton, Typography } from "@mochi-ui/core";
85
import { EyeHiddenSolid, EyeShowSolid } from "@mochi-ui/icons";
96
import { useLoginWidget } from "@mochi-web3/login-widget";
10-
import Image from "next/image";
117
import { Suspense, useEffect, useState } from "react";
128
import { FlexibleStakingCard } from "@/components/overview/FlexibleStakingCard";
139
import { FixedStakingCard } from "@/components/overview/FixedStakingCard";
1410
import { NFTCard } from "@/components/overview/NFTCard";
1511
import { useFlexibleStaking } from "@/store/flexible-staking";
1612
import { utils } from "@consolelabs/mochi-formatter";
1713
import { useTokenStaking } from "@/store/token-staking";
14+
import { formatUnits, parseUnits } from "ethers/lib/utils";
15+
import clsx from "clsx";
16+
import { TokenImage } from "@/components/token-image";
17+
import { Header } from "@/components/header/header";
1818

1919
const Overview = () => {
2020
const { isLoggedIn } = useLoginWidget();
21-
const [showInfo, setShowInfo] = useState(true);
22-
const { balance, stakedAmount, totalEarnedRewards, tokenPrice } =
23-
useFlexibleStaking();
24-
const { fetchStakingTokens } = useTokenStaking();
21+
const { stakingPools, fetchStakingPools } = useTokenStaking();
22+
const {
23+
balance,
24+
stakedAmount,
25+
totalEarnedRewards,
26+
stakingToken,
27+
rewardToken,
28+
} = useFlexibleStaking();
29+
const [showInfo, setShowInfo] = useState(false);
2530

2631
useEffect(() => {
27-
fetchStakingTokens();
28-
}, [fetchStakingTokens]);
32+
fetchStakingPools();
33+
}, [fetchStakingPools]);
34+
35+
useEffect(() => {
36+
if (!!balance && !showInfo) {
37+
setShowInfo(true);
38+
}
39+
}, [balance, showInfo]);
2940

3041
return (
3142
<div className="overflow-y-auto h-[calc(100vh-56px)]">
3243
<div className="max-w-6xl pt-12 pb-16 px-4 mx-auto space-y-14">
3344
<div className="flex gap-8 flex-col lg:flex-row items-center lg:items-start">
34-
{isLoggedIn ? (
45+
{!isLoggedIn ? (
46+
<Typography level="h3" fontWeight="lg" className="flex-1 pb-3">
47+
Log in to see your available assets to stake
48+
</Typography>
49+
) : balance.isZero() ? (
50+
<Typography level="h3" fontWeight="lg" className="flex-1 pb-3">
51+
You don&apos;t have available assets to stake in your wallet.
52+
</Typography>
53+
) : (
3554
<Typography level="h3" fontWeight="lg" className="flex-1">
3655
You have{" "}
3756
<span className="text-primary-solid">
38-
{showInfo ? utils.formatTokenDigit(balance) : "*****"}
39-
</span>{" "}
40-
ICY and{" "}
41-
<span className="text-danger-solid">
42-
{showInfo ? utils.formatTokenDigit(0) : "*****"}
43-
</span>{" "}
44-
DFG and{" "}
45-
<span className="text-success-solid">
46-
{utils.formatTokenDigit(0)}
57+
{showInfo
58+
? utils.formatTokenDigit(
59+
formatUnits(balance, stakingToken?.token_decimal)
60+
)
61+
: "*****"}
4762
</span>{" "}
48-
assets across <span className="text-secondary-solid">1</span>{" "}
49-
networks available to stake.
50-
</Typography>
51-
) : (
52-
<Typography level="h3" fontWeight="lg" className="flex-1 pb-3">
53-
Log in to see your available assets to stake
63+
{stakingToken?.token_symbol} across{" "}
64+
<span className="text-secondary-solid">1</span> networks available
65+
to stake.
5466
</Typography>
5567
)}
5668
{isLoggedIn && (
@@ -88,13 +100,28 @@ const Overview = () => {
88100
</Typography>
89101
<Typography level="h6" fontWeight="lg">
90102
{showInfo
91-
? utils.formatUsdDigit(stakedAmount * tokenPrice)
103+
? utils.formatUsdDigit(
104+
formatUnits(
105+
stakedAmount
106+
.mul(
107+
parseUnits(
108+
String(stakingToken?.token_price || 1)
109+
)
110+
)
111+
.div(parseUnits("1")),
112+
stakingToken?.token_decimal
113+
)
114+
)
92115
: "*********"}
93116
</Typography>
94117
</div>
95118
<div className="flex items-center space-x-1 ml-2">
96-
<Image src="/ICY.png" alt="icy" width={20} height={20} />
97-
<Image src="/DFG.png" alt="dfg" width={20} height={20} />
119+
{stakingPools.map((each) => (
120+
<TokenImage
121+
key={each.guild_id}
122+
symbol={each.staking_token.token_symbol}
123+
/>
124+
))}
98125
</div>
99126
</div>
100127
<div className="grid grid-cols-2 gap-6 items-center py-3">
@@ -104,7 +131,18 @@ const Overview = () => {
104131
</Typography>
105132
<Typography level="h6" fontWeight="lg" color="success">
106133
{showInfo
107-
? utils.formatUsdDigit(totalEarnedRewards * tokenPrice)
134+
? utils.formatUsdDigit(
135+
formatUnits(
136+
totalEarnedRewards
137+
.mul(
138+
parseUnits(
139+
String(rewardToken?.token_price || 1)
140+
)
141+
)
142+
.div(parseUnits("1")),
143+
rewardToken?.token_decimal
144+
)
145+
)
108146
: "********"}
109147
</Typography>
110148
</div>
@@ -120,10 +158,21 @@ const Overview = () => {
120158
</div>
121159
)}
122160
</div>
123-
<div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-3 w-fit mx-auto gap-4 md:[&>*]:col-span-2 md:[&>*:last-child]:col-start-2 lg:[&>*]:col-span-1 lg:[&>*:last-child]:col-start-auto">
124-
<FlexibleStakingCard hidden={isLoggedIn && !showInfo} />
125-
<FixedStakingCard hidden={isLoggedIn && !showInfo} />
126-
<NFTCard hidden={isLoggedIn && !showInfo} />
161+
<div
162+
className={clsx("grid grid-cols-1 mx-auto gap-4", {
163+
"md:grid-cols-2": stakingPools.length >= 2,
164+
"lg:grid-cols-3": stakingPools.length >= 3,
165+
})}
166+
>
167+
{stakingPools.some((each) => each.type === "flexible") && (
168+
<FlexibleStakingCard hidden={isLoggedIn && !showInfo} />
169+
)}
170+
{stakingPools.some((each) => each.type === "fixed") && (
171+
<FixedStakingCard hidden={isLoggedIn && !showInfo} />
172+
)}
173+
{stakingPools.some((each) => each.type === "nft") && (
174+
<NFTCard hidden={isLoggedIn && !showInfo} />
175+
)}
127176
</div>
128177
</div>
129178
<Footer />
@@ -132,14 +181,9 @@ const Overview = () => {
132181
};
133182

134183
export default function Page() {
135-
const { isLoggedIn } = useLoginWidget();
136-
137184
return (
138185
<main>
139-
<TopBar
140-
leftSlot={<Logo />}
141-
rightSlot={!isLoggedIn ? <LoginPopover /> : <ProfileDropdown />}
142-
/>
186+
<Header />
143187
<Suspense>
144188
<Overview />
145189
</Suspense>

‎app/auth/github-successfully/page.tsx

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
"use client";
22

3-
import { LoginPopover } from "@/components/login-popover";
4-
import { Logo } from "@/components/logo";
5-
import ProfileDropdown from "@/components/profile-dropdown";
6-
import { TopBar, Typography } from "@mochi-ui/core";
7-
import { useLoginWidget } from "@mochi-web3/login-widget";
83
import { CheckCircleHalfColoredLine } from "@mochi-ui/icons";
94
import { Suspense } from "react";
105
import { useSearchParams } from "next/navigation";
6+
import { Header } from "@/components/header/header";
117

128
const Auth = () => {
139
const searchParams = useSearchParams();
@@ -29,14 +25,9 @@ const Auth = () => {
2925
};
3026

3127
export default function Page() {
32-
const { isLoggedIn } = useLoginWidget();
33-
3428
return (
3529
<main>
36-
<TopBar
37-
leftSlot={<Logo />}
38-
rightSlot={!isLoggedIn ? <LoginPopover /> : <ProfileDropdown />}
39-
/>
30+
<Header />
4031
<Suspense>
4132
<Auth />
4233
</Suspense>

‎components/header/header.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { TopBar } from "@mochi-ui/core";
2+
import { LeftSlot } from "./left-slot";
3+
import { RightSlot } from "./right-slot";
4+
5+
export const Header = () => {
6+
return <TopBar leftSlot={<LeftSlot />} rightSlot={<RightSlot />} />;
7+
};

‎components/header/left-slot.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Button, Typography } from "@mochi-ui/core";
2+
import { Logo } from "../logo";
3+
import { DocumentStarSolid, SwapCircleSolid } from "@mochi-ui/icons";
4+
5+
export const LeftSlot = () => {
6+
return (
7+
<div className="flex items-center">
8+
<Logo />
9+
<Button variant="link" color="neutral" className="ml-7">
10+
<SwapCircleSolid className="w-4 h-4 text-text-icon-secondary" />
11+
<Typography level="p8">Swap</Typography>
12+
</Button>
13+
<Button variant="link" color="neutral">
14+
<DocumentStarSolid className="w-4 h-4 text-text-icon-secondary" />
15+
<Typography level="p8">Take a look around</Typography>
16+
</Button>
17+
</div>
18+
);
19+
};

‎components/header/right-slot.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { IconButton } from "@mochi-ui/core";
2+
import { BellSolid } from "@mochi-ui/icons";
3+
import { useLoginWidget } from "@mochi-web3/login-widget";
4+
import { LoginPopover } from "../login-popover";
5+
import ProfileDropdown from "../profile-dropdown";
6+
7+
export const RightSlot = () => {
8+
const { isLoggedIn } = useLoginWidget();
9+
10+
if (!isLoggedIn) {
11+
return <LoginPopover />;
12+
}
13+
14+
return (
15+
<div className="flex items-center space-x-3">
16+
<IconButton
17+
label="notification"
18+
variant="outline"
19+
color="neutral"
20+
className="!p-1.5"
21+
>
22+
<BellSolid className="w-5 h-5" />
23+
</IconButton>
24+
<ProfileDropdown />
25+
</div>
26+
);
27+
};

‎components/logo.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { ROUTES } from "@/constants/routes";
2+
import { Typography } from "@mochi-ui/core";
23
import Link from "next/link";
34

45
export const Logo = () => {
56
return (
6-
<Link href={ROUTES.HOME}>
7+
<Link href={ROUTES.HOME} className="flex items-center space-x-2">
78
<svg
89
width="32"
910
height="32"
@@ -31,6 +32,14 @@ export const Logo = () => {
3132
/>
3233
</defs>
3334
</svg>
35+
<span className="flex items-center">
36+
<Typography level="p5" className="uppercase font-black">
37+
tono
38+
</Typography>
39+
<Typography level="p5" className="font-black text-[#FFC500]">
40+
.
41+
</Typography>
42+
</span>
3443
</Link>
3544
);
3645
};

‎components/overview/Card.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const Card = (props: Props) => {
4242
return (
4343
<div
4444
className={clsx(
45-
"rounded-2xl relative bg-background-surface flex flex-col",
45+
"rounded-2xl relative bg-background-surface flex flex-col w-full max-w-sm justify-self-center",
4646
isBoosting
4747
? "border-2 border-transparent bg-clip-padding before:absolute before:z-[-1] before:inset-0 before:-m-0.5 before:bg-gradient-to-br before:from-[#1570EF] before:to-[#F00C88] before:rounded-2xl"
4848
: "border border-neutral-outline-border p-[1px]"

0 commit comments

Comments
 (0)