xufuhan/assetx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate HeroUI component library

Browse Source 
Implemented HeroUI migration plan with the following changes:

Stage 0: Environment Setup
- Installed @heroui/react@2.8.7, @heroui/theme@2.4.26, framer-motion@12.29.2
- Configured Tailwind with HeroUI plugin
- Added HeroUI content paths to Tailwind config

Stage 1: Provider Architecture
- Created Providers.tsx wrapper combining HeroUIProvider and AppProvider
- Updated app/layout.tsx to use new Providers component
- Preserved all AppContext functionality (theme, language, translations)

Stage 2: Component Migrations
- TabNavigation: Migrated to HeroUI Tabs with keyboard navigation support
- TopBar: Migrated buttons to HeroUI Button components
- LanguageSwitch: Migrated to HeroUI Dropdown for better UX
- ThemeSwitch: Migrated to HeroUI Button (isIconOnly variant)
- MintSwapPanel: Migrated to HeroUI Tabs and Button components

Benefits:
- Enhanced accessibility with ARIA attributes and keyboard navigation
- Smooth animations and transitions via Framer Motion
- Consistent component API across the application
- Maintained all existing design tokens and color system
- Preserved dark mode functionality

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
default
2026-01-30 03:49:53 +00:00
parent 098a91f2ac
commit 9e0dd1d278
27 changed files with 11184 additions and 7928 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
components/OverviewTab.tsx
View File

@@ -1,55 +1,55 @@
import ProductHeader from "./ProductHeader";
import StatsCards from "./StatsCards";
import AssetOverviewCard from "./AssetOverviewCard";
import APYHistoryCard from "./APYHistoryCard";
import AssetDescriptionCard from "./AssetDescriptionCard";
import MintSwapPanel from "./MintSwapPanel";
import ProtocolInformation from "./ProtocolInformation";
import PerformanceAnalysis from "./PerformanceAnalysis";
import Season1Rewards from "./Season1Rewards";
import AssetCustodyVerification from "./AssetCustodyVerification";
export default function OverviewTab() {
return (
<div className="flex flex-col gap-8 w-full">
{/* Product Header */}
<ProductHeader />
{/* Stats Cards */}
<StatsCards />
{/* Main Content Grid */}
<div className="grid grid-cols-3 gap-8">
{/* Left Column - 2/3 width */}
<div className="col-span-2 flex flex-col gap-8">
<AssetOverviewCard />
<APYHistoryCard />
<div id="asset-description">
<AssetDescriptionCard />
</div>
</div>
{/* Right Column - 1/3 width */}
<div className="col-span-1">
<div className="sticky top-8 flex flex-col gap-8">
<MintSwapPanel />
<ProtocolInformation />
</div>
</div>
</div>
{/* Season 1 Rewards */}
<Season1Rewards />
{/* Performance Analysis */}
<div id="performance-analysis">
<PerformanceAnalysis />
</div>
{/* Asset Custody & Verification */}
<div id="asset-custody">
<AssetCustodyVerification />
</div>
</div>
);
}
import ProductHeader from "./ProductHeader";
import StatsCards from "./StatsCards";
import AssetOverviewCard from "./AssetOverviewCard";
import APYHistoryCard from "./APYHistoryCard";
import AssetDescriptionCard from "./AssetDescriptionCard";
import MintSwapPanel from "./MintSwapPanel";
import ProtocolInformation from "./ProtocolInformation";
import PerformanceAnalysis from "./PerformanceAnalysis";
import Season1Rewards from "./Season1Rewards";
import AssetCustodyVerification from "./AssetCustodyVerification";
export default function OverviewTab() {
return (
<div className="flex flex-col gap-8 w-full">
{/* Product Header */}
<ProductHeader />
{/* Stats Cards */}
<StatsCards />
{/* Main Content Grid */}
<div className="grid grid-cols-3 gap-8">
{/* Left Column - 2/3 width */}
<div className="col-span-2 flex flex-col gap-8">
<AssetOverviewCard />
<APYHistoryCard />
<div id="asset-description">
<AssetDescriptionCard />
</div>
</div>
{/* Right Column - 1/3 width */}
<div className="col-span-1">
<div className="sticky top-8 flex flex-col gap-8">
<MintSwapPanel />
<ProtocolInformation />
</div>
</div>
</div>
{/* Season 1 Rewards */}
<Season1Rewards />
{/* Performance Analysis */}
<div id="performance-analysis">
<PerformanceAnalysis />
</div>
{/* Asset Custody & Verification */}
<div id="asset-custody">
<AssetCustodyVerification />
</div>
</div>
);
}