740 lines
31 KiB
TypeScript
740 lines
31 KiB
TypeScript
// NAC XIC Presale — Wallet Selector Component
|
||
// Detects installed EVM wallets and shows connect/install buttons for each
|
||
// v3: added mobile detection, DeepLink support for MetaMask/Trust/OKX App
|
||
|
||
import { useState, useEffect, useCallback } from "react";
|
||
|
||
type Lang = "zh" | "en";
|
||
|
||
interface WalletInfo {
|
||
id: string;
|
||
name: string;
|
||
icon: React.ReactNode;
|
||
installUrl: string;
|
||
mobileDeepLink?: string; // DeepLink to open current page in wallet's in-app browser
|
||
isInstalled: () => boolean;
|
||
connect: () => Promise<string | null>;
|
||
}
|
||
|
||
interface WalletSelectorProps {
|
||
lang: Lang;
|
||
onAddressDetected: (address: string) => void;
|
||
connectedAddress?: string;
|
||
compact?: boolean; // compact mode for BSC/ETH panel
|
||
}
|
||
|
||
// ── Wallet Icons ──────────────────────────────────────────────────────────────
|
||
|
||
const MetaMaskIcon = () => (
|
||
<svg width="24" height="24" viewBox="0 0 35 33" fill="none">
|
||
<path d="M32.96 1L19.4 10.7l2.5-5.9L32.96 1z" fill="#E17726" stroke="#E17726" strokeWidth="0.25" strokeLinecap="round" strokeLinejoin="round"/>
|
||
<path d="M2.04 1l13.46 9.8-2.38-5.99L2.04 1z" fill="#E27625" stroke="#E27625" strokeWidth="0.25" strokeLinecap="round" strokeLinejoin="round"/>
|
||
<path d="M28.22 23.53l-3.61 5.53 7.73 2.13 2.22-7.54-6.34-.12z" fill="#E27625" stroke="#E27625" strokeWidth="0.25" strokeLinecap="round" strokeLinejoin="round"/>
|
||
<path d="M.44 23.65l2.2 7.54 7.72-2.13-3.6-5.53-6.32.12z" fill="#E27625" stroke="#E27625" strokeWidth="0.25" strokeLinecap="round" strokeLinejoin="round"/>
|
||
<path d="M9.97 14.46l-2.16 3.26 7.69.35-.26-8.27-5.27 4.66z" fill="#E27625" stroke="#E27625" strokeWidth="0.25" strokeLinecap="round" strokeLinejoin="round"/>
|
||
<path d="M25.03 14.46l-5.35-4.75-.17 8.36 7.68-.35-2.16-3.26z" fill="#E27625" stroke="#E27625" strokeWidth="0.25" strokeLinecap="round" strokeLinejoin="round"/>
|
||
<path d="M10.36 29.06l4.63-2.24-3.99-3.11-.64 5.35z" fill="#E27625" stroke="#E27625" strokeWidth="0.25" strokeLinecap="round" strokeLinejoin="round"/>
|
||
<path d="M20.01 26.82l4.63 2.24-.64-5.35-3.99 3.11z" fill="#E27625" stroke="#E27625" strokeWidth="0.25" strokeLinecap="round" strokeLinejoin="round"/>
|
||
</svg>
|
||
);
|
||
|
||
const TrustWalletIcon = () => (
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="12" fill="#3375BB"/>
|
||
<path d="M12 4.5L6 7.5v5c0 3.31 2.57 6.41 6 7.5 3.43-1.09 6-4.19 6-7.5v-5L12 4.5z" fill="white" fillOpacity="0.9"/>
|
||
<path d="M10.5 12.5l1.5 1.5 3-3" stroke="#3375BB" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||
</svg>
|
||
);
|
||
|
||
const OKXIcon = () => (
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<rect width="24" height="24" rx="6" fill="#000"/>
|
||
<rect x="4" y="4" width="6" height="6" rx="1" fill="white"/>
|
||
<rect x="14" y="4" width="6" height="6" rx="1" fill="white"/>
|
||
<rect x="4" y="14" width="6" height="6" rx="1" fill="white"/>
|
||
<rect x="14" y="14" width="6" height="6" rx="1" fill="white"/>
|
||
<rect x="9" y="9" width="6" height="6" rx="1" fill="white"/>
|
||
</svg>
|
||
);
|
||
|
||
const CoinbaseIcon = () => (
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="12" fill="#0052FF"/>
|
||
<circle cx="12" cy="12" r="7" fill="white"/>
|
||
<rect x="9" y="10.5" width="6" height="3" rx="1.5" fill="#0052FF"/>
|
||
</svg>
|
||
);
|
||
|
||
const TokenPocketIcon = () => (
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<rect width="24" height="24" rx="6" fill="#2980FE"/>
|
||
<path d="M7 8h5a3 3 0 0 1 0 6H7V8z" fill="white"/>
|
||
<rect x="7" y="15" width="2.5" height="3" rx="1" fill="white"/>
|
||
</svg>
|
||
);
|
||
|
||
const BitgetIcon = () => (
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<rect width="24" height="24" rx="6" fill="#00F0FF"/>
|
||
<path d="M7 8h5a3 3 0 0 1 0 6H7V8z" fill="#000"/>
|
||
<path d="M12 14h2a3 3 0 0 1 0 6h-2v-6z" fill="#000"/>
|
||
</svg>
|
||
);
|
||
|
||
// ── Mobile detection ──────────────────────────────────────────────────────────
|
||
|
||
function isMobileBrowser(): boolean {
|
||
if (typeof window === "undefined") return false;
|
||
return /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||
}
|
||
|
||
// Check if running inside a wallet's in-app browser
|
||
function isInWalletBrowser(): boolean {
|
||
if (typeof window === "undefined") return false;
|
||
const ua = navigator.userAgent.toLowerCase();
|
||
const w = window as unknown as Record<string, unknown>;
|
||
const eth = w.ethereum as { isMetaMask?: boolean; isTrust?: boolean; isTrustWallet?: boolean; isOKExWallet?: boolean; isOkxWallet?: boolean } | undefined;
|
||
return !!(
|
||
eth?.isMetaMask ||
|
||
eth?.isTrust ||
|
||
eth?.isTrustWallet ||
|
||
eth?.isOKExWallet ||
|
||
eth?.isOkxWallet ||
|
||
ua.includes("metamask") ||
|
||
ua.includes("trust") ||
|
||
ua.includes("okex") ||
|
||
ua.includes("tokenpocket") ||
|
||
ua.includes("bitkeep")
|
||
);
|
||
}
|
||
|
||
// Build DeepLink URL for opening current page in wallet's in-app browser
|
||
function buildDeepLink(walletScheme: string): string {
|
||
const currentUrl = typeof window !== "undefined" ? window.location.href : "https://pre-sale.newassetchain.io";
|
||
// Remove protocol from URL for deeplink
|
||
const urlWithoutProtocol = currentUrl.replace(/^https?:\/\//, "");
|
||
return `${walletScheme}${urlWithoutProtocol}`;
|
||
}
|
||
|
||
// ── Provider detection helpers ────────────────────────────────────────────────
|
||
|
||
type EthProvider = {
|
||
isMetaMask?: boolean;
|
||
isTrust?: boolean;
|
||
isTrustWallet?: boolean;
|
||
isOKExWallet?: boolean;
|
||
isOkxWallet?: boolean;
|
||
isCoinbaseWallet?: boolean;
|
||
isTokenPocket?: boolean;
|
||
isBitkeep?: boolean;
|
||
isBitgetWallet?: boolean;
|
||
providers?: EthProvider[];
|
||
request: (args: { method: string; params?: unknown[] }) => Promise<unknown>;
|
||
};
|
||
|
||
function getEth(): EthProvider | null {
|
||
if (typeof window === "undefined") return null;
|
||
return (window as unknown as { ethereum?: EthProvider }).ethereum ?? null;
|
||
}
|
||
|
||
function getOKX(): EthProvider | null {
|
||
if (typeof window === "undefined") return null;
|
||
return (window as unknown as { okxwallet?: EthProvider }).okxwallet ?? null;
|
||
}
|
||
|
||
function getBitget(): EthProvider | null {
|
||
if (typeof window === "undefined") return null;
|
||
const w = window as unknown as { bitkeep?: { ethereum?: EthProvider } };
|
||
return w.bitkeep?.ethereum ?? null;
|
||
}
|
||
|
||
// Find a specific provider from the providers array or direct injection
|
||
function findProvider(predicate: (p: EthProvider) => boolean): EthProvider | null {
|
||
const eth = getEth();
|
||
if (!eth) return null;
|
||
if (eth.providers && Array.isArray(eth.providers)) {
|
||
return eth.providers.find(predicate) ?? null;
|
||
}
|
||
return predicate(eth) ? eth : null;
|
||
}
|
||
|
||
async function requestAccounts(provider: EthProvider): Promise<string | null> {
|
||
try {
|
||
const accounts = await provider.request({ method: "eth_requestAccounts" }) as string[];
|
||
return accounts?.[0] ?? null;
|
||
} catch (err: unknown) {
|
||
const error = err as { code?: number; message?: string };
|
||
// User rejected
|
||
if (error?.code === 4001) throw new Error("user_rejected");
|
||
// MetaMask not initialized / locked
|
||
if (error?.code === -32002) throw new Error("wallet_pending");
|
||
throw err;
|
||
}
|
||
}
|
||
|
||
// ── Wallet definitions ────────────────────────────────────────────────────────
|
||
|
||
function buildWallets(): WalletInfo[] {
|
||
return [
|
||
{
|
||
id: "metamask",
|
||
name: "MetaMask",
|
||
icon: <MetaMaskIcon />,
|
||
installUrl: "https://metamask.io/download/",
|
||
mobileDeepLink: buildDeepLink("https://metamask.app.link/dapp/"),
|
||
isInstalled: () => !!findProvider(p => !!p.isMetaMask),
|
||
connect: async () => {
|
||
const p = findProvider(p => !!p.isMetaMask) ?? getEth();
|
||
return p ? requestAccounts(p) : null;
|
||
},
|
||
},
|
||
{
|
||
id: "trust",
|
||
name: "Trust Wallet",
|
||
icon: <TrustWalletIcon />,
|
||
installUrl: "https://trustwallet.com/download",
|
||
mobileDeepLink: buildDeepLink("https://link.trustwallet.com/open_url?coin_id=60&url=https://"),
|
||
isInstalled: () => !!findProvider(p => !!(p.isTrust || p.isTrustWallet)),
|
||
connect: async () => {
|
||
const p = findProvider(p => !!(p.isTrust || p.isTrustWallet)) ?? getEth();
|
||
return p ? requestAccounts(p) : null;
|
||
},
|
||
},
|
||
{
|
||
id: "okx",
|
||
name: "OKX Wallet",
|
||
icon: <OKXIcon />,
|
||
installUrl: "https://www.okx.com/web3",
|
||
mobileDeepLink: buildDeepLink("okx://wallet/dapp/url?dappUrl=https://"),
|
||
isInstalled: () => !!(getOKX() || findProvider(p => !!(p.isOKExWallet || p.isOkxWallet))),
|
||
connect: async () => {
|
||
const p = getOKX() ?? findProvider(p => !!(p.isOKExWallet || p.isOkxWallet));
|
||
return p ? requestAccounts(p) : null;
|
||
},
|
||
},
|
||
{
|
||
id: "coinbase",
|
||
name: "Coinbase Wallet",
|
||
icon: <CoinbaseIcon />,
|
||
installUrl: "https://www.coinbase.com/wallet/downloads",
|
||
isInstalled: () => !!findProvider(p => !!p.isCoinbaseWallet),
|
||
connect: async () => {
|
||
const p = findProvider(p => !!p.isCoinbaseWallet) ?? getEth();
|
||
return p ? requestAccounts(p) : null;
|
||
},
|
||
},
|
||
{
|
||
id: "tokenpocket",
|
||
name: "TokenPocket",
|
||
icon: <TokenPocketIcon />,
|
||
installUrl: "https://www.tokenpocket.pro/en/download/app",
|
||
isInstalled: () => !!findProvider(p => !!p.isTokenPocket),
|
||
connect: async () => {
|
||
const p = findProvider(p => !!p.isTokenPocket) ?? getEth();
|
||
return p ? requestAccounts(p) : null;
|
||
},
|
||
},
|
||
{
|
||
id: "bitget",
|
||
name: "Bitget Wallet",
|
||
icon: <BitgetIcon />,
|
||
installUrl: "https://web3.bitget.com/en/wallet-download",
|
||
isInstalled: () => !!(getBitget() || findProvider(p => !!(p.isBitkeep || p.isBitgetWallet))),
|
||
connect: async () => {
|
||
const p = getBitget() ?? findProvider(p => !!(p.isBitkeep || p.isBitgetWallet));
|
||
return p ? requestAccounts(p) : null;
|
||
},
|
||
},
|
||
];
|
||
}
|
||
|
||
// Validate Ethereum address format
|
||
function isValidEthAddress(addr: string): boolean {
|
||
return /^0x[0-9a-fA-F]{40}$/.test(addr);
|
||
}
|
||
|
||
// ── Mobile DeepLink Panel ─────────────────────────────────────────────────────
|
||
|
||
function MobileDeepLinkPanel({ lang }: { lang: Lang }) {
|
||
const currentUrl = typeof window !== "undefined" ? window.location.href : "https://pre-sale.newassetchain.io";
|
||
const urlWithoutProtocol = currentUrl.replace(/^https?:\/\//, "");
|
||
|
||
const mobileWallets = [
|
||
{
|
||
id: "metamask",
|
||
name: "MetaMask",
|
||
icon: <MetaMaskIcon />,
|
||
deepLink: `https://metamask.app.link/dapp/${urlWithoutProtocol}`,
|
||
installUrl: "https://metamask.io/download/",
|
||
color: "#E27625",
|
||
},
|
||
{
|
||
id: "trust",
|
||
name: "Trust Wallet",
|
||
icon: <TrustWalletIcon />,
|
||
deepLink: `https://link.trustwallet.com/open_url?coin_id=60&url=${encodeURIComponent(currentUrl)}`,
|
||
installUrl: "https://trustwallet.com/download",
|
||
color: "#3375BB",
|
||
},
|
||
{
|
||
id: "okx",
|
||
name: "OKX Wallet",
|
||
icon: <OKXIcon />,
|
||
deepLink: `okx://wallet/dapp/url?dappUrl=${encodeURIComponent(currentUrl)}`,
|
||
installUrl: "https://www.okx.com/web3",
|
||
color: "#00F0FF",
|
||
},
|
||
{
|
||
id: "tokenpocket",
|
||
name: "TokenPocket",
|
||
icon: <TokenPocketIcon />,
|
||
deepLink: `tpoutside://pull?param=${encodeURIComponent(JSON.stringify({ url: currentUrl }))}`,
|
||
installUrl: "https://www.tokenpocket.pro/en/download/app",
|
||
color: "#2980FE",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
{/* Mobile guidance header */}
|
||
<div
|
||
className="rounded-xl p-4"
|
||
style={{ background: "rgba(240,180,41,0.08)", border: "1px solid rgba(240,180,41,0.25)" }}
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<span className="text-xl flex-shrink-0">📱</span>
|
||
<div>
|
||
<p className="text-sm font-semibold text-amber-300 mb-1">
|
||
{lang === "zh" ? "手机端连接钱包" : "Connect Wallet on Mobile"}
|
||
</p>
|
||
<p className="text-xs text-white/50 leading-relaxed">
|
||
{lang === "zh"
|
||
? "手机浏览器不支持钱包扩展。请选择以下任一钱包 App，在其内置浏览器中打开本页面即可连接钱包。"
|
||
: "Mobile browsers don't support wallet extensions. Open this page in a wallet app's built-in browser to connect."}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Wallet DeepLink buttons */}
|
||
<div className="space-y-2">
|
||
<p className="text-xs text-white/40 text-center">
|
||
{lang === "zh" ? "选择钱包 App 打开本页面" : "Choose a wallet app to open this page"}
|
||
</p>
|
||
{mobileWallets.map(wallet => (
|
||
<a
|
||
key={wallet.id}
|
||
href={wallet.deepLink}
|
||
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all hover:opacity-90 active:scale-[0.98] block"
|
||
style={{
|
||
background: "rgba(0,212,255,0.06)",
|
||
border: "1px solid rgba(0,212,255,0.2)",
|
||
}}
|
||
>
|
||
<span className="flex-shrink-0">{wallet.icon}</span>
|
||
<span className="flex-1 text-sm font-semibold text-white">{wallet.name}</span>
|
||
<span
|
||
className="text-xs px-2 py-0.5 rounded-full font-medium flex-shrink-0"
|
||
style={{ background: "rgba(0,212,255,0.15)", color: "#00d4ff" }}
|
||
>
|
||
{lang === "zh" ? "在 App 中打开" : "Open in App"}
|
||
</span>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(0,212,255,0.6)" strokeWidth="2" className="flex-shrink-0">
|
||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
|
||
<polyline points="15 3 21 3 21 9"/>
|
||
<line x1="10" y1="14" x2="21" y2="3"/>
|
||
</svg>
|
||
</a>
|
||
))}
|
||
</div>
|
||
|
||
{/* Step guide */}
|
||
<div
|
||
className="rounded-xl p-3 space-y-2"
|
||
style={{ background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)" }}
|
||
>
|
||
<p className="text-xs font-semibold text-white/50 mb-2">
|
||
{lang === "zh" ? "操作步骤" : "How it works"}
|
||
</p>
|
||
{[
|
||
lang === "zh" ? "1. 点击上方任一钱包 App 按钮" : "1. Tap any wallet app button above",
|
||
lang === "zh" ? "2. 在钱包 App 的内置浏览器中打开本页面" : "2. Page opens in the wallet app's browser",
|
||
lang === "zh" ? "3. 点击「连接钱包」即可自动连接" : "3. Tap 'Connect Wallet' to connect automatically",
|
||
].map((step, i) => (
|
||
<p key={i} className="text-xs text-white/35 leading-relaxed">{step}</p>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── WalletSelector Component ──────────────────────────────────────────────────
|
||
|
||
export function WalletSelector({ lang, onAddressDetected, connectedAddress, compact = false }: WalletSelectorProps) {
|
||
const [wallets, setWallets] = useState<WalletInfo[]>([]);
|
||
const [connecting, setConnecting] = useState<string | null>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [detecting, setDetecting] = useState(true);
|
||
const [showManual, setShowManual] = useState(false);
|
||
const [manualAddress, setManualAddress] = useState("");
|
||
const [manualError, setManualError] = useState<string | null>(null);
|
||
const [isMobile] = useState(() => isMobileBrowser());
|
||
const [inWalletBrowser] = useState(() => isInWalletBrowser());
|
||
|
||
const detectWallets = useCallback(() => {
|
||
setDetecting(true);
|
||
setError(null);
|
||
// Wait for wallet extensions to fully inject (up to 1500ms)
|
||
const timer = setTimeout(() => {
|
||
setWallets(buildWallets());
|
||
setDetecting(false);
|
||
}, 1500);
|
||
return () => clearTimeout(timer);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const cleanup = detectWallets();
|
||
return cleanup;
|
||
}, [detectWallets]);
|
||
|
||
const handleConnect = async (wallet: WalletInfo) => {
|
||
setConnecting(wallet.id);
|
||
setError(null);
|
||
try {
|
||
const address = await wallet.connect();
|
||
if (address) {
|
||
onAddressDetected(address);
|
||
} else {
|
||
setError(lang === "zh" ? "未获取到地址，请重试" : "No address returned, please try again");
|
||
}
|
||
} catch (err: unknown) {
|
||
const error = err as Error;
|
||
if (error.message === "user_rejected") {
|
||
setError(lang === "zh" ? "已取消连接" : "Connection cancelled");
|
||
} else if (error.message === "wallet_pending") {
|
||
setError(lang === "zh" ? "钱包请求处理中，请检查钱包弹窗" : "Wallet request pending, please check your wallet popup");
|
||
} else if (error.message?.includes("not initialized") || error.message?.includes("setup")) {
|
||
setError(lang === "zh"
|
||
? "请先完成钱包初始化设置，然后刷新页面重试"
|
||
: "Please complete wallet setup first, then refresh the page");
|
||
} else {
|
||
setError(lang === "zh" ? "连接失败，请重试" : "Connection failed, please try again");
|
||
}
|
||
} finally {
|
||
setConnecting(null);
|
||
}
|
||
};
|
||
|
||
const handleManualSubmit = () => {
|
||
const addr = manualAddress.trim();
|
||
if (!addr) {
|
||
setManualError(lang === "zh" ? "请输入钱包地址" : "Please enter wallet address");
|
||
return;
|
||
}
|
||
if (!isValidEthAddress(addr)) {
|
||
setManualError(lang === "zh" ? "地址格式无效，请输入正确的以太坊地址（0x开头，42位）" : "Invalid address format. Must be 0x followed by 40 hex characters");
|
||
return;
|
||
}
|
||
setManualError(null);
|
||
onAddressDetected(addr);
|
||
};
|
||
|
||
const installedWallets = wallets.filter(w => w.isInstalled());
|
||
const notInstalledWallets = wallets.filter(w => !w.isInstalled());
|
||
|
||
// If connected address is already set, show compact confirmation
|
||
if (connectedAddress) {
|
||
return (
|
||
<div
|
||
className="rounded-xl p-3 flex items-center gap-3"
|
||
style={{ background: "rgba(0,230,118,0.08)", border: "1px solid rgba(0,230,118,0.25)" }}
|
||
>
|
||
<div className="w-2 h-2 rounded-full bg-green-400 flex-shrink-0" />
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-xs text-green-400 font-semibold">
|
||
{lang === "zh" ? "钱包已连接" : "Wallet Connected"}
|
||
</p>
|
||
<p className="text-xs text-white/50 font-mono truncate">{connectedAddress}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Mobile browser (not in wallet app) — show DeepLink guide ──────────────
|
||
if (isMobile && !inWalletBrowser && !detecting) {
|
||
const hasInstalledWallet = installedWallets.length > 0;
|
||
|
||
if (!hasInstalledWallet) {
|
||
return (
|
||
<div className="space-y-3">
|
||
<MobileDeepLinkPanel lang={lang} />
|
||
|
||
{/* Manual address fallback */}
|
||
<div className="pt-1">
|
||
<button
|
||
onClick={() => { setShowManual(!showManual); setManualError(null); }}
|
||
className="w-full text-xs text-white/30 hover:text-white/50 transition-colors py-1 flex items-center justify-center gap-1"
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
|
||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||
</svg>
|
||
{showManual
|
||
? (lang === "zh" ? "收起手动输入" : "Hide manual input")
|
||
: (lang === "zh" ? "手动输入钱包地址" : "Enter address manually")}
|
||
</button>
|
||
|
||
{showManual && (
|
||
<div className="mt-2 space-y-2">
|
||
<p className="text-xs text-white/40 text-center">
|
||
{lang === "zh"
|
||
? "直接输入您的 EVM 钱包地址（0x 开头）"
|
||
: "Enter your EVM wallet address (starts with 0x)"}
|
||
</p>
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={manualAddress}
|
||
onChange={e => { setManualAddress(e.target.value); setManualError(null); }}
|
||
placeholder={lang === "zh" ? "0x..." : "0x..."}
|
||
className="flex-1 px-3 py-2 rounded-lg text-xs font-mono text-white/80 outline-none focus:ring-1"
|
||
style={{
|
||
background: "rgba(255,255,255,0.06)",
|
||
border: manualError ? "1px solid rgba(255,80,80,0.5)" : "1px solid rgba(255,255,255,0.12)",
|
||
}}
|
||
onKeyDown={e => e.key === "Enter" && handleManualSubmit()}
|
||
/>
|
||
<button
|
||
onClick={handleManualSubmit}
|
||
className="px-3 py-2 rounded-lg text-xs font-semibold transition-all hover:opacity-90 active:scale-95 whitespace-nowrap"
|
||
style={{ background: "rgba(0,212,255,0.15)", color: "#00d4ff", border: "1px solid rgba(0,212,255,0.3)" }}
|
||
>
|
||
{lang === "zh" ? "确认" : "Confirm"}
|
||
</button>
|
||
</div>
|
||
{manualError && (
|
||
<p className="text-xs text-red-400">{manualError}</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
// ── Loading state ─────────────────────────────────────────────────────────
|
||
if (detecting) {
|
||
return (
|
||
<div className="space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-xs font-semibold text-white/60 uppercase tracking-wider">
|
||
{lang === "zh" ? "选择钱包自动填充地址" : "Select wallet to auto-fill address"}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center justify-center py-4 gap-2">
|
||
<svg className="animate-spin w-4 h-4 text-white/40" fill="none" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
|
||
</svg>
|
||
<span className="text-xs text-white/40">
|
||
{lang === "zh" ? "正在检测钱包..." : "Detecting wallets..."}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-xs font-semibold text-white/60 uppercase tracking-wider">
|
||
{lang === "zh" ? "选择钱包自动填充地址" : "Select wallet to auto-fill address"}
|
||
</p>
|
||
{/* Refresh detection button */}
|
||
<button
|
||
onClick={detectWallets}
|
||
disabled={detecting}
|
||
className="flex items-center gap-1 text-xs px-2 py-1 rounded-lg transition-all hover:opacity-80"
|
||
style={{ background: "rgba(0,212,255,0.1)", color: "rgba(0,212,255,0.7)", border: "1px solid rgba(0,212,255,0.2)" }}
|
||
title={lang === "zh" ? "重新检测钱包" : "Re-detect wallets"}
|
||
>
|
||
<svg
|
||
width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
|
||
className={detecting ? "animate-spin" : ""}
|
||
>
|
||
<path d="M23 4v6h-6M1 20v-6h6"/>
|
||
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
|
||
</svg>
|
||
{detecting
|
||
? (lang === "zh" ? "检测中..." : "Detecting...")
|
||
: (lang === "zh" ? "刷新" : "Refresh")}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Installed wallets */}
|
||
{installedWallets.length > 0 && (
|
||
<div className="space-y-2">
|
||
{installedWallets.map(wallet => (
|
||
<button
|
||
key={wallet.id}
|
||
onClick={() => handleConnect(wallet)}
|
||
disabled={connecting === wallet.id}
|
||
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all hover:opacity-90 active:scale-[0.98]"
|
||
style={{
|
||
background: "rgba(0,212,255,0.08)",
|
||
border: "1px solid rgba(0,212,255,0.3)",
|
||
}}
|
||
>
|
||
<span className="flex-shrink-0">{wallet.icon}</span>
|
||
<span className="flex-1 text-left text-sm font-semibold text-white">{wallet.name}</span>
|
||
<span
|
||
className="text-xs px-2 py-0.5 rounded-full font-medium"
|
||
style={{ background: "rgba(0,212,255,0.15)", color: "#00d4ff" }}
|
||
>
|
||
{lang === "zh" ? "已安装" : "Installed"}
|
||
</span>
|
||
{connecting === wallet.id ? (
|
||
<svg className="animate-spin w-4 h-4 text-white/60 flex-shrink-0" fill="none" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
|
||
</svg>
|
||
) : (
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(0,212,255,0.7)" strokeWidth="2" className="flex-shrink-0">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* No wallets installed — desktop */}
|
||
{installedWallets.length === 0 && (
|
||
<div
|
||
className="rounded-xl p-4 text-center"
|
||
style={{ background: "rgba(255,255,255,0.04)", border: "1px dashed rgba(255,255,255,0.15)" }}
|
||
>
|
||
<p className="text-sm text-white/50 mb-1">
|
||
{lang === "zh" ? "未检测到 EVM 钱包" : "No EVM wallet detected"}
|
||
</p>
|
||
<p className="text-xs text-white/30 mb-3">
|
||
{lang === "zh"
|
||
? "请安装以下任一钱包，完成设置后点击上方「刷新」按钮"
|
||
: "Install any wallet below, then click Refresh above after setup"}
|
||
</p>
|
||
<p className="text-xs text-amber-400/70">
|
||
{lang === "zh"
|
||
? "💡 已安装MetaMask？请先完成钱包初始化（创建或导入钱包），再点击刷新"
|
||
: "💡 Have MetaMask? Complete wallet setup (create or import) first, then click Refresh"}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Not-installed wallets — show install links */}
|
||
{!compact && notInstalledWallets.length > 0 && (
|
||
<div className="space-y-1">
|
||
<p className="text-xs text-white/30 mt-2">
|
||
{lang === "zh" ? "未安装（点击安装）" : "Not installed (click to install)"}
|
||
</p>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
{notInstalledWallets.map(wallet => (
|
||
<a
|
||
key={wallet.id}
|
||
href={wallet.installUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="flex flex-col items-center gap-1.5 p-2.5 rounded-xl transition-all hover:opacity-80"
|
||
style={{
|
||
background: "rgba(255,255,255,0.04)",
|
||
border: "1px solid rgba(255,255,255,0.08)",
|
||
}}
|
||
>
|
||
<span className="opacity-40">{wallet.icon}</span>
|
||
<span className="text-xs text-white/30 text-center leading-tight">{wallet.name}</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* In compact mode, show install links inline */}
|
||
{compact && notInstalledWallets.length > 0 && installedWallets.length === 0 && (
|
||
<div className="flex flex-wrap gap-2">
|
||
{notInstalledWallets.slice(0, 4).map(wallet => (
|
||
<a
|
||
key={wallet.id}
|
||
href={wallet.installUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs transition-all hover:opacity-80"
|
||
style={{
|
||
background: "rgba(255,255,255,0.05)",
|
||
border: "1px solid rgba(255,255,255,0.1)",
|
||
color: "rgba(255,255,255,0.4)",
|
||
}}
|
||
>
|
||
<span className="opacity-50">{wallet.icon}</span>
|
||
{lang === "zh" ? `安装 ${wallet.name}` : `Install ${wallet.name}`}
|
||
</a>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{error && (
|
||
<p className="text-xs text-red-400 text-center">{error}</p>
|
||
)}
|
||
|
||
{/* Manual address input — divider */}
|
||
<div className="pt-1">
|
||
<button
|
||
onClick={() => { setShowManual(!showManual); setManualError(null); }}
|
||
className="w-full text-xs text-white/30 hover:text-white/50 transition-colors py-1 flex items-center justify-center gap-1"
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
|
||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||
</svg>
|
||
{showManual
|
||
? (lang === "zh" ? "收起手动输入" : "Hide manual input")
|
||
: (lang === "zh" ? "手动输入钱包地址" : "Enter address manually")}
|
||
</button>
|
||
|
||
{showManual && (
|
||
<div className="mt-2 space-y-2">
|
||
<p className="text-xs text-white/40 text-center">
|
||
{lang === "zh"
|
||
? "直接输入您的 EVM 钱包地址（0x 开头）"
|
||
: "Enter your EVM wallet address (starts with 0x)"}
|
||
</p>
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={manualAddress}
|
||
onChange={e => { setManualAddress(e.target.value); setManualError(null); }}
|
||
placeholder={lang === "zh" ? "0x..." : "0x..."}
|
||
className="flex-1 px-3 py-2 rounded-lg text-xs font-mono text-white/80 outline-none focus:ring-1"
|
||
style={{
|
||
background: "rgba(255,255,255,0.06)",
|
||
border: manualError ? "1px solid rgba(255,80,80,0.5)" : "1px solid rgba(255,255,255,0.12)",
|
||
}}
|
||
onKeyDown={e => e.key === "Enter" && handleManualSubmit()}
|
||
/>
|
||
<button
|
||
onClick={handleManualSubmit}
|
||
className="px-3 py-2 rounded-lg text-xs font-semibold transition-all hover:opacity-90 active:scale-95 whitespace-nowrap"
|
||
style={{ background: "rgba(0,212,255,0.15)", color: "#00d4ff", border: "1px solid rgba(0,212,255,0.3)" }}
|
||
>
|
||
{lang === "zh" ? "确认" : "Confirm"}
|
||
</button>
|
||
</div>
|
||
{manualError && (
|
||
<p className="text-xs text-red-400">{manualError}</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|