大改变

2026-02-03 19:56:21 +08:00
parent 4b13d255bc
commit 9aa9e44295
545 changed files with 8712 additions and 16168 deletions
--- a/components/transparency/AssetDistribution.tsx
+++ b/components/transparency/AssetDistribution.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import { useApp } from "@/contexts/AppContext";
+import { useEffect, useRef } from "react";
+import * as echarts from "echarts";
+
+export default function AssetDistribution() {
+  const { t } = useApp();
+  const chartRef = useRef<HTMLDivElement>(null);
+
+  const legends = [
+    { nameKey: "transparency.fixedIncome", color: "bg-[#1447e6]" },
+    { nameKey: "transparency.alternativeAssets", color: "bg-[#10b981]" },
+    { nameKey: "transparency.alternativeCredit", color: "bg-[#ff6900]" },
+  ];
+
+  useEffect(() => {
+    if (!chartRef.current) return;
+
+    const chart = echarts.init(chartRef.current, null, {
+      renderer: "svg",
+    });
+
+    const option = {
+      series: [
+        {
+          type: "pie",
+          radius: ["45%", "70%"],
+          center: ["50%", "50%"],
+          avoidLabelOverlap: true,
+          itemStyle: {
+            borderRadius: 0,
+            borderColor: "transparent",
+            borderWidth: 0,
+          },
+          label: {
+            show: true,
+            position: "outside",
+            alignTo: "none",
+            formatter: (params: any) => {
+              return `{name|${params.name}}\n{line|}\n{value|${params.data.displayValue}}`;
+            },
+            rich: {
+              name: {
+                fontSize: 14,
+                fontWeight: "bold",
+                color: "#0f172b",
+                lineHeight: 20,
+              },
+              line: {
+                height: 1,
+                width: 100,
+                backgroundColor: "transparent",
+              },
+              value: {
+                fontSize: 12,
+                fontWeight: "500",
+                lineHeight: 18,
+              },
+            },
+          },
+          labelLine: {
+            show: true,
+            length: 20,
+            length2: 60,
+            lineStyle: {
+              width: 1,
+            },
+          },
+          emphasis: {
+            disabled: true,
+          },
+          data: [
+            {
+              value: 52.7,
+              name: t("transparency.usTreasuryBills"),
+              displayValue: "$140M (30.1%)",
+              itemStyle: {
+                color: "#1447e6",
+              },
+              label: {
+                rich: {
+                  value: {
+                    color: "#1447e6",
+                  },
+                },
+              },
+              labelLine: {
+                lineStyle: {
+                  color: "#1447e6",
+                },
+              },
+            },
+            {
+              value: 30.1,
+              name: t("transparency.realEstate"),
+              displayValue: "$140M (30.1%)",
+              itemStyle: {
+                color: "#10b981",
+              },
+              label: {
+                rich: {
+                  value: {
+                    color: "#10b981",
+                  },
+                },
+              },
+              labelLine: {
+                lineStyle: {
+                  color: "#10b981",
+                },
+              },
+            },
+            {
+              value: 17.2,
+              name: t("transparency.privateCredit"),
+              displayValue: "$80M (17.2%)",
+              itemStyle: {
+                color: "#ff6900",
+              },
+              label: {
+                rich: {
+                  value: {
+                    color: "#ff6900",
+                  },
+                },
+              },
+              labelLine: {
+                lineStyle: {
+                  color: "#ff6900",
+                },
+              },
+            },
+          ],
+          animationType: "expansion",
+          animationEasing: "cubicOut",
+          animationDuration: 1000,
+        },
+      ],
+    };
+
+    chart.setOption(option);
+
+    const handleResize = () => {
+      chart.resize();
+    };
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      chart.dispose();
+    };
+  }, [t]);
+
+  return (
+    <div className="flex-1 bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6">
+      {/* Header */}
+      <div className="flex flex-col gap-0">
+        <h3 className="text-[20px] font-bold text-text-primary dark:text-white leading-[140%]">
+          {t("transparency.assetDistribution")}
+        </h3>
+        <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+          {t("transparency.distributionSubtitle")}
+        </p>
+      </div>
+
+      {/* Pie Chart Section */}
+      <div className="flex flex-col gap-3">
+        {/* ECharts Pie Chart */}
+        <div className="relative h-[210px] w-full">
+          <div ref={chartRef} className="w-full h-full" />
+          {/* Center 100 */}
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[40px] font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em] pointer-events-none">
+            100
+          </div>
+        </div>
+
+        {/* Legends */}
+        <div className="flex items-center justify-center gap-6">
+          {legends.map((legend, index) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className={`w-3 h-3 rounded-full ${legend.color}`} />
+              <span className="text-body-small font-regular text-text-primary dark:text-white leading-[150%]">
+                {t(legend.nameKey)}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/transparency/GeographicAllocation.tsx
+++ b/components/transparency/GeographicAllocation.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import Image from "next/image";
+import { useApp } from "@/contexts/AppContext";
+
+export default function GeographicAllocation() {
+  const { t } = useApp();
+
+  const regions = [
+    {
+      countryKey: "transparency.unitedStates",
+      regionKey: "transparency.northAmerica",
+      value: "$305,000,000",
+      percentage: "65.6%",
+      flag: "/lr0.svg",
+    },
+    {
+      countryKey: "transparency.hongKong",
+      regionKey: "transparency.asiaPacific",
+      value: "$160,000,000",
+      percentage: "34.4%",
+      flag: "/container14.svg",
+    },
+  ];
+
+  return (
+    <div className="flex-1 bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6">
+      {/* Header */}
+      <div className="flex flex-col gap-0">
+        <h3 className="text-[20px] font-bold text-text-primary dark:text-white leading-[140%]">
+          {t("transparency.geographicAllocation")}
+        </h3>
+        <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+          {t("transparency.geographicSubtitle")}
+        </p>
+      </div>
+
+      {/* Region Cards */}
+      <div className="flex flex-col gap-4">
+        {regions.map((region, index) => (
+          <div
+            key={index}
+            className="bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-border-gray dark:border-gray-600 p-4 flex items-center justify-between"
+          >
+            {/* Left - Flag and Location */}
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-12 flex-shrink-0 flex items-center justify-center">
+                <Image
+                  src={region.flag}
+                  alt={t(region.countryKey)}
+                  width={48}
+                  height={48}
+                  className="w-full h-full object-contain"
+                />
+              </div>
+              <div className="flex flex-col">
+                <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
+                  {t(region.countryKey)}
+                </span>
+                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+                  {t(region.regionKey)}
+                </span>
+              </div>
+            </div>
+
+            {/* Right - Value and Percentage */}
+            <div className="flex flex-col items-end">
+              <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
+                {region.value}
+              </span>
+              <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+                {region.percentage}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/components/transparency/HoldingsTable.tsx
+++ b/components/transparency/HoldingsTable.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import Image from "next/image";
+import { useApp } from "@/contexts/AppContext";
+
+export default function HoldingsTable() {
+  const { t } = useApp();
+
+  const holdings = [
+    {
+      custodian: t("transparency.morganStanley"),
+      custodianType: t("transparency.primeBroker"),
+      assetType: t("transparency.usEquityPortfolio"),
+      maturityDate: "05 Feb 2026",
+      daysRemaining: `77 ${t("transparency.days")}`,
+      value: "$12,500,000.00",
+      status: t("transparency.verified"),
+    },
+    {
+      custodian: t("transparency.morganStanley"),
+      custodianType: t("transparency.primeBroker"),
+      assetType: t("transparency.usEquityPortfolio"),
+      maturityDate: "05 Feb 2026",
+      daysRemaining: `77 ${t("transparency.days")}`,
+      value: "$12,500,000.00",
+      status: t("transparency.verified"),
+    },
+    {
+      custodian: t("transparency.morganStanley"),
+      custodianType: t("transparency.primeBroker"),
+      assetType: t("transparency.usEquityPortfolio"),
+      maturityDate: "05 Feb 2026",
+      daysRemaining: `77 ${t("transparency.days")}`,
+      value: "$12,500,000.00",
+      status: t("transparency.verified"),
+    },
+    {
+      custodian: t("transparency.morganStanley"),
+      custodianType: t("transparency.primeBroker"),
+      assetType: t("transparency.usEquityPortfolio"),
+      maturityDate: "05 Feb 2026",
+      daysRemaining: `77 ${t("transparency.days")}`,
+      value: "$12,500,000.00",
+      status: t("transparency.verified"),
+    },
+  ];
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 overflow-hidden">
+      {/* Header */}
+      <div className="bg-bg-surface dark:bg-gray-800 border-b border-border-gray dark:border-gray-700 px-6 py-6 flex items-center justify-between">
+        <div className="flex flex-col gap-1">
+          <h2 className="text-[20px] font-bold text-text-primary dark:text-white leading-[140%]">
+            {t("transparency.rwaHoldings")}
+          </h2>
+          <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            {t("transparency.rwaSubtitle")}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-2 rounded-full">
+          <Image src="/component-10.svg" alt="" width={16} height={16} />
+          <span className="text-caption-tiny font-regular text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
+            {t("transparency.lastUpdated")}: 2 {t("transparency.minutesAgo")}
+          </span>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="overflow-auto">
+        {/* Table Header */}
+        <div className="flex bg-bg-subtle dark:bg-gray-700 border-b border-border-gray dark:border-gray-600">
+          <div className="flex-1 px-6 py-4">
+            <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
+              {t("transparency.custodian")}
+            </span>
+          </div>
+          <div className="flex-1 px-6 py-4">
+            <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
+              {t("transparency.assetType")}
+            </span>
+          </div>
+          <div className="flex-1 px-6 py-4">
+            <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
+              {t("transparency.maturity")}
+            </span>
+          </div>
+          <div className="flex-1 px-6 py-4">
+            <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
+              {t("transparency.valueUsd")}
+            </span>
+          </div>
+          <div className="flex-1 px-6 py-4">
+            <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
+              {t("transparency.status")}
+            </span>
+          </div>
+        </div>
+
+        {/* Table Body */}
+        {holdings.map((holding, index) => (
+          <div
+            key={index}
+            className={`flex items-center ${
+              index !== holdings.length - 1
+                ? "border-b border-border-gray dark:border-gray-600"
+                : ""
+            }`}
+          >
+            {/* Custodian */}
+            <div className="flex-1 px-6 py-6 flex items-center gap-3">
+              <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-[#ff8904] to-[#f54900] shadow-[0px_2.01px_3.02px_-2.01px_rgba(255,105,0,0.2)]">
+                <span className="text-[10px] font-bold text-white leading-[14px] tracking-[-0.23px]">
+                  GY
+                </span>
+              </div>
+              <div className="flex flex-col">
+                <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
+                  {holding.custodian}
+                </span>
+                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+                  {holding.custodianType}
+                </span>
+              </div>
+            </div>
+
+            {/* Asset Type */}
+            <div className="flex-1 px-6 py-6">
+              <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
+                {holding.assetType}
+              </span>
+            </div>
+
+            {/* Maturity */}
+            <div className="flex-1 px-6 py-6 flex flex-col">
+              <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
+                {holding.maturityDate}
+              </span>
+              <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+                ({holding.daysRemaining})
+              </span>
+            </div>
+
+            {/* Value */}
+            <div className="flex-1 px-6 py-6">
+              <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
+                {holding.value}
+              </span>
+            </div>
+
+            {/* Status */}
+            <div className="flex-1 px-6 py-6">
+              <div className="inline-flex items-center gap-0.5 bg-[#e1f8ec] dark:bg-green-900/30 border border-[#b8ecd2] dark:border-green-700 rounded-full px-3 py-1">
+                <Image
+                  src="/component-11.svg"
+                  alt=""
+                  width={14}
+                  height={14}
+                />
+                <span className="text-[10px] font-bold text-[#10b981] dark:text-green-400 leading-[15px]">
+                  {holding.status}
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/components/transparency/TransparencyStats.tsx
+++ b/components/transparency/TransparencyStats.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { useApp } from "@/contexts/AppContext";
+
+interface CircleProgressProps {
+  percentage: number;
+  color: string;
+  percentageText: string;
+}
+
+function CircleProgress({ percentage, color, percentageText }: CircleProgressProps) {
+  const size = 50;
+  const strokeWidth = 4;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const offset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <div className="relative flex items-center justify-center flex-shrink-0" style={{ width: size, height: size }}>
+      <svg width={size} height={size} className="transform -rotate-90">
+        {/* 背景圆环 - 浅色轨道 */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="transparent"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          className="text-slate-200/30 dark:text-gray-600"
+        />
+
+        {/* 进度圆环 - 填充部分 */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="transparent"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          style={{
+            strokeDashoffset: offset,
+            transition: 'stroke-dashoffset 1s ease-in-out',
+            strokeLinecap: 'round'
+          }}
+        />
+      </svg>
+
+      {/* 中间的百分比文字 */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+          {percentageText}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default function TransparencyStats() {
+  const { t } = useApp();
+
+  const stats = [
+    {
+      labelKey: "transparency.totalUsdcSupply",
+      value: "$200.4M",
+      percentage: 52.7,
+      percentageText: "52.7%",
+      percentageColor: "text-[#1447e6]",
+      circleColor: "#1447e6",
+    },
+    {
+      labelKey: "transparency.utilization",
+      value: "$140.0M",
+      percentage: 30.1,
+      percentageText: "30.1%",
+      percentageColor: "text-[#ff6900]",
+      circleColor: "#ff6900",
+    },
+    {
+      labelKey: "transparency.activeLoans",
+      value: "$80.0M",
+      percentage: 17.2,
+      percentageText: "17.2%",
+      percentageColor: "text-[#10b981]",
+      circleColor: "#10b981",
+    },
+  ];
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6">
+      {/* Total Reserves */}
+      <div className="flex flex-col gap-2">
+        <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+          {t("transparency.totalReserves")}
+        </span>
+        <span className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
+          $465,000,000
+        </span>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="flex gap-4">
+        {stats.map((stat, index) => (
+          <div
+            key={index}
+            className="flex-1 bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-border-gray dark:border-gray-600 p-4 flex items-center justify-between"
+          >
+            {/* Left - Text Info */}
+            <div className="flex flex-col gap-2">
+              {/* Label */}
+              <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+                {t(stat.labelKey)}
+              </span>
+
+              {/* Value */}
+              <span className="text-[20px] font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
+                {stat.value}
+              </span>
+
+              {/* Percentage */}
+              <span className={`text-[12px] font-medium leading-[150%] tracking-[0.01em] ${stat.percentageColor}`}>
+                {stat.percentageText}
+              </span>
+            </div>
+
+            {/* Right - Circle Chart */}
+            <CircleProgress
+              percentage={stat.percentage}
+              color={stat.circleColor}
+              percentageText={stat.percentageText}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}