fix(presale): EVMPurchasePanel - 修复ERC/BEP网络未连接钱包时金额输入框不显示的Bug
问题描述: - ERC/BEP面板在钱包未连接时直接早期返回,导致金额输入框不显示 - TRC面板始终显示金额输入框,造成用户体验不一致 修复方案: - 移除EVMPurchasePanel中的早期返回(if !wallet.isConnected) - 改为条件渲染:金额输入框和代币预览始终显示 - 钱包未连接时:在购买按钮位置显示连接钱包组件 - 错误网络时:顶部显示切换网络提示,购买按钮隐藏 - 钱包已连接且网络正确时:显示钱包信息和购买按钮 测试结果: - BSC/ETH/TRON三个网络均在未连接钱包状态下显示金额输入框 - 构建成功,已部署到AI服务器(43.224.155.27) - 服务已重启,trc-ico.newassetchain.io 已更新
This commit is contained in:
parent
4161d9e0bd
commit
0b27772718
|
|
@ -357,44 +357,7 @@ function EVMPurchasePanel({ network, lang, wallet }: { network: "BSC" | "ETH"; l
|
||||||
}
|
}
|
||||||
}, [purchaseState.step, purchaseState.error, purchaseState.tokenAmount, lang]);
|
}, [purchaseState.step, purchaseState.error, purchaseState.tokenAmount, lang]);
|
||||||
|
|
||||||
if (!wallet.isConnected) {
|
if (purchaseState.step === "success") {
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<p className="text-sm text-white/60 text-center">{t("buy_connect_msg")}</p>
|
|
||||||
<WalletSelector
|
|
||||||
lang={lang}
|
|
||||||
connectedAddress={wallet.address ?? undefined}
|
|
||||||
onAddressDetected={(addr) => {
|
|
||||||
// WalletSelector already called eth_requestAccounts and got the address
|
|
||||||
// Just show success toast; wallet state will auto-update via accountsChanged event
|
|
||||||
toast.success(lang === "zh" ? `已连接: ${addr.slice(0, 6)}...${addr.slice(-4)}` : `Connected: ${addr.slice(0, 6)}...${addr.slice(-4)}`);
|
|
||||||
}}
|
|
||||||
compact
|
|
||||||
/>
|
|
||||||
<div className="text-xs text-white/40 text-center">{t("buy_connect_hint")}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isWrongNetwork) {
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="rounded-xl p-4 text-center" style={{ background: "rgba(240,180,41,0.08)", border: "1px solid rgba(240,180,41,0.3)" }}>
|
|
||||||
<div className="text-3xl mb-2">⚠️</div>
|
|
||||||
<p className="text-amber-300 font-semibold mb-1">{t("buy_wrong_network")}</p>
|
|
||||||
<p className="text-white/60 text-sm mb-4">{t("buy_wrong_msg")} {CONTRACTS[network].chainName}</p>
|
|
||||||
<button
|
|
||||||
onClick={() => wallet.switchNetwork(targetChainId)}
|
|
||||||
className="btn-primary-nac px-6 py-2 rounded-lg text-sm font-bold"
|
|
||||||
>
|
|
||||||
{t("buy_switch")} {network === "BSC" ? "BSC" : "Ethereum"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (purchaseState.step === "success") {
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 text-center py-4">
|
<div className="space-y-4 text-center py-4">
|
||||||
<div className="text-5xl mb-3">🎉</div>
|
<div className="text-5xl mb-3">🎉</div>
|
||||||
|
|
@ -425,16 +388,32 @@ function EVMPurchasePanel({ network, lang, wallet }: { network: "BSC" | "ETH"; l
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{/* Wallet info */}
|
{/* Wallet info — only shown when connected */}
|
||||||
<div className="flex items-center justify-between px-3 py-2 rounded-lg" style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}>
|
{wallet.isConnected && !isWrongNetwork && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center justify-between px-3 py-2 rounded-lg" style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}>
|
||||||
<div className="w-2 h-2 rounded-full bg-green-400" style={{ boxShadow: "0 0 6px #00e676" }} />
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-xs text-white/60 counter-digit">{shortenAddress(wallet.address || "")}</span>
|
<div className="w-2 h-2 rounded-full bg-green-400" style={{ boxShadow: "0 0 6px #00e676" }} />
|
||||||
|
<span className="text-xs text-white/60 counter-digit">{shortenAddress(wallet.address || "")}</span>
|
||||||
|
</div>
|
||||||
|
{usdtBalance !== null && (
|
||||||
|
<span className="text-xs text-white/50">{t("buy_balance")} <span className="text-white/80 counter-digit">{usdtBalance.toFixed(2)} USDT</span></span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{usdtBalance !== null && (
|
)}
|
||||||
<span className="text-xs text-white/50">{t("buy_balance")} <span className="text-white/80 counter-digit">{usdtBalance.toFixed(2)} USDT</span></span>
|
{/* Wrong network banner */}
|
||||||
)}
|
{isWrongNetwork && (
|
||||||
</div>
|
<div className="rounded-xl p-4 text-center" style={{ background: "rgba(240,180,41,0.08)", border: "1px solid rgba(240,180,41,0.3)" }}>
|
||||||
|
<div className="text-3xl mb-2">⚠️</div>
|
||||||
|
<p className="text-amber-300 font-semibold mb-1">{t("buy_wrong_network")}</p>
|
||||||
|
<p className="text-white/60 text-sm mb-4">{t("buy_wrong_msg")} {CONTRACTS[network].chainName}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => wallet.switchNetwork(targetChainId)}
|
||||||
|
className="btn-primary-nac px-6 py-2 rounded-lg text-sm font-bold"
|
||||||
|
>
|
||||||
|
{t("buy_switch")} {network === "BSC" ? "BSC" : "Ethereum"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* USDT Amount Input */}
|
{/* USDT Amount Input */}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
|
|
@ -502,19 +481,34 @@ function EVMPurchasePanel({ network, lang, wallet }: { network: "BSC" | "ETH"; l
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Buy Button */}
|
{/* Buy Button — or Connect Wallet if not connected */}
|
||||||
<button
|
{!wallet.isConnected ? (
|
||||||
onClick={handleBuy}
|
<div className="space-y-3">
|
||||||
disabled={isProcessing || !isValidAmount}
|
<p className="text-sm text-white/60 text-center">{t("buy_connect_msg")}</p>
|
||||||
className="btn-primary-nac w-full py-4 rounded-xl text-base font-bold"
|
<WalletSelector
|
||||||
style={{ fontFamily: "'Space Grotesk', sans-serif" }}
|
lang={lang}
|
||||||
>
|
connectedAddress={wallet.address ?? undefined}
|
||||||
{isProcessing
|
onAddressDetected={(addr) => {
|
||||||
? purchaseState.step === "approving" ? t("buy_approving")
|
toast.success(lang === "zh" ? `已连接: ${addr.slice(0, 6)}...${addr.slice(-4)}` : `Connected: ${addr.slice(0, 6)}...${addr.slice(-4)}`);
|
||||||
: purchaseState.step === "approved" ? t("buy_approved")
|
}}
|
||||||
: t("buy_processing")
|
compact
|
||||||
: `${t("buy_btn")} ${formatNumber(tokenAmount)} XIC`}
|
/>
|
||||||
</button>
|
<div className="text-xs text-white/40 text-center">{t("buy_connect_hint")}</div>
|
||||||
|
</div>
|
||||||
|
) : isWrongNetwork ? null : (
|
||||||
|
<button
|
||||||
|
onClick={handleBuy}
|
||||||
|
disabled={isProcessing || !isValidAmount}
|
||||||
|
className="btn-primary-nac w-full py-4 rounded-xl text-base font-bold"
|
||||||
|
style={{ fontFamily: "'Space Grotesk', sans-serif" }}
|
||||||
|
>
|
||||||
|
{isProcessing
|
||||||
|
? purchaseState.step === "approving" ? t("buy_approving")
|
||||||
|
: purchaseState.step === "approved" ? t("buy_approved")
|
||||||
|
: t("buy_processing")
|
||||||
|
: `${t("buy_btn")} ${formatNumber(tokenAmount)} XIC`}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
<p className="text-xs text-center text-white/30">
|
<p className="text-xs text-center text-white/30">
|
||||||
{PRESALE_CONFIG.maxPurchaseUSDT > 0
|
{PRESALE_CONFIG.maxPurchaseUSDT > 0
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue