+ {lang === "zh"
+ ? "XIC代币在BSC网络上发放。请提供您的BSC/ETH地址（0x开头），以便我们将代币发送给您。"
+ : "XIC tokens are distributed on BSC. Please provide your BSC/ETH address (starts with 0x) so we can send your tokens."}
+
diff --git a/client/src/pages/Tutorial.tsx b/client/src/pages/Tutorial.tsx
new file mode 100644
index 0000000..3aca335
--- /dev/null
+++ b/client/src/pages/Tutorial.tsx
@@ -0,0 +1,737 @@
+/**
+ * Purchase Tutorial Page
+ * Detailed step-by-step guide for BSC/ETH/TRC20 purchases
+ * Covers 7 wallets: MetaMask, Trust Wallet, OKX, Binance Web3, TokenPocket, imToken, WalletConnect
+ */
+import { useState } from "react";
+import { Link } from "wouter";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+type WalletId = "metamask" | "trust" | "okx" | "binance" | "tokenpocket" | "imtoken" | "walletconnect";
+type ChainId = "bsc" | "eth" | "tron";
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+const RECEIVING_ADDRESSES = {
+ trc20: "TWc2ugYBFN5aSoimAh4qGt9oMyket6NYZp",
+ erc20: "0x43DAb577f3279e11D311E7d628C6201d893A9Aa3",
+};
+
+const CONTRACTS = {
+ bsc: {
+ presale: "0xc65e7a2738ed884db8d26a6eb2fecf7daca2e90c",
+ usdt: "0x55d398326f99059fF775485246999027B3197955",
+ explorer: "https://bscscan.com",
+ },
+ eth: {
+ presale: "0x85AB2F2d9f7ca7ecB272b5E8726c70f3fd45D1E3",
+ usdt: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
+ explorer: "https://etherscan.io",
+ },
+};
+
+// ─── Wallet Config ────────────────────────────────────────────────────────────
+const WALLETS: Array<{
+ id: WalletId;
+ name: string;
+ icon: string;
+ chains: ChainId[];
+ color: string;
+ downloadUrl: string;
+}> = [
+ {
+ id: "metamask",
+ name: "MetaMask",
+ icon: "🦊",
+ chains: ["bsc", "eth"],
+ color: "#E8831D",
+ downloadUrl: "https://metamask.io/download/",
+ },
+ {
+ id: "trust",
+ name: "Trust Wallet",
+ icon: "🛡️",
+ chains: ["bsc", "eth", "tron"],
+ color: "#3375BB",
+ downloadUrl: "https://trustwallet.com/download",
+ },
+ {
+ id: "okx",
+ name: "OKX Wallet",
+ icon: "⭕",
+ chains: ["bsc", "eth", "tron"],
+ color: "#000000",
+ downloadUrl: "https://www.okx.com/web3",
+ },
+ {
+ id: "binance",
+ name: "Binance Web3",
+ icon: "🔶",
+ chains: ["bsc", "eth"],
+ color: "#F0B90B",
+ downloadUrl: "https://www.binance.com/en/web3wallet",
+ },
+ {
+ id: "tokenpocket",
+ name: "TokenPocket",
+ icon: "💼",
+ chains: ["bsc", "eth", "tron"],
+ color: "#2980FE",
+ downloadUrl: "https://www.tokenpocket.pro/",
+ },
+ {
+ id: "imtoken",
+ name: "imToken",
+ icon: "💎",
+ chains: ["bsc", "eth"],
+ color: "#11C4D1",
+ downloadUrl: "https://token.im/download",
+ },
+ {
+ id: "walletconnect",
+ name: "WalletConnect",
+ icon: "🔗",
+ chains: ["bsc", "eth"],
+ color: "#3B99FC",
+ downloadUrl: "https://walletconnect.com/",
+ },
+];
+
+// ─── Tutorial Content ─────────────────────────────────────────────────────────
+function getWalletSteps(walletId: WalletId, chain: ChainId): Array<{ title: string; desc: string; tip?: string }> {
+ const isTron = chain === "tron";
+
+ // EVM wallet steps for BSC/ETH
+ const evmSteps: Record> = {
+ metamask: [
+ {
+ title: "Install MetaMask",
+ desc: "Download MetaMask from metamask.io or your browser's extension store. Create a new wallet or import an existing one. Securely backup your seed phrase.",
+ tip: "MetaMask is available as a browser extension (Chrome, Firefox, Edge) and as a mobile app.",
+ },
+ {
+ title: "Add Network",
+ desc: chain === "bsc"
+ ? "In MetaMask, click the network dropdown at the top. Select 'Add Network' → 'Add a network manually'. Enter: Network Name: BNB Smart Chain, RPC URL: https://bsc-dataseed.binance.org/, Chain ID: 56, Symbol: BNB, Explorer: https://bscscan.com"
+ : "Ethereum Mainnet is pre-configured in MetaMask. Simply select 'Ethereum Mainnet' from the network dropdown.",
+ tip: chain === "bsc" ? "You can also add BSC automatically via chainlist.org" : undefined,
+ },
+ {
+ title: "Get USDT",
+ desc: chain === "bsc"
+ ? "Purchase BEP-20 USDT on Binance, OKX, or any exchange. Withdraw to your MetaMask address on the BSC network. Make sure you also have some BNB for gas fees."
+ : "Purchase ERC-20 USDT on any exchange. Withdraw to your MetaMask address on the Ethereum network. You'll need ETH for gas fees.",
+ },
+ {
+ title: "Connect to Presale",
+ desc: "Return to the presale page and click 'Connect Wallet' in the top-right corner. MetaMask will prompt you to connect — click 'Connect'. Your wallet address will appear in the navigation bar.",
+ },
+ {
+ title: "Find Your EVM Address",
+ desc: "Your EVM address is shown at the top of MetaMask (starts with 0x). Click it to copy. This is the address where your XIC tokens will be sent.",
+ tip: "Your BSC and ETH address are the same in MetaMask.",
+ },
+ {
+ title: "Purchase XIC",
+ desc: `Select the ${chain.toUpperCase()} tab on the presale page. Enter the USDT amount you want to spend. Click 'Buy XIC' — you'll need to approve USDT spending first, then confirm the purchase transaction.`,
+ tip: "Two transactions are required: first approve USDT, then confirm purchase. Both require small gas fees.",
+ },
+ ],
+ trust: [
+ {
+ title: "Install Trust Wallet",
+ desc: "Download Trust Wallet from trustwallet.com or your app store. Create a new wallet and securely backup your 12-word recovery phrase.",
+ tip: "Trust Wallet is a mobile-first wallet supporting 100+ blockchains.",
+ },
+ {
+ title: "Select Network",
+ desc: chain === "bsc"
+ ? "In Trust Wallet, tap the network icon at the top. Search for 'Smart Chain' and select 'BNB Smart Chain'. Your wallet is now on BSC."
+ : "In Trust Wallet, tap the network icon and select 'Ethereum'. Your wallet is now on Ethereum mainnet.",
+ },
+ {
+ title: "Get USDT",
+ desc: chain === "bsc"
+ ? "Buy BEP-20 USDT via Trust Wallet's built-in swap or transfer from an exchange. Also get some BNB for gas fees."
+ : "Buy ERC-20 USDT via the built-in swap or transfer from an exchange. Also get some ETH for gas fees.",
+ },
+ {
+ title: "Find Your EVM Address",
+ desc: "Tap on your wallet address at the top of the screen to copy it. This 0x address is your EVM address for receiving XIC tokens.",
+ tip: "Your BSC and ETH addresses are identical in Trust Wallet.",
+ },
+ {
+ title: "Use WalletConnect",
+ desc: "On the presale page, click 'Connect Wallet'. If WalletConnect option appears, select it. Open Trust Wallet, go to Settings → WalletConnect, and scan the QR code shown on the presale page.",
+ },
+ {
+ title: "Purchase XIC",
+ desc: `Select the ${chain.toUpperCase()} tab. Enter USDT amount and tap 'Buy XIC'. Trust Wallet will prompt you to approve USDT and confirm the purchase.`,
+ },
+ ],
+ okx: [
+ {
+ title: "Install OKX Wallet",
+ desc: "Download OKX Wallet from okx.com/web3 or the app store. Create or import a wallet. The OKX Wallet supports both browser extension and mobile.",
+ tip: "OKX Wallet supports 100+ networks including BSC, ETH, and TRON.",
+ },
+ {
+ title: "Select Network",
+ desc: chain === "bsc"
+ ? "In OKX Wallet, click the network selector. Search for 'BNB Chain' and select it."
+ : "Select 'Ethereum' from the network list in OKX Wallet.",
+ },
+ {
+ title: "Get USDT",
+ desc: "Transfer USDT from OKX Exchange to your OKX Wallet address. Make sure to select the correct network (BSC or ETH).",
+ tip: "OKX Exchange users can transfer directly to OKX Wallet with zero fees.",
+ },
+ {
+ title: "Find Your EVM Address",
+ desc: "Your wallet address is shown on the main screen. Tap/click to copy it. This is your EVM address for receiving XIC tokens.",
+ },
+ {
+ title: "Connect & Purchase",
+ desc: "On the presale page, click 'Connect Wallet'. OKX Wallet will appear as an option. Approve the connection, then select the network tab and enter your USDT amount to purchase.",
+ },
+ ],
+ binance: [
+ {
+ title: "Access Binance Web3 Wallet",
+ desc: "Open the Binance app. Tap the 'Web3' tab at the bottom. If you don't have a Web3 wallet yet, follow the setup wizard to create one.",
+ tip: "Binance Web3 Wallet is built into the Binance app — no separate download needed.",
+ },
+ {
+ title: "Select Network",
+ desc: chain === "bsc"
+ ? "In the Web3 wallet, tap the network selector and choose 'BNB Chain'."
+ : "Select 'Ethereum' from the network options.",
+ },
+ {
+ title: "Transfer USDT",
+ desc: "From your Binance Spot wallet, transfer USDT to your Web3 wallet. Tap 'Transfer' → 'To Web3 Wallet'. Select the correct network.",
+ tip: "Transfers between Binance Spot and Web3 Wallet are instant and free.",
+ },
+ {
+ title: "Find Your EVM Address",
+ desc: "In the Web3 wallet, tap your wallet name at the top to see and copy your address. This is your EVM address.",
+ },
+ {
+ title: "Connect & Purchase",
+ desc: "In the Binance app, tap 'Discover' and enter the presale URL. Or use the browser on the presale page and connect via WalletConnect. Approve the connection and proceed to purchase.",
+ },
+ ],
+ tokenpocket: [
+ {
+ title: "Install TokenPocket",
+ desc: "Download TokenPocket from tokenpocket.pro. Available on iOS, Android, and as a browser extension. Create or import your wallet.",
+ tip: "TokenPocket is one of the most popular multi-chain wallets in Asia.",
+ },
+ {
+ title: "Select Network",
+ desc: chain === "bsc"
+ ? "In TokenPocket, tap the network selector at the top. Select 'BSC' (BNB Smart Chain)."
+ : chain === "tron"
+ ? "Select 'TRON' from the network list."
+ : "Select 'ETH' (Ethereum) from the network list.",
+ },
+ {
+ title: "Get USDT",
+ desc: chain === "tron"
+ ? "Transfer TRC20 USDT to your TRON address in TokenPocket. Also get some TRX for transaction fees."
+ : `Transfer ${chain === "bsc" ? "BEP-20" : "ERC-20"} USDT to your wallet. Also get ${chain === "bsc" ? "BNB" : "ETH"} for gas.`,
+ },
+ {
+ title: "Find Your Address",
+ desc: chain === "tron"
+ ? "Your TRON address starts with 'T'. Your EVM address (for receiving XIC) starts with '0x'. Both are shown in your wallet — make sure to note your EVM address."
+ : "Your EVM address starts with '0x'. Tap it to copy.",
+ tip: chain === "tron" ? "XIC tokens are on BSC, so you need to provide your EVM (0x) address to receive them." : undefined,
+ },
+ {
+ title: "Connect & Purchase",
+ desc: chain === "tron"
+ ? "Send TRC20 USDT to the presale receiving address. Enter your EVM address in the memo/note field so we can send your XIC tokens to the right address."
+ : "Use the built-in DApp browser in TokenPocket to visit the presale page, or connect via WalletConnect.",
+ },
+ ],
+ imtoken: [
+ {
+ title: "Install imToken",
+ desc: "Download imToken from token.im. Available on iOS and Android. Create a new wallet or import an existing one.",
+ tip: "imToken is a trusted Ethereum-focused wallet with strong security features.",
+ },
+ {
+ title: "Select Network",
+ desc: chain === "bsc"
+ ? "In imToken, tap the network icon and select 'ETH' then switch to 'BSC' in the network settings. Or add BSC as a custom network."
+ : "imToken defaults to Ethereum. Select 'ETH' from the wallet list.",
+ },
+ {
+ title: "Get USDT",
+ desc: `Transfer ${chain === "bsc" ? "BEP-20" : "ERC-20"} USDT to your imToken address. Also ensure you have ${chain === "bsc" ? "BNB" : "ETH"} for gas fees.`,
+ },
+ {
+ title: "Find Your EVM Address",
+ desc: "Your wallet address is shown at the top of the imToken screen. Tap to copy it. This is your EVM address for receiving XIC tokens.",
+ },
+ {
+ title: "Connect via DApp Browser",
+ desc: "In imToken, tap 'Browser' at the bottom. Enter the presale URL. Connect your wallet when prompted. Then select the network and purchase XIC.",
+ },
+ ],
+ walletconnect: [
+ {
+ title: "What is WalletConnect?",
+ desc: "WalletConnect is a protocol that connects your mobile wallet to desktop dApps by scanning a QR code. It works with 300+ wallets including Trust Wallet, MetaMask Mobile, OKX Wallet, and more.",
+ tip: "WalletConnect v2 supports multiple chains simultaneously.",
+ },
+ {
+ title: "Prepare Your Mobile Wallet",
+ desc: "Make sure you have a WalletConnect-compatible wallet installed (Trust Wallet, MetaMask Mobile, OKX Wallet, etc.) with USDT and gas tokens ready on BSC or ETH.",
+ },
+ {
+ title: "Initiate Connection",
+ desc: "On the presale page (desktop), click 'Connect Wallet'. If a WalletConnect option appears, select it. A QR code will appear on screen.",
+ },
+ {
+ title: "Scan QR Code",
+ desc: "Open your mobile wallet app. Find the WalletConnect scanner (usually in Settings or the scan icon). Scan the QR code shown on the desktop presale page.",
+ },
+ {
+ title: "Approve Connection",
+ desc: "Your mobile wallet will ask you to approve the connection to the presale site. Review the details and tap 'Approve' or 'Connect'.",
+ },
+ {
+ title: "Purchase XIC",
+ desc: "Your wallet is now connected. On the desktop presale page, select the network, enter USDT amount, and click 'Buy XIC'. Approve each transaction on your mobile wallet.",
+ tip: "Keep your phone nearby — each transaction requires approval on your mobile wallet.",
+ },
+ ],
+ };
+
+ // TRON-specific steps for TRC20 purchases
+ const tronSteps: Record> = {
+ trust: [
+ {
+ title: "Open Trust Wallet",
+ desc: "Open Trust Wallet and switch to the TRON network. Tap the network selector at the top and choose 'TRON'.",
+ },
+ {
+ title: "Get TRC20 USDT",
+ desc: "Transfer TRC20 USDT to your TRON address. Also ensure you have at least 5-10 TRX for transaction fees.",
+ tip: "TRC20 USDT transfers are fast and cheap (usually < $0.01 in TRX fees).",
+ },
+ {
+ title: "Find Your TRON Address",
+ desc: "Your TRON address starts with 'T'. Tap it to copy. This is the address you'll send FROM.",
+ },
+ {
+ title: "Find Your EVM Address",
+ desc: "Switch to the BSC or ETH network in Trust Wallet. Your 0x address is your EVM address. Copy it — you'll need it to receive XIC tokens.",
+ tip: "Your BSC and ETH addresses are the same 0x address.",
+ },
+ {
+ title: "Send TRC20 USDT",
+ desc: `Send TRC20 USDT to: ${RECEIVING_ADDRESSES.trc20}. In the Memo/Note field, enter your EVM (0x) address so we know where to send your XIC tokens.`,
+ tip: "The memo field is crucial! Without it, we cannot automatically distribute your XIC tokens.",
+ },
+ {
+ title: "Wait for Distribution",
+ desc: "After your TRC20 USDT payment is confirmed (usually 1-3 minutes), XIC tokens will be distributed to your EVM address within 1-24 hours.",
+ },
+ ],
+ okx: [
+ {
+ title: "Switch to TRON",
+ desc: "In OKX Wallet, tap the network selector and choose 'TRON'. Your TRON address starts with 'T'.",
+ },
+ {
+ title: "Get TRC20 USDT",
+ desc: "Transfer TRC20 USDT from OKX Exchange to your OKX Wallet TRON address. Also get some TRX for fees.",
+ },
+ {
+ title: "Note Your EVM Address",
+ desc: "Switch to BSC or ETH network in OKX Wallet. Copy your 0x address — this is where XIC tokens will be sent.",
+ },
+ {
+ title: "Send with Memo",
+ desc: `Send TRC20 USDT to: ${RECEIVING_ADDRESSES.trc20}. In the 'Memo' or 'Note' field, enter your 0x EVM address.`,
+ tip: "OKX Wallet supports memo fields for TRON transfers.",
+ },
+ {
+ title: "Confirm & Wait",
+ desc: "Confirm the transaction. Your XIC tokens will be distributed to your EVM address within 1-24 hours after confirmation.",
+ },
+ ],
+ tokenpocket: [
+ {
+ title: "Switch to TRON",
+ desc: "In TokenPocket, tap the network selector and choose 'TRON'. Your TRON address starts with 'T'.",
+ },
+ {
+ title: "Get TRC20 USDT",
+ desc: "Transfer TRC20 USDT to your TRON address. Also get TRX for transaction fees.",
+ },
+ {
+ title: "Note Your EVM Address",
+ desc: "Switch to BSC or ETH in TokenPocket. Copy your 0x address — XIC tokens will be sent here.",
+ },
+ {
+ title: "Send with Memo",
+ desc: `In TokenPocket TRON, send USDT to: ${RECEIVING_ADDRESSES.trc20}. Add your 0x EVM address in the memo field.`,
+ },
+ {
+ title: "Track & Receive",
+ desc: "Your XIC tokens will arrive at your EVM address within 1-24 hours after the TRON transaction is confirmed.",
+ },
+ ],
+ };
+
+ if (isTron && tronSteps[walletId]) {
+ return tronSteps[walletId];
+ }
+
+ return evmSteps[walletId] || evmSteps.metamask;
+}
+
+// ─── Step Component ───────────────────────────────────────────────────────────
+function StepCard({ num, title, desc, tip }: { num: number; title: string; desc: string; tip?: string }) {
+ return (
+
+ {lang === "en" ? `${steps.length} steps to complete your purchase` : `${steps.length} 步完成购买`}
+
+
+
+ {effectiveChain === "tron" && (
+
+ ⚠️ {lang === "en"
+ ? "TRC20 purchases require manual processing. You MUST provide your EVM (0x) address in the memo to receive XIC tokens automatically."
+ : "TRC20 购买需要人工处理。您必须在备注中填写您的 EVM（0x）地址才能自动收到 XIC 代币。"}
+
+ 📝 {lang === "en"
+ ? "Memo/Note field: Enter your EVM address (0x...) to receive XIC tokens automatically"
+ : "备注/Note 字段：填写您的 EVM 地址（0x...）以自动收到 XIC 代币"}
+
+
+ )}
+
+ {/* FAQ for this wallet */}
+
+
+ {lang === "en" ? "Common Questions" : "常见问题"}
+
+
+
+
+ {lang === "en" ? "What if my wallet isn't listed?" : "如果我的钱包不在列表中怎么办？"}
+
+
+ {lang === "en"
+ ? "Any EVM-compatible wallet works for BSC/ETH purchases. Use WalletConnect to connect most mobile wallets to the presale page."
+ : "任何 EVM 兼容钱包都适用于 BSC/ETH 购买。使用 WalletConnect 可将大多数移动钱包连接到预售页面。"}
+
+
+
+
+ {lang === "en" ? "Where will I receive my XIC tokens?" : "我的 XIC 代币会发送到哪里？"}
+
+
+ {lang === "en"
+ ? "XIC tokens are on BSC (BEP-20). For BSC/ETH purchases, tokens go to your connected wallet address. For TRC20 purchases, you must provide your BSC/ETH address."
+ : "XIC 代币在 BSC（BEP-20）网络上。BSC/ETH 购买后代币直接发送到您连接的钱包地址。TRC20 购买需要提供您的 BSC/ETH 地址。"}
+
+
+
+
+ {lang === "en" ? "How long does it take?" : "需要多长时间？"}
+