feat: 添加三步操作指引卡片、添加XIC到钱包按钮、WhatsApp客服联系方式
新增功能： 1. 购买面板顶部添加三步操作指引卡片（购买前/购买中/购买后） - 第一步：购买前准备（连接钱包、添加XIC代币、复制接收地址） - 第二步：购买操作（粘贴地址、输入数量、一键购买） - 第三步：购买后确认（收到回执、确认支付、获取哈希、代币自动发放） 2. 购买成功页面添加「添加XIC到钱包」按钮（wallet_watchAsset一键添加） 3. 购买成功页面添加WhatsApp客服联系方式（+971 56 165 1888） 4. 中英文双语支持（i18n.ts新增所有翻译键） 部署时间: 部署服务器: AI Server 43.224.155.27
This commit is contained in:
NAC Admin
parent
456eee84c3
commit
8bd78c3fc0
|
|
@ -102,6 +102,31 @@ export const translations = {
|
||||||
trc20_step4: "Contact support with your TX hash if tokens are not received within 24 hours",
|
trc20_step4: "Contact support with your TX hash if tokens are not received within 24 hours",
|
||||||
trc20_warning: "⚠️ Only send USDT on the TRON network (TRC20). Sending other tokens or using a different network will result in permanent loss.",
|
trc20_warning: "⚠️ Only send USDT on the TRON network (TRC20). Sending other tokens or using a different network will result in permanent loss.",
|
||||||
|
|
||||||
|
// How to Buy Guide
|
||||||
|
guide_title: "How to Buy XIC",
|
||||||
|
guide_step1_title: "Step 1: Before Purchase",
|
||||||
|
guide_step1_1: "Visit the website and connect your wallet",
|
||||||
|
guide_step1_2: "Add XIC token (BSC network, contract: 0xc65e7A2738eD884dB8d26a6eb2fEcF7daCA2e90C)",
|
||||||
|
guide_step1_3: "Copy the token receiving address from the website",
|
||||||
|
guide_step2_title: "Step 2: Purchase",
|
||||||
|
guide_step2_1: "Paste the receiving address",
|
||||||
|
guide_step2_2: "Website automatically shows USDT amount",
|
||||||
|
guide_step2_3: "Enter the XIC quantity you want to buy",
|
||||||
|
guide_step2_4: "Click Buy — one wallet confirmation only",
|
||||||
|
guide_step3_title: "Step 3: After Purchase",
|
||||||
|
guide_step3_1: "Receive purchase receipt",
|
||||||
|
guide_step3_2: "Confirm payment is completed",
|
||||||
|
guide_step3_3: "Get transaction hash",
|
||||||
|
guide_step3_4: "XIC tokens automatically sent to your wallet",
|
||||||
|
// Add Token
|
||||||
|
add_token_btn: "Add XIC to Wallet",
|
||||||
|
add_token_success: "XIC token added to wallet!",
|
||||||
|
add_token_fail: "Failed to add token. Please add manually.",
|
||||||
|
// WhatsApp Support
|
||||||
|
support_whatsapp: "WhatsApp Support",
|
||||||
|
support_whatsapp_msg: "Didn't receive tokens? Contact us on WhatsApp, resolved within 24 hours",
|
||||||
|
support_whatsapp_btn: "Contact WhatsApp: +971 56 165 1888",
|
||||||
|
|
||||||
// Why NAC
|
// Why NAC
|
||||||
why_rwa_title: "Native RWA Chain",
|
why_rwa_title: "Native RWA Chain",
|
||||||
why_rwa_desc: "Purpose-built for Real World Asset tokenization with AI-native compliance",
|
why_rwa_desc: "Purpose-built for Real World Asset tokenization with AI-native compliance",
|
||||||
|
|
@ -268,6 +293,31 @@ export const translations = {
|
||||||
trc20_step4: "如24小时内未收到代币，请携带交易哈希联系客服",
|
trc20_step4: "如24小时内未收到代币，请携带交易哈希联系客服",
|
||||||
trc20_warning: "⚠️ 请仅在 TRON 网络（TRC20）上发送 USDT。发送其他代币或使用其他网络将导致永久损失。",
|
trc20_warning: "⚠️ 请仅在 TRON 网络（TRC20）上发送 USDT。发送其他代币或使用其他网络将导致永久损失。",
|
||||||
|
|
||||||
|
// How to Buy Guide
|
||||||
|
guide_title: "XIC 购买指南",
|
||||||
|
guide_step1_title: "第一步：购买前准备",
|
||||||
|
guide_step1_1: "访问网站并连接钱包",
|
||||||
|
guide_step1_2: "添加 XIC 代币（BSC 网络，合约：0xc65e7A2738eD884dB8d26a6eb2fEcF7daCA2e90C）",
|
||||||
|
guide_step1_3: "复制网站上的代币接收地址",
|
||||||
|
guide_step2_title: "第二步：购买操作",
|
||||||
|
guide_step2_1: "粘贴接收地址",
|
||||||
|
guide_step2_2: "网站自动显示 USDT 数量",
|
||||||
|
guide_step2_3: "在输入框填入购买 XIC 的数量",
|
||||||
|
guide_step2_4: "点击购买 — 只需钱包确认一次",
|
||||||
|
guide_step3_title: "第三步：购买后确认",
|
||||||
|
guide_step3_1: "收到购买回执",
|
||||||
|
guide_step3_2: "确认已完成支付",
|
||||||
|
guide_step3_3: "获取交易哈希",
|
||||||
|
guide_step3_4: "XIC 代币自动发放到您的钱包",
|
||||||
|
// Add Token
|
||||||
|
add_token_btn: "添加 XIC 到钱包",
|
||||||
|
add_token_success: "XIC 代币已添加到钱包！",
|
||||||
|
add_token_fail: "添加失败，请手动添加代币。",
|
||||||
|
// WhatsApp Support
|
||||||
|
support_whatsapp: "WhatsApp 客服",
|
||||||
|
support_whatsapp_msg: "没有收到代币？联系 WhatsApp 客服，24小时内给予解决",
|
||||||
|
support_whatsapp_btn: "联系 WhatsApp：+971 56 165 1888",
|
||||||
|
|
||||||
// Why NAC
|
// Why NAC
|
||||||
why_rwa_title: "原生 RWA 公链",
|
why_rwa_title: "原生 RWA 公链",
|
||||||
why_rwa_desc: "专为现实世界资产代币化而生，内置 AI 合规审批",
|
why_rwa_desc: "专为现实世界资产代币化而生，内置 AI 合规审批",
|
||||||
|
|
|
||||||
|
|
@ -453,6 +453,31 @@ function EVMPurchasePanel({ network, lang, wallet }: { network: "BSC" | "ETH"; l
|
||||||
}
|
}
|
||||||
|
|
||||||
if (purchaseState.step === "success") {
|
if (purchaseState.step === "success") {
|
||||||
|
const handleAddToken = async () => {
|
||||||
|
try {
|
||||||
|
const ethereum = (window as unknown as Record<string, unknown>).ethereum as { request?: (args: { method: string; params?: unknown[] }) => Promise<unknown> } | undefined;
|
||||||
|
if (!ethereum?.request) {
|
||||||
|
toast.error(t("add_token_fail"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await ethereum.request({
|
||||||
|
method: 'wallet_watchAsset',
|
||||||
|
params: [{
|
||||||
|
type: 'ERC20',
|
||||||
|
options: {
|
||||||
|
address: '0xc65e7A2738eD884dB8d26a6eb2fEcF7daCA2e90C',
|
||||||
|
symbol: 'XIC',
|
||||||
|
decimals: 18,
|
||||||
|
image: 'https://d2xsxph8kpxj0f.cloudfront.net/310519663287655625/Ngki3MumDNGduV3xJt3mga/nac-token-icon_382e5c30.png',
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
});
|
||||||
|
toast.success(t("add_token_success"));
|
||||||
|
} catch {
|
||||||
|
toast.error(t("add_token_fail"));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 text-center py-4">
|
<div className="space-y-4 text-center py-4">
|
||||||
<div className="text-5xl mb-3">🎉</div>
|
<div className="text-5xl mb-3">🎉</div>
|
||||||
|
|
@ -472,6 +497,35 @@ function EVMPurchasePanel({ network, lang, wallet }: { network: "BSC" | "ETH"; l
|
||||||
{t("buy_view_explorer")}
|
{t("buy_view_explorer")}
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
|
{/* Add XIC to Wallet Button */}
|
||||||
|
<button
|
||||||
|
onClick={handleAddToken}
|
||||||
|
className="w-full py-3 rounded-xl text-sm font-semibold flex items-center justify-center gap-2 transition-all hover:opacity-90"
|
||||||
|
style={{ background: "rgba(240,180,41,0.15)", border: "1px solid rgba(240,180,41,0.4)", color: "#f0b429" }}
|
||||||
|
>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/>
|
||||||
|
<path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/>
|
||||||
|
<path d="M18 12a2 2 0 0 0 0 4h4v-4z"/>
|
||||||
|
</svg>
|
||||||
|
{t("add_token_btn")}
|
||||||
|
</button>
|
||||||
|
{/* WhatsApp Support */}
|
||||||
|
<div className="rounded-xl p-4 text-left" style={{ background: "rgba(37,211,102,0.06)", border: "1px solid rgba(37,211,102,0.25)" }}>
|
||||||
|
<p className="text-xs text-white/60 mb-2">{t("support_whatsapp_msg")}</p>
|
||||||
|
<a
|
||||||
|
href="https://wa.me/971561651888"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-2 w-full py-2.5 px-4 rounded-xl text-sm font-semibold transition-all hover:opacity-90"
|
||||||
|
style={{ background: "rgba(37,211,102,0.15)", border: "1px solid rgba(37,211,102,0.35)", color: "#25D366" }}
|
||||||
|
>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/>
|
||||||
|
</svg>
|
||||||
|
{t("support_whatsapp_btn")}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<button onClick={reset} className="btn-primary-nac px-8 py-2 rounded-lg text-sm font-bold">
|
<button onClick={reset} className="btn-primary-nac px-8 py-2 rounded-lg text-sm font-bold">
|
||||||
{t("buy_more")}
|
{t("buy_more")}
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -1208,6 +1262,58 @@ export default function Home() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* How to Buy Guide — 3-Step Cards */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-widest text-white/40 mb-3">{t("guide_title")}</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||||
|
{/* Step 1 */}
|
||||||
|
<div className="rounded-xl p-3 space-y-2" style={{ background: "rgba(0,212,255,0.05)", border: "1px solid rgba(0,212,255,0.2)" }}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold" style={{ background: "rgba(0,212,255,0.2)", color: "#00d4ff" }}>1</div>
|
||||||
|
<span className="text-xs font-semibold" style={{ color: "#00d4ff" }}>{t("guide_step1_title")}</span>
|
||||||
|
</div>
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{[t("guide_step1_1"), t("guide_step1_2"), t("guide_step1_3")].map((item, i) => (
|
||||||
|
<li key={i} className="text-xs text-white/60 flex items-start gap-1.5">
|
||||||
|
<span className="text-white/30 mt-0.5 flex-shrink-0">•</span>
|
||||||
|
<span>{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/* Step 2 */}
|
||||||
|
<div className="rounded-xl p-3 space-y-2" style={{ background: "rgba(240,180,41,0.05)", border: "1px solid rgba(240,180,41,0.2)" }}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold" style={{ background: "rgba(240,180,41,0.2)", color: "#f0b429" }}>2</div>
|
||||||
|
<span className="text-xs font-semibold" style={{ color: "#f0b429" }}>{t("guide_step2_title")}</span>
|
||||||
|
</div>
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{[t("guide_step2_1"), t("guide_step2_2"), t("guide_step2_3"), t("guide_step2_4")].map((item, i) => (
|
||||||
|
<li key={i} className="text-xs text-white/60 flex items-start gap-1.5">
|
||||||
|
<span className="text-white/30 mt-0.5 flex-shrink-0">•</span>
|
||||||
|
<span>{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/* Step 3 */}
|
||||||
|
<div className="rounded-xl p-3 space-y-2" style={{ background: "rgba(0,230,118,0.05)", border: "1px solid rgba(0,230,118,0.2)" }}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold" style={{ background: "rgba(0,230,118,0.2)", color: "#00e676" }}>3</div>
|
||||||
|
<span className="text-xs font-semibold" style={{ color: "#00e676" }}>{t("guide_step3_title")}</span>
|
||||||
|
</div>
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{[t("guide_step3_1"), t("guide_step3_2"), t("guide_step3_3"), t("guide_step3_4")].map((item, i) => (
|
||||||
|
<li key={i} className="text-xs text-white/60 flex items-start gap-1.5">
|
||||||
|
<span className="text-white/30 mt-0.5 flex-shrink-0">•</span>
|
||||||
|
<span>{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Network Selector */}
|
{/* Network Selector */}
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<p className="text-xs font-semibold uppercase tracking-widest text-white/40 mb-3">{t("buy_select_network")}</p>
|
<p className="text-xs font-semibold uppercase tracking-widest text-white/40 mb-3">{t("buy_select_network")}</p>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue