From f190d6c4c0e2a4bcd413ae5247de5fc125654444 Mon Sep 17 00:00:00 2001
From: default <xufuhan2002@qq.com>
Date: Fri, 30 Jan 2026 04:00:08 +0000
Subject: [PATCH] fix: add functional input field to MintSwapPanel

- Added HeroUI Input component for amount entry
- Replaced static text with editable input field
- Added state management for amount value
- Updated MAX button to use HeroUI Button and set max value
- Input now displays right-aligned with proper styling
- Shows USD equivalent below input

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 components/MintSwapPanel.tsx | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/components/MintSwapPanel.tsx b/components/MintSwapPanel.tsx
index 335451a..e53151d 100644
--- a/components/MintSwapPanel.tsx
+++ b/components/MintSwapPanel.tsx
@@ -3,12 +3,13 @@
 import { useState } from "react";
 import Image from "next/image";
 import { useApp } from "@/contexts/AppContext";
-import { Tabs, Tab, Button } from "@heroui/react";
+import { Tabs, Tab, Button, Input } from "@heroui/react";
 
 export default function MintSwapPanel() {
   const { t } = useApp();
   const [activeMode, setActiveMode] = useState<"mint" | "swap">("mint");
   const [activeAction, setActiveAction] = useState<"deposit" | "withdraw">("deposit");
+  const [amount, setAmount] = useState<string>("");
 
   return (
     <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 flex flex-col overflow-hidden">
@@ -61,9 +62,13 @@ export default function MintSwapPanel() {
                 <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">
+                <Button
+                  size="sm"
+                  className="rounded-full px-3 h-[22px] min-w-0 text-[10px] font-medium bg-[#e5e7eb] dark:bg-gray-600 text-[#111827] dark:text-white"
+                  onPress={() => setAmount("12500")}
+                >
                   {t("mintSwap.max")}
-                </button>
+                </Button>
               </div>
             </div>
 
@@ -78,11 +83,22 @@ export default function MintSwapPanel() {
                 />
                 <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
+              <div className="flex flex-col items-end flex-1">
+                <Input
+                  type="number"
+                  placeholder="0.00"
+                  value={amount}
+                  onValueChange={setAmount}
+                  classNames={{
+                    base: "max-w-full",
+                    mainWrapper: "h-auto",
+                    input: "text-right text-heading-h3 font-bold text-text-primary dark:text-white placeholder:text-[#d1d5db] dark:placeholder:text-gray-500",
+                    inputWrapper: "h-auto shadow-none bg-transparent p-0 border-none",
+                  }}
+                />
+                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
+                  {amount ? `≈ $${amount}` : "--"}
                 </span>
-                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">--</span>
               </div>
             </div>
           </div>