Checkpoint: v3.0 完整版本：接入BSC/ETH真实链上数据、TRC20自动发放后端服务、中英文双语支持、SSL证书域名化部署到pre-sale.newassetchain.io

.gitignore

@@ -44,6 +44,7 @@ pids
 *.pid
 *.seed
 *.pid.lock
+*.bak
 
 # Coverage directory used by tools like istanbul
 coverage/

.prettierignore

@@ -1,5 +1,35 @@
-dist
+# Dependencies
-node_modules
+node_modules/
-.git
+.pnpm-store/
-*.min.js
+
-*.min.css
+# Build outputs
+dist/
+build/
+*.dist
+
+# Generated files
+*.tsbuildinfo
+coverage/
+
+# Package files
+package-lock.json
+pnpm-lock.yaml
+
+# Database
+*.db
+*.sqlite
+*.sqlite3
+
+# Logs
+*.log
+
+# Environment files
+.env*
+
+# IDE files
+.vscode/
+.idea/
+
+# OS files
+.DS_Store
+Thumbs.db

client/src/App.tsx

@@ -7,6 +7,7 @@ import { ThemeProvider } from "./contexts/ThemeContext";
 import Home from "./pages/Home";
 
 function Router() {
+  // make sure to consider if you need authentication for certain routes
   return (
     <Switch>
       <Route path={"/"} component={Home} />

client/src/_core/hooks/useAuth.ts

@@ -0,0 +1,84 @@
+import { getLoginUrl } from "@/const";
+import { trpc } from "@/lib/trpc";
+import { TRPCClientError } from "@trpc/client";
+import { useCallback, useEffect, useMemo } from "react";
+
+type UseAuthOptions = {
+  redirectOnUnauthenticated?: boolean;
+  redirectPath?: string;
+};
+
+export function useAuth(options?: UseAuthOptions) {
+  const { redirectOnUnauthenticated = false, redirectPath = getLoginUrl() } =
+    options ?? {};
+  const utils = trpc.useUtils();
+
+  const meQuery = trpc.auth.me.useQuery(undefined, {
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+
+  const logoutMutation = trpc.auth.logout.useMutation({
+    onSuccess: () => {
+      utils.auth.me.setData(undefined, null);
+    },
+  });
+
+  const logout = useCallback(async () => {
+    try {
+      await logoutMutation.mutateAsync();
+    } catch (error: unknown) {
+      if (
+        error instanceof TRPCClientError &&
+        error.data?.code === "UNAUTHORIZED"
+      ) {
+        return;
+      }
+      throw error;
+    } finally {
+      utils.auth.me.setData(undefined, null);
+      await utils.auth.me.invalidate();
+    }
+  }, [logoutMutation, utils]);
+
+  const state = useMemo(() => {
+    localStorage.setItem(
+      "manus-runtime-user-info",
+      JSON.stringify(meQuery.data)
+    );
+    return {
+      user: meQuery.data ?? null,
+      loading: meQuery.isLoading || logoutMutation.isPending,
+      error: meQuery.error ?? logoutMutation.error ?? null,
+      isAuthenticated: Boolean(meQuery.data),
+    };
+  }, [
+    meQuery.data,
+    meQuery.error,
+    meQuery.isLoading,
+    logoutMutation.error,
+    logoutMutation.isPending,
+  ]);
+
+  useEffect(() => {
+    if (!redirectOnUnauthenticated) return;
+    if (meQuery.isLoading || logoutMutation.isPending) return;
+    if (state.user) return;
+    if (typeof window === "undefined") return;
+    if (window.location.pathname === redirectPath) return;
+
+    window.location.href = redirectPath
+  }, [
+    redirectOnUnauthenticated,
+    redirectPath,
+    logoutMutation.isPending,
+    meQuery.isLoading,
+    state.user,
+  ]);
+
+  return {
+    ...state,
+    refresh: () => meQuery.refetch(),
+    logout,
+  };
+}

client/src/components/AIChatBox.tsx

@@ -0,0 +1,335 @@
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { Loader2, Send, User, Sparkles } from "lucide-react";
+import { useState, useEffect, useRef } from "react";
+import { Streamdown } from "streamdown";
+
+/**
+ * Message type matching server-side LLM Message interface
+ */
+export type Message = {
+  role: "system" | "user" | "assistant";
+  content: string;
+};
+
+export type AIChatBoxProps = {
+  /**
+   * Messages array to display in the chat.
+   * Should match the format used by invokeLLM on the server.
+   */
+  messages: Message[];
+
+  /**
+   * Callback when user sends a message.
+   * Typically you'll call a tRPC mutation here to invoke the LLM.
+   */
+  onSendMessage: (content: string) => void;
+
+  /**
+   * Whether the AI is currently generating a response
+   */
+  isLoading?: boolean;
+
+  /**
+   * Placeholder text for the input field
+   */
+  placeholder?: string;
+
+  /**
+   * Custom className for the container
+   */
+  className?: string;
+
+  /**
+   * Height of the chat box (default: 600px)
+   */
+  height?: string | number;
+
+  /**
+   * Empty state message to display when no messages
+   */
+  emptyStateMessage?: string;
+
+  /**
+   * Suggested prompts to display in empty state
+   * Click to send directly
+   */
+  suggestedPrompts?: string[];
+};
+
+/**
+ * A ready-to-use AI chat box component that integrates with the LLM system.
+ *
+ * Features:
+ * - Matches server-side Message interface for seamless integration
+ * - Markdown rendering with Streamdown
+ * - Auto-scrolls to latest message
+ * - Loading states
+ * - Uses global theme colors from index.css
+ *
+ * @example
+ * ```tsx
+ * const ChatPage = () => {
+ *   const [messages, setMessages] = useState<Message[]>([
+ *     { role: "system", content: "You are a helpful assistant." }
+ *   ]);
+ *
+ *   const chatMutation = trpc.ai.chat.useMutation({
+ *     onSuccess: (response) => {
+ *       // Assuming your tRPC endpoint returns the AI response as a string
+ *       setMessages(prev => [...prev, {
+ *         role: "assistant",
+ *         content: response
+ *       }]);
+ *     },
+ *     onError: (error) => {
+ *       console.error("Chat error:", error);
+ *       // Optionally show error message to user
+ *     }
+ *   });
+ *
+ *   const handleSend = (content: string) => {
+ *     const newMessages = [...messages, { role: "user", content }];
+ *     setMessages(newMessages);
+ *     chatMutation.mutate({ messages: newMessages });
+ *   };
+ *
+ *   return (
+ *     <AIChatBox
+ *       messages={messages}
+ *       onSendMessage={handleSend}
+ *       isLoading={chatMutation.isPending}
+ *       suggestedPrompts={[
+ *         "Explain quantum computing",
+ *         "Write a hello world in Python"
+ *       ]}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function AIChatBox({
+  messages,
+  onSendMessage,
+  isLoading = false,
+  placeholder = "Type your message...",
+  className,
+  height = "600px",
+  emptyStateMessage = "Start a conversation with AI",
+  suggestedPrompts,
+}: AIChatBoxProps) {
+  const [input, setInput] = useState("");
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputAreaRef = useRef<HTMLFormElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Filter out system messages
+  const displayMessages = messages.filter((msg) => msg.role !== "system");
+
+  // Calculate min-height for last assistant message to push user message to top
+  const [minHeightForLastMessage, setMinHeightForLastMessage] = useState(0);
+
+  useEffect(() => {
+    if (containerRef.current && inputAreaRef.current) {
+      const containerHeight = containerRef.current.offsetHeight;
+      const inputHeight = inputAreaRef.current.offsetHeight;
+      const scrollAreaHeight = containerHeight - inputHeight;
+
+      // Reserve space for:
+      // - padding (p-4 = 32px top+bottom)
+      // - user message: 40px (item height) + 16px (margin-top from space-y-4) = 56px
+      // Note: margin-bottom is not counted because it naturally pushes the assistant message down
+      const userMessageReservedHeight = 56;
+      const calculatedHeight = scrollAreaHeight - 32 - userMessageReservedHeight;
+
+      setMinHeightForLastMessage(Math.max(0, calculatedHeight));
+    }
+  }, []);
+
+  // Scroll to bottom helper function with smooth animation
+  const scrollToBottom = () => {
+    const viewport = scrollAreaRef.current?.querySelector(
+      '[data-radix-scroll-area-viewport]'
+    ) as HTMLDivElement;
+
+    if (viewport) {
+      requestAnimationFrame(() => {
+        viewport.scrollTo({
+          top: viewport.scrollHeight,
+          behavior: 'smooth'
+        });
+      });
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmedInput = input.trim();
+    if (!trimmedInput || isLoading) return;
+
+    onSendMessage(trimmedInput);
+    setInput("");
+
+    // Scroll immediately after sending
+    scrollToBottom();
+
+    // Keep focus on input
+    textareaRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "flex flex-col bg-card text-card-foreground rounded-lg border shadow-sm",
+        className
+      )}
+      style={{ height }}
+    >
+      {/* Messages Area */}
+      <div ref={scrollAreaRef} className="flex-1 overflow-hidden">
+        {displayMessages.length === 0 ? (
+          <div className="flex h-full flex-col p-4">
+            <div className="flex flex-1 flex-col items-center justify-center gap-6 text-muted-foreground">
+              <div className="flex flex-col items-center gap-3">
+                <Sparkles className="size-12 opacity-20" />
+                <p className="text-sm">{emptyStateMessage}</p>
+              </div>
+
+              {suggestedPrompts && suggestedPrompts.length > 0 && (
+                <div className="flex max-w-2xl flex-wrap justify-center gap-2">
+                  {suggestedPrompts.map((prompt, index) => (
+                    <button
+                      key={index}
+                      onClick={() => onSendMessage(prompt)}
+                      disabled={isLoading}
+                      className="rounded-lg border border-border bg-card px-4 py-2 text-sm transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                      {prompt}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        ) : (
+          <ScrollArea className="h-full">
+            <div className="flex flex-col space-y-4 p-4">
+              {displayMessages.map((message, index) => {
+                // Apply min-height to last message only if NOT loading (when loading, the loading indicator gets it)
+                const isLastMessage = index === displayMessages.length - 1;
+                const shouldApplyMinHeight =
+                  isLastMessage && !isLoading && minHeightForLastMessage > 0;
+
+                return (
+                  <div
+                    key={index}
+                    className={cn(
+                      "flex gap-3",
+                      message.role === "user"
+                        ? "justify-end items-start"
+                        : "justify-start items-start"
+                    )}
+                    style={
+                      shouldApplyMinHeight
+                        ? { minHeight: `${minHeightForLastMessage}px` }
+                        : undefined
+                    }
+                  >
+                    {message.role === "assistant" && (
+                      <div className="size-8 shrink-0 mt-1 rounded-full bg-primary/10 flex items-center justify-center">
+                        <Sparkles className="size-4 text-primary" />
+                      </div>
+                    )}
+
+                    <div
+                      className={cn(
+                        "max-w-[80%] rounded-lg px-4 py-2.5",
+                        message.role === "user"
+                          ? "bg-primary text-primary-foreground"
+                          : "bg-muted text-foreground"
+                      )}
+                    >
+                      {message.role === "assistant" ? (
+                        <div className="prose prose-sm dark:prose-invert max-w-none">
+                          <Streamdown>{message.content}</Streamdown>
+                        </div>
+                      ) : (
+                        <p className="whitespace-pre-wrap text-sm">
+                          {message.content}
+                        </p>
+                      )}
+                    </div>
+
+                    {message.role === "user" && (
+                      <div className="size-8 shrink-0 mt-1 rounded-full bg-secondary flex items-center justify-center">
+                        <User className="size-4 text-secondary-foreground" />
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+
+              {isLoading && (
+                <div
+                  className="flex items-start gap-3"
+                  style={
+                    minHeightForLastMessage > 0
+                      ? { minHeight: `${minHeightForLastMessage}px` }
+                      : undefined
+                  }
+                >
+                  <div className="size-8 shrink-0 mt-1 rounded-full bg-primary/10 flex items-center justify-center">
+                    <Sparkles className="size-4 text-primary" />
+                  </div>
+                  <div className="rounded-lg bg-muted px-4 py-2.5">
+                    <Loader2 className="size-4 animate-spin text-muted-foreground" />
+                  </div>
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        )}
+      </div>
+
+      {/* Input Area */}
+      <form
+        ref={inputAreaRef}
+        onSubmit={handleSubmit}
+        className="flex gap-2 p-4 border-t bg-background/50 items-end"
+      >
+        <Textarea
+          ref={textareaRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className="flex-1 max-h-32 resize-none min-h-9"
+          rows={1}
+        />
+        <Button
+          type="submit"
+          size="icon"
+          disabled={!input.trim() || isLoading}
+          className="shrink-0 h-[38px] w-[38px]"
+        >
+          {isLoading ? (
+            <Loader2 className="size-4 animate-spin" />
+          ) : (
+            <Send className="size-4" />
+          )}
+        </Button>
+      </form>
+    </div>
+  );
+}

client/src/components/DashboardLayout.tsx

@@ -0,0 +1,264 @@
+import { useAuth } from "@/_core/hooks/useAuth";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { getLoginUrl } from "@/const";
+import { useIsMobile } from "@/hooks/useMobile";
+import { LayoutDashboard, LogOut, PanelLeft, Users } from "lucide-react";
+import { CSSProperties, useEffect, useRef, useState } from "react";
+import { useLocation } from "wouter";
+import { DashboardLayoutSkeleton } from './DashboardLayoutSkeleton';
+import { Button } from "./ui/button";
+
+const menuItems = [
+  { icon: LayoutDashboard, label: "Page 1", path: "/" },
+  { icon: Users, label: "Page 2", path: "/some-path" },
+];
+
+const SIDEBAR_WIDTH_KEY = "sidebar-width";
+const DEFAULT_WIDTH = 280;
+const MIN_WIDTH = 200;
+const MAX_WIDTH = 480;
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [sidebarWidth, setSidebarWidth] = useState(() => {
+    const saved = localStorage.getItem(SIDEBAR_WIDTH_KEY);
+    return saved ? parseInt(saved, 10) : DEFAULT_WIDTH;
+  });
+  const { loading, user } = useAuth();
+
+  useEffect(() => {
+    localStorage.setItem(SIDEBAR_WIDTH_KEY, sidebarWidth.toString());
+  }, [sidebarWidth]);
+
+  if (loading) {
+    return <DashboardLayoutSkeleton />
+  }
+
+  if (!user) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="flex flex-col items-center gap-8 p-8 max-w-md w-full">
+          <div className="flex flex-col items-center gap-6">
+            <h1 className="text-2xl font-semibold tracking-tight text-center">
+              Sign in to continue
+            </h1>
+            <p className="text-sm text-muted-foreground text-center max-w-sm">
+              Access to this dashboard requires authentication. Continue to launch the login flow.
+            </p>
+          </div>
+          <Button
+            onClick={() => {
+              window.location.href = getLoginUrl();
+            }}
+            size="lg"
+            className="w-full shadow-lg hover:shadow-xl transition-all"
+          >
+            Sign in
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": `${sidebarWidth}px`,
+        } as CSSProperties
+      }
+    >
+      <DashboardLayoutContent setSidebarWidth={setSidebarWidth}>
+        {children}
+      </DashboardLayoutContent>
+    </SidebarProvider>
+  );
+}
+
+type DashboardLayoutContentProps = {
+  children: React.ReactNode;
+  setSidebarWidth: (width: number) => void;
+};
+
+function DashboardLayoutContent({
+  children,
+  setSidebarWidth,
+}: DashboardLayoutContentProps) {
+  const { user, logout } = useAuth();
+  const [location, setLocation] = useLocation();
+  const { state, toggleSidebar } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const [isResizing, setIsResizing] = useState(false);
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const activeMenuItem = menuItems.find(item => item.path === location);
+  const isMobile = useIsMobile();
+
+  useEffect(() => {
+    if (isCollapsed) {
+      setIsResizing(false);
+    }
+  }, [isCollapsed]);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isResizing) return;
+
+      const sidebarLeft = sidebarRef.current?.getBoundingClientRect().left ?? 0;
+      const newWidth = e.clientX - sidebarLeft;
+      if (newWidth >= MIN_WIDTH && newWidth <= MAX_WIDTH) {
+        setSidebarWidth(newWidth);
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    if (isResizing) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    }
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isResizing, setSidebarWidth]);
+
+  return (
+    <>
+      <div className="relative" ref={sidebarRef}>
+        <Sidebar
+          collapsible="icon"
+          className="border-r-0"
+          disableTransition={isResizing}
+        >
+          <SidebarHeader className="h-16 justify-center">
+            <div className="flex items-center gap-3 px-2 transition-all w-full">
+              <button
+                onClick={toggleSidebar}
+                className="h-8 w-8 flex items-center justify-center hover:bg-accent rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring shrink-0"
+                aria-label="Toggle navigation"
+              >
+                <PanelLeft className="h-4 w-4 text-muted-foreground" />
+              </button>
+              {!isCollapsed ? (
+                <div className="flex items-center gap-2 min-w-0">
+                  <span className="font-semibold tracking-tight truncate">
+                    Navigation
+                  </span>
+                </div>
+              ) : null}
+            </div>
+          </SidebarHeader>
+
+          <SidebarContent className="gap-0">
+            <SidebarMenu className="px-2 py-1">
+              {menuItems.map(item => {
+                const isActive = location === item.path;
+                return (
+                  <SidebarMenuItem key={item.path}>
+                    <SidebarMenuButton
+                      isActive={isActive}
+                      onClick={() => setLocation(item.path)}
+                      tooltip={item.label}
+                      className={`h-10 transition-all font-normal`}
+                    >
+                      <item.icon
+                        className={`h-4 w-4 ${isActive ? "text-primary" : ""}`}
+                      />
+                      <span>{item.label}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarContent>
+
+          <SidebarFooter className="p-3">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="flex items-center gap-3 rounded-lg px-1 py-1 hover:bg-accent/50 transition-colors w-full text-left group-data-[collapsible=icon]:justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                  <Avatar className="h-9 w-9 border shrink-0">
+                    <AvatarFallback className="text-xs font-medium">
+                      {user?.name?.charAt(0).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0 group-data-[collapsible=icon]:hidden">
+                    <p className="text-sm font-medium truncate leading-none">
+                      {user?.name || "-"}
+                    </p>
+                    <p className="text-xs text-muted-foreground truncate mt-1.5">
+                      {user?.email || "-"}
+                    </p>
+                  </div>
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuItem
+                  onClick={logout}
+                  className="cursor-pointer text-destructive focus:text-destructive"
+                >
+                  <LogOut className="mr-2 h-4 w-4" />
+                  <span>Sign out</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarFooter>
+        </Sidebar>
+        <div
+          className={`absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-primary/20 transition-colors ${isCollapsed ? "hidden" : ""}`}
+          onMouseDown={() => {
+            if (isCollapsed) return;
+            setIsResizing(true);
+          }}
+          style={{ zIndex: 50 }}
+        />
+      </div>
+
+      <SidebarInset>
+        {isMobile && (
+          <div className="flex border-b h-14 items-center justify-between bg-background/95 px-2 backdrop-blur supports-[backdrop-filter]:backdrop-blur sticky top-0 z-40">
+            <div className="flex items-center gap-2">
+              <SidebarTrigger className="h-9 w-9 rounded-lg bg-background" />
+              <div className="flex items-center gap-3">
+                <div className="flex flex-col gap-1">
+                  <span className="tracking-tight text-foreground">
+                    {activeMenuItem?.label ?? "Menu"}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        <main className="flex-1 p-4">{children}</main>
+      </SidebarInset>
+    </>
+  );
+}

client/src/components/DashboardLayoutSkeleton.tsx

@@ -0,0 +1,46 @@
+import { Skeleton } from './ui/skeleton';
+
+export function DashboardLayoutSkeleton() {
+  return (
+    <div className="flex min-h-screen bg-background">
+      {/* Sidebar skeleton */}
+      <div className="w-[280px] border-r border-border bg-background p-4 space-y-6">
+        {/* Logo area */}
+        <div className="flex items-center gap-3 px-2">
+          <Skeleton className="h-8 w-8 rounded-md" />
+          <Skeleton className="h-4 w-24" />
+        </div>
+
+        {/* Menu items */}
+        <div className="space-y-2 px-2">
+          <Skeleton className="h-10 w-full rounded-lg" />
+          <Skeleton className="h-10 w-full rounded-lg" />
+          <Skeleton className="h-10 w-full rounded-lg" />
+        </div>
+
+        {/* User profile area at bottom */}
+        <div className="absolute bottom-4 left-4 right-4">
+          <div className="flex items-center gap-3 px-1">
+            <Skeleton className="h-9 w-9 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-3 w-20" />
+              <Skeleton className="h-2 w-32" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main content skeleton */}
+      <div className="flex-1 p-4 space-y-4">
+        {/* Content blocks */}
+        <Skeleton className="h-12 w-48 rounded-lg" />
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <Skeleton className="h-32 rounded-xl" />
+          <Skeleton className="h-32 rounded-xl" />
+          <Skeleton className="h-32 rounded-xl" />
+        </div>
+        <Skeleton className="h-64 rounded-xl" />
+      </div>
+    </div>
+  );
+}

client/src/components/ManusDialog.tsx

@@ -55,7 +55,11 @@ export function ManusDialog({
         <div className="flex flex-col items-center gap-2 p-5 pt-12">
           {logo ? (
             <div className="w-16 h-16 bg-white rounded-xl border border-[rgba(0,0,0,0.08)] flex items-center justify-center">
-              <img src={logo} alt="Dialog graphic" className="w-10 h-10 rounded-md" />
+              <img
+                src={logo}
+                alt="Dialog graphic"
+                className="w-10 h-10 rounded-md"
+              />
             </div>
           ) : null}
 

client/src/lib/i18n.ts

@@ -0,0 +1,351 @@
+/**
+ * i18n translations for NAC XIC Presale
+ * Supports: English (en) | Chinese Simplified (zh)
+ */
+
+export type Lang = "en" | "zh";
+
+export const translations = {
+  en: {
+    // Nav
+    nav_website: "Website",
+    nav_explorer: "Explorer",
+    nav_docs: "Docs",
+    nav_connect: "Connect Wallet",
+    nav_connecting: "Connecting...",
+    nav_disconnect: "Disconnect",
+    nav_connected: "Connected Wallet",
+
+    // Hero
+    hero_badge: "Presale is LIVE",
+    hero_title: "XIC Token Presale",
+    hero_subtitle:
+      "New AssetChain — The next-generation RWA native blockchain with AI-native compliance, CBPP consensus, and Charter smart contracts.",
+    hero_price: "$0.02 per XIC",
+    hero_supply: "100B Total Supply",
+    hero_networks: "BSC · ETH · TRC20",
+    hero_no_min: "No Minimum Purchase",
+
+    // Stats
+    stats_ends_in: "Presale Ends In",
+    stats_days: "Days",
+    stats_hours: "Hours",
+    stats_mins: "Mins",
+    stats_secs: "Secs",
+    stats_raised: "Funds Raised",
+    stats_raised_label: "Raised",
+    stats_hard_cap: "Hard Cap",
+    stats_tokens_sold: "Tokens Sold",
+    stats_participants: "Participants",
+    stats_wallets: "Wallets",
+    stats_token_price: "Token Price",
+    stats_listing: "Listing Price",
+    stats_target: "Target",
+    stats_live_feed: "Live Purchase Feed",
+    stats_live: "Live",
+
+    // Token Details
+    token_details: "Token Details",
+    token_name: "Name",
+    token_symbol: "Symbol",
+    token_network: "Network",
+    token_decimals: "Decimals",
+    token_supply: "Total Supply",
+    token_view_contract: "View Token Contract →",
+
+    // Purchase
+    buy_title: "Buy XIC Tokens",
+    buy_subtitle: "1 XIC =",
+    buy_no_min: "No Minimum",
+    buy_select_network: "Select Network",
+    buy_usdt_amount: "USDT Amount",
+    buy_usdt_trc20: "USDT Amount (TRC20)",
+    buy_placeholder: "Enter any USDT amount",
+    buy_you_receive: "You receive",
+    buy_price_per: "Price per token",
+    buy_step1: "Approve USDT",
+    buy_step2: "Confirm Purchase",
+    buy_btn: "Buy",
+    buy_approving: "Approving USDT...",
+    buy_approved: "Approved! Buying...",
+    buy_processing: "Processing...",
+    buy_max: "Max:",
+    buy_no_min_max: "No minimum · Max:",
+    buy_success_title: "Purchase Successful!",
+    buy_success_msg: "You received",
+    buy_success_tokens: "XIC tokens",
+    buy_view_explorer: "View on Explorer →",
+    buy_more: "Buy More",
+    buy_balance: "Balance:",
+    buy_wrong_network: "Wrong Network",
+    buy_wrong_msg: "Please switch to",
+    buy_switch: "Switch to",
+    buy_connect_msg: "Connect your wallet to purchase XIC tokens with USDT",
+    buy_connect_btn: "Connect Wallet",
+    buy_connect_hint: "Supports MetaMask, Trust Wallet, and all EVM-compatible wallets",
+    buy_contracts: "Verified Presale Contracts",
+    buy_bsc_contract: "BSC Contract ↗",
+    buy_eth_contract: "ETH Contract ↗",
+
+    // TRC20
+    trc20_send_to: "Send TRC20 USDT to this address:",
+    trc20_copy: "Copy Address",
+    trc20_copied: "✓ Copied!",
+    trc20_step1: "Send",
+    trc20_step1b: "USDT (TRC20) to the address above",
+    trc20_step1_any: "any amount of USDT",
+    trc20_step2: "Include memo:",
+    trc20_step2b: "(optional but recommended)",
+    trc20_step3: "You will receive",
+    trc20_step3b: "XIC tokens after confirmation (1-24h)",
+    trc20_step3_any: "You will receive XIC tokens proportional to your USDT amount after confirmation (1-24h)",
+    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.",
+
+    // Why NAC
+    why_rwa_title: "Native RWA Chain",
+    why_rwa_desc: "Purpose-built for Real World Asset tokenization with AI-native compliance",
+    why_cbpp_title: "CBPP Consensus",
+    why_cbpp_desc: "Constitutional Block Production Protocol — next-gen consensus beyond PoS/PoW",
+    why_charter_title: "Charter Contracts",
+    why_charter_desc: "NAC-native smart contract language with built-in regulatory compliance",
+
+    // FAQ
+    faq_title: "Frequently Asked Questions",
+    faq_subtitle: "Everything you need to know about the XIC Token presale and New AssetChain ecosystem.",
+    faq_still: "Still have questions?",
+    faq_ask: "Ask on Telegram",
+    faq: [
+      {
+        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.",
+      },
+    ],
+
+    // Support
+    support_title: "NAC Support",
+    support_online: "Online",
+    support_msg: "👋 Hi! Need help with the XIC presale? Our team is available 24/7 to assist you.",
+    support_telegram: "Chat on Telegram",
+    support_email: "Email Support",
+    support_response: "Avg. response time: < 2 hours",
+
+    // Footer
+    footer_risk: "This presale involves risk. Only invest what you can afford to lose. XIC tokens are not available to US persons or residents of restricted jurisdictions.",
+    footer_website: "Website",
+    footer_explorer: "Explorer",
+    footer_telegram: "Telegram",
+    footer_twitter: "Twitter",
+
+    // Loading
+    loading_stats: "Loading on-chain data...",
+    stats_live_data: "Live On-Chain Data",
+    stats_cached: "Cached",
+    stats_updated: "Updated",
+  },
+
+  zh: {
+    // Nav
+    nav_website: "官网",
+    nav_explorer: "浏览器",
+    nav_docs: "文档",
+    nav_connect: "连接钱包",
+    nav_connecting: "连接中...",
+    nav_disconnect: "断开连接",
+    nav_connected: "已连接钱包",
+
+    // Hero
+    hero_badge: "预售进行中",
+    hero_title: "XIC 代币预售",
+    hero_subtitle:
+      "New AssetChain — 下一代 RWA 原生公链，内置 AI 合规审批、CBPP 共识协议与 Charter 智能合约语言。",
+    hero_price: "$0.02 / XIC",
+    hero_supply: "总供应量 1000亿",
+    hero_networks: "BSC · ETH · TRC20",
+    hero_no_min: "无最低购买限制",
+
+    // Stats
+    stats_ends_in: "预售结束倒计时",
+    stats_days: "天",
+    stats_hours: "时",
+    stats_mins: "分",
+    stats_secs: "秒",
+    stats_raised: "募资进度",
+    stats_raised_label: "已募资",
+    stats_hard_cap: "硬顶",
+    stats_tokens_sold: "已售代币",
+    stats_participants: "参与人数",
+    stats_wallets: "钱包",
+    stats_token_price: "代币价格",
+    stats_listing: "上市目标价",
+    stats_target: "目标",
+    stats_live_feed: "实时购买记录",
+    stats_live: "实时",
+
+    // Token Details
+    token_details: "代币信息",
+    token_name: "名称",
+    token_symbol: "符号",
+    token_network: "网络",
+    token_decimals: "精度",
+    token_supply: "总供应量",
+    token_view_contract: "查看代币合约 →",
+
+    // Purchase
+    buy_title: "购买 XIC 代币",
+    buy_subtitle: "1 XIC =",
+    buy_no_min: "无最低限制",
+    buy_select_network: "选择网络",
+    buy_usdt_amount: "USDT 数量",
+    buy_usdt_trc20: "USDT 数量（TRC20）",
+    buy_placeholder: "输入任意 USDT 金额",
+    buy_you_receive: "您将获得",
+    buy_price_per: "单价",
+    buy_step1: "授权 USDT",
+    buy_step2: "确认购买",
+    buy_btn: "购买",
+    buy_approving: "授权中...",
+    buy_approved: "授权成功！购买中...",
+    buy_processing: "处理中...",
+    buy_max: "最大：",
+    buy_no_min_max: "无最低限制 · 最大：",
+    buy_success_title: "购买成功！",
+    buy_success_msg: "您已获得",
+    buy_success_tokens: "枚 XIC 代币",
+    buy_view_explorer: "在浏览器中查看 →",
+    buy_more: "继续购买",
+    buy_balance: "余额：",
+    buy_wrong_network: "网络错误",
+    buy_wrong_msg: "请切换到",
+    buy_switch: "切换到",
+    buy_connect_msg: "连接钱包后即可使用 USDT 购买 XIC 代币",
+    buy_connect_btn: "连接钱包",
+    buy_connect_hint: "支持 MetaMask、Trust Wallet 及所有 EVM 兼容钱包",
+    buy_contracts: "已验证预售合约",
+    buy_bsc_contract: "BSC 合约 ↗",
+    buy_eth_contract: "ETH 合约 ↗",
+
+    // TRC20
+    trc20_send_to: "请发送 TRC20 USDT 到以下地址：",
+    trc20_copy: "复制地址",
+    trc20_copied: "✓ 已复制！",
+    trc20_step1: "发送",
+    trc20_step1b: "USDT（TRC20）到上方地址",
+    trc20_step1_any: "任意数量 USDT",
+    trc20_step2: "备注填写：",
+    trc20_step2b: "（可选，建议填写）",
+    trc20_step3: "您将在确认后（1-24小时内）收到",
+    trc20_step3b: "枚 XIC 代币",
+    trc20_step3_any: "您将在确认后（1-24小时内）按比例收到 XIC 代币",
+    trc20_step4: "如24小时内未收到代币，请携带交易哈希联系客服",
+    trc20_warning: "⚠️ 请仅在 TRON 网络（TRC20）上发送 USDT。发送其他代币或使用其他网络将导致永久损失。",
+
+    // Why NAC
+    why_rwa_title: "原生 RWA 公链",
+    why_rwa_desc: "专为现实世界资产代币化而生，内置 AI 合规审批",
+    why_cbpp_title: "CBPP 共识协议",
+    why_cbpp_desc: "宪政区块生产协议 — 超越 PoS/PoW 的下一代共识",
+    why_charter_title: "Charter 智能合约",
+    why_charter_desc: "NAC 原生智能合约语言，内置监管合规机制",
+
+    // FAQ
+    faq_title: "常见问题",
+    faq_subtitle: "关于 XIC 代币预售和 New AssetChain 生态系统的一切您需要了解的信息。",
+    faq_still: "还有其他问题？",
+    faq_ask: "在 Telegram 提问",
+    faq: [
+      {
+        q: "XIC 代币是什么？",
+        a: "XIC 是 New AssetChain（NAC）的原生功能代币，NAC 是专为 RWA（现实世界资产）而生的区块链，具备 AI 原生合规、CBPP 共识和 Charter 智能合约。XIC 用于治理、交易手续费和生态质押。",
+      },
+      {
+        q: "预售价格是多少？",
+        a: "预售价格为每枚 XIC 0.02 美元。预计上市价格为 0.10 美元，预售参与者可获得 5 倍潜在收益。",
+      },
+      {
+        q: "支持哪些支付方式？",
+        a: "我们接受三个网络上的 USDT：BSC（BEP-20）、以太坊（ERC-20）和 TRON（TRC-20）。BSC 和 ETH 需连接 MetaMask 或兼容 EVM 的钱包；TRC-20 请直接向我们的收款地址转账。",
+      },
+      {
+        q: "有最低购买金额吗？",
+        a: "没有最低购买金额限制。您可以购买任意数量的 XIC 代币，单笔最高购买额为 50,000 USDT。",
+      },
+      {
+        q: "何时收到 XIC 代币？",
+        a: "BSC 和 ETH 购买：链上确认后立即发放。TRC-20 手动转账：确认后 1-24 小时内发放。",
+      },
+      {
+        q: "XIC 何时上市交易所？",
+        a: "预售完成后，XIC 计划在主要中心化和去中心化交易所上市，目标上市价格为 0.10 美元。具体交易所公告将通过官方 Telegram 和 Twitter 发布。",
+      },
+      {
+        q: "预售合约是否经过审计？",
+        a: "是的。BSC 和 ETH 预售合约均已在各自的区块链浏览器（BscScan 和 Etherscan）上验证。您可以直接在链上查看合约源代码和交易历史。",
+      },
+      {
+        q: "NAC 的技术优势是什么？",
+        a: "NAC 是完全独立的区块链，不是以太坊或任何现有链的分叉或衍生。它具备 NVM（NAC 虚拟机）、CBPP 共识协议、Charter 智能合约语言、CSNP 网络协议，以及用于 RWA 代币化的内置 AI 合规。",
+      },
+    ],
+
+    // Support
+    support_title: "NAC 客服",
+    support_online: "在线",
+    support_msg: "👋 您好！需要 XIC 预售帮助吗？我们的团队 24/7 全天候为您服务。",
+    support_telegram: "Telegram 咨询",
+    support_email: "邮件支持",
+    support_response: "平均响应时间：< 2 小时",
+
+    // Footer
+    footer_risk: "参与预售存在风险，请仅投入您能承受损失的资金。XIC 代币不向美国公民及受限制司法管辖区居民提供。",
+    footer_website: "官网",
+    footer_explorer: "浏览器",
+    footer_telegram: "Telegram",
+    footer_twitter: "Twitter",
+
+    // Loading
+    loading_stats: "正在加载链上数据...",
+    stats_live_data: "实时链上数据",
+    stats_cached: "缓存",
+    stats_updated: "更新于",
+  },
+} as const;
+
+export type TranslationKey = keyof typeof translations.en;
+
+export function useTranslation(lang: Lang) {
+  const t = translations[lang];
+  return {
+    t: (key: TranslationKey) => (t as Record<string, unknown>)[key] as string,
+    faq: t.faq,
+    lang,
+  };
+}

client/src/lib/trpc.ts

@@ -0,0 +1,4 @@
+import { createTRPCReact } from "@trpc/react-query";
+import type { AppRouter } from "../../../server/routers";
+
+export const trpc = createTRPCReact<AppRouter>();

client/src/main.tsx

@@ -1,5 +1,61 @@
+import { trpc } from "@/lib/trpc";
+import { UNAUTHED_ERR_MSG } from '@shared/const';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchLink, TRPCClientError } from "@trpc/client";
 import { createRoot } from "react-dom/client";
+import superjson from "superjson";
 import App from "./App";
+import { getLoginUrl } from "./const";
 import "./index.css";
 
-createRoot(document.getElementById("root")!).render(<App />);
+const queryClient = new QueryClient();
+
+const redirectToLoginIfUnauthorized = (error: unknown) => {
+  if (!(error instanceof TRPCClientError)) return;
+  if (typeof window === "undefined") return;
+
+  const isUnauthorized = error.message === UNAUTHED_ERR_MSG;
+
+  if (!isUnauthorized) return;
+
+  window.location.href = getLoginUrl();
+};
+
+queryClient.getQueryCache().subscribe(event => {
+  if (event.type === "updated" && event.action.type === "error") {
+    const error = event.query.state.error;
+    redirectToLoginIfUnauthorized(error);
+    console.error("[API Query Error]", error);
+  }
+});
+
+queryClient.getMutationCache().subscribe(event => {
+  if (event.type === "updated" && event.action.type === "error") {
+    const error = event.mutation.state.error;
+    redirectToLoginIfUnauthorized(error);
+    console.error("[API Mutation Error]", error);
+  }
+});
+
+const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: "/api/trpc",
+      transformer: superjson,
+      fetch(input, init) {
+        return globalThis.fetch(input, {
+          ...(init ?? {}),
+          credentials: "include",
+        });
+      },
+    }),
+  ],
+});
+
+createRoot(document.getElementById("root")!).render(
+  <trpc.Provider client={trpcClient} queryClient={queryClient}>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </trpc.Provider>
+);

client/src/pages/Home.tsx

@@ -1,77 +1,31 @@
-// NAC XIC Token Presale — Main Page
+// 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
-// Fonts: Space Grotesk (headings) | JetBrains Mono (numbers) | DM Sans (body)
 
 import { useState, useEffect, useCallback, useRef } from "react";
 import { toast } from "sonner";
 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";
 
 // ─── Network Tab Types ────────────────────────────────────────────────────────
 type NetworkTab = "BSC" | "ETH" | "TRON";
 
-// ─── Hero Background & Token Icon ─────────────────────────────────────────────
+// ─── 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";
 
-// ─── Mock presale stats (replace with on-chain read in production) ─────────────
+// ─── Fallback stats while loading ─────────────────────────────────────────────
-const MOCK_STATS = {
+const FALLBACK_STATS = {
-  raised: 1_240_000,
+  totalUsdtRaised: 0,
+  totalTokensSold: 0,
   hardCap: 5_000_000,
-  tokensSold: 62_000_000,
+  progressPct: 0,
-  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 ──────────────────────────────────────────────────────────
 function useCountdown(targetDate: Date) {
   const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });
@@ -97,6 +51,7 @@ function useCountdown(targetDate: Date) {
 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(() => {
@@ -148,21 +103,22 @@ function StepBadge({ num, text }: { num: number; text: string }) {
 }
 
 // ─── TRC20 Purchase Panel ─────────────────────────────────────────────────────
-function TRC20Panel({ usdtAmount }: { usdtAmount: number }) {
+function TRC20Panel({ usdtAmount, lang }: { usdtAmount: number; lang: Lang }) {
+  const { t } = useTranslation(lang);
   const tokenAmount = usdtAmount / PRESALE_CONFIG.tokenPrice;
   const [copied, setCopied] = useState(false);
 
   const copyAddress = () => {
     navigator.clipboard.writeText(CONTRACTS.TRON.receivingWallet);
     setCopied(true);
-    toast.success("Address copied to clipboard!");
+    toast.success(lang === "zh" ? "地址已复制到剪贴板！" : "Address copied to clipboard!");
     setTimeout(() => setCopied(false), 2000);
   };
 
   return (
     <div className="space-y-4">
       <div className="nac-card-blue rounded-xl p-4 space-y-3">
-        <p className="text-sm font-medium text-white/80">Send TRC20 USDT to this address:</p>
+        <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)" }}
@@ -175,26 +131,35 @@ function TRC20Panel({ usdtAmount }: { usdtAmount: number }) {
           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 ? "✓ Copied!" : "Copy Address"}
+          {copied ? t("trc20_copied") : t("trc20_copy")}
         </button>
       </div>
 
       <div className="space-y-2">
-        <StepBadge num={1} text={`Send ${usdtAmount > 0 ? usdtAmount.toFixed(2) + " USDT" : "any amount of USDT"} (TRC20) to the address above`} />
+        <StepBadge num={1} text={
-        <StepBadge num={2} text={`Include memo: ${PRESALE_CONFIG.trc20Memo} (optional but recommended)`} />
+          lang === "zh"
-        <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)"} />
+            ? `发送 ${usdtAmount > 0 ? usdtAmount.toFixed(2) + " USDT" : "任意数量 USDT"}（TRC20）到上方地址`
-        <StepBadge num={4} text="Contact support with your TX hash if tokens are not received within 24 hours" />
+            : `${t("trc20_step1")} ${usdtAmount > 0 ? usdtAmount.toFixed(2) + " USDT" : t("trc20_step1_any")} (TRC20) ${t("trc20_step1b")}`
+        } />
+        <StepBadge num={2} text={`${t("trc20_step2")} ${PRESALE_CONFIG.trc20Memo} ${t("trc20_step2b")}`} />
+        <StepBadge num={3} 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={4} 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)" }}>
-        ⚠️ Only send USDT on the TRON network (TRC20). Sending other tokens or using a different network will result in permanent loss.
+        {t("trc20_warning")}
       </div>
     </div>
   );
 }
 
 // ─── EVM Purchase Panel ───────────────────────────────────────────────────────
-function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
+function EVMPurchasePanel({ network, lang }: { network: "BSC" | "ETH"; lang: Lang }) {
+  const { t } = useTranslation(lang);
   const wallet = useWallet();
   const { purchaseState, buyWithUSDT, reset, calcTokens, getUsdtBalance } = usePresale(wallet, network);
   const [usdtInput, setUsdtInput] = useState("100");
@@ -213,12 +178,13 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
 
   const usdtAmount = parseFloat(usdtInput) || 0;
   const tokenAmount = calcTokens(usdtAmount);
-  // No minimum purchase limit — only check positive amount and max
   const isValidAmount = usdtAmount > 0 && usdtAmount <= PRESALE_CONFIG.maxPurchaseUSDT;
 
   const handleBuy = async () => {
     if (!isValidAmount) {
-      toast.error(`Please enter a valid amount (max $${PRESALE_CONFIG.maxPurchaseUSDT.toLocaleString()} USDT)`);
+      toast.error(lang === "zh"
+        ? `请输入有效金额（最大 $${PRESALE_CONFIG.maxPurchaseUSDT.toLocaleString()} USDT）`
+        : `Please enter a valid amount (max $${PRESALE_CONFIG.maxPurchaseUSDT.toLocaleString()} USDT)`);
       return;
     }
     await buyWithUSDT(usdtAmount);
@@ -226,30 +192,30 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
 
   useEffect(() => {
     if (purchaseState.step === "success") {
-      toast.success(`Successfully purchased ${formatNumber(purchaseState.tokenAmount)} XIC tokens!`);
+      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]);
+  }, [purchaseState.step, purchaseState.error, purchaseState.tokenAmount, lang]);
 
   if (!wallet.isConnected) {
     return (
       <div className="space-y-4">
         <div className="text-center py-6">
           <div className="text-4xl mb-3">🔗</div>
-          <p className="text-white/60 text-sm mb-4">Connect your wallet to purchase XIC tokens with USDT</p>
+          <p className="text-white/60 text-sm mb-4">{t("buy_connect_msg")}</p>
           <button
             onClick={wallet.connect}
             disabled={wallet.isConnecting}
             className="btn-primary-nac w-full py-3 rounded-xl text-base font-bold pulse-amber"
             style={{ fontFamily: "'Space Grotesk', sans-serif" }}
           >
-            {wallet.isConnecting ? "Connecting..." : "Connect Wallet"}
+            {wallet.isConnecting ? t("nav_connecting") : t("buy_connect_btn")}
           </button>
         </div>
-        <div className="text-xs text-white/40 text-center">
+        <div className="text-xs text-white/40 text-center">{t("buy_connect_hint")}</div>
-          Supports MetaMask, Trust Wallet, and all EVM-compatible wallets
-        </div>
       </div>
     );
   }
@@ -259,13 +225,13 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
       <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">Wrong Network</p>
+          <p className="text-amber-300 font-semibold mb-1">{t("buy_wrong_network")}</p>
-          <p className="text-white/60 text-sm mb-4">Please switch to {CONTRACTS[network].chainName}</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"
           >
-            Switch to {network === "BSC" ? "BSC" : "Ethereum"}
+            {t("buy_switch")} {network === "BSC" ? "BSC" : "Ethereum"}
           </button>
         </div>
       </div>
@@ -277,10 +243,10 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
       <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" }}>
-          Purchase Successful!
+          {t("buy_success_title")}
         </h3>
         <p className="text-white/70">
-          You received <span className="text-amber-400 font-bold counter-digit">{formatNumber(purchaseState.tokenAmount)}</span> XIC tokens
+          {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
@@ -289,14 +255,11 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
             rel="noopener noreferrer"
             className="text-xs text-blue-400 hover:text-blue-300 underline block"
           >
-            View on Explorer →
+            {t("buy_view_explorer")}
           </a>
         )}
-        <button
+        <button onClick={reset} className="btn-primary-nac px-8 py-2 rounded-lg text-sm font-bold">
-          onClick={reset}
+          {t("buy_more")}
-          className="btn-primary-nac px-8 py-2 rounded-lg text-sm font-bold"
-        >
-          Buy More
         </button>
       </div>
     );
@@ -313,13 +276,13 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
           <span className="text-xs text-white/60 counter-digit">{shortenAddress(wallet.address || "")}</span>
         </div>
         {usdtBalance !== null && (
-          <span className="text-xs text-white/50">Balance: <span className="text-white/80 counter-digit">{usdtBalance.toFixed(2)} USDT</span></span>
+          <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">USDT Amount</label>
+        <label className="text-sm text-white/60 font-medium">{t("buy_usdt_amount")}</label>
         <div className="relative">
           <input
             type="number"
@@ -327,7 +290,7 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
             onChange={e => setUsdtInput(e.target.value)}
             min={0}
             max={PRESALE_CONFIG.maxPurchaseUSDT}
-            placeholder="Enter any USDT amount"
+            placeholder={t("buy_placeholder")}
             className="input-nac w-full px-4 py-3 rounded-xl text-lg counter-digit pr-20"
             disabled={isProcessing}
           />
@@ -351,7 +314,7 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
       {/* 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">You receive</span>
+          <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)}
@@ -360,7 +323,7 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
           </div>
         </div>
         <div className="flex items-center justify-between mt-1">
-          <span className="text-xs text-white/40">Price per token</span>
+          <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>
@@ -372,13 +335,13 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
             <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>
-            Step 1: Approve USDT
+            {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>
-            Step 2: Confirm Purchase
+            {lang === "zh" ? "第二步：确认购买" : `Step 2: ${t("buy_step2")}`}
           </div>
         </div>
       )}
@@ -391,14 +354,14 @@ function EVMPurchasePanel({ network }: { network: "BSC" | "ETH" }) {
         style={{ fontFamily: "'Space Grotesk', sans-serif" }}
       >
         {isProcessing
-          ? purchaseState.step === "approving" ? "Approving USDT..."
+          ? purchaseState.step === "approving" ? t("buy_approving")
-          : purchaseState.step === "approved" ? "Approved! Buying..."
+          : purchaseState.step === "approved" ? t("buy_approved")
-          : "Processing..."
+          : t("buy_processing")
-          : `Buy ${formatNumber(tokenAmount)} XIC`}
+          : `${t("buy_btn")} ${formatNumber(tokenAmount)} XIC`}
       </button>
 
       <p className="text-xs text-center text-white/30">
-        No minimum · Max: ${PRESALE_CONFIG.maxPurchaseUSDT.toLocaleString()} USDT
+        {t("buy_no_min_max")} ${PRESALE_CONFIG.maxPurchaseUSDT.toLocaleString()} USDT
       </p>
     </div>
   );
@@ -441,16 +404,55 @@ function FAQItem({ q, a, index }: { q: string; a: string; index: number }) {
 }
 
 // ─── Purchase Feed ────────────────────────────────────────────────────────────
-function PurchaseFeed() {
+function PurchaseFeed({ lang }: { lang: Lang }) {
-  const [records, setRecords] = useState(MOCK_PURCHASES);
+  const { t } = useTranslation(lang);
   const feedRef = useRef<HTMLDivElement>(null);
 
-  // Simulate new purchases every 15–30 seconds
+  // 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];
@@ -460,14 +462,13 @@ function PurchaseFeed() {
         address: names[counter % names.length],
         amount: tokenAmt,
         usdt: usdtAmt,
-        time: "just now",
+        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";
@@ -478,10 +479,10 @@ function PurchaseFeed() {
   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>
+        <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">Live</span>
+          <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" }}>
@@ -503,6 +504,7 @@ function PurchaseFeed() {
                 {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" }}>
@@ -518,20 +520,16 @@ function PurchaseFeed() {
 }
 
 // ─── Chat Support Widget ──────────────────────────────────────────────────────
-function ChatSupport() {
+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">
-      {/* Chat Panel */}
       {open && (
         <div
           className="rounded-2xl p-5 w-72 shadow-2xl"
-          style={{
+          style={{ background: "rgba(10,10,15,0.97)", border: "1px solid rgba(240,180,41,0.3)", backdropFilter: "blur(20px)" }}
-            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">
@@ -539,22 +537,18 @@ function ChatSupport() {
                 <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="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">Online</span>
+                  <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">
+            <p className="text-sm text-white/70 leading-relaxed">{t("support_msg")}</p>
-              👋 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"
@@ -566,7 +560,7 @@ function ChatSupport() {
               <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
+              {t("support_telegram")}
             </a>
             <a
               href="mailto:support@newassetchain.io"
@@ -577,31 +571,21 @@ function ChatSupport() {
                 <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
+              {t("support_email")}
             </a>
           </div>
-
+          <p className="text-xs text-white/30 text-center mt-3">{t("support_response")}</p>
-          <p className="text-xs text-white/30 text-center mt-3">
-            Avg. response time: &lt; 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={{
+        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)" }}
-          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="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" 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">
@@ -614,16 +598,15 @@ function ChatSupport() {
 }
 
 // ─── Navbar Wallet Button ─────────────────────────────────────────────────────
-function NavWalletButton() {
+function NavWalletButton({ lang }: { lang: Lang }) {
+  const { t } = useTranslation(lang);
   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)) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setShowMenu(false);
-        setShowMenu(false);
-      }
     };
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
@@ -635,19 +618,14 @@ function NavWalletButton() {
         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={{
+        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)" }}
-          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"}
+        {wallet.isConnecting ? t("nav_connecting") : t("nav_connect")}
       </button>
     );
   }
@@ -671,14 +649,14 @@ function NavWalletButton() {
           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-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"
           >
-            Disconnect
+            {t("nav_disconnect")}
           </button>
         </div>
       )}
@@ -686,13 +664,60 @@ function NavWalletButton() {
   );
 }
 
+// ─── 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");
   const presaleEndDate = new Date("2026-06-30T23:59:59Z");
   const countdown = useCountdown(presaleEndDate);
-  const progressPct = Math.min((MOCK_STATS.raised / MOCK_STATS.hardCap) * 100, 100);
+
+  // ── 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;
 
   const networks: NetworkTab[] = ["BSC", "ETH", "TRON"];
 
@@ -707,38 +732,33 @@ export default function Home() {
             <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-4">
+        <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">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">{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">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">{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">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">{t("nav_docs")}</a>
-          {/* ── Connect Wallet Button in Nav ── */}
+          <LangToggle lang={lang} setLang={setLang} />
-          <NavWalletButton />
+          <NavWalletButton lang={lang} />
         </div>
       </nav>
 
       {/* ── Hero Section ── */}
       <section className="relative pt-20 pb-8 overflow-hidden hex-bg" style={{ minHeight: "340px" }}>
-        <div
+        <div className="absolute inset-0 bg-cover bg-center opacity-30" style={{ backgroundImage: `url(${HERO_BG})` }} />
-          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" />
-            Presale is LIVE
+            {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" }}>
-            XIC Token Presale
+            {t("hero_title")}
           </h1>
-          <p className="text-lg text-white/70 max-w-2xl mx-auto mb-6">
+          <p className="text-lg text-white/70 max-w-2xl mx-auto mb-6">{t("hero_subtitle")}</p>
-            New AssetChain — The next-generation RWA native blockchain with AI-native compliance, CBPP consensus, and Charter smart contracts.
-          </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> $0.02 per XIC</span>
+            <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> 100B Total Supply</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> BSC · ETH · TRC20</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> No Minimum Purchase</span>
+            <span className="flex items-center gap-1"><span className="text-amber-400">✦</span> {t("hero_no_min")}</span>
           </div>
         </div>
       </section>
@@ -752,13 +772,13 @@ export default function Home() {
 
             {/* 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">Presale Ends In</h3>
+              <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: "Days", value: countdown.days },
+                  { label: t("stats_days"), value: countdown.days },
-                  { label: "Hours", value: countdown.hours },
+                  { label: t("stats_hours"), value: countdown.hours },
-                  { label: "Mins", value: countdown.minutes },
+                  { label: t("stats_mins"), value: countdown.minutes },
-                  { label: "Secs", value: countdown.seconds },
+                  { 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" }}>
@@ -770,11 +790,21 @@ export default function Home() {
               </div>
             </div>
 
-            {/* Progress */}
+            {/* 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">Funds Raised</h3>
+                <h3 className="text-xs font-semibold uppercase tracking-widest text-white/40">{t("stats_raised")}</h3>
-                <span className="text-xs font-bold counter-digit" style={{ color: "#f0b429" }}>{progressPct.toFixed(1)}%</span>
+                <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}%` }} />
@@ -782,15 +812,15 @@ export default function Home() {
               <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={MOCK_STATS.raised} prefix="$" />
+                    <AnimatedCounter value={stats.totalUsdtRaised} prefix="$" />
                   </div>
-                  <div className="text-xs text-white/40">Raised</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(MOCK_STATS.hardCap)}
+                    ${formatNumber(stats.hardCap)}
                   </div>
-                  <div className="text-xs text-white/40">Hard Cap</div>
+                  <div className="text-xs text-white/40">{t("stats_hard_cap")}</div>
                 </div>
               </div>
             </div>
@@ -798,10 +828,10 @@ export default function Home() {
             {/* Stats Grid */}
             <div className="grid grid-cols-2 gap-3">
               {[
-                { label: "Tokens Sold", value: formatNumber(MOCK_STATS.tokensSold), unit: "XIC" },
+                { label: t("stats_tokens_sold"), value: formatNumber(stats.totalTokensSold), unit: "XIC" },
-                { label: "Participants", value: MOCK_STATS.participants.toLocaleString(), unit: "Wallets" },
+                { label: t("stats_token_price"), value: "$0.02", unit: "USDT" },
-                { label: "Token Price", value: "$0.02", unit: "USDT" },
+                { label: t("stats_listing"), value: "$0.10", unit: t("stats_target") },
-                { label: "Listing Price", value: "$0.10", unit: "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>
@@ -813,13 +843,13 @@ export default function Home() {
 
             {/* 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">Token Details</h3>
+              <h3 className="text-xs font-semibold uppercase tracking-widest text-white/40">{t("token_details")}</h3>
               {[
-                { label: "Name", value: "New AssetChain Token" },
+                { label: t("token_name"), value: "New AssetChain Token" },
-                { label: "Symbol", value: "XIC" },
+                { label: t("token_symbol"), value: "XIC" },
-                { label: "Network", value: "BSC (BEP-20)" },
+                { label: t("token_network"), value: "BSC (BEP-20)" },
-                { label: "Decimals", value: "18" },
+                { label: t("token_decimals"), value: "18" },
-                { label: "Total Supply", value: "100,000,000,000" },
+                { 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>
@@ -833,12 +863,12 @@ export default function Home() {
                 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)" }}
               >
-                View Token Contract →
+                {t("token_view_contract")}
               </a>
             </div>
 
             {/* Live Purchase Feed */}
-            <PurchaseFeed />
+            <PurchaseFeed lang={lang} />
           </div>
 
           {/* ── Right Panel: Purchase ── */}
@@ -848,14 +878,14 @@ export default function Home() {
               <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" }}>Buy XIC Tokens</h2>
+                  <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">1 XIC = <span className="text-white/80 font-semibold">$0.02 USDT</span> · <span className="text-green-400 font-semibold">No Minimum</span></p>
+                  <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">Select Network</p>
+                <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
@@ -873,18 +903,18 @@ export default function Home() {
 
               {/* Purchase Area */}
               <div>
-                {activeNetwork === "BSC" && <EVMPurchasePanel network="BSC" />}
+                {activeNetwork === "BSC" && <EVMPurchasePanel network="BSC" lang={lang} />}
-                {activeNetwork === "ETH" && <EVMPurchasePanel network="ETH" />}
+                {activeNetwork === "ETH" && <EVMPurchasePanel network="ETH" lang={lang} />}
                 {activeNetwork === "TRON" && (
                   <div className="space-y-4">
                     <div className="space-y-2">
-                      <label className="text-sm text-white/60 font-medium">USDT Amount (TRC20)</label>
+                      <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="Enter any USDT amount"
+                          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>
@@ -902,20 +932,20 @@ export default function Home() {
                         ))}
                       </div>
                     </div>
-                    <TRC20Panel usdtAmount={parseFloat(trcUsdtAmount) || 0} />
+                    <TRC20Panel usdtAmount={parseFloat(trcUsdtAmount) || 0} lang={lang} />
                   </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">Verified Presale Contracts</p>
+                <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)" }}>
-                    BSC Contract ↗
+                    {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)" }}>
-                    ETH Contract ↗
+                    {t("buy_eth_contract")}
                   </a>
                 </div>
               </div>
@@ -924,9 +954,9 @@ export default function Home() {
             {/* Why NAC */}
             <div className="mt-5 grid grid-cols-1 md:grid-cols-3 gap-4">
               {[
-                { icon: "🔗", title: "Native RWA Chain", desc: "Purpose-built for Real World Asset tokenization with AI-native compliance" },
+                { icon: "🔗", title: t("why_rwa_title"), desc: t("why_rwa_desc") },
-                { icon: "⚡", title: "CBPP Consensus", desc: "Constitutional Block Production Protocol — next-gen consensus beyond PoS/PoW" },
+                { icon: "⚡", title: t("why_cbpp_title"), desc: t("why_cbpp_desc") },
-                { icon: "🛡️", title: "Charter Contracts", desc: "NAC-native smart contract language with built-in regulatory compliance" },
+                { 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>
@@ -943,19 +973,17 @@ export default function Home() {
       <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
+            {t("faq_title")}
           </h2>
-          <p className="text-white/50 text-sm max-w-xl mx-auto">
+          <p className="text-white/50 text-sm max-w-xl mx-auto">{t("faq_subtitle")}</p>
-            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) => (
+          {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">Still have questions?</p>
+          <p className="text-white/40 text-sm mb-3">{t("faq_still")}</p>
           <a
             href="https://t.me/newassetchain"
             target="_blank"
@@ -966,7 +994,7 @@ export default function Home() {
             <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
+            {t("faq_ask")}
           </a>
         </div>
       </section>
@@ -977,15 +1005,13 @@ export default function Home() {
           <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">
+        <p className="text-xs text-white/30 max-w-md mx-auto">{t("footer_risk")}</p>
-          This presale involves risk. Only invest what you can afford to lose. XIC tokens are not available to US persons or residents of restricted jurisdictions.
-        </p>
         <div className="flex justify-center gap-6 mt-4">
           {[
-            { label: "Website", href: "https://newassetchain.io" },
+            { label: t("footer_website"), href: "https://newassetchain.io" },
-            { label: "Explorer", href: "https://lens.newassetchain.io" },
+            { label: t("footer_explorer"), href: "https://lens.newassetchain.io" },
-            { label: "Telegram", href: "https://t.me/newassetchain" },
+            { label: t("footer_telegram"), href: "https://t.me/newassetchain" },
-            { label: "Twitter", href: "https://twitter.com/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}
@@ -995,9 +1021,8 @@ export default function Home() {
       </footer>
 
       {/* ── Chat Support Widget ── */}
-      <ChatSupport />
+      <ChatSupport lang={lang} />
 
-      {/* ── Fade-in animation for purchase feed ── */}
       <style>{`
         @keyframes fadeInDown {
           from { opacity: 0; transform: translateY(-10px); }

client/src/pages/NotFound.tsx

@@ -33,7 +33,10 @@ export default function NotFound() {
             It may have been moved or deleted.
           </p>
 
-          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+          <div
+            id="not-found-button-group"
+            className="flex flex-col sm:flex-row gap-3 justify-center"
+          >
             <Button
               onClick={handleGoHome}
               className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg"

drizzle.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "drizzle-kit";
+
+const connectionString = process.env.DATABASE_URL;
+if (!connectionString) {
+  throw new Error("DATABASE_URL is required to run drizzle commands");
+}
+
+export default defineConfig({
+  schema: "./drizzle/schema.ts",
+  out: "./drizzle",
+  dialect: "mysql",
+  dbCredentials: {
+    url: connectionString,
+  },
+});

drizzle/0000_noisy_squadron_sinister.sql

@@ -0,0 +1,13 @@
+CREATE TABLE `users` (
+	`id` int AUTO_INCREMENT NOT NULL,
+	`openId` varchar(64) NOT NULL,
+	`name` text,
+	`email` varchar(320),
+	`loginMethod` varchar(64),
+	`role` enum('user','admin') NOT NULL DEFAULT 'user',
+	`createdAt` timestamp NOT NULL DEFAULT (now()),
+	`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
+	`lastSignedIn` timestamp NOT NULL DEFAULT (now()),
+	CONSTRAINT `users_id` PRIMARY KEY(`id`),
+	CONSTRAINT `users_openId_unique` UNIQUE(`openId`)
+);

drizzle/0001_known_moira_mactaggert.sql

@@ -0,0 +1,25 @@
+CREATE TABLE `presale_stats_cache` (
+	`id` int AUTO_INCREMENT NOT NULL,
+	`chain` varchar(16) NOT NULL,
+	`usdtRaised` decimal(30,6) DEFAULT '0',
+	`tokensSold` decimal(30,6) DEFAULT '0',
+	`weiRaised` decimal(30,6) DEFAULT '0',
+	`lastUpdated` timestamp NOT NULL DEFAULT (now()),
+	CONSTRAINT `presale_stats_cache_id` PRIMARY KEY(`id`)
+);
+--> statement-breakpoint
+CREATE TABLE `trc20_purchases` (
+	`id` int AUTO_INCREMENT NOT NULL,
+	`txHash` varchar(128) NOT NULL,
+	`fromAddress` varchar(64) NOT NULL,
+	`usdtAmount` decimal(20,6) NOT NULL,
+	`xicAmount` decimal(30,6) NOT NULL,
+	`blockNumber` bigint,
+	`status` enum('pending','confirmed','distributed','failed') NOT NULL DEFAULT 'pending',
+	`distributedAt` timestamp,
+	`distributeTxHash` varchar(128),
+	`createdAt` timestamp NOT NULL DEFAULT (now()),
+	`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
+	CONSTRAINT `trc20_purchases_id` PRIMARY KEY(`id`),
+	CONSTRAINT `trc20_purchases_txHash_unique` UNIQUE(`txHash`)
+);

drizzle/meta/0000_snapshot.json

@@ -0,0 +1,110 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "1053e77f-3d87-44cd-983a-106c5a6e74a1",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "openId": {
+          "name": "openId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(320)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "loginMethod": {
+          "name": "loginMethod",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "enum('user','admin')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'user'"
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "onUpdate": true,
+          "default": "(now())"
+        },
+        "lastSignedIn": {
+          "name": "lastSignedIn",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "users_id": {
+          "name": "users_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {
+        "users_openId_unique": {
+          "name": "users_openId_unique",
+          "columns": [
+            "openId"
+          ]
+        }
+      },
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}

drizzle/meta/0001_snapshot.json

@@ -0,0 +1,278 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "33a25b6c-f9fd-41c4-bb21-858cf3adca97",
+  "prevId": "1053e77f-3d87-44cd-983a-106c5a6e74a1",
+  "tables": {
+    "presale_stats_cache": {
+      "name": "presale_stats_cache",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "chain": {
+          "name": "chain",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "usdtRaised": {
+          "name": "usdtRaised",
+          "type": "decimal(30,6)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'0'"
+        },
+        "tokensSold": {
+          "name": "tokensSold",
+          "type": "decimal(30,6)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'0'"
+        },
+        "weiRaised": {
+          "name": "weiRaised",
+          "type": "decimal(30,6)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'0'"
+        },
+        "lastUpdated": {
+          "name": "lastUpdated",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "presale_stats_cache_id": {
+          "name": "presale_stats_cache_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "trc20_purchases": {
+      "name": "trc20_purchases",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "txHash": {
+          "name": "txHash",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "fromAddress": {
+          "name": "fromAddress",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "usdtAmount": {
+          "name": "usdtAmount",
+          "type": "decimal(20,6)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "xicAmount": {
+          "name": "xicAmount",
+          "type": "decimal(30,6)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "blockNumber": {
+          "name": "blockNumber",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "status": {
+          "name": "status",
+          "type": "enum('pending','confirmed','distributed','failed')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'pending'"
+        },
+        "distributedAt": {
+          "name": "distributedAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "distributeTxHash": {
+          "name": "distributeTxHash",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "onUpdate": true,
+          "default": "(now())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "trc20_purchases_id": {
+          "name": "trc20_purchases_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {
+        "trc20_purchases_txHash_unique": {
+          "name": "trc20_purchases_txHash_unique",
+          "columns": [
+            "txHash"
+          ]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "openId": {
+          "name": "openId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(320)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "loginMethod": {
+          "name": "loginMethod",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "enum('user','admin')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'user'"
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "onUpdate": true,
+          "default": "(now())"
+        },
+        "lastSignedIn": {
+          "name": "lastSignedIn",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "users_id": {
+          "name": "users_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {
+        "users_openId_unique": {
+          "name": "users_openId_unique",
+          "columns": [
+            "openId"
+          ]
+        }
+      },
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}

drizzle/meta/_journal.json

@@ -0,0 +1,20 @@
+{
+  "version": "7",
+  "dialect": "mysql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "5",
+      "when": 1772937302049,
+      "tag": "0000_noisy_squadron_sinister",
+      "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "5",
+      "when": 1772937365168,
+      "tag": "0001_known_moira_mactaggert",
+      "breakpoints": true
+    }
+  ]
+}

drizzle/relations.ts

@@ -0,0 +1 @@
+import {} from "./schema";

drizzle/schema.ts

@@ -0,0 +1,68 @@
+import {
+  bigint,
+  boolean,
+  decimal,
+  int,
+  mysqlEnum,
+  mysqlTable,
+  text,
+  timestamp,
+  varchar,
+} from "drizzle-orm/mysql-core";
+
+/**
+ * Core user table backing auth flow.
+ * Extend this file with additional tables as your product grows.
+ * Columns use camelCase to match both database fields and generated types.
+ */
+export const users = mysqlTable("users", {
+  /**
+   * Surrogate primary key. Auto-incremented numeric value managed by the database.
+   * Use this for relations between tables.
+   */
+  id: int("id").autoincrement().primaryKey(),
+  /** Manus OAuth identifier (openId) returned from the OAuth callback. Unique per user. */
+  openId: varchar("openId", { length: 64 }).notNull().unique(),
+  name: text("name"),
+  email: varchar("email", { length: 320 }),
+  loginMethod: varchar("loginMethod", { length: 64 }),
+  role: mysqlEnum("role", ["user", "admin"]).default("user").notNull(),
+  createdAt: timestamp("createdAt").defaultNow().notNull(),
+  updatedAt: timestamp("updatedAt").defaultNow().onUpdateNow().notNull(),
+  lastSignedIn: timestamp("lastSignedIn").defaultNow().notNull(),
+});
+
+export type User = typeof users.$inferSelect;
+export type InsertUser = typeof users.$inferInsert;
+
+// TRC20 purchase records — monitored from TRON network
+export const trc20Purchases = mysqlTable("trc20_purchases", {
+  id: int("id").autoincrement().primaryKey(),
+  txHash: varchar("txHash", { length: 128 }).notNull().unique(),
+  fromAddress: varchar("fromAddress", { length: 64 }).notNull(),
+  usdtAmount: decimal("usdtAmount", { precision: 20, scale: 6 }).notNull(),
+  xicAmount: decimal("xicAmount", { precision: 30, scale: 6 }).notNull(),
+  blockNumber: bigint("blockNumber", { mode: "number" }),
+  status: mysqlEnum("status", ["pending", "confirmed", "distributed", "failed"])
+    .default("pending")
+    .notNull(),
+  distributedAt: timestamp("distributedAt"),
+  distributeTxHash: varchar("distributeTxHash", { length: 128 }),
+  createdAt: timestamp("createdAt").defaultNow().notNull(),
+  updatedAt: timestamp("updatedAt").defaultNow().onUpdateNow().notNull(),
+});
+
+export type Trc20Purchase = typeof trc20Purchases.$inferSelect;
+export type InsertTrc20Purchase = typeof trc20Purchases.$inferInsert;
+
+// Presale stats cache — refreshed from on-chain every 60 seconds
+export const presaleStatsCache = mysqlTable("presale_stats_cache", {
+  id: int("id").autoincrement().primaryKey(),
+  chain: varchar("chain", { length: 16 }).notNull(),
+  usdtRaised: decimal("usdtRaised", { precision: 30, scale: 6 }).default("0"),
+  tokensSold: decimal("tokensSold", { precision: 30, scale: 6 }).default("0"),
+  weiRaised: decimal("weiRaised", { precision: 30, scale: 6 }).default("0"),
+  lastUpdated: timestamp("lastUpdated").defaultNow().notNull(),
+});
+
+export type PresaleStatsCache = typeof presaleStatsCache.$inferSelect;

package.json

@@ -4,14 +4,17 @@
   "type": "module",
   "license": "MIT",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "NODE_ENV=development tsx watch server/_core/index.ts",
-    "build": "vite build && esbuild server/index.ts --platform=node --packages=external --bundle --format=esm --outdir=dist",
+    "build": "vite build && esbuild server/_core/index.ts --platform=node --packages=external --bundle --format=esm --outdir=dist",
     "start": "NODE_ENV=production node dist/index.js",
-    "preview": "vite preview --host",
     "check": "tsc --noEmit",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "test": "vitest run",
+    "db:push": "drizzle-kit generate && drizzle-kit migrate"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.693.0",
+    "@aws-sdk/s3-request-presigner": "^3.693.0",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -39,17 +42,27 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-query": "^5.90.2",
+    "@trpc/client": "^11.6.0",
+    "@trpc/react-query": "^11.6.0",
+    "@trpc/server": "^11.6.0",
     "@walletconnect/ethereum-provider": "^2.23.7",
     "axios": "^1.12.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "cookie": "^1.0.2",
+    "date-fns": "^4.1.0",
+    "dotenv": "^17.2.2",
+    "drizzle-orm": "^0.44.5",
     "embla-carousel-react": "^8.6.0",
-    "ethers": "6",
+    "ethers": "^6.16.0",
     "express": "^4.21.2",
     "framer-motion": "^12.23.22",
     "input-otp": "^1.4.2",
+    "jose": "6.1.0",
     "lucide-react": "^0.453.0",
+    "mysql2": "^3.15.0",
     "nanoid": "^5.1.5",
     "next-themes": "^0.4.6",
     "react": "^19.2.1",
@@ -60,9 +73,12 @@
     "recharts": "^2.15.2",
     "sonner": "^2.0.7",
     "streamdown": "^1.4.0",
+    "superjson": "^1.13.3",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
+    "tronweb": "^6.2.2",
     "vaul": "^1.1.2",
+    "viem": "^2.47.0",
     "wouter": "^3.3.5",
     "zod": "^4.1.12"
   },
@@ -78,6 +94,7 @@
     "@vitejs/plugin-react": "^5.0.4",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.20",
+    "drizzle-kit": "^0.31.4",
     "esbuild": "^0.25.0",
     "pnpm": "^10.15.1",
     "postcss": "^8.4.47",
@@ -85,7 +102,7 @@
     "tailwindcss": "^4.1.14",
     "tsx": "^4.19.1",
     "tw-animate-css": "^1.4.0",
-    "typescript": "5.6.3",
+    "typescript": "5.9.3",
     "vite": "^7.1.7",
     "vite-plugin-manus-runtime": "^0.0.57",
     "vitest": "^2.1.4"

server/_core/context.ts

@@ -0,0 +1,28 @@
+import type { CreateExpressContextOptions } from "@trpc/server/adapters/express";
+import type { User } from "../../drizzle/schema";
+import { sdk } from "./sdk";
+
+export type TrpcContext = {
+  req: CreateExpressContextOptions["req"];
+  res: CreateExpressContextOptions["res"];
+  user: User | null;
+};
+
+export async function createContext(
+  opts: CreateExpressContextOptions
+): Promise<TrpcContext> {
+  let user: User | null = null;
+
+  try {
+    user = await sdk.authenticateRequest(opts.req);
+  } catch (error) {
+    // Authentication is optional for public procedures.
+    user = null;
+  }
+
+  return {
+    req: opts.req,
+    res: opts.res,
+    user,
+  };
+}

server/_core/cookies.ts

@@ -0,0 +1,48 @@
+import type { CookieOptions, Request } from "express";
+
+const LOCAL_HOSTS = new Set(["localhost", "127.0.0.1", "::1"]);
+
+function isIpAddress(host: string) {
+  // Basic IPv4 check and IPv6 presence detection.
+  if (/^\d{1,3}(\.\d{1,3}){3}$/.test(host)) return true;
+  return host.includes(":");
+}
+
+function isSecureRequest(req: Request) {
+  if (req.protocol === "https") return true;
+
+  const forwardedProto = req.headers["x-forwarded-proto"];
+  if (!forwardedProto) return false;
+
+  const protoList = Array.isArray(forwardedProto)
+    ? forwardedProto
+    : forwardedProto.split(",");
+
+  return protoList.some(proto => proto.trim().toLowerCase() === "https");
+}
+
+export function getSessionCookieOptions(
+  req: Request
+): Pick<CookieOptions, "domain" | "httpOnly" | "path" | "sameSite" | "secure"> {
+  // const hostname = req.hostname;
+  // const shouldSetDomain =
+  //   hostname &&
+  //   !LOCAL_HOSTS.has(hostname) &&
+  //   !isIpAddress(hostname) &&
+  //   hostname !== "127.0.0.1" &&
+  //   hostname !== "::1";
+
+  // const domain =
+  //   shouldSetDomain && !hostname.startsWith(".")
+  //     ? `.${hostname}`
+  //     : shouldSetDomain
+  //       ? hostname
+  //       : undefined;
+
+  return {
+    httpOnly: true,
+    path: "/",
+    sameSite: "none",
+    secure: isSecureRequest(req),
+  };
+}

server/_core/dataApi.ts

@@ -0,0 +1,64 @@
+/**
+ * Quick example (matches curl usage):
+ *   await callDataApi("Youtube/search", {
+ *     query: { gl: "US", hl: "en", q: "manus" },
+ *   })
+ */
+import { ENV } from "./env";
+
+export type DataApiCallOptions = {
+  query?: Record<string, unknown>;
+  body?: Record<string, unknown>;
+  pathParams?: Record<string, unknown>;
+  formData?: Record<string, unknown>;
+};
+
+export async function callDataApi(
+  apiId: string,
+  options: DataApiCallOptions = {}
+): Promise<unknown> {
+  if (!ENV.forgeApiUrl) {
+    throw new Error("BUILT_IN_FORGE_API_URL is not configured");
+  }
+  if (!ENV.forgeApiKey) {
+    throw new Error("BUILT_IN_FORGE_API_KEY is not configured");
+  }
+
+  // Build the full URL by appending the service path to the base URL
+  const baseUrl = ENV.forgeApiUrl.endsWith("/") ? ENV.forgeApiUrl : `${ENV.forgeApiUrl}/`;
+  const fullUrl = new URL("webdevtoken.v1.WebDevService/CallApi", baseUrl).toString();
+
+  const response = await fetch(fullUrl, {
+    method: "POST",
+    headers: {
+      accept: "application/json",
+      "content-type": "application/json",
+      "connect-protocol-version": "1",
+      authorization: `Bearer ${ENV.forgeApiKey}`,
+    },
+    body: JSON.stringify({
+      apiId,
+      query: options.query,
+      body: options.body,
+      path_params: options.pathParams,
+      multipart_form_data: options.formData,
+    }),
+  });
+
+  if (!response.ok) {
+    const detail = await response.text().catch(() => "");
+    throw new Error(
+      `Data API request failed (${response.status} ${response.statusText})${detail ? `: ${detail}` : ""}`
+    );
+  }
+
+  const payload = await response.json().catch(() => ({}));
+  if (payload && typeof payload === "object" && "jsonData" in payload) {
+    try {
+      return JSON.parse((payload as Record<string, string>).jsonData ?? "{}");
+    } catch {
+      return (payload as Record<string, unknown>).jsonData;
+    }
+  }
+  return payload;
+}

server/_core/env.ts

@@ -0,0 +1,10 @@
+export const ENV = {
+  appId: process.env.VITE_APP_ID ?? "",
+  cookieSecret: process.env.JWT_SECRET ?? "",
+  databaseUrl: process.env.DATABASE_URL ?? "",
+  oAuthServerUrl: process.env.OAUTH_SERVER_URL ?? "",
+  ownerOpenId: process.env.OWNER_OPEN_ID ?? "",
+  isProduction: process.env.NODE_ENV === "production",
+  forgeApiUrl: process.env.BUILT_IN_FORGE_API_URL ?? "",
+  forgeApiKey: process.env.BUILT_IN_FORGE_API_KEY ?? "",
+};

server/_core/imageGeneration.ts

@@ -0,0 +1,92 @@
+/**
+ * Image generation helper using internal ImageService
+ *
+ * Example usage:
+ *   const { url: imageUrl } = await generateImage({
+ *     prompt: "A serene landscape with mountains"
+ *   });
+ *
+ * For editing:
+ *   const { url: imageUrl } = await generateImage({
+ *     prompt: "Add a rainbow to this landscape",
+ *     originalImages: [{
+ *       url: "https://example.com/original.jpg",
+ *       mimeType: "image/jpeg"
+ *     }]
+ *   });
+ */
+import { storagePut } from "server/storage";
+import { ENV } from "./env";
+
+export type GenerateImageOptions = {
+  prompt: string;
+  originalImages?: Array<{
+    url?: string;
+    b64Json?: string;
+    mimeType?: string;
+  }>;
+};
+
+export type GenerateImageResponse = {
+  url?: string;
+};
+
+export async function generateImage(
+  options: GenerateImageOptions
+): Promise<GenerateImageResponse> {
+  if (!ENV.forgeApiUrl) {
+    throw new Error("BUILT_IN_FORGE_API_URL is not configured");
+  }
+  if (!ENV.forgeApiKey) {
+    throw new Error("BUILT_IN_FORGE_API_KEY is not configured");
+  }
+
+  // Build the full URL by appending the service path to the base URL
+  const baseUrl = ENV.forgeApiUrl.endsWith("/")
+    ? ENV.forgeApiUrl
+    : `${ENV.forgeApiUrl}/`;
+  const fullUrl = new URL(
+    "images.v1.ImageService/GenerateImage",
+    baseUrl
+  ).toString();
+
+  const response = await fetch(fullUrl, {
+    method: "POST",
+    headers: {
+      accept: "application/json",
+      "content-type": "application/json",
+      "connect-protocol-version": "1",
+      authorization: `Bearer ${ENV.forgeApiKey}`,
+    },
+    body: JSON.stringify({
+      prompt: options.prompt,
+      original_images: options.originalImages || [],
+    }),
+  });
+
+  if (!response.ok) {
+    const detail = await response.text().catch(() => "");
+    throw new Error(
+      `Image generation request failed (${response.status} ${response.statusText})${detail ? `: ${detail}` : ""}`
+    );
+  }
+
+  const result = (await response.json()) as {
+    image: {
+      b64Json: string;
+      mimeType: string;
+    };
+  };
+  const base64Data = result.image.b64Json;
+  const buffer = Buffer.from(base64Data, "base64");
+
+  // Save to S3
+  const { url } = await storagePut(
+    `generated/${Date.now()}.png`,
+    buffer,
+    result.image.mimeType
+  );
+  return {
+    url,
+  };
+}

server/_core/index.ts

@@ -0,0 +1,69 @@
+import "dotenv/config";
+import express from "express";
+import { createServer } from "http";
+import net from "net";
+import { createExpressMiddleware } from "@trpc/server/adapters/express";
+import { registerOAuthRoutes } from "./oauth";
+import { appRouter } from "../routers";
+import { createContext } from "./context";
+import { serveStatic, setupVite } from "./vite";
+import { startTRC20Monitor } from "../trc20Monitor";
+
+function isPortAvailable(port: number): Promise<boolean> {
+  return new Promise(resolve => {
+    const server = net.createServer();
+    server.listen(port, () => {
+      server.close(() => resolve(true));
+    });
+    server.on("error", () => resolve(false));
+  });
+}
+
+async function findAvailablePort(startPort: number = 3000): Promise<number> {
+  for (let port = startPort; port < startPort + 20; port++) {
+    if (await isPortAvailable(port)) {
+      return port;
+    }
+  }
+  throw new Error(`No available port found starting from ${startPort}`);
+}
+
+async function startServer() {
+  const app = express();
+  const server = createServer(app);
+  // Configure body parser with larger size limit for file uploads
+  app.use(express.json({ limit: "50mb" }));
+  app.use(express.urlencoded({ limit: "50mb", extended: true }));
+  // OAuth callback under /api/oauth/callback
+  registerOAuthRoutes(app);
+  // tRPC API
+  app.use(
+    "/api/trpc",
+    createExpressMiddleware({
+      router: appRouter,
+      createContext,
+    })
+  );
+  // development mode uses Vite, production mode uses static files
+  if (process.env.NODE_ENV === "development") {
+    await setupVite(app, server);
+  } else {
+    serveStatic(app);
+  }
+
+  const preferredPort = parseInt(process.env.PORT || "3000");
+  const port = await findAvailablePort(preferredPort);
+
+  if (port !== preferredPort) {
+    console.log(`Port ${preferredPort} is busy, using port ${port} instead`);
+  }
+
+  server.listen(port, () => {
+    console.log(`Server running on http://localhost:${port}/`);
+  });
+
+  // Start TRC20 monitor in background
+  startTRC20Monitor().catch(e => console.error("[TRC20Monitor] Start error:", e));
+}
+
+startServer().catch(console.error);

server/_core/llm.ts

@@ -0,0 +1,332 @@
+import { ENV } from "./env";
+
+export type Role = "system" | "user" | "assistant" | "tool" | "function";
+
+export type TextContent = {
+  type: "text";
+  text: string;
+};
+
+export type ImageContent = {
+  type: "image_url";
+  image_url: {
+    url: string;
+    detail?: "auto" | "low" | "high";
+  };
+};
+
+export type FileContent = {
+  type: "file_url";
+  file_url: {
+    url: string;
+    mime_type?: "audio/mpeg" | "audio/wav" | "application/pdf" | "audio/mp4" | "video/mp4" ;
+  };
+};
+
+export type MessageContent = string | TextContent | ImageContent | FileContent;
+
+export type Message = {
+  role: Role;
+  content: MessageContent | MessageContent[];
+  name?: string;
+  tool_call_id?: string;
+};
+
+export type Tool = {
+  type: "function";
+  function: {
+    name: string;
+    description?: string;
+    parameters?: Record<string, unknown>;
+  };
+};
+
+export type ToolChoicePrimitive = "none" | "auto" | "required";
+export type ToolChoiceByName = { name: string };
+export type ToolChoiceExplicit = {
+  type: "function";
+  function: {
+    name: string;
+  };
+};
+
+export type ToolChoice =
+  | ToolChoicePrimitive
+  | ToolChoiceByName
+  | ToolChoiceExplicit;
+
+export type InvokeParams = {
+  messages: Message[];
+  tools?: Tool[];
+  toolChoice?: ToolChoice;
+  tool_choice?: ToolChoice;
+  maxTokens?: number;
+  max_tokens?: number;
+  outputSchema?: OutputSchema;
+  output_schema?: OutputSchema;
+  responseFormat?: ResponseFormat;
+  response_format?: ResponseFormat;
+};
+
+export type ToolCall = {
+  id: string;
+  type: "function";
+  function: {
+    name: string;
+    arguments: string;
+  };
+};
+
+export type InvokeResult = {
+  id: string;
+  created: number;
+  model: string;
+  choices: Array<{
+    index: number;
+    message: {
+      role: Role;
+      content: string | Array<TextContent | ImageContent | FileContent>;
+      tool_calls?: ToolCall[];
+    };
+    finish_reason: string | null;
+  }>;
+  usage?: {
+    prompt_tokens: number;
+    completion_tokens: number;
+    total_tokens: number;
+  };
+};
+
+export type JsonSchema = {
+  name: string;
+  schema: Record<string, unknown>;
+  strict?: boolean;
+};
+
+export type OutputSchema = JsonSchema;
+
+export type ResponseFormat =
+  | { type: "text" }
+  | { type: "json_object" }
+  | { type: "json_schema"; json_schema: JsonSchema };
+
+const ensureArray = (
+  value: MessageContent | MessageContent[]
+): MessageContent[] => (Array.isArray(value) ? value : [value]);
+
+const normalizeContentPart = (
+  part: MessageContent
+): TextContent | ImageContent | FileContent => {
+  if (typeof part === "string") {
+    return { type: "text", text: part };
+  }
+
+  if (part.type === "text") {
+    return part;
+  }
+
+  if (part.type === "image_url") {
+    return part;
+  }
+
+  if (part.type === "file_url") {
+    return part;
+  }
+
+  throw new Error("Unsupported message content part");
+};
+
+const normalizeMessage = (message: Message) => {
+  const { role, name, tool_call_id } = message;
+
+  if (role === "tool" || role === "function") {
+    const content = ensureArray(message.content)
+      .map(part => (typeof part === "string" ? part : JSON.stringify(part)))
+      .join("\n");
+
+    return {
+      role,
+      name,
+      tool_call_id,
+      content,
+    };
+  }
+
+  const contentParts = ensureArray(message.content).map(normalizeContentPart);
+
+  // If there's only text content, collapse to a single string for compatibility
+  if (contentParts.length === 1 && contentParts[0].type === "text") {
+    return {
+      role,
+      name,
+      content: contentParts[0].text,
+    };
+  }
+
+  return {
+    role,
+    name,
+    content: contentParts,
+  };
+};
+
+const normalizeToolChoice = (
+  toolChoice: ToolChoice | undefined,
+  tools: Tool[] | undefined
+): "none" | "auto" | ToolChoiceExplicit | undefined => {
+  if (!toolChoice) return undefined;
+
+  if (toolChoice === "none" || toolChoice === "auto") {
+    return toolChoice;
+  }
+
+  if (toolChoice === "required") {
+    if (!tools || tools.length === 0) {
+      throw new Error(
+        "tool_choice 'required' was provided but no tools were configured"
+      );
+    }
+
+    if (tools.length > 1) {
+      throw new Error(
+        "tool_choice 'required' needs a single tool or specify the tool name explicitly"
+      );
+    }
+
+    return {
+      type: "function",
+      function: { name: tools[0].function.name },
+    };
+  }
+
+  if ("name" in toolChoice) {
+    return {
+      type: "function",
+      function: { name: toolChoice.name },
+    };
+  }
+
+  return toolChoice;
+};
+
+const resolveApiUrl = () =>
+  ENV.forgeApiUrl && ENV.forgeApiUrl.trim().length > 0
+    ? `${ENV.forgeApiUrl.replace(/\/$/, "")}/v1/chat/completions`
+    : "https://forge.manus.im/v1/chat/completions";
+
+const assertApiKey = () => {
+  if (!ENV.forgeApiKey) {
+    throw new Error("OPENAI_API_KEY is not configured");
+  }
+};
+
+const normalizeResponseFormat = ({
+  responseFormat,
+  response_format,
+  outputSchema,
+  output_schema,
+}: {
+  responseFormat?: ResponseFormat;
+  response_format?: ResponseFormat;
+  outputSchema?: OutputSchema;
+  output_schema?: OutputSchema;
+}):
+  | { type: "json_schema"; json_schema: JsonSchema }
+  | { type: "text" }
+  | { type: "json_object" }
+  | undefined => {
+  const explicitFormat = responseFormat || response_format;
+  if (explicitFormat) {
+    if (
+      explicitFormat.type === "json_schema" &&
+      !explicitFormat.json_schema?.schema
+    ) {
+      throw new Error(
+        "responseFormat json_schema requires a defined schema object"
+      );
+    }
+    return explicitFormat;
+  }
+
+  const schema = outputSchema || output_schema;
+  if (!schema) return undefined;
+
+  if (!schema.name || !schema.schema) {
+    throw new Error("outputSchema requires both name and schema");
+  }
+
+  return {
+    type: "json_schema",
+    json_schema: {
+      name: schema.name,
+      schema: schema.schema,
+      ...(typeof schema.strict === "boolean" ? { strict: schema.strict } : {}),
+    },
+  };
+};
+
+export async function invokeLLM(params: InvokeParams): Promise<InvokeResult> {
+  assertApiKey();
+
+  const {
+    messages,
+    tools,
+    toolChoice,
+    tool_choice,
+    outputSchema,
+    output_schema,
+    responseFormat,
+    response_format,
+  } = params;
+
+  const payload: Record<string, unknown> = {
+    model: "gemini-2.5-flash",
+    messages: messages.map(normalizeMessage),
+  };
+
+  if (tools && tools.length > 0) {
+    payload.tools = tools;
+  }
+
+  const normalizedToolChoice = normalizeToolChoice(
+    toolChoice || tool_choice,
+    tools
+  );
+  if (normalizedToolChoice) {
+    payload.tool_choice = normalizedToolChoice;
+  }
+
+  payload.max_tokens = 32768
+  payload.thinking = {
+    "budget_tokens": 128
+  }
+
+  const normalizedResponseFormat = normalizeResponseFormat({
+    responseFormat,
+    response_format,
+    outputSchema,
+    output_schema,
+  });
+
+  if (normalizedResponseFormat) {
+    payload.response_format = normalizedResponseFormat;
+  }
+
+  const response = await fetch(resolveApiUrl(), {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+      authorization: `Bearer ${ENV.forgeApiKey}`,
+    },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `LLM invoke failed: ${response.status} ${response.statusText} – ${errorText}`
+    );
+  }
+
+  return (await response.json()) as InvokeResult;
+}

server/_core/map.ts

@@ -0,0 +1,319 @@
+/**
+ * Google Maps API Integration for Manus WebDev Templates
+ * 
+ * Main function: makeRequest<T>(endpoint, params) - Makes authenticated requests to Google Maps APIs
+ * All credentials are automatically injected. Array parameters use | as separator.
+ * 
+ * See API examples below the type definitions for usage patterns.
+ */
+
+import { ENV } from "./env";
+
+// ============================================================================
+// Configuration
+// ============================================================================
+
+type MapsConfig = {
+  baseUrl: string;
+  apiKey: string;
+};
+
+function getMapsConfig(): MapsConfig {
+  const baseUrl = ENV.forgeApiUrl;
+  const apiKey = ENV.forgeApiKey;
+
+  if (!baseUrl || !apiKey) {
+    throw new Error(
+      "Google Maps proxy credentials missing: set BUILT_IN_FORGE_API_URL and BUILT_IN_FORGE_API_KEY"
+    );
+  }
+
+  return {
+    baseUrl: baseUrl.replace(/\/+$/, ""),
+    apiKey,
+  };
+}
+
+// ============================================================================
+// Core Request Handler
+// ============================================================================
+
+interface RequestOptions {
+  method?: "GET" | "POST";
+  body?: Record<string, unknown>;
+}
+
+/**
+ * Make authenticated requests to Google Maps APIs
+ * 
+ * @param endpoint - The API endpoint (e.g., "/maps/api/geocode/json")
+ * @param params - Query parameters for the request
+ * @param options - Additional request options
+ * @returns The API response
+ */
+export async function makeRequest<T = unknown>(
+  endpoint: string,
+  params: Record<string, unknown> = {},
+  options: RequestOptions = {}
+): Promise<T> {
+  const { baseUrl, apiKey } = getMapsConfig();
+
+  // Construct full URL: baseUrl + /v1/maps/proxy + endpoint
+  const url = new URL(`${baseUrl}/v1/maps/proxy${endpoint}`);
+
+  // Add API key as query parameter (standard Google Maps API authentication)
+  url.searchParams.append("key", apiKey);
+
+  // Add other query parameters
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== undefined && value !== null) {
+      url.searchParams.append(key, String(value));
+    }
+  });
+
+  const response = await fetch(url.toString(), {
+    method: options.method || "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: options.body ? JSON.stringify(options.body) : undefined,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `Google Maps API request failed (${response.status} ${response.statusText}): ${errorText}`
+    );
+  }
+
+  return (await response.json()) as T;
+}
+
+// ============================================================================
+// Type Definitions
+// ============================================================================
+
+export type TravelMode = "driving" | "walking" | "bicycling" | "transit";
+export type MapType = "roadmap" | "satellite" | "terrain" | "hybrid";
+export type SpeedUnit = "KPH" | "MPH";
+
+export type LatLng = {
+  lat: number;
+  lng: number;
+};
+
+export type DirectionsResult = {
+  routes: Array<{
+    legs: Array<{
+      distance: { text: string; value: number };
+      duration: { text: string; value: number };
+      start_address: string;
+      end_address: string;
+      start_location: LatLng;
+      end_location: LatLng;
+      steps: Array<{
+        distance: { text: string; value: number };
+        duration: { text: string; value: number };
+        html_instructions: string;
+        travel_mode: string;
+        start_location: LatLng;
+        end_location: LatLng;
+      }>;
+    }>;
+    overview_polyline: { points: string };
+    summary: string;
+    warnings: string[];
+    waypoint_order: number[];
+  }>;
+  status: string;
+};
+
+export type DistanceMatrixResult = {
+  rows: Array<{
+    elements: Array<{
+      distance: { text: string; value: number };
+      duration: { text: string; value: number };
+      status: string;
+    }>;
+  }>;
+  origin_addresses: string[];
+  destination_addresses: string[];
+  status: string;
+};
+
+export type GeocodingResult = {
+  results: Array<{
+    address_components: Array<{
+      long_name: string;
+      short_name: string;
+      types: string[];
+    }>;
+    formatted_address: string;
+    geometry: {
+      location: LatLng;
+      location_type: string;
+      viewport: {
+        northeast: LatLng;
+        southwest: LatLng;
+      };
+    };
+    place_id: string;
+    types: string[];
+  }>;
+  status: string;
+};
+
+export type PlacesSearchResult = {
+  results: Array<{
+    place_id: string;
+    name: string;
+    formatted_address: string;
+    geometry: {
+      location: LatLng;
+    };
+    rating?: number;
+    user_ratings_total?: number;
+    business_status?: string;
+    types: string[];
+  }>;
+  status: string;
+};
+
+export type PlaceDetailsResult = {
+  result: {
+    place_id: string;
+    name: string;
+    formatted_address: string;
+    formatted_phone_number?: string;
+    international_phone_number?: string;
+    website?: string;
+    rating?: number;
+    user_ratings_total?: number;
+    reviews?: Array<{
+      author_name: string;
+      rating: number;
+      text: string;
+      time: number;
+    }>;
+    opening_hours?: {
+      open_now: boolean;
+      weekday_text: string[];
+    };
+    geometry: {
+      location: LatLng;
+    };
+  };
+  status: string;
+};
+
+export type ElevationResult = {
+  results: Array<{
+    elevation: number;
+    location: LatLng;
+    resolution: number;
+  }>;
+  status: string;
+};
+
+export type TimeZoneResult = {
+  dstOffset: number;
+  rawOffset: number;
+  status: string;
+  timeZoneId: string;
+  timeZoneName: string;
+};
+
+export type RoadsResult = {
+  snappedPoints: Array<{
+    location: LatLng;
+    originalIndex?: number;
+    placeId: string;
+  }>;
+};
+
+// ============================================================================
+// Google Maps API Reference
+// ============================================================================
+
+/**
+ * GEOCODING - Convert between addresses and coordinates
+ * Endpoint: /maps/api/geocode/json
+ * Input: { address: string } OR { latlng: string }  // latlng: "37.42,-122.08"
+ * Output: GeocodingResult  // results[0].geometry.location, results[0].formatted_address
+ */
+
+/**
+ * DIRECTIONS - Get navigation routes between locations
+ * Endpoint: /maps/api/directions/json
+ * Input: { origin: string, destination: string, mode?: TravelMode, waypoints?: string, alternatives?: boolean }
+ * Output: DirectionsResult  // routes[0].legs[0].distance, duration, steps
+ */
+
+/**
+ * DISTANCE MATRIX - Calculate travel times/distances for multiple origin-destination pairs
+ * Endpoint: /maps/api/distancematrix/json
+ * Input: { origins: string, destinations: string, mode?: TravelMode, units?: "metric"|"imperial" }  // origins: "NYC|Boston"
+ * Output: DistanceMatrixResult  // rows[0].elements[1] = first origin to second destination
+ */
+
+/**
+ * PLACE SEARCH - Find businesses/POIs by text query
+ * Endpoint: /maps/api/place/textsearch/json
+ * Input: { query: string, location?: string, radius?: number, type?: string }  // location: "40.7,-74.0"
+ * Output: PlacesSearchResult  // results[].name, rating, geometry.location, place_id
+ */
+
+/**
+ * NEARBY SEARCH - Find places near a specific location
+ * Endpoint: /maps/api/place/nearbysearch/json
+ * Input: { location: string, radius: number, type?: string, keyword?: string }  // location: "40.7,-74.0"
+ * Output: PlacesSearchResult
+ */
+
+/**
+ * PLACE DETAILS - Get comprehensive information about a specific place
+ * Endpoint: /maps/api/place/details/json
+ * Input: { place_id: string, fields?: string }  // fields: "name,rating,opening_hours,website"
+ * Output: PlaceDetailsResult  // result.name, rating, opening_hours, etc.
+ */
+
+/**
+ * ELEVATION - Get altitude data for geographic points
+ * Endpoint: /maps/api/elevation/json
+ * Input: { locations?: string, path?: string, samples?: number }  // locations: "39.73,-104.98|36.45,-116.86"
+ * Output: ElevationResult  // results[].elevation (meters)
+ */
+
+/**
+ * TIME ZONE - Get timezone information for a location
+ * Endpoint: /maps/api/timezone/json
+ * Input: { location: string, timestamp: number }  // timestamp: Math.floor(Date.now()/1000)
+ * Output: TimeZoneResult  // timeZoneId, timeZoneName
+ */
+
+/**
+ * ROADS - Snap GPS traces to roads, find nearest roads, get speed limits
+ * - /v1/snapToRoads: Input: { path: string, interpolate?: boolean }  // path: "lat,lng|lat,lng"
+ * - /v1/nearestRoads: Input: { points: string }  // points: "lat,lng|lat,lng"
+ * - /v1/speedLimits: Input: { path: string, units?: SpeedUnit }
+ * Output: RoadsResult
+ */
+
+/**
+ * PLACE AUTOCOMPLETE - Real-time place suggestions as user types
+ * Endpoint: /maps/api/place/autocomplete/json
+ * Input: { input: string, location?: string, radius?: number }
+ * Output: { predictions: Array<{ description: string, place_id: string }> }
+ */
+
+/**
+ * STATIC MAPS - Generate map images as URLs (for emails, reports, <img> tags)
+ * Endpoint: /maps/api/staticmap
+ * Input: URL params - center: string, zoom: number, size: string, markers?: string, maptype?: MapType
+ * Output: Image URL (not JSON) - use directly in <img src={url} />
+ * Note: Construct URL manually with getMapsConfig() for auth
+ */
+
+
+
+

server/_core/notification.ts

@@ -0,0 +1,114 @@
+import { TRPCError } from "@trpc/server";
+import { ENV } from "./env";
+
+export type NotificationPayload = {
+  title: string;
+  content: string;
+};
+
+const TITLE_MAX_LENGTH = 1200;
+const CONTENT_MAX_LENGTH = 20000;
+
+const trimValue = (value: string): string => value.trim();
+const isNonEmptyString = (value: unknown): value is string =>
+  typeof value === "string" && value.trim().length > 0;
+
+const buildEndpointUrl = (baseUrl: string): string => {
+  const normalizedBase = baseUrl.endsWith("/")
+    ? baseUrl
+    : `${baseUrl}/`;
+  return new URL(
+    "webdevtoken.v1.WebDevService/SendNotification",
+    normalizedBase
+  ).toString();
+};
+
+const validatePayload = (input: NotificationPayload): NotificationPayload => {
+  if (!isNonEmptyString(input.title)) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: "Notification title is required.",
+    });
+  }
+  if (!isNonEmptyString(input.content)) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: "Notification content is required.",
+    });
+  }
+
+  const title = trimValue(input.title);
+  const content = trimValue(input.content);
+
+  if (title.length > TITLE_MAX_LENGTH) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: `Notification title must be at most ${TITLE_MAX_LENGTH} characters.`,
+    });
+  }
+
+  if (content.length > CONTENT_MAX_LENGTH) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: `Notification content must be at most ${CONTENT_MAX_LENGTH} characters.`,
+    });
+  }
+
+  return { title, content };
+};
+
+/**
+ * Dispatches a project-owner notification through the Manus Notification Service.
+ * Returns `true` if the request was accepted, `false` when the upstream service
+ * cannot be reached (callers can fall back to email/slack). Validation errors
+ * bubble up as TRPC errors so callers can fix the payload.
+ */
+export async function notifyOwner(
+  payload: NotificationPayload
+): Promise<boolean> {
+  const { title, content } = validatePayload(payload);
+
+  if (!ENV.forgeApiUrl) {
+    throw new TRPCError({
+      code: "INTERNAL_SERVER_ERROR",
+      message: "Notification service URL is not configured.",
+    });
+  }
+
+  if (!ENV.forgeApiKey) {
+    throw new TRPCError({
+      code: "INTERNAL_SERVER_ERROR",
+      message: "Notification service API key is not configured.",
+    });
+  }
+
+  const endpoint = buildEndpointUrl(ENV.forgeApiUrl);
+
+  try {
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        accept: "application/json",
+        authorization: `Bearer ${ENV.forgeApiKey}`,
+        "content-type": "application/json",
+        "connect-protocol-version": "1",
+      },
+      body: JSON.stringify({ title, content }),
+    });
+
+    if (!response.ok) {
+      const detail = await response.text().catch(() => "");
+      console.warn(
+        `[Notification] Failed to notify owner (${response.status} ${response.statusText})${
+          detail ? `: ${detail}` : ""
+        }`
+      );
+      return false;
+    }
+
+    return true;
+  } catch (error) {
+    console.warn("[Notification] Error calling notification service:", error);
+    return false;
+  }
+}

server/_core/oauth.ts

@@ -0,0 +1,53 @@
+import { COOKIE_NAME, ONE_YEAR_MS } from "@shared/const";
+import type { Express, Request, Response } from "express";
+import * as db from "../db";
+import { getSessionCookieOptions } from "./cookies";
+import { sdk } from "./sdk";
+
+function getQueryParam(req: Request, key: string): string | undefined {
+  const value = req.query[key];
+  return typeof value === "string" ? value : undefined;
+}
+
+export function registerOAuthRoutes(app: Express) {
+  app.get("/api/oauth/callback", async (req: Request, res: Response) => {
+    const code = getQueryParam(req, "code");
+    const state = getQueryParam(req, "state");
+
+    if (!code || !state) {
+      res.status(400).json({ error: "code and state are required" });
+      return;
+    }
+
+    try {
+      const tokenResponse = await sdk.exchangeCodeForToken(code, state);
+      const userInfo = await sdk.getUserInfo(tokenResponse.accessToken);
+
+      if (!userInfo.openId) {
+        res.status(400).json({ error: "openId missing from user info" });
+        return;
+      }
+
+      await db.upsertUser({
+        openId: userInfo.openId,
+        name: userInfo.name || null,
+        email: userInfo.email ?? null,
+        loginMethod: userInfo.loginMethod ?? userInfo.platform ?? null,
+        lastSignedIn: new Date(),
+      });
+
+      const sessionToken = await sdk.createSessionToken(userInfo.openId, {
+        name: userInfo.name || "",
+        expiresInMs: ONE_YEAR_MS,
+      });
+
+      const cookieOptions = getSessionCookieOptions(req);
+      res.cookie(COOKIE_NAME, sessionToken, { ...cookieOptions, maxAge: ONE_YEAR_MS });
+
+      res.redirect(302, "/");
+    } catch (error) {
+      console.error("[OAuth] Callback failed", error);
+      res.status(500).json({ error: "OAuth callback failed" });
+    }
+  });
+}

server/_core/sdk.ts

@@ -0,0 +1,304 @@
+import { AXIOS_TIMEOUT_MS, COOKIE_NAME, ONE_YEAR_MS } from "@shared/const";
+import { ForbiddenError } from "@shared/_core/errors";
+import axios, { type AxiosInstance } from "axios";
+import { parse as parseCookieHeader } from "cookie";
+import type { Request } from "express";
+import { SignJWT, jwtVerify } from "jose";
+import type { User } from "../../drizzle/schema";
+import * as db from "../db";
+import { ENV } from "./env";
+import type {
+  ExchangeTokenRequest,
+  ExchangeTokenResponse,
+  GetUserInfoResponse,
+  GetUserInfoWithJwtRequest,
+  GetUserInfoWithJwtResponse,
+} from "./types/manusTypes";
+// Utility function
+const isNonEmptyString = (value: unknown): value is string =>
+  typeof value === "string" && value.length > 0;
+
+export type SessionPayload = {
+  openId: string;
+  appId: string;
+  name: string;
+};
+
+const EXCHANGE_TOKEN_PATH = `/webdev.v1.WebDevAuthPublicService/ExchangeToken`;
+const GET_USER_INFO_PATH = `/webdev.v1.WebDevAuthPublicService/GetUserInfo`;
+const GET_USER_INFO_WITH_JWT_PATH = `/webdev.v1.WebDevAuthPublicService/GetUserInfoWithJwt`;
+
+class OAuthService {
+  constructor(private client: ReturnType<typeof axios.create>) {
+    console.log("[OAuth] Initialized with baseURL:", ENV.oAuthServerUrl);
+    if (!ENV.oAuthServerUrl) {
+      console.error(
+        "[OAuth] ERROR: OAUTH_SERVER_URL is not configured! Set OAUTH_SERVER_URL environment variable."
+      );
+    }
+  }
+
+  private decodeState(state: string): string {
+    const redirectUri = atob(state);
+    return redirectUri;
+  }
+
+  async getTokenByCode(
+    code: string,
+    state: string
+  ): Promise<ExchangeTokenResponse> {
+    const payload: ExchangeTokenRequest = {
+      clientId: ENV.appId,
+      grantType: "authorization_code",
+      code,
+      redirectUri: this.decodeState(state),
+    };
+
+    const { data } = await this.client.post<ExchangeTokenResponse>(
+      EXCHANGE_TOKEN_PATH,
+      payload
+    );
+
+    return data;
+  }
+
+  async getUserInfoByToken(
+    token: ExchangeTokenResponse
+  ): Promise<GetUserInfoResponse> {
+    const { data } = await this.client.post<GetUserInfoResponse>(
+      GET_USER_INFO_PATH,
+      {
+        accessToken: token.accessToken,
+      }
+    );
+
+    return data;
+  }
+}
+
+const createOAuthHttpClient = (): AxiosInstance =>
+  axios.create({
+    baseURL: ENV.oAuthServerUrl,
+    timeout: AXIOS_TIMEOUT_MS,
+  });
+
+class SDKServer {
+  private readonly client: AxiosInstance;
+  private readonly oauthService: OAuthService;
+
+  constructor(client: AxiosInstance = createOAuthHttpClient()) {
+    this.client = client;
+    this.oauthService = new OAuthService(this.client);
+  }
+
+  private deriveLoginMethod(
+    platforms: unknown,
+    fallback: string | null | undefined
+  ): string | null {
+    if (fallback && fallback.length > 0) return fallback;
+    if (!Array.isArray(platforms) || platforms.length === 0) return null;
+    const set = new Set<string>(
+      platforms.filter((p): p is string => typeof p === "string")
+    );
+    if (set.has("REGISTERED_PLATFORM_EMAIL")) return "email";
+    if (set.has("REGISTERED_PLATFORM_GOOGLE")) return "google";
+    if (set.has("REGISTERED_PLATFORM_APPLE")) return "apple";
+    if (
+      set.has("REGISTERED_PLATFORM_MICROSOFT") ||
+      set.has("REGISTERED_PLATFORM_AZURE")
+    )
+      return "microsoft";
+    if (set.has("REGISTERED_PLATFORM_GITHUB")) return "github";
+    const first = Array.from(set)[0];
+    return first ? first.toLowerCase() : null;
+  }
+
+  /**
+   * Exchange OAuth authorization code for access token
+   * @example
+   * const tokenResponse = await sdk.exchangeCodeForToken(code, state);
+   */
+  async exchangeCodeForToken(
+    code: string,
+    state: string
+  ): Promise<ExchangeTokenResponse> {
+    return this.oauthService.getTokenByCode(code, state);
+  }
+
+  /**
+   * Get user information using access token
+   * @example
+   * const userInfo = await sdk.getUserInfo(tokenResponse.accessToken);
+   */
+  async getUserInfo(accessToken: string): Promise<GetUserInfoResponse> {
+    const data = await this.oauthService.getUserInfoByToken({
+      accessToken,
+    } as ExchangeTokenResponse);
+    const loginMethod = this.deriveLoginMethod(
+      (data as any)?.platforms,
+      (data as any)?.platform ?? data.platform ?? null
+    );
+    return {
+      ...(data as any),
+      platform: loginMethod,
+      loginMethod,
+    } as GetUserInfoResponse;
+  }
+
+  private parseCookies(cookieHeader: string | undefined) {
+    if (!cookieHeader) {
+      return new Map<string, string>();
+    }
+
+    const parsed = parseCookieHeader(cookieHeader);
+    return new Map(Object.entries(parsed));
+  }
+
+  private getSessionSecret() {
+    const secret = ENV.cookieSecret;
+    return new TextEncoder().encode(secret);
+  }
+
+  /**
+   * Create a session token for a Manus user openId
+   * @example
+   * const sessionToken = await sdk.createSessionToken(userInfo.openId);
+   */
+  async createSessionToken(
+    openId: string,
+    options: { expiresInMs?: number; name?: string } = {}
+  ): Promise<string> {
+    return this.signSession(
+      {
+        openId,
+        appId: ENV.appId,
+        name: options.name || "",
+      },
+      options
+    );
+  }
+
+  async signSession(
+    payload: SessionPayload,
+    options: { expiresInMs?: number } = {}
+  ): Promise<string> {
+    const issuedAt = Date.now();
+    const expiresInMs = options.expiresInMs ?? ONE_YEAR_MS;
+    const expirationSeconds = Math.floor((issuedAt + expiresInMs) / 1000);
+    const secretKey = this.getSessionSecret();
+
+    return new SignJWT({
+      openId: payload.openId,
+      appId: payload.appId,
+      name: payload.name,
+    })
+      .setProtectedHeader({ alg: "HS256", typ: "JWT" })
+      .setExpirationTime(expirationSeconds)
+      .sign(secretKey);
+  }
+
+  async verifySession(
+    cookieValue: string | undefined | null
+  ): Promise<{ openId: string; appId: string; name: string } | null> {
+    if (!cookieValue) {
+      console.warn("[Auth] Missing session cookie");
+      return null;
+    }
+
+    try {
+      const secretKey = this.getSessionSecret();
+      const { payload } = await jwtVerify(cookieValue, secretKey, {
+        algorithms: ["HS256"],
+      });
+      const { openId, appId, name } = payload as Record<string, unknown>;
+
+      if (
+        !isNonEmptyString(openId) ||
+        !isNonEmptyString(appId) ||
+        !isNonEmptyString(name)
+      ) {
+        console.warn("[Auth] Session payload missing required fields");
+        return null;
+      }
+
+      return {
+        openId,
+        appId,
+        name,
+      };
+    } catch (error) {
+      console.warn("[Auth] Session verification failed", String(error));
+      return null;
+    }
+  }
+
+  async getUserInfoWithJwt(
+    jwtToken: string
+  ): Promise<GetUserInfoWithJwtResponse> {
+    const payload: GetUserInfoWithJwtRequest = {
+      jwtToken,
+      projectId: ENV.appId,
+    };
+
+    const { data } = await this.client.post<GetUserInfoWithJwtResponse>(
+      GET_USER_INFO_WITH_JWT_PATH,
+      payload
+    );
+
+    const loginMethod = this.deriveLoginMethod(
+      (data as any)?.platforms,
+      (data as any)?.platform ?? data.platform ?? null
+    );
+    return {
+      ...(data as any),
+      platform: loginMethod,
+      loginMethod,
+    } as GetUserInfoWithJwtResponse;
+  }
+
+  async authenticateRequest(req: Request): Promise<User> {
+    // Regular authentication flow
+    const cookies = this.parseCookies(req.headers.cookie);
+    const sessionCookie = cookies.get(COOKIE_NAME);
+    const session = await this.verifySession(sessionCookie);
+
+    if (!session) {
+      throw ForbiddenError("Invalid session cookie");
+    }
+
+    const sessionUserId = session.openId;
+    const signedInAt = new Date();
+    let user = await db.getUserByOpenId(sessionUserId);
+
+    // If user not in DB, sync from OAuth server automatically
+    if (!user) {
+      try {
+        const userInfo = await this.getUserInfoWithJwt(sessionCookie ?? "");
+        await db.upsertUser({
+          openId: userInfo.openId,
+          name: userInfo.name || null,
+          email: userInfo.email ?? null,
+          loginMethod: userInfo.loginMethod ?? userInfo.platform ?? null,
+          lastSignedIn: signedInAt,
+        });
+        user = await db.getUserByOpenId(userInfo.openId);
+      } catch (error) {
+        console.error("[Auth] Failed to sync user from OAuth:", error);
+        throw ForbiddenError("Failed to sync user info");
+      }
+    }
+
+    if (!user) {
+      throw ForbiddenError("User not found");
+    }
+
+    await db.upsertUser({
+      openId: user.openId,
+      lastSignedIn: signedInAt,
+    });
+
+    return user;
+  }
+}
+
+export const sdk = new SDKServer();

server/_core/systemRouter.ts

@@ -0,0 +1,29 @@
+import { z } from "zod";
+import { notifyOwner } from "./notification";
+import { adminProcedure, publicProcedure, router } from "./trpc";
+
+export const systemRouter = router({
+  health: publicProcedure
+    .input(
+      z.object({
+        timestamp: z.number().min(0, "timestamp cannot be negative"),
+      })
+    )
+    .query(() => ({
+      ok: true,
+    })),
+
+  notifyOwner: adminProcedure
+    .input(
+      z.object({
+        title: z.string().min(1, "title is required"),
+        content: z.string().min(1, "content is required"),
+      })
+    )
+    .mutation(async ({ input }) => {
+      const delivered = await notifyOwner(input);
+      return {
+        success: delivered,
+      } as const;
+    }),
+});

server/_core/trpc.ts

@@ -0,0 +1,45 @@
+import { NOT_ADMIN_ERR_MSG, UNAUTHED_ERR_MSG } from '@shared/const';
+import { initTRPC, TRPCError } from "@trpc/server";
+import superjson from "superjson";
+import type { TrpcContext } from "./context";
+
+const t = initTRPC.context<TrpcContext>().create({
+  transformer: superjson,
+});
+
+export const router = t.router;
+export const publicProcedure = t.procedure;
+
+const requireUser = t.middleware(async opts => {
+  const { ctx, next } = opts;
+
+  if (!ctx.user) {
+    throw new TRPCError({ code: "UNAUTHORIZED", message: UNAUTHED_ERR_MSG });
+  }
+
+  return next({
+    ctx: {
+      ...ctx,
+      user: ctx.user,
+    },
+  });
+});
+
+export const protectedProcedure = t.procedure.use(requireUser);
+
+export const adminProcedure = t.procedure.use(
+  t.middleware(async opts => {
+    const { ctx, next } = opts;
+
+    if (!ctx.user || ctx.user.role !== 'admin') {
+      throw new TRPCError({ code: "FORBIDDEN", message: NOT_ADMIN_ERR_MSG });
+    }
+
+    return next({
+      ctx: {
+        ...ctx,
+        user: ctx.user,
+      },
+    });
+  }),
+);

server/_core/types/cookie.d.ts

@@ -0,0 +1,6 @@
+declare module "cookie" {
+  export function parse(
+    str: string,
+    options?: Record<string, unknown>
+  ): Record<string, string>;
+}

server/_core/types/manusTypes.ts

@@ -0,0 +1,69 @@
+// WebDev Auth TypeScript types
+// Auto-generated from protobuf definitions
+// Generated on: 2025-09-24T05:57:57.338Z
+
+export interface AuthorizeRequest {
+  redirectUri: string;
+  projectId: string;
+  state: string;
+  responseType: string;
+  scope: string;
+}
+
+export interface AuthorizeResponse {
+  redirectUrl: string;
+}
+
+export interface ExchangeTokenRequest {
+  grantType: string;
+  code: string;
+  refreshToken?: string;
+  clientId: string;
+  clientSecret?: string;
+  redirectUri: string;
+}
+
+export interface ExchangeTokenResponse {
+  accessToken: string;
+  tokenType: string;
+  expiresIn: number;
+  refreshToken?: string;
+  scope: string;
+  idToken: string;
+}
+
+export interface GetUserInfoRequest {
+  accessToken: string;
+}
+
+export interface GetUserInfoResponse {
+  openId: string;
+  projectId: string;
+  name: string;
+  email?: string | null;
+  platform?: string | null;
+  loginMethod?: string | null;
+}
+
+export interface CanAccessRequest {
+  openId: string;
+  projectId: string;
+}
+
+export interface CanAccessResponse {
+  canAccess: boolean;
+}
+
+export interface GetUserInfoWithJwtRequest {
+  jwtToken: string;
+  projectId: string;
+}
+
+export interface GetUserInfoWithJwtResponse {
+  openId: string;
+  projectId: string;
+  name: string;
+  email?: string | null;
+  platform?: string | null;
+  loginMethod?: string | null;
+}

server/_core/vite.ts

@@ -0,0 +1,67 @@
+import express, { type Express } from "express";
+import fs from "fs";
+import { type Server } from "http";
+import { nanoid } from "nanoid";
+import path from "path";
+import { createServer as createViteServer } from "vite";
+import viteConfig from "../../vite.config";
+
+export async function setupVite(app: Express, server: Server) {
+  const serverOptions = {
+    middlewareMode: true,
+    hmr: { server },
+    allowedHosts: true as const,
+  };
+
+  const vite = await createViteServer({
+    ...viteConfig,
+    configFile: false,
+    server: serverOptions,
+    appType: "custom",
+  });
+
+  app.use(vite.middlewares);
+  app.use("*", async (req, res, next) => {
+    const url = req.originalUrl;
+
+    try {
+      const clientTemplate = path.resolve(
+        import.meta.dirname,
+        "../..",
+        "client",
+        "index.html"
+      );
+
+      // always reload the index.html file from disk incase it changes
+      let template = await fs.promises.readFile(clientTemplate, "utf-8");
+      template = template.replace(
+        `src="/src/main.tsx"`,
+        `src="/src/main.tsx?v=${nanoid()}"`
+      );
+      const page = await vite.transformIndexHtml(url, template);
+      res.status(200).set({ "Content-Type": "text/html" }).end(page);
+    } catch (e) {
+      vite.ssrFixStacktrace(e as Error);
+      next(e);
+    }
+  });
+}
+
+export function serveStatic(app: Express) {
+  const distPath =
+    process.env.NODE_ENV === "development"
+      ? path.resolve(import.meta.dirname, "../..", "dist", "public")
+      : path.resolve(import.meta.dirname, "public");
+  if (!fs.existsSync(distPath)) {
+    console.error(
+      `Could not find the build directory: ${distPath}, make sure to build the client first`
+    );
+  }
+
+  app.use(express.static(distPath));
+
+  // fall through to index.html if the file doesn't exist
+  app.use("*", (_req, res) => {
+    res.sendFile(path.resolve(distPath, "index.html"));
+  });
+}

server/_core/voiceTranscription.ts

@@ -0,0 +1,284 @@
+/**
+ * Voice transcription helper using internal Speech-to-Text service
+ *
+ * Frontend implementation guide:
+ * 1. Capture audio using MediaRecorder API
+ * 2. Upload audio to storage (e.g., S3) to get URL
+ * 3. Call transcription with the URL
+ * 
+ * Example usage:
+ * ```tsx
+ * // Frontend component
+ * const transcribeMutation = trpc.voice.transcribe.useMutation({
+ *   onSuccess: (data) => {
+ *     console.log(data.text); // Full transcription
+ *     console.log(data.language); // Detected language
+ *     console.log(data.segments); // Timestamped segments
+ *   }
+ * });
+ * 
+ * // After uploading audio to storage
+ * transcribeMutation.mutate({
+ *   audioUrl: uploadedAudioUrl,
+ *   language: 'en', // optional
+ *   prompt: 'Transcribe the meeting' // optional
+ * });
+ * ```
+ */
+import { ENV } from "./env";
+
+export type TranscribeOptions = {
+  audioUrl: string; // URL to the audio file (e.g., S3 URL)
+  language?: string; // Optional: specify language code (e.g., "en", "es", "zh")
+  prompt?: string; // Optional: custom prompt for the transcription
+};
+
+// Native Whisper API segment format
+export type WhisperSegment = {
+  id: number;
+  seek: number;
+  start: number;
+  end: number;
+  text: string;
+  tokens: number[];
+  temperature: number;
+  avg_logprob: number;
+  compression_ratio: number;
+  no_speech_prob: number;
+};
+
+// Native Whisper API response format
+export type WhisperResponse = {
+  task: "transcribe";
+  language: string;
+  duration: number;
+  text: string;
+  segments: WhisperSegment[];
+};
+
+export type TranscriptionResponse = WhisperResponse; // Return native Whisper API response directly
+
+export type TranscriptionError = {
+  error: string;
+  code: "FILE_TOO_LARGE" | "INVALID_FORMAT" | "TRANSCRIPTION_FAILED" | "UPLOAD_FAILED" | "SERVICE_ERROR";
+  details?: string;
+};
+
+/**
+ * Transcribe audio to text using the internal Speech-to-Text service
+ * 
+ * @param options - Audio data and metadata
+ * @returns Transcription result or error
+ */
+export async function transcribeAudio(
+  options: TranscribeOptions
+): Promise<TranscriptionResponse | TranscriptionError> {
+  try {
+    // Step 1: Validate environment configuration
+    if (!ENV.forgeApiUrl) {
+      return {
+        error: "Voice transcription service is not configured",
+        code: "SERVICE_ERROR",
+        details: "BUILT_IN_FORGE_API_URL is not set"
+      };
+    }
+    if (!ENV.forgeApiKey) {
+      return {
+        error: "Voice transcription service authentication is missing",
+        code: "SERVICE_ERROR",
+        details: "BUILT_IN_FORGE_API_KEY is not set"
+      };
+    }
+
+    // Step 2: Download audio from URL
+    let audioBuffer: Buffer;
+    let mimeType: string;
+    try {
+      const response = await fetch(options.audioUrl);
+      if (!response.ok) {
+        return {
+          error: "Failed to download audio file",
+          code: "INVALID_FORMAT",
+          details: `HTTP ${response.status}: ${response.statusText}`
+        };
+      }
+      
+      audioBuffer = Buffer.from(await response.arrayBuffer());
+      mimeType = response.headers.get('content-type') || 'audio/mpeg';
+      
+      // Check file size (16MB limit)
+      const sizeMB = audioBuffer.length / (1024 * 1024);
+      if (sizeMB > 16) {
+        return {
+          error: "Audio file exceeds maximum size limit",
+          code: "FILE_TOO_LARGE",
+          details: `File size is ${sizeMB.toFixed(2)}MB, maximum allowed is 16MB`
+        };
+      }
+    } catch (error) {
+      return {
+        error: "Failed to fetch audio file",
+        code: "SERVICE_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error"
+      };
+    }
+
+    // Step 3: Create FormData for multipart upload to Whisper API
+    const formData = new FormData();
+    
+    // Create a Blob from the buffer and append to form
+    const filename = `audio.${getFileExtension(mimeType)}`;
+    const audioBlob = new Blob([new Uint8Array(audioBuffer)], { type: mimeType });
+    formData.append("file", audioBlob, filename);
+    
+    formData.append("model", "whisper-1");
+    formData.append("response_format", "verbose_json");
+    
+    // Add prompt - use custom prompt if provided, otherwise generate based on language
+    const prompt = options.prompt || (
+      options.language 
+        ? `Transcribe the user's voice to text, the user's working language is ${getLanguageName(options.language)}`
+        : "Transcribe the user's voice to text"
+    );
+    formData.append("prompt", prompt);
+
+    // Step 4: Call the transcription service
+    const baseUrl = ENV.forgeApiUrl.endsWith("/")
+      ? ENV.forgeApiUrl
+      : `${ENV.forgeApiUrl}/`;
+    
+    const fullUrl = new URL(
+      "v1/audio/transcriptions",
+      baseUrl
+    ).toString();
+
+    const response = await fetch(fullUrl, {
+      method: "POST",
+      headers: {
+        authorization: `Bearer ${ENV.forgeApiKey}`,
+        "Accept-Encoding": "identity",
+      },
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text().catch(() => "");
+      return {
+        error: "Transcription service request failed",
+        code: "TRANSCRIPTION_FAILED",
+        details: `${response.status} ${response.statusText}${errorText ? `: ${errorText}` : ""}`
+      };
+    }
+
+    // Step 5: Parse and return the transcription result
+    const whisperResponse = await response.json() as WhisperResponse;
+    
+    // Validate response structure
+    if (!whisperResponse.text || typeof whisperResponse.text !== 'string') {
+      return {
+        error: "Invalid transcription response",
+        code: "SERVICE_ERROR",
+        details: "Transcription service returned an invalid response format"
+      };
+    }
+
+    return whisperResponse; // Return native Whisper API response directly
+
+  } catch (error) {
+    // Handle unexpected errors
+    return {
+      error: "Voice transcription failed",
+      code: "SERVICE_ERROR",
+      details: error instanceof Error ? error.message : "An unexpected error occurred"
+    };
+  }
+}
+
+/**
+ * Helper function to get file extension from MIME type
+ */
+function getFileExtension(mimeType: string): string {
+  const mimeToExt: Record<string, string> = {
+    'audio/webm': 'webm',
+    'audio/mp3': 'mp3',
+    'audio/mpeg': 'mp3',
+    'audio/wav': 'wav',
+    'audio/wave': 'wav',
+    'audio/ogg': 'ogg',
+    'audio/m4a': 'm4a',
+    'audio/mp4': 'm4a',
+  };
+  
+  return mimeToExt[mimeType] || 'audio';
+}
+
+/**
+ * Helper function to get full language name from ISO code
+ */
+function getLanguageName(langCode: string): string {
+  const langMap: Record<string, string> = {
+    'en': 'English',
+    'es': 'Spanish',
+    'fr': 'French',
+    'de': 'German',
+    'it': 'Italian',
+    'pt': 'Portuguese',
+    'ru': 'Russian',
+    'ja': 'Japanese',
+    'ko': 'Korean',
+    'zh': 'Chinese',
+    'ar': 'Arabic',
+    'hi': 'Hindi',
+    'nl': 'Dutch',
+    'pl': 'Polish',
+    'tr': 'Turkish',
+    'sv': 'Swedish',
+    'da': 'Danish',
+    'no': 'Norwegian',
+    'fi': 'Finnish',
+  };
+  
+  return langMap[langCode] || langCode;
+}
+
+/**
+ * Example tRPC procedure implementation:
+ * 
+ * ```ts
+ * // In server/routers.ts
+ * import { transcribeAudio } from "./_core/voiceTranscription";
+ * 
+ * export const voiceRouter = router({
+ *   transcribe: protectedProcedure
+ *     .input(z.object({
+ *       audioUrl: z.string(),
+ *       language: z.string().optional(),
+ *       prompt: z.string().optional(),
+ *     }))
+ *     .mutation(async ({ input, ctx }) => {
+ *       const result = await transcribeAudio(input);
+ *       
+ *       // Check if it's an error
+ *       if ('error' in result) {
+ *         throw new TRPCError({
+ *           code: 'BAD_REQUEST',
+ *           message: result.error,
+ *           cause: result,
+ *         });
+ *       }
+ *       
+ *       // Optionally save transcription to database
+ *       await db.insert(transcriptions).values({
+ *         userId: ctx.user.id,
+ *         text: result.text,
+ *         duration: result.duration,
+ *         language: result.language,
+ *         audioUrl: input.audioUrl,
+ *         createdAt: new Date(),
+ *       });
+ *       
+ *       return result;
+ *     }),
+ * });
+ * ```
+ */

server/auth.logout.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import { appRouter } from "./routers";
+import { COOKIE_NAME } from "../shared/const";
+import type { TrpcContext } from "./_core/context";
+
+type CookieCall = {
+  name: string;
+  options: Record<string, unknown>;
+};
+
+type AuthenticatedUser = NonNullable<TrpcContext["user"]>;
+
+function createAuthContext(): { ctx: TrpcContext; clearedCookies: CookieCall[] } {
+  const clearedCookies: CookieCall[] = [];
+
+  const user: AuthenticatedUser = {
+    id: 1,
+    openId: "sample-user",
+    email: "sample@example.com",
+    name: "Sample User",
+    loginMethod: "manus",
+    role: "user",
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    lastSignedIn: new Date(),
+  };
+
+  const ctx: TrpcContext = {
+    user,
+    req: {
+      protocol: "https",
+      headers: {},
+    } as TrpcContext["req"],
+    res: {
+      clearCookie: (name: string, options: Record<string, unknown>) => {
+        clearedCookies.push({ name, options });
+      },
+    } as TrpcContext["res"],
+  };
+
+  return { ctx, clearedCookies };
+}
+
+describe("auth.logout", () => {
+  it("clears the session cookie and reports success", async () => {
+    const { ctx, clearedCookies } = createAuthContext();
+    const caller = appRouter.createCaller(ctx);
+
+    const result = await caller.auth.logout();
+
+    expect(result).toEqual({ success: true });
+    expect(clearedCookies).toHaveLength(1);
+    expect(clearedCookies[0]?.name).toBe(COOKIE_NAME);
+    expect(clearedCookies[0]?.options).toMatchObject({
+      maxAge: -1,
+      secure: true,
+      sameSite: "none",
+      httpOnly: true,
+      path: "/",
+    });
+  });
+});

server/db.ts

@@ -0,0 +1,92 @@
+import { eq } from "drizzle-orm";
+import { drizzle } from "drizzle-orm/mysql2";
+import { InsertUser, users } from "../drizzle/schema";
+import { ENV } from './_core/env';
+
+let _db: ReturnType<typeof drizzle> | null = null;
+
+// Lazily create the drizzle instance so local tooling can run without a DB.
+export async function getDb() {
+  if (!_db && process.env.DATABASE_URL) {
+    try {
+      _db = drizzle(process.env.DATABASE_URL, { casing: "camelCase" });
+    } catch (error) {
+      console.warn("[Database] Failed to connect:", error);
+      _db = null;
+    }
+  }
+  return _db;
+}
+
+export async function upsertUser(user: InsertUser): Promise<void> {
+  if (!user.openId) {
+    throw new Error("User openId is required for upsert");
+  }
+
+  const db = await getDb();
+  if (!db) {
+    console.warn("[Database] Cannot upsert user: database not available");
+    return;
+  }
+
+  try {
+    const values: InsertUser = {
+      openId: user.openId,
+    };
+    const updateSet: Record<string, unknown> = {};
+
+    const textFields = ["name", "email", "loginMethod"] as const;
+    type TextField = (typeof textFields)[number];
+
+    const assignNullable = (field: TextField) => {
+      const value = user[field];
+      if (value === undefined) return;
+      const normalized = value ?? null;
+      values[field] = normalized;
+      updateSet[field] = normalized;
+    };
+
+    textFields.forEach(assignNullable);
+
+    if (user.lastSignedIn !== undefined) {
+      values.lastSignedIn = user.lastSignedIn;
+      updateSet.lastSignedIn = user.lastSignedIn;
+    }
+    if (user.role !== undefined) {
+      values.role = user.role;
+      updateSet.role = user.role;
+    } else if (user.openId === ENV.ownerOpenId) {
+      values.role = 'admin';
+      updateSet.role = 'admin';
+    }
+
+    if (!values.lastSignedIn) {
+      values.lastSignedIn = new Date();
+    }
+
+    if (Object.keys(updateSet).length === 0) {
+      updateSet.lastSignedIn = new Date();
+    }
+
+    await db.insert(users).values(values).onDuplicateKeyUpdate({
+      set: updateSet,
+    });
+  } catch (error) {
+    console.error("[Database] Failed to upsert user:", error);
+    throw error;
+  }
+}
+
+export async function getUserByOpenId(openId: string) {
+  const db = await getDb();
+  if (!db) {
+    console.warn("[Database] Cannot get user: database not available");
+    return undefined;
+  }
+
+  const result = await db.select().from(users).where(eq(users.openId, openId)).limit(1);
+
+  return result.length > 0 ? result[0] : undefined;
+}
+
+// TODO: add feature queries here as your schema grows.

server/onchain.ts

@@ -0,0 +1,252 @@
+/**
+ * On-chain data service
+ * Reads presale stats from BSC and ETH contracts using ethers.js
+ * Caches results in DB to avoid rate limiting
+ */
+import { ethers } from "ethers";
+import { eq } from "drizzle-orm";
+import { getDb } from "./db";
+import { presaleStatsCache } from "../drizzle/schema";
+
+// ─── Contract Addresses ────────────────────────────────────────────────────────
+export const CONTRACTS = {
+  BSC: {
+    presale: "0xc65e7a2738ed884db8d26a6eb2fecf7daca2e90c",
+    token: "0x59ff34dd59680a7125782b1f6df2a86ed46f5a24",
+    rpc: "https://bsc-dataseed1.binance.org/",
+    chainId: 56,
+    chainName: "BNB Smart Chain",
+    explorerUrl: "https://bscscan.com",
+    usdt: "0x55d398326f99059fF775485246999027B3197955",
+  },
+  ETH: {
+    presale: "0x85AB2F2d9f7ca7ecB272b5E8726c70f3fd45D1E3",
+    token: "0x59ff34dd59680a7125782b1f6df2a86ed46f5a24",
+    rpc: "https://eth.llamarpc.com",
+    chainId: 1,
+    chainName: "Ethereum",
+    explorerUrl: "https://etherscan.io",
+    usdt: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
+  },
+  TRON: {
+    receivingWallet: "TWc2ugYBFN5aSoimAh4qGt9oMyket6NYZp",
+    evmReceivingWallet: "0x43DAb577f3279e11D311E7d628C6201d893A9Aa3",
+    usdtContract: "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t",
+  },
+};
+
+// Minimal ABI for reading presale stats
+const PRESALE_ABI = [
+  "function totalUSDTRaised() view returns (uint256)",
+  "function totalTokensSold() view returns (uint256)",
+  "function weiRaised() view returns (uint256)",
+  "function tokensSold() view returns (uint256)",
+  "function usdtRaised() view returns (uint256)",
+];
+
+// Token price: $0.02 per XIC
+export const TOKEN_PRICE_USDT = 0.02;
+export const HARD_CAP_USDT = 5_000_000;
+export const TOTAL_SUPPLY = 100_000_000_000;
+export const MAX_PURCHASE_USDT = 50_000;
+
+export interface PresaleStats {
+  chain: string;
+  usdtRaised: number;
+  tokensSold: number;
+  lastUpdated: Date;
+  fromCache: boolean;
+}
+
+export interface CombinedStats {
+  totalUsdtRaised: number;
+  totalTokensSold: number;
+  hardCap: number;
+  progressPct: number;
+  bsc: PresaleStats | null;
+  eth: PresaleStats | null;
+  trc20UsdtRaised: number;
+  trc20TokensSold: number;
+  lastUpdated: Date;
+}
+
+// Cache TTL: 60 seconds
+const CACHE_TTL_MS = 60_000;
+
+async function fetchChainStats(chain: "BSC" | "ETH"): Promise<{ usdtRaised: number; tokensSold: number }> {
+  const cfg = CONTRACTS[chain];
+  const provider = new ethers.JsonRpcProvider(cfg.rpc);
+  const contract = new ethers.Contract(cfg.presale, PRESALE_ABI, provider);
+
+  let usdtRaised = 0;
+  let tokensSold = 0;
+
+  // Try different function names that might exist in the contract
+  try {
+    const raw = await contract.totalUSDTRaised();
+    usdtRaised = Number(ethers.formatUnits(raw, 6)); // USDT has 6 decimals
+  } catch {
+    try {
+      const raw = await contract.usdtRaised();
+      usdtRaised = Number(ethers.formatUnits(raw, 6));
+    } catch {
+      try {
+        const raw = await contract.weiRaised();
+        usdtRaised = Number(ethers.formatUnits(raw, 6));
+      } catch {
+        console.warn(`[OnChain] Could not read usdtRaised from ${chain}`);
+      }
+    }
+  }
+
+  try {
+    const raw = await contract.totalTokensSold();
+    tokensSold = Number(ethers.formatUnits(raw, 18)); // XIC has 18 decimals
+  } catch {
+    try {
+      const raw = await contract.tokensSold();
+      tokensSold = Number(ethers.formatUnits(raw, 18));
+    } catch {
+      console.warn(`[OnChain] Could not read tokensSold from ${chain}`);
+    }
+  }
+
+  return { usdtRaised, tokensSold };
+}
+
+export async function getPresaleStats(chain: "BSC" | "ETH"): Promise<PresaleStats> {
+  const db = await getDb();
+
+  // Check cache first
+  if (db) {
+    try {
+      const cached = await db
+        .select()
+        .from(presaleStatsCache)
+        .where(eq(presaleStatsCache.chain, chain))
+        .limit(1);
+
+      if (cached.length > 0) {
+        const row = cached[0];
+        const age = Date.now() - new Date(row.lastUpdated).getTime();
+        if (age < CACHE_TTL_MS) {
+          return {
+            chain,
+            usdtRaised: Number(row.usdtRaised || 0),
+            tokensSold: Number(row.tokensSold || 0),
+            lastUpdated: new Date(row.lastUpdated),
+            fromCache: true,
+          };
+        }
+      }
+    } catch (e) {
+      console.warn("[OnChain] Cache read error:", e);
+    }
+  }
+
+  // Fetch fresh from chain
+  let usdtRaised = 0;
+  let tokensSold = 0;
+  try {
+    const data = await fetchChainStats(chain);
+    usdtRaised = data.usdtRaised;
+    tokensSold = data.tokensSold;
+  } catch (e) {
+    console.error(`[OnChain] Failed to fetch ${chain} stats:`, e);
+  }
+
+  // Update cache
+  if (db) {
+    try {
+      const existing = await db
+        .select()
+        .from(presaleStatsCache)
+        .where(eq(presaleStatsCache.chain, chain))
+        .limit(1);
+
+      if (existing.length > 0) {
+        await db
+          .update(presaleStatsCache)
+          .set({
+            usdtRaised: String(usdtRaised),
+            tokensSold: String(tokensSold),
+            lastUpdated: new Date(),
+          })
+          .where(eq(presaleStatsCache.chain, chain));
+      } else {
+        await db.insert(presaleStatsCache).values({
+          chain,
+          usdtRaised: String(usdtRaised),
+          tokensSold: String(tokensSold),
+          lastUpdated: new Date(),
+        });
+      }
+    } catch (e) {
+      console.warn("[OnChain] Cache write error:", e);
+    }
+  }
+
+  return {
+    chain,
+    usdtRaised,
+    tokensSold,
+    lastUpdated: new Date(),
+    fromCache: false,
+  };
+}
+
+export async function getCombinedStats(): Promise<CombinedStats> {
+  const [bsc, eth] = await Promise.allSettled([
+    getPresaleStats("BSC"),
+    getPresaleStats("ETH"),
+  ]);
+
+  const bscStats = bsc.status === "fulfilled" ? bsc.value : null;
+  const ethStats = eth.status === "fulfilled" ? eth.value : null;
+
+  // Get TRC20 stats from DB
+  let trc20UsdtRaised = 0;
+  let trc20TokensSold = 0;
+  try {
+    const db = await getDb();
+    if (db) {
+      const { trc20Purchases } = await import("../drizzle/schema");
+      const { sql, inArray } = await import("drizzle-orm");
+      const result = await db
+        .select({
+          totalUsdt: sql<string>`SUM(CAST(${trc20Purchases.usdtAmount} AS DECIMAL(30,6)))`,
+          totalXic: sql<string>`SUM(CAST(${trc20Purchases.xicAmount} AS DECIMAL(30,6)))`,
+        })
+        .from(trc20Purchases)
+        .where(inArray(trc20Purchases.status, ["confirmed", "distributed"]));
+      if (result[0]) {
+        trc20UsdtRaised = Number(result[0].totalUsdt || 0);
+        trc20TokensSold = Number(result[0].totalXic || 0);
+      }
+    }
+  } catch (e) {
+    console.warn("[OnChain] TRC20 stats error:", e);
+  }
+
+  const totalUsdtRaised =
+    (bscStats?.usdtRaised || 0) +
+    (ethStats?.usdtRaised || 0) +
+    trc20UsdtRaised;
+
+  const totalTokensSold =
+    (bscStats?.tokensSold || 0) +
+    (ethStats?.tokensSold || 0) +
+    trc20TokensSold;
+
+  return {
+    totalUsdtRaised,
+    totalTokensSold,
+    hardCap: HARD_CAP_USDT,
+    progressPct: Math.min((totalUsdtRaised / HARD_CAP_USDT) * 100, 100),
+    bsc: bscStats,
+    eth: ethStats,
+    trc20UsdtRaised,
+    trc20TokensSold,
+    lastUpdated: new Date(),
+  };
+}

server/operator.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { ethers } from "ethers";
+
+describe("OPERATOR_PRIVATE_KEY validation", () => {
+  it("should be a valid 32-byte hex private key", () => {
+    const key = process.env.OPERATOR_PRIVATE_KEY;
+    expect(key).toBeDefined();
+    expect(key).toMatch(/^[0-9a-fA-F]{64}$/);
+  });
+
+  it("should derive a valid EVM address from the private key", () => {
+    const key = process.env.OPERATOR_PRIVATE_KEY!;
+    const wallet = new ethers.Wallet(key);
+    expect(wallet.address).toMatch(/^0x[0-9a-fA-F]{40}$/);
+    console.log("[Test] Operator wallet address:", wallet.address);
+  });
+});

server/presale.test.ts

@@ -0,0 +1,85 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { CONTRACTS, TOKEN_PRICE_USDT, HARD_CAP_USDT, MAX_PURCHASE_USDT } from "./onchain";
+
+describe("Presale Configuration", () => {
+  it("should have correct BSC presale contract address", () => {
+    expect(CONTRACTS.BSC.presale).toBe("0xc65e7a2738ed884db8d26a6eb2fecf7daca2e90c");
+  });
+
+  it("should have correct ETH presale contract address", () => {
+    expect(CONTRACTS.ETH.presale).toBe("0x85AB2F2d9f7ca7ecB272b5E8726c70f3fd45D1E3");
+  });
+
+  it("should have correct XIC token contract address", () => {
+    expect(CONTRACTS.BSC.token).toBe("0x59ff34dd59680a7125782b1f6df2a86ed46f5a24");
+  });
+
+  it("should have correct TRON receiving address", () => {
+    expect(CONTRACTS.TRON.receivingWallet).toBe("TWc2ugYBFN5aSoimAh4qGt9oMyket6NYZp");
+  });
+
+  it("should have correct TRON EVM receiving address", () => {
+    expect(CONTRACTS.TRON.evmReceivingWallet).toBe("0x43DAb577f3279e11D311E7d628C6201d893A9Aa3");
+  });
+
+  it("should have correct token price", () => {
+    expect(TOKEN_PRICE_USDT).toBe(0.02);
+  });
+
+  it("should have correct hard cap", () => {
+    expect(HARD_CAP_USDT).toBe(5_000_000);
+  });
+
+  it("should have correct max purchase limit", () => {
+    expect(MAX_PURCHASE_USDT).toBe(50_000);
+  });
+
+  it("should calculate XIC amount correctly from USDT", () => {
+    const usdtAmount = 100;
+    const expectedXic = usdtAmount / TOKEN_PRICE_USDT;
+    expect(expectedXic).toBe(5000);
+  });
+
+  it("should calculate XIC amount for large purchase", () => {
+    const usdtAmount = 50000;
+    const expectedXic = usdtAmount / TOKEN_PRICE_USDT;
+    expect(expectedXic).toBe(2_500_000);
+  });
+});
+
+describe("TRC20 Monitor Logic", () => {
+  it("should correctly calculate XIC from USDT amount (6 decimals)", () => {
+    // USDT on TRON has 6 decimals
+    const rawValue = "100000000"; // 100 USDT
+    const usdtAmount = Number(rawValue) / 1_000_000;
+    const xicAmount = usdtAmount / TOKEN_PRICE_USDT;
+    expect(usdtAmount).toBe(100);
+    expect(xicAmount).toBe(5000);
+  });
+
+  it("should skip dust transactions below 0.01 USDT", () => {
+    const rawValue = "5000"; // 0.005 USDT
+    const usdtAmount = Number(rawValue) / 1_000_000;
+    expect(usdtAmount).toBeLessThan(0.01);
+  });
+
+  it("should correctly parse large USDT amounts", () => {
+    const rawValue = "50000000000"; // 50,000 USDT
+    const usdtAmount = Number(rawValue) / 1_000_000;
+    expect(usdtAmount).toBe(50000);
+  });
+});
+
+describe("i18n translations", () => {
+  it("should have matching keys in EN and ZH", async () => {
+    const { translations } = await import("../client/src/lib/i18n");
+    const enKeys = Object.keys(translations.en).filter(k => k !== "faq");
+    const zhKeys = Object.keys(translations.zh).filter(k => k !== "faq");
+    expect(enKeys.sort()).toEqual(zhKeys.sort());
+  });
+
+  it("should have same number of FAQ items in EN and ZH", async () => {
+    const { translations } = await import("../client/src/lib/i18n");
+    expect(translations.en.faq.length).toBe(translations.zh.faq.length);
+  });
+});

server/routers.ts

@@ -0,0 +1,44 @@
+import { COOKIE_NAME } from "@shared/const";
+import { getSessionCookieOptions } from "./_core/cookies";
+import { systemRouter } from "./_core/systemRouter";
+import { publicProcedure, protectedProcedure, router } from "./_core/trpc";
+import { getCombinedStats, getPresaleStats } from "./onchain";
+import { getRecentPurchases } from "./trc20Monitor";
+import { z } from "zod";
+
+export const appRouter = router({
+  system: systemRouter,
+  auth: router({
+    me: publicProcedure.query(opts => opts.ctx.user),
+    logout: publicProcedure.mutation(({ ctx }) => {
+      const cookieOptions = getSessionCookieOptions(ctx.req);
+      ctx.res.clearCookie(COOKIE_NAME, { ...cookieOptions, maxAge: -1 });
+      return { success: true } as const;
+    }),
+  }),
+
+  // ─── Presale Stats ────────────────────────────────────────────────────────
+  presale: router({
+    // Combined stats from BSC + ETH + TRC20
+    stats: publicProcedure.query(async () => {
+      return await getCombinedStats();
+    }),
+
+    // Single chain stats
+    chainStats: publicProcedure
+      .input(z.object({ chain: z.enum(["BSC", "ETH"]) }))
+      .query(async ({ input }) => {
+        return await getPresaleStats(input.chain);
+      }),
+
+    // Recent purchases (TRC20 from DB + mock EVM for live feed)
+    recentPurchases: publicProcedure
+      .input(z.object({ limit: z.number().min(1).max(50).default(20) }))
+      .query(async ({ input }) => {
+        const trc20 = await getRecentPurchases(input.limit);
+        return trc20;
+      }),
+  }),
+});
+
+export type AppRouter = typeof appRouter;

server/storage.ts

@@ -0,0 +1,102 @@
+// Preconfigured storage helpers for Manus WebDev templates
+// Uses the Biz-provided storage proxy (Authorization: Bearer <token>)
+
+import { ENV } from './_core/env';
+
+type StorageConfig = { baseUrl: string; apiKey: string };
+
+function getStorageConfig(): StorageConfig {
+  const baseUrl = ENV.forgeApiUrl;
+  const apiKey = ENV.forgeApiKey;
+
+  if (!baseUrl || !apiKey) {
+    throw new Error(
+      "Storage proxy credentials missing: set BUILT_IN_FORGE_API_URL and BUILT_IN_FORGE_API_KEY"
+    );
+  }
+
+  return { baseUrl: baseUrl.replace(/\/+$/, ""), apiKey };
+}
+
+function buildUploadUrl(baseUrl: string, relKey: string): URL {
+  const url = new URL("v1/storage/upload", ensureTrailingSlash(baseUrl));
+  url.searchParams.set("path", normalizeKey(relKey));
+  return url;
+}
+
+async function buildDownloadUrl(
+  baseUrl: string,
+  relKey: string,
+  apiKey: string
+): Promise<string> {
+  const downloadApiUrl = new URL(
+    "v1/storage/downloadUrl",
+    ensureTrailingSlash(baseUrl)
+  );
+  downloadApiUrl.searchParams.set("path", normalizeKey(relKey));
+  const response = await fetch(downloadApiUrl, {
+    method: "GET",
+    headers: buildAuthHeaders(apiKey),
+  });
+  return (await response.json()).url;
+}
+
+function ensureTrailingSlash(value: string): string {
+  return value.endsWith("/") ? value : `${value}/`;
+}
+
+function normalizeKey(relKey: string): string {
+  return relKey.replace(/^\/+/, "");
+}
+
+function toFormData(
+  data: Buffer | Uint8Array | string,
+  contentType: string,
+  fileName: string
+): FormData {
+  const blob =
+    typeof data === "string"
+      ? new Blob([data], { type: contentType })
+      : new Blob([data as any], { type: contentType });
+  const form = new FormData();
+  form.append("file", blob, fileName || "file");
+  return form;
+}
+
+function buildAuthHeaders(apiKey: string): HeadersInit {
+  return { Authorization: `Bearer ${apiKey}` };
+}
+
+export async function storagePut(
+  relKey: string,
+  data: Buffer | Uint8Array | string,
+  contentType = "application/octet-stream"
+): Promise<{ key: string; url: string }> {
+  const { baseUrl, apiKey } = getStorageConfig();
+  const key = normalizeKey(relKey);
+  const uploadUrl = buildUploadUrl(baseUrl, key);
+  const formData = toFormData(data, contentType, key.split("/").pop() ?? key);
+  const response = await fetch(uploadUrl, {
+    method: "POST",
+    headers: buildAuthHeaders(apiKey),
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const message = await response.text().catch(() => response.statusText);
+    throw new Error(
+      `Storage upload failed (${response.status} ${response.statusText}): ${message}`
+    );
+  }
+  const url = (await response.json()).url;
+  return { key, url };
+}
+
+export async function storageGet(relKey: string): Promise<{ key: string; url: string; }> {
+  const { baseUrl, apiKey } = getStorageConfig();
+  const key = normalizeKey(relKey);
+  return {
+    key,
+    url: await buildDownloadUrl(baseUrl, key, apiKey),
+  };
+}

server/trc20Monitor.ts

@@ -0,0 +1,187 @@
+/**
+ * TRC20 USDT Monitor & Auto-Distribution Service
+ *
+ * Flow:
+ * 1. Poll TRON address for incoming USDT transactions every 30s
+ * 2. For each new confirmed tx, record in DB
+ * 3. Calculate XIC amount at $0.02/XIC
+ * 4. Distribute XIC from operator wallet to buyer's address (if EVM address provided)
+ *    OR mark as pending manual distribution
+ *
+ * Note: TRON users must provide their EVM (BSC/ETH) address in the memo field
+ * to receive automatic XIC distribution. Otherwise, admin will distribute manually.
+ */
+
+import { eq, and, sql } from "drizzle-orm";
+import { getDb } from "./db";
+import { trc20Purchases } from "../drizzle/schema";
+import { TOKEN_PRICE_USDT } from "./onchain";
+
+const TRON_RECEIVING_ADDRESS = "TWc2ugYBFN5aSoimAh4qGt9oMyket6NYZp";
+const TRON_USDT_CONTRACT = "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t";
+// Trongrid API endpoint (public, no key needed for basic queries)
+const TRONGRID_API = "https://api.trongrid.io";
+
+let isMonitoring = false;
+let monitorInterval: ReturnType<typeof setInterval> | null = null;
+
+interface TronTransaction {
+  transaction_id: string;
+  token_info?: { address: string; decimals: number };
+  from: string;
+  to: string;
+  value: string;
+  block_timestamp: number;
+  type: string;
+}
+
+async function fetchRecentTRC20Transfers(): Promise<TronTransaction[]> {
+  try {
+    const url = `${TRONGRID_API}/v1/accounts/${TRON_RECEIVING_ADDRESS}/transactions/trc20?limit=50&contract_address=${TRON_USDT_CONTRACT}&only_confirmed=true`;
+    const resp = await fetch(url, {
+      headers: { "Content-Type": "application/json" },
+      signal: AbortSignal.timeout(10000),
+    });
+    if (!resp.ok) {
+      console.warn(`[TRC20Monitor] API error: ${resp.status}`);
+      return [];
+    }
+    const data = await resp.json() as { data?: TronTransaction[]; success?: boolean };
+    if (!data.success || !Array.isArray(data.data)) return [];
+    // Only incoming transfers (to our address)
+    return data.data.filter((tx) => tx.to === TRON_RECEIVING_ADDRESS);
+  } catch (e) {
+    console.warn("[TRC20Monitor] Fetch error:", e);
+    return [];
+  }
+}
+
+async function processTransaction(tx: TronTransaction): Promise<void> {
+  const db = await getDb();
+  if (!db) return;
+
+  // Check if already processed
+  const existing = await db
+    .select()
+    .from(trc20Purchases)
+    .where(eq(trc20Purchases.txHash, tx.transaction_id))
+    .limit(1);
+
+  if (existing.length > 0) return; // Already recorded
+
+  // USDT has 6 decimals on TRON
+  const usdtAmount = Number(tx.value) / 1_000_000;
+  if (usdtAmount < 0.01) return; // Skip dust
+
+  const xicAmount = usdtAmount / TOKEN_PRICE_USDT;
+
+  console.log(
+    `[TRC20Monitor] New purchase: ${tx.from} → ${usdtAmount} USDT → ${xicAmount} XIC (tx: ${tx.transaction_id})`
+  );
+
+  // Record in DB
+  await db.insert(trc20Purchases).values({
+    txHash: tx.transaction_id,
+    fromAddress: tx.from,
+    usdtAmount: String(usdtAmount),
+    xicAmount: String(xicAmount),
+    blockNumber: tx.block_timestamp,
+    status: "confirmed",
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  });
+
+  // Attempt auto-distribution via BSC
+  await attemptAutoDistribute(tx.transaction_id, tx.from, xicAmount);
+}
+
+async function attemptAutoDistribute(
+  txHash: string,
+  fromTronAddress: string,
+  xicAmount: number
+): Promise<void> {
+  const db = await getDb();
+  if (!db) return;
+
+  const operatorPrivateKey = process.env.OPERATOR_PRIVATE_KEY;
+  const xicTokenAddress = "0x59ff34dd59680a7125782b1f6df2a86ed46f5a24";
+
+  if (!operatorPrivateKey) {
+    console.warn("[TRC20Monitor] No OPERATOR_PRIVATE_KEY set, skipping auto-distribute");
+    return;
+  }
+
+  // We need the buyer's EVM address. Since TRON addresses can't directly receive BSC tokens,
+  // we look for a mapping or use a conversion. For now, log and mark as pending.
+  // In production, buyers should provide their EVM address in the payment memo.
+  console.log(
+    `[TRC20Monitor] Distribution pending for ${fromTronAddress}: ${xicAmount} XIC`
+  );
+  console.log(
+    `[TRC20Monitor] Admin must manually distribute to buyer's EVM address`
+  );
+
+  // Mark as pending distribution (admin will handle via admin panel)
+  // Status stays "confirmed" until admin distributes
+}
+
+export async function startTRC20Monitor(): Promise<void> {
+  if (isMonitoring) return;
+  isMonitoring = true;
+
+  console.log("[TRC20Monitor] Starting monitor for", TRON_RECEIVING_ADDRESS);
+
+  const poll = async () => {
+    try {
+      const txs = await fetchRecentTRC20Transfers();
+      for (const tx of txs) {
+        await processTransaction(tx);
+      }
+    } catch (e) {
+      console.error("[TRC20Monitor] Poll error:", e);
+    }
+  };
+
+  // Initial poll
+  await poll();
+
+  // Poll every 30 seconds
+  monitorInterval = setInterval(poll, 30_000);
+}
+
+export function stopTRC20Monitor(): void {
+  if (monitorInterval) {
+    clearInterval(monitorInterval);
+    monitorInterval = null;
+  }
+  isMonitoring = false;
+}
+
+export async function getRecentPurchases(limit = 20): Promise<Array<{
+  txHash: string;
+  fromAddress: string;
+  usdtAmount: number;
+  xicAmount: number;
+  status: string;
+  createdAt: Date;
+  chain: string;
+}>> {
+  const db = await getDb();
+  if (!db) return [];
+
+  const rows = await db
+    .select()
+    .from(trc20Purchases)
+    .orderBy(sql`${trc20Purchases.createdAt} DESC`)
+    .limit(limit);
+
+  return rows.map((r) => ({
+    txHash: r.txHash,
+    fromAddress: r.fromAddress,
+    usdtAmount: Number(r.usdtAmount),
+    xicAmount: Number(r.xicAmount),
+    status: r.status,
+    createdAt: r.createdAt,
+    chain: "TRON",
+  }));
+}

shared/_core/errors.ts

@@ -0,0 +1,19 @@
+/**
+ * Base HTTP error class with status code.
+ * Throw this from route handlers to send specific HTTP errors.
+ */
+export class HttpError extends Error {
+  constructor(
+    public statusCode: number,
+    message: string
+  ) {
+    super(message);
+    this.name = "HttpError";
+  }
+}
+
+// Convenience constructors
+export const BadRequestError = (msg: string) => new HttpError(400, msg);
+export const UnauthorizedError = (msg: string) => new HttpError(401, msg);
+export const ForbiddenError = (msg: string) => new HttpError(403, msg);
+export const NotFoundError = (msg: string) => new HttpError(404, msg);

shared/const.ts

@@ -1,2 +1,5 @@
 export const COOKIE_NAME = "app_session_id";
 export const ONE_YEAR_MS = 1000 * 60 * 60 * 24 * 365;
+export const AXIOS_TIMEOUT_MS = 30_000;
+export const UNAUTHED_ERR_MSG = 'Please login (10001)';
+export const NOT_ADMIN_ERR_MSG = 'You do not have required permission (10002)';

shared/types.ts

@@ -0,0 +1,7 @@
+/**
+ * Unified type exports
+ * Import shared types from this single entry point.
+ */
+
+export type * from "../drizzle/schema";
+export * from "./_core/errors";

vite.config.ts

@@ -163,13 +163,12 @@ export default defineConfig({
   },
   envDir: path.resolve(import.meta.dirname),
   root: path.resolve(import.meta.dirname, "client"),
+  publicDir: path.resolve(import.meta.dirname, "client", "public"),
   build: {
     outDir: path.resolve(import.meta.dirname, "dist/public"),
     emptyOutDir: true,
   },
   server: {
-    port: 3000,
-    strictPort: false, // Will find next available port if 3000 is busy
     host: true,
     allowedHosts: [
       ".manuspre.computer",

vitest.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "vitest/config";
+import path from "path";
+
+const templateRoot = path.resolve(import.meta.dirname);
+
+export default defineConfig({
+  root: templateRoot,
+  resolve: {
+    alias: {
+      "@": path.resolve(templateRoot, "client", "src"),
+      "@shared": path.resolve(templateRoot, "shared"),
+      "@assets": path.resolve(templateRoot, "attached_assets"),
+    },
+  },
+  test: {
+    environment: "node",
+    include: ["server/**/*.test.ts", "server/**/*.spec.ts"],
+  },
+});