nacadmin
/
xic-presale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.

This commit is contained in:
Manus 2026-03-08 04:35:21 -04:00
parent 133aaedb68
commit 4e5743512c
1 changed files with 53 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
client/src/pages/Home.tsx
View File

@ -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>