🐞 fix:

更换合约

.env.development

@@ -1 +1,19 @@
+###
+ # @LastEditors: John
+ # @Date: 2024-07-02 11:31:07
+ # @LastEditTime: 2024-07-10 15:25:12
+ # @Author: John
+### 
+###
+ # @LastEditors: John
+ # @Date: 2024-06-18 10:12:21
+ # @LastEditTime: 2024-07-02 16:46:51
+ # @Author: John
+### 
+VITE_BASE_URL=
 VITE_BASE_API_URL=/dev
+VITE_PARTICIPATE_CHAIN_ID=97
+VITE_PURCHASED_CONTRACT_ADDRESS=0xcA03e32ab7731cD721239A7AD24f3d185e4d63CD
+VITE_RECEIVE_RAMB_CONTRACT_ADDRESS=0x944fBF12c9b77BFfFA223CE1568F28820d319c2F
+VITE_NETWORK_USDT_ADDRESS=0x6d528B0a62f8cDdf4B3F6961D70F4f4a18a92A0D
+VITE_CHECK_TRANSACTION_DETAILS_URL=https://testnet.bscscan.com/

.env.production

@@ -0,0 +1,13 @@
+###
+ # @LastEditors: John
+ # @Date: 2024-07-02 11:31:07
+ # @LastEditTime: 2024-07-19 14:39:15
+ # @Author: John
+### 
+VITE_BASE_URL=/
+VITE_BASE_API_URL=
+VITE_PARTICIPATE_CHAIN_ID=56
+VITE_PURCHASED_CONTRACT_ADDRESS=0xb8D623B24b6A9B7044C078B80c90B292e5b2ee13
+VITE_RECEIVE_RAMB_CONTRACT_ADDRESS=0x40b07C2944390f11bc14acF89710Bd7228Aca9bE
+VITE_NETWORK_USDT_ADDRESS=0x55d398326f99059fF775485246999027B3197955
+VITE_CHECK_TRANSACTION_DETAILS_URL=https://bscscan.com/

.env.test

@@ -0,0 +1,13 @@
+###
+ # @LastEditors: John
+ # @Date: 2024-06-24 18:38:45
+ # @LastEditTime: 2024-07-18 18:43:53
+ # @Author: John
+### 
+VITE_BASE_URL=http://wwwtest.exgo.pro
+VITE_BASE_API_URL=http://wwwtest.exgo.pro
+VITE_PARTICIPATE_CHAIN_ID=97
+VITE_PURCHASED_CONTRACT_ADDRESS=0xdccBd0FbFd51dA16AEDc8b1985f3eFDA3F380944
+VITE_RECEIVE_RAMB_CONTRACT_ADDRESS=0x944fBF12c9b77BFfFA223CE1568F28820d319c2F
+VITE_NETWORK_USDT_ADDRESS=0x6d528B0a62f8cDdf4B3F6961D70F4f4a18a92A0D
+VITE_CHECK_TRANSACTION_DETAILS_URL=https://testnet.bscscan.com/

iconfont.json

@@ -1,8 +1,8 @@
 {
-    "symbol_url": "请参考README.md，复制官网提供的JS链接",
-    "use_typescript": false,
-    "save_dir": "./src/components/iconfont",
-    "trim_icon_prefix": "icon",
-    "unit": "px",
-    "default_icon_size": 18
+  "symbol_url": "//at.alicdn.com/t/c/font_4589567_u5yhe33hzt.js",
+  "use_typescript": true,
+  "save_dir": "./src/components/iconfont",
+  "trim_icon_prefix": "icon",
+  "unit": "px",
+  "default_icon_size": 18
 }

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "build:test": "tsc && vite build --mode test",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "iconfont": "npx iconfont-h5"
@@ -15,15 +16,21 @@
     "@hyper-fetch/react": "^5.7.5",
     "@tanstack/react-query": "^5.45.1",
     "@web3modal/wagmi": "^5.0.2",
+    "ahooks": "^3.8.0",
     "antd-mobile": "^5.36.1",
+    "clsx": "^2.1.1",
     "i18next": "^23.11.5",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
+    "react-data-table-component": "^7.6.2",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.2",
     "react-router-dom": "^6.23.1",
+    "tailwind-merge": "^2.3.0",
+    "vconsole": "^3.15.1",
     "viem": "^2.14.2",
     "wagmi": "^2.10.2",
+    "web3-utils": "^4.3.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
@@ -41,6 +48,7 @@
     "postcss": "^8.4.38",
     "postcss-pxtorem": "5.1.1",
     "react-iconfont-cli": "^2.0.2",
+    "styled-components": "^6.1.11",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-compression": "^0.5.1",

postcss.config.js

@@ -1,7 +1,7 @@
 /*
  * @LastEditors: John
  * @Date: 2024-06-17 18:25:10
- * @LastEditTime: 2024-06-17 18:45:37
+ * @LastEditTime: 2024-06-19 16:14:06
  * @Author: John
  */
 export default {
@@ -11,8 +11,8 @@ export default {
       rootValue: 37.5,
       propList: ["*"],
       exclude: (e) => {
-        if (/.module\.css$/.test(e)) {
-          console.log(e);
+        if (/.*-m\.css$/.test(e) || /.module\.css$/.test(e)) {
+          // console.log(e);
           return false;
         }
         return true;

src/App.css

@@ -1,4 +1,176 @@
-body {
+body,
+html,
+#root {
   width: 100%;
   height: 100%;
+  background: url("./assets/home_bg.png");
+}
+
+@font-face {
+  font-family: "DM Sans";
+  src: url("./assets/font/DMSans_18pt-Medium.ttf") format("truetype");
+}
+
+* {
+  -webkit-overflow-scrolling: touch;
+}
+
+html,
+body {
+  height: 100%;
+}
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+p,
+blockquote,
+pre,
+hr,
+figure,
+table,
+caption,
+th,
+td,
+form,
+fieldset,
+legend,
+input,
+button,
+textarea,
+menu {
+  margin: 0;
+  padding: 0;
+}
+header,
+footer,
+section,
+article,
+aside,
+nav,
+hgroup,
+address,
+figure,
+figcaption,
+menu,
+details {
+  display: block;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+caption,
+th {
+  text-align: left;
+  font-weight: normal;
+}
+html,
+body,
+fieldset,
+img,
+iframe,
+abbr {
+  border: 0;
+}
+i,
+cite,
+em,
+var,
+address,
+dfn {
+  font-style: normal;
+}
+[hidefocus],
+summary {
+  outline: 0;
+}
+li {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+small {
+  font-size: 100%;
+}
+sup,
+sub {
+  font-size: 83%;
+}
+pre,
+code,
+kbd,
+samp {
+  font-family: inherit;
+}
+q:before,
+q:after {
+  content: none;
+}
+textarea {
+  overflow: auto;
+  resize: none;
+}
+label,
+summary {
+  cursor: default;
+}
+a,
+button {
+  cursor: pointer;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+em,
+strong,
+b {
+  font-weight: bold;
+}
+del,
+ins,
+u,
+s,
+a,
+a:hover {
+  text-decoration: none;
+}
+body,
+textarea,
+input,
+button,
+select,
+keygen,
+legend {
+  font: 12px/1.14 Microsoft YaHei, arial, \5b8b\4f53;
+  color: #333;
+  outline: 0;
+}
+body {
+  background: #fff;
+}
+a,
+a:hover {
+  color: #333;
+}
+* {
+  box-sizing: border-box;
 }

src/App.tsx

@@ -1,18 +1,65 @@
 /*
  * @LastEditors: John
  * @Date: 2024-06-17 17:20:03
- * @LastEditTime: 2024-06-17 17:36:20
+ * @LastEditTime: 2024-06-21 14:19:52
  * @Author: John
  */
 import { Route, Routes } from "react-router-dom";
+import "./style/ant-cover-m.css";
+import "./style/react-data-table-component-cover-m.css";
 import "./App.css";
 import Home from "./pages/Home";
+import Header from "./components/Header";
+import Mint from "./pages/Mint";
+import RouterLogProvider from "./context/RouterContext";
+import LevelUp from "./pages/LevelUp";
+import AssetRecord from "./pages/AssetRecord";
+import AirDropRecord from "./pages/AirDropRecord";
+import InvitationList from "./pages/InvitationList";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import useUserStore from "./store/User";
+import { getUrlParameterByName } from "./utils";
+import { UrlQueryParamsKey } from "./constants";
+import { signAndLogin } from "./utils/wallet";
+import { useAccount } from "wagmi";
 function App() {
+  const { i18n } = useTranslation();
+  const { Lang: currantLang, UpdateInviteCode } = useUserStore();
+  const { address } = useAccount();
+  useEffect(() => {
+    i18n.changeLanguage(currantLang);
+    UpdateInviteCode(
+      getUrlParameterByName(UrlQueryParamsKey.INVITE_CODE) || ""
+    );
+    return () => {};
+  }, []);
+
+  useEffect(() => {
+    return () => {};
+  }, []);
+
+  useEffect(() => {
+    (async () => {
+      await signAndLogin(address);
+      console.log("login success!");
+    })();
+    return () => {};
+  }, [address]);
+
   return (
     <>
-      <Routes>
-        <Route path="/" element={<Home />} />
-      </Routes>
+      <RouterLogProvider>
+        <Header />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/mint" element={<Mint />} />
+          <Route path="/levelup" element={<LevelUp />} />
+          <Route path="/assetrecord" element={<AssetRecord />} />
+          <Route path="/airdroprecord" element={<AirDropRecord />} />
+          <Route path="/invitationlist" element={<InvitationList />}></Route>
+        </Routes>
+      </RouterLogProvider>
     </>
   );
 }

src/assets/usdt_bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30.000001907348633" height="30.000001907348633" viewBox="0 0 30.000001907348633 30.000001907348633"><defs><clipPath id="master_svg0_1_09873"><rect x="30.000001907348633" y="0" width="30.000001907348633" height="30.000001907348633" rx="0"/></clipPath></defs><g transform="matrix(-1,0,0,1,60.000003814697266,0)" clip-path="url(#master_svg0_1_09873)"><g><path d="M36.92991956359863,3L53.67049956359863,3C54.06999956359863,3,54.43899956359863,3.213685,54.63819956359863,3.5603540000000002L59.515399563598635,12.04788C59.76829956359863,12.48804,59.69319956359863,13.0436,59.33239956359863,13.4005L45.907699563598634,26.6825C45.472799563598635,27.1127,44.773299563598634,27.1127,44.338399563598635,26.6825L30.931852563598632,13.4185C30.562702363598632,13.0532,30.493576563598634,12.4815,30.765032563598634,12.03858L35.978399563598636,3.533123C36.18143956359863,3.201875,36.54173956359863,3,36.92991956359863,3ZM51.508999563598636,6.78939L51.508999563598636,9.17088L46.74029956359863,9.17088L46.74029956359863,10.82202C50.089499563598636,10.99848,52.602299563598635,11.72316,52.62099956359863,12.59178L52.620899563598634,14.4026C52.60219956359863,15.2713,50.089499563598636,15.9959,46.74029956359863,16.1724L46.74029956359863,20.2245L43.573799563598634,20.2245L43.573799563598634,16.1724C40.22451956359863,15.9959,37.711719563598635,15.2713,37.693119563598636,14.4026L37.69317956359863,12.59178C37.71183956359863,11.72316,40.22451956359863,10.99848,43.573799563598634,10.82202L43.573799563598634,9.17088L38.80503956359863,9.17088L38.80503956359863,6.78939L51.508999563598636,6.78939ZM45.157099563598635,14.9284C48.73129956359863,14.9284,51.71869956359863,14.3156,52.44979956359863,13.4972C51.829799563598634,12.80328,49.587299563598634,12.2571,46.74029956359863,12.1071L46.74029956359863,13.8359C46.22999956359863,13.8628,45.700299563598634,13.8769,45.157099563598635,13.8769C44.61379956359863,13.8769,44.084099563598635,13.8628,43.573799563598634,13.8359L43.573799563598634,12.1071C40.72679956359863,12.2571,38.484219563598636,12.80328,37.86423956359863,13.4972C38.595339563598635,14.3156,41.582799563598634,14.9284,45.157099563598635,14.9284Z" fill-rule="evenodd" fill="#D56819" fill-opacity="1"/></g></g></svg>

src/components/Header.module.css

@@ -0,0 +1,70 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-18 15:19:21
+ * @LastEditTime: 2024-06-18 18:49:40
+ * @Author: John
+ */
+.header {
+  background-color: #101010;
+  padding: 0 15px;
+  .header_top {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border-bottom: 0.25px solid #333333;
+    padding: 10px 0;
+
+    .header_logo {
+      width: 24px;
+      height: 24px;
+    }
+    .header_title {
+      /* 自动布局子元素 */
+      opacity: 1;
+
+      font-family: DM Sans;
+      font-size: 16px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0em;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      color: #ffffff;
+
+      z-index: 1;
+    }
+    .header_lang {
+      width: 24px;
+      height: 24px;
+      margin-left: auto;
+    }
+  }
+
+  .header_nav {
+    display: flex;
+    align-items: center;
+    padding: 10px 0;
+    span {
+      /* 自动布局子元素 */
+      opacity: 1;
+
+      font-family: DM Sans;
+      font-size: 14px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0em;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      color: #ffffff;
+
+      z-index: 1;
+    }
+
+    .header_nav_icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}

src/components/Header.tsx

@@ -0,0 +1,123 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-18 15:16:31
+ * @LastEditTime: 2024-06-26 14:49:22
+ * @Author: John
+ */
+import Picker, {
+  PickerColumn,
+  PickerValue,
+} from "antd-mobile/es/components/picker";
+import { useContext, useEffect, useMemo, useState } from "react";
+import IconFont from "./iconfont";
+import logo from "@/assets/logo.svg";
+import classes from "./Header.module.css";
+import { useLocation, useNavigate, useNavigation } from "react-router-dom";
+import { RouterLogContext } from "@/context/RouterContext";
+import { useTranslation } from "react-i18next";
+import { Lang } from "@/constants";
+import useUserStore from "@/store/User";
+import { Popover } from "antd-mobile";
+import { Action } from "antd-mobile/es/components/popover";
+
+const langColums: Action[] = [
+  { text: "English", key: Lang.en },
+  { text: "中文（简体）", key: Lang.cn },
+  { text: "中文（繁体）", key: Lang.tw },
+  { text: "日本語", key: Lang.jp },
+  { text: "DEUTSCH", key: Lang.de },
+];
+export default function () {
+  const { UpdateLang } = useUserStore();
+
+  const route = useContext(RouterLogContext);
+  const navigate = useNavigate();
+  const { t, i18n } = useTranslation();
+  const location = useLocation();
+
+  const navTitle = useMemo<string>(() => {
+    switch (location.pathname) {
+      case "/mint":
+        return t("铸造 NFT");
+      case "/levelup":
+        return t("级别提升");
+      case "/assetrecord":
+        return t("收益记录");
+      case "/airdroprecord":
+        return t("RMOB记录");
+      case "/invitationlist":
+        return t("直推列表");
+      default:
+        return t("返回");
+    }
+  }, [location]);
+
+  return (
+    <>
+      <div className={classes.header}>
+        <div className={classes.header_top}>
+          <img className={classes.header_logo} src={logo} alt="" />
+          <span className={classes.header_title}>{t("红魔股权NFT")}</span>
+          <Popover.Menu
+            mode="dark"
+            actions={langColums}
+            placement="bottom"
+            onAction={(node) => {
+              switch (node.key) {
+                case Lang.en:
+                  i18n.changeLanguage(Lang.en);
+                  UpdateLang(Lang.en);
+                  break;
+                case Lang.cn:
+                  i18n.changeLanguage(Lang.cn);
+                  UpdateLang(Lang.cn);
+                  break;
+                case Lang.tw:
+                  i18n.changeLanguage(Lang.tw);
+                  UpdateLang(Lang.tw);
+                  break;
+                case Lang.jp:
+                  i18n.changeLanguage(Lang.jp);
+                  UpdateLang(Lang.jp);
+                  break;
+                case Lang.de:
+                  i18n.changeLanguage(Lang.de);
+                  UpdateLang(Lang.de);
+                  break;
+                default:
+                  break;
+              }
+            }}
+            trigger="click"
+          >
+            <IconFont
+              className={classes.header_lang}
+              name="diqiu"
+              color={"#fff"}
+            />
+          </Popover.Menu>
+        </div>
+
+        {location.pathname != "/" && (
+          <div
+            className={classes.header_nav}
+            onClick={() => {
+              if (route.current == route.from) {
+                navigate("/");
+                return;
+              }
+              navigate(-1);
+            }}
+          >
+            <IconFont
+              className={classes.header_nav_icon}
+              name="icon_arrow_left"
+              color={"#fff"}
+            />
+            <span>{navTitle}</span>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

src/components/RecordsItem.module.css

@@ -0,0 +1,30 @@
+.recordsItem {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-bottom: 10px;
+  border-bottom: 0.25px solid #333333;
+  > li {
+    display: flex;
+    align-items: center;
+    span {
+      /* 自动布局子元素 */
+      opacity: 1;
+
+      font-family: DM Sans;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0em;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      color: #ffffff;
+
+      z-index: 0;
+      &:nth-of-type(2) {
+        margin-left: auto;
+      }
+    }
+  }
+}

src/components/RecordsItem.tsx

@@ -0,0 +1,25 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-19 10:49:42
+ * @LastEditTime: 2024-06-19 10:52:32
+ * @Author: John
+ */
+import classes from "./RecordsItem.module.css";
+export default function RecordsItem({
+  itemList,
+}: {
+  itemList: { title: string; value?: string; valueColor?: string }[];
+}) {
+  return (
+    <>
+      <ul className={classes.recordsItem}>
+        {itemList.map((v, i) => (
+          <li key={i}>
+            <span>{v.title}</span>
+            <span style={{ color: v.valueColor || "white" }}>{v.value}</span>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

src/components/WalletProvider.tsx

@@ -1,7 +1,7 @@
 /*
  * @LastEditors: John
  * @Date: 2024-06-17 18:01:43
- * @LastEditTime: 2024-06-17 18:16:57
+ * @LastEditTime: 2024-06-24 18:51:52
  * @Author: John
  */
 /*
@@ -39,9 +39,10 @@ const metadata = {
   icons: [`${import.meta.env.BASE_URL}/favicon.svg`],
 };
 
-let chains = import.meta.env.PROD
-  ? ([bsc] as const)
-  : ([bnbTestNetwork] as const);
+let chains =
+  import.meta.env.DEV || import.meta.env.MODE == "test"
+    ? ([bnbTestNetwork] as const)
+    : ([bsc] as const);
 
 export const config = defaultWagmiConfig({
   chains, // required

src/components/iconfont/IconChevronsrightshuangyoujiantou.tsx

@@ -0,0 +1,29 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
+import { getIconColor } from './helper';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  display: 'block',
+};
+
+const IconChevronsrightshuangyoujiantou: FunctionComponent<Props> = ({ size = 18, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
+      <path
+        d="M523.477333 691.925333l180.992-180.992-180.992-181.077333a42.666667 42.666667 0 1 1 60.330667-60.330667l211.2 211.2c6.4 6.4 10.325333 14.336 11.818667 22.613334l0.597333 5.034666v5.034667a42.496 42.496 0 0 1-12.416 27.648l-211.2 211.2a42.666667 42.666667 0 0 1-60.330667-60.330667z m-298.666666 0l180.992-180.992L224.810667 329.813333a42.666667 42.666667 0 1 1 60.330666-60.330666l211.2 211.2c6.4 6.4 10.325333 14.336 11.818667 22.613333l0.597333 5.034667v5.034666a42.496 42.496 0 0 1-12.416 27.648l-211.2 211.2a42.666667 42.666667 0 0 1-60.330666-60.330666z"
+        fill={getIconColor(color, 0, '#666666')}
+      />
+    </svg>
+  );
+};
+
+export default IconChevronsrightshuangyoujiantou;

src/components/iconfont/IconDiqiu.tsx

@@ -0,0 +1,53 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
+import { getIconColor } from './helper';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  display: 'block',
+};
+
+const IconDiqiu: FunctionComponent<Props> = ({ size = 18, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
+      <path
+        d="M652.8 374.1c-21.4-131.8-71.9-224.3-130.6-224.3S413 242.3 391.6 374.1h261.2zM380.5 515.7c0 32.8 1.8 64.2 4.9 94.4h273.4c3.1-30.3 4.9-61.7 4.9-94.4s-1.8-64.2-4.9-94.4H385.4c-3.1 30.2-4.9 61.7-4.9 94.4z"
+        fill={getIconColor(color, 0, '#64B5F6')}
+      />
+      <path
+        d="M859.7 374.1c-42.2-100.2-127.6-177.7-233.2-209 36 49.9 60.8 125 73.8 209h159.4z"
+        fill={getIconColor(color, 1, '#1E88E5')}
+      />
+      <path
+        d="M417.7 165.1c-105.4 31.3-191 108.8-233 209h159.4c12.8-84 37.6-159.1 73.6-209z"
+        fill={getIconColor(color, 2, '#64B5F6')}
+      />
+      <path
+        d="M875.4 421.3H706.2c3.1 31 4.9 62.7 4.9 94.4 0 31.7-1.8 63.5-4.9 94.4h169.1c8.1-30.3 12.7-61.7 12.7-94.4s-4.6-64.2-12.6-94.4z"
+        fill={getIconColor(color, 3, '#1E88E5')}
+      />
+      <path
+        d="M333.3 515.7c0-31.7 1.8-63.5 4.9-94.4H168.9c-8 30.3-12.7 61.7-12.7 94.4s4.7 64.2 12.7 94.4H338c-2.9-30.9-4.7-62.6-4.7-94.4zM391.6 657.4c21.4 131.8 71.9 224.3 130.6 224.3s109.2-92.5 130.6-224.3H391.6z"
+        fill={getIconColor(color, 4, '#64B5F6')}
+      />
+      <path
+        d="M626.7 866.3c105.4-31.3 191-108.8 233.2-209H700.4c-13 84.1-37.7 159.2-73.7 209z"
+        fill={getIconColor(color, 5, '#1E88E5')}
+      />
+      <path
+        d="M184.7 657.4c42.2 100.2 127.6 177.7 233.2 209-36-49.9-60.8-125-73.8-209H184.7z"
+        fill={getIconColor(color, 6, '#64B5F6')}
+      />
+    </svg>
+  );
+};
+
+export default IconDiqiu;

src/components/iconfont/IconFuzhi.tsx

@@ -0,0 +1,33 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
+import { getIconColor } from './helper';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  display: 'block',
+};
+
+const IconFuzhi: FunctionComponent<Props> = ({ size = 18, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1025 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
+      <path
+        d="M688.7 1023.3H142.2c-76.2 0-138.1-62-138.1-138.1V338.7c0-76.2 62-138.1 138.1-138.1h546.5c76.2 0 138.1 62 138.1 138.1v546.5c0 76.1-62 138.1-138.1 138.1z"
+        fill={getIconColor(color, 0, '#999999')}
+      />
+      <path
+        d="M987.8 447.8c-21 0-38-17-38-38V141.7c0-34.3-27.9-62.1-62.1-62.1H614.1c-21 0-38-17-38-38s17-38 38-38h273.6c76.2 0 138.1 62 138.1 138.1v268.1c0 21-17 38-38 38z"
+        fill={getIconColor(color, 1, '#999999')}
+      />
+    </svg>
+  );
+};
+
+export default IconFuzhi;

src/components/iconfont/IconGuanjun.tsx

@@ -0,0 +1,761 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
+import { getIconColor } from './helper';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  display: 'block',
+};
+
+const IconGuanjun: FunctionComponent<Props> = ({ size = 18, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
+      <path
+        d="M652.37 676.44v165.35l-54.99 32.27V644.17zM375.21 676.44v165.35l54.85 32.27V644.17z"
+        fill={getIconColor(color, 0, '#F2DD81')}
+      />
+      <path
+        d="M591.28 643.88v229.89l-77.56 50.4-77.56-50.4V643.88l77.56-50.41z"
+        fill={getIconColor(color, 1, '#F5C754')}
+      />
+      <path
+        d="M381.37 698.73v128.19l42.53 25.02V673.71z"
+        fill={getIconColor(color, 2, '#AF3F36')}
+      />
+      <path
+        d="M425.59 854.89l-45.9-27.01V697.76l45.9-27v184.13z m-42.52-28.94l39.14 23.03V676.66l-39.14 23.03v126.26z"
+        fill={getIconColor(color, 3, '#D28D1B')}
+      />
+      <path
+        d="M646.14 698.73v128.19l-42.53 25.02V673.71z"
+        fill={getIconColor(color, 4, '#AF3F36')}
+      />
+      <path
+        d="M601.92 854.89V670.75l45.91 27v130.13l-45.91 27.01z m3.38-178.23v172.32l39.15-23.03V699.69l-39.15-23.03z"
+        fill={getIconColor(color, 5, '#D28D1B')}
+      />
+      <path
+        d="M580.27 630.29v236.06l-66.55 44.23-66.55-44.23V630.29l66.55-50.41z"
+        fill={getIconColor(color, 6, '#CC4A3B')}
+      />
+      <path
+        d="M513.72 913.01l-68.57-45.57V629.28l68.57-51.93 68.57 51.93v238.15l-68.57 45.58z m-64.53-47.74l64.53 42.89 64.53-42.89V631.29l-64.53-48.88-64.53 48.88v233.98z"
+        fill={getIconColor(color, 7, '#D28D1B')}
+      />
+      <path
+        d="M341.36 368.97l-5.83 12.77-108.23-122.7v-16.19c7.15 9.17 53.54 60.07 84.94 94.36 16.69 18.25 29.12 31.76 29.12 31.76z"
+        fill={getIconColor(color, 8, '#EAB640')}
+      />
+      <path
+        d="M227.3 259.04c-21.36 49.57-20.66 138.48-20.66 138.48l-13.47 5.91c-29.08-106.67 23.18-174.58 34.12-160.58v16.19z"
+        fill={getIconColor(color, 9, '#F5C754')}
+      />
+      <path
+        d="M292.32 476.71s-22.6-16.15-99.15-73.29l13.47-5.91 77.71 65.73 7.97 13.47z"
+        fill={getIconColor(color, 10, '#EAB640')}
+      />
+      <path
+        d="M335.54 381.74l-16.11 35.45-27.1 59.53-7.97-13.47-77.71-65.73s-0.7-88.9 20.66-138.48l108.23 122.7z"
+        fill={getIconColor(color, 11, '#4955A3')}
+      />
+      <path
+        d="M394.12 314.79l-42.3-37.72-54.74 57.16 48.52 34.45zM274.72 468.66l-93.94-50.11-21.52-30.2c60.6 30.69 99.72 65.06 115.46 80.31z"
+        fill={getIconColor(color, 12, '#EAB640')}
+      />
+      <path
+        d="M209.37 564.54l-11.32 13.47c-59.82-78.12-38.79-189.66-38.79-189.66l21.52 30.2s-3.22 93.2 28.59 145.99z"
+        fill={getIconColor(color, 13, '#F5C754')}
+      />
+      <path
+        d="M279.64 586.44c-12.72-0.17-28.05-0.17-41.44 0.45-13.22-2.56-27.18-5.54-40.16-8.88l11.32-13.47c35.41 11.32 57.06 17.97 70.28 21.9zM297.74 596.89h-83l-8.1-4.83c3.51-2.97 16.28-4.46 31.56-5.16 31.86 6.23 59.54 9.99 59.54 9.99z"
+        fill={getIconColor(color, 14, '#EAB640')}
+      />
+      <path
+        d="M274.02 690.09l-5.95 15.12c-54.94-47.43-71.64-104.56-61.43-113.15l8.1 4.83s26.93 69.53 59.28 93.2z"
+        fill={getIconColor(color, 15, '#F5C754')}
+      />
+      <path
+        d="M346.77 676.62s-51.19 23.18-78.7 28.59l5.95-15.12c55.48-4.3 61.43-13.47 61.43-13.47h11.32z"
+        fill={getIconColor(color, 16, '#EAB640')}
+      />
+      <path
+        d="M346.77 676.62h-11.32s-5.95 9.17-61.43 13.47c-32.35-23.67-59.28-93.2-59.28-93.2h83s-27.68-3.76-59.53-10c13.39-0.62 28.71-0.62 41.44-0.45h0.08c6.44 0.12 12.23 0.29 16.73 0.41 1.07 0 2.07 0.04 2.97 0.08 4.34 0.12 6.94 0.25 6.94 0.25l40.4 89.44zM374.96 733.53l-5.45 1.2-36.44-39.82-8.8 4.67-5.21-4.67-0.37 7.68-26.56 14.13-11.44-1.2c2.02-10.53 57.18-28.3 57.18-28.3l37.09 46.31z"
+        fill={getIconColor(color, 17, '#EAB640')}
+      />
+      <path
+        d="M316.67 741.88l-0.58 11.36c-17.6-10.99-36.93-29.74-35.4-37.72l11.44 1.2s11.36 14.95 24.54 25.16z"
+        fill={getIconColor(color, 18, '#F5C754')}
+      />
+      <path
+        d="M382.52 742.99s-2.15 1.57-5.66 3.8c-9.13 5.74-27.47 15.9-41.15 14.75-1.49-0.12-2.89-0.37-4.26-0.78-0.83-0.25-1.69-0.54-2.6-0.91-3.88-1.49-8.26-3.8-12.77-6.61l0.58-11.36c-13.18-10.2-24.54-25.16-24.54-25.16l26.56-14.13 0.37-7.68 5.21 4.67 8.8-4.67 36.44 39.82 5.45-1.2 7.57 9.46z"
+        fill={getIconColor(color, 19, '#EAB640')}
+      />
+      <path
+        d="M341.36 388.35l-21.94 28.84-35.07 46.06-77.71-65.73s-0.7-88.9 20.66-138.48l108.24 122.7 5.82 6.61z"
+        fill={getIconColor(color, 20, '#EDDFA7')}
+      />
+      <path
+        d="M282.56 456.33l-5.67-5.64c-0.1-0.1-10.78-10.63-52.36-44.32l-1.91-1.55-0.24-2.44c-4.91-50.75 10.9-100 11.57-102.07l3.07-9.4 84.51 89.97-38.97 75.45z m-48.73-57.49c25.29 20.52 38.81 32.2 45.52 38.2l27.98-54.16-64.97-69.18c-4.19 16.26-11.4 50.57-8.53 85.14z"
+        fill={getIconColor(color, 21, '#F5C754')}
+      />
+      <path
+        d="M300.42 592.06s-0.17 0.12-3.39-0.7c-2.81-0.7-7.97-2.11-17.31-4.92h-0.08c-13.22-3.92-34.87-10.58-70.27-21.9-31.81-52.8-28.59-146-28.59-146l93.94 50.11 0.04 0.04 1.94 1.03 0.21 1.07 14.17 73.12 8.34 43.01 1 5.14z"
+        fill={getIconColor(color, 22, '#EDDFA7')}
+      />
+      <path
+        d="M302.48 586.61l-9.71-2.99c-0.35-0.11-35.9-11.12-75.17-29.95l-1.65-0.79-0.91-1.59c-4.73-8.29-24.92-74.23-17.82-100.87l2.2-8.25 6.9 5.02c4.04 2.94 45.27 24.07 70.32 36.69l2.45 1.24 23.39 101.49z m-77.99-42.63c25.56 12.14 49.23 20.83 61.96 25.21l-17.53-76.09c-10.51-5.31-45.22-22.9-61.47-31.77-1.17 25.02 12.48 72.11 17.04 82.65z"
+        fill={getIconColor(color, 23, '#F5C754')}
+      />
+      <path
+        d="M335.45 676.62s-5.95 9.17-61.43 13.47c-32.35-23.67-59.28-93.2-59.28-93.2h87.83l32.88 79.73z"
+        fill={getIconColor(color, 24, '#EDDFA7')}
+      />
+      <path
+        d="M283.74 682.62l-1.46-0.69c-23.05-10.95-41.86-60.68-43.94-66.32l-3.04-8.29 68.84 3.28 31.51 63.66-6.54 2.04c-0.94 0.29-10.17 2.97-43.76 6.17l-1.61 0.15z m-31.1-62.75c6.98 16.54 20.37 43.27 33.33 50.77 16.7-1.63 26.92-3.1 32.79-4.12l-22.06-44.56-44.06-2.09z"
+        fill={getIconColor(color, 25, '#F5C754')}
+      />
+      <path
+        d="M370.79 736.14s-1.03 1.03-2.93 2.56c-4.92 3.92-15.66 11.2-29.37 12.35-1.03 0.08-2.07 0.08-3.1-0.04-1.98-0.25-4.01-0.78-6.07-1.61-4.21-1.65-8.51-4.34-12.64-7.52-13.18-10.2-24.54-25.16-24.54-25.16l26.56-14.13 5.58-3.02 8.8-4.67 36.44 39.82 1.27 1.42z"
+        fill={getIconColor(color, 26, '#EDDFA7')}
+      />
+      <path
+        d="M344.22 746.15c-10.73 0-25.64-14.92-33.97-24.34l-4.37-4.94 30.49-21.11 32.59 33.11-3.29 4.06c-0.83 1.02-8.36 10.03-18.77 12.87-0.87 0.24-1.76 0.35-2.68 0.35z m-20.69-27.26c8.44 8.64 17.4 15.58 20.44 15.58h0.05c3.39-0.94 6.57-3.21 8.87-5.22L334.93 711l-11.4 7.89z"
+        fill={getIconColor(color, 27, '#F5C754')}
+      />
+      <path
+        d="M314.43 381.89l-74.9-79.75s-16.17 49.57-11.32 99.69c42.57 34.49 52.81 44.72 52.81 44.72l33.41-64.66z"
+        fill={getIconColor(color, 28, '#D4554C')}
+      />
+      <path
+        d="M315.44 341.2l38.26-39.34 34.49 19.67z"
+        fill={getIconColor(color, 29, '#EDDFA7')}
+      />
+      <path
+        d="M274.02 489.12s-65.2-32.87-71.13-37.18c-6.47 24.25 12.93 88.91 17.24 96.45 39.34 18.86 74.36 29.64 74.36 29.64l-20.47-88.91zM300.42 616.29l-56.58-2.69s19.4 52.81 40.95 63.05c33.95-3.23 42.57-5.93 42.57-5.93l-26.94-54.43zM335.65 703.38l-21.02 14.55s21.82 24.65 30.71 22.23c8.89-2.42 15.76-10.91 15.76-10.91l-25.45-25.87z"
+        fill={getIconColor(color, 30, '#D4554C')}
+      />
+      <path
+        d="M280.28 364.44l-5.76 8.07-19.41 0.37-10.91-7.78z"
+        fill={getIconColor(color, 31, '#EDD45E')}
+      />
+      <path
+        d="M291.46 398.77l-10.92-7.78-6.02-18.48 5.76-8.07z"
+        fill={getIconColor(color, 32, '#F5C94F')}
+      />
+      <path
+        d="M291.45 398.77l-22.57 0.4-13.51 0.24 5.76-8.08 19.4-0.34z"
+        fill={getIconColor(color, 33, '#D28D1B')}
+      />
+      <path
+        d="M261.13 391.33l-5.76 8.08-4.18-12.85-6.99-21.45 10.91 7.77z"
+        fill={getIconColor(color, 34, '#EAA21D')}
+      />
+      <path
+        d="M267.82 381.93l-6.7 9.4-6.01-18.45z"
+        fill={getIconColor(color, 35, '#77A0D4')}
+      />
+      <path
+        d="M274.52 372.51l-6.7 9.42-12.71-9.05z"
+        fill={getIconColor(color, 36, '#A2D8EE')}
+      />
+      <path
+        d="M280.54 390.99l-12.72-9.06 6.7-9.42z"
+        fill={getIconColor(color, 37, '#B2DFEF')}
+      />
+      <path
+        d="M280.54 390.99l-19.42 0.34 6.7-9.4z"
+        fill={getIconColor(color, 38, '#61B5DA')}
+      />
+      <path
+        d="M245.69 494.05l-3.16 9.39-18.48 5.97-12.69-4.28z"
+        fill={getIconColor(color, 39, '#EDD45E')}
+      />
+      <path
+        d="M266.33 523.67l-12.69-4.28-11.11-15.95 3.16-9.39z"
+        fill={getIconColor(color, 40, '#F5C94F')}
+      />
+      <path
+        d="M266.33 523.67l-21.49 6.92-12.86 4.14 3.17-9.4 18.48-5.94z"
+        fill={getIconColor(color, 41, '#D28D1B')}
+      />
+      <path
+        d="M235.15 525.33l-3.17 9.4-7.72-11.08-12.9-18.51 12.68 4.27z"
+        fill={getIconColor(color, 42, '#EAA21D')}
+      />
+      <path
+        d="M238.83 514.4l-3.68 10.93-11.1-15.92z"
+        fill={getIconColor(color, 43, '#77A0D4')}
+      />
+      <path
+        d="M242.53 503.44l-3.7 10.96-14.78-4.99z"
+        fill={getIconColor(color, 44, '#A2D8EE')}
+      />
+      <path
+        d="M253.64 519.39l-14.81-4.99 3.7-10.96z"
+        fill={getIconColor(color, 45, '#B2DFEF')}
+      />
+      <path
+        d="M253.64 519.39l-18.49 5.94 3.68-10.93z"
+        fill={getIconColor(color, 46, '#61B5DA')}
+      />
+      <path
+        d="M277.2 634.2l0.65 5.64-8.11 7.61-7.62 0.89z"
+        fill={getIconColor(color, 47, '#EDD45E')}
+      />
+      <path
+        d="M295.14 644.49l-7.63 0.89-9.66-5.54-0.65-5.64z"
+        fill={getIconColor(color, 48, '#F5C94F')}
+      />
+      <path
+        d="M295.14 644.49l-9.44 8.84-5.65 5.3-0.66-5.65 8.12-7.6z"
+        fill={getIconColor(color, 49, '#D28D1B')}
+      />
+      <path
+        d="M279.39 652.98l0.66 5.65-6.72-3.85-11.21-6.44 7.62-0.89z"
+        fill={getIconColor(color, 50, '#EAA21D')}
+      />
+      <path
+        d="M278.62 646.42l0.77 6.56-9.65-5.53z"
+        fill={getIconColor(color, 51, '#77A0D4')}
+      />
+      <path
+        d="M277.85 639.84l0.77 6.58-8.88 1.03z"
+        fill={getIconColor(color, 52, '#A2D8EE')}
+      />
+      <path
+        d="M287.51 645.38l-8.89 1.04-0.77-6.58z"
+        fill={getIconColor(color, 53, '#B2DFEF')}
+      />
+      <path
+        d="M287.51 645.38l-8.12 7.6-0.77-6.56z"
+        fill={getIconColor(color, 54, '#61B5DA')}
+      />
+      <path
+        d="M688.16 368.97l5.83 12.77 108.24-122.7v-16.19c-7.15 9.17-53.54 60.07-84.94 94.36-16.69 18.25-29.13 31.76-29.13 31.76z"
+        fill={getIconColor(color, 55, '#EAB640')}
+      />
+      <path
+        d="M802.22 259.04c21.36 49.57 20.66 138.48 20.66 138.48l13.47 5.91c29.08-106.67-23.18-174.58-34.12-160.58v16.19z"
+        fill={getIconColor(color, 56, '#F5C754')}
+      />
+      <path
+        d="M737.2 476.71s22.6-16.15 99.15-73.29l-13.47-5.91-77.71 65.73-7.97 13.47z"
+        fill={getIconColor(color, 57, '#EAB640')}
+      />
+      <path
+        d="M693.99 381.74l16.11 35.45 27.1 59.53 7.97-13.47 77.71-65.73s0.7-88.9-20.66-138.48l-108.23 122.7z"
+        fill={getIconColor(color, 58, '#4955A3')}
+      />
+      <path
+        d="M635.41 314.79l42.3-37.72 54.73 57.16-48.52 34.45zM754.8 468.66l93.94-50.11 21.52-30.2c-60.6 30.69-99.72 65.06-115.46 80.31z"
+        fill={getIconColor(color, 59, '#EAB640')}
+      />
+      <path
+        d="M820.15 564.54l11.32 13.47c59.82-78.12 38.79-189.66 38.79-189.66l-21.52 30.2s3.22 93.2-28.59 145.99z"
+        fill={getIconColor(color, 60, '#F5C754')}
+      />
+      <path
+        d="M749.88 586.44c12.72-0.17 28.05-0.17 41.44 0.45 13.22-2.56 27.18-5.54 40.16-8.88l-11.32-13.47c-35.41 11.32-57.06 17.97-70.28 21.9zM731.79 596.89h83l8.1-4.83c-3.51-2.97-16.28-4.46-31.56-5.16-31.86 6.23-59.54 9.99-59.54 9.99z"
+        fill={getIconColor(color, 61, '#EAB640')}
+      />
+      <path
+        d="M755.5 690.09l5.95 15.12c54.94-47.43 71.64-104.56 61.43-113.15l-8.1 4.83s-26.93 69.53-59.28 93.2z"
+        fill={getIconColor(color, 62, '#F5C754')}
+      />
+      <path
+        d="M682.75 676.62s51.19 23.18 78.7 28.59l-5.95-15.12c-55.48-4.3-61.43-13.47-61.43-13.47h-11.32z"
+        fill={getIconColor(color, 63, '#EAB640')}
+      />
+      <path
+        d="M682.75 676.62h11.32s5.95 9.17 61.43 13.47c32.35-23.67 59.28-93.2 59.28-93.2h-83s27.68-3.76 59.53-10c-13.39-0.62-28.71-0.62-41.44-0.45h-0.08c-6.44 0.12-12.23 0.29-16.73 0.41-1.07 0-2.07 0.04-2.97 0.08-4.34 0.12-6.94 0.25-6.94 0.25l-40.4 89.44zM654.56 733.53l5.45 1.2 36.44-39.82 8.8 4.67 5.21-4.67 0.37 7.68 26.56 14.13 11.44-1.2c-2.02-10.53-57.18-28.3-57.18-28.3l-37.09 46.31z"
+        fill={getIconColor(color, 64, '#EAB640')}
+      />
+      <path
+        d="M712.85 741.88l0.58 11.36c17.6-10.99 36.93-29.74 35.4-37.72l-11.44 1.2s-11.36 14.95-24.54 25.16z"
+        fill={getIconColor(color, 65, '#F5C754')}
+      />
+      <path
+        d="M647 742.99s2.15 1.57 5.66 3.8c9.13 5.74 27.47 15.9 41.15 14.75 1.49-0.12 2.89-0.37 4.26-0.78 0.83-0.25 1.69-0.54 2.6-0.91 3.88-1.49 8.26-3.8 12.77-6.61l-0.58-11.36c13.18-10.2 24.54-25.16 24.54-25.16l-26.56-14.13-0.37-7.68-5.21 4.67-8.8-4.67-36.44 39.82-5.45-1.2-7.57 9.46z"
+        fill={getIconColor(color, 66, '#EAB640')}
+      />
+      <path
+        d="M688.16 388.35l21.94 28.84 35.07 46.06 77.71-65.73s0.7-88.9-20.66-138.48l-108.24 122.7-5.82 6.61z"
+        fill={getIconColor(color, 67, '#EDDFA7')}
+      />
+      <path
+        d="M707.99 380.89l84.51-89.97 3.07 9.4c0.68 2.07 16.49 51.32 11.57 102.07l-0.24 2.44-1.91 1.55c-41.58 33.68-52.25 44.21-52.36 44.32l-5.67 5.64-38.97-75.45z m79.18-67.19l-64.97 69.18 27.98 54.16c6.71-6 20.23-17.68 45.52-38.2 2.86-34.57-4.35-68.88-8.53-85.14z"
+        fill={getIconColor(color, 68, '#F5C754')}
+      />
+      <path
+        d="M729.1 592.06s0.17 0.12 3.39-0.7c2.81-0.7 7.97-2.11 17.31-4.92h0.08c13.22-3.92 34.87-10.58 70.27-21.9 31.81-52.8 28.59-146 28.59-146l-93.94 50.11-0.04 0.04-1.94 1.03-0.21 1.07-14.17 73.12-8.34 43.01-1 5.14z"
+        fill={getIconColor(color, 69, '#EDDFA7')}
+      />
+      <path
+        d="M750.42 485.13l2.45-1.24c25.04-12.62 66.28-33.75 70.32-36.69l6.9-5.02 2.2 8.25c7.1 26.64-13.08 92.58-17.82 100.87l-0.91 1.59-1.65 0.79c-39.27 18.83-74.82 29.84-75.17 29.95l-9.71 2.99 23.39-101.49z m71.65-23.79c-16.25 8.88-50.97 26.47-61.47 31.77l-17.53 76.09c12.73-4.38 36.4-13.08 61.96-25.21 4.56-10.55 18.22-57.64 17.04-82.65z"
+        fill={getIconColor(color, 70, '#F5C754')}
+      />
+      <path
+        d="M694.07 676.62s5.95 9.17 61.43 13.47c32.35-23.67 59.28-93.2 59.28-93.2h-87.83l-32.88 79.73z"
+        fill={getIconColor(color, 71, '#EDDFA7')}
+      />
+      <path
+        d="M744.17 682.47c-33.59-3.2-42.82-5.87-43.76-6.17l-6.54-2.04 31.51-63.66 68.84-3.28-3.04 8.29c-2.07 5.64-20.89 55.37-43.94 66.32l-1.46 0.69-1.61-0.15z m-11.35-60.5l-22.06 44.56c5.87 1.02 16.09 2.49 32.79 4.12 12.96-7.5 26.35-34.23 33.33-50.77l-44.06 2.09z"
+        fill={getIconColor(color, 72, '#F5C754')}
+      />
+      <path
+        d="M658.73 736.14s1.03 1.03 2.93 2.56c4.92 3.92 15.66 11.2 29.37 12.35 1.03 0.08 2.07 0.08 3.1-0.04 1.98-0.25 4.01-0.78 6.07-1.61 4.21-1.65 8.51-4.34 12.64-7.52 13.18-10.2 24.54-25.16 24.54-25.16l-26.56-14.13-5.58-3.02-8.8-4.67L660 734.72l-1.27 1.42z"
+        fill={getIconColor(color, 73, '#EDDFA7')}
+      />
+      <path
+        d="M682.64 745.8c-10.41-2.84-17.95-11.85-18.77-12.87l-3.29-4.06 32.59-33.11 30.49 21.11-4.37 4.94c-8.34 9.42-23.24 24.34-33.97 24.34-0.94 0-1.83-0.11-2.68-0.35z m11.95-34.8l-17.96 18.25c2.31 2.02 5.48 4.29 8.87 5.22h0.05c3.04 0 12-6.94 20.44-15.58l-11.4-7.89z"
+        fill={getIconColor(color, 74, '#F5C754')}
+      />
+      <path
+        d="M715.09 381.89l74.9-79.75s16.17 49.57 11.32 99.69c-42.57 34.49-52.81 44.72-52.81 44.72l-33.41-64.66z"
+        fill={getIconColor(color, 75, '#D4554C')}
+      />
+      <path
+        d="M714.08 341.2l-38.26-39.34-34.49 19.67z"
+        fill={getIconColor(color, 76, '#EDDFA7')}
+      />
+      <path
+        d="M755.51 489.12s65.2-32.87 71.13-37.18c6.47 24.25-12.93 88.91-17.24 96.45-39.34 18.86-74.36 29.64-74.36 29.64l20.47-88.91zM729.1 616.29l56.58-2.69s-19.4 52.81-40.95 63.05c-33.95-3.23-42.57-5.93-42.57-5.93l26.94-54.43zM693.88 703.38l21.02 14.55s-21.82 24.65-30.71 22.23-15.76-10.91-15.76-10.91l25.45-25.87z"
+        fill={getIconColor(color, 77, '#D4554C')}
+      />
+      <path
+        d="M749.25 364.44l5.75 8.07 19.41 0.37 10.91-7.78z"
+        fill={getIconColor(color, 78, '#EDD45E')}
+      />
+      <path
+        d="M738.07 398.77l10.91-7.78 6.02-18.48-5.75-8.07z"
+        fill={getIconColor(color, 79, '#F5C94F')}
+      />
+      <path
+        d="M738.07 398.77l22.57 0.4 13.51 0.24-5.75-8.08-19.41-0.34z"
+        fill={getIconColor(color, 80, '#D28D1B')}
+      />
+      <path
+        d="M768.4 391.33l5.75 8.08 4.19-12.85 6.98-21.45-10.9 7.77z"
+        fill={getIconColor(color, 81, '#EAA21D')}
+      />
+      <path
+        d="M761.71 381.93l6.69 9.4 6.01-18.45z"
+        fill={getIconColor(color, 82, '#77A0D4')}
+      />
+      <path
+        d="M755 372.51l6.71 9.42 12.7-9.05z"
+        fill={getIconColor(color, 83, '#A2D8EE')}
+      />
+      <path
+        d="M748.98 390.99l12.73-9.06-6.71-9.42z"
+        fill={getIconColor(color, 84, '#B2DFEF')}
+      />
+      <path
+        d="M748.98 390.99l19.42 0.34-6.69-9.4z"
+        fill={getIconColor(color, 85, '#61B5DA')}
+      />
+      <path
+        d="M783.83 494.05l3.17 9.39 18.47 5.97 12.7-4.28z"
+        fill={getIconColor(color, 86, '#EDD45E')}
+      />
+      <path
+        d="M763.19 523.67l12.69-4.28L787 503.44l-3.17-9.39z"
+        fill={getIconColor(color, 87, '#F5C94F')}
+      />
+      <path
+        d="M763.19 523.67l21.49 6.92 12.86 4.14-3.17-9.4-18.48-5.94z"
+        fill={getIconColor(color, 88, '#D28D1B')}
+      />
+      <path
+        d="M794.37 525.33l3.17 9.4 7.73-11.08 12.9-18.51-12.69 4.27z"
+        fill={getIconColor(color, 89, '#EAA21D')}
+      />
+      <path
+        d="M790.69 514.4l3.69 10.93 11.09-15.92z"
+        fill={getIconColor(color, 90, '#77A0D4')}
+      />
+      <path
+        d="M787 503.44l3.69 10.96 14.78-4.99z"
+        fill={getIconColor(color, 91, '#A2D8EE')}
+      />
+      <path
+        d="M775.88 519.39l14.81-4.99-3.69-10.96z"
+        fill={getIconColor(color, 92, '#B2DFEF')}
+      />
+      <path
+        d="M775.88 519.39l18.5 5.94-3.69-10.93z"
+        fill={getIconColor(color, 93, '#61B5DA')}
+      />
+      <path
+        d="M752.33 634.2l-0.66 5.64 8.11 7.61 7.62 0.89z"
+        fill={getIconColor(color, 94, '#EDD45E')}
+      />
+      <path
+        d="M734.38 644.49l7.63 0.89 9.66-5.54 0.66-5.64z"
+        fill={getIconColor(color, 95, '#F5C94F')}
+      />
+      <path
+        d="M734.38 644.49l9.45 8.84 5.64 5.3 0.66-5.65-8.12-7.6z"
+        fill={getIconColor(color, 96, '#D28D1B')}
+      />
+      <path
+        d="M750.13 652.98l-0.66 5.65 6.72-3.85 11.21-6.44-7.62-0.89z"
+        fill={getIconColor(color, 97, '#EAA21D')}
+      />
+      <path
+        d="M750.9 646.42l-0.76 6.56 9.64-5.53z"
+        fill={getIconColor(color, 98, '#77A0D4')}
+      />
+      <path
+        d="M751.67 639.84l-0.77 6.58 8.88 1.03z"
+        fill={getIconColor(color, 99, '#A2D8EE')}
+      />
+      <path
+        d="M742.01 645.38l8.89 1.04 0.77-6.58z"
+        fill={getIconColor(color, 100, '#B2DFEF')}
+      />
+      <path
+        d="M742.01 645.38l8.13 7.6 0.76-6.56z"
+        fill={getIconColor(color, 101, '#61B5DA')}
+      />
+      <path
+        d="M697.65 522.28c-8.46 49.04-23.5 111.73-49 151.14-20.4 34.83-101.27 89.98-134.14 89.98-29.99 0-120.06-60.51-141.16-97.91-22.49-38.45-37.23-109.99-45.29-160.21 39.45 63.78 110.08 106.28 190.59 106.28 73.15 0 138.11-35.05 179-89.28z"
+        fill={getIconColor(color, 102, '#CC4A3B')}
+      />
+      <path
+        d="M514.73 824.3c-38.67 0-154.72-78.03-181.96-126.21-47.78-81.61-68.23-278.66-68.23-278.66l37.1 19.84s17.39 167.71 58.07 237.15c23.19 41.02 121.98 107.46 154.89 107.46l0.13 40.42z"
+        fill={getIconColor(color, 103, '#EAB640')}
+      />
+      <path
+        d="M763.09 419.44s-14.95 195.35-75.51 288.9C661.29 753.24 557.1 824.3 514.73 824.3l-0.13-40.41c36.05 0 124.72-60.51 147.13-98.74 51.53-79.6 64.26-245.87 64.26-245.87l37.1-19.84z"
+        fill={getIconColor(color, 104, '#F2DD81')}
+      />
+      <path
+        d="M763.09 419.44l-37.1 19.84s-20.23-11.12-35.7-31.95c-17.92-17.39-26.03-46.47-26.03-46.47l26.33-33.52s9.5 34.13 30.56 54.62c18.18 24.4 41.94 37.48 41.94 37.48z"
+        fill={getIconColor(color, 105, '#EDDFA7')}
+      />
+      <path
+        d="M690.59 327.32l-26.33 33.52s-53.36-36.27-151.71-39.54c-103.49 0-145.21 37.4-145.21 37.4l-25.63-33.92s49.04-43.94 170.58-43.94c115.61 3.85 178.3 46.48 178.3 46.48z"
+        fill={getIconColor(color, 106, '#F2DD81')}
+      />
+      <path
+        d="M367.34 358.71s-10.55 30.21-26.98 48.61c-15.96 18.88-38.71 31.95-38.71 31.95l-37.1-19.84s26.72-15.35 45.47-37.49c19.36-21.62 31.69-57.15 31.69-57.15l25.63 33.92zM514.6 783.89c-32.91 0-131.7-66.44-154.89-107.46-40.67-69.45-58.07-237.15-58.07-237.15l18.75 10.03s15.91 152.89 52.97 216.18c21.1 37.4 111.17 97.91 141.16 97.91l0.08 20.49z"
+        fill={getIconColor(color, 107, '#F5C754')}
+      />
+      <path
+        d="M725.99 439.27s-12.73 166.27-64.26 245.87c-22.41 38.23-111.08 98.74-147.13 98.74l-0.09-20.49c32.87 0 113.74-55.15 134.14-89.98C695.6 600.83 707.2 449.3 707.2 449.3l18.79-10.03z"
+        fill={getIconColor(color, 108, '#F5C754')}
+      />
+      <path
+        d="M725.99 439.27L707.2 449.3s-18.4-10.16-32.52-29.12c-16.35-15.87-23.72-42.37-23.72-42.37l13.3-16.96s8.11 29.08 26.03 46.47c15.47 20.84 35.7 31.95 35.7 31.95z"
+        fill={getIconColor(color, 109, '#EAB640')}
+      />
+      <path
+        d="M664.26 360.85l-13.3 16.96s-48.65-33.09-138.32-36.05c-94.29 0-132.35 34.09-132.35 34.09l-12.95-17.13s41.72-37.4 145.21-37.4c98.35 3.26 151.71 39.53 151.71 39.53z"
+        fill={getIconColor(color, 110, '#F5C754')}
+      />
+      <path
+        d="M380.28 375.84s-9.59 27.55-24.59 44.34c-14.56 17.22-35.31 29.12-35.31 29.12l-18.75-10.03s22.76-13.08 38.71-31.95c16.44-18.4 26.98-48.61 26.98-48.61l12.96 17.13z"
+        fill={getIconColor(color, 111, '#F2DD81')}
+      />
+      <path
+        d="M707.2 449.3s-2.4 31.65-9.55 72.98c-40.89 54.23-105.85 89.28-179 89.28-80.52 0-151.14-42.5-190.59-106.28-5.23-32.43-7.67-55.98-7.67-55.98s20.75-11.9 35.31-29.12c15-16.78 24.59-44.34 24.59-44.34s38.06-34.09 132.35-34.09c89.67 2.96 138.32 36.05 138.32 36.05s7.37 26.51 23.72 42.37c14.12 18.97 32.52 29.13 32.52 29.13z"
+        fill={getIconColor(color, 112, '#D4554C')}
+      />
+      <path
+        d="M264.81 794.23l122.75-91.47 72.58 49.57-151.66 123.34 22.42-76.13zM673.18 718.1l96.78 77.31h-66.69l27.15 80.26-177.63-125.7 92.65-47.21z"
+        fill={getIconColor(color, 113, '#F2DD81')}
+      />
+      <path
+        d="M354.89 429.67s5.17 15.1 12.82 18.44c7.65 3.34 40.03 29.68 40.03 29.68s6.97 24.96 7.2 26.31c0.22 1.35 0.67 3.37 0.67 3.37s16.41-23.16 16.64-24.06c0.22-0.9-13.94-28.33-27.66-36.65s-33.73-20.24-49.7-17.09z"
+        fill={getIconColor(color, 114, '#EAB640')}
+      />
+      <path
+        d="M446.63 565.03c-6.07-9.22-20.46-6.07-40.47-21.81-20.01-15.74-22.04-45.65-23.16-56.22-1.12-10.57 2.92-14.84 2.92-14.84s-10.24-14.52-19.42-27.09c-1.25 7.34-1.84 16.37-1.15 27.43 2.7 43.17 3.26 55.88 29.57 76.79 26.31 20.91 48.79 17.76 56.22 38.9 6.33 18.03-3.38 19.04-15.31 16.72 6.88 12.15 24.19 9.38 28.8-2.89 4.94-13.15-11.92-27.77-18-36.99z"
+        fill={getIconColor(color, 115, '#BC8C2F')}
+      />
+      <path
+        d="M451.13 588.19c-7.42-21.14-29.91-17.99-56.22-38.9s-26.87-33.62-29.57-76.79c-0.69-11.06-0.1-20.09 1.15-27.43-4.62-6.33-8.97-12.17-11.61-15.4-2.92 1.57-6.75 25.86-2.25 53.07s12.14 62.06 34.18 77.8c22.04 15.74 47.67 19.79 52.62 29.01 4.95 9.22-4.95 12.48-4.95 12.48 0.38 1.05 0.83 2 1.33 2.89 11.94 2.32 21.65 1.31 15.32-16.73z"
+        fill={getIconColor(color, 116, '#F5C754')}
+      />
+      <path
+        d="M672.55 429.67s-5.17 15.1-12.82 18.44-40.03 29.68-40.03 29.68-6.97 24.96-7.2 26.31c-0.22 1.35-0.67 3.37-0.67 3.37s-16.41-23.16-16.64-24.06c-0.22-0.9 13.94-28.33 27.66-36.65s33.73-20.24 49.7-17.09z"
+        fill={getIconColor(color, 117, '#EAB640')}
+      />
+      <path
+        d="M580.8 565.03c6.07-9.22 20.46-6.07 40.47-21.81 20.01-15.74 22.04-45.65 23.16-56.22 1.12-10.57-2.92-14.84-2.92-14.84s10.24-14.52 19.42-27.09c1.25 7.34 1.84 16.37 1.15 27.43-2.7 43.17-3.26 55.88-29.57 76.79-26.31 20.91-48.79 17.76-56.22 38.9-6.33 18.03 3.38 19.04 15.31 16.72-6.88 12.15-24.19 9.38-28.8-2.89-4.93-13.15 11.93-27.77 18-36.99z"
+        fill={getIconColor(color, 118, '#BC8C2F')}
+      />
+      <path
+        d="M576.31 588.19c7.42-21.14 29.91-17.99 56.22-38.9s26.87-33.62 29.57-76.79c0.69-11.06 0.1-20.09-1.15-27.43 4.62-6.33 8.97-12.17 11.61-15.4 2.92 1.57 6.75 25.86 2.25 53.07s-12.14 62.06-34.18 77.8c-22.04 15.74-47.67 19.79-52.62 29.01-4.95 9.22 4.95 12.48 4.95 12.48-0.38 1.05-0.83 2-1.33 2.89-11.94 2.32-21.65 1.31-15.32-16.73z"
+        fill={getIconColor(color, 119, '#F5C754')}
+      />
+      <path
+        d="M611.83 507.47s6.3-2.25 7.42-8.99c1.12-6.75 5.29-22.89 23.95-23.34 12.82-22.94 17.73-30.06 17.73-30.06s-38.31 17.42-44.61 35.41c-6.28 17.98-4.49 26.98-4.49 26.98z"
+        fill={getIconColor(color, 120, '#F2DD81')}
+      />
+      <path
+        d="M625.06 415.35s-4.09 36.44-11.69 73.9c-27.05 9.36-59.89 14.84-95.28 14.84-39.96 0-76.66-6.98-105.45-18.65-7.17-34.86-13.57-70.09-13.57-70.09h225.99z"
+        fill={getIconColor(color, 121, '#F5C754')}
+      />
+      <path
+        d="M559.97 648.91c0 6.33-21.45 11.46-47.89 11.46-26.46 0-47.91-5.14-47.91-11.46 0-4.22 9.57-7.91 23.79-9.91v-0.02c5.84 2.28 14.53 3.71 24.24 3.71 9.86 0 18.67-1.48 24.51-3.81-0.02 0.07-0.02 0.12-0.03 0.19 13.94 1.99 23.29 5.65 23.29 9.84zM613.37 489.26c-4.55 22.45-10.38 45.27-17.33 60.82-18.15 40-45.6 57.32-74.92 60.03 0.22 0.78 0.38 1.59 0.38 2.45v6.4c0 1.07-0.19 2.07-0.53 3.02-0.21 0.55-0.47 1.09-0.76 1.59 6.59 1.33 11.91 4.28 14.65 8.03-4.96 2.38-13.26 3.95-22.67 3.95-9.29 0-17.52-1.53-22.48-3.86 2.76-3.86 8.22-6.86 14.98-8.17-0.29-0.5-0.55-1.02-0.76-1.57-0.33-0.93-0.52-1.93-0.52-2.98v-6.4c0-0.88 0.17-1.69 0.4-2.48-35.22-3.33-66.84-38.06-75.73-60.99-3.91-10.05-9.91-36.72-15.45-63.63 28.79 11.67 65.49 18.65 105.45 18.65 35.4-0.02 68.25-5.5 95.29-14.86zM512.99 441.98c-17.95-10.12-27.24-30.53-28.24-33.56-0.33-0.98-0.19-2.34 0.21-3.76 5.29 9.67 15.57 16.22 27.38 16.22 11.36 0 21.29-6.05 26.74-15.1 1.11 7.28-2.89 21.07-26.09 36.2z"
+        fill={getIconColor(color, 122, '#EAB640')}
+      />
+      <path
+        d="M390.42 400.89h75.1c11.92 0 25.64 11.47 25.64 28.78 0 17.31-19.79 23.61-32.16 18.44-12.37-5.17-10.12-18.6-7.2-22.73 2.92-4.14 22.49-10.32 17.09 8.12 5.62-6.07 5.34-16.19-15.77-15.07-21.11 1.12-54.16 3.37-56.86 2.81-2.69-0.57-10.79-16.98-5.84-20.35zM634.48 400.89h-75.1c-11.92 0-25.64 11.47-25.64 28.78 0 17.31 19.79 23.61 32.16 18.44 12.37-5.17 10.12-18.6 7.2-22.73-2.92-4.14-22.49-10.32-17.09 8.12-5.62-6.07-5.34-16.19 15.77-15.07s54.16 3.37 56.86 2.81c2.69-0.57 10.79-16.98 5.84-20.35zM539.07 405.78c-5.45 9.05-15.38 15.1-26.74 15.1-11.81 0-22.08-6.55-27.38-16.22 0.83-2.95 2.83-6.12 4.17-6.53 0 0 13.83-4.38 22.95-4.38 9.1 0 20.91 4.15 24.79 7.14 0.97 0.81 1.87 2.5 2.21 4.89zM415.6 507.47s-6.3-2.25-7.42-8.99c-1.12-6.75-5.29-22.89-23.95-23.34-12.82-22.94-17.73-30.06-17.73-30.06s38.31 17.42 44.61 35.41c6.29 17.98 4.49 26.98 4.49 26.98z"
+        fill={getIconColor(color, 123, '#F2DD81')}
+      />
+      <path
+        d="M536.87 637.36c0 0.5-0.07 1.02-0.16 1.52-5.84 2.33-14.65 3.81-24.51 3.81-9.71 0-18.39-1.43-24.24-3.71-0.1-0.53-0.17-1.07-0.17-1.62 0-2.02 0.69-3.95 1.93-5.69 4.96 2.33 13.19 3.86 22.48 3.86 9.41 0 17.7-1.57 22.67-3.95 1.29 1.78 2 3.73 2 5.78z"
+        fill={getIconColor(color, 124, '#F5C754')}
+      />
+      <path
+        d="M510.92 521.5m-59.3 0a59.3 59.3 0 1 0 118.6 0 59.3 59.3 0 1 0-118.6 0Z"
+        fill={getIconColor(color, 125, '#D4554C')}
+      />
+      <path
+        d="M512.24 452.13c-38.17 0-69.11 30.94-69.11 69.11s30.94 69.11 69.11 69.11 69.11-30.94 69.11-69.11-30.94-69.11-69.11-69.11z m0 124.73c-30.72 0-55.62-24.9-55.62-55.62s24.9-55.62 55.62-55.62 55.62 24.9 55.62 55.62-24.91 55.62-55.62 55.62z"
+        fill={getIconColor(color, 126, '#EAAB25')}
+      />
+      <path
+        d="M301.4 797.17l110.42-77.84 24.53 16.75-113.76 91.69 8.31-28.23zM725.35 795.41l-107.81-78.43L590.01 731l122.22 90.91-8.96-26.5z"
+        fill={getIconColor(color, 127, '#F5C754')}
+      />
+      <path
+        d="M722.75 634.31l-174.68 36v86.16l136.32-29.51s30.09-50.76 38.36-92.65z"
+        fill={getIconColor(color, 128, '#F2DD81')}
+      />
+      <path
+        d="M715.98 658.88L548.07 694.5v33.64l153.27-33.64s12.67-29.56 14.64-35.62z"
+        fill={getIconColor(color, 129, '#F5C754')}
+      />
+      <path
+        d="M306.97 634.31l174.68 36v86.16l-136.32-29.51c-0.01 0-30.1-50.76-38.36-92.65z"
+        fill={getIconColor(color, 130, '#F2DD81')}
+      />
+      <path
+        d="M313.73 658.88l167.91 35.62v33.64L328.37 694.5s-12.67-29.56-14.64-35.62z"
+        fill={getIconColor(color, 131, '#F5C754')}
+      />
+      <path
+        d="M511.5 712.07m-66.67 0a66.67 66.67 0 1 0 133.34 0 66.67 66.67 0 1 0-133.34 0Z"
+        fill={getIconColor(color, 132, '#F2DD81')}
+      />
+      <path
+        d="M511.5 712.07m-58.56 0a58.56 58.56 0 1 0 117.12 0 58.56 58.56 0 1 0-117.12 0Z"
+        fill={getIconColor(color, 133, '#CC4A3B')}
+      />
+      <path
+        d="M511.46 711.15l14.88-14.67-14.72-30.09-0.16 44.76z"
+        fill={getIconColor(color, 134, '#F2DD81')}
+      />
+      <path
+        d="M559.46 701.42l-33.12-4.94-14.88 14.67z"
+        fill={getIconColor(color, 135, '#EAAB25')}
+      />
+      <path
+        d="M511.62 666.39l-14.93 29.98 14.77 14.78z"
+        fill={getIconColor(color, 136, '#D89D31')}
+      />
+      <path
+        d="M511.46 711.15l-0.11 30.89 29.58 15.7v-0.02l-29.47-46.57z"
+        fill={getIconColor(color, 137, '#E8C742')}
+      />
+      <path
+        d="M481.64 757.52l29.71-15.48 0.11-30.89z"
+        fill={getIconColor(color, 138, '#EAAB25')}
+      />
+      <path
+        d="M540.93 757.72l-28.97-45.77-0.5-0.8h0.03l19.28 10.93 4.7 2.54-0.08 0.08z"
+        fill={getIconColor(color, 139, '#EAAB25')}
+      />
+      <path
+        d="M511.46 711.15l-14.77-14.78-33.16 4.7 47.93 10.08z"
+        fill={getIconColor(color, 140, '#E8C742')}
+      />
+      <path
+        d="M511.46 711.15l-24.03 13.38-5.79 32.99 29.82-46.37z"
+        fill={getIconColor(color, 141, '#E8C742')}
+      />
+      <path
+        d="M511.46 711.15l-47.93-10.08 23.9 23.46 24.03-13.38z"
+        fill={getIconColor(color, 142, '#EAAB25')}
+      />
+      <path
+        d="M559.46 701.43l-23.99 23.19-4.7-2.54-19.28-10.93z"
+        fill={getIconColor(color, 143, '#E8C742')}
+      />
+      <path
+        d="M463.65 235.28v-16.06l6.82-13.64-23.72-114.55-28.99 114.56 7.76 12.69v16.55c-11.33 0.23-20.44 9.46-20.44 20.85 0 11.52 9.34 20.87 20.87 20.87 6.8 0 12.85-3.26 16.66-8.3 3.81 5.04 9.85 8.3 16.66 8.3 11.52 0 20.87-9.34 20.87-20.87-0.01-10.02-7.07-18.38-16.49-20.4zM608.66 235.28v-16.06l6.82-13.64-23.73-114.55-28.98 114.56 7.76 12.69v16.55c-11.33 0.23-20.44 9.46-20.44 20.85 0 11.52 9.34 20.87 20.87 20.87 6.8 0 12.85-3.26 16.66-8.3 3.81 5.04 9.85 8.3 16.66 8.3 11.52 0 20.87-9.34 20.87-20.87-0.02-10.02-7.08-18.38-16.49-20.4z"
+        fill={getIconColor(color, 144, '#ECCB80')}
+      />
+      <path
+        d="M661.25 232.63c-7.5 0-13.58-6.08-13.58-13.58s6.08-13.58 13.58-13.58c0.48 0 0.93 0.09 1.4 0.14v-39.68c6.73 0 12.18-5.12 12.18-11.43s-5.45-11.43-12.18-11.43-12.18 5.12-12.18 11.43c0 3.81 2.01 7.16 5.06 9.23l-47.78 61.97 1.84 3.75 1.11 2.26c0.34 0.79 0.63 1.6 0.87 2.43 1.27 4.29 1.27 9-0.28 13.56-3.99 11.73-16.73 18-28.46 14.01a22.311 22.311 0 0 1-9.98-6.84 22.408 22.408 0 0 1-3.97-7 22.623 22.623 0 0 1-7.31 3.1c-3.91 0.89-8.11 0.74-12.18-0.64-11.73-3.99-18-16.73-14.01-28.46 1.63-4.78 4.71-8.65 8.58-11.29 0.07-0.05 6.75-3.36 14.82-7.34L514.92 86.42c6.06-0.66 10.78-5.43 10.78-11.3 0-6.31-5.45-11.43-12.18-11.43-6.73 0-12.18 5.12-12.18 11.43 0 5.93 4.84 10.75 11 11.32l-36.68 116.95c7.92 3.92 14.44 7.14 14.51 7.19 3.87 2.64 6.95 6.51 8.58 11.29 3.99 11.73-2.28 24.47-14.01 28.46a22.279 22.279 0 0 1-12.18 0.64c-2.61-0.59-5.08-1.64-7.31-3.1-0.89 2.54-2.24 4.92-3.97 7a22.39 22.39 0 0 1-9.98 6.84c-11.73 3.99-24.47-2.28-28.46-14.01a22.312 22.312 0 0 1-0.28-13.56c0.24-0.83 0.54-1.64 0.87-2.43l1.11-2.26 1.12-2.28-48.91-63.43c3.05-2.08 5.06-5.43 5.06-9.23 0-6.31-5.45-11.43-12.18-11.43s-12.18 5.12-12.18 11.43 5.45 11.43 12.18 11.43v39.57c7.34 0.19 13.23 6.16 13.23 13.54 0 7.38-5.9 13.36-13.23 13.54v74.94c26.33-12.4 72.33-27.1 142.64-27.1 70.6 2.34 121.42 19.15 150.33 31.88 0-0.09 0.03-0.17 0.03-0.26v-79.57c-0.45 0.06-0.9 0.15-1.38 0.15z m-145.2-30.96c-7.29 0-13.21-6.54-13.21-14.61s5.91-14.61 13.21-14.61c7.29 0 13.21 6.54 13.21 14.61s-5.91 14.61-13.21 14.61z"
+        fill={getIconColor(color, 145, '#F5C754')}
+      />
+      <path
+        d="M511.11 725l-8.36-4.04-3.16-8.82 3.88-8.43 0.09-0.03 8.58-3.08 8.36 4.04 3.16 8.82-3.88 8.43-0.09 0.03-8.58 3.08z m-8.01-4.36l8.04 3.88 8.32-2.99 3.73-8.11-3.04-8.48-8.04-3.88-8.32 2.99-3.73 8.11 3.04 8.48z"
+        fill={getIconColor(color, 146, '#EAB640')}
+      />
+      <path
+        d="M520.16 704.94l-0.39 0.13-5.73 1.78-1.93-5.79z"
+        fill={getIconColor(color, 147, '#D4554C')}
+      />
+      <path
+        d="M512.11 701.06l-2.9 5.79-5.43-2.8z"
+        fill={getIconColor(color, 148, '#CC4A3B')}
+      />
+      <path
+        d="M505.79 710.34l-5.75 1.82 3.74-8.11z"
+        fill={getIconColor(color, 149, '#AF3F36')}
+      />
+      <path
+        d="M505.79 715.26l-2.7 5.39-3.05-8.49z"
+        fill={getIconColor(color, 150, '#861C21')}
+      />
+      <path
+        d="M511.13 724.54l-8.04-3.89 6.12-1.91zM519.47 721.55l-8.34 2.99 2.91-5.8z"
+        fill={getIconColor(color, 151, '#C0372B')}
+      />
+      <path
+        d="M523.21 713.43l-3.74 8.12-2.01-6.29z"
+        fill={getIconColor(color, 152, '#D4554C')}
+      />
+      <path
+        d="M523.21 713.43l-5.75-3.09 2.31-5.27 0.39-0.13z"
+        fill={getIconColor(color, 153, '#CC4A3B')}
+      />
+      <path
+        d="M517.46 710.34v4.92l-3.42 3.48h-4.83l-3.42-3.48v-4.92l3.42-3.49h4.83z"
+        fill={getIconColor(color, 154, '#D4554C')}
+      />
+      <path
+        d="M514.04 706.85h-4.83l2.9-5.79z"
+        fill={getIconColor(color, 155, '#EB6653')}
+      />
+      <path
+        d="M519.77 705.07l-2.31 5.27-3.42-3.49z"
+        fill={getIconColor(color, 156, '#EA5E50')}
+      />
+      <path
+        d="M523.21 713.43l-5.75 1.83v-4.92z"
+        fill={getIconColor(color, 157, '#C0372B')}
+      />
+      <path
+        d="M519.47 721.55l-5.43-2.81 3.42-3.48zM514.04 718.74l-2.91 5.8-1.92-5.8z"
+        fill={getIconColor(color, 158, '#CC4A3B')}
+      />
+      <path
+        d="M509.21 718.74l-6.12 1.91 2.7-5.39z"
+        fill={getIconColor(color, 159, '#C0372B')}
+      />
+      <path
+        d="M505.79 710.34v4.92l-5.75-3.1z"
+        fill={getIconColor(color, 160, '#CC4A3B')}
+      />
+      <path
+        d="M509.21 706.85l-3.42 3.49-2.01-6.29zM516.66 709.52l-4.68 9.22h-2.77l-2.72-2.76 4.96-9.13h2.59z"
+        fill={getIconColor(color, 161, '#E07F6A')}
+      />
+      <path
+        d="M512.68 472.02l-21.24 29.19-13.5-10.17z"
+        fill={getIconColor(color, 162, '#C2DB85')}
+      />
+      <path
+        d="M546.52 491.48l-11.06 9.51-22.78-28.97z"
+        fill={getIconColor(color, 163, '#84C148')}
+      />
+      <path
+        d="M511.79 550.54l-33.85-9.07 13.5-40.26z"
+        fill={getIconColor(color, 164, '#6BB72D')}
+      />
+      <path
+        d="M535.46 500.99l-23.67 49.55-20.35-49.33 21.24-29.19z"
+        fill={getIconColor(color, 165, '#A6CD4A')}
+      />
+      <path
+        d="M513.12 568.68l-35.18-27.21 33.85 9.07z"
+        fill={getIconColor(color, 166, '#408638')}
+      />
+      <path
+        d="M548.07 543.02l-34.95 25.66-1.33-18.14z"
+        fill={getIconColor(color, 167, '#4A9737')}
+      />
+      <path
+        d="M548.07 543.02l-36.28 7.52 23.67-49.55z"
+        fill={getIconColor(color, 168, '#6CB834')}
+      />
+      <path
+        d="M548.07 543.02l-12.61-42.03 11.06-9.51z"
+        fill={getIconColor(color, 169, '#57B232')}
+      />
+      <path
+        d="M491.44 501.21l-13.5 40.26v-50.43z"
+        fill={getIconColor(color, 170, '#83C14F')}
+      />
+      <path
+        d="M518.23 479.08l-23.14 30.98 10.3 24.95 24.21-41.32z"
+        fill={getIconColor(color, 171, '#BBD87A')}
+      />
+      <path
+        d="M560.13 281.69l-20.55-13.42-23.44 9.19-22.3-8.98-21.06 12.8-3.93 28.7 13.84 31.39 33.66 17.75 31.59-19 15.49-29.94-3.3-28.49z m-44.19 58.64l-19-10.12-9.29-19.82 0.41-16.52 14.87-7.44 13.22 5.79 13.63-5.57 14.87 7.02-0.82 17.55-8.47 18.38-19.42 10.73z"
+        fill={getIconColor(color, 172, '#F2DD81')}
+      />
+      <path
+        d="M516.15 280.8v13.4l-12-5.25-8.25-16.31z"
+        fill={getIconColor(color, 173, '#DC6252')}
+      />
+      <path
+        d="M537.43 272.45l-8.91 16.69-12.37 5.06v-13.4zM504.15 288.95l-13.5 6.75-13.87-11.44 19.12-11.62z"
+        fill={getIconColor(color, 174, '#DA4337')}
+      />
+      <path
+        d="M490.65 295.7l-0.37 15-17.07-0.38 3.57-26.06z"
+        fill={getIconColor(color, 175, '#DC6252')}
+      />
+      <path
+        d="M498.71 328.7l-12.93 10.12-12.57-28.5 17.07 0.38z"
+        fill={getIconColor(color, 176, '#D73739')}
+      />
+      <path
+        d="M516.33 354.94l-30.55-16.12 12.93-10.12 17.25 9.18z"
+        fill={getIconColor(color, 177, '#CF2429')}
+      />
+      <path
+        d="M545.01 337.69l-28.68 17.25-0.37-17.06 17.62-9.74z"
+        fill={getIconColor(color, 178, '#D5383C')}
+      />
+      <path
+        d="M559.08 310.51l-14.07 27.18-11.43-9.55 7.69-16.69z"
+        fill={getIconColor(color, 179, '#DC6252')}
+      />
+      <path
+        d="M559.08 310.51l-17.81 0.94 0.75-15.93 14.06-10.88z"
+        fill={getIconColor(color, 180, '#DA4337')}
+      />
+      <path
+        d="M542.02 295.52l-0.75 15.93-7.69 16.69-17.62 9.74-17.25-9.18-8.43-18 0.37-15 13.5-6.75 12 5.25 12.37-5.06z"
+        fill={getIconColor(color, 181, '#D04D42')}
+      />
+      <path
+        d="M556.08 284.64l-14.06 10.88-13.5-6.38 8.91-16.69z"
+        fill={getIconColor(color, 182, '#DC6252')}
+      />
+      <path
+        d="M516.15 294.2l-25.87 16.5 8.43 18 17.25 9.18 12.56-48.74z"
+        fill={getIconColor(color, 183, '#EB6B65')}
+      />
+    </svg>
+  );
+};
+
+export default IconGuanjun;

src/components/iconfont/IconIconArrowLeft.tsx

@@ -0,0 +1,29 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
+import { getIconColor } from './helper';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  display: 'block',
+};
+
+const IconIconArrowLeft: FunctionComponent<Props> = ({ size = 18, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
+      <path
+        d="M669.472 162.88l49.504 49.696-294.56 300.48 297.024 297.952-49.088 50.08-346.56-347.616z"
+        fill={getIconColor(color, 0, '#333333')}
+      />
+    </svg>
+  );
+};
+
+export default IconIconArrowLeft;

src/components/iconfont/IconJindun.tsx

@@ -0,0 +1,249 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
+import { getIconColor } from './helper';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  display: 'block',
+};
+
+const IconJindun: FunctionComponent<Props> = ({ size = 18, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
+      <path
+        d="M285.77 413.92s-157.5-65.25-165.04-66.93-24.51 0.96-23.81 15.02 15.96 136.36 55.1 181.26c62.3 20.53 162.34 53.64 162.34 53.64l-28.59-182.99z"
+        fill={getIconColor(color, 0, '#D89D31')}
+      />
+      <path
+        d="M166.02 563.01s38.5 112.59 62.38 139.48c31.11 5.03 116.7 6.41 116.7 6.41l46.45-18.37-53.89-108.57-165.77-32.14c-0.01 0-7.35 1.32-5.87 13.19zM239.88 704.41s25.31 68.46 88.17 92.07c37.75 1.58 74.61-2.67 74.61-2.67L364.1 725.6l-31.21-14.97-93.01-6.22z"
+        fill={getIconColor(color, 1, '#D89D31')}
+      />
+      <path
+        d="M114.99 359.75s94.1 48.53 150.33 70.86c9.15 43.93 17.83 142.94 17.83 142.94l-115.38-46.92s-55.51-100.5-52.78-166.88zM181.69 566.82l54.41 121.09 115.2 3.44-55.32-94.76zM318.52 718.71l-59.42-3.07 83.7 66.07 42.1-1.4-44.06-61.94z"
+        fill={getIconColor(color, 2, '#F5C754')}
+      />
+      <path
+        d="M146.35 375.6s10.12 21.25 12.61 30.02-1.53 77.4-5.83 84.93c6.07 19.47 14.63 36.08 14.63 36.08l20.72 8.43s-13.55-48.98-13.5-76.58c0.05-27.61 2.15-51.83 20.54-58.91-26.05-12.56-49.17-23.97-49.17-23.97zM239.91 581.98s-15.07 10.03-18.09 16.69c-3.01 6.66 13.14 74.52 28.92 83.39s17.87 6.82 17.87 6.82l-32.51-0.97-43.57-96.96 6.26-19.67 41.12 10.7z"
+        fill={getIconColor(color, 3, '#EDDFA7')}
+      />
+      <path
+        d="M737.11 413.92s157.5-65.25 165.04-66.93c7.55-1.68 24.51 0.96 23.81 15.02-0.71 14.06-15.96 136.36-55.1 181.26-62.3 20.53-162.34 53.64-162.34 53.64l28.59-182.99z"
+        fill={getIconColor(color, 4, '#D89D31')}
+      />
+      <path
+        d="M856.87 563.01s-38.5 112.59-62.38 139.48c-31.11 5.03-116.7 6.41-116.7 6.41l-46.45-18.37 53.89-108.57L851 549.82c0.01 0 7.35 1.32 5.87 13.19z"
+        fill={getIconColor(color, 5, '#D89D31')}
+      />
+      <path
+        d="M783.01 704.41s-25.31 68.46-88.17 92.07c-37.75 1.58-74.61-2.67-74.61-2.67l38.55-68.21L690 710.63l93.01-6.22z"
+        fill={getIconColor(color, 6, '#D89D31')}
+      />
+      <path
+        d="M907.9 359.75s-94.1 48.53-150.33 70.86c-9.15 43.93-17.83 142.94-17.83 142.94l115.38-46.92s55.51-100.5 52.78-166.88zM841.19 566.82l-54.4 121.09-115.2 3.44 55.32-94.76zM704.36 718.71l59.43-3.07-83.71 66.07-42.09-1.4 44.06-61.94z"
+        fill={getIconColor(color, 7, '#F5C754')}
+      />
+      <path
+        d="M876.53 375.6s-10.12 21.25-12.61 30.02 1.53 77.4 5.83 84.93c-6.07 19.47-14.63 36.08-14.63 36.08l-20.72 8.43s13.55-48.98 13.5-76.58c-0.05-27.61-2.15-51.83-20.54-58.91 26.06-12.56 49.17-23.97 49.17-23.97zM782.98 581.98s15.07 10.03 18.09 16.69c3.01 6.66-13.14 74.52-28.92 83.39s-17.87 6.82-17.87 6.82l32.51-0.97 43.57-96.96-6.26-19.67-41.12 10.7z"
+        fill={getIconColor(color, 8, '#EDDFA7')}
+      />
+      <path
+        d="M707.15 520.45c-9.15 53.06-25.42 120.88-53.01 163.51-22.07 37.68-109.56 97.34-145.12 97.34-32.45 0-129.88-65.46-152.71-105.93-24.34-41.6-40.28-118.99-49-173.32 42.68 69 119.08 114.98 206.19 114.98 79.14 0.01 149.41-37.91 193.65-96.58z"
+        fill={getIconColor(color, 9, '#F2DD81')}
+      />
+      <path
+        d="M509.25 847.19c-41.83 0-167.38-84.42-196.85-136.53-51.69-88.29-73.81-301.46-73.81-301.46l40.13 21.46s18.82 181.43 62.82 256.56c25.09 44.38 131.96 116.25 167.57 116.25l0.14 43.72z"
+        fill={getIconColor(color, 10, '#EAB640')}
+      />
+      <path
+        d="M777.94 409.2s-16.18 211.33-81.68 312.54c-28.44 48.58-141.16 125.45-187 125.45l-0.14-43.72c39 0 134.93-65.46 159.17-106.82 55.75-86.12 69.52-265.99 69.52-265.99l40.13-21.46z"
+        fill={getIconColor(color, 11, '#F2DD81')}
+      />
+      <path
+        d="M777.94 409.2l-40.13 21.46s-21.88-12.03-38.63-34.57c-19.38-18.82-28.16-50.27-28.16-50.27l28.49-36.27s10.28 36.93 33.06 59.09c19.66 26.41 45.37 40.56 45.37 40.56z"
+        fill={getIconColor(color, 12, '#EDDFA7')}
+      />
+      <path
+        d="M699.51 309.54l-28.49 36.27s-57.73-39.24-164.12-42.78c-111.96 0-157.1 40.46-157.1 40.46l-27.73-36.69s53.06-47.54 184.54-47.54c125.08 4.16 192.9 50.28 192.9 50.28z"
+        fill={getIconColor(color, 13, '#F2DD81')}
+      />
+      <path
+        d="M349.8 343.5s-11.41 32.68-29.19 52.59c-17.26 20.42-41.88 34.57-41.88 34.57L238.6 409.2s28.91-16.6 49.19-40.56c20.94-23.39 34.29-61.83 34.29-61.83l27.72 36.69zM509.11 803.47c-35.61 0-142.48-71.87-167.57-116.25-44-75.13-62.82-256.56-62.82-256.56L299 441.51s17.21 165.4 57.3 233.88c22.83 40.46 120.26 105.93 152.71 105.93l0.1 22.15zM737.8 430.65s-13.77 179.88-69.52 265.99C644.04 738 548.11 803.46 509.11 803.46l-0.09-22.17c35.56 0 123.05-59.66 145.12-97.34 50.79-78.52 63.34-242.46 63.34-242.46l20.32-10.84z"
+        fill={getIconColor(color, 14, '#F5C754')}
+      />
+      <path
+        d="M737.8 430.65l-20.33 10.85s-19.9-10.99-35.18-31.5c-17.69-17.17-25.66-45.84-25.66-45.84l14.38-18.35s8.77 31.46 28.16 50.27c16.75 22.55 38.63 34.57 38.63 34.57z"
+        fill={getIconColor(color, 15, '#EAB640')}
+      />
+      <path
+        d="M671.02 345.81l-14.38 18.35s-52.63-35.8-149.64-39c-102.01 0-143.18 36.88-143.18 36.88L349.8 343.5s45.13-40.46 157.1-40.46c106.39 3.53 164.12 42.77 164.12 42.77z"
+        fill={getIconColor(color, 16, '#F5C754')}
+      />
+      <path
+        d="M363.81 362.03s-10.38 29.81-26.6 47.96c-15.75 18.63-38.2 31.5-38.2 31.5l-20.28-10.85s24.62-14.15 41.88-34.57c17.78-19.9 29.19-52.59 29.19-52.59l14.01 18.55z"
+        fill={getIconColor(color, 17, '#F2DD81')}
+      />
+      <path
+        d="M717.47 441.5s-2.59 34.24-10.33 78.95c-44.24 58.67-114.51 96.59-193.65 96.59-87.11 0-163.51-45.98-206.19-114.98-5.66-35.09-8.3-60.56-8.3-60.56s22.45-12.88 38.2-31.5c16.22-18.16 26.6-47.96 26.6-47.96s41.17-36.88 143.18-36.88c97.01 3.21 149.64 39 149.64 39s7.97 28.67 25.66 45.84c15.29 20.51 35.19 31.5 35.19 31.5z"
+        fill={getIconColor(color, 18, '#EDDFA7')}
+      />
+      <path
+        d="M510.79 705.3l-82.73-54.28v-108.2l82.73-54.28 82.73 54.28v108.2l-82.73 54.28z m-79.54-56.02l79.53 52.18 79.53-52.18V544.54l-79.53-52.18-79.53 52.18v104.74z"
+        fill={getIconColor(color, 19, '#B41847')}
+      />
+      <path
+        d="M510.78 492.33v31.83l-55.44 36.38-24.26-15.92z"
+        fill={getIconColor(color, 20, '#E26D81')}
+      />
+      <path
+        d="M590.48 544.62l-24.24 15.92-14.26-9.36-41.2-27.02v-31.83z"
+        fill={getIconColor(color, 21, '#F2A8B4')}
+      />
+      <path
+        d="M590.48 544.62v104.59l-24.24-15.92v-72.75z"
+        fill={getIconColor(color, 22, '#CE497B')}
+      />
+      <path
+        d="M590.48 649.21l-79.7 52.29v-31.83l55.46-36.38z"
+        fill={getIconColor(color, 23, '#D34480')}
+      />
+      <path
+        d="M510.78 669.67v31.83l-79.7-52.29 24.26-15.92 52.73 34.6z"
+        fill={getIconColor(color, 24, '#B12650')}
+      />
+      <path
+        d="M455.34 560.54v72.75l-24.26 15.92V544.62z"
+        fill={getIconColor(color, 25, '#CE497B')}
+      />
+      <path
+        d="M566.24 560.54v72.75l-55.46 36.38-2.71-1.78 43.91-116.71z"
+        fill={getIconColor(color, 26, '#DF5C81')}
+      />
+      <path
+        d="M551.98 551.18l-43.91 116.71-52.73-34.6v-72.75l55.44-36.38z"
+        fill={getIconColor(color, 27, '#EFADBE')}
+      />
+      <path
+        d="M377.45 448.82l12.24-12.08-12.11-24.77-0.13 36.85z"
+        fill={getIconColor(color, 28, '#F2DD81')}
+      />
+      <path
+        d="M416.96 440.81l-27.27-4.07-12.24 12.08z"
+        fill={getIconColor(color, 29, '#EAAB25')}
+      />
+      <path
+        d="M377.58 411.97l-12.29 24.68 12.16 12.17z"
+        fill={getIconColor(color, 30, '#D89D31')}
+      />
+      <path
+        d="M377.45 448.82l-0.1 25.43 24.36 12.91v-0.01l-24.26-38.33z"
+        fill={getIconColor(color, 31, '#E8C742')}
+      />
+      <path
+        d="M352.91 486.98l24.44-12.73 0.1-25.43z"
+        fill={getIconColor(color, 32, '#EAAB25')}
+      />
+      <path
+        d="M401.71 487.15l-23.85-37.68-0.41-0.65h0.03l15.86 8.99 3.87 2.09-0.07 0.07z"
+        fill={getIconColor(color, 33, '#EAAB25')}
+      />
+      <path
+        d="M377.45 448.82l-12.16-12.17-27.29 3.86 39.45 8.31z"
+        fill={getIconColor(color, 34, '#E8C742')}
+      />
+      <path
+        d="M377.45 448.82l-19.78 11.01-4.76 27.15 24.54-38.16z"
+        fill={getIconColor(color, 35, '#E8C742')}
+      />
+      <path
+        d="M377.45 448.82L338 440.51l19.67 19.32 19.78-11.01z"
+        fill={getIconColor(color, 36, '#EAAB25')}
+      />
+      <path
+        d="M416.96 440.81l-19.75 19.09-3.87-2.09-15.86-8.99z"
+        fill={getIconColor(color, 37, '#E8C742')}
+      />
+      <path
+        d="M510.76 410.2L523 398.12l-12.11-24.77-0.13 36.85z"
+        fill={getIconColor(color, 38, '#F2DD81')}
+      />
+      <path
+        d="M550.27 402.19L523 398.12l-12.24 12.08z"
+        fill={getIconColor(color, 39, '#EAAB25')}
+      />
+      <path
+        d="M510.89 373.35l-12.29 24.68 12.16 12.17z"
+        fill={getIconColor(color, 40, '#D89D31')}
+      />
+      <path
+        d="M510.76 410.2l-0.1 25.42 24.36 12.92-0.01-0.01-24.25-38.33z"
+        fill={getIconColor(color, 41, '#E8C742')}
+      />
+      <path
+        d="M486.22 448.36l24.44-12.74 0.1-25.42z"
+        fill={getIconColor(color, 42, '#EAAB25')}
+      />
+      <path
+        d="M535.02 448.53l-23.85-37.68-0.41-0.65h0.03l15.86 8.99 3.87 2.09-0.07 0.07z"
+        fill={getIconColor(color, 43, '#EAAB25')}
+      />
+      <path
+        d="M510.76 410.2l-12.16-12.17-27.29 3.86 39.45 8.31z"
+        fill={getIconColor(color, 44, '#E8C742')}
+      />
+      <path
+        d="M510.76 410.2l-19.78 11.01-4.76 27.15 24.54-38.16z"
+        fill={getIconColor(color, 45, '#E8C742')}
+      />
+      <path
+        d="M510.76 410.2l-39.45-8.31 19.67 19.32 19.78-11.01z"
+        fill={getIconColor(color, 46, '#EAAB25')}
+      />
+      <path
+        d="M550.27 402.19l-19.75 19.09-3.87-2.09-15.86-8.99z"
+        fill={getIconColor(color, 47, '#E8C742')}
+      />
+      <path
+        d="M644.07 449.61l12.24-12.08-12.11-24.77-0.13 36.85z"
+        fill={getIconColor(color, 48, '#F2DD81')}
+      />
+      <path
+        d="M683.58 441.59l-27.27-4.06-12.24 12.08z"
+        fill={getIconColor(color, 49, '#EAAB25')}
+      />
+      <path
+        d="M644.2 412.76l-12.29 24.68 12.16 12.17z"
+        fill={getIconColor(color, 50, '#D89D31')}
+      />
+      <path
+        d="M644.07 449.61l-0.1 25.42 24.36 12.92-0.01-0.01-24.25-38.33z"
+        fill={getIconColor(color, 51, '#E8C742')}
+      />
+      <path
+        d="M619.52 487.77l24.45-12.74 0.1-25.42zM668.33 487.94l-23.85-37.68-0.41-0.65h0.03l15.86 8.99 3.87 2.09-0.07 0.07z"
+        fill={getIconColor(color, 52, '#EAAB25')}
+      />
+      <path
+        d="M644.07 449.61l-12.16-12.17-27.3 3.86 39.46 8.31zM644.07 449.61l-19.79 11.01-4.76 27.15 24.55-38.16z"
+        fill={getIconColor(color, 53, '#E8C742')}
+      />
+      <path
+        d="M644.07 449.61l-39.46-8.31 19.67 19.32 19.79-11.01z"
+        fill={getIconColor(color, 54, '#EAAB25')}
+      />
+      <path
+        d="M683.58 441.6l-19.75 19.09-3.87-2.09-15.86-8.99z"
+        fill={getIconColor(color, 55, '#E8C742')}
+      />
+    </svg>
+  );
+};
+
+export default IconJindun;

src/components/iconfont/IconTongdun.tsx

@@ -0,0 +1,145 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
+import { getIconColor } from './helper';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  display: 'block',
+};
+
+const IconTongdun: FunctionComponent<Props> = ({ size = 18, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
+      <path
+        d="M134.2 311.44l-23.23 15.71 137.32 49.87 24.59-19.81z"
+        fill={getIconColor(color, 0, '#E7AE96')}
+      />
+      <path
+        d="M227.11 467.2s-95.64-45.09-116.14-140.05c85.14 30.92 137.31 49.87 137.31 49.87l-21.17 90.18z"
+        fill={getIconColor(color, 1, '#CC784D')}
+      />
+      <path
+        d="M179.97 428.94l-27.32 17.76 92.9 25.96 6.15-27.32z"
+        fill={getIconColor(color, 2, '#E7AE96')}
+      />
+      <path
+        d="M242.14 568.99s-71.73-27.33-89.49-122.28c34.8 9.72 92.91 25.96 92.91 25.96l-3.42 96.32z"
+        fill={getIconColor(color, 3, '#EED5C1')}
+      />
+      <path
+        d="M890.21 311.44l23.22 15.71-137.31 49.87-24.59-19.81z"
+        fill={getIconColor(color, 4, '#E7AE96')}
+      />
+      <path
+        d="M797.3 467.2s95.64-45.09 116.14-140.05c-85.14 30.92-137.31 49.87-137.31 49.87l21.17 90.18z"
+        fill={getIconColor(color, 5, '#CC784D')}
+      />
+      <path
+        d="M844.44 428.94l27.32 17.76-92.91 25.96-6.14-27.32zM782.27 568.99s71.73-27.33 89.49-122.28c-34.8 9.72-92.91 25.96-92.91 25.96l3.42 96.32z"
+        fill={getIconColor(color, 6, '#E7AE96')}
+      />
+      <path
+        d="M732.44 515.58c-10.16 58.92-28.23 134.24-58.87 181.58-24.51 41.85-121.67 108.1-161.16 108.1-36.03 0-144.24-72.7-169.59-117.63-27.03-46.19-44.73-132.14-54.42-192.48 47.4 76.62 132.25 127.69 228.98 127.69 87.89 0 165.93-42.11 215.06-107.26z"
+        fill={getIconColor(color, 7, '#C46C4E')}
+      />
+      <path
+        d="M512.67 878.43c-46.46 0-185.88-93.75-218.61-151.62-57.4-98.05-81.97-334.78-81.97-334.78l44.57 23.83s20.9 201.49 69.76 284.92c27.86 49.28 146.54 129.1 186.09 129.1l0.16 48.55z"
+        fill={getIconColor(color, 8, '#E7AE96')}
+      />
+      <path
+        d="M811.05 392.03s-17.96 234.69-90.71 347.09c-31.58 53.95-156.76 139.32-207.67 139.32l-0.16-48.55c43.31 0 149.84-72.7 176.76-118.63 61.91-95.64 77.2-295.39 77.2-295.39l44.58-23.84z"
+        fill={getIconColor(color, 9, '#EED5C1')}
+      />
+      <path
+        d="M811.05 392.03l-44.57 23.83s-24.3-13.36-42.89-38.39c-21.53-20.9-31.27-55.83-31.27-55.83l31.63-40.28s11.42 41.01 36.71 65.63c21.85 29.32 50.39 45.04 50.39 45.04z"
+        fill={getIconColor(color, 10, '#EED5C1')}
+      />
+      <path
+        d="M723.95 281.36l-31.63 40.28s-64.11-43.58-182.26-47.5c-124.34 0-174.46 44.94-174.46 44.94l-30.8-40.75s58.92-52.79 204.94-52.79c138.9 4.6 214.21 55.82 214.21 55.82z"
+        fill={getIconColor(color, 11, '#E7AE96')}
+      />
+      <path
+        d="M335.59 319.07s-12.67 36.3-32.42 58.4c-19.17 22.68-46.51 38.39-46.51 38.39l-44.57-23.83s32.11-18.44 54.63-45.04c23.25-25.98 38.08-68.66 38.08-68.66l30.79 40.74z"
+        fill={getIconColor(color, 12, '#C46C4E')}
+      />
+      <path
+        d="M512.51 829.88c-39.54 0-158.22-79.82-186.09-129.1-48.87-83.43-69.76-284.92-69.76-284.92l22.52 12.05s19.12 183.68 63.64 259.73c25.35 44.94 133.56 117.63 169.59 117.63l0.1 24.61z"
+        fill={getIconColor(color, 13, '#EED5C1')}
+      />
+      <path
+        d="M766.48 415.86s-15.29 199.76-77.2 295.39c-26.92 45.93-133.45 118.63-176.76 118.63l-0.1-24.62c39.49 0 136.65-66.25 161.16-108.1 56.41-87.2 70.34-269.26 70.34-269.26l22.56-12.04z"
+        fill={getIconColor(color, 14, '#D77D65')}
+      />
+      <path
+        d="M766.48 415.86l-22.57 12.05s-22.1-12.2-39.07-34.99c-19.64-19.06-28.49-50.91-28.49-50.91l15.97-20.37s9.74 34.93 31.27 55.83c18.59 25.03 42.89 38.39 42.89 38.39z"
+        fill={getIconColor(color, 15, '#C46C4E')}
+      />
+      <path
+        d="M692.32 321.64l-15.97 20.37s-58.45-39.75-166.18-43.31c-113.29 0-159.01 40.96-159.01 40.96l-15.56-20.58s50.12-44.94 174.46-44.94c118.15 3.92 182.26 47.5 182.26 47.5z"
+        fill={getIconColor(color, 16, '#D77D65')}
+      />
+      <path
+        d="M351.15 339.65s-11.52 33.1-29.54 53.26c-17.49 20.69-42.42 34.99-42.42 34.99l-22.52-12.05s27.34-15.71 46.51-38.39c19.75-22.1 32.42-58.4 32.42-58.4l15.55 20.59z"
+        fill={getIconColor(color, 17, '#E7AE96')}
+      />
+      <path
+        d="M743.91 427.9s-2.88 38.02-11.47 87.68c-49.13 65.15-127.17 107.26-215.05 107.26-96.74 0-181.58-51.07-228.98-127.69-6.28-38.97-9.22-67.25-9.22-67.25s24.93-14.3 42.42-34.99c18.02-20.16 29.54-53.26 29.54-53.26s45.72-40.96 159.01-40.96C617.89 302.25 676.34 342 676.34 342s8.85 31.84 28.49 50.91c16.97 22.79 39.08 34.99 39.08 34.99z"
+        fill={getIconColor(color, 18, '#DD8B66')}
+      />
+      <path
+        d="M514.42 716.42c-10.53 0-21.05-4.01-29.06-12.02L379 598.05c-16.02-16.03-16.02-42.1 0-58.12l106.35-106.36c16.02-16.02 42.1-16.02 58.13 0l106.35 106.36c15.95 16.03 15.95 42.1 0.01 58.12L543.48 704.4c-8.01 8.02-18.53 12.02-29.06 12.02z m0-287.88c-8.74 0-17.47 3.32-24.12 9.97L383.95 544.87c-13.3 13.3-13.3 34.93 0 48.23L490.3 699.46c13.3 13.3 34.94 13.3 48.23 0L644.89 593.1c13.23-13.3 13.23-34.94-0.01-48.24L538.54 438.52c-6.65-6.65-15.39-9.98-24.12-9.98z"
+        fill={getIconColor(color, 19, '#C65B1A')}
+      />
+      <path
+        d="M540.97 436.04l-8.6 43.15c-9.92-9.92-25.99-9.92-35.92 0l-8.6-43.15c14.65-14.65 38.42-14.65 53.12 0z"
+        fill={getIconColor(color, 20, '#F0E387')}
+      />
+      <path
+        d="M496.45 479.19l-71.83 71.84-43.15-8.6 106.38-106.39z"
+        fill={getIconColor(color, 21, '#F1B233')}
+      />
+      <path
+        d="M424.62 586.95l-43.15 8.6c-14.65-14.65-14.65-38.47 0-53.12l43.15 8.6c-9.93 9.92-9.93 25.99 0 35.92z"
+        fill={getIconColor(color, 22, '#F09729')}
+      />
+      <path
+        d="M496.45 658.78l-8.6 43.15-106.38-106.38 43.15-8.6z"
+        fill={getIconColor(color, 23, '#E66C24')}
+      />
+      <path
+        d="M540.97 701.93c-14.7 14.65-38.47 14.65-53.12 0l8.6-43.15c9.92 9.92 25.99 9.92 35.92 0l8.6 43.15z"
+        fill={getIconColor(color, 24, '#E78D21')}
+      />
+      <path
+        d="M647.31 595.55L540.97 701.93l-8.6-43.15 71.84-71.83z"
+        fill={getIconColor(color, 25, '#F09729')}
+      />
+      <path
+        d="M647.31 595.55l-43.1-8.6c9.88-9.92 9.88-25.99 0-35.92l43.1-8.6c14.7 14.65 14.7 38.47 0 53.12z"
+        fill={getIconColor(color, 26, '#EFA52C')}
+      />
+      <path
+        d="M647.31 542.43l-43.1 8.6-71.84-71.84 8.6-43.15z"
+        fill={getIconColor(color, 27, '#E78D21')}
+      />
+      <path
+        d="M532.35 479.19c-9.91-9.91-25.98-9.91-35.89 0l-71.85 71.85c-4.96 4.96-7.43 11.45-7.43 17.94h194.45c0-6.49-2.48-12.99-7.43-17.94l-71.85-71.85z"
+        fill={getIconColor(color, 28, '#F1D949')}
+      />
+      <path
+        d="M424.61 586.92l71.85 71.85c9.91 9.91 25.98 9.91 35.89 0l71.85-71.85c4.96-4.96 7.43-11.45 7.43-17.94H417.18c0 6.5 2.48 12.99 7.43 17.94z"
+        fill={getIconColor(color, 29, '#F2C741')}
+      />
+    </svg>
+  );
+};
+
+export default IconTongdun;

src/components/iconfont/IconTransfer.tsx

@@ -0,0 +1,33 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
+import { getIconColor } from './helper';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  display: 'block',
+};
+
+const IconTransfer: FunctionComponent<Props> = ({ size = 18, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
+      <path
+        d="M85.346462 170.653538c0-47.104 38.203077-85.307077 85.307076-85.307076H512c47.143385 0 85.346462 38.203077 85.346462 85.307076v170.692924c0 47.104-38.203077 85.307077-85.346462 85.307076H170.653538a85.346462 85.346462 0 0 1-85.307076-85.307076V170.653538zM426.653538 682.653538c0-47.104 38.203077-85.307077 85.346462-85.307076h341.346462c47.104 0 85.307077 38.203077 85.307076 85.307076v170.692924c0 47.104-38.203077 85.307077-85.307076 85.307076H512a85.346462 85.346462 0 0 1-85.346462-85.307076v-170.692924z"
+        fill={getIconColor(color, 0, '#666666')}
+      />
+      <path
+        d="M879.064615 287.980308l-30.72 30.72a32.019692 32.019692 0 0 0 45.292308 45.292307l55.138462-55.177846c29.184-29.144615 29.184-76.445538 0-105.629538l-55.138462-55.138462a32.019692 32.019692 0 0 0-45.292308 45.252923l30.72 30.72h-196.411077a32.019692 32.019692 0 0 0 0 63.960616h196.450462zM144.935385 799.980308l30.72 30.72a32.019692 32.019692 0 0 1-45.292308 45.292307l-55.138462-55.177846c-29.184-29.144615-29.184-76.445538 0-105.629538l55.138462-55.138462a32.019692 32.019692 0 0 1 45.292308 45.252923l-30.72 30.72h196.411077a32.019692 32.019692 0 0 1 0 63.960616H144.896z"
+        fill={getIconColor(color, 1, '#FFFFFF')}
+      />
+    </svg>
+  );
+};
+
+export default IconTransfer;

src/components/iconfont/IconTuichu.tsx

@@ -0,0 +1,29 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
+import { getIconColor } from './helper';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  display: 'block',
+};
+
+const IconTuichu: FunctionComponent<Props> = ({ size = 18, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
+      <path
+        d="M1024 448c0 19.2-6.4 32-19.2 44.8l0 0-128 128 0 0C864 633.6 851.2 640 832 640c-38.4 0-64-25.6-64-64 0-19.2 6.4-32 19.2-44.8l0 0L806.4 512 640 512C601.6 512 576 486.4 576 448c0-38.4 25.6-64 64-64l166.4 0-19.2-19.2 0 0C774.4 352 768 339.2 768 320c0-38.4 25.6-64 64-64 19.2 0 32 6.4 44.8 19.2l0 0 128 128 0 0C1017.6 416 1024 428.8 1024 448zM832 128l-128 0L576 128 294.4 128l121.6 70.4 0 0C435.2 211.2 448 230.4 448 256l0 512 64 0 192 0 128 0c38.4 0 64 25.6 64 64s-25.6 64-64 64L512 896 448 896l0 64c0 38.4-25.6 64-64 64-12.8 0-25.6-6.4-32-12.8l0 0-320-192 0 0 0 0c-6.4-6.4-12.8-12.8-19.2-19.2 0 0 0 0 0-6.4C6.4 787.2 0 780.8 0 768L0 64c0-25.6 19.2-51.2 38.4-57.6C44.8 0 57.6 0 64 0l0 0 512 0 256 0c38.4 0 64 25.6 64 64C896 102.4 870.4 128 832 128z"
+        fill={getIconColor(color, 0, '#333333')}
+      />
+    </svg>
+  );
+};
+
+export default IconTuichu;

src/components/iconfont/IconXingdun.tsx

@@ -0,0 +1,601 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
+import { getIconColor } from './helper';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  display: 'block',
+};
+
+const IconXingdun: FunctionComponent<Props> = ({ size = 18, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
+      <path
+        d="M417 768.86l-3.16 145.2-89.74-42.79 5.72-111.91 0.66-12.81 1.16-23.24 0.33-6.38 0.79-14.67 0.42-8.66 5.86 5.26 8.29 7.45 31.3 28.08 5.87 5.31 3.68 3.26 10.15 9.13 10.85 9.73z"
+        fill={getIconColor(color, 0, '#304C9E')}
+      />
+      <path
+        d="M398.97 886.07l-61.35-27.44 5.19-112.26 71.85-15.64-15.69 155.34z m-56.55-30.39l52.57 23.51 14.4-142.53-62.09 13.52-4.88 105.5z"
+        fill={getIconColor(color, 1, '#72BEE7')}
+      />
+      <path
+        d="M348.96 335.51l-6.57 14.39-122.01-138.31v-18.26c8.06 10.34 60.36 67.71 95.75 106.37 18.82 20.59 32.83 35.81 32.83 35.81z"
+        fill={getIconColor(color, 2, '#23499C')}
+      />
+      <path
+        d="M220.38 211.59c-24.08 55.89-23.29 156.11-23.29 156.11l-15.18 6.66c-32.79-120.25 26.13-196.81 38.47-181.02v18.25z"
+        fill={getIconColor(color, 3, '#2F80C3')}
+      />
+      <path
+        d="M293.68 456.97s-25.47-18.21-111.77-82.62l15.18-6.66 87.6 74.09 8.99 15.19z"
+        fill={getIconColor(color, 4, '#23499C')}
+      />
+      <path
+        d="M342.4 349.9l-18.16 39.96-30.55 67.11-8.99-15.18-87.6-74.09s-0.79-100.22 23.29-156.11L342.4 349.9z"
+        fill={getIconColor(color, 5, '#4955A3')}
+      />
+      <path
+        d="M425.52 277.79l-47.69-42.53-61.7 64.43 54.7 38.84zM273.85 447.89l-105.9-56.49-24.26-34.04c68.31 34.6 112.41 73.34 130.16 90.53z"
+        fill={getIconColor(color, 6, '#23499C')}
+      />
+      <path
+        d="M200.17 555.98l-12.76 15.18c-67.43-88.07-43.73-213.81-43.73-213.81l24.26 34.04c0 0.01-3.63 105.07 32.23 164.59z"
+        fill={getIconColor(color, 7, '#2F80C3')}
+      />
+      <path
+        d="M279.39 580.66c-14.34-0.19-31.62-0.19-46.71 0.51-14.9-2.89-30.64-6.24-45.27-10.01l12.76-15.18c39.91 12.76 64.31 20.26 79.22 24.68zM299.79 592.45h-93.56L197.1 587c3.96-3.35 18.35-5.03 35.58-5.82 35.9 7.03 67.11 11.27 67.11 11.27z"
+        fill={getIconColor(color, 8, '#23499C')}
+      />
+      <path
+        d="M273.05 697.51l-6.71 17.04C204.41 661.09 185.59 596.68 197.1 587l9.13 5.45c-0.01 0 30.36 78.37 66.82 105.06z"
+        fill={getIconColor(color, 9, '#2F80C3')}
+      />
+      <path
+        d="M355.06 682.33s-57.7 26.13-88.72 32.23l6.71-17.04c62.54-4.84 69.25-15.18 69.25-15.18h12.76z"
+        fill={getIconColor(color, 10, '#23499C')}
+      />
+      <path
+        d="M355.06 682.33H342.3s-6.71 10.34-69.25 15.18c-36.47-26.69-66.83-105.06-66.83-105.06h93.56s-31.2-4.24-67.11-11.27c15.09-0.7 32.37-0.7 46.71-0.51h0.09c7.27 0.14 13.78 0.33 18.86 0.47 1.21 0 2.33 0.05 3.35 0.09 4.89 0.14 7.82 0.28 7.82 0.28l45.56 100.82zM396.19 737.14l-6.15 1.35-41.08-44.89-9.92 5.26-5.87-5.26-0.42 8.66-29.95 15.93-12.9-1.35c2.28-11.88 64.45-31.9 64.45-31.9l41.84 52.2z"
+        fill={getIconColor(color, 11, '#4955A3')}
+      />
+      <path
+        d="M330.48 746.55l-0.65 12.81c-19.84-12.39-41.63-33.53-39.91-42.52l12.9 1.35c-0.01 0 12.8 16.86 27.66 28.36z"
+        fill={getIconColor(color, 12, '#2F80C3')}
+      />
+      <path
+        d="M404.71 747.81s-2.42 1.77-6.38 4.28c-10.29 6.47-30.97 17.93-46.38 16.63-1.68-0.14-3.26-0.42-4.8-0.88-0.93-0.28-1.91-0.61-2.93-1.02-4.38-1.68-9.31-4.28-14.39-7.45l0.65-12.81c-14.86-11.5-27.66-28.36-27.66-28.36l29.95-15.93 0.42-8.66 5.87 5.26 9.92-5.26 41.08 44.89 6.15-1.35 8.5 10.66z"
+        fill={getIconColor(color, 13, '#23499C')}
+      />
+      <path
+        d="M348.96 357.36l-24.73 32.51-39.54 51.93-87.6-74.09s-0.79-100.22 23.29-156.11L342.4 349.9l6.56 7.46z"
+        fill={getIconColor(color, 14, '#72BEE7')}
+      />
+      <path
+        d="M282.68 434l-6.39-6.36c-0.12-0.12-12.15-11.99-59.02-49.96l-2.15-1.74-0.27-2.75c-5.54-57.21 12.29-112.73 13.05-115.06l3.46-10.6 95.26 101.43L282.68 434z m-54.94-64.82c28.51 23.14 43.75 36.3 51.31 43.06l31.55-61.05-73.24-77.99c-4.72 18.34-12.85 57.02-9.62 95.98z"
+        fill={getIconColor(color, 15, '#4955A3')}
+      />
+      <path
+        d="M302.81 587s-0.19 0.14-3.82-0.79c-3.17-0.79-8.99-2.38-19.51-5.54h-0.09c-14.9-4.42-39.31-11.92-79.22-24.68-35.86-59.52-32.23-164.58-32.23-164.58l105.9 56.49 0.05 0.05 2.19 1.16 0.23 1.21 15.97 82.43 9.41 48.48 1.12 5.77z"
+        fill={getIconColor(color, 16, '#72BEE7')}
+      />
+      <path
+        d="M305.14 580.85l-10.94-3.37c-0.4-0.12-40.47-12.54-84.74-33.76l-1.86-0.89-1.02-1.79c-5.34-9.34-28.09-83.68-20.09-113.71l2.48-9.3 7.78 5.66c4.55 3.32 51.04 27.13 79.27 41.36l2.77 1.4 26.35 114.4z m-87.92-48.05c28.82 13.68 55.5 23.49 69.85 28.42l-19.76-85.77c-11.84-5.98-50.98-25.81-69.3-35.81-1.33 28.19 14.07 81.28 19.21 93.16z"
+        fill={getIconColor(color, 17, '#4955A3')}
+      />
+      <path
+        d="M342.3 682.33s-6.71 10.34-69.25 15.18c-36.47-26.69-66.83-105.06-66.83-105.06h99.01l37.07 89.88z"
+        fill={getIconColor(color, 18, '#72BEE7')}
+      />
+      <path
+        d="M284.01 689.09l-1.65-0.78c-25.98-12.34-47.19-68.41-49.53-74.76l-3.43-9.34 77.6 3.69 35.52 71.76-7.38 2.3c-1.06 0.33-11.47 3.34-49.33 6.95l-1.8 0.18z m-35.06-70.73c7.86 18.64 22.96 48.78 37.57 57.23 18.83-1.83 30.34-3.5 36.97-4.64l-24.86-50.23-49.68-2.36z"
+        fill={getIconColor(color, 19, '#4955A3')}
+      />
+      <path
+        d="M391.48 740.08s-1.16 1.16-3.31 2.89c-5.54 4.42-17.65 12.62-33.11 13.92a17.7 17.7 0 0 1-3.49-0.05c-2.24-0.28-4.52-0.88-6.85-1.82-4.75-1.86-9.59-4.89-14.25-8.48-14.86-11.5-27.66-28.36-27.66-28.36l29.95-15.93 6.29-3.4 9.92-5.26 41.08 44.89 1.43 1.6z"
+        fill={getIconColor(color, 20, '#72BEE7')}
+      />
+      <path
+        d="M361.53 751.36c-12.1 0-28.9-16.82-38.3-27.43l-4.93-5.57 34.37-23.8 36.74 37.32-3.71 4.58c-0.93 1.15-9.42 11.31-21.16 14.51-0.97 0.27-1.97 0.39-3.01 0.39z m-23.33-30.73c9.52 9.74 19.61 17.56 23.04 17.56h0.05c3.83-1.06 7.4-3.62 10-5.89l-20.25-20.57-12.84 8.9z"
+        fill={getIconColor(color, 21, '#4955A3')}
+      />
+      <path
+        d="M318.61 350.07l-84.43-89.9s-18.22 55.89-12.76 112.38c47.99 38.88 59.53 50.42 59.53 50.42l37.66-72.9z"
+        fill={getIconColor(color, 22, '#EBEAF0')}
+      />
+      <path
+        d="M336.83 307.55l43.13-44.34 38.88 22.17z"
+        fill={getIconColor(color, 23, '#72BEE7')}
+      />
+      <path
+        d="M273.05 470.95s-73.5-37.05-80.18-41.91c-7.29 27.34 14.58 100.23 19.44 108.73 44.34 21.26 83.83 33.41 83.83 33.41l-23.09-100.23zM302.81 614.31l-63.78-3.04s21.87 59.53 46.17 71.07c38.27-3.64 47.99-6.68 47.99-6.68l-30.38-61.35zM351.87 703.15l-23.69 16.4s24.6 27.79 34.62 25.06 17.77-12.3 17.77-12.3l-28.7-29.16z"
+        fill={getIconColor(color, 24, '#EBEAF0')}
+      />
+      <path
+        d="M610.63 768.86l3.17 145.2 89.74-42.79-5.73-111.91-0.65-12.81-1.17-23.24-0.32-6.38-0.79-14.67-0.42-8.66-5.87 5.26-8.29 7.45-31.3 28.08-5.87 5.31-3.67 3.26-10.16 9.13-10.85 9.73z"
+        fill={getIconColor(color, 25, '#304C9E')}
+      />
+      <path
+        d="M612.97 730.74l71.85 15.64 5.19 112.26-61.35 27.44-15.69-155.34z m67.37 19.43l-62.09-13.52 14.4 142.53 52.57-23.51-4.88-105.5z"
+        fill={getIconColor(color, 26, '#72BEE7')}
+      />
+      <path
+        d="M678.67 335.51l6.57 14.39 122.02-138.32v-18.26c-8.06 10.34-60.36 67.71-95.75 106.37-18.82 20.6-32.84 35.82-32.84 35.82z"
+        fill={getIconColor(color, 27, '#23499C')}
+      />
+      <path
+        d="M807.25 211.59c24.08 55.89 23.29 156.11 23.29 156.11l15.18 6.66c32.79-120.25-26.13-196.81-38.47-181.02v18.25z"
+        fill={getIconColor(color, 28, '#2F80C3')}
+      />
+      <path
+        d="M733.95 456.97s25.47-18.21 111.77-82.62l-15.18-6.66-87.6 74.09-8.99 15.19z"
+        fill={getIconColor(color, 29, '#23499C')}
+      />
+      <path
+        d="M685.24 349.9l18.16 39.96 30.55 67.11 8.99-15.18 87.6-74.09s0.79-100.22-23.29-156.11L685.24 349.9z"
+        fill={getIconColor(color, 30, '#4955A3')}
+      />
+      <path
+        d="M602.11 277.79l47.69-42.53 61.7 64.43-54.69 38.84zM753.79 447.89l105.9-56.49 24.26-34.04c-68.32 34.6-112.42 73.34-130.16 90.53z"
+        fill={getIconColor(color, 31, '#23499C')}
+      />
+      <path
+        d="M827.46 555.98l12.76 15.18c67.43-88.07 43.73-213.81 43.73-213.81l-24.26 34.04c0 0.01 3.63 105.07-32.23 164.59z"
+        fill={getIconColor(color, 32, '#2F80C3')}
+      />
+      <path
+        d="M748.25 580.66c14.34-0.19 31.62-0.19 46.71 0.51 14.9-2.89 30.64-6.24 45.27-10.01l-12.76-15.18c-39.92 12.76-64.32 20.26-79.22 24.68zM727.85 592.45h93.56l9.13-5.45c-3.96-3.35-18.35-5.03-35.58-5.82-35.91 7.03-67.11 11.27-67.11 11.27z"
+        fill={getIconColor(color, 33, '#23499C')}
+      />
+      <path
+        d="M754.58 697.51l6.71 17.04c61.94-53.46 80.75-117.87 69.25-127.56l-9.13 5.45c0 0.01-30.37 78.38-66.83 105.07z"
+        fill={getIconColor(color, 34, '#2F80C3')}
+      />
+      <path
+        d="M672.57 682.33s57.7 26.13 88.72 32.23l-6.71-17.04c-62.54-4.84-69.25-15.18-69.25-15.18h-12.76z"
+        fill={getIconColor(color, 35, '#23499C')}
+      />
+      <path
+        d="M672.57 682.33h12.76s6.71 10.34 69.25 15.18c36.47-26.69 66.83-105.06 66.83-105.06h-93.56s31.2-4.24 67.11-11.27c-15.09-0.7-32.37-0.7-46.71-0.51h-0.09c-7.27 0.14-13.78 0.33-18.86 0.47-1.21 0-2.33 0.05-3.35 0.09-4.89 0.14-7.82 0.28-7.82 0.28l-45.56 100.82zM631.45 737.14l6.15 1.35 41.08-44.89 9.92 5.26 5.87-5.26 0.42 8.66 29.95 15.93 12.9-1.35c-2.28-11.88-64.45-31.9-64.45-31.9l-41.84 52.2z"
+        fill={getIconColor(color, 36, '#4955A3')}
+      />
+      <path
+        d="M697.16 746.55l0.65 12.81c19.84-12.39 41.63-33.53 39.91-42.52l-12.9 1.35s-12.81 16.86-27.66 28.36z"
+        fill={getIconColor(color, 37, '#2F80C3')}
+      />
+      <path
+        d="M622.92 747.81s2.42 1.77 6.38 4.28c10.29 6.47 30.97 17.93 46.38 16.63 1.68-0.14 3.26-0.42 4.8-0.88 0.93-0.28 1.91-0.61 2.93-1.02 4.38-1.68 9.31-4.28 14.39-7.45l-0.65-12.81c14.86-11.5 27.66-28.36 27.66-28.36l-29.95-15.93-0.42-8.66-5.87 5.26-9.92-5.26-41.08 44.89-6.15-1.35-8.5 10.66z"
+        fill={getIconColor(color, 38, '#23499C')}
+      />
+      <path
+        d="M678.67 357.36l24.73 32.51 39.54 51.93 87.6-74.09s0.79-100.22-23.29-156.11L685.24 349.9l-6.57 7.46z"
+        fill={getIconColor(color, 39, '#72BEE7')}
+      />
+      <path
+        d="M701.02 348.95l95.26-101.43 3.46 10.6c0.76 2.34 18.59 57.85 13.05 115.06l-0.27 2.75-2.15 1.74c-46.87 37.97-58.9 49.84-59.02 49.96l-6.39 6.36-43.94-85.04z m89.25-75.75l-73.24 77.99 31.55 61.05c7.57-6.77 22.8-19.93 51.31-43.06 3.23-38.96-4.89-77.64-9.62-95.98z"
+        fill={getIconColor(color, 40, '#4955A3')}
+      />
+      <path
+        d="M724.82 587s0.19 0.14 3.82-0.79c3.17-0.79 8.99-2.38 19.51-5.54h0.09c14.9-4.42 39.31-11.92 79.22-24.68 35.86-59.52 32.23-164.58 32.23-164.58l-105.9 56.49-0.05 0.05-2.19 1.16-0.23 1.21-15.97 82.43-9.41 48.48-1.12 5.77z"
+        fill={getIconColor(color, 41, '#72BEE7')}
+      />
+      <path
+        d="M748.85 466.46l2.77-1.4c28.23-14.23 74.72-38.04 79.27-41.36l7.78-5.66 2.48 9.3c8.01 30.03-14.75 104.37-20.09 113.71l-1.02 1.79-1.86 0.89c-44.27 21.23-84.34 33.64-84.74 33.76l-10.94 3.37 26.35-114.4z m80.77-26.82c-18.32 10.01-57.45 29.83-69.3 35.81l-19.76 85.77c14.35-4.94 41.03-14.74 69.85-28.42 5.14-11.88 20.54-64.97 19.21-93.16z"
+        fill={getIconColor(color, 42, '#4955A3')}
+      />
+      <path
+        d="M685.33 682.33s6.71 10.34 69.25 15.18c36.47-26.69 66.83-105.06 66.83-105.06H722.4l-37.07 89.88z"
+        fill={getIconColor(color, 43, '#72BEE7')}
+      />
+      <path
+        d="M741.81 688.92c-37.86-3.61-48.27-6.62-49.33-6.95l-7.38-2.3 35.52-71.76 77.6-3.69-3.43 9.34c-2.34 6.35-23.55 62.42-49.53 74.76l-1.65 0.78-1.8-0.18z m-12.8-68.2l-24.86 50.23c6.62 1.15 18.14 2.81 36.97 4.64 14.61-8.45 29.71-38.59 37.57-57.23l-49.68 2.36z"
+        fill={getIconColor(color, 44, '#4955A3')}
+      />
+      <path
+        d="M636.15 740.08s1.16 1.16 3.31 2.89c5.54 4.42 17.65 12.62 33.11 13.92 1.16 0.09 2.33 0.09 3.49-0.05 2.24-0.28 4.52-0.88 6.85-1.82 4.75-1.86 9.59-4.89 14.25-8.48 14.86-11.5 27.66-28.36 27.66-28.36l-29.95-15.93-6.29-3.4-9.92-5.26-41.08 44.89-1.43 1.6z"
+        fill={getIconColor(color, 45, '#72BEE7')}
+      />
+      <path
+        d="M663.1 750.97c-11.74-3.2-20.23-13.36-21.16-14.51l-3.71-4.58 36.74-37.32 34.37 23.8-4.93 5.57c-9.4 10.61-26.2 27.43-38.3 27.43-1.05 0-2.05-0.12-3.01-0.39z m13.47-39.24l-20.25 20.57c2.6 2.27 6.18 4.83 10 5.89h0.05c3.43 0 13.52-7.82 23.04-17.56l-12.84-8.9z"
+        fill={getIconColor(color, 46, '#4955A3')}
+      />
+      <path
+        d="M709.02 350.07l84.43-89.9s18.22 55.89 12.76 112.38c-47.99 38.88-59.53 50.42-59.53 50.42l-37.66-72.9z"
+        fill={getIconColor(color, 47, '#EBEAF0')}
+      />
+      <path
+        d="M690.8 307.55l-43.13-44.34-38.87 22.17z"
+        fill={getIconColor(color, 48, '#72BEE7')}
+      />
+      <path
+        d="M754.58 470.95s73.5-37.05 80.18-41.91c7.29 27.34-14.58 100.23-19.44 108.73-44.34 21.26-83.83 33.41-83.83 33.41l23.09-100.23zM724.82 614.31l63.78-3.04s-21.87 59.53-46.17 71.07c-38.27-3.64-47.99-6.68-47.99-6.68l30.38-61.35zM675.77 703.15l23.69 16.4s-24.6 27.79-34.62 25.06-17.77-12.3-17.77-12.3l28.7-29.16z"
+        fill={getIconColor(color, 49, '#EBEAF0')}
+      />
+      <path
+        d="M519.14 884.14l-0.19 23.34-81.45-66.13 29.01 0.09z"
+        fill={getIconColor(color, 50, '#667489')}
+      />
+      <path
+        d="M601.24 841.9l-82.29 65.58 0.19-23.34 53.09-42.33z"
+        fill={getIconColor(color, 51, '#9EB5D4')}
+      />
+      <path
+        d="M601.24 841.9l-29.01-0.09-53.09-35.11-0.19-19.19z"
+        fill={getIconColor(color, 52, '#E1EFFA')}
+      />
+      <path
+        d="M519.14 806.7l-52.63 34.74-29.01-0.09 81.45-53.84z"
+        fill={getIconColor(color, 53, '#708495')}
+      />
+      <path
+        d="M572.23 841.81l-53.09 42.33V806.7z"
+        fill={getIconColor(color, 54, '#23499C')}
+      />
+      <path
+        d="M519.14 806.7v77.44l-52.63-42.7z"
+        fill={getIconColor(color, 55, '#2F80C3')}
+      />
+      <path
+        d="M714.78 524.85c-9.03 52.39-25.1 119.36-52.35 161.46-21.8 37.21-108.18 96.12-143.3 96.12-32.04 0-128.26-64.64-150.8-104.6-24.03-41.08-39.77-117.5-48.39-171.15 42.15 68.13 117.59 113.54 203.61 113.54 78.16 0.01 147.55-37.44 191.23-95.37z"
+        fill={getIconColor(color, 56, '#3A5EA9')}
+      />
+      <path
+        d="M519.37 847.49c-41.31 0-165.28-83.36-194.39-134.82-51.04-87.18-72.88-297.68-72.88-297.68l39.63 21.19s18.58 179.16 62.03 253.35c24.78 43.82 130.31 114.8 165.47 114.8l0.14 43.16zM784.69 414.99s-15.97 208.68-80.66 308.63C675.95 771.59 564.64 847.5 519.38 847.5l-0.14-43.17c38.51 0 133.24-64.64 157.18-105.48 55.05-85.04 68.65-262.66 68.65-262.66l39.62-21.2z"
+        fill={getIconColor(color, 57, '#C8C9CA')}
+      />
+      <path
+        d="M784.69 414.99l-39.63 21.19s-21.61-11.88-38.14-34.14c-19.14-18.58-27.8-49.64-27.8-49.64l28.13-35.81s10.15 36.47 32.65 58.35c19.4 26.08 44.79 40.05 44.79 40.05z"
+        fill={getIconColor(color, 58, '#EEEEEF')}
+      />
+      <path
+        d="M361.91 350.12s-11.27 32.27-28.83 51.93c-17.04 20.17-41.35 34.14-41.35 34.14L252.1 415s28.55-16.39 48.57-40.05c20.68-23.1 33.86-61.05 33.86-61.05l27.38 36.22z"
+        fill={getIconColor(color, 59, '#B4B4B5')}
+      />
+      <path
+        d="M519.23 804.32c-35.16 0-140.69-70.97-165.47-114.8-43.45-74.19-62.03-253.35-62.03-253.35l20.03 10.71s17 163.32 56.58 230.95c22.54 39.96 118.76 104.6 150.8 104.6l0.09 21.89z"
+        fill={getIconColor(color, 60, '#DBDCDC')}
+      />
+      <path
+        d="M745.05 436.18s-13.6 177.62-68.65 262.66c-23.94 40.84-118.66 105.48-157.18 105.48l-0.09-21.89c35.11 0 121.5-58.91 143.3-96.12 50.16-77.54 62.54-239.42 62.54-239.42l20.08-10.71z"
+        fill={getIconColor(color, 61, '#B4B4B5')}
+      />
+      <path
+        d="M745.05 436.18l-20.07 10.71s-19.65-10.85-34.74-31.11c-17.46-16.95-25.33-45.27-25.33-45.27l14.2-18.12s8.66 31.06 27.8 49.64c16.53 22.27 38.14 34.15 38.14 34.15z"
+        fill={getIconColor(color, 62, '#9E9E9F')}
+      />
+      <path
+        d="M679.11 352.41l-14.2 18.12s-43.78-29.81-125.09-37.12l-27.8 27.8-27.8-27.8c-76.75 6.61-108.46 35.02-108.46 35.02l-13.83-18.3s44.57-39.96 155.13-39.96c105.05 3.49 162.05 42.24 162.05 42.24z"
+        fill={getIconColor(color, 63, '#B4B4B5')}
+      />
+      <path
+        d="M375.75 368.42s-10.25 29.43-26.27 47.36c-15.55 18.4-37.72 31.11-37.72 31.11l-20.03-10.71s24.31-13.97 41.35-34.14c17.56-19.65 28.83-51.93 28.83-51.93l13.84 18.31z"
+        fill={getIconColor(color, 64, '#C8C9CA')}
+      />
+      <path
+        d="M724.98 446.9s-2.56 33.81-10.2 77.96c-43.68 57.93-113.07 95.38-191.22 95.38-86.02 0-161.46-45.41-203.61-113.54-5.59-34.65-8.2-59.8-8.2-59.8s22.17-12.71 37.72-31.11c16.02-17.93 26.27-47.36 26.27-47.36s31.71-28.41 108.46-35.02l27.8 27.8 27.8-27.8c81.31 7.31 125.09 37.12 125.09 37.12s7.87 28.31 25.33 45.27c15.11 20.25 34.76 31.1 34.76 31.1z"
+        fill={getIconColor(color, 65, '#7C89C3')}
+      />
+      <path
+        d="M630.58 517.73c-11.15-10.82-16.17-28.89-16.17-28.89s-33.17-22.56-94.31-24.58c-64.29 0-90.24 23.24-90.24 23.24s-6.54 18.79-16.76 30.23c-9.93 11.74-24.08 19.86-24.08 19.86s1.66 16.05 5.23 38.17c5.5 34.24 15.55 83.02 30.88 109.23 14.39 25.5 75.8 66.76 96.25 66.76 22.41 0 77.55-37.6 91.46-61.35 17.39-26.87 27.64-69.61 33.41-103.05 4.87-28.18 6.51-49.76 6.51-49.76s-12.55-6.93-22.18-19.86z"
+        fill={getIconColor(color, 66, '#61B5DA')}
+      />
+      <path
+        d="M621.82 524.94c-10.26-9.96-14.88-26.58-14.88-26.58s-30.52-20.76-86.78-22.62c-59.16 0-83.03 21.39-83.03 21.39s-6.02 17.28-15.42 27.81c-9.13 10.8-22.15 18.27-22.15 18.27s1.53 14.77 4.81 35.12c5.06 31.51 14.3 76.39 28.42 100.51 13.24 23.47 69.74 61.43 88.56 61.43 20.62 0 71.35-34.6 84.15-56.45 16-24.72 25.43-64.05 30.74-94.82 4.49-25.93 5.99-45.78 5.99-45.78s-11.55-6.38-20.41-18.28z"
+        fill={getIconColor(color, 67, '#4955A3')}
+      />
+      <path
+        d="M622.42 625.41c-5.2 19.91-12.18 39.76-21.56 54.27-12.11 20.63-60.06 53.35-79.54 53.35-17.8 0-71.22-35.87-83.72-58.05-7.24-12.37-13.1-30.51-17.77-49.27 27.15 22.44 62.5 36 101.13 36 38.77 0 74.25-13.69 101.46-36.3z"
+        fill={getIconColor(color, 68, '#44AAD5')}
+      />
+      <path
+        d="M635.59 546.75s-1.45 18.79-5.66 43.28c-1.91 11.02-4.38 23.2-7.5 35.38-27.22 22.61-62.69 36.3-101.46 36.3-38.64 0-73.98-13.56-101.13-36-3.88-15.83-6.91-32.12-9.08-45.74-3.09-19.25-4.54-33.21-4.54-33.21s12.31-7.04 20.93-17.28c8.89-9.94 14.58-26.26 14.58-26.26s22.58-20.24 78.49-20.24c53.18 1.78 82.01 21.39 82.01 21.39s4.38 15.73 14.09 25.11c8.34 11.25 19.27 17.27 19.27 17.27z"
+        fill={getIconColor(color, 69, '#7ACAE3')}
+      />
+      <path
+        d="M480.36 411.68c0 0.1-0.04 0.18-0.04 0.28-0.01 0.22-0.04 0.43-0.1 0.64-0.04 0.15-0.08 0.3-0.14 0.44-0.08 0.2-0.19 0.38-0.31 0.56-0.09 0.13-0.17 0.25-0.27 0.37-0.06 0.06-0.09 0.14-0.15 0.2l-15.17 14.67 3.49 20.81c0.06 0.35 0.05 0.71-0.01 1.05-0.02 0.11-0.05 0.21-0.08 0.32-0.06 0.23-0.14 0.45-0.24 0.67-0.05 0.11-0.11 0.2-0.18 0.3-0.13 0.21-0.29 0.39-0.46 0.56-0.07 0.07-0.14 0.15-0.22 0.21-0.05 0.04-0.09 0.1-0.14 0.14-0.17 0.12-0.36 0.19-0.55 0.28-0.07 0.03-0.13 0.09-0.21 0.12-0.02 0.01-0.04 0-0.06 0.01-0.37 0.13-0.75 0.22-1.13 0.22a3.3 3.3 0 0 1-1.55-0.39l-18.65-9.89-18.72 9.75c-0.48 0.25-1.01 0.38-1.54 0.38-0.69 0-1.38-0.22-1.96-0.64a3.328 3.328 0 0 1-1.31-3.26l3.64-20.79-15.06-14.79a3.323 3.323 0 0 1 1.86-5.66l20.9-2.96 9.41-18.89a3.325 3.325 0 0 1 2.98-1.84h0.01c1.26 0 2.42 0.73 2.97 1.87l9.27 18.96 20.88 3.11c0.07 0.01 0.12 0.05 0.18 0.06 0.23 0.05 0.45 0.13 0.67 0.23 0.11 0.05 0.22 0.08 0.32 0.14 0.28 0.16 0.54 0.37 0.77 0.61 0.09 0.09 0.14 0.2 0.22 0.3 0.1 0.13 0.21 0.26 0.29 0.41 0.02 0.05 0.03 0.1 0.05 0.14 0.08 0.17 0.12 0.34 0.17 0.52 0.05 0.19 0.1 0.38 0.12 0.58 0.01 0.07 0.05 0.13 0.05 0.2zM553.06 389.77c-0.02-0.2-0.07-0.4-0.12-0.59-0.05-0.17-0.09-0.34-0.17-0.51-0.02-0.05-0.03-0.1-0.05-0.15-0.08-0.16-0.2-0.29-0.31-0.43-0.07-0.09-0.12-0.19-0.19-0.27-0.23-0.25-0.49-0.46-0.78-0.63-0.08-0.05-0.18-0.07-0.27-0.11-0.24-0.11-0.48-0.19-0.73-0.25-0.06-0.01-0.11-0.05-0.16-0.06l-20.88-3.12-9.27-18.96a3.342 3.342 0 0 0-2.98-1.87h-0.01c-1.26 0-2.41 0.71-2.98 1.84l-9.41 18.89-20.9 2.96c-1.25 0.18-2.3 1.05-2.69 2.25-0.4 1.2-0.07 2.52 0.83 3.41l15.06 14.79-3.64 20.79c-0.22 1.24 0.29 2.51 1.31 3.26 0.58 0.42 1.27 0.64 1.96 0.64 0.53 0 1.05-0.13 1.54-0.38l18.72-9.75 18.65 9.89a3.3 3.3 0 0 0 1.55 0.39c0.4 0 0.8-0.08 1.18-0.23h0.01c0.07-0.03 0.12-0.08 0.19-0.12 0.27-0.12 0.54-0.25 0.77-0.45 0.01-0.01 0.01-0.02 0.02-0.03 0.01-0.01 0.01-0.02 0.02-0.02 0.26-0.23 0.48-0.5 0.65-0.79 0.06-0.09 0.09-0.2 0.13-0.3 0.1-0.22 0.19-0.43 0.24-0.67 0.03-0.13 0.04-0.27 0.05-0.41 0.02-0.22 0.03-0.43 0-0.65-0.01-0.07 0.01-0.15 0-0.22l-3.49-20.81 15.17-14.67c0.06-0.06 0.09-0.13 0.14-0.19 0.11-0.12 0.2-0.25 0.29-0.39 0.12-0.17 0.22-0.35 0.3-0.54 0.06-0.15 0.11-0.29 0.15-0.45 0.05-0.21 0.08-0.42 0.1-0.63 0.01-0.1 0.04-0.18 0.04-0.28 0-0.05-0.03-0.11-0.04-0.18zM630.75 413.25c0.05-0.21 0.08-0.42 0.1-0.63 0.01-0.1 0.04-0.18 0.04-0.28 0-0.07-0.04-0.13-0.04-0.21-0.02-0.2-0.07-0.4-0.12-0.59-0.05-0.17-0.09-0.34-0.17-0.51-0.02-0.05-0.03-0.1-0.05-0.15-0.08-0.16-0.2-0.29-0.31-0.43-0.07-0.09-0.12-0.19-0.19-0.27-0.23-0.25-0.49-0.46-0.78-0.63-0.08-0.05-0.18-0.07-0.27-0.11-0.24-0.11-0.48-0.19-0.73-0.25-0.06-0.01-0.11-0.05-0.16-0.06l-20.88-3.12-9.27-18.96a3.342 3.342 0 0 0-2.98-1.87h-0.01c-1.26 0-2.41 0.71-2.98 1.84l-9.41 18.89-20.9 2.96c-1.25 0.18-2.3 1.05-2.69 2.25-0.4 1.2-0.07 2.52 0.83 3.41l15.06 14.79-3.64 20.79c-0.22 1.24 0.29 2.51 1.31 3.26 0.58 0.42 1.27 0.64 1.96 0.64 0.53 0 1.05-0.13 1.54-0.38l18.72-9.75 18.65 9.89a3.3 3.3 0 0 0 1.55 0.39c0.39 0 0.77-0.08 1.13-0.22 0.02-0.01 0.04 0 0.06-0.01 0.08-0.03 0.14-0.09 0.22-0.13 0.18-0.09 0.37-0.15 0.54-0.27 0.05-0.04 0.09-0.09 0.14-0.13 0.08-0.07 0.15-0.15 0.23-0.22 0.17-0.17 0.32-0.35 0.45-0.55 0.07-0.1 0.13-0.21 0.18-0.32 0.1-0.2 0.18-0.42 0.23-0.64 0.03-0.12 0.07-0.23 0.09-0.35 0.05-0.32 0.06-0.65 0.01-0.99v-0.06l-3.5-20.81 15.17-14.67c0.06-0.06 0.09-0.13 0.14-0.19 0.11-0.12 0.2-0.25 0.29-0.39 0.12-0.17 0.22-0.35 0.3-0.54 0.06-0.12 0.1-0.26 0.14-0.42z"
+        fill={getIconColor(color, 70, '#DBDCDC')}
+      />
+      <path
+        d="M444.28 418.42l10.15-10.02-10.04-20.53-0.11 30.55z"
+        fill={getIconColor(color, 71, '#F2DD81')}
+      />
+      <path
+        d="M477.03 411.77l-22.6-3.37-10.15 10.02z"
+        fill={getIconColor(color, 72, '#EAAB25')}
+      />
+      <path
+        d="M444.39 387.87l-10.19 20.46 10.08 10.09z"
+        fill={getIconColor(color, 73, '#D89D31')}
+      />
+      <path
+        d="M444.28 418.42l-0.08 21.08 20.19 10.71v-0.01l-20.11-31.78z"
+        fill={getIconColor(color, 74, '#E8C742')}
+      />
+      <path
+        d="M423.93 450.06l20.27-10.56 0.08-21.08zM464.39 450.2l-19.77-31.24-0.34-0.54h0.02l13.15 7.45 3.21 1.74-0.05 0.05z"
+        fill={getIconColor(color, 75, '#EAAB25')}
+      />
+      <path
+        d="M444.28 418.42l-10.08-10.09-22.63 3.2 32.71 6.89zM444.28 418.42l-16.41 9.13-3.94 22.51 20.35-31.64z"
+        fill={getIconColor(color, 76, '#E8C742')}
+      />
+      <path
+        d="M444.28 418.42l-32.71-6.89 16.3 16.02 16.41-9.13z"
+        fill={getIconColor(color, 77, '#EAAB25')}
+      />
+      <path
+        d="M477.03 411.78l-16.37 15.83-3.21-1.74-13.15-7.45z"
+        fill={getIconColor(color, 78, '#E8C742')}
+      />
+      <path
+        d="M425.17 466.87c0 0.1-0.04 0.18-0.04 0.28-0.01 0.22-0.04 0.43-0.1 0.64-0.04 0.15-0.08 0.3-0.14 0.44-0.08 0.2-0.19 0.38-0.31 0.56-0.09 0.13-0.17 0.25-0.27 0.37-0.06 0.06-0.09 0.14-0.15 0.2l-15.17 14.67 3.49 20.81c0.06 0.35 0.05 0.71-0.01 1.05-0.02 0.11-0.05 0.21-0.08 0.32-0.06 0.23-0.14 0.45-0.24 0.67-0.05 0.11-0.11 0.2-0.18 0.3-0.13 0.21-0.29 0.39-0.46 0.56-0.07 0.07-0.14 0.15-0.22 0.21-0.05 0.04-0.09 0.1-0.14 0.14-0.17 0.12-0.36 0.19-0.55 0.28-0.07 0.03-0.13 0.09-0.21 0.12-0.02 0.01-0.04 0-0.06 0.01-0.37 0.13-0.75 0.22-1.13 0.22a3.3 3.3 0 0 1-1.55-0.39L389 498.45l-18.72 9.75c-0.48 0.25-1.01 0.38-1.54 0.38-0.69 0-1.38-0.22-1.96-0.64a3.328 3.328 0 0 1-1.31-3.26l3.64-20.79-15.06-14.79a3.323 3.323 0 0 1 1.86-5.66l20.9-2.96 9.41-18.89a3.325 3.325 0 0 1 2.98-1.84h0.01c1.26 0 2.42 0.73 2.97 1.87l9.27 18.96 20.88 3.11c0.07 0.01 0.12 0.05 0.18 0.06 0.23 0.05 0.45 0.13 0.67 0.23 0.11 0.05 0.22 0.08 0.32 0.14 0.28 0.16 0.54 0.37 0.77 0.61 0.09 0.09 0.14 0.2 0.22 0.3 0.1 0.13 0.21 0.26 0.29 0.41 0.02 0.05 0.03 0.1 0.05 0.14 0.08 0.17 0.12 0.34 0.17 0.52 0.05 0.19 0.1 0.38 0.12 0.58 0.01 0.06 0.05 0.12 0.05 0.19z"
+        fill={getIconColor(color, 79, '#DBDCDC')}
+      />
+      <path
+        d="M389.09 473.6l10.15-10.01-10.04-20.53-0.11 30.54z"
+        fill={getIconColor(color, 80, '#F2DD81')}
+      />
+      <path
+        d="M421.85 466.96l-22.61-3.37-10.15 10.01z"
+        fill={getIconColor(color, 81, '#EAAB25')}
+      />
+      <path
+        d="M389.2 443.06l-10.19 20.46 10.08 10.08z"
+        fill={getIconColor(color, 82, '#D89D31')}
+      />
+      <path
+        d="M389.09 473.6l-0.08 21.09 20.19 10.71v-0.01l-20.11-31.79z"
+        fill={getIconColor(color, 83, '#E8C742')}
+      />
+      <path
+        d="M368.74 505.25l20.27-10.56 0.08-21.09zM409.2 505.39l-19.77-31.24-0.34-0.54h0.02l13.15 7.45 3.21 1.74-0.05 0.05z"
+        fill={getIconColor(color, 84, '#EAAB25')}
+      />
+      <path
+        d="M389.09 473.6l-10.08-10.08-22.63 3.2 32.71 6.88zM389.09 473.6l-16.4 9.14-3.95 22.51 20.35-31.65z"
+        fill={getIconColor(color, 85, '#E8C742')}
+      />
+      <path
+        d="M389.09 473.6l-32.71-6.88 16.31 16.02 16.4-9.14z"
+        fill={getIconColor(color, 86, '#EAAB25')}
+      />
+      <path
+        d="M421.84 466.97l-16.37 15.83-3.21-1.74-13.15-7.45z"
+        fill={getIconColor(color, 87, '#E8C742')}
+      />
+      <path
+        d="M517.02 396.7l10.15-10.01-10.04-20.53-0.11 30.54z"
+        fill={getIconColor(color, 88, '#F2DD81')}
+      />
+      <path
+        d="M549.78 390.06l-22.61-3.37-10.15 10.01z"
+        fill={getIconColor(color, 89, '#EAAB25')}
+      />
+      <path
+        d="M517.13 366.16l-10.19 20.46 10.08 10.08z"
+        fill={getIconColor(color, 90, '#D89D31')}
+      />
+      <path
+        d="M517.02 396.7l-0.08 21.09 20.19 10.71v-0.02l-20.11-31.78z"
+        fill={getIconColor(color, 91, '#E8C742')}
+      />
+      <path
+        d="M496.67 428.35l20.27-10.56 0.08-21.09z"
+        fill={getIconColor(color, 92, '#EAAB25')}
+      />
+      <path
+        d="M537.13 428.49l-19.77-31.24-0.34-0.55h0.02l13.16 7.46 3.2 1.74-0.05 0.05z"
+        fill={getIconColor(color, 93, '#EAAB25')}
+      />
+      <path
+        d="M517.02 396.7l-10.08-10.08-22.63 3.2 32.71 6.88zM517.02 396.7l-16.4 9.14-3.95 22.51 20.35-31.65z"
+        fill={getIconColor(color, 94, '#E8C742')}
+      />
+      <path
+        d="M517.02 396.7l-32.71-6.88 16.31 16.02 16.4-9.14z"
+        fill={getIconColor(color, 95, '#EAAB25')}
+      />
+      <path
+        d="M549.77 390.07L533.4 405.9l-3.2-1.74-13.16-7.46z"
+        fill={getIconColor(color, 96, '#E8C742')}
+      />
+      <path
+        d="M594.81 419.07l10.15-10.01-10.04-20.54-0.11 30.55z"
+        fill={getIconColor(color, 97, '#F2DD81')}
+      />
+      <path
+        d="M627.57 412.43l-22.61-3.37-10.15 10.01z"
+        fill={getIconColor(color, 98, '#EAAB25')}
+      />
+      <path
+        d="M594.92 388.52l-10.19 20.46 10.08 10.09z"
+        fill={getIconColor(color, 99, '#D89D31')}
+      />
+      <path
+        d="M594.81 419.07l-0.08 21.08 20.19 10.71v-0.01l-20.11-31.78z"
+        fill={getIconColor(color, 100, '#E8C742')}
+      />
+      <path
+        d="M574.46 450.71l20.27-10.56 0.08-21.08z"
+        fill={getIconColor(color, 101, '#EAAB25')}
+      />
+      <path
+        d="M614.92 450.85l-19.77-31.24-0.34-0.54h0.02l13.16 7.46 3.2 1.73-0.05 0.06z"
+        fill={getIconColor(color, 102, '#EAAB25')}
+      />
+      <path
+        d="M594.81 419.07l-10.08-10.09-22.63 3.21 32.71 6.88zM594.81 419.07l-16.4 9.13-3.95 22.51 20.35-31.64z"
+        fill={getIconColor(color, 103, '#E8C742')}
+      />
+      <path
+        d="M594.81 419.07l-32.71-6.88 16.31 16.01 16.4-9.13z"
+        fill={getIconColor(color, 104, '#EAAB25')}
+      />
+      <path
+        d="M627.57 412.43l-16.38 15.83-3.2-1.73-13.16-7.46z"
+        fill={getIconColor(color, 105, '#E8C742')}
+      />
+      <path
+        d="M688.28 470.78c0.05-0.21 0.08-0.42 0.1-0.63 0.01-0.1 0.04-0.18 0.04-0.28 0-0.07-0.04-0.13-0.04-0.21-0.02-0.2-0.07-0.4-0.12-0.59-0.05-0.17-0.09-0.34-0.17-0.51-0.02-0.05-0.03-0.1-0.05-0.15-0.08-0.16-0.2-0.29-0.31-0.43-0.07-0.09-0.12-0.19-0.19-0.27-0.23-0.25-0.49-0.46-0.78-0.63-0.08-0.05-0.18-0.07-0.27-0.11-0.24-0.11-0.48-0.19-0.73-0.25-0.06-0.01-0.11-0.05-0.16-0.06l-20.88-3.12-9.27-18.96a3.342 3.342 0 0 0-2.98-1.87h-0.01c-1.26 0-2.41 0.71-2.98 1.84l-9.41 18.89-20.9 2.96c-1.25 0.18-2.3 1.05-2.69 2.25-0.4 1.2-0.07 2.52 0.83 3.41l15.06 14.79-3.64 20.79c-0.22 1.24 0.29 2.51 1.31 3.26 0.58 0.42 1.27 0.64 1.96 0.64 0.53 0 1.05-0.13 1.54-0.38l18.72-9.75 18.65 9.89a3.3 3.3 0 0 0 1.55 0.39c0.39 0 0.77-0.08 1.13-0.22 0.02-0.01 0.04 0 0.06-0.01 0.08-0.03 0.14-0.09 0.22-0.13 0.18-0.09 0.37-0.15 0.54-0.27 0.05-0.04 0.09-0.09 0.14-0.13 0.08-0.07 0.15-0.15 0.23-0.22 0.17-0.17 0.32-0.35 0.45-0.55 0.07-0.1 0.13-0.21 0.18-0.32 0.1-0.2 0.18-0.42 0.23-0.64 0.03-0.12 0.07-0.23 0.09-0.35 0.05-0.32 0.06-0.65 0.01-0.99v-0.06l-3.5-20.81 15.17-14.67c0.06-0.06 0.09-0.13 0.14-0.19 0.11-0.12 0.2-0.25 0.29-0.39a2.855 2.855 0 0 0 0.44-0.96z"
+        fill={getIconColor(color, 106, '#DBDCDC')}
+      />
+      <path
+        d="M652.33 476.59l10.16-10.01-10.04-20.53-0.12 30.54z"
+        fill={getIconColor(color, 107, '#F2DD81')}
+      />
+      <path
+        d="M685.09 469.95l-22.6-3.37-10.16 10.01z"
+        fill={getIconColor(color, 108, '#EAAB25')}
+      />
+      <path
+        d="M652.45 446.05l-10.19 20.46 10.07 10.08z"
+        fill={getIconColor(color, 109, '#D89D31')}
+      />
+      <path
+        d="M652.33 476.59l-0.07 21.09 20.19 10.71v-0.01l-20.12-31.79z"
+        fill={getIconColor(color, 110, '#E8C742')}
+      />
+      <path
+        d="M631.99 508.24l20.27-10.56 0.07-21.09zM672.45 508.38l-19.77-31.24-0.34-0.54h0.02l13.15 7.45 3.21 1.74-0.06 0.05z"
+        fill={getIconColor(color, 111, '#EAAB25')}
+      />
+      <path
+        d="M652.33 476.59l-10.07-10.08-22.63 3.2 32.7 6.88zM652.33 476.59l-16.4 9.14-3.94 22.51 20.34-31.65z"
+        fill={getIconColor(color, 112, '#E8C742')}
+      />
+      <path
+        d="M652.33 476.59l-32.7-6.88 16.3 16.02 16.4-9.14z"
+        fill={getIconColor(color, 113, '#EAAB25')}
+      />
+      <path
+        d="M685.09 469.96l-16.37 15.83-3.21-1.74-13.15-7.45z"
+        fill={getIconColor(color, 114, '#E8C742')}
+      />
+      <path
+        d="M582.87 273.51L512 202.64l-70.08 70.14c-75.54 12.58-107.39 41.1-107.39 41.1l27.38 36.23s44.57-39.96 155.13-39.96c105.06 3.49 162.07 42.24 162.07 42.24l28.13-35.81s-43.29-29.4-124.37-43.07z"
+        fill={getIconColor(color, 115, '#EEEEEF')}
+      />
+      <path
+        d="M512.01 226.28v26.86l-31.27 31.33h-26.87z"
+        fill={getIconColor(color, 116, '#EDD45E')}
+      />
+      <path
+        d="M570.2 284.47h-26.87l-31.32-31.33v-26.86z"
+        fill={getIconColor(color, 117, '#F5C94F')}
+      />
+      <path
+        d="M570.2 284.47l-36.4 36.37-21.78 21.77v-26.88l31.3-31.26z"
+        fill={getIconColor(color, 118, '#D28D1B')}
+      />
+      <path
+        d="M512.02 315.73v26.88l-21.78-21.77-36.37-36.37h26.85z"
+        fill={getIconColor(color, 119, '#EAA21D')}
+      />
+      <path
+        d="M512.01 284.47v31.27l-31.27-31.27z"
+        fill={getIconColor(color, 120, '#77A0D4')}
+      />
+      <path
+        d="M512.01 253.14v31.33h-31.27z"
+        fill={getIconColor(color, 121, '#A2D8EE')}
+      />
+      <path
+        d="M543.33 284.47h-31.32v-31.33z"
+        fill={getIconColor(color, 122, '#B2DFEF')}
+      />
+      <path
+        d="M543.33 284.47l-31.32 31.27v-31.27z"
+        fill={getIconColor(color, 123, '#61B5DA')}
+      />
+      <path
+        d="M588.48 638.29l-13.52-27.83-42.59-110.12c-2-5.17-6.97-8.57-12.5-8.57h-0.13c-5.59 0.06-10.55 3.57-12.47 8.82l-41.3 113.31-12.21 25.37c-1.85 3.85-1.76 8.34 0.24 12.11l20.67 38.87a13.44 13.44 0 0 0 5.26 5.39l34.24 19.28c2.04 1.15 4.31 1.72 6.58 1.72 1.95 0 3.9-0.42 5.71-1.28l33.77-15.89c2.7-1.27 4.9-3.41 6.25-6.07l21.9-43.18a13.45 13.45 0 0 0 0.1-11.93z m-30.85 56.79l-36.92 17.37-37.43-21.08-22.6-42.48 13.67-28.39 45.4-124.54 46.78 120.94 15.05 30.97-23.95 47.21z"
+        fill={getIconColor(color, 124, '#F5C754')}
+      />
+      <path
+        d="M519.75 495.96l-45.4 124.54-13.67 28.39 22.6 42.48 37.43 21.08 36.92-17.37 23.94-47.21-15.05-30.97z"
+        fill={getIconColor(color, 125, '#EAB640')}
+      />
+      <path
+        d="M519.86 505.19l-16.03 119.27-16.86 24.17-8.64-29.51z"
+        fill={getIconColor(color, 126, '#A1B2B8')}
+      />
+      <path
+        d="M536.73 624.87l-16.76 24.67-16.14-25.08 16.03-119.27z"
+        fill={getIconColor(color, 127, '#C6D6DE')}
+      />
+      <path
+        d="M562.65 615.82l-8.05 32.67-0.7 0.14-17.17-23.76-16.87-119.68z"
+        fill={getIconColor(color, 128, '#DCE8ED')}
+      />
+      <path
+        d="M554.6 648.49l-0.22 0.9"
+        fill={getIconColor(color, 129, '#009FE8')}
+      />
+      <path
+        d="M486.97 648.63l-21.14-3.55 12.5-25.96z"
+        fill={getIconColor(color, 130, '#879CA3')}
+      />
+      <path
+        d="M519.97 649.54l-33-0.91 16.86-24.17z"
+        fill={getIconColor(color, 131, '#687C82')}
+      />
+      <path
+        d="M553.9 648.63l-33.93 0.91 16.76-24.67z"
+        fill={getIconColor(color, 132, '#B2C5CE')}
+      />
+      <path
+        d="M576.42 644.15l-21.82 4.34 8.05-32.67z"
+        fill={getIconColor(color, 133, '#8FA3AC')}
+      />
+      <path
+        d="M486.97 648.63l-0.47 35.32-20.67-38.87z"
+        fill={getIconColor(color, 134, '#687C82')}
+      />
+      <path
+        d="M519.97 649.54l-15.89 37.96-17.11-38.87z"
+        fill={getIconColor(color, 135, '#98A9B2')}
+      />
+      <path
+        d="M576.42 644.15l-21.9 43.19-0.62-38.71 0.7-0.14z"
+        fill={getIconColor(color, 136, '#A8BFC7')}
+      />
+      <path
+        d="M504.08 687.5l-17.58-3.55 0.47-35.32z"
+        fill={getIconColor(color, 137, '#718086')}
+      />
+      <path
+        d="M536.94 686.88l-32.86 0.62 15.89-37.96z"
+        fill={getIconColor(color, 138, '#56666C')}
+      />
+      <path
+        d="M536.94 686.88l-16.19 16.35-16.67-15.73z"
+        fill={getIconColor(color, 139, '#A1B2BA')}
+      />
+      <path
+        d="M520.75 703.23l-34.25-19.28 17.58 3.55z"
+        fill={getIconColor(color, 140, '#33474B')}
+      />
+      <path
+        d="M553.9 648.63l-16.96 38.25-16.97-37.34z"
+        fill={getIconColor(color, 141, '#8A9DA5')}
+      />
+      <path
+        d="M554.52 687.34l-17.58-0.46 16.96-38.25z"
+        fill={getIconColor(color, 142, '#DFE8EC')}
+      />
+      <path
+        d="M554.52 687.34l-33.77 15.89 16.19-16.35z"
+        fill={getIconColor(color, 143, '#495860')}
+      />
+    </svg>
+  );
+};
+
+export default IconXingdun;

src/components/iconfont/helper.ts

@@ -0,0 +1,12 @@
+/* tslint:disable */
+/* eslint-disable */
+
+export const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => {
+  return color
+    ? (
+      typeof color === 'string'
+        ? color
+        : color[index] || defaultColor
+    )
+    : defaultColor;
+};

src/components/iconfont/index.tsx

@@ -0,0 +1,62 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { SVGAttributes, FunctionComponent } from 'react';
+import IconTransfer from './IconTransfer';
+import IconDiqiu from './IconDiqiu';
+import IconTuichu from './IconTuichu';
+import IconChevronsrightshuangyoujiantou from './IconChevronsrightshuangyoujiantou';
+import IconFuzhi from './IconFuzhi';
+import IconIconArrowLeft from './IconIconArrowLeft';
+import IconTongdun from './IconTongdun';
+import IconJindun from './IconJindun';
+import IconXingdun from './IconXingdun';
+import IconGuanjun from './IconGuanjun';
+export { default as IconTransfer } from './IconTransfer';
+export { default as IconDiqiu } from './IconDiqiu';
+export { default as IconTuichu } from './IconTuichu';
+export { default as IconChevronsrightshuangyoujiantou } from './IconChevronsrightshuangyoujiantou';
+export { default as IconFuzhi } from './IconFuzhi';
+export { default as IconIconArrowLeft } from './IconIconArrowLeft';
+export { default as IconTongdun } from './IconTongdun';
+export { default as IconJindun } from './IconJindun';
+export { default as IconXingdun } from './IconXingdun';
+export { default as IconGuanjun } from './IconGuanjun';
+
+export type IconNames = 'transfer' | 'diqiu' | 'tuichu' | 'chevronsrightshuangyoujiantou' | 'fuzhi' | 'icon_arrow_left' | 'tongdun' | 'jindun' | 'xingdun' | 'guanjun';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  name: IconNames;
+  size?: number;
+  color?: string | string[];
+}
+
+const IconFont: FunctionComponent<Props> = ({ name, ...rest }) => {
+  switch (name) {
+    case 'transfer':
+      return <IconTransfer {...rest} />;
+    case 'diqiu':
+      return <IconDiqiu {...rest} />;
+    case 'tuichu':
+      return <IconTuichu {...rest} />;
+    case 'chevronsrightshuangyoujiantou':
+      return <IconChevronsrightshuangyoujiantou {...rest} />;
+    case 'fuzhi':
+      return <IconFuzhi {...rest} />;
+    case 'icon_arrow_left':
+      return <IconIconArrowLeft {...rest} />;
+    case 'tongdun':
+      return <IconTongdun {...rest} />;
+    case 'jindun':
+      return <IconJindun {...rest} />;
+    case 'xingdun':
+      return <IconXingdun {...rest} />;
+    case 'guanjun':
+      return <IconGuanjun {...rest} />;
+
+  }
+
+  return null;
+};
+
+export default IconFont;

src/constants/index.ts

@@ -1,9 +1,26 @@
 /*
  * @LastEditors: John
  * @Date: 2024-06-17 17:57:13
- * @LastEditTime: 2024-06-17 17:57:30
+ * @LastEditTime: 2024-06-21 11:45:40
  * @Author: John
  */
 export enum ASYNC_STORAGE_KEY {
-  Token = "user.token",
+  Store = "user.store",
+}
+
+export enum UrlQueryParamsKey {
+  INVITE_CODE = "inviteCode",
+}
+
+export enum Lang {
+  en = "en",
+  cn = "cn",
+  tw = "tw",
+  jp = "jp",
+  de = "de",
+}
+
+export enum CoinName {
+  USDT = "USDT",
+  RMOB = "RMOB",
 }

src/context/RouterContext.tsx

@@ -0,0 +1,45 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-18 15:51:13
+ * @LastEditTime: 2024-06-18 15:59:23
+ * @Author: John
+ */
+import { PropsWithChildren, createContext, useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+
+type RouteLog = {
+  current: string;
+  from: string;
+};
+
+export const RouterLogContext = createContext<RouteLog>({
+  current: "",
+  from: "",
+});
+
+const RouterLogProvider = ({ children }: PropsWithChildren) => {
+  const location = useLocation();
+  const [route, setRoute] = useState<RouteLog>({
+    //--> It can be replaced with useRef or localStorage
+    current: location.pathname,
+    from: location.pathname,
+  });
+
+  useEffect(() => {
+    setRoute((prev) => ({ current: location.pathname, from: prev.current }));
+  }, [location]);
+
+  useEffect(() => {
+    console.log("route:", route);
+
+    return () => {};
+  }, [route]);
+
+  return (
+    <RouterLogContext.Provider value={route}>
+      {children}
+    </RouterLogContext.Provider>
+  );
+};
+
+export default RouterLogProvider;

src/contract/abi/RedDevils.json

@@ -0,0 +1,444 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "orderId",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "paymentType",
+        "type": "uint256"
+      },
+      {
+        "internalType": "string",
+        "name": "NFTURI",
+        "type": "string"
+      }
+    ],
+    "name": "buyEquityNFT",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "EquityNFTAddr",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "payAddr",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "p1",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "OwnableInvalidOwner",
+    "type": "error"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+      }
+    ],
+    "name": "OwnableUnauthorizedAccount",
+    "type": "error"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "buyAddr",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "orderId",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "paymentType",
+        "type": "uint256"
+      }
+    ],
+    "name": "BuySuccess",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "previousOwner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "OwnershipTransferred",
+    "type": "event"
+  },
+  {
+    "inputs": [],
+    "name": "renounceOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "paymentTime",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "orderId",
+        "type": "uint256"
+      },
+      {
+        "internalType": "bytes32",
+        "name": "hashStr",
+        "type": "bytes32"
+      }
+    ],
+    "name": "reward",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "addr",
+        "type": "address"
+      },
+      {
+        "internalType": "string",
+        "name": "NFTURI",
+        "type": "string"
+      }
+    ],
+    "name": "rewardNFT",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "buyAddr",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "orderId",
+        "type": "uint256"
+      }
+    ],
+    "name": "RewardSuccess",
+    "type": "event"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "addr",
+        "type": "address"
+      }
+    ],
+    "name": "setNFTAddress",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "a",
+        "type": "address"
+      }
+    ],
+    "name": "setPayeeAddress",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "p",
+        "type": "uint256"
+      }
+    ],
+    "name": "setPrice",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "addr",
+        "type": "address"
+      }
+    ],
+    "name": "setUSDCAddress",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "transferOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "orderId",
+        "type": "uint256"
+      }
+    ],
+    "name": "upgradePrivilege",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "buyAddr",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "orderId",
+        "type": "uint256"
+      }
+    ],
+    "name": "UpgradeRange",
+    "type": "event"
+  },
+  {
+    "inputs": [],
+    "name": "withdraw",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "EquityNFT",
+    "outputs": [
+      {
+        "internalType": "contract RedDevilEquityNFT",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "orderId",
+        "type": "uint256"
+      }
+    ],
+    "name": "getOrderStatus",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "payee1",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "price",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "tokenIndex",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "usdc",
+    "outputs": [
+      {
+        "internalType": "contract IERC20",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]

src/contract/abi/USDT.json

@@ -0,0 +1,460 @@
+[
+  {
+    "inputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Approval",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "previousOwner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "OwnershipTransferred",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "_decimals",
+    "outputs": [
+      {
+        "internalType": "uint8",
+        "name": "",
+        "type": "uint8"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "_name",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "_symbol",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "burn",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [
+      {
+        "internalType": "uint8",
+        "name": "",
+        "type": "uint8"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "subtractedValue",
+        "type": "uint256"
+      }
+    ],
+    "name": "decreaseAllowance",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "getOwner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "addedValue",
+        "type": "uint256"
+      }
+    ],
+    "name": "increaseAllowance",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "mint",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "name",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [],
+    "name": "renounceOwnership",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "recipient",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "sender",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "recipient",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "transferOwnership",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]

src/contract/abi/erc20abi.json

@@ -0,0 +1,272 @@
+[
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "name",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_spender",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_from",
+        "type": "address"
+      },
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint8"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "version",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "name": "balance",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_spender",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      },
+      {
+        "name": "_extraData",
+        "type": "bytes"
+      }
+    ],
+    "name": "approveAndCall",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      },
+      {
+        "name": "_spender",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "name": "remaining",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "_initialAmount",
+        "type": "uint256"
+      },
+      {
+        "name": "_tokenName",
+        "type": "string"
+      },
+      {
+        "name": "_decimalUnits",
+        "type": "uint8"
+      },
+      {
+        "name": "_tokenSymbol",
+        "type": "string"
+      }
+    ],
+    "type": "constructor"
+  },
+  {
+    "payable": false,
+    "type": "fallback"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "_from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "_owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "_spender",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Approval",
+    "type": "event"
+  }
+]

src/contract/abi/receive.json

@@ -0,0 +1,192 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "payAddr",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "OwnableInvalidOwner",
+    "type": "error"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+      }
+    ],
+    "name": "OwnableUnauthorizedAccount",
+    "type": "error"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "previousOwner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "OwnershipTransferred",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "buyAddr",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "orderId",
+        "type": "uint256"
+      }
+    ],
+    "name": "RewardSuccess",
+    "type": "event"
+  },
+  {
+    "inputs": [],
+    "name": "R_MAB",
+    "outputs": [
+      {
+        "internalType": "contract IERC20",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "orderId",
+        "type": "uint256"
+      }
+    ],
+    "name": "getOrderStatus",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "renounceOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "paymentTime",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "orderId",
+        "type": "uint256"
+      },
+      {
+        "internalType": "bytes32",
+        "name": "hashStr",
+        "type": "bytes32"
+      }
+    ],
+    "name": "reward",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "addr",
+        "type": "address"
+      }
+    ],
+    "name": "setUSDCAddress",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "transferOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "withdraw",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]

src/contract/utils.ts

@@ -0,0 +1,408 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-19 15:48:57
+ * @LastEditTime: 2024-07-19 14:09:28
+ * @Author: John
+ */
+import { config } from "@/components/WalletProvider";
+import {
+  readContract,
+  estimateGas,
+  writeContract,
+  waitForTransactionReceipt,
+  getAccount,
+} from "@wagmi/core";
+import { encodeFunctionData } from "viem/utils";
+import erc20Abi from "@/contract/abi/erc20abi.json";
+import usdtAbi from "@/contract/abi/USDT.json";
+import RedDevilsAbi from "@/contract/abi/RedDevils.json";
+import receiveAbi from "@/contract/abi/receive.json";
+import i18next from "i18next";
+import { BaseError } from "wagmi";
+import { UserIncome } from "@/server/module";
+
+/**
+ * @description 获取代币余额
+ * @param {string} fromAddress
+ * @return {*}
+ */
+export const getBalance = async (): Promise<bigint> => {
+  return new Promise((reslove, reject) => {
+    const fromAddress = getAccount(config).address;
+    if (!fromAddress) return reject(new Error("address is emtiy"));
+    readContract(config, {
+      abi: erc20Abi,
+      address: import.meta.env.VITE_NETWORK_USDT_ADDRESS,
+      functionName: "balanceOf",
+      args: [fromAddress],
+    })
+      .then((res: any) => {
+        console.log("U余额:", res);
+        if (typeof res == "undefined") {
+          // 获取授权U失败
+          reject(new BaseError("get balance of usdt error!"));
+          return;
+        }
+        reslove(res);
+      })
+      .catch((err: BaseError) => {
+        console.log("get balance of usdt err", err);
+        reject(err);
+      });
+  });
+};
+
+/**
+ * @description: 获取已经授权的U
+ * @param {string} fromAddress
+ * @return {*}
+ */
+export const getApproveUsdt = async (): Promise<bigint> => {
+  return new Promise((reslove, reject) => {
+    const fromAddress = getAccount(config).address;
+    if (!fromAddress) return reject(new Error("address is emtiy"));
+
+    readContract(config, {
+      abi: erc20Abi,
+      address: import.meta.env.VITE_NETWORK_USDT_ADDRESS,
+      functionName: "allowance",
+      args: [fromAddress, import.meta.env.VITE_PURCHASED_CONTRACT_ADDRESS],
+    })
+      .then((res: any) => {
+        console.log("上次授权的U:", res);
+        if (typeof res == "undefined") {
+          // 获取授权U失败
+          reject(new BaseError("get approve usdt error"));
+          return;
+        }
+        reslove(res);
+      })
+      .catch((err: BaseError) => {
+        console.log("get approve usdt error", err);
+        reject(err);
+      });
+  });
+};
+
+/**
+ * @description: 授权U
+ * @param {bigint} uNum
+ * @return {*}
+ */
+export const authorizedU = async (uNum: bigint) => {
+  console.log(
+    "授权金额参数：",
+    import.meta.env.VITE_PURCHASED_CONTRACT_ADDRESS,
+    uNum
+  );
+  return new Promise<void>((reslove, reject) => {
+    estimateGas(config, {
+      to: import.meta.env.VITE_NETWORK_USDT_ADDRESS,
+      data: encodeFunctionData({
+        abi: usdtAbi,
+        functionName: "approve",
+        args: [import.meta.env.VITE_PURCHASED_CONTRACT_ADDRESS, uNum],
+      }),
+    })
+      .then((gas) => {
+        const gasPrice = (gas * 12n) / 10n;
+        console.log(
+          "estimate approve gas:%d , my approve gas: %d",
+          gas,
+          gasPrice
+        );
+
+        writeContract(config, {
+          abi: usdtAbi,
+          address: import.meta.env.VITE_NETWORK_USDT_ADDRESS,
+          functionName: "approve",
+          args: [import.meta.env.VITE_PURCHASED_CONTRACT_ADDRESS, uNum],
+          gas: gasPrice,
+          // gas,
+        })
+          .then(async (hash) => {
+            console.log("approve res", hash);
+            const transactionReceipt = await waitForTransactionReceipt(config, {
+              hash,
+            });
+            if (transactionReceipt.status == "success") reslove();
+          })
+          .catch((err: BaseError) => {
+            console.log("approve error", err);
+            reject(err);
+          });
+      })
+      .catch((err: BaseError) => {
+        console.log("estimate approve gas error", err);
+        reject(err);
+      });
+  });
+};
+
+/**
+ * payByContract
+ * @param amount
+ * @param orderID
+ * @returns
+ */
+export async function payByContract(
+  amount: bigint,
+  orderID: string,
+  payInduction: number
+) {
+  console.log("pay buy contract params", { amount, orderID });
+  console.log("NETWORK_USDT:", import.meta.env.VITE_NETWORK_USDT_ADDRESS);
+
+  return new Promise<string>(async (reslove, reject) => {
+    try {
+      const balance = await getBalance();
+      if (balance < amount) {
+        console.log("用户代币余额不足");
+        reject(new BaseError(i18next.t("余额不足")));
+        return;
+      }
+
+      console.log("当前要授权的U:", amount);
+      let approvedU = await getApproveUsdt();
+      if (approvedU < amount) {
+        await authorizedU(amount);
+      }
+      const NFTURI =
+        "https://gateway.lighthouse.storage/ipfs/bafkreicjdund46333jhrj556kkdsi7bqupyt2qi3lmylmtxcfiw7f2afe4";
+      console.log("参数:", amount, orderID, payInduction, NFTURI);
+      estimateGas(config, {
+        to: import.meta.env.VITE_PURCHASED_CONTRACT_ADDRESS,
+        data: encodeFunctionData({
+          abi: RedDevilsAbi,
+          functionName: "buyEquityNFT",
+          args: [amount, orderID, payInduction, NFTURI],
+        }),
+      })
+        .then((gas) => {
+          const gasPrice = (gas * 12n) / 10n;
+          console.log("estimate gas:%d , my gas: %d", gas, gasPrice);
+          writeContract(config, {
+            abi: RedDevilsAbi,
+            address: import.meta.env.VITE_PURCHASED_CONTRACT_ADDRESS,
+            functionName: "buyEquityNFT",
+            args: [amount, orderID, payInduction, NFTURI],
+            gas: gasPrice,
+          })
+            .then((receipt) => {
+              console.log("write contract success!, receipt:", receipt);
+              reslove(receipt);
+            })
+            .catch((err: BaseError) => {
+              console.log("buyEquityNFT Transaction err", err);
+              reject(err);
+            });
+        })
+        .catch((err: BaseError) => {
+          console.log("buyEquityNFT estimateGas err", err);
+          reject(err);
+        });
+    } catch (err) {
+      console.log("pay By Contract catch err", err);
+      if (typeof err == "string") return reject(new BaseError(`${err}`));
+      return reject(err);
+    }
+  });
+}
+
+/**
+ * upGradeByContract
+ * @param amount
+ * @param orderID
+ * @returns
+ */
+export async function upGradeByContract(amount: bigint, orderID: string) {
+  console.log("pay buy contract params", { amount, orderID });
+  console.log("NETWORK_USDT:", import.meta.env.VITE_NETWORK_USDT_ADDRESS);
+
+  return new Promise<string>(async (reslove, reject) => {
+    try {
+      const balance = await getBalance();
+      if (balance < amount) {
+        console.log("用户代币余额不足");
+        reject(new BaseError(i18next.t("余额不足")));
+        return;
+      }
+
+      console.log("当前要授权的U:", amount);
+      let approvedU = await getApproveUsdt();
+      if (approvedU < amount) {
+        await authorizedU(amount);
+      }
+
+      console.log("参数:", amount, orderID);
+      estimateGas(config, {
+        to: import.meta.env.VITE_PURCHASED_CONTRACT_ADDRESS,
+        data: encodeFunctionData({
+          abi: RedDevilsAbi,
+          functionName: "upgradePrivilege",
+          args: [amount, orderID],
+        }),
+      })
+        .then((gas) => {
+          const gasPrice = (gas * 12n) / 10n;
+          console.log("estimate gas:%d , my gas: %d", gas, gasPrice);
+          writeContract(config, {
+            abi: RedDevilsAbi,
+            address: import.meta.env.VITE_PURCHASED_CONTRACT_ADDRESS,
+            functionName: "upgradePrivilege",
+            args: [amount, orderID],
+            gas: gasPrice,
+          })
+            .then((receipt) => {
+              console.log("write contract success!, receipt:", receipt);
+              reslove(receipt);
+            })
+            .catch((err: BaseError) => {
+              console.log("upgradePrivilege Transaction err", err);
+              reject(err);
+            });
+        })
+        .catch((err: BaseError) => {
+          console.log("upgradePrivilege estimateGas err", err);
+          reject(err);
+        });
+    } catch (err) {
+      reject(new BaseError(`${err}`));
+    }
+  });
+}
+
+/**
+ * receiveRMABByContract
+ * @param amount
+ * @param paymentTime
+ * @param orderID
+ * @param hashStr
+ * @returns
+ */
+export async function receiveRMABByContract(
+  amount: bigint,
+  paymentTime: number,
+  orderID: string,
+  hashStr: string
+) {
+  console.log("pay buy contract params", { amount, orderID });
+
+  return new Promise<string>(async (reslove, reject) => {
+    try {
+      console.log("参数:", amount, paymentTime, orderID, hashStr);
+      estimateGas(config, {
+        to: import.meta.env.VITE_RECEIVE_RAMB_CONTRACT_ADDRESS,
+        data: encodeFunctionData({
+          abi: receiveAbi,
+          functionName: "reward",
+          args: [amount, paymentTime, orderID, hashStr],
+        }),
+      })
+        .then((gas) => {
+          const gasPrice = (gas * 12n) / 10n;
+          console.log("estimate gas:%d , my gas: %d", gas, gasPrice);
+          writeContract(config, {
+            abi: receiveAbi,
+            address: import.meta.env.VITE_RECEIVE_RAMB_CONTRACT_ADDRESS,
+            functionName: "reward",
+            args: [amount, paymentTime, orderID, hashStr],
+            gas: gasPrice,
+          })
+            .then((receipt) => {
+              console.log("write contract success!, receipt:", receipt);
+              reslove(receipt);
+            })
+            .catch((err: BaseError) => {
+              console.log("reward rmab Transaction err", err);
+              reject(err);
+            });
+        })
+        .catch((err: BaseError) => {
+          console.log("reward rmab estimateGas err", err);
+          reject(err);
+        });
+    } catch (err) {
+      reject(new BaseError(`${err}`));
+    }
+  });
+}
+
+/**
+ * receiveUSDTByContract
+ * @param amount
+ * @param paymentTime
+ * @param orderID
+ * @param hashStr
+ * @returns
+ */
+export async function receiveUSDTByContract(
+  amount: bigint,
+  paymentTime: number,
+  orderID: string,
+  hashStr: string
+) {
+  console.log("pay buy contract params", { amount, orderID });
+
+  return new Promise<string>(async (reslove, reject) => {
+    try {
+      console.log("参数:", amount, paymentTime, orderID, hashStr);
+      estimateGas(config, {
+        to: import.meta.env.VITE_PURCHASED_CONTRACT_ADDRESS,
+        data: encodeFunctionData({
+          abi: RedDevilsAbi,
+          functionName: "reward",
+          args: [amount, paymentTime, orderID, hashStr],
+        }),
+      })
+        .then((gas) => {
+          const gasPrice = (gas * 12n) / 10n;
+          console.log("estimate gas:%d , my gas: %d", gas, gasPrice);
+          writeContract(config, {
+            abi: RedDevilsAbi,
+            address: import.meta.env.VITE_PURCHASED_CONTRACT_ADDRESS,
+            functionName: "reward",
+            args: [amount, paymentTime, orderID, hashStr],
+            gas: gasPrice,
+          })
+            .then((receipt) => {
+              console.log("write contract success!, receipt:", receipt);
+              reslove(receipt);
+            })
+            .catch((err: BaseError) => {
+              console.log("reward Transaction err", err);
+              reject(err);
+            });
+        })
+        .catch((err: BaseError) => {
+          console.log("reward estimateGas err", err);
+          reject(err);
+        });
+    } catch (err) {
+      reject(new BaseError(`${err}`));
+    }
+  });
+}
+
+/**
+ * receiveByContract
+ * @param type
+ * @param amount
+ * @param paymentTime
+ * @param orderID
+ * @param hashStr
+ * @returns
+ */
+export async function receiveByContract(
+  type: UserIncome["coinId"],
+  amount: bigint,
+  paymentTime: number,
+  orderID: string,
+  hashStr: string
+) {
+  if (type == 1) {
+    return receiveUSDTByContract(amount, paymentTime, orderID, hashStr);
+  } else if (type == 2) {
+    return receiveRMABByContract(amount, paymentTime, orderID, hashStr);
+  }
+}

src/hook/usePollingCheckBuyStatus.ts

@@ -0,0 +1,83 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-21 16:08:23
+ * @LastEditTime: 2024-06-21 16:12:31
+ * @Author: John
+ */
+import { useRef, useState } from "react";
+import { waitForTransactionReceipt } from "@wagmi/core";
+import { config } from "@/components/WalletProvider";
+/**
+ * @description: 轮询查询交易,获取nft
+ * @return {*}
+ */
+export default function (type: "NFT" | "NORMAL") {
+  const [buyNftIds, setBuyNftIds] = useState<string>("");
+  const [transcationStatus, setTranscationStatus] = useState<
+    "success" | undefined
+  >(undefined);
+  const stop = useRef(false);
+
+  function startPollingCheckBuyStatus(hash: string) {
+    setTranscationStatus(undefined);
+    setBuyNftIds("");
+    polling(hash);
+  }
+
+  const checkStatus = async (hash: string) => {
+    return new Promise<void>(async (reslove) => {
+      // let res = await API_GET_ORDER_STATE_BY_HASH(hash);
+      // setBuyNftIds(res.nftIds);
+      // console.log("得到nft ids:", res.nftIds);
+
+      const transactionReceipt = await waitForTransactionReceipt(config, {
+        hash: hash as `0x${string}`,
+      });
+
+      console.log("transaction receipt:", transactionReceipt);
+      if (transactionReceipt.status == "success") {
+        if (type == "NFT") {
+          console.log("transaction receipt success:", transactionReceipt);
+          const nftLogs = transactionReceipt.logs.filter(
+            (v) =>
+              v.topics.length === 4 &&
+              v.topics[1] ===
+                "0x0000000000000000000000000000000000000000000000000000000000000000"
+          ); // 过滤（挖币的日志）
+          const nftDataArr = nftLogs.map((v) => v.topics[3]);
+          const nftDataStr = nftDataArr.map(
+            (v) => `#${parseInt(v as string, 16)}`
+          );
+          setBuyNftIds(nftDataStr.join(","));
+        } else {
+          setTranscationStatus("success");
+          stopPollingCheckBuyStatus();
+          reslove();
+          return;
+        }
+      }
+
+      setTimeout(() => {
+        reslove();
+      }, 2000);
+    });
+  };
+
+  const polling = async (hash: string) => {
+    await checkStatus(hash);
+    if (stop.current) return;
+    polling(hash);
+  };
+
+  function stopPollingCheckBuyStatus() {
+    stop.current = true;
+  }
+
+  return {
+    transcationStatus,
+    setBuyNftIds,
+    buyNftIds,
+    startPollingCheckBuyStatus,
+    stopPollingCheckBuyStatus,
+  };
+}

src/i18n/init.ts

@@ -1,21 +1,36 @@
 /*
  * @LastEditors: John
  * @Date: 2024-06-18 10:30:43
- * @LastEditTime: 2024-06-18 10:34:19
+ * @LastEditTime: 2024-06-19 16:55:26
  * @Author: John
  */
 import i18next from "i18next";
 import { initReactI18next } from "react-i18next";
 import en from "./translation/en.json";
+import cn from "./translation/cn.json";
+import tw from "./translation/tw.json";
+import jp from "./translation/jp.json";
+import de from "./translation/de.json";
 i18next.use(initReactI18next).init({
   compatibilityJSON: "v3", // <--- add this line.
   lng: "en", // if you're using a language detector, do not define the lng option
-  // lng: LANGUAGE["en-US"],
   debug: false,
   resources: {
     en: {
       translation: en,
     },
+    cn: {
+      translation: cn,
+    },
+    tw: {
+      translation: tw,
+    },
+    jp: {
+      translation: jp,
+    },
+    de: {
+      translation: de,
+    },
   },
   // if you see an error like: "Argument of type 'DefaultTFuncReturn' is not assignable to parameter of type xyz"
   // set returnNull to false (and also in the i18next.d.ts options)

src/i18n/translation/cn.json

@@ -0,0 +1,113 @@
+{
+  "AppName": "红魔",
+  "红魔股权NFT": "红魔股权NFT",
+  "铸造 NFT": "铸造 NFT",
+  "级别提升": "级别提升",
+  "收益记录": "收益记录",
+  "RMOB记录": "RMOB记录",
+  "直推列表": "直推列表",
+  "返回": "返回",
+  "选择语言": "选择语言",
+  "确定": "确定",
+  "取消": "取消",
+  "普通非活跃": "普通非活跃",
+  "升级": "升级",
+  "链接钱包": "链接钱包",
+  "邀请铸造": "邀请铸造",
+  "团队社长": "团队社长",
+  "邀请空投": "邀请空投",
+  "收益": "收益",
+  "Min结束后按照规则进行空投。": "Min结束后按照规则进行空投。",
+  "铸造 NFT 获得代币空投": "铸造 NFT 获得代币空投",
+  "总收益= 已领取 + 待领取": "总收益= 已领取 + 待领取",
+  "邀请": "邀请",
+  "邀请链接": "邀请链接",
+  "普通会员每邀请铸造一个NFT可获得一份空投福利；推荐铸造20个NFT的可升级为会长；团队中拥有20位会长可升级为基金会社长；邀请越多级别越高福利越多。": "普通会员每邀请铸造一个NFT可获得一份空投福利；推荐铸造20个NFT的可升级为会长；团队中拥有20位会长可升级为基金会社长；邀请越多级别越高福利越多。",
+  "数据披露": "数据披露",
+  "资金池": "资金池",
+  "社长席位": "社长席位",
+  "基金会社长席位": "基金会社长席位",
+  "待领取": "待领取",
+  "领取": "领取",
+  "钱包未链接，无法向您显示 NFT": "钱包未链接，无法向您显示 NFT",
+  "邀请列表": "邀请列表",
+  "NFT总量：": "NFT总量：",
+  "MINT余量：": "MINT余量：",
+  "当前MINT价格：": "当前MINT价格：",
+  "价格说明：": "价格说明：",
+  "{{value1}} USDT起，每增加 {{value2}} 名普通会员，NFT价格上涨 {{value3}}，既：前 {{value2}} 名价格为 {{value1}} USDT/枚，value4 名价格为{{value1}}u+{{value1}}u*{{value3}}={{value5}} USDT/枚，以此类推。": "{{value1}} USDT起，每增加{{value2}}名普通会员，NFT价格上涨{{value3}}，既：前{{value2}}名价格为{{value1}} USDT/枚，{{value4}}名价格为{{value1}}u+{{value1}}u*{{value3}}={{value5}} USDT/枚，以此类推。",
+  "授权USDT": "授权USDT",
+  "当前级别": "当前级别",
+  "普通活跃": "普通活跃",
+  "提升级别": "提升级别",
+  "社长": "社长",
+  "当前升级价格：": "当前升级价格：",
+  "升级费用xxx USDT起，50%进入资金池，另外50%平均分给所有升级成功的社长和基金会社长。自第二个社长升级开始，每升级一名社长所需铸造费用增加xxx，既第二位社长升级铸造费用为xxxu+xxx*xxx=xxx USDT，以此类推。": "升级费用{{value1}} USDT起，50%进入资金池，另外50%平均分给所有升级成功的社长和基金会社长。自第二个社长升级开始，每升级一名社长所需铸造费用增加{{value2}}，既第二位社长升级铸造费用为{{value1}}u+{{value1}}*{{value2}}={{value3}} USDT，以此类推。",
+  "升级条件": "升级条件",
+  "普通会员": "普通会员",
+  "(限量xxx个)": "(限量 {{value}} 个)",
+  "1. MINT一枚NFT成为非活跃普通会员": "1. MINT一枚NFT成为非活跃普通会员",
+  "2. MINT NFT并推荐MINT成为活跃普通会员": "2. MINT NFT并推荐MINT成为活跃普通会员",
+  "3. 享1%代币空投平分(所有普通会员)": "3. 享1%代币空投平分(所有普通会员)",
+  "4. 活跃普通会员根据推荐MINT数量额外有空投权益。": "4. 活跃普通会员根据推荐MINT数量额外有空投权益。",
+  "(限量500个)": "(限量500个)",
+  "1. 先成为活跃普通会员，并推荐MINT 20枚NFT": "1. 先成为活跃普通会员，并推荐MINT 20枚NFT",
+  "2. 需支付100USDT起升级费用成为社长(第二个起递增10%)": "2. 需支付100USDT起升级费用成为社长(第二个起递增10%)",
+  "3. 享普通会员权益+0.5%空投代币平分(所有社长)": "3. 享普通会员权益+0.5%空投代币平分(所有社长)",
+  "4. 享社长升级费用50%平分(扣除2USDT GAS费后)": "4. 享社长升级费用50%平分(扣除2USDT GAS费后)",
+  "5. 从推荐MINT 21枚开始直推的铸造费用归社长所有": "5. 从推荐MINT 21枚开始直推的铸造费用归社长所有",
+  "基金会社长": "基金会社长",
+  "(限量20个)": "(限量20个)",
+  "1. 先成为社长，并团队中有20个社长": "1. 先成为社长，并团队中有20个社长",
+  "2. 享社长权益+0.5%空投代币平分(所有基金会社长)": "2. 享社长权益+0.5%空投代币平分(所有基金会社长)",
+  "3. 另外基金会社长参与所有项目分成": "3. 另外基金会社长参与所有项目分成",
+  "发放记录": "发放记录",
+  "升级费平分": "升级费平分",
+  "直推>20NFT": "直推>20NFT",
+  "空投记录": "空投记录",
+  "所有": "所有",
+  "NFT空投": "NFT空投",
+  "社长空投": "社长空投",
+  "直推空投": "直推空投",
+  "奖励类型": "奖励类型",
+  "NFT控投": "NFT控投",
+  "发放时间": "发放时间",
+  "发放数量": "发放数量",
+  "领取记录": "领取记录",
+  "领取时间": "领取时间",
+  "领取数量": "领取数量",
+  "领取状态": "领取状态",
+  "确认中": "确认中",
+  "领取成功": "领取成功",
+  "交易取消": "交易取消",
+  "地址": "地址",
+  "级别": "级别",
+  "直推NFT": "直推NFT",
+  "非活跃普通": "非活跃普通",
+  "活跃普通": "活跃普通",
+
+  "复制成功": "复制成功",
+  "领取成功，前往钱包查看": "领取成功，前往钱包查看",
+  "链接钱包中...": "链接钱包中...",
+  "无": "无",
+  "服务器错误": "服务器错误",
+  "余额不足": "余额不足",
+  "MINT成功，返回首页查看": "MINT成功，返回首页查看",
+  "正在授权USDT": "正在授权USDT",
+  "购买中": "购买中",
+  "领取中": "领取中",
+  "MINT Nft 获取邀请链接": "MINT Nft 获取邀请链接",
+  "链接钱包获取邀请链接": "链接钱包获取邀请链接",
+  "正在获取已授权金额": "正在获取已授权金额",
+  "升级成功，返回首页查看": "升级成功，返回首页查看",
+  "无级别提升": "无级别提升",
+  "没有更多数据了": "没有更多数据了",
+  "升级中": "升级中",
+  "无等级": "无等级",
+  "无效的邀请链接": "无效的邀请链接",
+
+  "交易红魔股权NFT": "交易红魔股权NFT",
+  "上级链接": "上级链接",
+  "邀请链接：": "邀请链接：",
+  "上级地址：": "上级地址："
+}

src/i18n/translation/de.json

@@ -0,0 +1,112 @@
+{
+  "AppName": "Der Rote Teufel",
+  "红魔股权NFT": "Red Devils Equity NFT",
+  "铸造 NFT": "NFT Prägen",
+  "级别提升": "Stufenaufstieg",
+  "收益记录": "Ergebnisrekord",
+  "RMOB记录": "RMOB Aufzeichnung",
+  "直推列表": "Direktempfehlungsliste",
+  "返回": "Zurück",
+  "选择语言": "Sprache wählen",
+  "确定": "Bestätigen",
+  "取消": "Abbrechen",
+  "普通非活跃": "Inaktiv Mitglied",
+  "升级": "Upgrade",
+  "链接钱包": "Wallet verbinden",
+  "邀请铸造": "Prägen einladen",
+  "团队社长": "Teamleiter",
+  "邀请空投": "Airdrop einladen",
+  "收益": "Einkommen",
+  "Min结束后按照规则进行空投。": "Airdrop nach dem Ende des Min gemäß den Regeln.",
+  "铸造 NFT 获得代币空投": "Token-Airdrop durch NFT-Prägung erhalten",
+  "总收益= 已领取 + 待领取": "Gesamtumsatz = Empfang + Abzuholen",
+  "邀请": "Einladen",
+  "邀请链接": "Einladungslink",
+  "普通会员每邀请铸造一个NFT可获得一份空投福利；推荐铸造20个NFT的可升级为会长；团队中拥有20位会长可升级为基金会社长；邀请越多级别越高福利越多。": "Normale Mitglieder erhalten für jede Einladung zur Prägung eines NFTs einen Airdrop-Bonus; 20 empfohlene Prägungen führen zum Aufstieg zum Vorsitzenden; 20 Vorsitzende im Team ermöglichen den Aufstieg zum Fundmanager; je mehr Einladungen, desto höher das Level und die Belohnungen.",
+  "数据披露": "Datenoffenlegung",
+  "资金池": "Liquiditätspool",
+  "社长席位": "Vorsitzenderplatz",
+  "基金会社长席位": "Fundmanagerplatz",
+  "待领取": "Ausstehend",
+  "领取": "Erhalten",
+  "钱包未链接，无法向您显示 NFT": "Wallet nicht verbunden, kann NFT nicht anzeigen",
+  "邀请列表": "Einladungsliste",
+  "NFT总量：": "Gesamtzahl der NFTs:",
+  "MINT余量：": "Verbleibende MINT:",
+  "当前MINT价格：": "Aktueller MINT-Preis:",
+  "价格说明：": "Preiserklärung:",
+  "{{value1}} USDT起，每增加 {{value2}} 名普通会员，NFT价格上涨 {{value3}}，既：前 {{value2}} 名价格为 {{value1}} USDT/枚，value4 名价格为{{value1}}u+{{value1}}u*{{value3}}={{value5}} USDT/枚，以此类推。": "Beginnend bei {{value1}} USDT steigt der NFT-Preis um {{value3}} für jede zusätzlichen {{value2}} Mitglieder: die ersten {{value2}} kosten {{value1}} USDT pro Stück, {{value4}} kosten {{value1}}u+{{value1}}u*{{value3}}={{value5}} USDT pro Stück usw.",
+  "授权USDT": "USDT autorisieren",
+  "当前级别": "Aktuelles Level",
+  "普通活跃": "Aktives Mitglied",
+  "提升级别": "Levelaufstieg",
+  "社长": "Vorsitzender",
+  "当前升级价格：": "Aktueller Upgrade-Preis:",
+  "升级费用xxx USDT起，50%进入资金池，另外50%平均分给所有升级成功的社长和基金会社长。自第二个社长升级开始，每升级一名社长所需铸造费用增加xxx，既第二位社长升级铸造费用为xxxu+xxx*xxx=xxx USDT，以此类推。": "Upgrade-Kosten ab {{value1}} USDT, 50% des Restbetrags gehen in den Liquiditätspool und die anderen 50% werden auf alle erfolgreichen Vorsitzenden und Fundmanager aufgeteilt. Ab dem zweiten Vorsitzenden steigen die Prägekosten um {{value2}} pro Aufstieg, also {{value1}}u+{{value1}}*{{value2}}={{value3}} USDT für den zweiten, usw.",
+  "升级条件": "Upgrade-Bedingungen",
+  "普通会员": "Normales Mitglied",
+  "(限量xxx个)": "(Begrenzt auf {{value}} Stück)",
+  "1. MINT一枚NFT成为非活跃普通会员": "1. Präge ein NFT, um inaktives Mitglied zu werden",
+  "2. MINT NFT并推荐MINT成为活跃普通会员": "2. Präge und empfehle NFTs, um aktives Mitglied zu werden",
+  "3. 享1%代币空投平分(所有普通会员)": "3. Erhalte 1% Token-Airdrop gleichmäßig verteilt (alle normalen Mitglieder)",
+  "4. 活跃普通会员根据推荐MINT数量额外有空投权益。": "4. Aktive Mitglieder erhalten zusätzliche Airdrop-Rechte basierend auf der Anzahl der empfohlenen Prägungen.",
+  "(限量500个)": "(Begrenzt auf 500 Stück)",
+  "1. 先成为活跃普通会员，并推荐MINT 20枚NFT": "1. Werde zuerst aktives Mitglied und empfehle die Prägung von 20 NFTs",
+  "2. 需支付100USDT起升级费用成为社长(第二个起递增10%)": "2. Zahle ab 100USDT für das Upgrade zum Vorsitzenden (ab dem zweiten um 10% steigend)",
+  "3. 享普通会员权益+0.5%空投代币平分(所有社长)": "3. Erhalte die Rechte eines normalen Mitglieds + 0,5% Token-Airdrop gleichmäßig verteilt (alle Vorsitzenden)",
+  "4. 享社长升级费用50%平分(扣除2USDT GAS费后)": "4. Erhalte 50% der Upgrade-Kosten des Vorsitzenden gleichmäßig verteilt (abzüglich 2USDT Gas-Gebühr)",
+  "5. 从推荐MINT 21枚开始直推的铸造费用归社长所有": "5. Ab 21 empfohlenen Prägungen gehen die Prägekosten direkt an den Vorsitzenden",
+  "基金会社长": "Fundmanager",
+  "(限量20个)": "(Begrenzt auf 20 Stück)",
+  "1. 先成为社长，并团队中有20个社长": "1. Werde zuerst Vorsitzender und habe 20 Vorsitzende im Team",
+  "2. 享社长权益+0.5%空投代币平分(所有基金会社长)": "2. Erhalte die Rechte eines Vorsitzenden + 0,5% Token-Airdrop gleichmäßig verteilt (alle Fundmanager)",
+  "3. 另外基金会社长参与所有项目分成": "3. Fundmanager nehmen zusätzlich an allen Projektgewinnen teil",
+  "发放记录": "Verteilungsprotokoll",
+  "升级费平分": "Upgrade-Gebührenverteilung",
+  "直推>20NFT": "Direktempfehlung > 20 NFT",
+  "空投记录": "Airdrop-Protokoll",
+  "所有": "Alle",
+  "NFT空投": "NFT-Airdrop",
+  "社长空投": "Vorsitzender-Airdrop",
+  "直推空投": "Direktempfehlung Airdrop",
+  "奖励类型": "Belohnungstyp",
+  "NFT控投": "NFT-Besitz",
+  "发放时间": "Verteilungszeit",
+  "发放数量": "Verteilungsmenge",
+  "领取记录": "Empfangsprotokoll",
+  "领取时间": "Empfangszeit",
+  "领取数量": "Empfangsmenge",
+  "领取状态": "Empfangsstatus",
+  "确认中": "Bestätigung läuft",
+  "领取成功": "Erfolgreich empfangen",
+  "交易取消": "Transaktion abgebrochen",
+  "地址": "Adresse",
+  "级别": "Stufe",
+  "直推NFT": "Direktempfehlung NFT",
+  "非活跃普通": "Inaktiv allgemein",
+  "活跃普通": "Aktiv allgemein",
+
+  "复制成功": "Erfolgreich kopiert",
+  "领取成功，前往钱包查看": "Erfolgreich abgerufen. Bitte überprüfen Sie Ihre Brieftasche.",
+  "链接钱包中...": "Wallet wird verbunden...",
+  "无": "Keiner",
+  "服务器错误": "Serverfehler",
+  "余额不足": "Unzureichendes Guthaben",
+  "MINT成功，返回首页查看": "MINT erfolgreich, zur Startseite zurückkehren, um nachzusehen.",
+  "正在授权USDT": "USDT wird autorisiert",
+  "购买中": "In Bearbeitung",
+  "领取中": "In Bearbeitung",
+  "MINT Nft 获取邀请链接": "MINT Nft Einladungslink erhalten",
+  "链接钱包获取邀请链接": "Verknüpfen Sie Ihre Brieftasche, um den Einladungslink zu erhalten.",
+  "正在获取已授权金额": "Aktuell wird der autorisierte Betrag abgerufen.",
+  "升级成功，返回首页查看": "Upgrade erfolgreich abgeschlossen, zurück zur Startseite zur Ansicht.",
+  "无级别提升": "Beförderung ohne Rang",
+  "没有更多数据了": "Keine weiteren Daten",
+  "升级中": "Wird aktualisiert",
+  "无等级": "Keine Bewertung",
+  "无效的邀请链接": "Ungültiger Einladungslink",
+  "交易红魔股权NFT": "Handel mit Red Devil Equity NFT",
+  "上级链接": "Link des Vorgesetzten",
+  "邀请链接：": "Einladungslink:",
+  "上级地址：": "Adresse des Vorgesetzten:"
+}

src/i18n/translation/en.json

@@ -1,3 +1,112 @@
 {
-  "AppName": "red devils"
+  "AppName": "Red Devils",
+  "红魔股权NFT": "Red Devil Equity NFT",
+  "铸造 NFT": "Mint NFT",
+  "级别提升": "Level Up",
+  "收益记录": "Revenue Record",
+  "RMOB记录": "RMOB Records",
+  "直推列表": "Direct Referral List",
+  "返回": "Back",
+  "选择语言": "Select Language",
+  "确定": "Confirm",
+  "取消": "Cancel",
+  "普通非活跃": "Inactive Member",
+  "升级": "Upgrade",
+  "链接钱包": "Connect Wallet",
+  "邀请铸造": "Invite to Mint",
+  "团队社长": "Team Leader",
+  "邀请空投": "Invite Airdrop",
+  "收益": "Income",
+  "Min结束后按照规则进行空投。": "Airdrop will follow the rules after Min ends.",
+  "铸造 NFT 获得代币空投": "Mint NFT for Token Airdrop",
+  "总收益= 已领取 + 待领取": "Total Revenue = Claimed + Pending",
+  "邀请": "Invite",
+  "邀请链接": "Invite Link",
+  "普通会员每邀请铸造一个NFT可获得一份空投福利；推荐铸造20个NFT的可升级为会长；团队中拥有20位会长可升级为基金会社长；邀请越多级别越高福利越多。": "Regular members get an airdrop for each NFT minted through their invite; recommending 20 NFTs upgrades to Leader; having 20 Leaders in the team upgrades to Foundation Leader; more invites lead to higher levels and more benefits.",
+  "数据披露": "Data Disclosure",
+  "资金池": "Fund Pool",
+  "社长席位": "Leader Seats",
+  "基金会社长席位": "Foundation Leader Seats",
+  "待领取": "Pending",
+  "领取": "Claim",
+  "钱包未链接，无法向您显示 NFT": "Wallet not linked, unable to display NFT",
+  "邀请列表": "Invite List",
+  "NFT总量：": "Total NFTs:",
+  "MINT余量：": "Remaining MINT:",
+  "当前MINT价格：": "Current MINT Price:",
+  "价格说明：": "Price Explanation:",
+  "{{value1}} USDT起，每增加 {{value2}} 名普通会员，NFT价格上涨 {{value3}}，既：前 {{value2}} 名价格为 {{value1}} USDT/枚，value4 名价格为{{value1}}u+{{value1}}u*{{value3}}={{value5}} USDT/枚，以此类推。": "Starting at {{value1}} USDT, the NFT price increases by {{value3}} for every {{value2}} new members: first {{value2}} at {{value1}} USDT each, {{value4}} at {{value1}}u+{{value1}}u*{{value3}}={{value5}} USDT each, and so on.",
+  "授权USDT": "Approve USDT",
+  "当前级别": "Current Level",
+  "普通活跃": "Active Member",
+  "提升级别": "Upgrade Level",
+  "社长": "Leader",
+  "当前升级价格：": "Current Upgrade Price:",
+  "升级费用xxx USDT起，50%进入资金池，另外50%平均分给所有升级成功的社长和基金会社长。自第二个社长升级开始，每升级一名社长所需铸造费用增加xxx，既第二位社长升级铸造费用为xxxu+xxx*xxx=xxx USDT，以此类推。": "Upgrade cost starts at {{value1}} USDT, 50% goes to the fund pool, and 50% is distributed among successful Leaders and Foundation Leaders. From the second Leader onwards, each upgrade cost increases by {{value2}}, i.e., second Leader upgrade costs {{value1}}u+{{value1}}*{{value2}}={{value3}} USDT, and so on.",
+  "升级条件": "Upgrade Conditions",
+  "普通会员": "Regular Member",
+  "(限量xxx个)": "(Limited to {{value}})",
+  "1. MINT一枚NFT成为非活跃普通会员": "1. MINT an NFT to become an Inactive Member",
+  "2. MINT NFT并推荐MINT成为活跃普通会员": "2. MINT NFT and recommend MINT to become an Active Member",
+  "3. 享1%代币空投平分(所有普通会员)": "3. 1% token airdrop shared among all members",
+  "4. 活跃普通会员根据推荐MINT数量额外有空投权益。": "4. Active members get extra airdrop benefits based on the number of recommended MINTs.",
+  "(限量500个)": "(Limited to 500)",
+  "1. 先成为活跃普通会员，并推荐MINT 20枚NFT": "1. Become an Active Member and recommend 20 NFTs",
+  "2. 需支付100USDT起升级费用成为社长(第二个起递增10%)": "2. Pay 100USDT to upgrade to Leader (10% increment from the second Leader onwards)",
+  "3. 享普通会员权益+0.5%空投代币平分(所有社长)": "3. Enjoy member benefits + 0.5% token airdrop shared among all Leaders",
+  "4. 享社长升级费用50%平分(扣除2USDT GAS费后)": "4. Share 50% of Leader upgrade fees (after 2USDT gas fee)",
+  "5. 从推荐MINT 21枚开始直推的铸造费用归社长所有": "5. Mint fees from direct referrals beyond 21 NFTs go to the Leader",
+  "基金会社长": "Foundation Leader",
+  "(限量20个)": "(Limited to 20)",
+  "1. 先成为社长，并团队中有20个社长": "1. Become a Leader with 20 Leaders in your team",
+  "2. 享社长权益+0.5%空投代币平分(所有基金会社长)": "2. Enjoy Leader benefits + 0.5% token airdrop shared among all Foundation Leaders",
+  "3. 另外基金会社长参与所有项目分成": "3. Additionally, Foundation Leaders share in all project profits",
+  "发放记录": "Distribution Records",
+  "升级费平分": "Upgrade Fee Distribution",
+  "直推>20NFT": "Direct Referral >20 NFTs",
+  "空投记录": "Airdrop Records",
+  "所有": "All",
+  "NFT空投": "NFT Airdrop",
+  "社长空投": "Leader Airdrop",
+  "直推空投": "Direct Referral Airdrop",
+  "奖励类型": "Reward Type",
+  "NFT控投": "NFT Holding",
+  "发放时间": "Distribution Time",
+  "发放数量": "Distribution Quantity",
+  "领取记录": "Claim Records",
+  "领取时间": "Claim Time",
+  "领取数量": "Claim Quantity",
+  "领取状态": "Claim Status",
+  "确认中": "Confirming",
+  "领取成功": "Claim Successful",
+  "交易取消": "Transaction Cancelled",
+  "地址": "Address",
+  "级别": "Level",
+  "直推NFT": "Direct Referral NFT",
+  "非活跃普通": "Inactive Member",
+  "活跃普通": "Active Member",
+
+  "复制成功": "Copy successful",
+  "领取成功，前往钱包查看": "Claim successful, please check your wallet.",
+  "链接钱包中...": "connecting wallet...",
+  "无": "None",
+  "服务器错误": "Server Error",
+  "余额不足": "Insufficient balance",
+  "MINT成功，返回首页查看": "MINT succeeded, return to the homepage to check.",
+  "正在授权USDT": "Authorizing USDT",
+  "购买中": "Purchasing",
+  "领取中": "Processing",
+  "MINT Nft 获取邀请链接": "Mint NFT to get invitation link",
+  "链接钱包获取邀请链接": "Link your wallet to get the invitation link.",
+  "正在获取已授权金额": "Currently retrieving authorized amount.",
+  "升级成功，返回首页查看": "Upgrade successful, return to homepage to view.",
+  "无级别提升": "Promotion without rank",
+  "没有更多数据了": "No more data",
+  "升级中": "Upgrading",
+  "无等级": "No Grade",
+  "无效的邀请链接": "Invalid invitation link",
+  "交易红魔股权NFT": "Trade Red Devil Equity NFT",
+  "上级链接": "Superior's Link",
+  "邀请链接：": "Invitation Link:",
+  "上级地址：": "Superior's Address:"
 }

src/i18n/translation/jp.json

@@ -0,0 +1,113 @@
+{
+  "AppName": "紅魔",
+  "红魔股权NFT": "レッドデビルズ株式NFT",
+  "铸造 NFT": "NFT 鋳造",
+  "级别提升": "レベルアップ",
+  "收益记录": "収益実績",
+  "RMOB记录": "RMOB記録",
+  "直推列表": "ダイレクト推薦リスト",
+  "返回": "戻る",
+  "选择语言": "言語選択",
+  "确定": "確定",
+  "取消": "キャンセル",
+  "普通非活跃": "非活躍メンバー",
+  "升级": "アップグレード",
+  "链接钱包": "ウォレットを接続",
+  "邀请铸造": "鋳造を招待",
+  "团队社长": "チームリーダー",
+  "邀请空投": "エアドロップ招待",
+  "收益": "所得",
+  "Min结束后按照规则进行空投。": "Min終了後、ルールに従ってエアドロップを行います。",
+  "铸造 NFT 获得代币空投": "NFTを鋳造してトークンエアドロップを獲得",
+  "总收益= 已领取 + 待领取": "総収入 = 受領済み + 回収対象",
+  "邀请": "招待",
+  "邀请链接": "招待リンク",
+  "普通会员每邀请铸造一个NFT可获得一份空投福利；推荐铸造20个NFT的可升级为会长；团队中拥有20位会长可升级为基金会社长；邀请越多级别越高福利越多。": "一般会員はNFT鋳造の招待ごとにエアドロップを獲得；20個のNFTを鋳造することでリーダーに昇格；チーム内に20人のリーダーがいるとファンドリーダーに昇格；招待が多いほどレベルが上がり、特典が増える。",
+  "数据披露": "データ開示",
+  "资金池": "資金プール",
+  "社长席位": "リーダー席",
+  "基金会社长席位": "ファンドリーダー席",
+  "待领取": "未受領",
+  "领取": "受領",
+  "钱包未链接，无法向您显示 NFT": "ウォレットが接続されていないため、NFTを表示できません",
+  "邀请列表": "招待リスト",
+  "NFT总量：": "NFT総量：",
+  "MINT余量：": "残りのMINT：",
+  "当前MINT价格：": "現在のMINT価格：",
+  "价格说明：": "価格説明：",
+  "{{value1}} USDT起，每增加 {{value2}} 名普通会员，NFT价格上涨 {{value3}}，既：前 {{value2}} 名价格为 {{value1}} USDT/枚，value4 名价格为{{value1}}u+{{value1}}u*{{value3}}={{value5}} USDT/枚，以此类推。": "{{value1}} USDTから、{{value2}}人の会員が増えるごとにNFT価格が{{value3}}上昇：最初の{{value2}}人は{{value1}}USDT/個、{{value4}}人は{{value1}}u+{{value1}}u*{{value3}}={{value5}} USDT/個、以降も同様。",
+  "授权USDT": "USDTの承認",
+  "当前级别": "現在のレベル",
+  "普通活跃": "活躍メンバー",
+  "提升级别": "レベルアップ",
+  "社长": "リーダー",
+  "当前升级价格：": "現在のアップグレード価格：",
+  "升级费用xxx USDT起，50%进入资金池，另外50%平均分给所有升级成功的社长和基金会社长。自第二个社长升级开始，每升级一名社长所需铸造费用增加xxx，既第二位社长升级铸造费用为xxxu+xxx*xxx=xxx USDT，以此类推。": "アップグレード費用は{{value1}} USDTから、残りの50%は資金プールに入り、もう50%はアップグレードに成功したリーダーとファンドリーダーに分配。2人目のリーダーからは、アップグレード費用が{{value2}}ずつ増加、つまり2人目は{{value1}}u+{{value1}}*{{value2}}={{value3}} USDT、以降も同様。",
+  "升级条件": "アップグレード条件",
+  "普通会员": "一般会員",
+  "(限量xxx个)": "(限定 {{value}} 個)",
+  "1. MINT一枚NFT成为非活跃普通会员": "1. NFTを1枚鋳造して非活躍メンバーになる",
+  "2. MINT NFT并推荐MINT成为活跃普通会员": "2. NFTを鋳造し、他者に鋳造を推奨して活躍メンバーになる",
+  "3. 享1%代币空投平分(所有普通会员)": "3. 一般会員は1%のトークンエアドロップを均等に分配",
+  "4. 活跃普通会员根据推荐MINT数量额外有空投权益。": "4. 活躍メンバーは推奨MINT数に応じて追加エアドロップ権を持つ。",
+  "(限量500个)": "(限定500個)",
+  "1. 先成为活跃普通会员，并推荐MINT 20枚NFT": "1. まず活躍メンバーになり、20枚のNFTを推奨して鋳造",
+  "2. 需支付100USDT起升级费用成为社长(第二个起递增10%)": "2. 100USDTからアップグレード費用を支払いリーダーになる（2人目以降は10%増加）",
+  "3. 享普通会员权益+0.5%空投代币平分(所有社长)": "3. 一般会員の権利に加え、リーダーは0.5%のトークンエアドロップを均等に分配",
+  "4. 享社长升级费用50%平分(扣除2USDT GAS费后)": "4. リーダーのアップグレード費用の50%を分配（2USDTのガス代を除く）",
+  "5. 从推荐MINT 21枚开始直推的铸造费用归社长所有": "5. 推奨MINTが21枚以上になると、鋳造費用はリーダーのものとなる",
+  "基金会社长": "ファンドリーダー",
+  "(限量20个)": "(限定20個)",
+  "1. 先成为社长，并团队中有20个社长": "1. まずリーダーになり、チームに20人のリーダーがいる",
+  "2. 享社长权益+0.5%空投代币平分(所有基金会社长)": "2. リーダーの権利に加え、ファンドリーダーは0.5%のトークンエアドロップを均等に分配",
+  "3. 另外基金会社长参与所有项目分成": "3. さらにファンドリーダーはすべてのプロジェクトの利益分配に参加",
+  "发放记录": "配布記録",
+  "升级费平分": "アップグレード費用分配",
+  "直推>20NFT": "ダイレクト推薦>20NFT",
+  "空投记录": "エアドロップ記録",
+  "所有": "すべて",
+  "NFT空投": "NFTエアドロップ",
+  "社长空投": "リーダーエアドロップ",
+  "直推空投": "ダイレクト推薦エアドロップ",
+  "奖励类型": "報酬タイプ",
+  "NFT控投": "NFT保有",
+  "发放时间": "配布時間",
+  "发放数量": "配布数量",
+  "领取记录": "受領記録",
+  "领取时间": "受領時間",
+  "领取数量": "受領数量",
+  "领取状态": "受領状態",
+  "确认中": "確認中",
+  "领取成功": "受領成功",
+  "交易取消": "取引キャンセル",
+  "地址": "アドレス",
+  "级别": "レベル",
+  "直推NFT": "ダイレクト推薦NFT",
+  "非活跃普通": "非活躍一般",
+  "活跃普通": "活躍一般",
+
+  "复制成功": "コピーが成功しました",
+  "领取成功，前往钱包查看": "受け取りが成功しました。ウォレットで確認してください。",
+  "链接钱包中...": "ウォレットをリンク中...",
+  "无": "無",
+  "服务器错误": "サーバーエラー",
+  "余额不足": "ざんだかふそく",
+  "MINT成功，返回首页查看": "MINTが成功しました。ホームページに戻って確認してください",
+  "正在授权USDT": "USDTの認証中",
+  "购买中": "購入中 (こうにゅうちゅう)",
+  "领取中": "しょりちゅう",
+  "MINT Nft 获取邀请链接": "MINT Nft 招待リンクを取得する",
+  "链接钱包获取邀请链接": "ウォレットをリンクして招待リンクを取得します。",
+  "正在获取已授权金额": "承認済み金額を取得中です",
+  "升级成功，返回首页查看": "アップグレードが成功しました。ホームページに戻って確認してください。",
+  "无级别提升": "階級なしの昇進",
+  "没有更多数据了": "これ以上のデータはありません",
+  "升级中": "アップグレード中",
+  "无等级": "グレードなし",
+  "无效的邀请链接": "無効な招待リンクです",
+  "交易红魔股权NFT": "レッドデビル株式NFTを取引する",
+
+  "上级链接": "上司のリンク",
+  "邀请链接：": "招待リンク：",
+  "上级地址：": "上司の住所："
+}

src/i18n/translation/tw.json

@@ -0,0 +1,113 @@
+{
+  "AppName": "紅魔",
+  "红魔股权NFT": "紅魔鬼股權NFT",
+  "铸造 NFT": "鑄造 NFT",
+  "级别提升": "級別提升",
+  "收益记录": "收益記錄",
+  "RMOB记录": "RMOB記錄",
+  "直推列表": "直推列表",
+  "返回": "返回",
+  "选择语言": "選擇語言",
+  "确定": "確定",
+  "取消": "取消",
+  "普通非活跃": "普通非活躍",
+  "升级": "升級",
+  "链接钱包": "鏈接錢包",
+  "邀请铸造": "邀請鑄造",
+  "团队社长": "團隊社長",
+  "邀请空投": "邀請空投",
+  "收益": "收益",
+  "Min结束后按照规则进行空投。": "Min結束後按照規則進行空投。",
+  "铸造 NFT 获得代币空投": "鑄造 NFT 獲得代幣空投",
+  "总收益= 已领取 + 待领取": "總收益 = 已領取 + 待領取",
+  "邀请": "邀請",
+  "邀请链接": "邀請鏈接",
+  "普通会员每邀请铸造一个NFT可获得一份空投福利；推荐铸造20个NFT的可升级为会长；团队中拥有20位会长可升级为基金会社长；邀请越多级别越高福利越多。": "普通會員每邀請鑄造一個NFT可獲得一份空投福利；推薦鑄造20個NFT的可升級為會長；團隊中擁有20位會長可升級為基金會社長；邀請越多級別越高福利越多。",
+  "数据披露": "數據披露",
+  "资金池": "資金池",
+  "社长席位": "社長席位",
+  "基金会社长席位": "基金會社長席位",
+  "待领取": "待領取",
+  "领取": "領取",
+  "钱包未链接，无法向您显示 NFT": "錢包未鏈接，無法向您顯示 NFT",
+  "邀请列表": "邀請列表",
+  "NFT总量：": "NFT總量：",
+  "MINT余量：": "MINT餘量：",
+  "当前MINT价格：": "當前MINT價格：",
+  "价格说明：": "價格說明：",
+  "{{value1}} USDT起，每增加 {{value2}} 名普通会员，NFT价格上涨 {{value3}}，既：前 {{value2}} 名价格为 {{value1}} USDT/枚，value4 名价格为{{value1}}u+{{value1}}u*{{value3}}={{value5}} USDT/枚，以此类推。": "{{value1}} USDT起，每增加{{value2}}名普通會員，NFT價格上漲{{value3}}，即：前{{value2}}名價格為{{value1}} USDT/枚，{{value4}}名價格為{{value1}}u+{{value1}}u*{{value3}}={{value5}} USDT/枚，以此類推。",
+  "授权USDT": "授權USDT",
+  "当前级别": "當前級別",
+  "普通活跃": "普通活躍",
+  "提升级别": "提升級別",
+  "社长": "社長",
+  "当前升级价格：": "當前升級價格：",
+  "升级费用xxx USDT起，50%进入资金池，另外50%平均分给所有升级成功的社长和基金会社长。自第二个社长升级开始，每升级一名社长所需铸造费用增加xxx，既第二位社长升级铸造费用为xxxu+xxx*xxx=xxx USDT，以此类推。": "升級費用{{value1}} USDT起，50%進入資金池，另外50%平均分給所有升級成功的社長和基金會社長。自第二個社長升級開始，每升級一名社長所需鑄造費用增加{{value2}}，即第二位社長升級鑄造費用為{{value1}}u+{{value1}}*{{value2}}={{value3}} USDT，以此類推。",
+  "升级条件": "升級條件",
+  "普通会员": "普通會員",
+  "(限量xxx个)": "(限量 {{value}} 個)",
+  "1. MINT一枚NFT成为非活跃普通会员": "1. MINT一枚NFT成為非活躍普通會員",
+  "2. MINT NFT并推荐MINT成为活跃普通会员": "2. MINT NFT並推薦MINT成為活躍普通會員",
+  "3. 享1%代币空投平分(所有普通会员)": "3. 享1%代幣空投平分(所有普通會員)",
+  "4. 活跃普通会员根据推荐MINT数量额外有空投权益。": "4. 活躍普通會員根據推薦MINT數量額外有空投權益。",
+  "(限量500个)": "(限量500個)",
+  "1. 先成为活跃普通会员，并推荐MINT 20枚NFT": "1. 先成為活躍普通會員，並推薦MINT 20枚NFT",
+  "2. 需支付100USDT起升级费用成为社长(第二个起递增10%)": "2. 需支付100USDT起升級費用成為社長(第二個起遞增10%)",
+  "3. 享普通会员权益+0.5%空投代币平分(所有社长)": "3. 享普通會員權益+0.5%空投代幣平分(所有社長)",
+  "4. 享社长升级费用50%平分(扣除2USDT GAS费后)": "4. 享社長升級費用50%平分(扣除2USDT GAS費後)",
+  "5. 从推荐MINT 21枚开始直推的铸造费用归社长所有": "5. 從推薦MINT 21枚開始直推的鑄造費用歸社長所有",
+  "基金会社长": "基金會社長",
+  "(限量20个)": "(限量20個)",
+  "1. 先成为社长，并团队中有20个社长": "1. 先成為社長，並團隊中有20個社長",
+  "2. 享社长权益+0.5%空投代币平分(所有基金会社长)": "2. 享社長權益+0.5%空投代幣平分(所有基金會社長)",
+  "3. 另外基金会社长参与所有项目分成": "3. 另外基金會社長參與所有項目分成",
+  "发放记录": "發放記錄",
+  "升级费平分": "升級費平分",
+  "直推>20NFT": "直推>20NFT",
+  "空投记录": "空投記錄",
+  "所有": "所有",
+  "NFT空投": "NFT空投",
+  "社长空投": "社長空投",
+  "直推空投": "直推空投",
+  "奖励类型": "獎勵類型",
+  "NFT控投": "NFT控投",
+  "发放时间": "發放時間",
+  "发放数量": "發放數量",
+  "领取记录": "領取記錄",
+  "领取时间": "領取時間",
+  "领取数量": "領取數量",
+  "领取状态": "領取狀態",
+  "确认中": "確認中",
+  "领取成功": "領取成功",
+  "交易取消": "交易取消",
+  "地址": "地址",
+  "级别": "級別",
+  "直推NFT": "直推NFT",
+  "非活跃普通": "非活躍普通",
+  "活跃普通": "活躍普通",
+
+  "复制成功": "複製成功",
+  "领取成功，前往钱包查看": "領取成功，前往錢包查看",
+  "链接钱包中...": "連結錢包中...",
+  "无": "無",
+  "服务器错误": "伺服器錯誤",
+  "余额不足": "餘額不足",
+  "MINT成功，返回首页查看": "MINT成功，返回首頁查看",
+  "正在授权USDT": "正在授權USDT",
+  "购买中": "購買中",
+  "领取中": "處理中",
+  "MINT Nft 获取邀请链接": "MINT Nft 獲取邀請鏈接",
+  "链接钱包获取邀请链接": "連結錢包以獲取邀請鏈接。",
+  "正在获取已授权金额": "正在取得已授權金額",
+  "升级成功，返回首页查看": "升級成功，返回首頁查看。",
+  "无级别提升": "無級別提升",
+  "没有更多数据了": "沒有更多數據了",
+  "升级中": "升級中",
+  "无等级": "無等級",
+  "无效的邀请链接": "無效的邀請連結",
+  "交易红魔股权NFT": "交易紅魔股權NFT",
+
+  "上级链接": "上級鏈接",
+  "邀请链接：": "邀請鏈接：",
+  "上级地址：": "上級地址："
+}

src/main.tsx

@@ -1,20 +1,25 @@
 /*
  * @LastEditors: John
  * @Date: 2024-06-17 17:20:03
- * @LastEditTime: 2024-06-18 10:46:11
+ * @LastEditTime: 2024-07-02 11:38:25
  * @Author: John
  */
 import "@/i18n/init.ts";
 import "antd-mobile/es/global";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
-import "normalize.css";
+// import "normalize.css";
 import "./index.css";
 import { HashRouter } from "react-router-dom";
 import EventBusProvider from "./context/EventBusContext.tsx";
 import { WalletProvider } from "./components/WalletProvider.tsx";
 import flexible from "./utils/flexible.ts";
+import VConsole from "vconsole";
+import { getUrlParameterByName } from "./utils/index.ts";
 
+if (getUrlParameterByName("vconsole") === "1") {
+  new VConsole();
+}
 flexible(window, document);
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <>

src/pages/AirDropRecord.module.css

@@ -0,0 +1,9 @@
+.AirDropRecord {
+  .recordsList {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 15px;
+    margin-top: 20px;
+  }
+}

src/pages/AirDropRecord.tsx

@@ -0,0 +1,97 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-19 10:43:03
+ * @LastEditTime: 2024-06-19 14:25:41
+ * @Author: John
+ */
+import RecordsItem from "@/components/RecordsItem";
+import CapsuleTabs from "antd-mobile/es/components/capsule-tabs";
+import Tabs from "antd-mobile/es/components/tabs";
+import classes from "./AirDropRecord.module.css";
+import { useTranslation } from "react-i18next";
+export default function () {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Tabs className={classes.AirDropRecord}>
+        <Tabs.Tab title={t("空投记录")} key="1">
+          <CapsuleTabs>
+            <CapsuleTabs.Tab title={t("所有")} key="1" />
+            <CapsuleTabs.Tab title={t("NFT空投")} key="2" />
+            <CapsuleTabs.Tab title={t("社长空投")} key="3" />
+            <CapsuleTabs.Tab title={t("基金会社长")} key="4" />
+            <CapsuleTabs.Tab title={t("直推空投")} key="5" />
+          </CapsuleTabs>
+          <ul className={classes.recordsList}>
+            {Array.from({ length: 20 }).map((v, i) => (
+              <li key={i}>
+                <RecordsItem
+                  itemList={[
+                    {
+                      title: t("奖励类型"),
+                      value: t("NFT控投"),
+                    },
+                    { title: t("发放时间"), value: "2024-06-01 12:23:45" },
+                    { title: t("发放数量"), value: "2.00 RMOB" },
+                  ]}
+                />
+              </li>
+            ))}
+          </ul>
+        </Tabs.Tab>
+        <Tabs.Tab title={t("领取记录")} key="2">
+          <ul className={classes.recordsList}>
+            <li>
+              <RecordsItem
+                itemList={[
+                  {
+                    title: t("领取时间"),
+                    value: "2024-06-01 12:23:45",
+                  },
+                  { title: t("领取数量"), value: "2.00 RMOB" },
+                  {
+                    title: t("领取状态"),
+                    value: t("确认中"),
+                    valueColor: "#FC872B",
+                  },
+                ]}
+              />
+            </li>
+            <li>
+              <RecordsItem
+                itemList={[
+                  {
+                    title: t("领取时间"),
+                    value: "2024-06-01 12:23:45",
+                  },
+                  { title: t("领取数量"), value: "2.00 USDT" },
+                  {
+                    title: t("领取状态"),
+                    value: t("领取成功"),
+                    valueColor: "#38C979",
+                  },
+                ]}
+              />
+            </li>
+            <li>
+              <RecordsItem
+                itemList={[
+                  {
+                    title: t("领取时间"),
+                    value: "2024-06-01 12:23:45",
+                  },
+                  { title: t("领取数量"), value: "2.00 USDT" },
+                  {
+                    title: t("领取状态"),
+                    value: t("交易取消"),
+                    valueColor: "#C94738",
+                  },
+                ]}
+              />
+            </li>
+          </ul>
+        </Tabs.Tab>
+      </Tabs>
+    </>
+  );
+}

src/pages/AssetRecord.module.css

@@ -0,0 +1,9 @@
+.AssetRecord {
+  .recordsList {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 15px;
+    margin-top: 20px;
+  }
+}

src/pages/AssetRecord.tsx

@@ -0,0 +1,211 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-18 17:57:13
+ * @LastEditTime: 2024-07-02 17:43:52
+ * @Author: John
+ */
+import Tabs from "antd-mobile/es/components/tabs";
+import classes from "./AssetRecord.module.css";
+import { cn, getUrlParameterByName } from "@/utils";
+import CapsuleTabs from "antd-mobile/es/components/capsule-tabs";
+import RecordsItem from "@/components/RecordsItem";
+import { useTranslation } from "react-i18next";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { api_pagling_query_income_record } from "@/server/api";
+import { IncomeRecord, IncomeRecordType } from "@/server/module";
+import { Empty, InfiniteScroll } from "antd-mobile";
+
+export default function () {
+  const { t } = useTranslation();
+  const id = useMemo(() => getUrlParameterByName("id"), []);
+  const coinId = useMemo(() => getUrlParameterByName("coinId"), []);
+  const currentType = useRef<1 | 2>(2);
+  const [issueRecords, setIssueRecords] = useState<IncomeRecord["records"]>([]);
+  const [receiveRecord, setReceiveRecord] = useState<IncomeRecord["records"]>(
+    []
+  );
+  const conditions = useRef<IncomeRecordType>();
+
+  const pageNum = useRef<number>(0);
+  const hasMore = useRef<boolean>(true);
+  useEffect(() => {
+    return () => {};
+  }, []);
+
+  async function getRecord() {
+    return new Promise<void>(async (reslove) => {
+      if (!id) return;
+
+      if (!hasMore.current) return;
+
+      const pageSize = 20;
+      pageNum.current++;
+      const { data } = await api_pagling_query_income_record().send({
+        queryParams: {
+          id,
+          type: currentType.current,
+          pageNum: pageNum.current,
+          pageSize,
+          ...(conditions.current && currentType.current == 2
+            ? { status: conditions.current }
+            : {}),
+        },
+      });
+
+      if (!data?.data.records) return;
+
+      if (data.data.records.length < pageSize) hasMore.current = false;
+
+      if (currentType.current == 2) {
+        setIssueRecords([...issueRecords, ...data?.data.records]);
+      } else {
+        setReceiveRecord([...receiveRecord, ...data?.data.records]);
+      }
+      reslove();
+    });
+  }
+
+  function resetPaging() {
+    if (currentType.current == 2) {
+      setIssueRecords([]);
+    } else if (currentType.current == 1) {
+      setReceiveRecord([]);
+    }
+    pageNum.current = 0;
+    hasMore.current = true;
+  }
+
+  return (
+    <>
+      <Tabs
+        className={cn(classes.AssetRecord)}
+        onChange={(key) => {
+          if (parseInt(key) == 1) {
+            currentType.current = 2;
+            resetPaging();
+          } else {
+            currentType.current = 1;
+            resetPaging();
+          }
+        }}
+      >
+        <Tabs.Tab className={classes.tab} title={t("发放记录")} key="1">
+          {coinId == "1" && (
+            <CapsuleTabs
+              onChange={(key) => {
+                switch (key) {
+                  case "1":
+                    conditions.current = undefined;
+                    break;
+                  case "2":
+                    conditions.current = 5;
+                    break;
+                  case "3":
+                    conditions.current = 4;
+                    break;
+
+                  default:
+                    break;
+                }
+                resetPaging();
+              }}
+            >
+              <CapsuleTabs.Tab title={t("所有")} key="1" />
+              <CapsuleTabs.Tab title={t("升级费平分")} key="2" />
+              <CapsuleTabs.Tab title={t("直推>20NFT")} key="3" />
+            </CapsuleTabs>
+          )}
+
+          {coinId == "2" && (
+            <CapsuleTabs
+              onChange={(key) => {
+                switch (key) {
+                  case "1":
+                    conditions.current = undefined;
+                    break;
+                  case "2":
+                    conditions.current = 6;
+                    break;
+                  case "3":
+                    conditions.current = 7;
+                    break;
+                  case "4":
+                    conditions.current = 8;
+                    break;
+                  case "5":
+                    conditions.current = 9;
+                    break;
+                  default:
+                    break;
+                }
+                resetPaging();
+              }}
+            >
+              <CapsuleTabs.Tab title={t("所有")} key="1" />
+              <CapsuleTabs.Tab title={t("NFT空投")} key="2" />
+              <CapsuleTabs.Tab title={t("社长空投")} key="3" />
+              <CapsuleTabs.Tab title={t("基金会社长")} key="4" />
+              <CapsuleTabs.Tab title={t("直推空投")} key="5" />
+            </CapsuleTabs>
+          )}
+          <ul className={classes.recordsList}>
+            {issueRecords?.map((v, i) => (
+              <li key={i}>
+                <RecordsItem
+                  itemList={[
+                    {
+                      title: t("奖励类型"),
+                      value: v.extRemark,
+                    },
+                    { title: t("发放时间"), value: v.createTime },
+                    { title: t("发放数量"), value: `${v.opValue} USDT` },
+                  ]}
+                />
+              </li>
+            ))}
+            {issueRecords?.length == 0 && <Empty />}
+            <InfiniteScroll loadMore={getRecord} hasMore={hasMore.current}>
+              <span>{t("没有更多数据了")}</span>
+            </InfiniteScroll>
+          </ul>
+        </Tabs.Tab>
+        <Tabs.Tab className={classes.tab} title={t("领取记录")} key="2">
+          <ul className={classes.recordsList}>
+            {receiveRecord?.map((v, i) => (
+              <li key={i}>
+                <RecordsItem
+                  itemList={[
+                    {
+                      title: t("领取时间"),
+                      value: v.createTime,
+                    },
+                    { title: t("领取数量"), value: `${v.opValue} USDT` },
+                    {
+                      title: t("领取状态"),
+                      ...(v.type == 1 && {
+                        value: t("领取成功"),
+                        valueColor: "#38C979",
+                      }),
+                      ...(v.type == 3 && {
+                        value: t("确认中"),
+                        valueColor: "#FC872B",
+                      }),
+                      ...(v.type == 4 && {
+                        value: t("交易取消"),
+                        valueColor: "#C94738",
+                      }),
+                    },
+                  ]}
+                />
+              </li>
+            ))}
+            {receiveRecord?.length == 0 && <Empty />}
+            <InfiniteScroll loadMore={getRecord} hasMore={hasMore.current}>
+              <span>{t("没有更多数据了")}</span>
+            </InfiniteScroll>
+          </ul>
+        </Tabs.Tab>
+      </Tabs>
+    </>
+  );
+}

src/pages/Home.module.css

@@ -1,10 +1,863 @@
+.container {
+  padding: 0 14px;
+}
+
 .Home {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  .text {
-    font-size: 20px;
+  padding-bottom: 69px;
+  box-sizing: border-box;
+
+  .userinfo {
+    width: 345px;
+    height: 136px;
+    border-radius: 16px;
+    opacity: 1;
+
+    background: #171719;
+
+    box-shadow: 0px 4px 10px 0px rgba(138, 29, 19, 0.3),
+      inset 0px 0px 8px 0px #8a1d13;
+
+    padding: 14px 15px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    margin-top: 21px;
+
+    .userinfo_top {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 16px;
+      .userinfo_top_left {
+        width: 46px;
+        height: 46px;
+        border-radius: 10.12px;
+        opacity: 1;
+      }
+      .userinfo_top_right {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        .userinfo_top_right_wallet {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          span {
+            opacity: 1;
+
+            font-family: DM Sans;
+            font-size: 14px;
+            font-weight: bold;
+            line-height: normal;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            color: #ffffff;
+
+            z-index: 0;
+          }
+          .userinfo_top_right_wallet_disconnect {
+            width: 16px;
+            height: 16px;
+          }
+        }
+        .userinfo_top_right_btns {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          .userinfo_top_right_btns_item {
+            /* 自动布局子元素 */
+            border-radius: 6px;
+            opacity: 1;
+
+            /* 自动布局 */
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            padding: 4px 6px;
+            gap: 4px;
+
+            background: #67676b;
+
+            z-index: 0;
+
+            display: flex;
+            align-items: center;
+
+            span {
+              /* 自动布局子元素 */
+              opacity: 1;
+
+              font-family: DM Sans;
+              font-size: 10px;
+              font-weight: 500;
+              line-height: normal;
+              letter-spacing: 0em;
+
+              font-variation-settings: "opsz" auto;
+              font-feature-settings: "kern" on;
+              color: #ffffff;
+
+              z-index: 1;
+            }
+            .userinfo_top_right_btns_icon {
+              width: 12px;
+              height: 12px;
+            }
+          }
+        }
+      }
+      .userinfo_top_right_connect {
+        height: 36px;
+        border-radius: 10px;
+        opacity: 1;
+
+        background: #fc872b;
+
+        box-sizing: border-box;
+        border: 1px solid;
+
+        padding: 0 20px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        span {
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+        }
+      }
+    }
+
+    .userinfo_data {
+      display: flex;
+      flex-direction: row;
+      gap: 10.5px;
+      li {
+        width: 98px;
+        height: 48px;
+        border-radius: 16px;
+        opacity: 1;
+
+        background: #212123;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+
+        .userinfo_data_num {
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 14px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 0;
+        }
+        .userinfo_data_des {
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 10px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 1;
+        }
+      }
+    }
+  }
+
+  .nftToken {
+    margin-top: 24px;
+    .nftToken_tab {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      li {
+        min-width: 76px;
+        height: 34px;
+
+        opacity: 1;
+
+        font-family: DM Sans;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: normal;
+        letter-spacing: 0em;
+
+        font-variation-settings: "opsz" auto;
+        font-feature-settings: "kern" on;
+        color: #4d4d4d;
+        text-align: center;
+        line-height: 34px;
+        padding: 0 10px;
+        &.nftToken_tab_active {
+          border-radius: 10px;
+          opacity: 1;
+
+          background: #fc872b;
+
+          color: #ffffff;
+        }
+      }
+    }
+
+    .nftToken_content {
+      margin-top: 10px;
+
+      width: 345px;
+      /* min-height: 236px; */
+      border-radius: 16px;
+      opacity: 1;
+
+      background: #171719;
+      z-index: 1;
+      .nftToken_content_nft {
+        /* 自动布局 */
+        display: flex;
+        flex-direction: column;
+        padding: 14px 15px;
+        gap: 6px;
+
+        .nftToken_content_nft_top {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          > span {
+            &:nth-of-type(1) {
+              /* 自动布局子元素 */
+              opacity: 1;
+
+              font-family: DM Sans;
+              font-size: 14px;
+              font-weight: bold;
+              line-height: normal;
+              letter-spacing: 0em;
+
+              font-variation-settings: "opsz" auto;
+              font-feature-settings: "kern" on;
+              color: #ffffff;
+
+              z-index: 0;
+            }
+
+            &:nth-of-type(2) {
+              /* 自动布局子元素 */
+              opacity: 1;
+
+              font-family: DM Sans;
+              font-size: 10px;
+              font-weight: 500;
+              line-height: normal;
+              letter-spacing: 0em;
+
+              font-variation-settings: "opsz" auto;
+              font-feature-settings: "kern" on;
+              color: #f3be3c;
+
+              z-index: 0;
+
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              gap: 4px;
+            }
+          }
+        }
+
+        .nftToken_content_nft_img {
+          width: 315px;
+          height: 160px;
+          border-radius: 10px;
+          opacity: 1;
+          object-fit: cover;
+        }
+
+        .nftToken_content_nft_des {
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 2;
+        }
+      }
+
+      .nftToken_content_token {
+        display: flex;
+        flex-direction: column;
+        .nftToken_content_token_top {
+          padding: 14px 15px;
+          border-bottom: 1px solid #404040;
+          display: flex;
+          flex-direction: column;
+          span {
+            opacity: 1;
+
+            font-family: DM Sans;
+            font-size: 12px;
+            font-weight: 500;
+            line-height: normal;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            color: #ffffff;
+          }
+        }
+
+        .nftToken_content_token_list {
+          display: flex;
+          flex-direction: column;
+          gap: 18px;
+          padding: 19px 15px;
+          .nftToken_content_token_item {
+            display: flex;
+            flex-direction: row;
+            > img {
+              width: 30px;
+              height: 30px;
+              margin-right: 14px;
+            }
+            > div {
+              &:nth-of-type(1) {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                .nftToken_content_token_item_tokenName {
+                  /* 自动布局子元素 */
+                  opacity: 1;
+
+                  font-family: DM Sans;
+                  font-size: 16px;
+                  font-weight: bold;
+                  line-height: normal;
+                  letter-spacing: 0em;
+
+                  font-variation-settings: "opsz" auto;
+                  font-feature-settings: "kern" on;
+                  color: #ffffff;
+
+                  z-index: 0;
+                }
+
+                .nftToken_content_token_item_tokenNum {
+                  /* 自动布局子元素 */
+                  opacity: 1;
+
+                  font-family: DM Sans;
+                  font-size: 14px;
+                  font-weight: 500;
+                  line-height: normal;
+                  letter-spacing: 0em;
+
+                  font-variation-settings: "opsz" auto;
+                  font-feature-settings: "kern" on;
+                  color: #ffffff;
+
+                  z-index: 1;
+                }
+
+                .nftToken_content_token_item_AssetRecords {
+                  /* 自动布局子元素 */
+                  opacity: 1;
+
+                  font-family: DM Sans;
+                  font-size: 10px;
+                  font-weight: 500;
+                  line-height: normal;
+                  letter-spacing: 0em;
+
+                  font-variation-settings: "opsz" auto;
+                  font-feature-settings: "kern" on;
+                  color: #3680ff;
+
+                  z-index: 0;
+
+                  display: flex;
+                  align-items: center;
+                  gap: 4px;
+
+                  > svg {
+                    width: 12px;
+                    height: 12px;
+                  }
+                }
+              }
+
+              &:nth-of-type(2) {
+                margin-left: auto;
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                align-items: flex-end;
+                .nftToken_content_token_item_tokenWaiting {
+                  display: flex;
+                  align-items: center;
+                  gap: 8px;
+                  span {
+                    /* 自动布局子元素 */
+                    opacity: 1;
+
+                    font-family: DM Sans;
+                    font-size: 14px;
+                    font-weight: 500;
+                    line-height: normal;
+                    letter-spacing: 0em;
+
+                    font-variation-settings: "opsz" auto;
+                    font-feature-settings: "kern" on;
+                    color: #ffffff;
+
+                    z-index: 0;
+                  }
+                }
+
+                .nftToken_content_token_item_tokenReceive {
+                  /* 自动布局子元素 */
+                  width: 69px;
+                  height: 32px;
+                  border-radius: 6px;
+                  opacity: 1;
+
+                  /* 自动布局 */
+                  display: flex;
+                  flex-direction: row;
+                  align-items: center;
+                  justify-content: center;
+                  padding: 8px 12px;
+                  gap: 4px;
+
+                  background: #000000;
+
+                  z-index: 1;
+                  box-sizing: border-box;
+
+                  span {
+                    /* 自动布局子元素 */
+                    opacity: 1;
+
+                    font-family: DM Sans;
+                    font-size: 12px;
+                    font-weight: 500;
+                    line-height: normal;
+                    letter-spacing: 0em;
+
+                    font-variation-settings: "opsz" auto;
+                    font-feature-settings: "kern" on;
+                    color: #ffffff;
+
+                    z-index: 0;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .nftToken_content_nft_mint {
+        width: 100%;
+        height: 236px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
+        padding: 0 43px;
+        .nftToken_content_nft_mint_btn {
+          /* 自动布局子元素 */
+          width: 169px;
+          height: 38px;
+          border-radius: 10px;
+          opacity: 1;
+
+          /* 自动布局 */
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          padding: 10px 42px;
+          background: #fc872b;
+          z-index: 0;
+          gap: 10px;
+          box-sizing: border-box;
+          span {
+            /* 自动布局子元素 */
+            font-family: DM Sans;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: normal;
+            text-align: center;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            color: #ffffff;
+
+            z-index: 0;
+
+            white-space: nowrap;
+          }
+          .nftToken_content_nft_mint_btn_icon {
+            width: 24px;
+            height: 24px;
+          }
+        }
+
+        > span {
+          /* 自动布局子元素 */
+          font-family: DM Sans;
+          font-size: 18px;
+          font-weight: bold;
+          line-height: normal;
+          text-align: center;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 1;
+        }
+      }
+
+      .nftToken_content_userDisconnect {
+        width: 100%;
+        height: 236px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 43px;
+        box-sizing: border-box;
+        span {
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 18px;
+          font-weight: bold;
+          line-height: normal;
+          text-align: center;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  .equityNft {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    padding: 10px 15px;
+
+    border-radius: 14px;
+    opacity: 1;
+    background: #171719;
+    margin-top: 26px;
+
+    > svg {
+      width: 26px;
+      height: 26px;
+
+      &:nth-of-type(2) {
+        margin-left: auto;
+      }
+    }
+    span {
+      opacity: 1;
+
+      font-family: DM Sans;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0em;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      color: #ffffff;
+
+      z-index: 1;
+    }
+  }
+
+  .invite {
+    margin-top: 25px;
+    .invite_top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      span {
+        &:nth-of-type(1) {
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 14px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 0;
+        }
+
+        &:nth-of-type(2) {
+          /* 自动布局子元素 */
+
+          font-family: DM Sans;
+          font-size: 10px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #f3be3c;
+
+          z-index: 0;
+
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        }
+      }
+    }
+
+    .invite_content {
+      width: 345px;
+      border-radius: 16px;
+      opacity: 1;
+
+      background: #171719;
+
+      display: flex;
+      flex-direction: column;
+      gap: 9px;
+
+      padding: 14px 15px;
+      box-sizing: border-box;
+
+      margin-top: 10px;
+      > span {
+        &:nth-of-type(1),
+        &:nth-of-type(3) {
+          /* 自动布局子元素 */
+          opacity: 0.8;
+
+          font-family: DM Sans;
+          font-size: 10px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 0;
+        }
+        &:nth-of-type(3) {
+          margin-top: 20px;
+        }
+
+        &:nth-of-type(2) {
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #eaeaea;
+
+          z-index: 1;
+        }
+      }
+      .invite_content_link {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        > span {
+          width: 265px;
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 0;
+
+          display: flex;
+          align-items: center;
+          gap: 16px;
+
+          white-space: nowrap;
+        }
+      }
+      .superior_content_link {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        > span {
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 0;
+
+          display: flex;
+          align-items: center;
+          gap: 16px;
+
+          white-space: nowrap;
+        }
+
+        .invite_content_icon {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+
+  .dataDisclosure {
+    margin-top: 24px;
+    > span {
+      /* 自动布局子元素 */
+      font-family: DM Sans;
+      font-size: 14px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0em;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      color: #ffffff;
+
+      z-index: 0;
+    }
+
+    .dataDisclosure_content {
+      width: 345px;
+      height: 103px;
+      border-radius: 16px;
+      opacity: 1;
+      padding: 14px 15px;
+      box-sizing: border-box;
+
+      background: #171719;
+
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      .dataDisclosure_content_item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        span {
+          &:nth-of-type(1) {
+            /* 自动布局子元素 */
+            opacity: 1;
+
+            font-family: DM Sans;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: normal;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            color: #ffffff;
+
+            z-index: 0;
+          }
+
+          &:nth-of-type(2) {
+            /* 自动布局子元素 */
+            opacity: 1;
+
+            font-family: DM Sans;
+            font-size: 16px;
+            font-weight: bold;
+            line-height: normal;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            color: #ffffff;
+
+            z-index: 1;
+          }
+        }
+      }
+    }
   }
 }

src/pages/Home.tsx

@@ -1,19 +1,97 @@
 import classes from "./Home.module.css";
 import useUserStore from "@/store/User";
-import { copyText } from "@/utils";
+import { cn, copyText, padWithZero, shortenString } from "@/utils";
 import { useWeb3Modal } from "@web3modal/wagmi/react";
-import Button from "antd-mobile/es/components/button";
-import { useEffect } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import logo from "@/assets/logo.svg";
+import nftBg from "@/assets/nft_bg.svg";
+import usdtBg from "@/assets/usdt_bg.svg";
+import RMOB_logo from "@/assets/RMOB_logo.svg";
+import IconFont from "@/components/iconfont";
+import { BaseError, useAccount } from "wagmi";
+import { useNavigate } from "react-router-dom";
+import { Button, Dialog, Empty, PullToRefresh, Toast } from "antd-mobile";
+import { loginOut } from "@/utils/wallet";
+import {
+  api_claim_income,
+  api_get_homepage_user_data,
+  api_get_user_superiors,
+} from "@/server/api";
+import { UserHomeData, UserIncome } from "@/server/module";
+import { UrlQueryParamsKey } from "@/constants";
+import { receiveByContract } from "@/contract/utils";
+import usePollingCheckBuyStatus from "@/hook/usePollingCheckBuyStatus";
+import { ToastHandler } from "antd-mobile/es/components/toast";
+import { PullStatus } from "antd-mobile/es/components/pull-to-refresh";
 export default function () {
   const { Token, UpdateToken } = useUserStore();
   const { open } = useWeb3Modal();
   const { t } = useTranslation();
+  const { address } = useAccount();
+
+  const [tabIndex, setTabIndex] = useState(0);
+  const navigate = useNavigate();
+  const [userData, setUserData] = useState<UserHomeData>();
+
+  const [superiorsAddress, setSuperiorsAddress] = useState<string>();
+  const [superiorsShareCode, setSuperiorsShareCode] = useState<string>();
+
+  const statusRecord: Record<PullStatus, string> = {
+    pulling: "Pull down to refresh",
+    canRelease: "Release to refresh immediately",
+    refreshing: "Loading...",
+    complete: "Refresh complete",
+  };
+  const userInviteLink = useMemo(
+    () =>
+      `${location.origin}/#/?${UrlQueryParamsKey.INVITE_CODE}=${
+        userData?.invitationCode || ""
+      }`,
+    [userData]
+  );
+  const superiorInvitationLink = useMemo(
+    () =>
+      `${location.origin}/#/?${UrlQueryParamsKey.INVITE_CODE}=${superiorsShareCode}`,
+    [superiorsShareCode]
+  );
+  const receiveLoadingToast = useRef<ToastHandler>();
+  const {
+    transcationStatus,
+    startPollingCheckBuyStatus,
+    stopPollingCheckBuyStatus,
+  } = usePollingCheckBuyStatus("NORMAL");
+
   useEffect(() => {
-    UpdateToken("user token abc");
+    getHomeData();
+    if (Token) {
+      api_get_user_superiors()
+        .send({})
+        .then((res) => {
+          setSuperiorsAddress(res.data?.data.address);
+          setSuperiorsShareCode(res.data?.data.shareCode);
+        });
+    }
+    return () => {};
+  }, [Token]);
+
+  useEffect(() => {
+    if (transcationStatus == "success") {
+      receiveLoadingToast.current?.close();
+      stopPollingCheckBuyStatus();
+      Dialog.alert({
+        content: `${t("领取成功，前往钱包查看")}`,
+        confirmText: "OK",
+      });
+    }
 
     return () => {};
-  }, []);
+  }, [transcationStatus]);
+
+  async function getHomeData() {
+    const { data } = await api_get_homepage_user_data().send({});
+    setUserData(data?.data);
+  }
 
   useEffect(() => {
     console.log("user token:", Token);
@@ -23,24 +101,452 @@ export default function () {
 
   return (
     <>
-      <div className={classes.Home}>
-        <span className={classes.text}>{t("AppName")}</span>
-        <Button
-          onClick={() => {
-            open();
-          }}
-        >
-          Connect Wallet
-        </Button>
+      <PullToRefresh
+        onRefresh={async () => {
+          await getHomeData();
+        }}
+        renderText={(status) => {
+          return <div>{statusRecord[status]}</div>;
+        }}
+        disabled={!Token}
+      >
+        <div className={cn(classes.Home, classes.container)}>
+          <div className={classes.userinfo}>
+            <div className={classes.userinfo_top}>
+              <img
+                className={classes.userinfo_top_left}
+                src={userData?.userImg || logo}
+                alt=""
+              />
 
-        <Button
-          onClick={() => {
-            copyText("123");
-          }}
-        >
-          copy text
-        </Button>
-      </div>
+              {address ? (
+                <div className={classes.userinfo_top_right}>
+                  <div className={classes.userinfo_top_right_wallet}>
+                    <span>{shortenString(address, 6, 4)}</span>
+                    <IconFont
+                      onClick={async () => {
+                        loginOut();
+                      }}
+                      name="tuichu"
+                      className={classes.userinfo_top_right_wallet_disconnect}
+                      color={"#fff"}
+                    />
+                  </div>
+                  <div className={classes.userinfo_top_right_btns}>
+                    {userData && (
+                      <>
+                        <div className={classes.userinfo_top_right_btns_item}>
+                          {userData.level == 0 && (
+                            <>
+                              <IconFont
+                                name="tongdun"
+                                className={classes.userinfo_top_right_btns_icon}
+                              />
+                              <span>{t("无等级")}</span>
+                            </>
+                          )}
+                          {userData.level == 1 && (
+                            <>
+                              <IconFont
+                                name="jindun"
+                                className={classes.userinfo_top_right_btns_icon}
+                              />
+                              {userData.active === 0 && (
+                                <span>{t("普通非活跃")}</span>
+                              )}
+                              {userData.active === 1 && (
+                                <span>{t("普通活跃")}</span>
+                              )}
+                            </>
+                          )}
+                          {userData.level == 2 && (
+                            <>
+                              <IconFont
+                                name="xingdun"
+                                className={classes.userinfo_top_right_btns_icon}
+                              />
+                              <span>{t("社长")}</span>
+                            </>
+                          )}
+                          {userData.level == 3 && (
+                            <>
+                              <IconFont
+                                name="guanjun"
+                                className={classes.userinfo_top_right_btns_icon}
+                              />
+                              <span>{t("基金会社长")}</span>
+                            </>
+                          )}
+                        </div>
+
+                        <div
+                          className={classes.userinfo_top_right_btns_item}
+                          onClick={() => {
+                            navigate("/levelup");
+                          }}
+                        >
+                          <span>{t("升级")}</span>
+                          <IconFont
+                            name="chevronsrightshuangyoujiantou"
+                            className={classes.userinfo_top_right_btns_icon}
+                            color={"#fff"}
+                          />
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <>
+                  <div
+                    className={classes.userinfo_top_right_connect}
+                    onClick={() => {
+                      open();
+                    }}
+                  >
+                    <span>{t("链接钱包")}</span>
+                  </div>
+                </>
+              )}
+            </div>
+            <ul className={classes.userinfo_data}>
+              <li>
+                <span className={classes.userinfo_data_num}>
+                  {userData?.mintNumber || 0}
+                </span>
+                <span className={classes.userinfo_data_des}>
+                  {t("邀请铸造")}
+                </span>
+              </li>
+              <li>
+                <span className={classes.userinfo_data_num}>
+                  {userData?.presidentNumber || 0}
+                </span>
+                <span className={classes.userinfo_data_des}>
+                  {t("团队社长")}
+                </span>
+              </li>
+              <li>
+                <span className={classes.userinfo_data_num}>
+                  {userData?.airdropNumber || 0}
+                </span>
+                <span className={classes.userinfo_data_des}>
+                  {t("邀请空投")}
+                </span>
+              </li>
+            </ul>
+          </div>
+
+          <div className={classes.nftToken}>
+            <ul className={classes.nftToken_tab}>
+              <li
+                className={tabIndex == 0 ? classes.nftToken_tab_active : ""}
+                onClick={() => setTabIndex(0)}
+              >
+                NFT
+              </li>
+              <li
+                className={tabIndex == 1 ? classes.nftToken_tab_active : ""}
+                onClick={() => setTabIndex(1)}
+              >
+                {t("收益")}
+              </li>
+            </ul>
+
+            <div className={classes.nftToken_content}>
+              {tabIndex == 0 && (
+                <>
+                  {address ? (
+                    <>
+                      {userData?.nftId ? (
+                        <div className={classes.nftToken_content_nft}>
+                          <div className={classes.nftToken_content_nft_top}>
+                            <span># {padWithZero(userData?.nftId)}</span>
+                            <span
+                              onClick={() => {
+                                navigate("/mint");
+                              }}
+                            >
+                              {t("铸造 NFT")}
+                              <IconFont
+                                name="chevronsrightshuangyoujiantou"
+                                color={"#F3BE3C"}
+                              />
+                            </span>
+                          </div>
+                          <img
+                            className={classes.nftToken_content_nft_img}
+                            src={nftBg}
+                            alt=""
+                          />
+                          <span className={classes.nftToken_content_nft_des}>
+                            {t("Min结束后按照规则进行空投。")}
+                          </span>
+                        </div>
+                      ) : (
+                        <div className={classes.nftToken_content_nft_mint}>
+                          <div
+                            className={classes.nftToken_content_nft_mint_btn}
+                            onClick={() => {
+                              navigate("/mint");
+                            }}
+                          >
+                            <span>{t("铸造 NFT")}</span>
+                            <IconFont
+                              className={
+                                classes.nftToken_content_nft_mint_btn_icon
+                              }
+                              name="chevronsrightshuangyoujiantou"
+                              color={"#fff"}
+                            />
+                          </div>
+                          <span>{t("铸造 NFT 获得代币空投")}</span>
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <>
+                      <div className={classes.nftToken_content_userDisconnect}>
+                        <span>{t("钱包未链接，无法向您显示 NFT")}</span>
+                      </div>
+                    </>
+                  )}
+                </>
+              )}
+              {tabIndex == 1 && (
+                <div className={classes.nftToken_content_token}>
+                  <div className={classes.nftToken_content_token_top}>
+                    <span>{t("总收益= 已领取 + 待领取")}</span>
+                  </div>
+
+                  <ul className={classes.nftToken_content_token_list}>
+                    {userData?.userIncomes.map((v, i) => (
+                      <ReceiveCom
+                        key={i}
+                        coinId={v.coinId}
+                        tokenName={v.coinName}
+                        tokenNum={v.receive}
+                        toReceive={v.collection}
+                        onAssetRec={() => {
+                          navigate(
+                            `/assetrecord?id=${v.id}&coinId=${v.coinId}`
+                          );
+                        }}
+                        onReceive={async () => {
+                          receiveLoadingToast.current = Toast.show({
+                            icon: "loading",
+                            duration: 0,
+                            content: t("领取中"),
+                            maskClickable: false,
+                          });
+                          const { data } = await api_claim_income().send({
+                            queryParams: { id: v.id },
+                          });
+                          const orderInfo = data?.data;
+                          if (!orderInfo?.orderNumber) return;
+                          const buyAmount = BigInt(
+                            orderInfo?.claimQuantity || ""
+                          );
+
+                          receiveByContract(
+                            v.coinId,
+                            buyAmount,
+                            orderInfo.time,
+                            orderInfo?.orderNumber,
+                            orderInfo.hash
+                          )
+                            .then((hash) => {
+                              if (!hash) return;
+                              console.log("领取成功！hash:", hash);
+                              getHomeData();
+                              startPollingCheckBuyStatus(hash);
+                            })
+                            .catch(async (err: BaseError) => {
+                              receiveLoadingToast.current?.close();
+                              Toast.show({
+                                content: err.shortMessage,
+                                icon: "fail",
+                              });
+                            });
+                        }}
+                      />
+                    ))}
+
+                    {(userData?.userIncomes.length == 0 ||
+                      !userData?.userIncomes) && <Empty />}
+                  </ul>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div
+            className={classes.equityNft}
+            onClick={() => window.open("https://element.market/account")}
+          >
+            <IconFont name="transfer" />
+            <span>{t("交易红魔股权NFT")}</span>
+            <IconFont name="chevronsrightshuangyoujiantou" color={"#FFFFFF"} />
+          </div>
+
+          <div className={classes.invite}>
+            <div className={classes.invite_top}>
+              <span>{t("邀请")}</span>
+              {address && (
+                <span
+                  onClick={() => {
+                    navigate("/invitationlist");
+                  }}
+                >
+                  {t("邀请列表")}{" "}
+                  <IconFont
+                    name="chevronsrightshuangyoujiantou"
+                    color={"#F3BE3C"}
+                  />
+                </span>
+              )}
+            </div>
+
+            <div className={classes.invite_content}>
+              <span>{t("邀请链接")}</span>
+              <div className={classes.invite_content_link}>
+                {address ? (
+                  <>
+                    {userData?.nftId ? (
+                      <>
+                        <span>{shortenString(userInviteLink, 15, 15)}</span>
+                        <IconFont
+                          onClick={() => {
+                            copyText(userInviteLink);
+                          }}
+                          className={classes.invite_content_icon}
+                          name="fuzhi"
+                          color={"#fff"}
+                        />{" "}
+                      </>
+                    ) : (
+                      <>
+                        <span>{t("MINT Nft 获取邀请链接")}</span>
+                      </>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <span>{t("链接钱包获取邀请链接")}</span>
+                  </>
+                )}
+              </div>
+
+              <span>
+                {t(
+                  "普通会员每邀请铸造一个NFT可获得一份空投福利；推荐铸造20个NFT的可升级为会长；团队中拥有20位会长可升级为基金会社长；邀请越多级别越高福利越多。"
+                )}
+              </span>
+
+              {superiorsAddress && (
+                <>
+                  <span>{t("上级链接")}</span>
+                  <div className={classes.superior_content_link}>
+                    <>
+                      <span>
+                        {shortenString(superiorInvitationLink, 18, 18)}
+                      </span>
+                      <IconFont
+                        onClick={() => {
+                          copyText(superiorInvitationLink);
+                        }}
+                        className={classes.invite_content_icon}
+                        name="fuzhi"
+                        color={"#fff"}
+                      />{" "}
+                    </>
+                  </div>
+                  <div className={classes.superior_content_link}>
+                    <>
+                      <span>{t("上级地址：")}</span>
+                      <span>{shortenString(superiorsAddress, 15, 15)}</span>
+                    </>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+
+          <div className={classes.dataDisclosure}>
+            <span>{t("数据披露")}</span>
+            <ul className={classes.dataDisclosure_content}>
+              <li className={classes.dataDisclosure_content_item}>
+                <span>{t("资金池")}</span>
+                <span>{userData?.pools || 0}</span>
+              </li>
+              <li className={classes.dataDisclosure_content_item}>
+                <span>{t("社长席位")}</span>
+                <span>{userData?.president || 0}</span>
+              </li>
+              <li className={classes.dataDisclosure_content_item}>
+                <span>{t("基金会社长席位")}</span>
+                <span>{userData?.foundation || 0}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </PullToRefresh>
     </>
   );
 }
+
+function ReceiveCom({
+  tokenName,
+  tokenNum,
+  toReceive,
+  onAssetRec,
+  onReceive,
+  coinId,
+}: {
+  tokenName: string;
+  tokenNum: number;
+  toReceive: number;
+  onAssetRec: () => void;
+  onReceive: () => void;
+  coinId: UserIncome["coinId"];
+}) {
+  const { t } = useTranslation();
+  return (
+    <li className={classes.nftToken_content_token_item}>
+      {coinId == 1 && <img src={usdtBg} alt="" />}
+      {coinId == 2 && <img src={RMOB_logo} alt="" />}
+      <div>
+        <span className={classes.nftToken_content_token_item_tokenName}>
+          {tokenName}
+        </span>
+        <span className={classes.nftToken_content_token_item_tokenNum}>
+          {tokenNum + toReceive}
+        </span>
+        <span
+          className={classes.nftToken_content_token_item_AssetRecords}
+          onClick={() => {
+            onAssetRec();
+          }}
+        >
+          {t("收益记录")}{" "}
+          <IconFont name="chevronsrightshuangyoujiantou" color={"#3680FF"} />
+        </span>
+      </div>
+
+      <div>
+        <div className={classes.nftToken_content_token_item_tokenWaiting}>
+          <span>{t("待领取")}</span>
+          <span>{toReceive}</span>
+        </div>
+        <Button
+          className={classes.nftToken_content_token_item_tokenReceive}
+          onClick={() => onReceive()}
+          fill="outline"
+          disabled={toReceive == 0}
+        >
+          <span>{t("领取")}</span>
+        </Button>
+      </div>
+    </li>
+  );
+}

src/pages/InvitationList.tsx

@@ -0,0 +1,54 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-19 11:03:01
+ * @LastEditTime: 2024-06-26 15:21:27
+ * @Author: John
+ */
+import { api_preprelion_list } from "@/server/api";
+import { PreprelionListItem } from "@/server/module";
+import { getLevelName } from "@/utils";
+import { Empty } from "antd-mobile";
+import { useEffect, useState } from "react";
+import DataTable, { TableColumn } from "react-data-table-component";
+import { useTranslation } from "react-i18next";
+
+export default function () {
+  const { t } = useTranslation();
+  const [data, setData] = useState<PreprelionListItem[]>([]);
+  const columns: TableColumn<PreprelionListItem>[] = [
+    {
+      name: t("地址"),
+      selector: (row) => row.address,
+      grow: 4,
+    },
+    {
+      name: t("级别"),
+      grow: 4,
+      cell(row, rowIndex, column, id) {
+        return <div>{getLevelName(row.level, row.userType)}</div>;
+      },
+    },
+    {
+      name: t("直推NFT"),
+      selector: (row) => row.mintNumber,
+      // @ts-ignore
+      right: "true",
+      grow: 2,
+    },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      const { data } = await api_preprelion_list().send({});
+      setData(data?.data || []);
+    })();
+
+    return () => {};
+  }, []);
+
+  return (
+    <>
+      <DataTable columns={columns} data={data} noDataComponent={<Empty />} />
+    </>
+  );
+}

src/pages/LevelUp.module.css

@@ -0,0 +1,303 @@
+.container {
+  padding: 0 14px;
+}
+
+.LevelUp {
+  padding-bottom: 32px;
+  .content {
+    margin-top: 16px;
+    .content_box {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .box_item {
+        /* 自动布局子元素 */
+        width: 153px;
+        height: 90px;
+        border-radius: 12px;
+        opacity: 1;
+
+        /* 自动布局 */
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 7px;
+        padding: 26px 23px;
+
+        background: #171719;
+
+        box-shadow: 0px 4px 10px 0px rgba(138, 29, 19, 0.3),
+          inset 0px 0px 6px 0px #8a1d13;
+
+        z-index: 0;
+
+        box-sizing: border-box;
+        span {
+          white-space: nowrap;
+          &:nth-of-type(1) {
+            /* 自动布局子元素 */
+            opacity: 1;
+
+            font-family: DM Sans;
+            font-size: 10px;
+            font-weight: 500;
+            line-height: normal;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            color: #4d4d4d;
+
+            z-index: 0;
+          }
+          &:nth-of-type(2) {
+            /* 自动布局子元素 */
+            opacity: 1;
+
+            font-family: DM Sans;
+            font-size: 14px;
+            font-weight: bold;
+            line-height: normal;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            color: #ffffff;
+
+            z-index: 1;
+          }
+        }
+      }
+
+      .box_arrow {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .content_price {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-top: 16px;
+      padding: 0 10px;
+      span {
+        &:nth-of-type(1) {
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 10px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 0;
+        }
+        &:nth-of-type(2) {
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 10px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #fc872b;
+
+          z-index: 1;
+        }
+      }
+    }
+
+    .content_price_des {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-top: 10px;
+      padding: 0 10px;
+      span {
+        /* 自动布局子元素 */
+        opacity: 1;
+
+        font-family: DM Sans;
+        font-size: 10px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0em;
+
+        font-variation-settings: "opsz" auto;
+        font-feature-settings: "kern" on;
+        color: #4d4d4d;
+
+        z-index: 1;
+      }
+    }
+
+    .content_btn {
+      /* 自动布局子元素 */
+      width: 331px;
+      height: 40px;
+      border-radius: 10px;
+      opacity: 1;
+
+      /* 自动布局 */
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 11px 40px;
+      gap: 10px;
+
+      background: #fc872b;
+
+      z-index: 3;
+
+      box-sizing: border-box;
+
+      margin: 0 auto;
+
+      margin-top: 14px;
+
+      span {
+        /* 自动布局子元素 */
+        opacity: 1;
+
+        font-family: DM Sans;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: normal;
+        text-align: center;
+        letter-spacing: 0em;
+
+        font-variation-settings: "opsz" auto;
+        font-feature-settings: "kern" on;
+        color: #ffffff;
+
+        z-index: 0;
+      }
+
+      .icon {
+        width: 16px;
+        height: 16px;
+      }
+
+      &[disabled] {
+        /* 自动布局子元素 */
+        background: #666666;
+      }
+    }
+  }
+
+  .upgrade_conditions {
+    margin-top: 26px;
+    > span {
+      /* 自动布局子元素 */
+      opacity: 1;
+
+      font-family: DM Sans;
+      font-size: 14px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0em;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      color: #ffffff;
+
+      z-index: 0;
+    }
+    > ul {
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+
+      margin-top: 16px;
+      > li {
+        /* 自动布局子元素 */
+        width: 344px;
+        border-radius: 16px;
+        opacity: 1;
+
+        /* 自动布局 */
+        display: flex;
+        flex-direction: column;
+        padding: 15px 10px;
+
+        background: #171719;
+
+        z-index: 0;
+
+        gap: 10px;
+        box-sizing: border-box;
+        div {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          span {
+            &:nth-of-type(1) {
+              /* 自动布局子元素 */
+              opacity: 1;
+
+              font-family: DM Sans;
+              font-size: 12px;
+              font-weight: bold;
+              line-height: normal;
+              letter-spacing: 0em;
+
+              font-variation-settings: "opsz" auto;
+              color: #fc872b;
+
+              z-index: 0;
+            }
+            &:nth-of-type(2) {
+              /* 自动布局子元素 */
+              opacity: 1;
+
+              font-family: DM Sans;
+              font-size: 12px;
+              font-weight: 500;
+              line-height: normal;
+              letter-spacing: 0em;
+
+              font-variation-settings: "opsz" auto;
+              color: #ffffff;
+
+              z-index: 1;
+            }
+          }
+        }
+
+        > ul {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          li {
+            /* 自动布局子元素 */
+            opacity: 1;
+
+            font-family: DM Sans;
+            font-size: 12px;
+            font-weight: 500;
+            line-height: normal;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            color: #eaeaea;
+
+            z-index: 0;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/LevelUp.tsx

@@ -0,0 +1,280 @@
+import IconFont from "@/components/iconfont";
+import classes from "./LevelUp.module.css";
+import { cn, getLevelName } from "@/utils";
+import Button from "antd-mobile/es/components/button";
+import Space from "antd-mobile/es/components/space";
+import { PropsWithChildren, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  api_get_user_upgrade_information,
+  api_upgrade,
+  api_users_cancel_orders,
+} from "@/server/api";
+import { UpgradeOrder, UserUpgradeInformation } from "@/server/module";
+import Toast, { ToastHandler } from "antd-mobile/es/components/toast";
+import {
+  authorizedU,
+  getApproveUsdt,
+  getBalance,
+  upGradeByContract,
+} from "@/contract/utils";
+import { toWei } from "web3-utils";
+import usePollingCheckBuyStatus from "@/hook/usePollingCheckBuyStatus";
+import { BaseError } from "wagmi";
+import { Dialog } from "antd-mobile";
+import { useNavigate } from "react-router-dom";
+export default function () {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [userUpgradeInfo, setUserUpgradeInfo] =
+    useState<UserUpgradeInformation>();
+  const [approveUsdt, setApproveUsdt] = useState<bigint>(0n);
+  const [balance, setBalance] = useState<bigint>(0n);
+  const approveLoadingToast = useRef<ToastHandler>();
+  const approvePrice = useMemo(
+    () => BigInt(toWei(userUpgradeInfo?.price || "0", "ether")),
+    [userUpgradeInfo?.price]
+  );
+  const upgradeLoadingtoast = useRef<ToastHandler>();
+  const orderInfo = useRef<UpgradeOrder>();
+
+  const {
+    transcationStatus,
+    startPollingCheckBuyStatus,
+    stopPollingCheckBuyStatus,
+  } = usePollingCheckBuyStatus("NORMAL");
+  useEffect(() => {
+    updateUserUpgrdeInfo();
+    return () => {};
+  }, []);
+
+  useEffect(() => {
+    (async () => {
+      if (userUpgradeInfo?.status != 1) return;
+      Toast.show({ icon: "loading", content: t("正在获取已授权金额") });
+      setBalance(await getBalance());
+      setApproveUsdt(await getApproveUsdt());
+      Toast.clear();
+    })();
+
+    return () => {};
+  }, [userUpgradeInfo?.status]);
+
+  useEffect(() => {
+    console.log("approvePrice:", approvePrice);
+
+    return () => {};
+  }, [approvePrice]);
+
+  useEffect(() => {
+    if (transcationStatus == "success") {
+      upgradeLoadingtoast.current?.close();
+      stopPollingCheckBuyStatus();
+      Dialog.alert({
+        content: `${t("升级成功，返回首页查看")}`,
+        confirmText: "OK",
+        onConfirm() {
+          navigate("/");
+        },
+      });
+    }
+
+    return () => {};
+  }, [transcationStatus]);
+
+  async function updateUserUpgrdeInfo() {
+    const { data } = await api_get_user_upgrade_information().send({});
+    // setUserUpgradeInfo({ ...data!.data, ...{ status: 1 } });
+    setUserUpgradeInfo(data?.data);
+  }
+
+  return (
+    <>
+      <div className={cn(classes.LevelUp, classes.container)}>
+        <div className={classes.content}>
+          <div className={classes.content_box}>
+            <div className={classes.box_item}>
+              <span>{t("当前级别")}</span>
+              <span>
+                {getLevelName(
+                  userUpgradeInfo?.level || 0,
+                  userUpgradeInfo?.active
+                )}
+              </span>
+            </div>
+            <IconFont
+              className={classes.box_arrow}
+              color="#fff"
+              name="chevronsrightshuangyoujiantou"
+            />
+            <div className={classes.box_item}>
+              <span>{t("提升级别")}</span>
+              <span>{userUpgradeInfo?.level == 1 ? t("社长") : t("无")}</span>
+            </div>
+          </div>
+
+          <div className={classes.content_price}>
+            <span>{t("当前升级价格：")}</span>
+            <span>{userUpgradeInfo?.price || 0} USDT</span>
+          </div>
+
+          <div className={classes.content_price_des}>
+            <span>{t("价格说明：")}</span>
+            <span>
+              {t(
+                "升级费用xxx USDT起，50%进入资金池，另外50%平均分给所有升级成功的社长和基金会社长。自第二个社长升级开始，每升级一名社长所需铸造费用增加xxx，既第二位社长升级铸造费用为xxxu+xxx*xxx=xxx USDT，以此类推。",
+                {
+                  value1: userUpgradeInfo?.upgradeFees || 0,
+                  value2: userUpgradeInfo?.proportion || "0%",
+                  value3:
+                    parseFloat(userUpgradeInfo?.upgradeFees || "0") +
+                    (parseFloat(userUpgradeInfo?.upgradeFees || "0") *
+                      parseFloat(
+                        (userUpgradeInfo?.proportion || "0%").replace("%", "")
+                      )) /
+                      100,
+                }
+              )}
+            </span>
+          </div>
+
+          <Button
+            className={classes.content_btn}
+            fill="none"
+            disabled={userUpgradeInfo?.status != 1}
+            onClick={async () => {
+              if (balance <= 0n) {
+                Toast.show({ icon: "fail", content: t("余额不足") });
+                return;
+              }
+
+              // 授权
+              if (approveUsdt === 0n) {
+                approveLoadingToast.current = Toast.show({
+                  icon: "loading",
+                  duration: 0,
+                  content: t("正在授权USDT"),
+                });
+                authorizedU(approvePrice)
+                  .then(async () => {
+                    setApproveUsdt(await getApproveUsdt());
+                    approveLoadingToast.current?.close();
+                  })
+                  .catch((err) => {
+                    Toast.show({ content: err.shortMessage, icon: "fail" });
+                  });
+                return;
+              }
+              // 升级
+              upgradeLoadingtoast.current = Toast.show({
+                icon: "loading",
+                duration: 0,
+                content: t("升级中"),
+                maskClickable: false,
+              });
+              const { data: orderRes } = await api_upgrade().send({});
+              orderInfo.current = orderRes?.data;
+              if (!orderInfo.current?.orderNumber) return;
+              const buyAmount = BigInt(orderInfo.current?.buyAmount || "");
+              upGradeByContract(buyAmount, orderInfo.current?.orderNumber)
+                .then((hash) => {
+                  console.log("升级成功！hash:", hash);
+                  updateUserUpgrdeInfo();
+                  startPollingCheckBuyStatus(hash);
+                })
+                .catch(async (err: BaseError) => {
+                  upgradeLoadingtoast.current?.close();
+                  Toast.show({ content: err.shortMessage, icon: "fail" });
+                  // 取消购买
+                  await api_users_cancel_orders().send({
+                    queryParams: { orderId: orderInfo.current?.id! },
+                  });
+                });
+            }}
+          >
+            <Space>
+              {userUpgradeInfo?.status == 1 ? (
+                <>
+                  {approveUsdt > 0n && <span>{t("升级")}</span>}
+                  {approveUsdt === 0n && <span>{t("授权USDT")}</span>}
+                </>
+              ) : (
+                <>
+                  <span>{t("无级别提升")}</span>
+                </>
+              )}
+            </Space>
+          </Button>
+        </div>
+
+        <div className={classes.upgrade_conditions}>
+          <span>{t("升级条件")}</span>
+          <ul>
+            <ConItem
+              memberName={t("普通会员")}
+              limitText={t("(限量xxx个)", {
+                value: userUpgradeInfo?.ordinary || 0,
+              })}
+              conList={[
+                t("1. MINT一枚NFT成为非活跃普通会员"),
+                t("2. MINT NFT并推荐MINT成为活跃普通会员"),
+                t("3. 享1%代币空投平分(所有普通会员)"),
+                t("4. 活跃普通会员根据推荐MINT数量额外有空投权益。"),
+              ]}
+            />
+
+            <ConItem
+              memberName={t("社长")}
+              limitText={t("(限量xxx个)", {
+                value: userUpgradeInfo?.president || 0,
+              })}
+              conList={[
+                t("1. 先成为活跃普通会员，并推荐MINT 20枚NFT"),
+                t("2. 需支付100USDT起升级费用成为社长(第二个起递增10%)"),
+                t("3. 享普通会员权益+0.5%空投代币平分(所有社长)"),
+                t("4. 享社长升级费用50%平分(扣除2USDT GAS费后)"),
+                t("5. 从推荐MINT 21枚开始直推的铸造费用归社长所有"),
+              ]}
+            />
+
+            <ConItem
+              memberName={t("基金会社长")}
+              limitText={t("(限量xxx个)", {
+                value: userUpgradeInfo?.foundation || 0,
+              })}
+              conList={[
+                t("1. 先成为社长，并团队中有20个社长"),
+                t("2. 享社长权益+0.5%空投代币平分(所有基金会社长)"),
+                t("3. 另外基金会社长参与所有项目分成"),
+              ]}
+            />
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function ConItem({
+  memberName,
+  limitText,
+  conList,
+}: PropsWithChildren<{
+  memberName: string;
+  limitText: string;
+  conList: string[];
+}>) {
+  return (
+    <li>
+      <div>
+        <span>{memberName}</span>
+        <span>{limitText}</span>
+      </div>
+      <ul>
+        {conList.map((v, i) => (
+          <li key={i}>{v}</li>
+        ))}
+      </ul>
+    </li>
+  );
+}

src/pages/Mint.module.css

@@ -0,0 +1,172 @@
+.container {
+  padding: 0 14px;
+}
+.Mint {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  .nftImg {
+    width: 345px;
+    height: 190px;
+    border-radius: 10px;
+    opacity: 1;
+    background: #171719;
+    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16),
+      0px 3px 6px 0px rgba(0, 0, 0, 0.23);
+    padding: 8px;
+    box-sizing: border-box;
+
+    margin-top: 17px;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 10px;
+      opacity: 1;
+      object-fit: cover;
+    }
+  }
+
+  > ul {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    padding: 0 7px;
+
+    li {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      span {
+        &:nth-of-type(1) {
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 0;
+        }
+
+        &:nth-of-type(2) {
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 16px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 1;
+        }
+      }
+    }
+  }
+
+  .des {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    padding: 0 7px;
+    span {
+      &:nth-of-type(1) {
+        /* 自动布局子元素 */
+        opacity: 1;
+
+        font-family: DM Sans;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0em;
+
+        font-variation-settings: "opsz" auto;
+        font-feature-settings: "kern" on;
+        color: #ffffff;
+
+        z-index: 0;
+      }
+
+      &:nth-of-type(2) {
+        /* 自动布局子元素 */
+        opacity: 1;
+
+        font-family: DM Sans;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0em;
+
+        font-variation-settings: "opsz" auto;
+        font-feature-settings: "kern" on;
+        color: #eaeaea;
+
+        z-index: 1;
+      }
+    }
+  }
+
+  .btn {
+    /* 自动布局子元素 */
+    width: 331px;
+    height: 40px;
+    border-radius: 10px;
+    opacity: 1;
+
+    /* 自动布局 */
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 11px 40px;
+    gap: 10px;
+
+    background: #fc872b;
+
+    z-index: 3;
+
+    box-sizing: border-box;
+
+    margin: 0 auto;
+
+    span {
+      /* 自动布局子元素 */
+      opacity: 1;
+
+      font-family: DM Sans;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: normal;
+      text-align: center;
+      letter-spacing: 0em;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      color: #ffffff;
+
+      z-index: 0;
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+    }
+
+    &[disabled] {
+      /* 自动布局子元素 */
+      background: #666666;
+    }
+  }
+}

src/pages/Mint.tsx

@@ -0,0 +1,211 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-18 15:28:03
+ * @LastEditTime: 2024-06-24 18:28:07
+ * @Author: John
+ */
+import { cn } from "@/utils";
+import classes from "./Mint.module.css";
+import nft_bg from "@/assets/nft_bg.svg";
+import Button from "antd-mobile/es/components/button";
+import Space from "antd-mobile/es/components/space";
+import { useTranslation } from "react-i18next";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  api_get_nft_configuration_data,
+  api_nft_order,
+  api_users_cancel_orders,
+} from "@/server/api";
+import { NftConfigurationData, NftOrder } from "@/server/module";
+import {
+  authorizedU,
+  getApproveUsdt,
+  getBalance,
+  payByContract,
+} from "@/contract/utils";
+import { Dialog, Modal, Toast } from "antd-mobile";
+import useUserStore from "@/store/User";
+import usePollingCheckBuyStatus from "@/hook/usePollingCheckBuyStatus";
+import { ToastHandler } from "antd-mobile/es/components/toast";
+import { BaseError } from "wagmi";
+import { useNavigate } from "react-router-dom";
+import { toWei } from "web3-utils";
+export default function () {
+  const { t } = useTranslation();
+  const { Token } = useUserStore();
+  const [nftConfig, setNftConfig] = useState<NftConfigurationData>();
+  const [approveUsdt, setApproveUsdt] = useState<bigint>(0n);
+  const [balance, setBalance] = useState<bigint>(0n);
+  const orderInfo = useRef<NftOrder>();
+  const navigate = useNavigate();
+
+  const buyLoadingToast = useRef<ToastHandler>();
+  const approveLoadingToast = useRef<ToastHandler>();
+  const { buyNftIds, startPollingCheckBuyStatus, stopPollingCheckBuyStatus } =
+    usePollingCheckBuyStatus("NFT");
+
+  const approvePrice = useMemo(
+    () => BigInt(toWei(nftConfig?.nftPrice || "0", "ether")),
+    [nftConfig?.nftPrice]
+  );
+
+  useEffect(() => {
+    updateNftConfig();
+
+    return () => {};
+  }, []);
+
+  useEffect(() => {
+    (async () => {
+      Toast.show({ icon: "loading", content: t("正在获取已授权金额") });
+      setBalance(await getBalance());
+      setApproveUsdt(await getApproveUsdt());
+      Toast.clear();
+    })();
+
+    return () => {};
+  }, [Token]);
+
+  async function updateNftConfig() {
+    const { data } = await api_get_nft_configuration_data().send({});
+    setNftConfig(data?.data);
+  }
+  useEffect(() => {
+    if (buyNftIds) {
+      buyLoadingToast.current?.close();
+      stopPollingCheckBuyStatus();
+      Dialog.alert({
+        content: `${t("MINT成功，返回首页查看")}`,
+        confirmText: "OK",
+        onConfirm() {
+          navigate("/");
+        },
+      });
+    }
+
+    return () => {};
+  }, [buyNftIds]);
+
+  useEffect(() => {
+    return () => {};
+  }, []);
+
+  return (
+    <>
+      <div className={cn(classes.Mint, classes.container)}>
+        <div className={classes.nftImg}>
+          <img src={nft_bg} alt="" />
+        </div>
+
+        <ul>
+          <li>
+            <span>{t("NFT总量：")}</span>
+            <span>{nftConfig?.nftCount || 0}</span>
+          </li>
+
+          <li>
+            <span>{t("MINT余量：")}</span>
+            <span>{nftConfig?.nftRemainder || 0}</span>
+          </li>
+
+          <li>
+            <span>{t("当前MINT价格：")}</span>
+            <span>{nftConfig?.nftPrice || 0} USDT</span>
+          </li>
+        </ul>
+
+        <div className={classes.des}>
+          <span>{t("价格说明：")}</span>
+          <span>
+            {t(
+              "{{value1}} USDT起，每增加 {{value2}} 名普通会员，NFT价格上涨 {{value3}}，既：前 {{value2}} 名价格为 {{value1}} USDT/枚，value4 名价格为{{value1}}u+{{value1}}u*{{value3}}={{value5}} USDT/枚，以此类推。",
+              {
+                value1: nftConfig?.initialPrice || 0,
+                value2: nftConfig?.floatingQuantity || 0,
+                value3: nftConfig?.kamibutsu || "0%",
+                value4: `${
+                  parseInt(nftConfig?.floatingQuantity || "0") + 1
+                } - ${parseInt(nftConfig?.floatingQuantity || "0") * 2}`,
+                value5:
+                  parseFloat(nftConfig?.initialPrice || "0") +
+                  (parseFloat(nftConfig?.initialPrice || "0") *
+                    parseFloat(
+                      (nftConfig?.kamibutsu || "0%").replace("%", "")
+                    )) /
+                    100,
+              }
+            )}
+          </span>
+        </div>
+
+        <Button
+          className={classes.btn}
+          fill="none"
+          onClick={async () => {
+            if (balance <= 0n) {
+              Toast.show({ icon: "fail", content: t("余额不足") });
+              return;
+            }
+
+            // 授权
+            if (approveUsdt === 0n) {
+              approveLoadingToast.current = Toast.show({
+                icon: "loading",
+                duration: 0,
+                content: t("正在授权USDT"),
+              });
+              authorizedU(approvePrice)
+                .then(async () => {
+                  setApproveUsdt(await getApproveUsdt());
+                  approveLoadingToast.current?.close();
+                })
+                .catch((err) => {
+                  Toast.show({ content: err.shortMessage, icon: "fail" });
+                });
+
+              return;
+            }
+
+            // 购买
+            buyLoadingToast.current = Toast.show({
+              icon: "loading",
+              duration: 0,
+              content: t("购买中"),
+              maskClickable: false,
+            });
+            const { data: orderRes } = await api_nft_order().send({});
+            orderInfo.current = orderRes?.data;
+            if (!orderInfo.current?.orderNumber) return;
+            const buyAmount = BigInt(orderInfo.current?.buyAmount || "");
+            payByContract(
+              buyAmount,
+              orderInfo.current?.orderNumber,
+              orderInfo.current.payInduction
+            )
+              .then((hash) => {
+                console.log("购买成功！hash:", hash);
+                updateNftConfig();
+                startPollingCheckBuyStatus(hash);
+              })
+              .catch(async (err: BaseError) => {
+                buyLoadingToast.current?.close();
+                Toast.show({
+                  content: err.shortMessage,
+                  icon: "fail",
+                });
+                // 取消购买
+                await api_users_cancel_orders().send({
+                  queryParams: { orderId: orderInfo.current?.id! },
+                });
+              });
+          }}
+        >
+          <Space>
+            {approveUsdt > 0n && <span>MINT</span>}
+            {approveUsdt === 0n && <span>{t("授权USDT")}</span>}
+          </Space>
+        </Button>
+      </div>
+    </>
+  );
+}

src/server/api.ts

@@ -0,0 +1,154 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-18 10:28:21
+ * @LastEditTime: 2024-07-10 11:53:39
+ * @Author: John
+ */
+import { GET, POST } from "./client";
+import {
+  ClaimIncome,
+  IncomeRecord,
+  IncomeRecordType,
+  NftConfigurationData,
+  NftOrder,
+  PreprelionListItem,
+  UpgradeOrder,
+  UserHomeData,
+  UserIncome,
+  UserUpgradeInformation,
+} from "./module";
+
+// 检查账号是否注册
+export function api_check_account_registration() {
+  return GET<{ account: string }, { exist: boolean }>({
+    url: "/api/account/exist",
+    requiresToken: false,
+  });
+}
+
+// 登录
+export function api_login() {
+  return POST<
+    {
+      account: `0x${string}` | undefined;
+      password: string;
+      publicKey: string;
+      chainType: 2;
+    },
+    { token: string }
+  >({
+    url: "/api/account/signIn",
+    requiresToken: false,
+  });
+}
+
+// 注册
+export function api_signUp() {
+  return POST<
+    {
+      account: `0x${string}` | undefined;
+      publicKey: string;
+      shareCode: string;
+      chainType: 2;
+    },
+    any
+  >({ url: "/api/account/signUp", requiresToken: false, catchErr: true });
+}
+
+// 获取钱包签名串
+export function api_get_wallet_signature_string() {
+  return GET<
+    { account: `0x${string}` | undefined },
+    { encryptedString: string }
+  >({
+    url: "/api/account/randomCode",
+    requiresToken: false,
+  });
+}
+
+// 获取首页用户数据
+export function api_get_homepage_user_data() {
+  return GET<any, UserHomeData>({
+    url: "/api/common/getUserData",
+    requiresToken: false,
+    requiresAddress: false,
+  });
+}
+
+// 获取用户升级信息
+export function api_get_user_upgrade_information() {
+  return GET<any, UserUpgradeInformation>({
+    url: "/api/user/userUpgradeInformation",
+  });
+}
+
+// 获取NFT配置数据
+export function api_get_nft_configuration_data() {
+  return GET<any, NftConfigurationData>({
+    url: "/api/nft/getUserData",
+  });
+}
+
+// 分页查询收益记录
+export function api_pagling_query_income_record() {
+  return GET<
+    {
+      status?: IncomeRecordType;
+      id: string;
+      type: 1 | 2; // 1=领取记录 2=发放记录
+      pageNum: number;
+      pageSize: number;
+    },
+    IncomeRecord
+  >({
+    url: "/api/common/earningsRecords",
+  });
+}
+
+// NFT下单
+export function api_nft_order() {
+  return POST<any, NftOrder>({ url: "/api/nft/payNft" });
+}
+
+// 用户取消订单告诉我
+export function api_users_cancel_orders() {
+  return POST<any, any, { orderId: number }>({ url: "/api/nft/cancel" });
+}
+
+// 直推列表
+export function api_preprelion_list() {
+  return GET<any, PreprelionListItem[]>({ url: "/api/user/getDirectPushList" });
+}
+
+// 升级
+export function api_upgrade() {
+  return POST<any, UpgradeOrder>({ url: "/api/user/upgrade" });
+}
+
+// 用户领取收益
+export function api_claim_income() {
+  return POST<any, ClaimIncome, { id: number }>({
+    url: "/api/common/claimYourEarnings",
+  });
+}
+
+// 绑定邀请关系
+export function api_binding_invitation_relationship() {
+  return POST<{ shareCode: string }, { result: boolean }>({
+    url: "/api/account/bindingRelationship",
+  });
+}
+
+// 查询用户是否绑定关系
+export function api_query_whether_the_user_is_binding_relationship() {
+  return GET<any, { result: boolean }>({
+    url: "/api/account/bindOrNot",
+  });
+}
+
+// 获取用户上级
+export function api_get_user_superiors() {
+  return GET<any, { address: string; shareCode: string }>({
+    url: "/api/user/getTheSuperior",
+  });
+}

src/server/client.ts

@@ -1,34 +1,139 @@
 /*
  * @LastEditors: John
  * @Date: 2024-06-18 10:09:21
- * @LastEditTime: 2024-06-18 10:27:04
+ * @LastEditTime: 2024-07-02 11:36:28
  * @Author: John
  */
 import { Client } from "@hyper-fetch/core";
 import { BASE_RESPONSE } from "./module";
+import useUserStore from "@/store/User";
+import { getAccount, connect } from "@wagmi/core";
+import { config } from "@/components/WalletProvider";
+import { Lang } from "@/constants";
+import { Toast } from "antd-mobile";
+import { injected } from "wagmi/connectors";
+import { signAndLogin } from "@/utils/wallet";
+import i18next from "i18next";
+function initClient({
+  requiresToken,
+  requiresAddress,
+  catchErr,
+}: {
+  requiresToken: boolean;
+  requiresAddress: boolean;
+  catchErr: boolean;
+}) {
+  return new Client({ url: import.meta.env.VITE_BASE_API_URL })
+    .onAuth(async (req) => {
+      if (requiresToken) {
+        if (!useUserStore.getState().Token) {
+          // TODO 登录获取token
+          // Toast.show({ content: "token is emtiy!", icon: "fail" });
+          if (!getAccount(config).address)
+            await connect(config, { connector: injected() });
+          await signAndLogin(getAccount(config).address!);
+        }
+      }
 
-const client = new Client({ url: import.meta.env.VITE_BASE_API_URL })
-  .onAuth((req) => {
-    return req;
-  })
-  .onRequest((req) => {
-    req.setHeaders({});
-    return req;
-  })
-  .onResponse((res) => {
-    return res;
-  });
+      if (requiresAddress) {
+        if (!getAccount(config).address) {
+          // TODO 链接钱包
+          // Toast.show({ content: "address is emtiy!", icon: "fail" });
+          await connect(config, { connector: injected() });
+        }
+      }
 
-export const POST = <P, R = any>({ url }: { url: string }) => {
-  return client.createRequest<BASE_RESPONSE<R>, P>()({
+      const headers = {
+        ...req.headers,
+        Authorization: useUserStore.getState().Token,
+        "Accept-Language": getAcceptLang(),
+        address: (getAccount(config).address || "") as string,
+      };
+      return req.setHeaders(headers);
+    })
+    .onResponse((res) => {
+      console.log(res);
+      if (!res.success) {
+        Toast.clear();
+        Toast.show({ content: i18next.t("服务器错误"), icon: "fail" });
+        throw new Error(res.error?.message);
+      }
+      const resData: BASE_RESPONSE = res.data;
+      if (resData.code !== 200 && resData.code !== 0) {
+        if (resData.msg) Toast.show({ content: resData.msg, icon: "fail" });
+        if (catchErr) return res;
+        throw new Error(resData.msg || "client on response error");
+      }
+      return res;
+    });
+}
+
+export const POST = <P = any, R = any, QueryParams = any>({
+  url,
+  requiresToken = true,
+  requiresAddress = true,
+  catchErr = false,
+}: {
+  url: string;
+  requiresToken?: boolean;
+  requiresAddress?: boolean;
+  catchErr?: boolean;
+}) => {
+  return initClient({ requiresToken, requiresAddress, catchErr }).createRequest<
+    BASE_RESPONSE<R>,
+    P,
+    any,
+    QueryParams
+  >()({
     method: "POST",
     endpoint: url,
   });
 };
 
-export const GET = <P, R = any>({ url }: { url: string }) => {
-  return client.createRequest<BASE_RESPONSE<R>, any, any, P>()({
+export const GET = <P = any, R = any>({
+  url,
+  requiresToken = true,
+  requiresAddress = true,
+  catchErr = false,
+}: {
+  url: string;
+  requiresToken?: boolean;
+  requiresAddress?: boolean;
+  catchErr?: boolean;
+}) => {
+  return initClient({ requiresToken, requiresAddress, catchErr }).createRequest<
+    BASE_RESPONSE<R>,
+    any,
+    any,
+    P
+  >()({
     method: "GET",
     endpoint: url,
   });
 };
+
+function getAcceptLang() {
+  let apiAcceptLang;
+  switch (useUserStore.getState().Lang) {
+    case Lang.cn:
+      apiAcceptLang = "zh-CN";
+      break;
+    case Lang.tw:
+      apiAcceptLang = "zh-TW";
+      break;
+    case Lang.en:
+      apiAcceptLang = "en-US";
+      break;
+    case Lang.de:
+      apiAcceptLang = "de-DE";
+      break;
+    case Lang.jp:
+      apiAcceptLang = "ja-JP";
+      break;
+    default:
+      apiAcceptLang = "zh-CN";
+      break;
+  }
+
+  return apiAcceptLang;
+}

src/server/module.d.ts

@@ -1,6 +1,140 @@
 export type BASE_RESPONSE<T = any> = {
   code: 0 | 200;
-  data: T | null;
+  data: T;
   msg: string;
   timeMillis: number;
 }; // What's returned from request
+
+export type Level = 0 | 1 | 2 | 3; // 0=无等级 1=会员 2=社长 3=基金会
+export interface UserHomeData {
+  address: string;
+  airdropNumber: number;
+  foundation: number;
+  invitationCode: string;
+  level: Level;
+  mintNumber: number;
+  nftId: number;
+  pools: string;
+  president: number;
+  presidentNumber: number;
+  userImg: string;
+  userIncomes: UserIncome[];
+  active: 0 | 1; // "0=非活跃  1=活跃用户"
+}
+export interface UserIncome {
+  coinId: 1 | 2; // 1 USDT 2 ROMB
+  coinName: string;
+  collection: number;
+  createTime: string;
+  flag: number;
+  id: number;
+  receive: number;
+  updateTime: string;
+  userId: number;
+}
+
+export interface UserUpgradeInformation {
+  foundation: number;
+  level: Level;
+  numberOfPresidents: number;
+  ordinary: number;
+  president: number;
+  price: string;
+  proportion: string;
+  status: 1 | 0; //1=可升级 0=不可升级
+  upgradeFees: string;
+  active: 0 | 1; // "0=非活跃  1=活跃用户"
+}
+
+export interface NftConfigurationData {
+  floatingQuantity: string;
+  initialPrice: string;
+  kamibutsu: string;
+  nftCount: number;
+  nftPrice: string;
+  nftRemainder: number;
+}
+
+export interface IncomeRecord {
+  countId: string;
+  current: number;
+  maxLimit: string;
+  optimizeCountSql: boolean;
+  orders: { asc: boolean; column: string }[];
+  pages: number;
+  records: IncomeRecordsItem[];
+  searchCount: boolean;
+  size: number;
+  total: number;
+}
+
+export interface IncomeRecordsItem {
+  id: number;
+  createTime: string;
+  updateTime: string;
+  flag: number;
+  userId: number;
+  incomeId: number;
+  type: 1 | 2 | 3 | 4; // 1:领取成功，2发放记录 3，领取中 4:已取消
+  coinId: number;
+  opType: number;
+  opRemark: string;
+  opBefore: number;
+  opValue: number;
+  opAfter: number;
+  extRemark: string;
+}
+
+export type IncomeRecordType = 4 | 5 | 6 | 7 | 8 | 9; //4=直推>20NFT,5=升级费平分,6=NFT空投,7=社长空投,8=基金会社长,9=直推空投
+
+export interface NftOrder {
+  address: string;
+  buyAmount: string;
+  buyCount: string;
+  createBy: string;
+  createTime: string;
+  hash: string;
+  id: number;
+  illustrate: string;
+  nftId: number;
+  orderNumber: string;
+  payCoin: string;
+  recommendId: number;
+  status: number;
+  updateBy: string;
+  updateTime: string;
+  userId: number;
+  payInduction: number;
+}
+
+export interface PreprelionListItem {
+  address: string;
+  level: 0 | 1 | 2 | 3; // 0=无等级 1=会员 2=社长 3=基金会
+  mintNumber: number;
+  userType: 0 | 1; //  0=非活跃 1=活跃用户
+}
+
+export interface UpgradeOrder {
+  address: string;
+  buyAmount: string;
+  createBy: string;
+  createTime: string;
+  endLevel: number;
+  hash: string;
+  id: number;
+  illustrate: string;
+  orderNumber: string;
+  payCoin: string;
+  startLevel: number;
+  status: number;
+  updateBy: string;
+  updateTime: string;
+  userId: number;
+}
+
+export interface ClaimIncome {
+  claimQuantity: string;
+  hash: string;
+  orderNumber: string;
+  time: number;
+}

src/store/User.ts

@@ -1,26 +1,44 @@
 /*
  * @LastEditors: John
  * @Date: 2024-06-17 17:45:43
- * @LastEditTime: 2024-06-17 17:57:42
+ * @LastEditTime: 2024-06-20 15:49:09
  * @Author: John
  */
-import { ASYNC_STORAGE_KEY } from "@/constants";
+import { ASYNC_STORAGE_KEY, Lang } from "@/constants";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 
 interface UserState {
+  Address: string;
+  UpdateAddress: (a: string) => void;
+
   Token: string;
   UpdateToken: (t: string) => void;
+
+  Lang: Lang;
+  UpdateLang: (l: Lang) => void;
+
+  InviteCode: string;
+  UpdateInviteCode: (I: string) => void;
 }
 
 export const useUserStore = create<UserState>()(
   persist(
     (set, _get) => ({
+      Address: "",
+      UpdateAddress: (a) => set({ Address: a }),
+
       Token: "",
       UpdateToken: (t) => set({ Token: t }),
+
+      Lang: Lang.en,
+      UpdateLang: (l) => set({ Lang: l }),
+
+      InviteCode: "",
+      UpdateInviteCode: (i) => set({ InviteCode: i }),
     }),
     {
-      name: ASYNC_STORAGE_KEY.Token, // name of item in the storage (must be unique)
+      name: ASYNC_STORAGE_KEY.Store, // name of item in the storage (must be unique)
       storage: createJSONStorage(() => localStorage), // (optional) by default the 'localStorage' is used
     }
   )

src/style/ant-cover-m.css

@@ -0,0 +1,314 @@
+.adm-tabs {
+  .adm-tabs-header {
+    border-bottom: 0.25px solid #333333;
+
+    .adm-tabs-tab-line {
+      background-color: #fc872b;
+    }
+
+    .adm-tabs-tab {
+      opacity: 1;
+
+      font-family: DM Sans;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0em;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      color: #666666;
+      padding-bottom: 4px;
+      &.adm-tabs-tab-active {
+        color: #ffffff;
+      }
+    }
+  }
+  .adm-tabs-content {
+    padding: 0;
+  }
+}
+
+.adm-capsule-tabs {
+  .adm-capsule-tabs-header {
+    padding: 0px 15px;
+    border-bottom: none;
+    margin-top: 20px;
+
+    .adm-scroll-mask {
+      opacity: 0 !important;
+    }
+
+    .adm-capsule-tabs-tab-list {
+      gap: 8px;
+      .adm-capsule-tabs-tab-wrapper {
+        padding: 0;
+
+        .adm-capsule-tabs-tab {
+          /* 自动布局子元素 */
+          height: 25px;
+          border-radius: 8px;
+          opacity: 1;
+
+          box-sizing: border-box;
+          border: 1px solid #fc872b;
+
+          z-index: 1;
+          background-color: transparent;
+
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 10px;
+          font-weight: 500;
+          line-height: 25px;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 0;
+
+          padding: 0 14px;
+        }
+
+        .adm-capsule-tabs-tab-active {
+          /* 自动布局子元素 */
+          height: 25px;
+          border-radius: 8px;
+          opacity: 1;
+
+          background: #fc872b;
+
+          z-index: 0;
+
+          /* 自动布局子元素 */
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 10px;
+          font-weight: 500;
+          line-height: 25px;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+
+          z-index: 0;
+        }
+      }
+    }
+  }
+}
+
+/* picker */
+.adm-picker-popup {
+  .adm-picker-header {
+    border-bottom: 1px solid #404040;
+    .adm-picker-header-title {
+      opacity: 1;
+
+      font-family: DM Sans;
+      font-size: 17px;
+      font-weight: bold;
+      line-height: 24px;
+      letter-spacing: 0px;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      color: #ffffff;
+    }
+    .adm-picker-header-button {
+      opacity: 1;
+
+      font-family: DM Sans;
+      font-size: 17px;
+      font-weight: 500;
+      line-height: 24px;
+      letter-spacing: 0px;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      color: #1890ff;
+    }
+  }
+  .adm-popup-body {
+    background-color: #000000;
+    .adm-picker {
+      /* height: 280px; */
+      .adm-picker-body {
+        .adm-picker-view {
+          background-color: #000000;
+          .adm-picker-view-column {
+            .adm-picker-view-column-wheel {
+              .adm-picker-view-column-item {
+                /* height: 34px; */
+                .adm-picker-view-column-item-label {
+                  /* font-family: DM Sans;
+                  font-size: 16px;
+                  font-weight: 500;
+                  line-height: 34px;
+                  text-align: center;
+                  letter-spacing: 0px;
+
+                  font-variation-settings: "opsz" auto; */
+                  color: #ffffff;
+                }
+              }
+            }
+          }
+          .adm-picker-view-mask {
+            .adm-picker-view-mask-top,
+            .adm-picker-view-mask-bottom {
+              background-color: #000000;
+            }
+            .adm-picker-view-mask-middle {
+              /* height: 34px; */
+              border-top: 1px solid #404040;
+              border-bottom: 1px solid #404040;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* toast */
+.adm-toast-main {
+  min-width: 170px !important;
+  min-height: 40px !important;
+  max-width: 320px !important;
+  max-height: max-content !important;
+  border-radius: 10px !important;
+  opacity: 1;
+
+  /* 自动布局 */
+  padding: 11px 20px !important;
+
+  /* background: rgba(252, 135, 43, 0.5) !important; */
+
+  box-sizing: border-box !important;
+  border: 1px solid #fc872b !important;
+
+  /* backdrop-filter: blur(10px); */
+
+  .adm-auto-center-content {
+    /* 自动布局子元素 */
+    opacity: 1;
+
+    font-family: DM Sans;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: 0px;
+
+    font-variation-settings: "opsz" auto;
+    color: #ffffff;
+
+    z-index: 0;
+  }
+}
+
+.adm-popover-menu {
+  .adm-popover-arrow {
+    color: rgba(42, 42, 42, 0.6) !important;
+  }
+  .adm-popover-inner {
+    background: rgba(42, 42, 42, 0.6);
+
+    box-sizing: border-box;
+    border-image: radial-gradient(
+      103% 103% at 50% 50%,
+      #a41914 0%,
+      rgba(164, 25, 20, 0) 100%
+    );
+
+    backdrop-filter: blur(10px);
+
+    .adm-popover-menu-item {
+      padding: 0 10px;
+      background-color: transparent !important;
+      &::after {
+        display: none !important;
+      }
+
+      .adm-popover-menu-item-text {
+        /* 自动布局子元素 */
+        opacity: 1;
+
+        font-family: DM Sans;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: normal;
+        text-transform: capitalize;
+        letter-spacing: 0em;
+
+        color: #ffffff;
+
+        z-index: 0;
+        padding: 10px 0;
+        border-top: 1px solid #3d3d3d;
+      }
+    }
+  }
+}
+
+.adm-dialog {
+  .adm-center-popup-body {
+    box-sizing: border-box !important;
+    border: 1px solid #fc872b !important;
+    border-radius: 10px !important;
+    background-color: transparent !important;
+    backdrop-filter: blur(10px);
+    .adm-dialog-content {
+      .adm-auto-center-content {
+        opacity: 1;
+
+        font-family: Space Grotesk;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0px;
+
+        font-variation-settings: "opsz" auto;
+        color: #ffffff;
+
+        z-index: 0;
+      }
+    }
+
+    .adm-dialog-footer {
+      .adm-dialog-action-row {
+        border-top: 1px solid #fc872b !important;
+
+        .adm-dialog-button {
+          span {
+            color: #fc872b;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* adm-pull-to-refresh  */
+.adm-pull-to-refresh {
+  .adm-pull-to-refresh-head-content {
+    /* 自动布局子元素 */
+    font-family: Space Grotesk;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: 0em;
+
+    font-variation-settings: "opsz" auto;
+    font-feature-settings: "kern" on;
+    color: #9e9e9e;
+
+    z-index: 0;
+  }
+}

src/style/react-data-table-component-cover-m.css

@@ -0,0 +1,57 @@
+.rdt_Table {
+  width: 100vw !important;
+  background-color: transparent !important;
+  padding: 0 14px;
+  > div {
+    background-color: transparent !important;
+  }
+
+  .rdt_TableHead {
+    .rdt_TableHeadRow {
+      height: 16px !important;
+      min-height: 16px !important;
+      background-color: transparent !important;
+
+      .rdt_TableCol {
+        div {
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #eaeaea;
+        }
+      }
+    }
+  }
+
+  .rdt_TableBody {
+    gap: 10px;
+    margin-top: 14px;
+    .rdt_TableRow {
+      height: 18px !important;
+      min-height: 18px !important;
+      background-color: transparent !important;
+      .rdt_TableCell {
+        div {
+          opacity: 1;
+
+          font-family: DM Sans;
+          font-size: 14px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}

src/utils/index.ts

@@ -1,17 +1,19 @@
 /*
  * @LastEditors: John
  * @Date: 2024-06-17 18:19:27
- * @LastEditTime: 2024-06-18 10:48:05
+ * @LastEditTime: 2024-06-25 15:29:51
  * @Author: John
  */
-
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 import Toast from "antd-mobile/es/components/toast";
+import i18next from "i18next";
+import { Level, UserHomeData } from "@/server/module";
 
 export const ua = navigator.userAgent;
 export const isIOS = /iphone|ipad|ipod|ios/i.test(ua);
 export const isAndroid = /android|XiaoMi|MiuiBrowser/i.test(ua);
 export const isMobile = isIOS || isAndroid;
-export const isOKApp = /OKApp/i.test(ua);
 
 export function shortenString(
   inputString: string,
@@ -29,7 +31,7 @@ export function shortenString(
 }
 
 // 定义一个函数，用于获取指定参数的值
-export function getUrlQueryParam(key: string): string | undefined {
+export function getUrlQueryParam(key: string) {
   console.log(window.location);
   const query: Map<string, string> = new Map();
   const queryStr = window.location.href.split("?")[1];
@@ -72,8 +74,47 @@ export function copyText(text: string) {
   isCopySuccess &&
     Toast.show({
       icon: "success",
-      content: "Copy successful",
+      content: i18next.t("复制成功"),
     });
   // 8、 销毁DOM
   document.body.removeChild(input);
 }
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function getLevelName(level: Level, active?: UserHomeData["active"]) {
+  switch (level) {
+    case 0:
+      return i18next.t("无等级");
+    case 1:
+      if (active == 1) {
+        return i18next.t("普通活跃");
+      } else {
+        return i18next.t("普通非活跃");
+      }
+    case 2:
+      return i18next.t("社长");
+    case 3:
+      return i18next.t("基金会社长");
+    default:
+      break;
+  }
+}
+
+export function getUrlParameterByName(name: string, url?: string) {
+  if (!url) url = window.location.href;
+  name = name.replace(/[\[\]]/g, "\\$&");
+  let regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+    results = regex.exec(url);
+  if (!results) return null;
+  if (!results[2]) return "";
+  console.log("url params:", results);
+  return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+
+export function padWithZero(num: number) {
+  // 将数字转换为字符串，并在前面补足零使总长度为5
+  return String(num).padStart(5, "0");
+}

src/utils/wallet.ts

@@ -0,0 +1,163 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-19 15:55:07
+ * @LastEditTime: 2024-07-02 11:38:59
+ * @Author: John
+ */
+import { config } from "@/components/WalletProvider";
+import {
+  api_binding_invitation_relationship,
+  api_check_account_registration,
+  api_get_wallet_signature_string,
+  api_login,
+  api_query_whether_the_user_is_binding_relationship,
+  api_signUp,
+} from "@/server/api";
+import useUserStore from "@/store/User";
+import {
+  signMessage,
+  getChains,
+  switchChain,
+  getChainId,
+  disconnect,
+  getAccount,
+} from "@wagmi/core";
+import Toast from "antd-mobile/es/components/toast";
+import i18next from "i18next";
+import { getUrlParameterByName } from ".";
+import { UrlQueryParamsKey } from "@/constants";
+
+/**
+ * @description: 检测网络并切换
+ * @return {*}
+ */
+export function checkNetWork(): Promise<void> {
+  return new Promise<void>(async (reslove, reject) => {
+    // TODO 切换网络✔
+    const chains = getChains(config);
+    let chainId = getChainId(config);
+    // console.log("all chains:", chains);
+    console.log("current chain id:", chainId);
+    let netWork = chains.find(
+      (v) => v.id == import.meta.env.VITE_PARTICIPATE_CHAIN_ID
+    );
+    console.log("participate network:", netWork);
+    if (chainId != netWork?.id && netWork) {
+      try {
+        await switchChain(config, {
+          chainId: netWork.id,
+        });
+
+        const timer = setInterval(() => {
+          chainId = getChainId(config);
+          console.log("current chain id:", chainId);
+          if (chainId == netWork?.id) {
+            console.log("switch chain success!");
+            reslove();
+            clearInterval(timer);
+          }
+        }, 1000);
+      } catch (error) {
+        // TODO 切换网络失败，自动添加网络✔
+        console.error("switch chain error:", error);
+      }
+    } else {
+      reslove();
+    }
+  });
+}
+
+// 签名并且登录
+export async function signAndLogin(address?: `0x${string}`): Promise<void> {
+  return new Promise(async (reslove) => {
+    if (!address) return loginOut();
+    if (address != useUserStore.getState().Address) {
+      useUserStore.setState((state) => {
+        return { ...state, Address: address, Token: "" };
+      });
+    }
+
+    if (useUserStore.getState().Token) return reslove(); // token存在无需登录
+    const publicKey =
+      "0305ef2a74bff2e2d68764c557ce2daecac92caa7a9406e3a90c2cf7c5b444a154";
+
+    const loadingToast = Toast.show({
+      icon: "loading",
+      content: i18next.t("链接钱包中..."),
+      duration: 0,
+      maskClickable: false,
+    });
+
+    const { data: isExitData } = await api_check_account_registration().send({
+      queryParams: { account: address },
+    });
+    if (isExitData?.data?.exist) {
+      // 登录
+
+      const { data: signatureData } =
+        await api_get_wallet_signature_string().send({
+          queryParams: { account: address },
+        });
+
+      let sign: string;
+      try {
+        sign = await signMessage(config, {
+          message: signatureData?.data?.encryptedString || "",
+        });
+      } catch (error) {
+        // 用户拒绝签名或者遇到错误，断开链接
+        loadingToast.close();
+        loginOut();
+        throw new Error("用户拒绝签名或者遇到错误，断开链接");
+      }
+
+      // TODO 登录✔
+      const { data: loginInfoData } = await api_login().send({
+        data: {
+          account: address,
+          password: sign,
+          publicKey,
+          chainType: 2,
+        },
+      });
+
+      if (loginInfoData) {
+        useUserStore.setState((state) => {
+          return { ...state, Token: loginInfoData.data?.token };
+        });
+        reslove();
+        loadingToast.close();
+      }
+    } else {
+      const inviteCode = getUrlParameterByName(UrlQueryParamsKey.INVITE_CODE);
+      if (!inviteCode) {
+        Toast.show({ icon: "fail", content: i18next.t("无效的邀请链接") });
+        return loginOut();
+      }
+      // 注册
+      const { data } = await api_signUp().send({
+        data: {
+          account: address,
+          publicKey,
+          shareCode: inviteCode,
+          chainType: 2,
+        },
+      });
+      if (data?.code === 0) {
+        await signAndLogin(address);
+      } else {
+        return loginOut();
+      }
+      reslove();
+      loadingToast.close();
+    }
+  });
+}
+
+export async function loginOut() {
+  const { connector } = getAccount(config);
+  await disconnect(config, { connector });
+  useUserStore.setState((state) => {
+    return { ...state, Address: "", Token: "" };
+  });
+}

src/vite-env.d.ts

@@ -1,7 +1,19 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-17 17:20:03
+ * @LastEditTime: 2024-07-02 16:53:48
+ * @Author: John
+ */
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
+  readonly VITE_BASE_URL: string;
   readonly VITE_BASE_API_URL: string;
+  readonly VITE_PARTICIPATE_CHAIN_ID: number;
+  readonly VITE_NETWORK_USDT_ADDRESS: `0x${string}`;
+  readonly VITE_PURCHASED_CONTRACT_ADDRESS: `0x${string}`;
+  readonly VITE_RECEIVE_RAMB_CONTRACT_ADDRESS: `0x${string}`;
+  readonly VITE_CHECK_TRANSACTION_DETAILS_URL: string;
   // 更多环境变量...
   readonly MODE: "development" | "production" | "test";
 }

tsconfig.json

@@ -1,7 +1,7 @@
 /*
  * @LastEditors: John
  * @Date: 2024-06-17 17:20:03
- * @LastEditTime: 2024-06-17 17:41:09
+ * @LastEditTime: 2024-06-24 18:48:07
  * @Author: John
  */
 {
@@ -23,9 +23,6 @@
     /* Linting */
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
 
     "paths": {
       "@/*": ["./src/*"]

vite.config.ts

@@ -1,3 +1,9 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-17 17:20:03
+ * @LastEditTime: 2024-06-24 10:08:56
+ * @Author: John
+ */
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import path from "path";
@@ -6,6 +12,16 @@ import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    host: "192.168.10.167",
+    proxy: {
+      "/dev": {
+        target: "http://192.168.10.106:8100",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/dev/, ""),
+      },
+    },
+  },
   plugins: [
     react(),
     viteCompression({ deleteOriginFile: false }),

yarn.lock

@@ -240,7 +240,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9":
+"@babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/runtime@npm:7.24.7"
   dependencies:
@@ -321,6 +321,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/is-prop-valid@npm:1.2.2":
+  version: 1.2.2
+  resolution: "@emotion/is-prop-valid@npm:1.2.2"
+  dependencies:
+    "@emotion/memoize": "npm:^0.8.1"
+  checksum: 10c0/bb1530dcb4e0e5a4fabb219279f2d0bc35796baf66f6241f98b0d03db1985c890a8cafbea268e0edefd5eeda143dbd5c09a54b5fba74cee8c69b98b13194af50
+  languageName: node
+  linkType: hard
+
+"@emotion/memoize@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/memoize@npm:0.8.1"
+  checksum: 10c0/dffed372fc3b9fa2ba411e76af22b6bb686fb0cb07694fdfaa6dd2baeb0d5e4968c1a7caa472bfcf06a5997d5e7c7d16b90e993f9a6ffae79a2c3dbdc76dfe78
+  languageName: node
+  linkType: hard
+
+"@emotion/unitless@npm:0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/unitless@npm:0.8.1"
+  checksum: 10c0/a1ed508628288f40bfe6dd17d431ed899c067a899fa293a13afe3aed1d70fac0412b8a215fafab0b42829360db687fecd763e5f01a64ddc4a4b58ec3112ff548
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/aix-ppc64@npm:0.21.5"
@@ -1884,6 +1907,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stylis@npm:4.2.5":
+  version: 4.2.5
+  resolution: "@types/stylis@npm:4.2.5"
+  checksum: 10c0/23f5b35a3a04f6bb31a29d404fa1bc8e0035fcaff2356b4047743a057e0c37b2eba7efe14d57dd2b95b398cea3bac294d9c6cd93ed307d8c0b7f5d282224b469
+  languageName: node
+  linkType: hard
+
 "@types/trusted-types@npm:^2.0.2":
   version: 2.0.7
   resolution: "@types/trusted-types@npm:2.0.7"
@@ -2697,7 +2727,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ahooks@npm:^3.7.6":
+"ahooks@npm:^3.7.6, ahooks@npm:^3.8.0":
   version: 3.8.0
   resolution: "ahooks@npm:3.8.0"
   dependencies:
@@ -3190,6 +3220,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camelize@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "camelize@npm:1.0.1"
+  checksum: 10c0/4c9ac55efd356d37ac483bad3093758236ab686192751d1c9daa43188cc5a07b09bd431eb7458a4efd9ca22424bba23253e7b353feb35d7c749ba040de2385fb
+  languageName: node
+  linkType: hard
+
 "caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001629":
   version: 1.0.30001636
   resolution: "caniuse-lite@npm:1.0.30001636"
@@ -3334,6 +3371,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -3422,6 +3466,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"copy-text-to-clipboard@npm:^3.0.1":
+  version: 3.2.0
+  resolution: "copy-text-to-clipboard@npm:3.2.0"
+  checksum: 10c0/d60fdadc59d526e19d56ad23cec2b292d33c771a5091621bd322d138804edd3c10eb2367d46ec71b39f5f7f7116a2910b332281aeb36a5b679199d746a8a5381
+  languageName: node
+  linkType: hard
+
+"core-js@npm:^3.11.0":
+  version: 3.37.1
+  resolution: "core-js@npm:3.37.1"
+  checksum: 10c0/440eb51a7a39128a320225fe349f870a3641b96c9ecd26470227db730ef8c161ea298eaea621db66ec0ff622a85299efb4e23afebf889c0a1748616102307675
+  languageName: node
+  linkType: hard
+
 "core-util-is@npm:~1.0.0":
   version: 1.0.3
   resolution: "core-util-is@npm:1.0.3"
@@ -3542,7 +3600,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2":
+"css-color-keywords@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "css-color-keywords@npm:1.0.0"
+  checksum: 10c0/af205a86c68e0051846ed91eb3e30b4517e1904aac040013ff1d742019b3f9369ba5658ba40901dbbc121186fc4bf0e75a814321cc3e3182fbb2feb81c6d9cb7
+  languageName: node
+  linkType: hard
+
+"css-to-react-native@npm:3.2.0":
+  version: 3.2.0
+  resolution: "css-to-react-native@npm:3.2.0"
+  dependencies:
+    camelize: "npm:^1.0.0"
+    css-color-keywords: "npm:^1.0.0"
+    postcss-value-parser: "npm:^4.0.2"
+  checksum: 10c0/fde850a511d5d3d7c55a1e9b8ed26b69a8ad4868b3487e36ebfbfc0b96fc34bc977d9cd1d61a289d0c74d3f9a662d8cee297da53d4433bf2e27d6acdff8e1003
+  languageName: node
+  linkType: hard
+
+"csstype@npm:3.1.3, csstype@npm:^3.0.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
@@ -5793,6 +5869,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mutation-observer@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "mutation-observer@npm:1.0.3"
+  checksum: 10c0/2f010fdec4b860a6576558013bcaa691c4912e287ea1dc99ea3b9360b52586267b291e7a2a88c0f2a9b399b4ef1e116ce8c0f839f88d2d7c9b4323fb0badc321
+  languageName: node
+  linkType: hard
+
 "nano-memoize@npm:^3.0.16":
   version: 3.0.16
   resolution: "nano-memoize@npm:3.0.16"
@@ -6405,13 +6488,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-value-parser@npm:^4.2.0":
+"postcss-value-parser@npm:^4.0.2, postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
   checksum: 10c0/f4142a4f56565f77c1831168e04e3effd9ffcc5aebaf0f538eee4b2d465adfd4b85a44257bb48418202a63806a7da7fe9f56c330aebb3cac898e46b4cbf49161
   languageName: node
   linkType: hard
 
+"postcss@npm:8.4.38, postcss@npm:^8.2.6, postcss@npm:^8.4.38":
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.0.0"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/955407b8f70cf0c14acf35dab3615899a2a60a26718a63c848cf3c29f2467b0533991b985a2b994430d890bd7ec2b1963e36352b0774a19143b5f591540f7c06
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^7.0.27":
   version: 7.0.39
   resolution: "postcss@npm:7.0.39"
@@ -6422,17 +6516,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.2.6, postcss@npm:^8.4.38":
-  version: 8.4.38
-  resolution: "postcss@npm:8.4.38"
-  dependencies:
-    nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.0.0"
-    source-map-js: "npm:^1.2.0"
-  checksum: 10c0/955407b8f70cf0c14acf35dab3615899a2a60a26718a63c848cf3c29f2467b0533991b985a2b994430d890bd7ec2b1963e36352b0774a19143b5f591540f7c06
-  languageName: node
-  linkType: hard
-
 "preact@npm:^10.16.0":
   version: 10.22.0
   resolution: "preact@npm:10.22.0"
@@ -6671,6 +6754,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-data-table-component@npm:^7.6.2":
+  version: 7.6.2
+  resolution: "react-data-table-component@npm:7.6.2"
+  dependencies:
+    deepmerge: "npm:^4.3.1"
+  peerDependencies:
+    react: ">= 16.8.3"
+    styled-components: ">= 5.0.0"
+  peerDependenciesMeta:
+    styled-components:
+      optional: false
+  checksum: 10c0/870ac972362c8144efea9e1841f01276a5a5af59334a7bc955fc4a07a244ba2933fd67026ec253e2ece29bb57f69edcfdab573d524b89cb56aa780a6a4e4540f
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^18.2.0":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
@@ -6859,8 +6957,10 @@ __metadata:
     "@typescript-eslint/parser": "npm:^7.2.0"
     "@vitejs/plugin-react": "npm:^4.2.1"
     "@web3modal/wagmi": "npm:^5.0.2"
+    ahooks: "npm:^3.8.0"
     antd-mobile: "npm:^5.36.1"
     autoprefixer: "npm:^10.4.19"
+    clsx: "npm:^2.1.1"
     eslint: "npm:^8.57.0"
     eslint-plugin-react-hooks: "npm:^4.6.0"
     eslint-plugin-react-refresh: "npm:^0.4.6"
@@ -6869,16 +6969,21 @@ __metadata:
     postcss: "npm:^8.4.38"
     postcss-pxtorem: "npm:5.1.1"
     react: "npm:^18.2.0"
+    react-data-table-component: "npm:^7.6.2"
     react-dom: "npm:^18.2.0"
     react-i18next: "npm:^14.1.2"
     react-iconfont-cli: "npm:^2.0.2"
     react-router-dom: "npm:^6.23.1"
+    styled-components: "npm:^6.1.11"
+    tailwind-merge: "npm:^2.3.0"
     typescript: "npm:^5.2.2"
+    vconsole: "npm:^3.15.1"
     viem: "npm:^2.14.2"
     vite: "npm:^5.2.0"
     vite-plugin-compression: "npm:^0.5.1"
     vite-plugin-node-polyfills: "npm:^0.22.0"
     wagmi: "npm:^2.10.2"
+    web3-utils: "npm:^4.3.0"
     zustand: "npm:^4.5.2"
   languageName: unknown
   linkType: soft
@@ -7198,6 +7303,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shallowequal@npm:1.1.0":
+  version: 1.1.0
+  resolution: "shallowequal@npm:1.1.0"
+  checksum: 10c0/b926efb51cd0f47aa9bc061add788a4a650550bbe50647962113a4579b60af2abe7b62f9b02314acc6f97151d4cf87033a2b15fc20852fae306d1a095215396c
+  languageName: node
+  linkType: hard
+
 "shebang-command@npm:^2.0.0":
   version: 2.0.0
   resolution: "shebang-command@npm:2.0.0"
@@ -7474,6 +7586,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"styled-components@npm:^6.1.11":
+  version: 6.1.11
+  resolution: "styled-components@npm:6.1.11"
+  dependencies:
+    "@emotion/is-prop-valid": "npm:1.2.2"
+    "@emotion/unitless": "npm:0.8.1"
+    "@types/stylis": "npm:4.2.5"
+    css-to-react-native: "npm:3.2.0"
+    csstype: "npm:3.1.3"
+    postcss: "npm:8.4.38"
+    shallowequal: "npm:1.1.0"
+    stylis: "npm:4.3.2"
+    tslib: "npm:2.6.2"
+  peerDependencies:
+    react: ">= 16.8.0"
+    react-dom: ">= 16.8.0"
+  checksum: 10c0/1d149a51d24f779bba700c8c23ec0538b2d2b57745ccd49d1cfdc2dfce8bcea21e8ff81fed1143d1b35d127cc591717a398da72ea6671abbf705432b13e59e56
+  languageName: node
+  linkType: hard
+
+"stylis@npm:4.3.2":
+  version: 4.3.2
+  resolution: "stylis@npm:4.3.2"
+  checksum: 10c0/0410e1404cbeee3388a9e17587875211ce2f014c8379af0d1e24ca55878867c9f1ccc7b0ce9a156ca53f5d6e301391a82b0645522a604674a378b3189a4a1994
+  languageName: node
+  linkType: hard
+
 "superstruct@npm:^1.0.3":
   version: 1.0.4
   resolution: "superstruct@npm:1.0.4"
@@ -7513,6 +7652,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-merge@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "tailwind-merge@npm:2.3.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.24.1"
+  checksum: 10c0/5ea308e23c3ab1cf4c3f35f0a471753f4d3ed232d63dd7c09151a74428737321902203d90e9f0cb76ea5c3978e71b0adbc503dc455e56cda967a7674ae4b94b5
+  languageName: node
+  linkType: hard
+
 "tar@npm:^6.1.11, tar@npm:^6.1.2":
   version: 6.2.1
   resolution: "tar@npm:6.2.1"
@@ -7591,6 +7739,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.6.2":
+  version: 2.6.2
+  resolution: "tslib@npm:2.6.2"
+  checksum: 10c0/e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^2.0.0, tslib@npm:^2.3.1, tslib@npm:^2.4.1, tslib@npm:^2.5.0":
   version: 2.6.3
   resolution: "tslib@npm:2.6.3"
@@ -7921,6 +8076,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vconsole@npm:^3.15.1":
+  version: 3.15.1
+  resolution: "vconsole@npm:3.15.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.17.2"
+    copy-text-to-clipboard: "npm:^3.0.1"
+    core-js: "npm:^3.11.0"
+    mutation-observer: "npm:^1.0.3"
+  checksum: 10c0/1e62132b719e324eb7d533c94f38e9db288a9d0c9e85c8752ba742adee4e5925df10d4b43d05ba0cd264d99c32817f9f9c8f24fe391a7d8837469bd318d1b2ac
+  languageName: node
+  linkType: hard
+
 "viem@npm:^1.0.0, viem@npm:^1.1.4":
   version: 1.21.4
   resolution: "viem@npm:1.21.4"
@@ -8061,6 +8228,48 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web3-errors@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "web3-errors@npm:1.2.0"
+  dependencies:
+    web3-types: "npm:^1.6.0"
+  checksum: 10c0/3028ef33ba50f4441e02ff47f56afec226c6946bbb019dbf6260760b7d5980bb42cf9b1ff497ac3442ed498c386e5ca37a7ad20e71b3482e6b3b90b70f1b5249
+  languageName: node
+  linkType: hard
+
+"web3-types@npm:^1.6.0":
+  version: 1.7.0
+  resolution: "web3-types@npm:1.7.0"
+  checksum: 10c0/0da724b67911d76139b704406107bde624c524a04bfe749808a3e137e06078ac1c52c305eedb521b84d67363932d214ba54d7851394a8e7b425e17de5ef813e4
+  languageName: node
+  linkType: hard
+
+"web3-utils@npm:^4.3.0":
+  version: 4.3.0
+  resolution: "web3-utils@npm:4.3.0"
+  dependencies:
+    ethereum-cryptography: "npm:^2.0.0"
+    eventemitter3: "npm:^5.0.1"
+    web3-errors: "npm:^1.2.0"
+    web3-types: "npm:^1.6.0"
+    web3-validator: "npm:^2.0.6"
+  checksum: 10c0/884e553cacd8009440dcbd1ba80516fadf054b558aa974228f71e20fb2636afab94c3af0d386e88fb662245114ff5d3b251d45bb9b35f1fad8b20f6e1ef49743
+  languageName: node
+  linkType: hard
+
+"web3-validator@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "web3-validator@npm:2.0.6"
+  dependencies:
+    ethereum-cryptography: "npm:^2.0.0"
+    util: "npm:^0.12.5"
+    web3-errors: "npm:^1.2.0"
+    web3-types: "npm:^1.6.0"
+    zod: "npm:^3.21.4"
+  checksum: 10c0/28728773b9abad2531f7a4145784db56ec9ecffeb25cc9f6fe67bedeb01a1833b1a5d1a2e0f431ce4a3c8c6f13b111f35202dd8fa0829c6e2fcd68c58d1d5658
+  languageName: node
+  linkType: hard
+
 "webextension-polyfill@npm:>=0.10.0 <1.0":
   version: 0.12.0
   resolution: "webextension-polyfill@npm:0.12.0"
@@ -8350,6 +8559,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zod@npm:^3.21.4":
+  version: 3.23.8
+  resolution: "zod@npm:3.23.8"
+  checksum: 10c0/8f14c87d6b1b53c944c25ce7a28616896319d95bc46a9660fe441adc0ed0a81253b02b5abdaeffedbeb23bdd25a0bf1c29d2c12dd919aef6447652dd295e3e69
+  languageName: node
+  linkType: hard
+
 "zustand@npm:4.4.1":
   version: 4.4.1
   resolution: "zustand@npm:4.4.1"