From 4e5743512c829957d71cb9d25293af856258587d Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Sun, 8 Mar 2026 04:35:21 -0400
Subject: [PATCH] Checkpoint: Fix: Added "Connect MetaMask to auto-fill" button
 in TRC20Panel. When user has MetaMask installed but not connected, a blue
 button appears above the EVM address input. Clicking it triggers
 eth_requestAccounts popup and auto-fills the address. Also improved auto-sync
 when wallet.address changes. Deployed to pre-sale.newassetchain.io.

---
 client/src/pages/Home.tsx | 62 +++++++++++++++++++++++++++++++++------
 1 file changed, 53 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 9b9706c..7be4a17 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -104,20 +104,42 @@ function StepBadge({ num, text }: { num: number; text: string }) {
 }
 
 // ─── TRC20 Purchase Panel ─────────────────────────────────────────────────────
-function TRC20Panel({ usdtAmount, lang, connectedAddress }: { usdtAmount: number; lang: Lang; connectedAddress?: string }) {
+function TRC20Panel({ usdtAmount, lang, connectedAddress, onConnectWallet }: { usdtAmount: number; lang: Lang; connectedAddress?: string; onConnectWallet?: () => void }) {
   const { t } = useTranslation(lang);
   const tokenAmount = usdtAmount / PRESALE_CONFIG.tokenPrice;
   const [copied, setCopied] = useState(false);
   const [evmAddress, setEvmAddress] = useState(connectedAddress || "");
-
-  // Auto-fill EVM address when wallet connects
-  useEffect(() => {
-    if (connectedAddress && !evmAddress) {
-      setEvmAddress(connectedAddress);
-    }
-  }, [connectedAddress]);
   const [evmAddrError, setEvmAddrError] = useState("");
   const [submitted, setSubmitted] = useState(false);
+  const [isAutoConnecting, setIsAutoConnecting] = useState(false);
+  const hasEthereum = typeof window !== "undefined" && !!window.ethereum;
+
+  // Auto-fill EVM address whenever wallet connects or address changes (unless user already submitted)
+  useEffect(() => {
+    if (connectedAddress && !submitted) {
+      setEvmAddress(connectedAddress);
+    }
+  }, [connectedAddress, submitted]);
+
+  // Auto-connect EVM wallet from within TRC20 panel
+  const handleAutoConnectEVM = async () => {
+    if (!window.ethereum) return;
+    setIsAutoConnecting(true);
+    try {
+      const accounts = await window.ethereum.request({ method: "eth_requestAccounts" }) as string[];
+      if (accounts && accounts.length > 0 && !submitted) {
+        setEvmAddress(accounts[0]);
+        setEvmAddrError("");
+        toast.success(lang === "zh" ? "EVM地址已自动填充！" : "EVM address auto-filled!");
+      }
+      // Also notify parent to update wallet state
+      if (onConnectWallet) onConnectWallet();
+    } catch {
+      // User rejected or error — silently ignore
+    } finally {
+      setIsAutoConnecting(false);
+    }
+  };
 
   const submitTrc20Mutation = trpc.presale.registerTrc20Intent.useMutation({
     onSuccess: () => {
@@ -165,6 +187,28 @@ function TRC20Panel({ usdtAmount, lang, connectedAddress }: { usdtAmount: number
             : "XIC tokens are distributed on BSC. Please provide your BSC/ETH address (starts with 0x) so we can send your tokens."}
         </p>
         <div className="space-y-2">
+          {/* Auto-connect button — shown when MetaMask is available but address not yet filled */}
+          {hasEthereum && !connectedAddress && !evmAddress && (
+            <button
+              onClick={handleAutoConnectEVM}
+              disabled={isAutoConnecting}
+              className="w-full py-2.5 rounded-xl text-sm font-semibold flex items-center justify-center gap-2 transition-all hover:opacity-90"
+              style={{
+                background: "rgba(0,212,255,0.12)",
+                border: "1px solid rgba(0,212,255,0.35)",
+                color: "#00d4ff",
+              }}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/>
+                <path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/>
+                <path d="M18 12a2 2 0 0 0 0 4h4v-4z"/>
+              </svg>
+              {isAutoConnecting
+                ? (lang === "zh" ? "连接中..." : "Connecting...")
+                : (lang === "zh" ? "连接MetaMask自动填充地址" : "Connect MetaMask to auto-fill")}
+            </button>
+          )}
           <input
             type="text"
             value={evmAddress}
@@ -1024,7 +1068,7 @@ export default function Home() {
                         ))}
                       </div>
                     </div>
-                    <TRC20Panel usdtAmount={parseFloat(trcUsdtAmount) || 0} lang={lang} connectedAddress={wallet.address || undefined} />
+                    <TRC20Panel usdtAmount={parseFloat(trcUsdtAmount) || 0} lang={lang} connectedAddress={wallet.address || undefined} onConnectWallet={wallet.connect} />
                   </div>
                 )}
               </div>