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:
parent
133aaedb68
commit
4e5743512c
|
|
@ -104,20 +104,42 @@ function StepBadge({ num, text }: { num: number; text: string }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── TRC20 Purchase Panel ─────────────────────────────────────────────────────
|
// ─── 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 { t } = useTranslation(lang);
|
||||||
const tokenAmount = usdtAmount / PRESALE_CONFIG.tokenPrice;
|
const tokenAmount = usdtAmount / PRESALE_CONFIG.tokenPrice;
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState(false);
|
||||||
const [evmAddress, setEvmAddress] = useState(connectedAddress || "");
|
const [evmAddress, setEvmAddress] = useState(connectedAddress || "");
|
||||||
|
|
||||||
// Auto-fill EVM address when wallet connects
|
|
||||||
useEffect(() => {
|
|
||||||
if (connectedAddress && !evmAddress) {
|
|
||||||
setEvmAddress(connectedAddress);
|
|
||||||
}
|
|
||||||
}, [connectedAddress]);
|
|
||||||
const [evmAddrError, setEvmAddrError] = useState("");
|
const [evmAddrError, setEvmAddrError] = useState("");
|
||||||
const [submitted, setSubmitted] = useState(false);
|
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({
|
const submitTrc20Mutation = trpc.presale.registerTrc20Intent.useMutation({
|
||||||
onSuccess: () => {
|
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."}
|
: "XIC tokens are distributed on BSC. Please provide your BSC/ETH address (starts with 0x) so we can send your tokens."}
|
||||||
</p>
|
</p>
|
||||||
<div className="space-y-2">
|
<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
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={evmAddress}
|
value={evmAddress}
|
||||||
|
|
@ -1024,7 +1068,7 @@ export default function Home() {
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue