Skip to content
This repository was archived by the owner on Sep 8, 2025. It is now read-only.

Commit 766a70d

Browse files
jonyburjonybur
authored
feat: restores the navbar, improvements to tabs (#1380)
1 parent 62c7989 commit 766a70d

File tree

7 files changed

+114
-73
lines changed

7 files changed

+114
-73
lines changed

‎src/ui/baby/layout.tsx‎

Lines changed: 92 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,112 @@
1-
import { Outlet } from "react-router";
1+
import { useWalletConnect } from "@babylonlabs-io/wallet-connector";
2+
import { useEffect, useState } from "react";
23

34
import { DelegationState } from "@/ui/baby/state/DelegationState";
45
import { RewardState } from "@/ui/baby/state/RewardState";
56
import { StakingState } from "@/ui/baby/state/StakingState";
67
import { ValidatorState } from "@/ui/baby/state/ValidatorState";
78
import { AuthGuard } from "@/ui/common/components/Common/AuthGuard";
9+
import { Container } from "@/ui/common/components/Container/Container";
810
import { Content } from "@/ui/common/components/Content/Content";
9-
import { Nav, NavItem } from "@/ui/common/components/Nav";
11+
import { Section } from "@/ui/common/components/Section/Section";
12+
import { Tabs } from "@/ui/common/components/Tabs";
13+
import { useHealthCheck } from "@/ui/common/hooks/useHealthCheck";
14+
15+
import { BabyActivityList } from "./components/ActivityList";
16+
import { RewardCard } from "./components/RewardCard";
17+
import { RewardsPreviewModal } from "./components/RewardPreviewModal";
18+
import { useRewardState } from "./state/RewardState";
19+
import StakingForm from "./widgets/StakingForm";
20+
21+
type TabId = "stake" | "activity" | "rewards";
1022

1123
export default function BabyLayout() {
24+
const [activeTab, setActiveTab] = useState<TabId>("stake");
25+
const { connected } = useWalletConnect();
26+
const { isGeoBlocked, isLoading } = useHealthCheck();
27+
const isConnected = connected && !isGeoBlocked && !isLoading;
28+
29+
const {
30+
showClaimModal,
31+
closeClaimModal,
32+
claimAll,
33+
loading: rewardLoading,
34+
totalReward,
35+
rewards,
36+
} = useRewardState();
37+
38+
useEffect(() => {
39+
if (!connected) {
40+
setActiveTab("stake");
41+
}
42+
}, [connected]);
43+
44+
useEffect(() => {
45+
if (isGeoBlocked && (activeTab === "activity" || activeTab === "rewards")) {
46+
setActiveTab("stake");
47+
}
48+
}, [isGeoBlocked, activeTab]);
49+
50+
const tabItems = [
51+
{
52+
id: "stake",
53+
label: "Stake",
54+
content: <StakingForm />,
55+
},
56+
...(isConnected
57+
? [
58+
{
59+
id: "activity",
60+
label: "Activity",
61+
content: (
62+
<Section title="Activity" titleClassName="md:text-[1.25rem]">
63+
<BabyActivityList />
64+
</Section>
65+
),
66+
},
67+
{
68+
id: "rewards",
69+
label: "Rewards",
70+
content: (
71+
<Section title="Rewards" titleClassName="md:text-[1.25rem]">
72+
<div className="h-[500px]">
73+
<RewardCard />
74+
<RewardsPreviewModal
75+
open={showClaimModal}
76+
processing={rewardLoading}
77+
title="Claim Rewards"
78+
totalReward={totalReward}
79+
rewards={rewards}
80+
onClose={closeClaimModal}
81+
onProceed={claimAll}
82+
/>
83+
</div>
84+
</Section>
85+
),
86+
},
87+
]
88+
: []),
89+
];
90+
1291
return (
1392
<StakingState>
1493
<ValidatorState>
1594
<DelegationState>
1695
<RewardState>
1796
<Content>
1897
<AuthGuard>
19-
<Nav>
20-
<NavItem title="Stake" to="/baby/staking" />
21-
<NavItem title="Activity" to="/baby/activities" />
22-
<NavItem title="Rewards" to="/baby/rewards" />
23-
</Nav>
98+
<Container
99+
as="main"
100+
className="flex flex-col gap-[3rem] pb-16 max-w-[760px] mx-auto flex-1"
101+
>
102+
<Tabs
103+
items={tabItems}
104+
defaultActiveTab="stake"
105+
activeTab={activeTab}
106+
onTabChange={(tabId) => setActiveTab(tabId as TabId)}
107+
/>
108+
</Container>
24109
</AuthGuard>
25-
26-
<div className="mt-10">
27-
<Outlet />
28-
</div>
29110
</Content>
30111
</RewardState>
31112
</DelegationState>

‎src/ui/baby/widgets/Activities/index.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/ui/baby/widgets/Rewards/index.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/ui/common/components/Header/Header.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { useWalletConnect } from "@babylonlabs-io/wallet-connector";
22

33
import { Container } from "@/ui/common/components/Container/Container";
4+
import { Nav, NavItem } from "@/ui/common/components/Nav";
45
import { useAppState } from "@/ui/common/state";
6+
import FF from "@/ui/common/utils/FeatureFlagService";
57

68
import { SmallLogo } from "../Logo/SmallLogo";
79
import { Connect } from "../Wallet/Connect";
@@ -12,8 +14,19 @@ export const Header = () => {
1214

1315
return (
1416
<header className="mb-20">
15-
<Container className="h-20 flex items-center justify-between">
16-
<SmallLogo />
17+
<Container className="h-20 flex items-center justify-between relative">
18+
<div className="flex items-center">
19+
<SmallLogo />
20+
</div>
21+
22+
<div className="absolute left-1/2 transform -translate-x-1/2">
23+
<Nav>
24+
<NavItem title="BTC Staking" to="/btc" />
25+
{FF.IsBabyStakingEnabled && (
26+
<NavItem title="BABY Staking" to="/baby" />
27+
)}
28+
</Nav>
29+
</div>
1730

1831
<div className="flex items-center gap-4">
1932
<Connect loading={loading} onConnect={open} />

‎src/ui/common/components/Nav/Nav.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,7 @@ interface NavProps {
55
}
66

77
export const Nav = ({ children }: NavProps) => {
8-
return <nav className="flex gap-6 items-center">{children}</nav>;
8+
return (
9+
<nav className="flex gap-6 justify-center items-center">{children}</nav>
10+
);
911
};

‎src/ui/common/components/Nav/NavItem.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { NavLink } from "react-router";
22
import { twJoin } from "tailwind-merge";
33

4-
export interface NavItemProps {
4+
interface NavItemProps {
55
title: string;
66
to: string;
77
}
@@ -12,8 +12,8 @@ export const NavItem = ({ title, to }: NavItemProps) => {
1212
to={to}
1313
className={({ isActive }) =>
1414
twJoin(
15-
"px-4 py-2 rounded transition-colors duration-200 text-primary",
16-
isActive ? "bg-secondary-highlight" : "bg-transparent",
15+
"w-32 h-10 text-center whitespace-nowrap flex items-center justify-center",
16+
isActive ? "text-accent-primary" : "text-accent-secondary",
1717
)
1818
}
1919
>

‎src/ui/router.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import { Navigate, Route, Routes } from "react-router";
22

33
import BabyLayout from "./baby/layout";
4-
import BabyActivities from "./baby/widgets/Activities";
5-
import BabyRewards from "./baby/widgets/Rewards";
6-
import BabyStakingForm from "./baby/widgets/StakingForm";
74
import Layout from "./common/layout";
85
import NotFound from "./common/not-found";
96
import BTCStaking from "./common/page";
@@ -16,12 +13,7 @@ export const Router = () => {
1613
<Route index element={<Navigate to="btc" replace />} />
1714
<Route path="btc" element={<BTCStaking />} />
1815
{FF.IsBabyStakingEnabled && (
19-
<Route path="baby" element={<BabyLayout />}>
20-
<Route index element={<Navigate to="staking" replace />} />
21-
<Route path="staking" element={<BabyStakingForm />} />
22-
<Route path="rewards" element={<BabyRewards />} />
23-
<Route path="activities" element={<BabyActivities />} />
24-
</Route>
16+
<Route path="baby" element={<BabyLayout />} />
2517
)}
2618
</Route>
2719
<Route path="*" element={<NotFound />} />

0 commit comments

Comments
 (0)