Checkpoint: NAC XIC Token Presale v2.0 — 新增功能：导航栏右上角连接钱包按钮、FAQ区域(8题)、实时购买记录Feed、聊天支持浮动按钮；去除最低购买量限制；零Manus内联；已部署到备份服务器103.96.148.7
This commit is contained in:
Manus
parent
f8b007a9eb
commit
59a9155fed
|
|
@ -12,9 +12,6 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
<script
|
|
||||||
defer
|
|
||||||
src="%VITE_ANALYTICS_ENDPOINT%/umami"
|
|
||||||
data-website-id="%VITE_ANALYTICS_WEBSITE_ID%"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@ export const PRESALE_CONFIG = {
|
||||||
tokenSymbol: "XIC",
|
tokenSymbol: "XIC",
|
||||||
tokenName: "New AssetChain Token",
|
tokenName: "New AssetChain Token",
|
||||||
tokenDecimals: 18,
|
tokenDecimals: 18,
|
||||||
minPurchaseUSDT: 10, // Minimum $10 USDT
|
minPurchaseUSDT: 0, // No minimum purchase limit
|
||||||
maxPurchaseUSDT: 50000, // Maximum $50,000 USDT
|
maxPurchaseUSDT: 50000, // Maximum $50,000 USDT
|
||||||
totalSupply: 100_000_000_000, // 100 billion XIC
|
totalSupply: 100_000_000_000, // 100 billion XIC
|
||||||
presaleAllocation: 30_000_000_000, // 30 billion for presale
|
presaleAllocation: 30_000_000_000, // 30 billion for presale
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
// Colors: Amber Gold #f0b429 | Quantum Blue #00d4ff | Deep Black #0a0a0f
|
// Colors: Amber Gold #f0b429 | Quantum Blue #00d4ff | Deep Black #0a0a0f
|
||||||
// Fonts: Space Grotesk (headings) | JetBrains Mono (numbers) | DM Sans (body)
|
// Fonts: Space Grotesk (headings) | JetBrains Mono (numbers) | DM Sans (body)
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react";
|
import { useState, useEffect, useCallback, useRef } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { useWallet } from "@/hooks/useWallet";
|
import { useWallet } from "@/hooks/useWallet";
|
||||||
import { usePresale } from "@/hooks/usePresale";
|
import { usePresale } from "@/hooks/usePresale";
|
||||||
|
|
@ -24,6 +24,54 @@ const MOCK_STATS = {
|
||||||
participants: 3847,
|
participants: 3847,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// ─── Mock purchase records for live feed ─────────────────────────────────────
|
||||||
|
const MOCK_PURCHASES = [
|
||||||
|
{ 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" },
|
||||||
|
{ address: "0xa1f3...7e4b", amount: 1000000, usdt: 20000, time: "23 min ago", chain: "BSC" },
|
||||||
|
{ address: "0x6c2d...9b8a", amount: 150000, usdt: 3000, time: "28 min ago", chain: "ETH" },
|
||||||
|
];
|
||||||
|
|
||||||
|
// ─── FAQ Data ─────────────────────────────────────────────────────────────────
|
||||||
|
const FAQ_ITEMS = [
|
||||||
|
{
|
||||||
|
q: "What is XIC Token?",
|
||||||
|
a: "XIC is the native utility token of New AssetChain (NAC), a purpose-built RWA (Real World Asset) blockchain featuring AI-native compliance, CBPP consensus, and Charter smart contracts. XIC powers governance, transaction fees, and staking within the NAC ecosystem."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "What is the presale price?",
|
||||||
|
a: "The presale price is $0.02 USD per XIC token. The projected listing price is $0.10 USD, representing a 5x potential return for presale participants."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Which payment methods are supported?",
|
||||||
|
a: "We accept USDT on three networks: BSC (BEP-20), Ethereum (ERC-20), and TRON (TRC-20). For BSC and ETH, connect your MetaMask or compatible EVM wallet. For TRC-20, send USDT directly to our receiving address."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Is there a minimum purchase amount?",
|
||||||
|
a: "No, there is no minimum purchase amount. You can buy any amount of XIC tokens starting from any USDT value. The maximum single purchase is $50,000 USDT."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "When will I receive my XIC tokens?",
|
||||||
|
a: "For BSC and ETH purchases, tokens are distributed immediately after the transaction is confirmed on-chain. For TRC-20 manual transfers, token distribution occurs within 1–24 hours after confirmation."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "When will XIC be listed on exchanges?",
|
||||||
|
a: "XIC is planned for listing on major centralized and decentralized exchanges following the presale completion. The target listing price is $0.10 USD. Specific exchange announcements will be made through our official Telegram and Twitter channels."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Is the presale contract audited?",
|
||||||
|
a: "Yes. Both the BSC and ETH presale contracts are verified on their respective block explorers (BscScan and Etherscan). You can view the contract source code and transaction history directly on-chain."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "What is NAC's technology advantage?",
|
||||||
|
a: "NAC is a fully independent blockchain — not a fork or derivative of Ethereum or any existing chain. It features NVM (NAC Virtual Machine), CBPP consensus protocol, Charter smart contract language, CSNP network protocol, and built-in AI compliance for RWA tokenization."
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
// ─── Countdown Timer ──────────────────────────────────────────────────────────
|
// ─── Countdown Timer ──────────────────────────────────────────────────────────
|
||||||
function useCountdown(targetDate: Date) {
|
function useCountdown(targetDate: Date) {
|
||||||
const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });
|
const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });
|
||||||
|
|
@ -80,7 +128,6 @@ function NetworkIcon({ network }: { network: NetworkTab }) {
|
||||||
<path d="M12 16.5L7 13.5L12 20L17 13.5L12 16.5Z" fill="white" opacity="0.7"/>
|
<path d="M12 16.5L7 13.5L12 20L17 13.5L12 16.5Z" fill="white" opacity="0.7"/>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
// TRON
|
|
||||||
return (
|
return (
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||||
<circle cx="12" cy="12" r="12" fill="#FF0013"/>
|
<circle cx="12" cy="12" r="12" fill="#FF0013"/>
|
||||||
|
|
@ -133,9 +180,9 @@ function TRC20Panel({ usdtAmount }: { usdtAmount: number }) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<StepBadge num={1} text={`Send exactly ${usdtAmount.toFixed(2)} USDT (TRC20) to the address above`} />
|
<StepBadge num={1} text={`Send ${usdtAmount > 0 ? usdtAmount.toFixed(2) + " USDT" : "any amount of USDT"} (TRC20) to the address above`} />
|
||||||
<StepBadge num={2} text={`Include memo: ${PRESALE_CONFIG.trc20Memo} (optional but recommended)`} />
|
<StepBadge num={2} text={`Include memo: ${PRESALE_CONFIG.trc20Memo} (optional but recommended)`} />
|
||||||
<StepBadge num={3} text={`You will receive ${formatNumber(tokenAmount)} XIC tokens after confirmation (1-24h)`} />
|
<StepBadge num={3} text={usdtAmount > 0 ? `You will receive ${formatNumber(tokenAmount)} XIC tokens after confirmation (1-24h)` : "You will receive XIC tokens proportional to your USDT amount after confirmation (1-24h)"} />
|
||||||
<StepBadge num={4} text="Contact support with your TX hash if tokens are not received within 24 hours" />
|
<StepBadge num={4} text="Contact support with your TX hash if tokens are not received within 24 hours" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -166,11 +213,12 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
|
||||||
|
|
||||||
const usdtAmount = parseFloat(usdtInput) || 0;
|
const usdtAmount = parseFloat(usdtInput) || 0;
|
||||||
const tokenAmount = calcTokens(usdtAmount);
|
const tokenAmount = calcTokens(usdtAmount);
|
||||||
const isValidAmount = usdtAmount >= PRESALE_CONFIG.minPurchaseUSDT && usdtAmount <= PRESALE_CONFIG.maxPurchaseUSDT;
|
// No minimum purchase limit — only check positive amount and max
|
||||||
|
const isValidAmount = usdtAmount > 0 && usdtAmount <= PRESALE_CONFIG.maxPurchaseUSDT;
|
||||||
|
|
||||||
const handleBuy = async () => {
|
const handleBuy = async () => {
|
||||||
if (!isValidAmount) {
|
if (!isValidAmount) {
|
||||||
toast.error(`Amount must be between $${PRESALE_CONFIG.minPurchaseUSDT} and $${PRESALE_CONFIG.maxPurchaseUSDT}`);
|
toast.error(`Please enter a valid amount (max $${PRESALE_CONFIG.maxPurchaseUSDT.toLocaleString()} USDT)`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
await buyWithUSDT(usdtAmount);
|
await buyWithUSDT(usdtAmount);
|
||||||
|
|
@ -244,7 +292,10 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
|
||||||
View on Explorer →
|
View on Explorer →
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
<button onClick={reset} className="btn-secondary-nac px-6 py-2 rounded-lg text-sm font-semibold">
|
<button
|
||||||
|
onClick={reset}
|
||||||
|
className="btn-primary-nac px-8 py-2 rounded-lg text-sm font-bold"
|
||||||
|
>
|
||||||
Buy More
|
Buy More
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -274,9 +325,9 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
|
||||||
type="number"
|
type="number"
|
||||||
value={usdtInput}
|
value={usdtInput}
|
||||||
onChange={e => setUsdtInput(e.target.value)}
|
onChange={e => setUsdtInput(e.target.value)}
|
||||||
min={PRESALE_CONFIG.minPurchaseUSDT}
|
min={0}
|
||||||
max={PRESALE_CONFIG.maxPurchaseUSDT}
|
max={PRESALE_CONFIG.maxPurchaseUSDT}
|
||||||
placeholder="Enter USDT amount"
|
placeholder="Enter any USDT amount"
|
||||||
className="input-nac w-full px-4 py-3 rounded-xl text-lg counter-digit pr-20"
|
className="input-nac w-full px-4 py-3 rounded-xl text-lg counter-digit pr-20"
|
||||||
disabled={isProcessing}
|
disabled={isProcessing}
|
||||||
/>
|
/>
|
||||||
|
|
@ -323,7 +374,7 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
|
||||||
</div>
|
</div>
|
||||||
Step 1: Approve USDT
|
Step 1: Approve USDT
|
||||||
</div>
|
</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={`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"}`}>
|
<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>}
|
{(purchaseState.step as string) === "success" && <span className="text-black text-xs">✓</span>}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -347,17 +398,299 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<p className="text-xs text-center text-white/30">
|
<p className="text-xs text-center text-white/30">
|
||||||
Min: ${PRESALE_CONFIG.minPurchaseUSDT} · Max: ${PRESALE_CONFIG.maxPurchaseUSDT.toLocaleString()} USDT
|
No minimum · Max: ${PRESALE_CONFIG.maxPurchaseUSDT.toLocaleString()} USDT
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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() {
|
||||||
|
const [records, setRecords] = useState(MOCK_PURCHASES);
|
||||||
|
const feedRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// Simulate new purchases every 15–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: "just now",
|
||||||
|
chain: chains[counter % 3],
|
||||||
|
};
|
||||||
|
setRecords(prev => [newRecord, ...prev.slice(0, 9)]);
|
||||||
|
}, 18000 + Math.random() * 12000);
|
||||||
|
|
||||||
|
return () => clearInterval(id);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
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">Live Purchase 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">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>
|
||||||
|
</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() {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3">
|
||||||
|
{/* Chat Panel */}
|
||||||
|
{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" }}>NAC Support</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">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">
|
||||||
|
👋 Hi! Need help with the XIC presale? Our team is available 24/7 to assist you.
|
||||||
|
</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>
|
||||||
|
Chat on 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>
|
||||||
|
Email Support
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-xs text-white/30 text-center mt-3">
|
||||||
|
Avg. response time: < 2 hours
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Toggle Button */}
|
||||||
|
<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 ─────────────────────────────────────────────────────
|
||||||
|
function NavWalletButton() {
|
||||||
|
const wallet = useWallet();
|
||||||
|
const [showMenu, setShowMenu] = 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);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!wallet.isConnected) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={wallet.connect}
|
||||||
|
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 ? "Connecting..." : "Connect Wallet"}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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">Connected Wallet</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"
|
||||||
|
>
|
||||||
|
Disconnect
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// ─── Main Page ────────────────────────────────────────────────────────────────
|
// ─── Main Page ────────────────────────────────────────────────────────────────
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [activeNetwork, setActiveNetwork] = useState<NetworkTab>("BSC");
|
const [activeNetwork, setActiveNetwork] = useState<NetworkTab>("BSC");
|
||||||
const [trcUsdtAmount, setTrcUsdtAmount] = useState("100");
|
const [trcUsdtAmount, setTrcUsdtAmount] = useState("100");
|
||||||
const presaleEndDate = new Date("2025-12-31T23:59:59Z");
|
const presaleEndDate = new Date("2026-06-30T23:59:59Z");
|
||||||
const countdown = useCountdown(presaleEndDate);
|
const countdown = useCountdown(presaleEndDate);
|
||||||
const progressPct = Math.min((MOCK_STATS.raised / MOCK_STATS.hardCap) * 100, 100);
|
const progressPct = Math.min((MOCK_STATS.raised / MOCK_STATS.hardCap) * 100, 100);
|
||||||
|
|
||||||
|
|
@ -378,6 +711,8 @@ export default function Home() {
|
||||||
<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">Website</a>
|
<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">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">Explorer</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">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">Docs</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">Docs</a>
|
||||||
|
{/* ── Connect Wallet Button in Nav ── */}
|
||||||
|
<NavWalletButton />
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
@ -403,6 +738,7 @@ export default function Home() {
|
||||||
<span className="flex items-center gap-1"><span className="text-amber-400">✦</span> $0.02 per XIC</span>
|
<span className="flex items-center gap-1"><span className="text-amber-400">✦</span> $0.02 per XIC</span>
|
||||||
<span className="flex items-center gap-1"><span className="text-amber-400">✦</span> 100B Total Supply</span>
|
<span className="flex items-center gap-1"><span className="text-amber-400">✦</span> 100B Total Supply</span>
|
||||||
<span className="flex items-center gap-1"><span className="text-amber-400">✦</span> BSC · ETH · TRC20</span>
|
<span className="flex items-center gap-1"><span className="text-amber-400">✦</span> BSC · ETH · TRC20</span>
|
||||||
|
<span className="flex items-center gap-1"><span className="text-amber-400">✦</span> No Minimum Purchase</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -500,6 +836,9 @@ export default function Home() {
|
||||||
View Token Contract →
|
View Token Contract →
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Live Purchase Feed */}
|
||||||
|
<PurchaseFeed />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ── Right Panel: Purchase ── */}
|
{/* ── Right Panel: Purchase ── */}
|
||||||
|
|
@ -510,7 +849,7 @@ export default function Home() {
|
||||||
<img src={TOKEN_ICON} alt="XIC" className="w-14 h-14 rounded-full" style={{ border: "2px solid rgba(240,180,41,0.4)" }} />
|
<img src={TOKEN_ICON} alt="XIC" className="w-14 h-14 rounded-full" style={{ border: "2px solid rgba(240,180,41,0.4)" }} />
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#f0b429" }}>Buy XIC Tokens</h2>
|
<h2 className="text-2xl font-bold" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#f0b429" }}>Buy XIC Tokens</h2>
|
||||||
<p className="text-sm text-white/50">1 XIC = <span className="text-white/80 font-semibold">$0.02 USDT</span></p>
|
<p className="text-sm text-white/50">1 XIC = <span className="text-white/80 font-semibold">$0.02 USDT</span> · <span className="text-green-400 font-semibold">No Minimum</span></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -545,7 +884,7 @@ export default function Home() {
|
||||||
type="number"
|
type="number"
|
||||||
value={trcUsdtAmount}
|
value={trcUsdtAmount}
|
||||||
onChange={e => setTrcUsdtAmount(e.target.value)}
|
onChange={e => setTrcUsdtAmount(e.target.value)}
|
||||||
placeholder="Enter USDT amount"
|
placeholder="Enter any USDT amount"
|
||||||
className="input-nac w-full px-4 py-3 rounded-xl text-lg counter-digit pr-20"
|
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>
|
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-white/40 text-sm font-semibold">USDT</span>
|
||||||
|
|
@ -600,8 +939,40 @@ export default function Home() {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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" }}>
|
||||||
|
Frequently Asked Questions
|
||||||
|
</h2>
|
||||||
|
<p className="text-white/50 text-sm max-w-xl mx-auto">
|
||||||
|
Everything you need to know about the XIC Token presale and New AssetChain ecosystem.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{FAQ_ITEMS.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">Still have questions?</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>
|
||||||
|
Ask on Telegram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* ── Footer ── */}
|
{/* ── Footer ── */}
|
||||||
<footer className="mt-16 py-8 text-center" style={{ borderTop: "1px solid rgba(240,180,41,0.1)" }}>
|
<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">
|
<div className="flex items-center justify-center gap-2 mb-3">
|
||||||
<img src={TOKEN_ICON} alt="XIC" className="w-6 h-6 rounded-full" />
|
<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>
|
<span className="font-semibold text-white/70" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>New AssetChain</span>
|
||||||
|
|
@ -622,6 +993,17 @@ export default function Home() {
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
{/* ── Chat Support Widget ── */}
|
||||||
|
<ChatSupport />
|
||||||
|
|
||||||
|
{/* ── Fade-in animation for purchase feed ── */}
|
||||||
|
<style>{`
|
||||||
|
@keyframes fadeInDown {
|
||||||
|
from { opacity: 0; transform: translateY(-10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue