+ {/* Header - USDC Lend Pool */}
+
+
+
+ {t("supply.usdcLendPool")}
+
+
+
+ {/* Historical APY Section */}
+
+ {/* Left - APY Display */}
+
+
+ {t("supply.historicalApy")}
+
+
+
+ 20.5%
+
+
+
+ +2.4%
+
+
+
+
+
+ {/* Right - Period Selector */}
+
+
+
+
+
+
+
+ {/* Chart Section */}
+
+ {/* ECharts Chart */}
+
+
+
+ {/* Token Balance & Supplied */}
+
+ {/* Token Balance */}
+
+
+ {t("supply.tokenBalance")}
+
+
+
+ 45,230.00
+
+
+ JLP
+
+
+
+ $45,230.00
+
+
+
+ {/* Supplied */}
+
+
+ {t("supply.supplied")}
+
+
+
+ 0.00
+
+
+ USDC
+
+
+
+ $0.00
+
+
+
+
+ {/* Deposit Section */}
+
+ {/* Deposit Label and Available */}
+
+
+ {t("supply.deposit")}
+
+
+
+
+ 45,230.00 USDC
+
+
+
+
+
+ {/* Input Row */}
+
+ {/* USDC Token Button */}
+
+
+
+ USDC
+
+
+
+ {/* Amount Input */}
+
+ setAmount(e.target.value)}
+ placeholder="0.00"
+ className="text-heading-h3 font-bold text-text-input-box dark:text-gray-500 leading-[130%] tracking-[-0.005em] text-right bg-transparent outline-none w-24"
+ />
+
+ --
+
+
+
+
+
+ {/* Health Factor */}
+
+
+
+
+ {t("supply.healthFactor")}
+
+
+ 0% {t("supply.utilization")}
+
+
+
+ {t("supply.safe")}
+
+
+
+ {/* Progress Bar */}
+
+
+
+ {/* Estimated Returns */}
+
+
+ {t("supply.estimatedReturns")}
+
+
+
+ {t("supply.estApy")}
+
+
+ 22%
+
+
+
+
+ {t("supply.estReturnsYear")}
+
+
+ ~ $0.50
+
+
+
+
+ {/* Supply Button */}
+
}>
+ {t("supply.supply")}
+
+
+ {/* Token Balance & Supplied */}
+
+ {/* Token Balance */}
+
+
+ {t("supply.tokenBalance")}
+
+
+
+ 45,230.00
+
+
+ JLP
+
+
+
+ $45,230.00
+
+
+
+ {/* Supplied */}
+
+
+ {t("supply.supplied")}
+
+
+
+ 0.00
+
+
+ USDC
+
+
+
+ $0.00
+
+
+
+
+ {/* Withdraw Section */}
+
+ {/* Withdraw Label and Available */}
+
+
+ {t("supply.withdraw")}
+
+
+
+
+ 45,230.00 USDC
+
+
+
+
+
+ {/* Input Row */}
+
+ {/* USDC Token Button */}
+
+
+
+ USDC
+
+
+
+ {/* Amount Input */}
+
+ setAmount(e.target.value)}
+ placeholder="0"
+ className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em] text-right bg-transparent outline-none w-24"
+ />
+
+ ≈ $1233.00 USD
+
+
+
+
+
+ {/* Health Factor */}
+
+
+
+
+ {t("supply.healthFactor")}
+
+
+ 0% {t("supply.utilization")}
+
+
+
+ {t("supply.safe")}
+
+
+
+ {/* Progress Bar */}
+
+
+
+ {/* Estimated Returns */}
+
+
+ {t("supply.estimatedReturns")}
+
+
+
+ {t("supply.estApy")}
+
+
+ 22%
+
+
+
+
+ {t("supply.estReturnsYear")}
+
+
+ ~ $0.50
+
+
+
+
+ {/* Withdraw Button */}
+
}>
+ {t("supply.withdraw")}
+
+
+ {/* Top Section - Title and Filter Tabs */}
+
+
+ Activity History
+
+
+ {/* Filter Tabs */}
+
+
+
+
+
+
+
+ {/* Table Card */}
+
+ {/* Table Header Section */}
+
+
+
+ Activity History
+
+
+ Track all your points-earning activities
+
+
+
+
+
+
+ Last updated: 2 minutes ago
+
+
+
+
+ {/* Table */}
+
+ {/* Table Header */}
+
+
+
+ User
+
+
+
+
+ Friends
+
+
+
+
+ Code
+
+
+
+
+ Points
+
+
+
+
+ {/* Table Body */}
+ {mockData.map((row, index) => (
+
+
+
+ {row.user}
+
+
+
+
+ {row.friend}
+
+
+
+
+ {row.code}
+
+
+
+
+ {row.points}
+
+
+
+ ))}
+
+
+
+ {/* Pagination */}
+
+ {/* Previous Button */}
+
+
+ {/* Page Numbers */}
+
+ {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+
+ ))}
+
+
+ {/* Next Button */}
+
+
+
+ {/* Header */}
+
+
+
+ BIND INVITE
+
+
+
+ {/* Description */}
+
+ Were you invited? Enter the code here to boost your base yield by +0.5%.
+
+
+ {/* Input and Button */}
+
+ {/* Input Field */}
+
+
+
+ {placeholder}
+
+
+
+
+ {/* Apply Button */}
+
+
+
+ {/* Top Section */}
+
+ {/* Left - Logo and Title */}
+
+ {/* Logo */}
+ {logo ? (
+
+ ) : (
+
+
+ LOGO
+
+
+ )}
+
+ {/* Title and Subtitle */}
+
+
+
+ {title}
+
+
+
+ {badge}
+
+
+
+
+ {subtitle}
+
+
+
+
+ {/* Right - Lock Period and Button */}
+
+
+
+ LOCK PERIOD
+
+
+ {lockPeriod}
+
+
+
+
+
+
+
+ {/* Bottom Section - Progress Bar */}
+
+ {/* Progress Bar */}
+
+
+ {/* Points Badge */}
+
+ {pointsBoost}
+
+
+
+ {/* Top Section - Logo and Points Badge */}
+
+ {/* Logo */}
+
+
+ LOGO
+
+
+
+ {/* Points Badge */}
+
+
+ {pointsLabel}
+
+
+
+
+ {/* Middle Section - Title and Subtitle */}
+
+
+ {title}
+
+
+ {subtitle}
+
+
+
+ {/* Bottom Section - Metric and Button */}
+
+ {/* Metric */}
+
+
+ {metricLabel}
+
+
+ {metricValue}
+
+
+
+ {/* Button */}
+
+ {buttonText}
+
+
+
+ {/* First Row - Cards 1, 2, 3 */}
+
+ console.log("Copy clicked")}
+ onShare={() => console.log("Share clicked")}
+ />
+ console.log("Apply clicked", code)}
+ />
+
+
+
+ {/* Second Row - Card 4 */}
+
console.log("Deposit clicked")}
+ />
+
+ {/* Third Row - Earn Opportunities */}
+
+ console.log("ZAP IN clicked")}
+ />
+ console.log("Add Liquidity clicked")}
+ />
+ console.log("Start LOOP clicked")}
+ />
+
+
+ {/* Fourth Row - Activity History and Top Performers */}
+
+
+ {/* Header Row */}
+
+ {/* Left - Tags */}
+
+ {/* Season 1 Tag */}
+
+
+ {t("points.season1")}
+
+
+
+ {/* Live Tag */}
+
+
+
+ {t("points.live")}
+
+
+
+
+ {/* Right - 7x Points Button */}
+
+
+
+ {t("points.xPoints")}
+
+
+
+
+ {/* Main Content */}
+
+ {/* Left Section - Points Info */}
+
+ {/* Title */}
+
+
+ {t("points.pointsDashboard")}
+
+
+ {t("points.unlockUpTo")}
+ {t("points.xPoints")}
+ {t("points.withEcosystemMultipliers")}
+
+
+
+ {/* Stats Grid */}
+
+ {/* Total Points */}
+
+
+ {t("points.yourTotalPoints")}
+
+
+ 2,450
+
+
+
+ {/* Rank and Timer Container */}
+
+ {/* Global Rank */}
+
+
+ {t("points.globalRank")}
+
+
+ #8,204
+
+
+ {t("points.topOfUsers")}
+
+
+
+ {/* Divider */}
+
+
+ {/* Ends In */}
+
+
+ {t("points.endsIn")}
+
+
+ 12d 4h
+
+
+ Feb 28
+
+
+
+
+
+
+ {/* Right Section - VIP Card */}
+
+
+
+ {/* Header */}
+
+
+
+ REFERRAL CODE
+
+
+
+ {/* Description */}
+
+ Share your unique code to earn 10% commission on all friend activities.
+
+
+ {/* Code Display and Buttons */}
+
+ {/* Code Display Row */}
+
+ {/* Code Container */}
+
+
+ {code}
+
+
+
+ {/* Copy Button */}
+
+
+
+ {/* Share Button */}
+
+ Share
+
+
+
+ {/* Header */}
+
+
+
+ Team TVL Reward
+
+
+
+ {/* Description */}
+
+ Were you invited? Enter the code here to boost your base yield by +0.5%.
+
+
+ {/* Progress Section */}
+
+ {/* TVL Info */}
+
+
+
+ CURRENT TEAM TVL
+
+
+ {currentTVL} / {totalTVL}
+
+
+
+ {/* Progress Bar */}
+
+
+
+ {/* Role Indicators */}
+
+ {roles.map((role, index) => (
+
+
+
+
+
+ {role.label}
+
+
+ {role.current}/{role.total}
+
+
+ ))}
+
+
+
+ {/* Members Badge */}
+
+
+ {members} Members
+
+
+
+ {/* Header */}
+
+
+ Top Performers
+
+
+
+ {/* Performers List */}
+
+ {mockPerformers.map((performer) => {
+ const style = getRowStyle(performer.rank);
+ const isTopThree = performer.rank <= 3;
+ const height = performer.rank <= 3 ? "h-[72px]" : "h-[68px]";
+
+ return (
+
+ {/* Left - Rank and Address */}
+
+ {/* Rank Number */}
+
+ {performer.rank}
+
+
+ {/* Address */}
+
+ {performer.address}
+
+
+
+ {/* Right - Points */}
+
+ {performer.points}
+
+
+ );
+ })}
+
+
+ {/* Footer - My Rank */}
+
+
+
+
+ MY RANK
+
+
+
+ 2,450.00
+
+
+
+ {/* Top Left - Member Info */}
+
+
+
+ {memberTier}
+
+
+ Current Tier
+
+
+
+
+ {/* Top Right - VIP Badge */}
+
+
+ {/* Badge Layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Decorative circles */}
+
+
+
+
+ {/* Level Badge */}
+
+
+
+ LV{level}
+
+
+
+
+
+ {/* Bottom - Progress Section */}
+
+ {/* Progress Label */}
+
+
+ Progress
+
+
+ {currentPoints} / {totalPoints}
+
+
+
+ {/* Progress Bar */}
+
+
+
+ {/* Bottom - Next Tier */}
+
+
+ {pointsToNextTier} points to {nextTier}
+
+
+
+
+ Day ${data.dataIndex + 1}
+ ${data.value}${suffix}
+
`;
+ },
+ },
+ xAxis: {
+ type: "category",
+ data: chartData.map((_, i) => i + 1),
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ },
+ },
+ yAxis: {
+ type: "value",
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ },
+ series: [
+ activeTab === "apy"
+ ? {
+ data: chartData.map((value, index) => ({
+ value,
+ itemStyle: {
+ color: colors[index],
+ borderRadius: [2, 2, 0, 0],
+ },
+ })),
+ type: "bar",
+ barWidth: "50%",
+ }
+ : {
+ data: priceData,
+ type: "line",
+ smooth: true,
+ symbol: "circle",
+ symbolSize: 6,
+ lineStyle: {
+ color: "#10b981",
+ width: 2,
+ },
+ itemStyle: {
+ color: "#10b981",
+ },
+ areaStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: "rgba(16, 185, 129, 0.3)" },
+ { offset: 1, color: "rgba(16, 185, 129, 0)" },
+ ],
+ },
+ },
+ },
+ ],
+ };
+
+ chartInstance.current.setOption(option);
+ };
+
+ return (
+
+ {/* Tabs */}
+
+
+
+
+
+ {/* Chart Area */}
+
+
+
+ {t("apy.lastDays")}
+
+
+
+ {/* ECharts Chart */}
+
+
+ {/* Stats */}
+
+
+
+ {t("apy.highest")}
+
+
+ {activeTab === "apy" ? "24.8%" : "$1.32"}
+
+
+
+
+ {t("apy.lowest")}
+
+
+ {activeTab === "apy" ? "18.2%" : "$1.12"}
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+
+
+ {/* Header */}
+
+
+ {t("custody.title")}
+
+
+ {t("custody.description")}
+
+
+
+ {/* Holdings Table Card */}
+
+ {/* Table Header */}
+
+
+
+ {t("custody.underlyingHoldings")}
+
+
+ {t("custody.verifiedBy")}
+
+
+
+
+
+ {t("custody.lastUpdated")}: 2 {t("custody.minutesAgo")}
+
+
+
+
+ {/* Table */}
+
+ {/* Table Header Row */}
+
+
+ {t("custody.custodian")}
+
+
+ {t("custody.assetType")}
+
+
+ {t("custody.maturity")}
+
+
+ {t("custody.valueUSD")}
+
+
+ {t("custody.status")}
+
+
+
+ {/* Table Body Row */}
+
+ {/* Custodian */}
+
+
+
+ GY
+
+
+
+
+ {t("custody.morganStanley")}
+
+
+ {t("custody.primeBroker")}
+
+
+
+
+ {/* Asset Type */}
+
+
+ {t("custody.usEquityPortfolio")}
+
+
+
+ {/* Maturity */}
+
+
+ 05 Feb 2026
+
+
+ (77 {t("custody.days")})
+
+
+
+ {/* Value */}
+
+
+ $12,500,000.00
+
+
+
+ {/* Status */}
+
+
+
+
+ {t("custody.verified")}
+
+
+
+
+
+ {/* Table Footer Row */}
+
+
+
+ {t("custody.totalValue")}
+
+
+
+
+ $12,500,000.00
+
+
+
+
+
+
+ {/* Verification Cards Row */}
+
+
+
+
+
+ {/* Independent Verifications */}
+
+
+
+ {t("custody.independentVerifications")}
+
+
+ {t("custody.independentDesc")}
+
+
+
+
+
+
+
+ {t("custody.attestationReport")}
+
+
+ November 2025
+
+
+
+
+
+
+
+
+ {t("custody.attestationReport")}
+
+
+ October 2025
+
+
+
+
+
+
+
+
+
+
+
+ {t("description.title")}
+
+
+ {t("description.content")}
+
+
+ {/* Header */}
+
+
+ {t("assetOverview.title")}
+
+
+
+
+ {t("assetOverview.mediumRisk")}
+
+
+
+
+ {/* Overview Items */}
+
+
+ {/* Divider */}
+
+
+ {/* Current Price */}
+
+
+
+
+ {t("assetOverview.currentPrice")}
+
+
+
+ 1 GY-US =
+ 1.04 USDC
+
+
+
+ {/* Tab Navigation */}
+
+
+ {/* Content Area */}
+
+ {showOverview &&
}
+ {!showOverview && (
+
+
+ {tabs.find((t) => t.id === activeTab)?.label} content will be
+ displayed here...
+
+
+ )}
+
+
+ {/* Content */}
+
+ {/* Deposit/Withdraw Toggle */}
+
setActiveAction(key as "deposit" | "withdraw")}
+ variant="solid"
+ classNames={{
+ base: "w-full",
+ tabList: "bg-[#f9fafb] dark:bg-gray-700 rounded-xl p-1 gap-0 w-full",
+ cursor: "bg-bg-surface dark:bg-gray-600 shadow-sm",
+ tab: "h-8 px-4",
+ tabContent: "text-body-small font-medium text-text-tertiary dark:text-gray-400 group-data-[selected=true]:font-bold group-data-[selected=true]:text-text-primary dark:group-data-[selected=true]:text-white",
+ }}
+ >
+
+
+
+
+ {/* Input Area */}
+
+
+ {/* Label and Balance */}
+
+
+ {t("mintSwap.deposit")}
+
+
+
+
+ {t("mintSwap.balance")}: $12,500.00
+
+
+
+
+ {/* Input Row */}
+
+
+ setAmount(e.target.value)}
+ className="w-full text-left text-heading-h3 font-bold text-text-primary dark:text-white placeholder:text-[#d1d5db] dark:placeholder:text-gray-500 bg-transparent border-none outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+ />
+
+ {amount ? `≈ $${amount}` : "--"}
+
+
+
+
+
+
+
+
+
+
+ {/* Estimated Returns */}
+
+
+
+ {t("mintSwap.estimatedReturns")}
+
+
+
+
+ {t("mintSwap.estAPY")}
+
+
+ 22%
+
+
+
+
+ {t("mintSwap.estReturns")}
+
+
+ ~ $0.50
+
+
+
+
+ {/* Transaction Summary */}
+
+
+
+ {t("mintSwap.transactionSummary")}
+
+
+
+
+ {t("mintSwap.youGet")}
+
+
+ 9852.21 GYUS
+
+
+
+
+ {t("mintSwap.salesPrice")}
+
+ $1.04 USDC
+
+
+
+ {t("mintSwap.fee")}
+
+
+ -$50 (0.5%)
+
+
+
+
+ {t("mintSwap.gas")}
+
+
+ -$0.09
+
+
+
+
+ {/* Submit Button */}
+
}
+ onPress={() => {
+ if (amount && parseFloat(amount) > 0) {
+ if (activeAction === "deposit") {
+ setIsReviewModalOpen(true);
+ } else {
+ setIsWithdrawModalOpen(true);
+ }
+ }
+ }}
+ >
+ {activeAction === "deposit"
+ ? t("mintSwap.approveDeposit")
+ : "Approve and Withdraw"}
+
+
+ {/* Review Modal for Deposit */}
+
setIsReviewModalOpen(false)}
+ amount={amount}
+ />
+
+ {/* Withdraw Modal */}
+ setIsWithdrawModalOpen(false)}
+ amount={amount}
+ />
+
+ {/* Terms */}
+
+
+
+ {t("mintSwap.termsText")}{" "}
+
+
+ {t("mintSwap.termsOfService")}
+
+
+ {" "}{t("mintSwap.and")}
+
+
+
+ {t("mintSwap.privacyPolicy")}
+
+
+
+ {/* Product Header */}
+
+
+ {/* Stats Cards */}
+
+
+ {/* Main Content Grid */}
+
+ {/* Left Column - 2/3 width */}
+
+
+ {/* Right Column - 1/3 width */}
+
+
+
+ {/* Season 1 Rewards */}
+
+
+ {/* Performance Analysis */}
+
+
+ {/* Asset Custody & Verification */}
+
+
+
+
+ {day}
+
+
+
+
+ {value}
+
+ {isCurrent && (
+
+ Today
+
+ )}
+
+
+
+ {label}
+
+
+ {value}
+
+
+ );
+}
+
+export default function PerformanceAnalysis() {
+ const { t } = useApp();
+ const [currentMonth] = useState("November 2025");
+
+ // 模拟日历数据 - 5周数据
+ const weekData = [
+ [
+ { day: 31, value: "0.00%", type: "neutral" as const },
+ { day: 1, value: "+0.12%", type: "positive" as const },
+ { day: 2, value: "+0.08%", type: "positive" as const },
+ { day: 3, value: "-0.03%", type: "negative" as const },
+ { day: 4, value: "+0.15%", type: "positive" as const },
+ { day: 5, value: "+0.21%", type: "positive" as const },
+ { day: 6, value: "0.00%", type: "neutral" as const },
+ ],
+ [
+ { day: 7, value: "+0.12%", type: "positive" as const },
+ { day: 8, value: "+0.12%", type: "positive" as const },
+ { day: 9, value: "-0.03%", type: "negative" as const },
+ { day: 10, value: "+0.08%", type: "positive" as const },
+ { day: 11, value: "-0.03%", type: "negative" as const },
+ { day: 12, value: "+0.21%", type: "positive" as const },
+ { day: 13, value: "0.00%", type: "neutral" as const },
+ ],
+ [
+ { day: 14, value: "-0.03%", type: "negative" as const },
+ { day: 15, value: "-0.03%", type: "negative" as const },
+ { day: 16, value: "+0.15%", type: "positive" as const },
+ { day: 17, value: "+0.21%", type: "positive" as const },
+ { day: 18, value: "+0.08%", type: "positive" as const },
+ { day: 19, value: "0.00%", type: "neutral" as const },
+ { day: 20, value: "+0.12%", type: "positive" as const },
+ ],
+ [
+ { day: 21, value: "+0.08%", type: "positive" as const },
+ { day: 22, value: "+0.15%", type: "positive" as const },
+ { day: 23, value: "-0.03%", type: "negative" as const },
+ { day: 24, value: "+0.12%", type: "current" as const },
+ { day: 25, value: "0.00%", type: "neutral" as const },
+ { day: 26, value: "+0.21%", type: "positive" as const },
+ { day: 27, value: "+0.08%", type: "positive" as const },
+ ],
+ [
+ { day: 28, value: "+0.12%", type: "positive" as const },
+ { day: 30, value: "-0.03%", type: "negative" as const },
+ { day: 29, value: "-0.03%", type: "negative" as const },
+ { day: null, value: "", type: "neutral" as const },
+ { day: null, value: "", type: "neutral" as const },
+ { day: null, value: "", type: "neutral" as const },
+ { day: null, value: "", type: "neutral" as const },
+ ],
+ ];
+
+ return (
+
+ {/* Top Section - Title and Stats */}
+
+
+
+ {t("performance.title")}
+
+
+ {t("performance.description")}
+
+
+
+
+
+
+
+
+ {/* Calendar Section */}
+
+ {/* Calendar Header */}
+
+
+
+
+
+
+ {t("performance.dailyNetReturns")}
+
+
+
+
+
+ {currentMonth}
+
+
+
+
+
+ {/* Calendar */}
+
+ {/* Weekday Headers */}
+
+ {["sun", "mon", "tue", "wed", "thu", "fri", "sat"].map((day) => (
+
+
+ {t(`performance.weekdays.${day}`)}
+
+
+ ))}
+
+
+ {/* Calendar Grid */}
+
+ {weekData.map((week, weekIndex) => (
+
+ {week.map((day, dayIndex) => (
+
+ ))}
+
+ ))}
+
+
+
+
+ {/* Product Title Section */}
+
+
+
+
+
+
+
+ {t("product.gyUsEquityIndexToken")}
+
+
+ High-Yield US Equity Quantitative Strategy - Institutional Grade RWA
+
+
+
+
+
+
+ {t("product.contractAddress")}: 0x1b19...4f2c
+
+
+
+
+
+ {t("protocol.title")}
+
+
+
+
+ {value}
+
+
+ {label}
+
+
+ );
+}
+
+export default function Season1Rewards() {
+ const { t } = useApp();
+ return (
+
+ {/* Background Decoration */}
+
+
+
+
+ {/* Content Container */}
+
+ {/* Left: Header and Description */}
+
+ {/* Header */}
+
+
+ {t("rewards.season1")}
+
+
+
+ {t("rewards.live")}
+
+
+
+
+ {/* Description */}
+
+ {t("rewards.earnPoints")}
+
+
+
+ {/* Right: Stats */}
+
+
+
+
+
+
+
${params.name}
+ ${params.data.value}%
+ `;
+ },
+ },
+ legend: {
+ top: "bottom",
+ left: "center",
+ itemWidth: 12,
+ itemHeight: 12,
+ itemGap: 16,
+ textStyle: {
+ fontSize: 13,
+ color: "#64748b",
+ },
+ icon: "circle",
+ inactiveColor: "#cbd5e1",
+ },
+ series: [
+ {
+ name: "Asset Distribution",
+ type: "pie",
+ radius: ["40%", "70%"],
+ center: ["50%", "45%"],
+ avoidLabelOverlap: false,
+ padAngle: 6,
+ itemStyle: {
+ borderRadius: 12,
+ borderColor: "#fff",
+ borderWidth: 3,
+ },
+ label: {
+ show: true,
+ position: "outside",
+ alignTo: "none",
+ formatter: (params: any) => {
+ return `{name|${params.name}}\n{line|}\n{value|${params.value}%}`;
+ },
+ rich: {
+ name: {
+ fontSize: 14,
+ fontWeight: "bold",
+ color: "#0f172b",
+ lineHeight: 20,
+ },
+ line: {
+ height: 1,
+ width: 80,
+ backgroundColor: "transparent",
+ },
+ value: {
+ fontSize: 13,
+ fontWeight: "600",
+ color: params => params.color,
+ lineHeight: 18,
+ },
+ },
+ },
+ labelLine: {
+ show: true,
+ length: 15,
+ length2: 50,
+ lineStyle: {
+ width: 1.5,
+ },
+ },
+ emphasis: {
+ scale: true,
+ scaleSize: 6,
+ itemStyle: {
+ shadowBlur: 20,
+ shadowColor: "rgba(0, 0, 0, 0.2)",
+ },
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: "bold",
+ color: "#0f172b",
+ lineHeight: 48,
+ },
+ },
+ data: data,
+ animationType: "expansion",
+ animationEasing: "cubicOut",
+ animationDuration: 800,
+ },
+ ],
+ };
+
+ chart.setOption(option);
+
+ const handleResize = () => {
+ chart.resize();
+ };
+ window.addEventListener("resize", handleResize);
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ chart.dispose();
+ };
+ }, [t]);
+
+ return (
+
+ {/* Header */}
+
+
+ {t("transparency.assetDistribution")}
+
+
+ {t("transparency.distributionSubtitle")}
+
+
+
+ {/* Pie Chart Section */}
+
+ {/* ECharts Pie Chart */}
+
+
+
+ {/* Header */}
+
+
+ {t("transparency.geographicAllocation")}
+
+
+ {t("transparency.geographicSubtitle")}
+
+
+
+ {/* Region Cards */}
+
+ {regions.map((region, index) => (
+
+ {/* Left - Flag and Location */}
+
+
+
+
+
+
+ {t(region.countryKey)}
+
+
+ {t(region.regionKey)}
+
+
+
+
+ {/* Right - Value and Percentage */}
+
+
+ {region.value}
+
+
+ {region.percentage}
+
+
+
+ ))}
+
+
+ {/* Header */}
+
+
+
+ {t("transparency.rwaHoldings")}
+
+
+ {t("transparency.rwaSubtitle")}
+
+
+
+
+
+
+ {t("transparency.lastUpdated")}: 2 {t("transparency.minutesAgo")}
+
+
+
+
+ {/* Table */}
+
+ {/* Table Header */}
+
+
+
+ {t("transparency.custodian")}
+
+
+
+
+ {t("transparency.assetType")}
+
+
+
+
+ {t("transparency.maturity")}
+
+
+
+
+ {t("transparency.valueUsd")}
+
+
+
+
+ {t("transparency.status")}
+
+
+
+
+ {/* Table Body */}
+ {holdings.map((holding, index) => (
+
+ {/* Custodian */}
+
+
+
+ GY
+
+
+
+
+ {holding.custodian}
+
+
+ {holding.custodianType}
+
+
+
+
+ {/* Asset Type */}
+
+
+ {holding.assetType}
+
+
+
+ {/* Maturity */}
+
+
+ {holding.maturityDate}
+
+
+ ({holding.daysRemaining})
+
+
+
+ {/* Value */}
+
+
+ {holding.value}
+
+
+
+ {/* Status */}
+
+
+
+
+ {holding.status}
+
+
+
+
+ ))}
+
+
+
+
+ {/* 中间的百分比文字 */}
+
+
+ {percentageText}
+
+
+
+ {/* Total Reserves */}
+
+
+ {t("transparency.totalReserves")}
+
+
+ $465,000,000
+
+
+
+ {/* Stats Cards */}
+
+ {stats.map((stat, index) => (
+
+ {/* Left - Text Info */}
+
+ {/* Label */}
+
+ {t(stat.labelKey)}
+
+
+ {/* Value */}
+
+ {stat.value}
+
+
+ {/* Percentage */}
+
+ {stat.percentageText}
+
+
+
+ {/* Right - Circle Chart */}
+
+
+ ))}
+
+
检查浏览器:
+ 请访问: http://localhost:3003
+ 按钮应该显示 "Invest" 文字
+
+ 调试步骤:
+
+ - 打开浏览器开发者工具 (F12)
+ - 找到 Invest 按钮
+ - 检查元素内是否有 "Invest" 文本
+ - 检查 CSS 样式是否有问题
+
+
+ Button 代码:
+
+<Button
+ onPress={onInvest}
+ className="rounded-xl h-11 w-full text-body-small font-bold bg-gray-900 text-white hover:bg-gray-800"
+>
+ Invest
+</Button>
+
+
+
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..d8b9323
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}