初始化 assetx 项目，首次提交

components/MintSwapPanel.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { useApp } from "@/contexts/AppContext";
+
+export default function MintSwapPanel() {
+  const { t } = useApp();
+  const [activeMode, setActiveMode] = useState<"mint" | "swap">("mint");
+  const [activeAction, setActiveAction] = useState<"deposit" | "withdraw">("deposit");
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 flex flex-col">
+      {/* Mint/Swap Tabs */}
+      <div className="flex border-b border-border-gray dark:border-gray-700">
+        <button
+          onClick={() => setActiveMode("mint")}
+          className={`flex-1 h-[53px] flex items-center justify-center text-body-small font-bold rounded-tl-3xl transition-colors ${
+            activeMode === "mint"
+              ? "bg-bg-subtle dark:bg-gray-700 border-b-2 border-text-primary dark:border-blue-500 text-[#0f172b] dark:text-white"
+              : "text-text-tertiary dark:text-gray-400"
+          }`}
+        >
+          {t("mintSwap.mint")}
+        </button>
+        <button
+          onClick={() => setActiveMode("swap")}
+          className={`flex-1 h-[53px] flex items-center justify-center text-body-small font-bold transition-colors ${
+            activeMode === "swap"
+              ? "bg-bg-subtle dark:bg-gray-700 border-b-2 border-text-primary dark:border-blue-500 text-[#0f172b] dark:text-white"
+              : "text-text-tertiary dark:text-gray-400"
+          }`}
+        >
+          {t("mintSwap.swap")}
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-col gap-6 p-6">
+        {/* Deposit/Withdraw Toggle */}
+        <div className="bg-[#f9fafb] dark:bg-gray-700 rounded-xl p-1 flex gap-0">
+          <button
+            onClick={() => setActiveAction("deposit")}
+            className={`flex-1 h-8 px-4 rounded-lg text-body-small transition-all ${
+              activeAction === "deposit"
+                ? "bg-bg-surface dark:bg-gray-600 font-bold text-text-primary dark:text-white shadow-sm"
+                : "font-medium text-text-tertiary dark:text-gray-400"
+            }`}
+          >
+            {t("mintSwap.deposit")}
+          </button>
+          <button
+            onClick={() => setActiveAction("withdraw")}
+            className={`flex-1 h-8 px-4 rounded-lg text-body-small transition-all ${
+              activeAction === "withdraw"
+                ? "bg-bg-surface dark:bg-gray-600 font-bold text-text-primary dark:text-white shadow-sm"
+                : "font-medium text-text-tertiary dark:text-gray-400"
+            }`}
+          >
+            {t("mintSwap.withdraw")}
+          </button>
+        </div>
+
+        {/* Input Area */}
+        <div className="flex flex-col gap-2">
+          <div className="bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 p-4 flex flex-col gap-3">
+            {/* Label and Balance */}
+            <div className="flex items-center justify-between">
+              <span className="text-caption-tiny font-medium text-[#4b5563] dark:text-gray-400">
+                {t("mintSwap.deposit")}
+              </span>
+              <div className="flex items-center gap-1">
+                <Image src="/icon7.svg" alt="" width={12} height={12} />
+                <span className="text-caption-tiny font-medium text-[#4b5563] dark:text-gray-400">
+                  {t("mintSwap.balance")}: $12,500.00
+                </span>
+                <button className="rounded-full px-3 h-[22px] text-[10px] font-medium bg-[#e5e7eb] dark:bg-gray-600 text-[#111827] dark:text-white">
+                  {t("mintSwap.max")}
+                </button>
+              </div>
+            </div>
+
+            {/* Input Row */}
+            <div className="flex items-center justify-between">
+              <button className="bg-bg-surface dark:bg-gray-600 rounded-full border border-border-normal dark:border-gray-500 px-2 h-[46px] flex items-center gap-2">
+                <Image
+                  src="/usd-coin-usdc-logo-10.svg"
+                  alt="USDC"
+                  width={32}
+                  height={32}
+                />
+                <span className="text-body-default font-bold text-text-primary dark:text-white">USDC</span>
+              </button>
+              <div className="flex flex-col items-end">
+                <span className="text-heading-h3 font-bold text-[#d1d5db] dark:text-gray-500">
+                  0.00
+                </span>
+                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">--</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Estimated Returns */}
+        <div className="bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 p-4 flex flex-col gap-2">
+          <div className="flex items-center justify-between h-5">
+            <span className="text-body-small font-bold text-[#4b5563] dark:text-gray-300">
+              {t("mintSwap.estimatedReturns")}
+            </span>
+          </div>
+          <div className="flex items-center justify-between h-5">
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
+              {t("mintSwap.estAPY")}
+            </span>
+            <span className="text-body-small font-bold text-[#ff6900] dark:text-orange-400">
+              22%
+            </span>
+          </div>
+          <div className="flex items-center justify-between h-5">
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
+              {t("mintSwap.estReturns")}
+            </span>
+            <span className="text-body-small font-bold text-[#10b981] dark:text-green-400">
+              ~ $0.50
+            </span>
+          </div>
+        </div>
+
+        {/* Transaction Summary */}
+        <div className="bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 p-4 flex flex-col gap-2">
+          <div className="flex items-center justify-between h-5">
+            <span className="text-body-small font-bold text-[#4b5563] dark:text-gray-300">
+              {t("mintSwap.transactionSummary")}
+            </span>
+          </div>
+          <div className="flex items-center justify-between h-5">
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
+              {t("mintSwap.youGet")}
+            </span>
+            <span className="text-body-small font-bold text-[#10b981] dark:text-green-400">
+              9852.21 GYUS
+            </span>
+          </div>
+          <div className="flex items-center justify-between h-5">
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
+              {t("mintSwap.salesPrice")}
+            </span>
+            <span className="text-body-small font-bold text-text-primary dark:text-white">$1.04 USDC</span>
+          </div>
+          <div className="flex items-center justify-between h-5">
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
+              {t("mintSwap.fee")}
+            </span>
+            <span className="text-body-small font-bold text-[#dc2626] dark:text-red-400">
+              -$50 (0.5%)
+            </span>
+          </div>
+          <div className="flex items-center justify-between h-5">
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
+              {t("mintSwap.gas")}
+            </span>
+            <span className="text-body-small font-bold text-[#dc2626] dark:text-red-400">
+              -$0.09
+            </span>
+          </div>
+        </div>
+
+        {/* Submit Button */}
+        <button
+          className="rounded-xl h-12 flex items-center justify-center gap-2 bg-[#9ca1af] dark:bg-gray-600"
+          disabled
+        >
+          <span className="text-lg font-bold text-white leading-7">
+            {t("mintSwap.approveDeposit")}
+          </span>
+          <Image src="/icon8.svg" alt="" width={20} height={20} />
+        </button>
+
+        {/* Terms */}
+        <div className="flex flex-col gap-0 text-center">
+          <div className="text-caption-tiny font-regular">
+            <span className="text-[#9ca1af] dark:text-gray-400">
+              {t("mintSwap.termsText")}{" "}
+            </span>
+            <span className="text-[#10b981] dark:text-green-400">
+              {t("mintSwap.termsOfService")}
+            </span>
+            <span className="text-[#9ca1af] dark:text-gray-400">
+              {" "}{t("mintSwap.and")}
+            </span>
+          </div>
+          <span className="text-caption-tiny font-regular text-[#10b981] dark:text-green-400">
+            {t("mintSwap.privacyPolicy")}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}