add trading page

hooks/useDebouncedEffect.ts

@@ -0,0 +1,43 @@
+import {
+  type DependencyList,
+  type EffectCallback,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+  useLayoutEffect,
+} from "react";
+import { debounce, type DebounceSettings } from "lodash-es";
+
+type DebounceOptions = number | ({ wait: number } & Partial<DebounceSettings>);
+
+export function useDebouncedEffect(
+  effect: EffectCallback,
+  deps: React.DependencyList,
+  debounceOptions?: DebounceOptions,
+) {
+  useEffect(() => {
+    const options =
+      typeof debounceOptions === "number" ? { wait: debounceOptions } : debounceOptions;
+    const debouncedEffect = debounce(
+      () => {
+        const cleanupFn = effect();
+        if (cleanupFn) {
+          debouncedEffect.flush = cleanupFn as any;
+        }
+      },
+      options?.wait,
+      options,
+    );
+
+    debouncedEffect();
+
+    return () => {
+      debouncedEffect.cancel();
+      if (debouncedEffect.flush) {
+        debouncedEffect.flush();
+      }
+    };
+  }, [...deps]);
+}

hooks/useLocale.ts

@@ -0,0 +1,51 @@
+import { useRouter } from "next/router";
+import { useCallback, useMemo } from "react";
+import { useIntl } from "react-intl";
+import en from "../locales/en.json";
+import zh from "../locales/zh.json";
+import {
+  flattenMessages,
+  type INestedMessages,
+  type TranslationKey,
+} from "../locales/flattenMessages";
+
+export type Locale = "en" | "zh";
+
+const messages: Record<Locale, INestedMessages> = {
+  en,
+  zh,
+};
+
+export const useLocale = () => {
+  const router = useRouter();
+
+  const flattenedMessages = useMemo(
+    () => flattenMessages(messages[router.locale as keyof typeof messages]),
+    [router],
+  );
+
+  const switchLocale = useCallback(
+    (locale: Locale) => {
+      if (locale === router.locale) {
+        return;
+      }
+      const path = router.asPath;
+      return router.push(path, path, { locale });
+    },
+    [router],
+  );
+  return { locale: router.locale as Locale, switchLocale, messages: flattenedMessages };
+};
+
+export const useTranslate = () => {
+  const { formatMessage } = useIntl();
+  const t = useCallback(
+    (key: TranslationKey) =>
+      formatMessage({
+        id: key,
+      }),
+    [formatMessage],
+  );
+
+  return { t };
+};

locales/en.json

@@ -0,0 +1,198 @@
+{
+  "Market": {
+    "Market": "Market",
+    "24H_Top_Bots": "24H Top Trading Vaults",
+    "All_Bots": "All Trading Vaults",
+    "24H Profit": "24H Profit",
+    "Current Bot Position": "Current Position",
+    "24H Volume": "24H Volume",
+    "Users": "Maker Users",
+    "Total Profit": "Total Profit",
+    "Top APY": "Top APY",
+    "Grid Vault": "Grid Vault",
+    "Swing Vault": "Swing Vault",
+    "DCA Vault": "DCA Vault"
+  },
+  "Bots": {
+    "LowPrice": "Lower limit",
+    "HighPrice": "Upper limit",
+    "GridCount": "Number of Grids",
+    "Total_investment": "Initial investment",
+    "Available_balance": "Available balance",
+    "Validity_period": "Validity period",
+    "Days": "Days",
+    "Initial_investment": "Initial investment",
+    "Actual_investment": "Actual investment",
+    "Advanced_setting": "Advanced setting",
+    "Profit_grid_fee_deducted": "Profit/grid(fee deducted)",
+    "Stop_Loss": "Stop Loss",
+    "Close_bot_at": "Close at",
+    "Slippage": "Slippage",
+    "Trigger_price": "Trigger price",
+    "Bot_name": "Vault name",
+    "Pair": "Pair",
+    "Investment": "Investment",
+    "Profit": "Profit",
+    "Price range": "Price Range",
+    "24H Profit per grid": "24H Profit per grid",
+    "Grid amount": "Grid amount",
+    "Vault type": "Vault type",
+    "Created Time": "Created Time",
+    "Maximum drawdown": "Maximum drawdown",
+    "Volatility": "Volatility",
+    "Invalid price range": "Invalid price range",
+    "Initial position token allocate": "Initial position token allocate",
+    "Invest token": "Invest token",
+    "Vault": "Vault",
+    "Insufficient_balance": "Insufficient Balance",
+    "Arbitrage Profit": "Arbitrage Profit",
+    "Unclaimed": "Unclaimed",
+    "Claim": "Claim",
+    "Position profit": "Position Profit",
+    "Total profit": "Total Profit",
+    "Total arbitrage": "Total arbitrage",
+    "24h arbitrage": "24h arbitrage",
+    "Time to maturity": "Time to maturity",
+    "Detail": "Detail",
+    "Record": "Record",
+    "Running": "Running",
+    "Current profit": "Current profit",
+    "Claim history": "Claim history",
+    "Price": "Price",
+    "Change": "Change",
+    "search token /contract address": "search token /contract address",
+    "Positions": "Positions",
+    "Orders": "Orders",
+    "History": "History",
+    "Arbitrage(Profit/APY)": "Arbitrage (Profit/APY)",
+    "24H Arbitrage(Profit/APY)": "24H Arbitrage (Profit/APY)",
+    "Weekly Arbitrage(Profit/APY)": "Weekly Arbitrage (Profit/APY)",
+    "APY": "APY",
+    "minimun investment": "The initial investment cannot be less than ",
+    "Quantity Per Grid": "Investment Per Grid",
+    "Number of Grids": "Number of Grids",
+    "Duration": "Duration",
+    "End Time": "End Time",
+    "Position profit tip": "Initial investment - Current investment",
+    "Total profit tip": "Initial investment + Arbitrage Profit - Current investment",
+    "Arbitrage profit tip": "Arbitrage Profit is only calculated after completing one full cycle of buying low and selling high.",
+    "PriceRangeDesc": "All orders in GridVault will be evenly distributed within this price range.",
+    "GridCountDesc": "The number of grids within the Price Range. It determines the spread size between buying low and selling high.",
+    "QuantityPerGridDesc": "Each grid will have a order, and the initial investment for each order is the same. Total Investment = Investment Per Grid * Number of Grids.",
+    "VaultNameDesc": "Customizable, will be displayed as the Nickname for this Vault to all DeltaTrade users.",
+    "SlippageDesc": "Powered by Pyth, it prevents order prices from deviating significantly during Vault creation, avoiding losses due to large price fluctuations.",
+    "Classic Create": "Classic Create",
+    "Phased Create": "Phased Create",
+    "SetBuyPrice": "Set Buy Price",
+    "SetSellPrice": "Set Sell Price",
+    "Amount": "Amount",
+    "Set Grid": "Set Grid",
+    "Highest Buy Price": "Highest Buy Price",
+    "Lowest Sell Price": "Lowest Sell Price",
+    "Every Phased Amount": "Every Phased Amount",
+    "Interval Price": "Interval Price",
+    "SetBuyPriceDesc": "Set the price for buying at the dip",
+    "SetSellPriceDesc": "Set the price for selling at the peak",
+    "AmountDescBuy": "Set the amount for buying at the dip",
+    "AmountDescSell": "Set the amount for selling at the peak",
+    "SetSellPriceDesc2": "Set the price for automatically selling after a successful dip buy",
+    "SetBuyPriceDesc2": "Set the price for automatically buying after a successful peak sell",
+    "SetBuytGridsDesc": "Choose the number of price stages for executing dip buys",
+    "SetSellGridsDesc": "Choose the number of price stages for executing peak sells",
+    "SetHighestBuyPriceDesc": "Set the highest price for dip buys",
+    "SetLowestSellPriceDesc": "Set the lowest price for peak sells",
+    "BuyIntervalPriceDesc": "Set the price interval for multi-stage dip buys, which is also the price interval for automatically selling after a successful dip buy",
+    "SellIntervalPriceDesc": "Set the price interval for multi-stage peak sells, which is also the price interval for automatically buying after a successful peak sell",
+    "BuyEveryPhasedAmountDesc": "Set the amount for buying at each stage",
+    "SellEveryPhasedAmountDesc": "Set the amount for selling at each stage",
+    "Classic Create Buy Desc": "Set a dip buy order. After the dip buy order is filled, an automatic high sell order is placed at the set price. Once the high sell order is filled, another dip buy order is automatically placed. This cycle repeats, generating profit.",
+    "Phased Create Buy Desc": "Set multiple dip buy orders. When a dip buy order is filled, a high sell order is automatically placed at the preset price interval. Once the high sell order is filled, another dip buy order is automatically placed. This cycle repeats, generating profit.",
+    "Classic Create Sell Desc": "Set a high sell order. After the high sell order is filled, an automatic dip buy order is placed at the set price. Once the dip buy order is filled, another high sell order is automatically placed. This cycle repeats, generating profit.",
+    "Phased Create Sell Desc": "Set multiple high sell orders. When a high sell order is filled, a dip buy order is automatically placed at the preset price interval. Once the dip buy order is filled, another high sell order is automatically placed. This cycle repeats, generating profit.",
+    "All": "All",
+    "Main": "Main",
+    "Meme": "Meme",
+    "Other": "Other",
+    "Collection": "Collection",
+    "Amount per Order": "Amount per Order",
+    "Frequency": "Frequency",
+    "Execution times": "Execution Count",
+    "Enable Pricing Strategy": "Enable Pricing Strategy",
+    "EnablePricingStrategyDesc": "DCA will only be executed if the price falls within the range of your pricing strategy",
+    "Lowest Price": "Lowest Price",
+    "Highest Price": "Highest Price",
+    "Times": "Times",
+    "Side": "Side",
+    "Number of Orders": "Number of Orders",
+    "Limit Lowest Price": "Limit Lowest Price",
+    "Limit Highest Price": "Limit Highest Price",
+    "Total Amount": "Total Amount",
+    "Start Time": "Start Time"
+  },
+  "TrandingView": {
+    "Wait": "waiting"
+  },
+  "Dashboard": {
+    "Summary": "Summary",
+    "My_Bots": "My Trading Vaults",
+    "Current Investment": "Current Investment",
+    "Total Profit": "Current / Total Profit",
+    "Top APY": "Top APY",
+    "Total/30Days/24H Profit": "Total / 30 Days / 24H Profit"
+  },
+  "Common": {
+    "Required": "required",
+    "Copy": "Copy",
+    "Confirm": "Confirm",
+    "Create": "Create",
+    "Close": "Close",
+    "No Data": "No Data",
+    "Not Found": "Not Found",
+    "Successfully": "Successfully",
+    "Success": "Success"
+  },
+  "Routes": {
+    "Delta Trade": "Delta Trade",
+    "Market": "Market",
+    "Bots": "Trading Vault",
+    "Dashboard": "Dashboard",
+    "Docs": "Docs",
+    "Security DAO": "Security DAO",
+    "Leaderboard": "Leaderboard",
+    "Activity": "Campaign",
+    "Airdrop": "Delta Points",
+    "Gachapon": "Gachapon",
+    "Competition": "Competition",
+    "Setting": "Setting",
+    "Mining": "Mining"
+  },
+  "Reward": "Reward",
+  "Activity": "Activity",
+  "Reward Paid": "Reward Paid / Delta Points",
+  "Reward Ongoing": "Reward Ongoing / Delta Points",
+  "Users": "Maker Users",
+  "Daily APY": "Daily APY",
+  "Weekly APY": "Weekly APY",
+  "Weekly Profit": "Weekly Profit",
+  "Running times": "Running times",
+  "Summary": "Summary",
+  "Orders": "Orders",
+  "Start Time": "Start Time",
+  "End Time": "End Time",
+  "Time Scheduled": "Time Scheduled",
+  "Filled": "Filled",
+  "Received": "Received",
+  "Historical ROI": "Historical ROI",
+  "Status": "Status",
+  "24H Sell": "24H Sell",
+  "24H Buy": "24H Buy",
+  "7D Sell": "7D Sell",
+  "7D Buy": "7D Buy",
+  "30D Sell": "30D Sell",
+  "30D Buy": "30D Buy",
+  "Future trade data": "Future trade data",
+  "Count": "Count",
+  "Change Mode": "Change Mode",
+  "Change RPC NETWORK": "Change RPC NETWORK",
+  "Future Market": "Future Market"
+}

locales/flattenMessages.ts

@@ -0,0 +1,30 @@
+export interface INestedMessages {
+  [key: string]: string | INestedMessages;
+}
+export const flattenMessages = (
+  nestedMessages: INestedMessages,
+  prefix = "",
+): Record<string, string> => {
+  return Object.keys(nestedMessages).reduce((messages: Record<string, string>, key) => {
+    const value = nestedMessages[key];
+    const prefixedKey = prefix ? `${prefix}.${key}` : key;
+
+    if (typeof value === "string") {
+      messages[prefixedKey] = value;
+    } else {
+      Object.assign(messages, flattenMessages(value, prefixedKey));
+    }
+
+    return messages;
+  }, {});
+};
+
+type Leaves<T> = T extends object
+  ? {
+      [K in keyof T]: `${Exclude<K, symbol>}${Leaves<T[K]> extends never
+        ? ""
+        : `.${Leaves<T[K]>}`}`;
+    }[keyof T]
+  : never;
+
+export type TranslationKey = Leaves<typeof import("./en.json")>;