1379 lines
69 KiB
TypeScript
1379 lines
69 KiB
TypeScript
// NAC XIC Token Presale — Main Page v3.0
|
||
// Features: Real on-chain data | Bilingual (EN/ZH) | TRC20 Live Feed | Wallet Connect
|
||
// Design: Dark Cyberpunk / Quantum Finance
|
||
// Colors: Amber Gold #f0b429 | Quantum Blue #00d4ff | Deep Black #0a0a0f
|
||
|
||
import { useState, useEffect, useCallback, useRef, useMemo } from "react";
|
||
import { toast } from "sonner";
|
||
import { Link } from "wouter";
|
||
import { useWallet } from "@/hooks/useWallet";
|
||
import { usePresale } from "@/hooks/usePresale";
|
||
import { CONTRACTS, PRESALE_CONFIG, formatNumber, shortenAddress } from "@/lib/contracts";
|
||
import { trpc } from "@/lib/trpc";
|
||
import { type Lang, useTranslation } from "@/lib/i18n";
|
||
import { WalletSelector } from "@/components/WalletSelector";
|
||
|
||
// ─── Network Tab Types ────────────────────────────────────────────────────────
|
||
type NetworkTab = "BSC" | "ETH" | "TRON";
|
||
|
||
// ─── Assets ───────────────────────────────────────────────────────────────────
|
||
const HERO_BG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663287655625/Ngki3MumDNGduV3xJt3mga/nac-hero-bg_7c6c173e.jpg";
|
||
const TOKEN_ICON = "https://d2xsxph8kpxj0f.cloudfront.net/310519663287655625/Ngki3MumDNGduV3xJt3mga/nac-token-icon_382e5c30.png";
|
||
|
||
// ─── Fallback stats while loading ─────────────────────────────────────────────
|
||
const FALLBACK_STATS = {
|
||
totalUsdtRaised: 0,
|
||
totalTokensSold: 0,
|
||
hardCap: 5_000_000,
|
||
progressPct: 0,
|
||
};
|
||
|
||
// ─── Countdown Timer ──────────────────────────────────────────────────────────
|
||
function useCountdown(targetDate: Date) {
|
||
const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });
|
||
useEffect(() => {
|
||
const tick = () => {
|
||
const diff = targetDate.getTime() - Date.now();
|
||
if (diff <= 0) { setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 }); return; }
|
||
setTimeLeft({
|
||
days: Math.floor(diff / 86400000),
|
||
hours: Math.floor((diff % 86400000) / 3600000),
|
||
minutes: Math.floor((diff % 3600000) / 60000),
|
||
seconds: Math.floor((diff % 60000) / 1000),
|
||
});
|
||
};
|
||
tick();
|
||
const id = setInterval(tick, 1000);
|
||
return () => clearInterval(id);
|
||
}, [targetDate]);
|
||
return timeLeft;
|
||
}
|
||
|
||
// ─── Animated Counter ─────────────────────────────────────────────────────────
|
||
function AnimatedCounter({ value, prefix = "", suffix = "" }: { value: number; prefix?: string; suffix?: string }) {
|
||
const [display, setDisplay] = useState(0);
|
||
useEffect(() => {
|
||
if (value === 0) return;
|
||
let start = 0;
|
||
const step = value / 60;
|
||
const id = setInterval(() => {
|
||
start += step;
|
||
if (start >= value) { setDisplay(value); clearInterval(id); }
|
||
else setDisplay(Math.floor(start));
|
||
}, 16);
|
||
return () => clearInterval(id);
|
||
}, [value]);
|
||
return <span className="counter-digit">{prefix}{display.toLocaleString()}{suffix}</span>;
|
||
}
|
||
|
||
// ─── Network Icon ─────────────────────────────────────────────────────────────
|
||
function NetworkIcon({ network }: { network: NetworkTab }) {
|
||
if (network === "BSC") return (
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="12" fill="#F0B90B"/>
|
||
<path d="M9.4 12L12 9.4L14.6 12L12 14.6L9.4 12Z" fill="white"/>
|
||
<path d="M6 12L8.6 9.4L11.2 12L8.6 14.6L6 12Z" fill="white" opacity="0.7"/>
|
||
<path d="M12.8 12L15.4 9.4L18 12L15.4 14.6L12.8 12Z" fill="white" opacity="0.7"/>
|
||
<path d="M9.4 8.6L12 6L14.6 8.6L12 11.2L9.4 8.6Z" fill="white" opacity="0.5"/>
|
||
<path d="M9.4 15.4L12 12.8L14.6 15.4L12 18L9.4 15.4Z" fill="white" opacity="0.5"/>
|
||
</svg>
|
||
);
|
||
if (network === "ETH") return (
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="12" fill="#627EEA"/>
|
||
<path d="M12 4L7 12.5L12 15.5L17 12.5L12 4Z" fill="white" opacity="0.9"/>
|
||
<path d="M12 16.5L7 13.5L12 20L17 13.5L12 16.5Z" fill="white" opacity="0.7"/>
|
||
</svg>
|
||
);
|
||
return (
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="12" fill="#FF0013"/>
|
||
<path d="M12 5L19 9.5V14.5L12 19L5 14.5V9.5L12 5Z" fill="white" opacity="0.9"/>
|
||
<path d="M12 8L16 10.5V13.5L12 16L8 13.5V10.5L12 8Z" fill="#FF0013"/>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
// ─── Step Badge ───────────────────────────────────────────────────────────────
|
||
function StepBadge({ num, text }: { num: number; text: string }) {
|
||
return (
|
||
<div className="flex items-start gap-3">
|
||
<div className="step-num">{num}</div>
|
||
<span className="text-sm text-white/70 leading-relaxed">{text}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── TRC20 Purchase Panel ─────────────────────────────────────────────────────
|
||
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 || "");
|
||
const [evmAddrError, setEvmAddrError] = useState("");
|
||
const [submitted, setSubmitted] = useState(false);
|
||
// TronLink detection state
|
||
const [tronAddress, setTronAddress] = useState<string | null>(null);
|
||
const [isTronConnecting, setIsTronConnecting] = useState(false);
|
||
const hasTronLink = typeof window !== "undefined" && (!!(window as unknown as Record<string, unknown>).tronWeb || !!(window as unknown as Record<string, unknown>).tronLink);
|
||
|
||
// Auto-detect TronLink on mount
|
||
useEffect(() => {
|
||
const detectTron = async () => {
|
||
// Wait briefly for TronLink to inject
|
||
await new Promise(resolve => setTimeout(resolve, 500));
|
||
const tronWeb = (window as unknown as Record<string, unknown>).tronWeb as { defaultAddress?: { base58?: string }; ready?: boolean } | undefined;
|
||
if (tronWeb && tronWeb.ready && tronWeb.defaultAddress?.base58) {
|
||
setTronAddress(tronWeb.defaultAddress.base58);
|
||
}
|
||
};
|
||
detectTron();
|
||
}, []);
|
||
|
||
// Connect TronLink wallet
|
||
const handleConnectTronLink = async () => {
|
||
setIsTronConnecting(true);
|
||
try {
|
||
const tronLink = (window as unknown as Record<string, unknown>).tronLink as { request?: (args: { method: string }) => Promise<{ code: number }> } | undefined;
|
||
const tronWeb = (window as unknown as Record<string, unknown>).tronWeb as { defaultAddress?: { base58?: string }; ready?: boolean } | undefined;
|
||
if (tronLink?.request) {
|
||
const result = await tronLink.request({ method: 'tron_requestAccounts' });
|
||
if (result?.code === 200 && tronWeb?.defaultAddress?.base58) {
|
||
setTronAddress(tronWeb.defaultAddress.base58);
|
||
toast.success(lang === "zh" ? "TronLink已连接！" : "TronLink connected!");
|
||
}
|
||
} else if (tronWeb?.ready && tronWeb.defaultAddress?.base58) {
|
||
setTronAddress(tronWeb.defaultAddress.base58);
|
||
toast.success(lang === "zh" ? "TronLink已检测到！" : "TronLink detected!");
|
||
} else {
|
||
toast.error(lang === "zh" ? "请安装TronLink钱包扩展" : "Please install TronLink wallet extension");
|
||
}
|
||
} catch {
|
||
toast.error(lang === "zh" ? "连接TronLink失败" : "Failed to connect TronLink");
|
||
} finally {
|
||
setIsTronConnecting(false);
|
||
}
|
||
};
|
||
|
||
// Auto-fill EVM address whenever wallet connects or address changes (unless user already submitted)
|
||
useEffect(() => {
|
||
if (connectedAddress && !submitted) {
|
||
setEvmAddress(connectedAddress);
|
||
}
|
||
}, [connectedAddress, submitted]);
|
||
|
||
const submitTrc20Mutation = trpc.presale.registerTrc20Intent.useMutation({
|
||
onSuccess: () => {
|
||
setSubmitted(true);
|
||
toast.success(lang === "zh" ? "XIC接收地址已保存！" : "XIC receiving address saved!");
|
||
},
|
||
onError: (err: { message: string }) => {
|
||
toast.error(err.message);
|
||
},
|
||
});
|
||
|
||
const copyAddress = () => {
|
||
navigator.clipboard.writeText(CONTRACTS.TRON.receivingWallet);
|
||
setCopied(true);
|
||
toast.success(lang === "zh" ? "地址已复制到剪贴板！" : "Address copied to clipboard!");
|
||
setTimeout(() => setCopied(false), 2000);
|
||
};
|
||
|
||
const validateEvmAddress = (addr: string) => {
|
||
if (!addr) return lang === "zh" ? "请输入您的XIC接收地址" : "Please enter your XIC receiving address";
|
||
if (!/^0x[0-9a-fA-F]{40}$/.test(addr)) return lang === "zh" ? "无效的XIC接收地址格式（应以0x开头，入42位）" : "Invalid XIC receiving address format (must start with 0x, 42 chars)";
|
||
return "";
|
||
};
|
||
|
||
const handleEvmSubmit = () => {
|
||
const err = validateEvmAddress(evmAddress);
|
||
if (err) { setEvmAddrError(err); return; }
|
||
setEvmAddrError("");
|
||
submitTrc20Mutation.mutate({ evmAddress });
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* EVM Address Input — Required for token distribution */}
|
||
<div className="rounded-xl p-4 space-y-3" style={{ background: "rgba(240,180,41,0.06)", border: "1px solid rgba(240,180,41,0.25)" }}>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-amber-400 text-sm">⚠️</span>
|
||
<p className="text-sm font-semibold text-amber-300">
|
||
{lang === "zh" ? "必填：您的XIC接收地址（BSC/ETH钉包地址）" : "Required: Your XIC Receiving Address (BSC/ETH wallet address)"}
|
||
</p>
|
||
</div>
|
||
<p className="text-xs text-white/50">
|
||
{lang === "zh"
|
||
? "XIC代币将发放到您的BSC/ETH钉包地址（0x开头）。请确保填写正确的地址，否则无法收到代币。"
|
||
: "XIC tokens will be sent to your BSC/ETH wallet address (starts with 0x). Please make sure to enter the correct address."}
|
||
</p>
|
||
<div className="space-y-2">
|
||
{/* WalletSelector — shown when address not yet filled */}
|
||
{!evmAddress && !submitted && (
|
||
<WalletSelector
|
||
lang={lang}
|
||
connectedAddress={connectedAddress}
|
||
onAddressDetected={(addr) => {
|
||
setEvmAddress(addr);
|
||
setEvmAddrError("");
|
||
toast.success(lang === "zh" ? "XIC接收地址已自动填充！" : "XIC receiving address auto-filled!");
|
||
if (onConnectWallet) onConnectWallet();
|
||
}}
|
||
/>
|
||
)}
|
||
<input
|
||
type="text"
|
||
value={evmAddress}
|
||
onChange={e => { setEvmAddress(e.target.value); setEvmAddrError(""); setSubmitted(false); }}
|
||
placeholder={lang === "zh" ? "0x... (您的XIC接收地址)" : "0x... (your XIC receiving address)"}
|
||
className="w-full px-4 py-3 rounded-xl text-sm font-mono"
|
||
style={{
|
||
background: "rgba(255,255,255,0.05)",
|
||
border: evmAddrError ? "1px solid rgba(255,82,82,0.5)" : submitted ? "1px solid rgba(0,230,118,0.4)" : "1px solid rgba(255,255,255,0.12)",
|
||
color: "white",
|
||
outline: "none",
|
||
}}
|
||
/>
|
||
{evmAddrError && <p className="text-xs text-red-400">{evmAddrError}</p>}
|
||
{submitted && <p className="text-xs text-green-400">✓ {lang === "zh" ? "XIC接收地址已保存" : "XIC receiving address saved"}</p>}
|
||
<button
|
||
onClick={handleEvmSubmit}
|
||
disabled={submitTrc20Mutation.isPending || submitted || !evmAddress}
|
||
className="w-full py-2 rounded-lg text-sm font-semibold transition-all"
|
||
style={{
|
||
background: submitted ? "rgba(0,230,118,0.15)" : "rgba(240,180,41,0.15)",
|
||
border: submitted ? "1px solid rgba(0,230,118,0.3)" : "1px solid rgba(240,180,41,0.3)",
|
||
color: submitted ? "#00e676" : "#f0b429",
|
||
opacity: !evmAddress ? 0.5 : 1,
|
||
}}
|
||
>
|
||
{submitTrc20Mutation.isPending ? (lang === "zh" ? "保存中..." : "Saving...") : submitted ? (lang === "zh" ? "✓ 已保存" : "✓ Saved") : (lang === "zh" ? "保存XIC接收地址" : "Save XIC Receiving Address")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* TronLink Wallet Detection */}
|
||
<div className="rounded-xl p-4 space-y-3" style={{ background: "rgba(255,0,19,0.06)", border: "1px solid rgba(255,0,19,0.25)" }}>
|
||
<div className="flex items-center gap-2">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="12" fill="#FF0013"/>
|
||
<path d="M12 5L19 9.5V14.5L12 19L5 14.5V9.5L12 5Z" fill="white" opacity="0.9"/>
|
||
<path d="M12 8L16 10.5V13.5L12 16L8 13.5V10.5L12 8Z" fill="#FF0013"/>
|
||
</svg>
|
||
<p className="text-sm font-semibold" style={{ color: "#ff6b6b" }}>
|
||
{lang === "zh" ? "TronLink 钱包（可选）" : "TronLink Wallet (Optional)"}
|
||
</p>
|
||
</div>
|
||
{tronAddress ? (
|
||
<div className="space-y-2">
|
||
<p className="text-xs text-white/50">
|
||
{lang === "zh" ? "已连接 TronLink 地址：" : "Connected TronLink address:"}
|
||
</p>
|
||
<div
|
||
className="p-3 rounded-lg text-xs font-mono break-all"
|
||
style={{ background: "rgba(0,230,118,0.08)", border: "1px solid rgba(0,230,118,0.3)", color: "#00e676" }}
|
||
>
|
||
✓ {tronAddress}
|
||
</div>
|
||
<p className="text-xs text-white/40">
|
||
{lang === "zh"
|
||
? "您的 TronLink 已连接。请在上方填写 XIC 接收地址，然后向下方地址发送 USDT。"
|
||
: "TronLink connected. Please fill your XIC receiving address above, then send USDT to the address below."}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
<p className="text-xs text-white/50">
|
||
{lang === "zh"
|
||
? "如果您使用 TronLink 钱包，可以连接后自动验证您的 TRON 地址。"
|
||
: "If you use TronLink wallet, connect to auto-verify your TRON address."}
|
||
</p>
|
||
{hasTronLink ? (
|
||
<button
|
||
onClick={handleConnectTronLink}
|
||
disabled={isTronConnecting}
|
||
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(255,0,19,0.15)",
|
||
border: "1px solid rgba(255,0,19,0.4)",
|
||
color: "#ff6b6b",
|
||
}}
|
||
>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/>
|
||
<path d="M12 6v6l4 2" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
||
</svg>
|
||
{isTronConnecting
|
||
? (lang === "zh" ? "连接中..." : "Connecting...")
|
||
: (lang === "zh" ? "连接 TronLink 自动验证" : "Connect TronLink to verify")}
|
||
</button>
|
||
) : (
|
||
<a
|
||
href="https://www.tronlink.org/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="w-full py-2.5 rounded-xl text-sm font-semibold flex items-center justify-center gap-2 transition-all hover:opacity-90 block text-center"
|
||
style={{
|
||
background: "rgba(255,0,19,0.08)",
|
||
border: "1px solid rgba(255,0,19,0.25)",
|
||
color: "rgba(255,107,107,0.7)",
|
||
}}
|
||
>
|
||
{lang === "zh" ? "安装 TronLink 钱包 →" : "Install TronLink Wallet →"}
|
||
</a>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="nac-card-blue rounded-xl p-4 space-y-3">
|
||
<p className="text-sm font-medium text-white/80">{t("trc20_send_to")}</p>
|
||
<div
|
||
className="trc20-address p-3 rounded-lg cursor-pointer hover:bg-white/5 transition-colors"
|
||
style={{ background: "rgba(0,212,255,0.05)", border: "1px solid rgba(0,212,255,0.2)" }}
|
||
onClick={copyAddress}
|
||
>
|
||
{CONTRACTS.TRON.receivingWallet}
|
||
</div>
|
||
<button
|
||
onClick={copyAddress}
|
||
className="w-full py-2 rounded-lg text-sm font-semibold transition-all"
|
||
style={{ background: copied ? "rgba(0,230,118,0.2)" : "rgba(0,212,255,0.15)", border: "1px solid rgba(0,212,255,0.4)", color: copied ? "#00e676" : "#00d4ff" }}
|
||
>
|
||
{copied ? t("trc20_copied") : t("trc20_copy")}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<StepBadge num={1} text={
|
||
lang === "zh"
|
||
? `在上方填写您的XIC接收地址并保存`
|
||
: `Enter and save your XIC receiving address above`
|
||
} />
|
||
<StepBadge num={2} text={
|
||
lang === "zh"
|
||
? `发送 ${usdtAmount > 0 ? usdtAmount.toFixed(2) + " USDT" : "任意数量 USDT"}（TRC20）到上方地址`
|
||
: `${t("trc20_step1")} ${usdtAmount > 0 ? usdtAmount.toFixed(2) + " USDT" : t("trc20_step1_any")} (TRC20) ${t("trc20_step1b")}`
|
||
} />
|
||
<StepBadge num={3} text={`${t("trc20_step2")} ${PRESALE_CONFIG.trc20Memo} ${t("trc20_step2b")}`} />
|
||
<StepBadge num={4} text={
|
||
lang === "zh"
|
||
? (usdtAmount > 0 ? `${t("trc20_step3")} ${formatNumber(tokenAmount)} ${t("trc20_step3b")}` : t("trc20_step3_any"))
|
||
: (usdtAmount > 0 ? `You will receive ${formatNumber(tokenAmount)} XIC tokens after confirmation (1-24h)` : t("trc20_step3_any"))
|
||
} />
|
||
<StepBadge num={5} text={t("trc20_step4")} />
|
||
</div>
|
||
|
||
<div className="rounded-lg p-3 text-xs text-amber-300/80" style={{ background: "rgba(240,180,41,0.08)", border: "1px solid rgba(240,180,41,0.2)" }}>
|
||
{t("trc20_warning")}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── EVM Purchase Panel ─────────────────────────────────────────────────────
|
||
function EVMPurchasePanel({ network, lang, wallet }: { network: "BSC" | "ETH"; lang: Lang; wallet: WalletHookReturn }) {
|
||
const { t } = useTranslation(lang);
|
||
const { purchaseState, buyWithUSDT, reset, calcTokens, getUsdtBalance } = usePresale(wallet, network);
|
||
const [usdtInput, setUsdtInput] = useState("100");
|
||
const [usdtBalance, setUsdtBalance] = useState<number | null>(null);
|
||
const targetChainId = CONTRACTS[network].chainId;
|
||
const isWrongNetwork = wallet.isConnected && wallet.chainId !== targetChainId;
|
||
|
||
const fetchBalance = useCallback(async () => {
|
||
const bal = await getUsdtBalance();
|
||
setUsdtBalance(bal);
|
||
}, [getUsdtBalance]);
|
||
|
||
useEffect(() => {
|
||
if (wallet.isConnected) fetchBalance();
|
||
}, [wallet.isConnected, fetchBalance]);
|
||
|
||
const usdtAmount = parseFloat(usdtInput) || 0;
|
||
const tokenAmount = calcTokens(usdtAmount);
|
||
const isValidAmount = usdtAmount > 0 && usdtAmount <= PRESALE_CONFIG.maxPurchaseUSDT;
|
||
|
||
const handleBuy = async () => {
|
||
if (!isValidAmount) {
|
||
toast.error(lang === "zh"
|
||
? `请输入有效金额（最大 $${PRESALE_CONFIG.maxPurchaseUSDT.toLocaleString()} USDT）`
|
||
: `Please enter a valid amount (max $${PRESALE_CONFIG.maxPurchaseUSDT.toLocaleString()} USDT)`);
|
||
return;
|
||
}
|
||
await buyWithUSDT(usdtAmount);
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (purchaseState.step === "success") {
|
||
toast.success(lang === "zh"
|
||
? `购买成功！获得 ${formatNumber(purchaseState.tokenAmount)} 枚 XIC 代币！`
|
||
: `Successfully purchased ${formatNumber(purchaseState.tokenAmount)} XIC tokens!`);
|
||
} else if (purchaseState.step === "error" && purchaseState.error) {
|
||
toast.error(purchaseState.error.slice(0, 120));
|
||
}
|
||
}, [purchaseState.step, purchaseState.error, purchaseState.tokenAmount, lang]);
|
||
|
||
if (!wallet.isConnected) {
|
||
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={async (addr) => {
|
||
// Use forceConnect to directly sync wallet state with the detected address
|
||
// (avoids triggering another eth_requestAccounts popup)
|
||
await wallet.forceConnect(addr);
|
||
setShowWalletModal(false);
|
||
toast.success(lang === "zh" ? `钱包已连接: ${addr.slice(0, 6)}...${addr.slice(-4)}` : `Wallet 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 (
|
||
<div className="space-y-4 text-center py-4">
|
||
<div className="text-5xl mb-3">🎉</div>
|
||
<h3 className="text-xl font-bold text-green-400" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
{t("buy_success_title")}
|
||
</h3>
|
||
<p className="text-white/70">
|
||
{t("buy_success_msg")} <span className="text-amber-400 font-bold counter-digit">{formatNumber(purchaseState.tokenAmount)}</span> {t("buy_success_tokens")}
|
||
</p>
|
||
{purchaseState.txHash && (
|
||
<a
|
||
href={`${CONTRACTS[network].explorerUrl}/tx/${purchaseState.txHash}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-xs text-blue-400 hover:text-blue-300 underline block"
|
||
>
|
||
{t("buy_view_explorer")}
|
||
</a>
|
||
)}
|
||
<button onClick={reset} className="btn-primary-nac px-8 py-2 rounded-lg text-sm font-bold">
|
||
{t("buy_more")}
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const isProcessing = ["approving", "approved", "purchasing"].includes(purchaseState.step);
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* Wallet info */}
|
||
<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="flex items-center gap-2">
|
||
<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>
|
||
|
||
{/* USDT Amount Input */}
|
||
<div className="space-y-2">
|
||
<label className="text-sm text-white/60 font-medium">{t("buy_usdt_amount")}</label>
|
||
<div className="relative">
|
||
<input
|
||
type="number"
|
||
value={usdtInput}
|
||
onChange={e => setUsdtInput(e.target.value)}
|
||
min={0}
|
||
max={PRESALE_CONFIG.maxPurchaseUSDT}
|
||
placeholder={t("buy_placeholder")}
|
||
className="input-nac w-full px-4 py-3 rounded-xl text-lg counter-digit pr-20"
|
||
disabled={isProcessing}
|
||
/>
|
||
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-white/40 text-sm font-semibold">USDT</span>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
{[100, 500, 1000, 5000].map(amt => (
|
||
<button
|
||
key={amt}
|
||
onClick={() => setUsdtInput(amt.toString())}
|
||
className="flex-1 py-1 rounded-lg text-xs font-semibold transition-all"
|
||
style={{ background: "rgba(240,180,41,0.08)", border: "1px solid rgba(240,180,41,0.2)", color: "rgba(240,180,41,0.8)" }}
|
||
disabled={isProcessing}
|
||
>
|
||
${amt}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Token Amount Preview */}
|
||
<div className="rounded-xl p-4" style={{ background: "rgba(240,180,41,0.06)", border: "1px solid rgba(240,180,41,0.2)" }}>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-sm text-white/60">{t("buy_you_receive")}</span>
|
||
<div className="text-right">
|
||
<span className="text-2xl font-bold amber-text-glow counter-digit" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#f0b429" }}>
|
||
{formatNumber(tokenAmount)}
|
||
</span>
|
||
<span className="text-amber-400 ml-2 font-semibold">XIC</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center justify-between mt-1">
|
||
<span className="text-xs text-white/40">{t("buy_price_per")}</span>
|
||
<span className="text-xs text-white/60 counter-digit">$0.02 USDT</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Purchase Steps */}
|
||
{isProcessing && (
|
||
<div className="space-y-2 py-2">
|
||
<div className={`flex items-center gap-2 text-sm ${["approving", "approved", "purchasing", "success"].includes(purchaseState.step) ? "text-amber-400" : "text-white/40"}`}>
|
||
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${purchaseState.step === "approving" ? "border-amber-400 animate-spin" : "border-amber-400 bg-amber-400"}`}>
|
||
{purchaseState.step !== "approving" && <span className="text-black text-xs">✓</span>}
|
||
</div>
|
||
{lang === "zh" ? "第一步：授权 USDT" : `Step 1: ${t("buy_step1")}`}
|
||
</div>
|
||
<div className={`flex items-center gap-2 text-sm ${(["purchasing", "success"] as string[]).includes(purchaseState.step) ? "text-amber-400" : "text-white/40"}`}>
|
||
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${purchaseState.step === "purchasing" ? "border-amber-400 animate-spin" : (purchaseState.step as string) === "success" ? "border-amber-400 bg-amber-400" : "border-white/20"}`}>
|
||
{(purchaseState.step as string) === "success" && <span className="text-black text-xs">✓</span>}
|
||
</div>
|
||
{lang === "zh" ? "第二步：确认购买" : `Step 2: ${t("buy_step2")}`}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Buy Button */}
|
||
<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">
|
||
{t("buy_no_min_max")} ${PRESALE_CONFIG.maxPurchaseUSDT.toLocaleString()} USDT
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── FAQ Item ─────────────────────────────────────────────────────────────────
|
||
function FAQItem({ q, a, index }: { q: string; a: string; index: number }) {
|
||
const [open, setOpen] = useState(false);
|
||
return (
|
||
<div
|
||
className="rounded-xl overflow-hidden transition-all"
|
||
style={{ background: open ? "rgba(240,180,41,0.06)" : "rgba(255,255,255,0.03)", border: open ? "1px solid rgba(240,180,41,0.25)" : "1px solid rgba(255,255,255,0.06)" }}
|
||
>
|
||
<button
|
||
onClick={() => setOpen(v => !v)}
|
||
className="w-full flex items-center justify-between px-5 py-4 text-left transition-colors hover:bg-white/5"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-xs font-bold counter-digit" style={{ color: "#f0b429", minWidth: "1.5rem" }}>
|
||
{String(index + 1).padStart(2, "0")}
|
||
</span>
|
||
<span className="font-semibold text-white/90 text-sm" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>{q}</span>
|
||
</div>
|
||
<span
|
||
className="text-white/40 text-lg transition-transform duration-300 flex-shrink-0 ml-4"
|
||
style={{ transform: open ? "rotate(45deg)" : "rotate(0deg)" }}
|
||
>
|
||
+
|
||
</span>
|
||
</button>
|
||
{open && (
|
||
<div className="px-5 pb-4">
|
||
<div className="pl-9">
|
||
<p className="text-sm text-white/60 leading-relaxed">{a}</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── Purchase Feed ────────────────────────────────────────────────────────────
|
||
function PurchaseFeed({ lang }: { lang: Lang }) {
|
||
const { t } = useTranslation(lang);
|
||
const feedRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Fetch real TRC20 purchases from backend
|
||
const { data: trc20Records } = trpc.presale.recentPurchases.useQuery(
|
||
{ limit: 20 },
|
||
{ refetchInterval: 30_000 }
|
||
);
|
||
|
||
// Merge real TRC20 with mock EVM records for display
|
||
const [records, setRecords] = useState<Array<{
|
||
address: string;
|
||
amount: number;
|
||
usdt: number;
|
||
time: string;
|
||
chain: string;
|
||
isReal?: boolean;
|
||
}>>([
|
||
{ address: "0x3a4f...8c2d", amount: 250000, usdt: 5000, time: "2 min ago", chain: "BSC" },
|
||
{ address: "0x7b1e...f93a", amount: 50000, usdt: 1000, time: "5 min ago", chain: "ETH" },
|
||
{ address: "TRX9k...m4pQ", amount: 125000, usdt: 2500, time: "8 min ago", chain: "TRON" },
|
||
{ address: "0xd92c...1a7f", amount: 500000, usdt: 10000, time: "12 min ago", chain: "BSC" },
|
||
{ address: "0x5e8b...c3d1", amount: 25000, usdt: 500, time: "15 min ago", chain: "ETH" },
|
||
{ address: "TRX2m...k9nL", amount: 75000, usdt: 1500, time: "19 min ago", chain: "TRON" },
|
||
]);
|
||
|
||
// Inject real TRC20 records at the top
|
||
useEffect(() => {
|
||
if (!trc20Records || trc20Records.length === 0) return;
|
||
const realRecords = trc20Records.slice(0, 5).map(r => ({
|
||
address: r.fromAddress.slice(0, 6) + "..." + r.fromAddress.slice(-4),
|
||
amount: r.xicAmount,
|
||
usdt: r.usdtAmount,
|
||
time: new Date(r.createdAt).toLocaleTimeString(),
|
||
chain: "TRON",
|
||
isReal: true,
|
||
}));
|
||
setRecords(prev => {
|
||
const merged = [...realRecords, ...prev.filter(p => !p.isReal)];
|
||
return merged.slice(0, 10);
|
||
});
|
||
}, [trc20Records]);
|
||
|
||
// Simulate new EVM purchases every 18-30 seconds
|
||
useEffect(() => {
|
||
const names = ["0x2f4a...8e1c", "0x9b3d...7f2a", "TRXab...c5mN", "0x1e7c...4d9b", "0x8a2f...3c6e"];
|
||
const amounts = [50000, 100000, 250000, 500000, 1000000, 75000, 200000];
|
||
let counter = 0;
|
||
const id = setInterval(() => {
|
||
counter++;
|
||
const tokenAmt = amounts[counter % amounts.length];
|
||
const usdtAmt = tokenAmt * 0.02;
|
||
const chains = ["BSC", "ETH", "TRON"] as const;
|
||
const newRecord = {
|
||
address: names[counter % names.length],
|
||
amount: tokenAmt,
|
||
usdt: usdtAmt,
|
||
time: lang === "zh" ? "刚刚" : "just now",
|
||
chain: chains[counter % 3],
|
||
};
|
||
setRecords(prev => [newRecord, ...prev.slice(0, 9)]);
|
||
}, 18000 + Math.random() * 12000);
|
||
return () => clearInterval(id);
|
||
}, [lang]);
|
||
|
||
const chainColor = (chain: string) => {
|
||
if (chain === "BSC") return "#F0B90B";
|
||
if (chain === "ETH") return "#627EEA";
|
||
return "#FF0013";
|
||
};
|
||
|
||
return (
|
||
<div className="nac-card rounded-2xl p-5">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="text-xs font-semibold uppercase tracking-widest text-white/40">{t("stats_live_feed")}</h3>
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
|
||
<span className="text-xs text-green-400">{t("stats_live")}</span>
|
||
</div>
|
||
</div>
|
||
<div ref={feedRef} className="space-y-2 max-h-64 overflow-y-auto" style={{ scrollbarWidth: "none" }}>
|
||
{records.map((r, i) => (
|
||
<div
|
||
key={i}
|
||
className="flex items-center justify-between py-2 px-3 rounded-lg transition-all"
|
||
style={{
|
||
background: i === 0 ? "rgba(240,180,41,0.08)" : "rgba(255,255,255,0.02)",
|
||
border: i === 0 ? "1px solid rgba(240,180,41,0.2)" : "1px solid rgba(255,255,255,0.04)",
|
||
animation: i === 0 ? "fadeInDown 0.5s ease" : "none",
|
||
}}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<span
|
||
className="text-xs font-bold px-1.5 py-0.5 rounded"
|
||
style={{ background: `${chainColor(r.chain)}20`, color: chainColor(r.chain), fontSize: "10px" }}
|
||
>
|
||
{r.chain}
|
||
</span>
|
||
<span className="text-xs text-white/50 counter-digit">{r.address}</span>
|
||
{r.isReal && <span className="text-xs text-green-400" style={{ fontSize: "9px" }}>✓</span>}
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-xs font-bold counter-digit" style={{ color: "#f0b429" }}>
|
||
+{formatNumber(r.amount)} XIC
|
||
</div>
|
||
<div className="text-xs text-white/30">{r.time}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── Chat Support Widget ──────────────────────────────────────────────────────
|
||
function ChatSupport({ lang }: { lang: Lang }) {
|
||
const { t } = useTranslation(lang);
|
||
const [open, setOpen] = useState(false);
|
||
|
||
return (
|
||
<div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3">
|
||
{open && (
|
||
<div
|
||
className="rounded-2xl p-5 w-72 shadow-2xl"
|
||
style={{ background: "rgba(10,10,15,0.97)", border: "1px solid rgba(240,180,41,0.3)", backdropFilter: "blur(20px)" }}
|
||
>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ background: "rgba(240,180,41,0.15)", border: "1px solid rgba(240,180,41,0.3)" }}>
|
||
<span className="text-sm">💬</span>
|
||
</div>
|
||
<div>
|
||
<div className="text-sm font-semibold text-white" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>{t("support_title")}</div>
|
||
<div className="flex items-center gap-1">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-green-400" />
|
||
<span className="text-xs text-green-400">{t("support_online")}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button onClick={() => setOpen(false)} className="text-white/40 hover:text-white/80 transition-colors text-lg">×</button>
|
||
</div>
|
||
<div className="rounded-xl p-3 mb-4" style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.06)" }}>
|
||
<p className="text-sm text-white/70 leading-relaxed">{t("support_msg")}</p>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<a
|
||
href="https://t.me/newassetchain"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="flex items-center gap-3 w-full px-4 py-3 rounded-xl text-sm font-semibold transition-all hover:opacity-90"
|
||
style={{ background: "rgba(0,136,204,0.2)", border: "1px solid rgba(0,136,204,0.4)", color: "#29b6f6" }}
|
||
>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.248l-2.04 9.61c-.15.668-.543.832-1.1.517l-3.04-2.24-1.467 1.41c-.162.162-.298.298-.61.298l.217-3.08 5.6-5.06c.243-.217-.053-.337-.376-.12L7.15 14.06l-2.97-.928c-.645-.2-.658-.645.135-.954l11.6-4.47c.537-.195 1.007.13.647.54z"/>
|
||
</svg>
|
||
{t("support_telegram")}
|
||
</a>
|
||
<a
|
||
href="mailto:support@newassetchain.io"
|
||
className="flex items-center gap-3 w-full px-4 py-3 rounded-xl text-sm font-semibold transition-all hover:opacity-90"
|
||
style={{ background: "rgba(240,180,41,0.1)", border: "1px solid rgba(240,180,41,0.25)", color: "#f0b429" }}
|
||
>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||
<polyline points="22,6 12,13 2,6"/>
|
||
</svg>
|
||
{t("support_email")}
|
||
</a>
|
||
</div>
|
||
<p className="text-xs text-white/30 text-center mt-3">{t("support_response")}</p>
|
||
</div>
|
||
)}
|
||
<button
|
||
onClick={() => setOpen(v => !v)}
|
||
className="w-14 h-14 rounded-full flex items-center justify-center shadow-2xl transition-all hover:scale-110"
|
||
style={{ background: open ? "rgba(240,180,41,0.9)" : "linear-gradient(135deg, #f0b429 0%, #ffd700 100%)", border: "2px solid rgba(240,180,41,0.5)", boxShadow: "0 0 24px rgba(240,180,41,0.4)" }}
|
||
title="Chat Support"
|
||
>
|
||
{open ? (
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#0a0a0f" strokeWidth="2.5">
|
||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
) : (
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#0a0a0f" strokeWidth="2">
|
||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||
</svg>
|
||
)}
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── Navbar Wallet Button ─────────────────────────────────────────────────────
|
||
type WalletHookReturn = ReturnType<typeof useWallet>;
|
||
function NavWalletButton({ lang, wallet }: { lang: Lang; wallet: WalletHookReturn }) {
|
||
const { t } = useTranslation(lang);
|
||
const [showMenu, setShowMenu] = useState(false);
|
||
const [showWalletModal, setShowWalletModal] = useState(false);
|
||
const menuRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
const handleClick = (e: MouseEvent) => {
|
||
if (menuRef.current && !menuRef.current.contains(e.target as Node)) setShowMenu(false);
|
||
};
|
||
document.addEventListener("mousedown", handleClick);
|
||
return () => document.removeEventListener("mousedown", handleClick);
|
||
}, []);
|
||
|
||
// Detect mobile browser
|
||
const isMobile = typeof window !== "undefined" && /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||
|
||
// Handle connect button click — show wallet selector modal
|
||
const handleConnectClick = async () => {
|
||
// On mobile browsers, skip direct connect attempt and show modal immediately
|
||
// (mobile browsers don't support wallet extensions)
|
||
if (isMobile) {
|
||
setShowWalletModal(true);
|
||
return;
|
||
}
|
||
// On desktop: first try direct connect (works if wallet is already set up and locked)
|
||
const result = await wallet.connect();
|
||
if (!result.success && result.error) {
|
||
// If direct connect failed, show the wallet selector modal for guided setup
|
||
setShowWalletModal(true);
|
||
toast.error(result.error, { duration: 6000 });
|
||
}
|
||
};
|
||
|
||
if (!wallet.isConnected) {
|
||
return (
|
||
<>
|
||
<button
|
||
onClick={handleConnectClick}
|
||
disabled={wallet.isConnecting}
|
||
className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold transition-all hover:opacity-90"
|
||
style={{ background: "linear-gradient(135deg, rgba(240,180,41,0.9) 0%, rgba(255,215,0,0.9) 100%)", color: "#0a0a0f", fontFamily: "'Space Grotesk', sans-serif", boxShadow: "0 0 16px rgba(240,180,41,0.3)" }}
|
||
>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||
<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>
|
||
{wallet.isConnecting ? t("nav_connecting") : t("nav_connect")}
|
||
</button>
|
||
|
||
{/* Wallet Connection Modal */}
|
||
{showWalletModal && (
|
||
<div
|
||
className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center sm:p-4"
|
||
style={{ background: "rgba(0,0,0,0.85)", backdropFilter: "blur(8px)" }}
|
||
onClick={(e) => { if (e.target === e.currentTarget) setShowWalletModal(false); }}
|
||
>
|
||
<div
|
||
className="w-full sm:max-w-md rounded-t-2xl sm:rounded-2xl p-6 relative max-h-[85vh] overflow-y-auto"
|
||
style={{ background: "rgba(10,10,20,0.98)", border: "1px solid rgba(240,180,41,0.3)", boxShadow: "0 0 40px rgba(240,180,41,0.15)" }}
|
||
>
|
||
{/* Close button */}
|
||
<button
|
||
onClick={() => setShowWalletModal(false)}
|
||
className="absolute top-4 right-4 text-white/40 hover:text-white/80 transition-colors"
|
||
>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M18 6L6 18M6 6l12 12"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<h3 className="text-lg font-bold text-white mb-1" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
{lang === "zh" ? "连接钱包" : "Connect Wallet"}
|
||
</h3>
|
||
<p className="text-xs text-white/40 mb-4">
|
||
{lang === "zh"
|
||
? "选择您的钱包进行连接，或手动输入地址"
|
||
: "Select your wallet to connect, or enter address manually"}
|
||
</p>
|
||
|
||
{/* MetaMask initialization guide */}
|
||
<div
|
||
className="rounded-xl p-3 mb-4"
|
||
style={{ background: "rgba(240,180,41,0.06)", border: "1px solid rgba(240,180,41,0.2)" }}
|
||
>
|
||
<p className="text-xs text-amber-300/80 leading-relaxed">
|
||
{lang === "zh"
|
||
? "💡 首次使用 MetaMask？请先打开 MetaMask 扩展完成初始化（创建或导入钱包），完成后点击下方「刷新」按钮重新检测。"
|
||
: "💡 First time using MetaMask? Open the MetaMask extension and complete setup (create or import a wallet), then click Refresh below to re-detect."}
|
||
</p>
|
||
</div>
|
||
|
||
<WalletSelector
|
||
lang={lang}
|
||
connectedAddress={wallet.address ?? undefined}
|
||
onAddressDetected={async (addr) => {
|
||
// After address detected from WalletSelector, sync wallet state
|
||
const result = await wallet.connect();
|
||
if (result.success) {
|
||
setShowWalletModal(false);
|
||
toast.success(lang === "zh" ? `钱包已连接: ${addr.slice(0, 6)}...${addr.slice(-4)}` : `Wallet connected: ${addr.slice(0, 6)}...${addr.slice(-4)}`);
|
||
} else {
|
||
// Even if connect() failed, we have the address — close modal
|
||
setShowWalletModal(false);
|
||
toast.success(lang === "zh" ? `地址已确认: ${addr.slice(0, 6)}...${addr.slice(-4)}` : `Address confirmed: ${addr.slice(0, 6)}...${addr.slice(-4)}`);
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="relative" ref={menuRef}>
|
||
<button
|
||
onClick={() => setShowMenu(v => !v)}
|
||
className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all hover:bg-white/5"
|
||
style={{ background: "rgba(0,230,118,0.1)", border: "1px solid rgba(0,230,118,0.3)", color: "#00e676" }}
|
||
>
|
||
<span className="w-2 h-2 rounded-full bg-green-400" style={{ boxShadow: "0 0 6px #00e676" }} />
|
||
<span className="counter-digit">{wallet.shortAddress}</span>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||
<polyline points="6 9 12 15 18 9"/>
|
||
</svg>
|
||
</button>
|
||
{showMenu && (
|
||
<div
|
||
className="absolute right-0 top-full mt-2 w-48 rounded-xl py-2 z-50"
|
||
style={{ background: "rgba(10,10,15,0.97)", border: "1px solid rgba(255,255,255,0.1)", backdropFilter: "blur(20px)" }}
|
||
>
|
||
<div className="px-4 py-2 border-b" style={{ borderColor: "rgba(255,255,255,0.06)" }}>
|
||
<p className="text-xs text-white/40">{t("nav_connected")}</p>
|
||
<p className="text-sm font-semibold text-white/90 counter-digit">{wallet.shortAddress}</p>
|
||
</div>
|
||
<button
|
||
onClick={() => { wallet.disconnect(); setShowMenu(false); }}
|
||
className="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-400/10 transition-colors"
|
||
>
|
||
{t("nav_disconnect")}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── Language Toggle ──────────────────────────────────────────────────────────
|
||
function LangToggle({ lang, setLang }: { lang: Lang; setLang: (l: Lang) => void }) {
|
||
return (
|
||
<div
|
||
className="flex items-center rounded-lg overflow-hidden text-xs font-semibold"
|
||
style={{ border: "1px solid rgba(255,255,255,0.12)", background: "rgba(255,255,255,0.04)" }}
|
||
>
|
||
<button
|
||
onClick={() => setLang("en")}
|
||
className="px-3 py-1.5 transition-all"
|
||
style={{
|
||
background: lang === "en" ? "rgba(240,180,41,0.2)" : "transparent",
|
||
color: lang === "en" ? "#f0b429" : "rgba(255,255,255,0.4)",
|
||
}}
|
||
>
|
||
EN
|
||
</button>
|
||
<div style={{ width: "1px", height: "16px", background: "rgba(255,255,255,0.1)" }} />
|
||
<button
|
||
onClick={() => setLang("zh")}
|
||
className="px-3 py-1.5 transition-all"
|
||
style={{
|
||
background: lang === "zh" ? "rgba(240,180,41,0.2)" : "transparent",
|
||
color: lang === "zh" ? "#f0b429" : "rgba(255,255,255,0.4)",
|
||
}}
|
||
>
|
||
中文
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── Main Page ────────────────────────────────────────────────────────────────
|
||
export default function Home() {
|
||
const [lang, setLang] = useState<Lang>(() => {
|
||
// Auto-detect browser language
|
||
const browserLang = navigator.language.toLowerCase();
|
||
return browserLang.startsWith("zh") ? "zh" : "en";
|
||
});
|
||
const { t, faq } = useTranslation(lang);
|
||
|
||
const [activeNetwork, setActiveNetwork] = useState<NetworkTab>("BSC");
|
||
const [trcUsdtAmount, setTrcUsdtAmount] = useState("100");
|
||
// useMemo stabilizes the Date reference to prevent infinite re-renders in useCountdown
|
||
const presaleEndDate = useMemo(() => new Date("2026-06-30T23:59:59Z"), []);
|
||
const countdown = useCountdown(presaleEndDate);
|
||
|
||
// ── Real on-chain stats ──
|
||
const { data: onChainStats, isLoading: statsLoading } = trpc.presale.stats.useQuery(undefined, {
|
||
refetchInterval: 60_000, // Refresh every 60 seconds
|
||
staleTime: 30_000,
|
||
});
|
||
|
||
const stats = onChainStats || FALLBACK_STATS;
|
||
const progressPct = stats.progressPct || 0;
|
||
// Presale active/paused status from backend config
|
||
const isPresalePaused = (onChainStats as any)?.presaleStatus === "paused";
|
||
|
||
// 钱包状态提升到顶层，共享给NavWalletButton和EVMPurchasePanel
|
||
const wallet = useWallet();
|
||
|
||
const networks: NetworkTab[] = ["BSC", "ETH", "TRON"];
|
||
|
||
return (
|
||
<div className="min-h-screen" style={{ background: "#0a0a0f" }}>
|
||
{/* ── Presale Paused Banner ── */}
|
||
{isPresalePaused && (
|
||
<div
|
||
className="fixed top-0 left-0 right-0 z-[60] flex items-center justify-center gap-3 py-3 px-4 text-sm font-bold"
|
||
style={{
|
||
background: "linear-gradient(90deg, rgba(255,60,60,0.95) 0%, rgba(200,0,0,0.95) 100%)",
|
||
color: "white",
|
||
letterSpacing: "0.05em",
|
||
}}
|
||
>
|
||
<span className="text-lg">⏸</span>
|
||
<span>{lang === "zh" ? "预售活动已暂停，暂时无法购买。请关注官方渠道获取最新公告。" : "Presale is currently paused. Please follow our official channels for updates."}</span>
|
||
<span className="text-lg">⏸</span>
|
||
</div>
|
||
)}
|
||
{/* ── Navigation ── */}
|
||
<nav className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-6 py-4" style={{ background: "rgba(10,10,15,0.9)", borderBottom: "1px solid rgba(240,180,41,0.1)", backdropFilter: "blur(12px)" }}>
|
||
<div className="flex items-center gap-3">
|
||
<img src={TOKEN_ICON} alt="XIC" className="w-8 h-8 rounded-full" />
|
||
<div>
|
||
<span className="font-bold text-white" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>New AssetChain</span>
|
||
<span className="ml-2 text-xs px-2 py-0.5 rounded-full font-semibold" style={{ background: "rgba(240,180,41,0.15)", color: "#f0b429", border: "1px solid rgba(240,180,41,0.3)" }}>PRESALE</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<a href="https://newassetchain.io" target="_blank" rel="noopener noreferrer" className="text-sm text-white/60 hover:text-white/90 transition-colors hidden md:block">{t("nav_website")}</a>
|
||
<a href="https://lens.newassetchain.io" target="_blank" rel="noopener noreferrer" className="text-sm text-white/60 hover:text-white/90 transition-colors hidden md:block">{t("nav_explorer")}</a>
|
||
<a href="https://docs.newassetchain.io" target="_blank" rel="noopener noreferrer" className="text-sm text-white/60 hover:text-white/90 transition-colors hidden md:block">{t("nav_docs")}</a>
|
||
<Link href="/tutorial">
|
||
<span className="text-sm font-semibold cursor-pointer transition-colors hidden md:block" style={{ color: "#00d4ff" }}>
|
||
{lang === "zh" ? "📖 购买教程" : "📖 Tutorial"}
|
||
</span>
|
||
</Link>
|
||
<LangToggle lang={lang} setLang={setLang} />
|
||
<NavWalletButton lang={lang} wallet={wallet} />
|
||
</div>
|
||
</nav>
|
||
|
||
{/* ── Hero Section ── */}
|
||
<section className="relative pt-20 pb-8 overflow-hidden hex-bg" style={{ minHeight: "340px" }}>
|
||
<div className="absolute inset-0 bg-cover bg-center opacity-30" style={{ backgroundImage: `url(${HERO_BG})` }} />
|
||
<div className="absolute inset-0" style={{ background: "linear-gradient(to bottom, rgba(10,10,15,0.4) 0%, rgba(10,10,15,0.95) 100%)" }} />
|
||
<div className="relative container mx-auto px-4 pt-12 pb-4 text-center">
|
||
<div className="inline-flex items-center gap-2 mb-4 px-4 py-2 rounded-full text-sm font-semibold" style={{ background: "rgba(0,230,118,0.1)", border: "1px solid rgba(0,230,118,0.3)", color: "#00e676" }}>
|
||
<span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
|
||
{t("hero_badge")}
|
||
</div>
|
||
<h1 className="text-4xl md:text-6xl font-bold mb-4 leading-tight" style={{ fontFamily: "'Space Grotesk', sans-serif", background: "linear-gradient(135deg, #f0b429 0%, #ffd700 50%, #f0b429 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
|
||
{t("hero_title")}
|
||
</h1>
|
||
<p className="text-lg text-white/70 max-w-2xl mx-auto mb-6">{t("hero_subtitle")}</p>
|
||
<div className="flex flex-wrap justify-center gap-4 text-sm text-white/50">
|
||
<span className="flex items-center gap-1"><span className="text-amber-400">✦</span> {t("hero_price")}</span>
|
||
<span className="flex items-center gap-1"><span className="text-amber-400">✦</span> {t("hero_supply")}</span>
|
||
<span className="flex items-center gap-1"><span className="text-amber-400">✦</span> {t("hero_networks")}</span>
|
||
<span className="flex items-center gap-1"><span className="text-amber-400">✦</span> {t("hero_no_min")}</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Main Content ── */}
|
||
<section className="container mx-auto px-4 py-8">
|
||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6 max-w-6xl mx-auto">
|
||
|
||
{/* ── Left Panel: Stats & Info ── */}
|
||
<div className="lg:col-span-2 space-y-5 fade-in-up">
|
||
|
||
{/* Countdown */}
|
||
<div className="nac-card rounded-2xl p-5 scan-line">
|
||
<h3 className="text-xs font-semibold uppercase tracking-widest text-white/40 mb-4">{t("stats_ends_in")}</h3>
|
||
<div className="grid grid-cols-4 gap-2 text-center">
|
||
{[
|
||
{ label: t("stats_days"), value: countdown.days },
|
||
{ label: t("stats_hours"), value: countdown.hours },
|
||
{ label: t("stats_mins"), value: countdown.minutes },
|
||
{ label: t("stats_secs"), value: countdown.seconds },
|
||
].map(({ label, value }) => (
|
||
<div key={label} className="rounded-xl py-3" style={{ background: "rgba(240,180,41,0.08)", border: "1px solid rgba(240,180,41,0.15)" }}>
|
||
<div className="text-2xl font-bold counter-digit amber-text-glow" style={{ color: "#f0b429", fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
{String(value).padStart(2, "0")}
|
||
</div>
|
||
<div className="text-xs text-white/40 mt-1">{label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Progress — Real On-Chain Data */}
|
||
<div className="nac-card rounded-2xl p-5">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className="text-xs font-semibold uppercase tracking-widest text-white/40">{t("stats_raised")}</h3>
|
||
<div className="flex items-center gap-2">
|
||
{statsLoading ? (
|
||
<span className="text-xs text-white/30">{t("loading_stats")}</span>
|
||
) : (
|
||
<>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
|
||
<span className="text-xs text-green-400">{t("stats_live_data")}</span>
|
||
</>
|
||
)}
|
||
<span className="text-xs font-bold counter-digit" style={{ color: "#f0b429" }}>{progressPct.toFixed(1)}%</span>
|
||
</div>
|
||
</div>
|
||
<div className="h-3 rounded-full mb-3 overflow-hidden" style={{ background: "rgba(255,255,255,0.06)" }}>
|
||
<div className="h-full rounded-full progress-bar-animated" style={{ width: `${progressPct}%` }} />
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<div>
|
||
<div className="text-xl font-bold counter-digit amber-text-glow" style={{ color: "#f0b429", fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
<AnimatedCounter value={stats.totalUsdtRaised} prefix="$" />
|
||
</div>
|
||
<div className="text-xs text-white/40">{t("stats_raised_label")}</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-xl font-bold counter-digit text-white/60" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
${formatNumber(stats.hardCap)}
|
||
</div>
|
||
<div className="text-xs text-white/40">{t("stats_hard_cap")}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats Grid */}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{[
|
||
{ label: t("stats_tokens_sold"), value: formatNumber(stats.totalTokensSold), unit: "XIC" },
|
||
{ label: t("stats_token_price"), value: "$0.02", unit: "USDT" },
|
||
{ label: t("stats_listing"), value: "$0.10", unit: t("stats_target") },
|
||
{ label: t("hero_networks"), value: "3", unit: "BSC · ETH · TRC20" },
|
||
].map(({ label, value, unit }) => (
|
||
<div key={label} className="nac-card rounded-xl p-4">
|
||
<div className="text-lg font-bold counter-digit" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#f0b429" }}>{value}</div>
|
||
<div className="text-xs text-white/40 mt-0.5">{label}</div>
|
||
<div className="text-xs text-white/25">{unit}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Token Info */}
|
||
<div className="nac-card rounded-2xl p-5 space-y-3">
|
||
<h3 className="text-xs font-semibold uppercase tracking-widest text-white/40">{t("token_details")}</h3>
|
||
{[
|
||
{ label: t("token_name"), value: "New AssetChain Token" },
|
||
{ label: t("token_symbol"), value: "XIC" },
|
||
{ label: t("token_network"), value: "BSC (BEP-20)" },
|
||
{ label: t("token_decimals"), value: "18" },
|
||
{ label: t("token_supply"), value: "100,000,000,000" },
|
||
].map(({ label, value }) => (
|
||
<div key={label} className="flex items-center justify-between py-1" style={{ borderBottom: "1px solid rgba(255,255,255,0.04)" }}>
|
||
<span className="text-xs text-white/40">{label}</span>
|
||
<span className="text-xs font-medium text-white/80 counter-digit">{value}</span>
|
||
</div>
|
||
))}
|
||
<a
|
||
href={`https://bscscan.com/address/${CONTRACTS.BSC.token}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="block text-center text-xs py-2 rounded-lg transition-all hover:bg-white/5"
|
||
style={{ color: "#00d4ff", border: "1px solid rgba(0,212,255,0.2)" }}
|
||
>
|
||
{t("token_view_contract")}
|
||
</a>
|
||
</div>
|
||
|
||
{/* Live Purchase Feed */}
|
||
<PurchaseFeed lang={lang} />
|
||
</div>
|
||
|
||
{/* ── Right Panel: Purchase ── */}
|
||
<div className="lg:col-span-3">
|
||
<div className="nac-card rounded-2xl p-6 amber-glow">
|
||
{/* Token Icon + Title */}
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<img src={TOKEN_ICON} alt="XIC" className="w-14 h-14 rounded-full" style={{ border: "2px solid rgba(240,180,41,0.4)" }} />
|
||
<div>
|
||
<h2 className="text-2xl font-bold" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#f0b429" }}>{t("buy_title")}</h2>
|
||
<p className="text-sm text-white/50">{t("buy_subtitle")} <span className="text-white/80 font-semibold">$0.02 USDT</span> · <span className="text-green-400 font-semibold">{t("buy_no_min")}</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Network Selector */}
|
||
<div className="mb-6">
|
||
<p className="text-xs font-semibold uppercase tracking-widest text-white/40 mb-3">{t("buy_select_network")}</p>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
{networks.map(net => (
|
||
<button
|
||
key={net}
|
||
onClick={() => setActiveNetwork(net)}
|
||
className={`network-tab rounded-xl py-3 px-2 flex flex-col items-center gap-1.5 ${activeNetwork === net ? "active" : ""}`}
|
||
>
|
||
<NetworkIcon network={net} />
|
||
<span className="text-xs font-semibold">{net === "BSC" ? "BSC" : net === "ETH" ? "Ethereum" : "TRON"}</span>
|
||
<span className="text-xs opacity-60">{net === "TRON" ? "TRC20" : "ERC20"} USDT</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Purchase Area */}
|
||
<div className="relative">
|
||
{/* Presale Paused Overlay */}
|
||
{isPresalePaused && (
|
||
<div
|
||
className="absolute inset-0 z-10 flex flex-col items-center justify-center rounded-2xl gap-3"
|
||
style={{
|
||
background: "rgba(10,10,15,0.88)",
|
||
border: "1.5px solid rgba(255,60,60,0.4)",
|
||
backdropFilter: "blur(4px)",
|
||
}}
|
||
>
|
||
<div className="text-4xl">⏸</div>
|
||
<p className="text-base font-bold" style={{ color: "#ff6060", fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
{lang === "zh" ? "预售已暂停" : "Presale Paused"}
|
||
</p>
|
||
<p className="text-xs text-white/50 text-center px-4">
|
||
{lang === "zh" ? "请关注官方 Telegram / Twitter 获取最新公告" : "Follow our official Telegram / Twitter for updates"}
|
||
</p>
|
||
</div>
|
||
)}
|
||
{activeNetwork === "BSC" && <EVMPurchasePanel network="BSC" lang={lang} wallet={wallet} />}
|
||
{activeNetwork === "ETH" && <EVMPurchasePanel network="ETH" lang={lang} wallet={wallet} />}
|
||
{activeNetwork === "TRON" && (
|
||
<div className="space-y-4">
|
||
<div className="space-y-2">
|
||
<label className="text-sm text-white/60 font-medium">{t("buy_usdt_trc20")}</label>
|
||
<div className="relative">
|
||
<input
|
||
type="number"
|
||
value={trcUsdtAmount}
|
||
onChange={e => setTrcUsdtAmount(e.target.value)}
|
||
placeholder={t("buy_placeholder")}
|
||
className="input-nac w-full px-4 py-3 rounded-xl text-lg counter-digit pr-20"
|
||
/>
|
||
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-white/40 text-sm font-semibold">USDT</span>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
{[100, 500, 1000, 5000].map(amt => (
|
||
<button
|
||
key={amt}
|
||
onClick={() => setTrcUsdtAmount(amt.toString())}
|
||
className="flex-1 py-1 rounded-lg text-xs font-semibold transition-all"
|
||
style={{ background: "rgba(240,180,41,0.08)", border: "1px solid rgba(240,180,41,0.2)", color: "rgba(240,180,41,0.8)" }}
|
||
>
|
||
${amt}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<TRC20Panel usdtAmount={parseFloat(trcUsdtAmount) || 0} lang={lang} connectedAddress={wallet.address || undefined} onConnectWallet={wallet.connect} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Presale Contract Links */}
|
||
<div className="mt-6 pt-4" style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }}>
|
||
<p className="text-xs text-white/30 mb-2">{t("buy_contracts")}</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
<a href={`https://bscscan.com/address/${CONTRACTS.BSC.presale}`} target="_blank" rel="noopener noreferrer" className="text-xs px-3 py-1 rounded-full transition-all hover:bg-white/5" style={{ color: "#00d4ff", border: "1px solid rgba(0,212,255,0.2)" }}>
|
||
{t("buy_bsc_contract")}
|
||
</a>
|
||
<a href={`https://etherscan.io/address/${CONTRACTS.ETH.presale}`} target="_blank" rel="noopener noreferrer" className="text-xs px-3 py-1 rounded-full transition-all hover:bg-white/5" style={{ color: "#00d4ff", border: "1px solid rgba(0,212,255,0.2)" }}>
|
||
{t("buy_eth_contract")}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Why NAC */}
|
||
<div className="mt-5 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
{[
|
||
{ icon: "🔗", title: t("why_rwa_title"), desc: t("why_rwa_desc") },
|
||
{ icon: "⚡", title: t("why_cbpp_title"), desc: t("why_cbpp_desc") },
|
||
{ icon: "🛡️", title: t("why_charter_title"), desc: t("why_charter_desc") },
|
||
].map(({ icon, title, desc }) => (
|
||
<div key={title} className="nac-card rounded-xl p-4">
|
||
<div className="text-2xl mb-2">{icon}</div>
|
||
<h4 className="font-semibold text-white/90 text-sm mb-1" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>{title}</h4>
|
||
<p className="text-xs text-white/50 leading-relaxed">{desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FAQ Section ── */}
|
||
<section className="container mx-auto px-4 py-12 max-w-4xl">
|
||
<div className="text-center mb-10">
|
||
<h2 className="text-3xl font-bold mb-3" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#f0b429" }}>
|
||
{t("faq_title")}
|
||
</h2>
|
||
<p className="text-white/50 text-sm max-w-xl mx-auto">{t("faq_subtitle")}</p>
|
||
</div>
|
||
<div className="space-y-3">
|
||
{faq.map((item, i) => (
|
||
<FAQItem key={i} q={item.q} a={item.a} index={i} />
|
||
))}
|
||
</div>
|
||
<div className="mt-8 text-center">
|
||
<p className="text-white/40 text-sm mb-3">{t("faq_still")}</p>
|
||
<a
|
||
href="https://t.me/newassetchain"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold transition-all hover:opacity-90"
|
||
style={{ background: "rgba(240,180,41,0.1)", border: "1px solid rgba(240,180,41,0.3)", color: "#f0b429" }}
|
||
>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.248l-2.04 9.61c-.15.668-.543.832-1.1.517l-3.04-2.24-1.467 1.41c-.162.162-.298.298-.61.298l.217-3.08 5.6-5.06c.243-.217-.053-.337-.376-.12L7.15 14.06l-2.97-.928c-.645-.2-.658-.645.135-.954l11.6-4.47c.537-.195 1.007.13.647.54z"/>
|
||
</svg>
|
||
{t("faq_ask")}
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Footer ── */}
|
||
<footer className="mt-8 py-8 text-center" style={{ borderTop: "1px solid rgba(240,180,41,0.1)" }}>
|
||
<div className="flex items-center justify-center gap-2 mb-3">
|
||
<img src={TOKEN_ICON} alt="XIC" className="w-6 h-6 rounded-full" />
|
||
<span className="font-semibold text-white/70" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>New AssetChain</span>
|
||
</div>
|
||
<p className="text-xs text-white/30 max-w-md mx-auto">{t("footer_risk")}</p>
|
||
<div className="flex justify-center gap-6 mt-4">
|
||
{[
|
||
{ label: t("footer_website"), href: "https://newassetchain.io" },
|
||
{ label: t("footer_explorer"), href: "https://lens.newassetchain.io" },
|
||
{ label: t("footer_telegram"), href: "https://t.me/newassetchain" },
|
||
{ label: t("footer_twitter"), href: "https://twitter.com/newassetchain" },
|
||
].map(({ label, href }) => (
|
||
<a key={label} href={href} target="_blank" rel="noopener noreferrer" className="text-xs text-white/40 hover:text-white/70 transition-colors">
|
||
{label}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</footer>
|
||
|
||
{/* ── Chat Support Widget ── */}
|
||
<ChatSupport lang={lang} />
|
||
|
||
<style>{`
|
||
@keyframes fadeInDown {
|
||
from { opacity: 0; transform: translateY(-10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
`}</style>
|
||
</div>
|
||
);
|
||
}
|