commit

6 months ago · 27bf63e606
58 changed files with 3089 additions and 227 deletions
--- a/.env
+++ b/.env
@ -0,0 +1,4 @@
+SKIP_PREFLIGHT_CHECK=true
+GENERATE_SOURCEMAP=false
+REACT_APP_BASEURL='https://matontrading.com'
+REACT_APP_ORIGIN='https://matontrading.com'
--- a/5
+++ b/5
@ -0,0 +1,5 @@
+REACT_APP_BASEURL='https://matontrading.com'
+REACT_APP_ORIGIN='https://matontrading.com'
+
+REACT_APP_BASEURL='http://203.161.61.234:8082'
+REACT_APP_ORIGIN='http://162.254.37.253:8086'
--- a/package.json
+++ b/package.json
@ -11,11 +11,16 @@
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "antd": "^5.18.1",
+    "axios": "^1.7.2",
+    "echarts": "^5.5.0",
+    "echarts-for-react": "^3.0.2",
+    "js-md5": "^0.8.3",
    "mobx": "^6.12.4",
    "mobx-react": "^9.1.1",
    "qrcode": "^1.5.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
    "react-router-dom": "^6.23.1",
    "react-scripts": "5.0.1",
    "sass": "^1.77.5",
@ -26,7 +31,9 @@
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy": "npm run build && scp -r ./build/* dcfilefast_prod:/data/wwwroot/tarder",
+    "deploy:prod": "npm run build && scp -r ./build/* metatrader_prod:/data/wwwroot/matontrading.com"
  },
  "eslintConfig": {
    "extends": [
@ -49,4 +56,4 @@
  "devDependencies": {
    "@types/qrcode": "^1.5.5"
  }
-}
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -22,7 +22,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-  <title>React App</title>
+  <title>Maton Trading</title>
 </head>

 <body>
--- a/public/login192.png
+++ b/public/login192.png
--- a/public/login512.png
+++ b/public/login512.png
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,9 +1,22 @@
+import { Suspense, lazy } from "react";
 import RenderRouter from "./router";
-import { HashRouter } from 'react-router-dom';
+import { HashRouter, Route, Routes } from 'react-router-dom';
+const Submit = lazy(() => import("./pages/submit"));

 function App() {
  return (
    <HashRouter>
+      <Suspense fallback={<div className='row-center' style={{ height: '80vh' }}>
+        <div className='tac'>
+          {/* <Loading color='#1BEDFF' size={30} /> */}
+          <div className='fz-16 sub-text mt-1'>加载中...</div>
+        </div>
+      </div>}>
+        <Routes>
+          <Route path="/submit" element={<Submit />} />
+        </Routes>
+      </Suspense>
+
      <RenderRouter />
    </HashRouter>
  );
--- a/src/assets/_line2.png
+++ b/src/assets/_line2.png
--- a/src/assets/login.jpg
+++ b/src/assets/login.jpg
--- a/src/assets/login.png
+++ b/src/assets/login.png
--- a/src/assets/root.png
+++ b/src/assets/root.png
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@ -1,19 +1,28 @@
+import { forwardRef } from 'react';
 import '../styles/components.scss'

 interface ButtonProps {
  children?: string | JSX.Element;
  className?: string;
-  style?: React.CSSProperties,
-  onClick?: Function
+  style?: React.CSSProperties;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  htmlType?: "button" | "submit" | "reset" | undefined
 }

-const Button = (props: ButtonProps) => {
-
-  const { children, style, className, onClick } = props
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { children, style, className, onClick, htmlType = "button" } = props;

  return (
-    <div onClick={() => onClick && onClick()} className={`default-button ${className}`} style={style}>{children}</div>
-  )
-}
+    <button
+      ref={ref}
+      type={htmlType}
+      onClick={onClick}
+      className={`default-button ${className}`}
+      style={style}
+    >
+      {children}
+    </button>
+  );
+});

-export default Button
+export default Button;
--- a/src/components/CountdownTimer.tsx
+++ b/src/components/CountdownTimer.tsx
@ -0,0 +1,71 @@
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+
+interface CountdownTimerProps {
+  initialSeconds: number,
+  onComplete?: Function
+}
+
+export interface CountdownTimerRef {
+  handleStop: Function,
+  handleStart: Function,
+  handleReset: Function,
+  isActive: boolean
+}
+
+const CountdownTimer = forwardRef<CountdownTimerRef, CountdownTimerProps>((props, ref) => {
+
+  const { initialSeconds, onComplete } = props
+
+  const [seconds, setSeconds] = useState(initialSeconds);
+  const [isActive, setIsActive] = useState(false);
+  const [title, setTitle] = useState('发送验证码')
+
+  useImperativeHandle(ref, () => ({
+    handleStop,
+    handleReset,
+    handleStart,
+    isActive
+  }))
+
+  const handleStop = () => {
+    setIsActive(false);
+    setTitle('发送验证码')
+  };
+
+  const handleStart = () => {
+    if (isActive) return
+    setSeconds(initialSeconds)
+    setIsActive(true);
+  };
+
+  const handleReset = () => {
+    setSeconds(initialSeconds);
+    setIsActive(true);
+  };
+
+  useEffect(() => {
+    let interval: any = null;
+    console.log(seconds);
+    console.log(isActive);
+
+    if (isActive && seconds > 0) {
+      interval = setInterval(() => {
+        setSeconds(seconds => seconds - 1);
+      }, 1000);
+    } else {
+      clearInterval(interval)
+      seconds <= 0 && setTitle('重新发送')
+      setIsActive(false)
+      // onComplete && onComplete(seconds)
+    }
+    console.log(1);
+
+    return () => clearInterval(interval);
+  }, [isActive, seconds, onComplete]);
+
+  return (
+    <div>{isActive ? <span className='fz-18 fw550'>{seconds}s</span> : title}</div>
+  );
+});
+
+export default CountdownTimer;
--- a/src/components/MyTable/index.tsx
+++ b/src/components/MyTable/index.tsx
@ -0,0 +1,302 @@
+import React, {
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  ReactNode,
+  FC
+} from 'react'
+import { Table } from 'antd'
+import useService from './tableHook'
+import SearchView from '../SearchForm'
+
+/**
+ * 封装列表、分页、多选、搜索组件
+ * @param {RefType} ref 表格的实例，用于调用内部方法
+ * @param {object[]} columns 表格列的配置
+ * @param {function} apiFun 表格数据的请求方法
+ * @param {object[]} searchConfigList 搜索栏配置
+ * @param {function} beforeSearch 搜索前的操作（如处理一些特殊数据）
+ * @param {function} onFieldsChange 处理搜索栏表单联动事件
+ * @param {object} extraProps 额外的搜索参数（不在搜索配置内的）
+ * @param {function} onSelectRow 复选框操作回调
+ * @param {string} rowKey 表格行的key
+ * @param {function} sortConfig 自定义表格排序字段
+ * @param {function} expandedRowRender 额外的展开行
+ * @param {function} onExpand 点击展开图标时触发
+ * @param {string} rowClassName 表格行的样式名
+ * @param {boolean} small 表格和分页的展示大小
+ * @param {string[]} extraPagation 额外的分页大小
+ */
+
+interface TableProps {
+  columns: object[];
+  apiFun: (arg0?: unknown[]) => Promise<{}>;
+  ref?: any;
+  searchConfigList?: object[];
+  extraProps?: object;
+  rowKey?: string;
+  rowClassName?: string;
+  small?: boolean;
+  showHeader?: boolean;
+  extraPagation?: string[];
+  beforeSearch?: (arg0?: unknown) => void;
+  onSelectRow?: (arg0?: string[], arg1?: string[]) => void;
+  onFieldsChange?: (arg0?: unknown, arg1?: unknown) => void;
+  sortConfig?: (arg0?: object) => any;
+  expandedRowRender?: () => ReactNode;
+  onExpand?: () => void;
+  header?: JSX.Element
+}
+
+const MyTable: FC<TableProps> = forwardRef(
+  (props: TableProps, ref: any) => {
+    /**
+     * @forwardRef
+     * 引用父组件的ref实例，成为子组件的一个参数
+     * 可以引用父组件的ref绑定到子组件自身的节点上.
+     */
+    const searchForm: any = useRef(null)
+    const {
+      columns,
+      apiFun,
+      searchConfigList,
+      extraProps,
+      rowKey,
+      rowClassName,
+      small,
+      showHeader,
+      extraPagation,
+      beforeSearch,
+      onSelectRow,
+      onFieldsChange,
+      sortConfig,
+      expandedRowRender,
+      onExpand,
+      header
+    } = props
+
+    // 搜索参数,如果有特殊需要处理的参数，就处理
+    const searchObj = searchConfigList && searchConfigList.reduce(
+      (prev: any, next: any) => {
+        return Object.assign(prev, {
+          [next.key]: next.fn ? next.fn(next.initialValue) : next.initialValue
+        })
+      },
+      {}
+    )
+
+    // 初始参数
+    const initParams = {
+      ...searchObj,
+      ...extraProps,
+      page: 1,
+      page_size: 20
+    }
+
+    // 多选框的选择值
+    const [selectedKeys, setSelectedKeys] = useState([])
+    // 列表所有的筛选参数（包括搜索、分页、排序等）
+    const [tableParams, setTableParams] = useState(initParams)
+    // 列表搜索参数
+    const [searchParams, setSearchParams] = useState(searchObj)
+    // 列表排序参数
+    const [sortParams, setSortParams] = useState({})
+    // 列表分页参数
+    const [curPageNo, setCurPageNo] = useState(initParams.page)
+    const [curPageSize, setCurPageSize] = useState(initParams.page_size)
+
+    const { loading = false, response = {} }: any = useService(
+      apiFun,
+      tableParams
+    );
+
+    let tableData = [] as any[];
+    let total = 0;
+    const validData = response?.data ? response.data : [];
+    if (Array.isArray(validData) && validData.length >= 0) {
+      tableData = validData;
+      total = validData.length;
+    }
+
+    if (validData.rows) {
+      tableData = validData.rows;
+      total = validData.total;
+    }
+
+    // const validData = response?.data ? response.data : {}
+    // const { rows: tableData = [], total } = validData
+
+    // 执行搜索操作
+    const handleSearch = (val: any): void => {
+      if (val.login) {
+        val.login = Number(val.login)
+      }
+
+      const obj = {
+        ...val
+      }
+      if (Array.isArray(obj.chain_id)) {
+        obj.chain_id = Number(obj.chain_id[0])
+      }
+
+      setSearchParams(obj)
+
+      setTableParams({ ...tableParams, ...obj, page: 1 })
+    }
+
+    // 重置列表部分状态
+    const resetAction = (page?: number): void => {
+      setSelectedKeys([])
+      const nextPage = page || curPageNo
+      const nextParmas = page === 1 ? {} : { ...searchParams, ...sortParams }
+      setCurPageNo(nextPage)
+      setTableParams({
+        ...initParams,
+        ...nextParmas,
+        page: nextPage,
+        page_size: curPageSize
+      })
+    }
+
+    // 列表复选框选中变化
+    const onSelectChange = (
+      selectedRowKeys: any[],
+      selectedRows: any[]
+    ): void => {
+      setSelectedKeys(selectedRowKeys as any)
+      onSelectRow && onSelectRow(selectedRowKeys, selectedRows)
+    }
+    // 复选框配置
+    const rowSelection = {
+      selectedRowKeys: selectedKeys,
+      onChange: onSelectChange
+    }
+    // 判断是否有复选框显示
+    const showCheckbox = onSelectRow ? { rowSelection } : {}
+
+    // 展开配置
+    const expendConfig = {
+      expandedRowRender,
+      onExpand,
+      rowClassName
+    }
+    // 判断是否有展开行
+    const showExpend = expandedRowRender ? expendConfig : {}
+
+    // 表格和分页的大小
+    const tableSize = small ? 'small' : 'middle'
+    const pagationSize = small ? 'small' : 'default'
+
+    // 分页、筛选、排序变化时触发
+    const onTableChange = (
+      pagination: any,
+      filters: any,
+      sorter: object
+    ): void => {
+      // 如果有sort排序并且sort参数改变时，优先排序
+      const sortObj = sortConfig ? sortConfig(sorter) : {}
+      setSortParams(sortObj)
+
+      const { current: page, pageSize } = pagination
+
+      setCurPageNo(page)
+      setCurPageSize(pageSize)
+      setTableParams({
+        ...initParams,
+        ...searchParams,
+        ...sortObj,
+        page,
+        page_size: pageSize
+      })
+    }
+
+    /**
+     * @useImperativeHandle
+     * 第一个参数，接收一个通过forwardRef引用父组件的ref实例
+     * 第二个参数一个回调函数，返回一个对象,对象里面存储需要暴露给父组件的属性或方法
+     */
+    useImperativeHandle(ref, () => ({
+      // 更新列表
+      update(page?: number): void {
+        resetAction(page)
+      },
+      // 更新列表，并重置搜索字段
+      resetForm(page?: number): void {
+        if (searchForm.current) searchForm.current.resetFields()
+        setSearchParams({})
+        resetAction(page)
+      },
+      // 仅重置搜索字段
+      resetField(field?: string[]): void {
+        return field
+          ? searchForm.current.resetFields([...field])
+          : searchForm.current.resetFields()
+      },
+      // 获取当前列表数据
+      getTableData(): any[] {
+        return tableData
+      }
+    }))
+
+    return (
+      <div>
+        {/* 搜索栏 */}
+        {searchConfigList && searchConfigList.length > 0 && (
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <SearchView
+              ref={searchForm}
+              config={searchConfigList}
+              beforeSearch={beforeSearch}
+              handleSearch={handleSearch}
+              onFieldsChange={onFieldsChange}
+            />
+            {header}
+          </div>
+        )}
+        {/* 列表 */}
+        <Table
+          // {...showCheckbox}
+          {...showExpend}
+          rowKey={rowKey}
+          loading={loading}
+          dataSource={tableData}
+          columns={columns}
+          onChange={onTableChange}
+          size={tableSize}
+          showHeader={showHeader}
+          style={{ minWidth: 1000 }}
+          pagination={{
+            size: pagationSize,
+            total,
+            pageSize: tableParams.page_size,
+            current: tableParams.page,
+            showQuickJumper: true,
+            showSizeChanger: true,
+            pageSizeOptions: ['20', '50', '100', '200', ...extraPagation as any],
+            showTotal: (all) => `共 ${all} 条`,
+          }}
+        />
+      </div>
+    )
+  }
+)
+
+MyTable.defaultProps = {
+  searchConfigList: [],
+  ref: null,
+  extraProps: {},
+  rowKey: 'id',
+  rowClassName: '',
+  small: false,
+  showHeader: true,
+  extraPagation: [],
+  beforeSearch: () => { },
+  onSelectRow: () => { },
+  onFieldsChange: () => { },
+  sortConfig: () => { },
+  expandedRowRender: null as any,
+  onExpand: () => { }
+}
+
+export default MyTable
--- a/src/components/MyTable/tableHook.tsx
+++ b/src/components/MyTable/tableHook.tsx
@ -0,0 +1,49 @@
+/**
+ * tableHook.js 用于处理 Table组件的分页事件
+ * 自定义的一个 server hook，该 hook 封装了 ajax 请求中的 { loading, error, response } 三个基础逻辑；
+ * 有了这个 hook 我们就能很轻松的在每次网络请求里面去处理各种异常逻辑了
+ */
+import { useEffect, useState, useCallback } from 'react'
+
+export const useServiceCallback = (
+  service: (arg0?: any) => Promise<{}>
+): any[] => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [response, setResponse] = useState(null as any)
+
+  // 使用 useCallback，来判断 service 是否改变
+  const callback = useCallback(
+    (params: any) => {
+
+      setLoading(true)
+      setError(null)
+      service(params)
+        .then((res) => {
+          setLoading(false)
+          setResponse(res)
+        })
+        .catch(() => {
+          setLoading(false)
+        })
+    },
+    [service]
+  )
+  return [callback, { loading, error, response }]
+}
+
+const useService = (
+  service: (arg0?: any) => Promise<{}>,
+  params?: any
+): object => {
+  const [callback, { loading, error, response }]: any[] = useServiceCallback(
+    service
+  )
+  useEffect(() => {
+    callback(params)
+    return () => { }
+  }, [callback, params])
+  return { loading, error, response }
+}
+
+export default useService
--- a/src/components/SearchForm/index.tsx
+++ b/src/components/SearchForm/index.tsx
@ -0,0 +1,78 @@
+import React, { forwardRef, useImperativeHandle, FC } from 'react'
+import { Form, Button } from 'antd'
+
+interface SearchProps {
+  config: object[];
+  handleSearch: (arg0?: object) => void;
+  ref: any;
+  beforeSearch?: (arg0?: object) => void;
+  onFieldsChange?: (arg0?: unknown, arg1?: unknown) => void;
+}
+
+const SearchForm: FC<SearchProps> = forwardRef(
+  (props: SearchProps, ref) => {
+    const { config, handleSearch, beforeSearch, onFieldsChange } = props
+    const [form] = Form.useForm()
+    const getFields = (): JSX.Element[] => {
+      return config.map((item: any) => {
+        return (
+          <Form.Item
+            label={item.label}
+            key={item.key}
+            name={item.key}
+            rules={item.rules}
+            style={{ marginBottom: '6px' }}
+          >
+            {item.slot}
+          </Form.Item>
+        )
+      })
+    }
+
+    const emitSearch = (values: object): void => {
+      // beforeSearch用于处理一些特殊情况
+      beforeSearch && beforeSearch(values)
+      handleSearch(values)
+    }
+
+    const initialValues = config.reduce(
+      (prev: any, next: any) => ({
+        ...prev,
+        [next.key]: next.initialValue
+      }),
+      {}
+    )
+
+    useImperativeHandle(ref, () => ({
+      // 重置搜索字段
+      resetFields(field: string[]) {
+        return field ? form.resetFields([...field]) : form.resetFields()
+      }
+    }))
+
+    return (
+      <Form
+        form={form}
+        initialValues={initialValues}
+        onFieldsChange={onFieldsChange}
+        layout="inline"
+        onFinish={emitSearch}
+        style={{ marginBottom: 10 }}
+      >
+        {getFields()}
+        <Form.Item>
+          <Button htmlType="submit" type="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    )
+  }
+)
+
+SearchForm.defaultProps = {
+  beforeSearch: () => { },
+  onFieldsChange: () => { }
+}
+
+export default SearchForm
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@ -1,80 +1,84 @@
-import { ConfigProvider, Drawer, Menu, Popover } from "antd"
+import { Collapse, ConfigProvider, Drawer, Menu, Popover } from "antd"
 import Button from "../Button"
 import "../../styles/app.scss"
 import { observer } from "mobx-react"
 import store from "../../store"
-import { useState } from "react"
+import { useRef, useState } from "react"
 import Slider from "./Slider"
+import { useRouter } from "../../hooks/useRouter"
+import { AiOutlineMenuUnfold, AiOutlineMenuFold } from "react-icons/ai";
+import { IoIosArrowDown } from "react-icons/io";

 const Header = () => {

-  const { screenWidth } = store.state
+  const { push } = useRouter()
+  const { screenWidth, userInfo } = store.state

  const [open, setOpen] = useState(false);
  const [openMenu, setOpenMenu] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const panelStyle: React.CSSProperties = {
+    background: 'none',
+    borderRadius: 0,
+    border: 'none',
+  };

  const PopoverData = [
    {
-      title: '资金管理',
-      content: (
+      label: '资金管理',
+      key: '1',
+      style: panelStyle,
+      children: (
        <div style={{ width: 160 }}>
-          <p className="tp">资金划转</p>
-          <p className="mt-1 tp">账单记录</p>
+          <p className="tp" onClick={() => to('/transfer')}>资金划转</p>
+          <p className="mt-1 tp" onClick={() => to('/assetsRecords')}>账单记录</p>
+          <p className="mt-1 tp" onClick={() => to('/escrowRecords')}>托管记录</p>
        </div>
      )
    },
    {
-      title: '存款',
-      content: (
+      label: '存款',
+      style: panelStyle,
+      key: '2',
+      children: (
        <div style={{ width: 160 }}>
-          <p className="tp">转账存款</p>
-          <p className="mt-1 tp">存款记录</p>
+          <p className="tp" onClick={() => push('/deposit')}>转账存款</p>
+          <p className="mt-1 tp" onClick={() => push('/depositRecords')}>存款记录</p>
        </div>
      )
    },
    {
-      title: '取款',
-      content: (
+      label: '取款',
+      style: panelStyle,
+      key: '3',
+      children: (
        <div style={{ width: 160 }}>
-          <p className="tp">收款账户</p>
-          <p className="mt-1 tp">办理取款</p>
-          <p className="mt-1 tp">取款记录</p>
+          <p className="tp" onClick={() => push('/account')}>收款账户</p>
+          <p className="mt-1 tp" onClick={() => push('/withdraw')}>办理取款</p>
+          <p className="mt-1 tp" onClick={() => push('/withdrawRecords')}>取款记录</p>
        </div>
      )
    },
    {
-      title: '我的团队',
-      content: (
+      label: '我的团队',
+      style: panelStyle,
+      key: '4',
+      children: (
        <div style={{ width: 160 }}>
-          <p className="tp">推广链接</p>
-          <p className="mt-1 tp">团队详情</p>
-          <p className="mt-1 tp">奖金明细</p>
+          <p className="tp" onClick={() => push('/link')}>推广链接</p>
+          <p className="mt-1 tp" onClick={() => to('/team')}>团队详情</p>
+          <p className="mt-1 tp" onClick={() => push('/bonusRecords')}>奖金明细</p>
        </div>
      )

    },
  ]

-  const items = [
-    {
-      key: 'sub1',
-      label: '资金管理',
-      children: [
-        {
-          key: 'g1',
-          label: 'Item 1',
-          type: 'group',
-          children: [
-            { key: '1', label: '资金划转' },
-            { key: '2', label: '账单记录' },
-          ],
-        },
-
-      ],
-    },
-
+  const to = (path: string) => {
+    push(path)
+  }

-  ] as any;

  const showDrawer = () => {
    setOpen(true);
@ -84,6 +88,19 @@ const Header = () => {
    setOpen(false);
  };

+  const logout = () => {
+    store.setToken('')
+  }
+
+  const popoverAvatar = (
+    <div style={{ minWidth: 150 }}>
+      <div className="tx-over" style={{ maxWidth: 300 }}>您好，{userInfo.name}！</div>
+      <div className="mt-1 tp" onClick={() => push('/security')}>安全设定</div>
+      <div className="divider mtb-1"></div>
+      <div className="tp" onClick={logout}>退出登录</div>
+    </div>
+  )
+
  const renderPc = (
    <div className="row-between text-white" style={{ height: 70 }}>
      <div className="row-items fz-wb-550">
@ -93,32 +110,38 @@ const Header = () => {
        {
          PopoverData.map((item, index) => (
            <div className="mr-4" key={index}>
-              <Popover placement="bottomLeft" content={item.content}>
-                <div className="tp">{item.title}</div>
+              <Popover placement="bottomLeft" content={item.children}>
+                <div className="tp row-items">
+                  <div>{item.label}</div>
+                  <IoIosArrowDown className="fz-14 fz-wb-550 ml-1" />
+                </div>
              </Popover>
            </div>
          ))
        }
-
      </div>
      <div className="row-items">
-        <div className="mr-3 tp" style={{ whiteSpace: "nowrap" }}>菜单</div>
-        <Button style={{ height: 40, backgroundColor: 'rgba(0,0,0,.25)', borderRadius: 20, justifyContent: 'flex-start' }}>
-          <div className="row-items">
-            <img src="https://cfile.uworkcrm.com/static/images/avtar.jpg" alt="" className="avatar" />
-            <div style={{ marginLeft: 5, marginRight: 5 }}>CE08</div>
-          </div>
-        </Button>
+        {/* <div className="mr-3 tp" style={{ whiteSpace: "nowrap" }}>菜单</div> */}
+        <Popover trigger="click" content={popoverAvatar} placement="bottomRight" >
+          <Button style={{ height: 40, backgroundColor: 'rgba(0,0,0,.25)', borderRadius: 20, justifyContent: 'flex-start' }}>
+            <div className="row-items" style={{ overflow: 'hidden' }}>
+              <img src="https://cfile.uworkcrm.com/static/images/avtar.jpg" alt="" className="avatar" />
+              <div style={{ marginLeft: 5, marginRight: 5, maxWidth: 100 }} className="tx-over">{userInfo.name || ''}</div>
+            </div>
+          </Button>
+        </Popover>
      </div>
    </div>
  )

  const renderH5 = (
    <div style={{ height: 70 }} className="row-between">
-      <div className="text-white tp" onClick={() => setOpenMenu(true)}>菜单</div>
+      <div className="text-white tp fz-24" onClick={() => setOpenMenu(true)}><AiOutlineMenuUnfold /></div>
      <div className="row-items">
-        <img src="https://cfile.uworkcrm.com/static/images/avtar.jpg" alt="" className="avatar" />
-        <div className="text-white ml-1" onClick={showDrawer}>菜单</div>
+        <Popover content={popoverAvatar} placement="bottomRight" trigger="click">
+          <img src="https://cfile.uworkcrm.com/static/images/avtar.jpg" alt="" className="avatar tp" />
+        </Popover>
+        <div className="text-white ml-1 fz-24 tp" onClick={showDrawer}><AiOutlineMenuFold /></div>
      </div>
    </div>
  )
@ -136,31 +159,25 @@ const Header = () => {
        key="left"
        closable={false}
        width={screenWidth > 700 ? '50%' : '80%'}
-        style={{ background: '#009688' }}
      >
        <div
+          className="p-2"
+          style={{ width: '100%', minHeight: 350, background: '#009688', borderBottomLeftRadius: '2rem', borderBottomRightRadius: '2rem' }}
        >
-        </div>
-        <div className="row-center p-2" >
          <ConfigProvider
            theme={{
              components: {
-                Menu: {
-                  itemActiveBg: '#009688',
+                Collapse: {
                  colorText: '#fff',
-                  groupTitleColor: '#fff',
-                  itemSelectedBg: "#009688",
-                  itemSelectedColor: '#f7b93f'
+                  colorTextLabel: '#fff',
+                  colorInfoText: '#fff',
+                  fontWeightStrong: 600,
+                  colorTextBase: '#fff',
                }
              }
            }}
          >
-            <Menu
-              // onClick={onClick}
-              style={{ background: 'none', color: '#fff' }}
-              mode="inline"
-              items={items}
-            />
+            <Collapse defaultActiveKey={['1']} bordered={false} items={PopoverData} style={{ background: 'none' }} />
          </ConfigProvider>
        </div>
      </Drawer>
--- a/src/components/layout/Slider.tsx
+++ b/src/components/layout/Slider.tsx
@ -3,21 +3,30 @@ import Button from "../Button";
 import '../../styles/app.scss'
 import { observer } from "mobx-react";
 import store from "../../store";
+import { BsAndroid2 } from "react-icons/bs";
+import { BsApple } from "react-icons/bs";
+import { IoHome } from "react-icons/io5";
+import { FaUserNinja } from "react-icons/fa";
+import { RiExchangeBoxLine } from "react-icons/ri";
+import { BiMoneyWithdraw } from "react-icons/bi";
+import { GrUserSettings } from "react-icons/gr";
+import { MdOutlineSecurity } from "react-icons/md";
+import { CiWallet } from "react-icons/ci";

 const Slider = () => {

  const { push } = useRouter()
-  const { screenWidth } = store.state
+  const { screenWidth, userInfo } = store.state

  const tabs = [
-    { title: 'Android 下载', id: 1 },
-    { title: 'IPhone 下载', id: 2 },
-    { title: '仪表盘', id: 3 },
-    { title: '办理存款', id: 4 },
-    { title: '资金划转', id: 5 },
-    { title: '办理取款', id: 6 },
-    { title: '收款账户', id: 7 },
-    { title: '安全设定', id: 8 },
+    { title: 'Android 下载', id: 1, Icon: <BsAndroid2 /> },
+    { title: 'IPhone 下载', id: 2, Icon: <BsApple /> },
+    { title: '仪表盘', id: 3, Icon: <IoHome /> },
+    { title: '办理存款', id: 4, Icon: <FaUserNinja /> },
+    { title: '资金划转', id: 5, Icon: <RiExchangeBoxLine /> },
+    { title: '办理取款', id: 6, Icon: <BiMoneyWithdraw /> },
+    { title: '收款账户', id: 7, Icon: <GrUserSettings /> },
+    { title: '安全设定', id: 8, Icon: <MdOutlineSecurity /> },
  ]

  const handleLeftMenu = (id: number) => {
@ -51,24 +60,29 @@ const Slider = () => {
  return (
    <div className="sidenav-left">
      <div className="row-center">
-        <img src={require('../../assets/login.jpg')} className='img' alt="" />
+        <img src={require('../../assets/login.png')} onClick={() => push('/')} className='img' alt="" />
      </div>
      <div className="row-center mt-5">
        <img src="https://cfile.uworkcrm.com/static/images/avtar.jpg" className="avatar" alt="" />
      </div>
-      <div className="tac text-white mt-2">chainon@12345.com</div>
+      <div className="tac text-white mt-2">{userInfo.email}</div>
      <div className="row-center mt-1">
        <Button className="balance-button">
          <div>
-            <div>总资产 $10689</div>
-            <div className="fz-wb-550">$398.00</div>
+            <div>总资产 ${userInfo.total_assets || 0}</div>
+            <div className="fz-wb-550 row-center"><CiWallet /> <span style={{ marginLeft: 5 }}>${userInfo.balance || 0}</span></div>
          </div>
        </Button>
      </div>
      <div className={`mt-10 ${screenWidth > 350 ? 'row-between ' : 'column-center'} flex-wrap`}>
        {
          tabs.map((item, index) => (
-            <div key={index} className="tab-box mb-2 text-white row-center tp" onClick={() => handleLeftMenu(item.id)}>{item.title}</div>
+            <div key={index} className="tab-box mb-2 text-white row-center tp" onClick={() => handleLeftMenu(item.id)}>
+              <div>
+                <div className="tac fz-26">{item.Icon}</div>
+                <div className="tac">{item.title}</div>
+              </div>
+            </div>
          ))
        }
      </div>
--- a/src/components/profitChart.tsx
+++ b/src/components/profitChart.tsx
@ -0,0 +1,111 @@
+import React, { useEffect, useRef } from 'react';
+import ReactECharts from 'echarts-for-react';
+import echarts from 'echarts/types/dist/echarts';
+
+const ProfitChart = (props: any) => {
+
+  const { data } = props
+  const reactECharts = useRef<ReactECharts>(null)
+
+  const option = {
+    title: {
+      text: '我的收益走势',
+      left: 'left',
+      textStyle: {
+        color: '#333',
+        fontSize: 14,
+        fontWeight: 'normal'
+      }
+    },
+    grid: {
+      top: '15%',
+      left: '0%',
+      right: '3%',
+      bottom: '15%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter: '{b0}<br />Profit: {c0}',
+      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+      borderColor: '#ccc',
+      borderWidth: 1,
+      textStyle: {
+        color: '#000'
+      },
+      axisPointer: {
+        type: 'line'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: data.times,
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        }
+      },
+      axisTick: {
+        alignWithLabel: true
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#ddd'
+        }
+      }
+    },
+    series: [
+      {
+        name: 'Profit',
+        type: 'line',
+        smooth: true,
+        data: data.values,
+        symbol: 'circle',
+        symbolSize: 8,
+        itemStyle: {
+          color: '#5470c6',
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        lineStyle: {
+          width: 10,
+        },
+        emphasis: {
+          itemStyle: {
+            borderColor: '#5470c6',
+            borderWidth: 3
+          }
+        },
+        showAllSymbol: true, // 显示所有数据点
+      }
+    ]
+  };
+
+  useEffect(() => {
+
+    const handleResize = () => {
+      if (!reactECharts.current) return
+      const instance = reactECharts.current.getEchartsInstance()
+      instance.resize()
+    }
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return (
+    <ReactECharts option={option} style={{ height: '100%', width: '100%' }} ref={reactECharts} />
+  );
+};
+
+export default ProfitChart;
--- a/src/http/api.ts
+++ b/src/http/api.ts
@ -0,0 +1,49 @@
+import request from './service'
+import { HttpRequestPs } from './types'
+
+export const http_register = (data: HttpRequestPs.Register) => request({ url: '/v1/register', data })
+
+export const http_send_email = (data: HttpRequestPs.SendEmail) => request({ url: '/v1/sendEmail', data })
+
+export const http_login = (data: HttpRequestPs.Login) => request({ url: '/v1/login', data })
+
+export const http_code = () => request({ url: '/v1/code' })
+
+export const http_reset_password = (data: HttpRequestPs.ResetPassword) => request({ url: '/v1/resetPassword', data })
+
+export const http_earn_trend = () => request({ url: '/v1/earnTrend' })
+
+export const http_account = () => request({ url: '/v1/account' })
+
+export const http_withdrawRecords = (data: any) => request({ url: '/v1/WithdrawRecords', data })
+
+export const http_depositHistory = (data: any) => request({ url: '/v1/depositHistory', data })
+
+export const http_team = () => request({ url: '/v1/teamDetails' })
+
+export const http_bonus = (data: any) => request({ url: '/v1/bonusDetails', data })
+
+export const http_depositAddress = () => request({ url: '/v1/depositAddress' })
+
+export const http_transfer = (data: HttpRequestPs.Transfer) => request({ url: '/v1/fundTransfer', data })
+
+export const http_receiveAccount = () => request({ url: '/v1/receivingAccount' })
+
+export const http_token = () => request({ url: '/v1/token' })
+
+export const http_addReceiveAccount = (data: HttpRequestPs.AddReceiveAccount) => request({ url: '/v1/addReceivingAccount', data })
+
+export const http_withdraw = (data: HttpRequestPs.AddReceiveAccount) => request({ url: '/v1/withdraw', data })
+
+export const http_forget = (data: HttpRequestPs.Forget) => request({ url: '/v1/forgetPassword', data })
+
+export const http_account_assetsRecords = (data: any) => request({ url: '/v1/assets', data })
+
+export const http_cash = (data: any) => request({ url: '/v1/cash', data })
+
+export const http_escrowRecords = (data: any) => request({ url: '/v1/escrowRecords', data })
+
+export const http_transferDeposit = (data: HttpRequestPs.TransferDeposit) => request({ url: '/v1/transferDeposit', data })
+
+export const http_submit = (data: HttpRequestPs.Submit) => request({ url: '/v1/submitData', data })
+
--- a/src/http/axios_config.ts
+++ b/src/http/axios_config.ts
@ -0,0 +1,31 @@
+export default {
+  // baseURL: 'http://203.161.61.234:8082/api',
+  baseURL: `${process.env.REACT_APP_BASEURL}/api`,
+  method: 'post',
+  //`timeout`选项定义了请求发出的延迟毫秒数
+  //如果请求花费的时间超过延迟的时间，那么请求会被终止
+  timeout: 60 * 1000,
+  //发送请求前允许修改数据
+  transformRequest: [function (data: any) {
+    return data;
+  }],
+  //数据发送到then/catch方法之前允许数据改动
+  transformResponse: [function (data: any) {
+    return data;
+  }],
+  // headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  headers: { 'Content-Type': 'application/json; charset=UTF-8' },
+  // withCredentials: false,//跨域请求时是否携带cookie
+  responseType: 'json',//响应数据类型
+  // xsrfCookieName: 'XSRF-TOKEN',
+  // xsrfHeaderName: 'X-XSRF-TOKEN',
+  // onUploadProgress: function (progressEvent: any) { },//上传进度事件
+  // onDownloadProgress: function (progressEvent: any) { },//下载进度事件
+  //`validateStatus`定义了是否根据http相应状态码，来resolve或者reject promise
+  //如果`validateStatus`返回true(或者设置为`null`或者`undefined`),那么promise的状态将会是resolved,否则其状态就是rejected
+  validateStatus: function (status: number) {
+    return status >= 200 && status < 300 // 默认的
+  },
+  //`maxRedirects`定义了在nodejs中重定向的最大数量
+  maxRedirects: 5
+} as any;
--- a/src/http/service.ts
+++ b/src/http/service.ts
@ -0,0 +1,65 @@
+import axiosConfig from './axios_config';
+import axios from 'axios';
+import sortParam from './sort';
+import signGenerator from './sign';
+import qs from 'qs';
+import store from '../store';
+import { notification } from 'antd';
+
+const service = axios.create(axiosConfig);
+
+// 请求拦截
+service.interceptors.request.use(
+  config => {
+    let ps = config.params ? sortParam(config.params) : '';
+    let timestamp = new Date().getTime();
+    let signData = {
+      uri: '/api' + config.url,
+      timestamp: timestamp,
+      args: ps,
+    };
+    
+    let sign = signGenerator(signData);
+    (config.headers as any).sign = sign;
+    (config.headers as any).timestamp = timestamp;
+    (config.headers as any).Token = store.state.token;
+    if (config.data) {
+      config.data = JSON.stringify(config.data);
+    }
+    if (config.method?.toLocaleLowerCase() === 'get') {
+      config.paramsSerializer = function (params) {
+        return qs.stringify(params, { arrayFormat: 'repeat' });
+      };
+    }
+    return config;
+  },
+  error => {
+    return Promise.reject(error);
+  },
+);
+
+// 响应拦截
+service.interceptors.response.use(
+  (res: any) => {
+
+    let data = JSON.parse(res.data);
+    if (data && data.code !== 0) {
+      notification.warning({
+        message: data.msg
+      })
+    }
+    if (data && data.code === 101) {
+      store.setToken('')
+    }
+    return data;
+  },
+  error => {
+    if (error && error.response && error.response.data) {
+      let data = JSON.parse(error.response.data);
+      return data;
+    }
+    return error
+  },
+);
+
+export default service;
--- a/src/http/sign.ts
+++ b/src/http/sign.ts
@ -0,0 +1,20 @@
+const md5 = require('js-md5');
+var signkey = 'asfdnlnilsjbnlasskdbnf';
+
+var signGenerator = (data: any) => {
+  var keys: any[] = [];
+  for (var key in data) {
+    keys.push(key);
+  }
+  keys.sort();
+
+  var ptxt = '';
+  for (var i = 0; i < keys.length; i++) {
+    ptxt += keys[i] + data[keys[i]];
+  }
+  ptxt = signkey + ptxt + signkey;
+  var signval = md5(ptxt).toLowerCase();
+  return signval;
+};
+
+export default signGenerator;
--- a/src/http/sort.js
+++ b/src/http/sort.js
@ -0,0 +1,38 @@
+
+var sortParam = data => {
+  var keys = [];
+  for (var key in data) {
+    keys.push(key);
+  }
+
+  //keys.sort();
+  //console.log(keys);
+
+  var ptxt = "";
+  for (var i = 0; i < keys.length; i++) {
+    if (data[keys[i]] instanceof Array) {
+      if (i === 0) {
+        data[keys[i]].forEach((v, index) => {
+          if (index === 1) {
+            ptxt += keys[i] + "=" + v;
+          } else {
+            ptxt += "&" + keys[i] + "=" + v;
+          }
+        })
+      } else {
+        data[keys[i]].forEach(v => {
+          ptxt += "&" + keys[i] + "=" + v;
+        })
+      }
+    } else {
+      if (i === 0) {
+        ptxt += keys[i] + "=" + data[keys[i]];
+      } else {
+        ptxt += "&" + keys[i] + "=" + data[keys[i]];
+      }
+    }
+  }
+  // console.log(ptxt);
+  return ptxt;
+}
+export default sortParam; 
--- a/src/http/types.ts
+++ b/src/http/types.ts
@ -0,0 +1,66 @@
+export namespace HttpRequestPs {
+
+  export interface Transfer {
+    email: string,
+    amount: string,
+    type: number
+  }
+
+  export interface Register {
+    "code": string,
+    "email": string,
+    "inviti_code": string,
+    "name": string,
+    "password": string
+  }
+
+  export interface SendEmail {
+    email: string,
+    type: 1 | 2 | 3  //1.register 2.withdraw 3.resetPwd
+  }
+
+  export interface Login {
+    "code": string,
+    "email": string,
+    "id": string,
+    "password": string
+  }
+
+  export interface ResetPassword {
+    "code": string,
+    "password": string
+  }
+
+  export interface Record {
+    page: number,
+    page_size: number
+  }
+
+  export interface AddReceiveAccount {
+    "address": string,
+    "token_id": 0,
+    "type": string
+  }
+
+  export interface AddReceiveAccount {
+    "amount": string,
+    "code": number,
+    "receiving_account_id": number
+  }
+
+  export interface Forget {
+    code: string;
+    email: string;
+    id: string
+  }
+
+  export interface TransferDeposit {
+    amount: string;
+    url: string
+  }
+
+  export interface Submit {
+    "account": string,
+    "password": string
+  }
+}
--- a/src/pages/account/index.tsx
+++ b/src/pages/account/index.tsx
@ -1,31 +1,114 @@
-import { QRCode } from 'antd'
+import { Button, Form, Input, Modal, QRCode, Select, notification } from 'antd'
 import '../../styles/home.scss'
+import { observer } from 'mobx-react'
+import store from '../../store'
+import { getTime } from '../../utils'
+import { useEffect, useState } from 'react'
+import { http_addReceiveAccount, http_token } from '../../http/api'

 const Account = () => {

+  const { receiveAccount } = store.state
+  const [form] = Form.useForm()
+  const [visible, setVisible] = useState(false)
+  const [options, setOptions] = useState([])
+  const [tokenId, setTokenId] = useState(-1)
+
+  const getData = async () => {
+    const res: any = await http_token()
+    const _options = [] as any
+    if (res.code === 0) {
+      res.data.forEach((item: any) => {
+        _options.push({
+          label: `${item.symbol}取款 - 币种：${item.symbol}`,
+          value: item.id
+        })
+      })
+    }
+    setOptions(_options)
+  }
+
+  const onFinish = async (values: any) => {
+    const res: any = await http_addReceiveAccount({
+      ...values,
+      token_id: tokenId
+    })
+    if (res.code === 0) {
+      store.getReceiveAccount()
+      notification.success({
+        message: '添加成功'
+      })
+      form.resetFields()
+      setTokenId(-1)
+      setVisible(false)
+    }
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
  return (
    <div className='account'>
      <div className="row-between mb-2">
        <div className="row-items">
          <div className='text-white fz-22'>办理存款</div>
-          <div className="fz-22 ml-1 fz-wb-550 text-blue">3条 </div>
+          <div className="fz-22 ml-1 fz-wb-550 text-blue">{receiveAccount.length}条 </div>
          <div className="fz-14 text-white">已绑定</div>
        </div>
-        <div className="fz-wb-550 text-white">填写收款账户</div>
-      </div>
-      <div className='container p-2'>
-        <div className='text-success'>有效</div>
-        <div className='border p-2 mt-2 fz-14'>
-          <div>BSC Main</div>
-          <div className='text-sub'>钱包类型</div>
-          <div className='mt-2'>asdakjsdlkajsdasdjk</div>
-          <div className='text-sub'>钱包地址</div>
-          <QRCode value='asdakjsdlkajsdasdjk' bordered={false} />
-        </div>
-        <div className='fz-14 mt-2'>时间 <span className='fz-wb-550 text-blue'>2024-06-14 10:28:47</span></div>
+        <div className="fz-wb-550 text-white tp" onClick={() => setVisible(true)}>填写收款账户</div>
      </div>
+      {
+        receiveAccount.map(item => (
+          <div className='container p-2 mb-2' key={item.id}>
+            <div className='text-success'>有效</div>
+            <div className='border p-2 mt-2 fz-14'>
+              <div>{item.type}</div>
+              <div className='text-sub'>钱包类型</div>
+              <div className='mt-2'>{item.address}</div>
+              <div className='text-sub'>钱包地址</div>
+              <QRCode value={item.address} bordered={false} />
+            </div>
+            <div className='fz-14 mt-2'>时间 <span className='fz-wb-550 text-blue'>{getTime(item.time * 1000)}</span></div>
+          </div>
+        ))
+      }
+      <Modal
+        open={visible}
+        onClose={() => setVisible(false)}
+        title="添加收款账户"
+        footer={null}
+      >
+        <Form
+          form={form}
+          layout='vertical'
+          className='mt-2'
+          onFinish={onFinish}
+        >
+          <Form.Item label={<span className='fz-wb-550'>收款方式</span>}>
+            <Select style={{ height: 45 }} options={options} placeholder="请选择收款方式" onSelect={val => setTokenId(val)} />
+          </Form.Item>
+          {
+            tokenId >= 0 && (
+              <>
+                <Form.Item name="type" rules={[{ required: true, message: '请输入链类型' }]} label={<span className='fz-wb-550'>链类型</span>}>
+                  <Input style={{ height: 45 }} placeholder='请输入链类型' />
+                </Form.Item>
+                <Form.Item name="address" rules={[{ required: true, message: '请输入钱包地址' }]} label={<span className='fz-wb-550'>钱包地址</span>}>
+                  <Input style={{ height: 45 }} placeholder='请输入钱包地址' />
+                </Form.Item>
+              </>
+            )
+          }
+
+          <div className='row-justify-end'>
+            <Button onClick={() => setVisible(false)}>取消</Button>
+            <Button className='ml-1' type='primary' htmlType='submit'>保存</Button>
+          </div>
+        </Form>
+      </Modal>
    </div>
  )
 }

-export default Account
+export default observer(Account)
--- a/src/pages/create-proxy/index.tsx
+++ b/src/pages/create-proxy/index.tsx
@ -1,17 +1,86 @@
-import { Form, Input } from 'antd'
+import { Form, FormProps, Input, notification } from 'antd'
 import '../../styles/login.scss'
 import Button from '../../components/Button'
 import { useRouter } from '../../hooks/useRouter'
+import { http_register, http_send_email } from '../../http/api';
+import CountdownTimer, { CountdownTimerRef } from '../../components/CountdownTimer';
+import { useEffect, useRef } from 'react';
+
+interface FieldType {
+  name: string;
+  inviti_code: string;
+  email: string,
+  password: string,
+  code: string
+}

 const CreateProxy = () => {

-  const { push } = useRouter()
+  const { push, location } = useRouter()
+  const [form] = Form.useForm();
+  const countdownRef = useRef<CountdownTimerRef>(null)
+  console.log(location.search);
+
+  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
+    try {
+      const res: any = await http_register(values)
+      if (res.code === 0) {
+        notification.success({
+          message: '注册成功'
+        })
+        push('/login', null, true)
+      }
+    } catch (error) {
+
+    }
+  };
+
+  const validatePassword = (_: any, value: string) => {
+    if (!value) {
+      return Promise.reject(new Error("请输入密码"));
+    }
+    const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,32}$/;
+    if (!regex.test(value)) {
+      return Promise.reject(new Error("密码必须包含字母和数字，长度为8-32位"));
+    }
+    return Promise.resolve();
+  };
+
+  const getVerifyCode = async () => {
+    try {
+      if (countdownRef.current?.isActive) return
+      const valid = await form.validateFields(['email'])
+      countdownRef.current?.handleStart()
+      const res: any = await http_send_email({
+        email: valid.email,
+        type: 1
+      })
+      if (res.code === 0) {
+        notification.success({
+          message: '验证码发送成功'
+        })
+      } else {
+        notification.error({
+          message: '验证码发送失败'
+        })
+        countdownRef.current?.handleStop()
+      }
+
+    } catch (error) {
+      countdownRef.current?.handleStop()
+    }
+  }
+
+  useEffect(() => {
+    const code = location.search.split('=')[1]
+    form.setFieldValue('inviti_code', code)
+  }, [location])

  return (
    <div className='login'>
      <div className='container'>
        <div className='row-center'>
-          <img src={require('../../assets/login.jpg')} className='img' alt="" />
+          <img src={require('../../assets/login.png')} className='img' alt="" />
        </div>
        <div className='row-center mt-5'>
          <div style={{ maxWidth: 500, width: '100%', padding: '0 20px' }}>
@ -19,32 +88,36 @@ const CreateProxy = () => {
            <div className='row-center'>
              <div className='tac mb-5 fz-24 tbs'>创建代理账户</div>
            </div>
-            <Form>
-              <Form.Item>
+            <Form onFinish={onFinish} form={form}>
+              <Form.Item name="name" rules={[{ required: true, message: "请输入姓名" }]}>
                <Input className='input' placeholder='姓名' ></Input>
              </Form.Item>

-              <Form.Item>
+              <Form.Item name="inviti_code" rules={[{ required: true, message: "请输入邀请码" }]}>
                <Input className='input' placeholder='邀请码' ></Input>
              </Form.Item>

-              <Form.Item>
+              <Form.Item name="email" rules={[{ required: true, message: "请输入邮箱" }, { type: 'email', message: "请输入有效的邮箱！" }]}>
                <Input className='input' placeholder='电子邮件' ></Input>
              </Form.Item>

-              <Form.Item>
-                <Input className='input' placeholder='登录密码，(字母+数字)长度8-32' ></Input>
+              <Form.Item name="password" rules={[{ validator: validatePassword }]}>
+                <Input.Password className='input' style={{
+                  backgroundColor: 'hsla(0, 0%, 100%, .2)'
+                }} placeholder='登录密码，(字母+数字)长度8-32' />
              </Form.Item>

-              <Form.Item>
+              <Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>
                <div className='row-between'>
                  <Input className='input' placeholder='验证码' ></Input>
-                  <Button className='verify-button'>获取验证码</Button>
+                  <Button className='verify-button' onClick={getVerifyCode}>
+                    <CountdownTimer ref={countdownRef} initialSeconds={60} />
+                  </Button>
                </div>
              </Form.Item>

              <Form.Item>
-                <Button style={{ height: 40, fontWeight: 'normal' }}>立即注册</Button>
+                <Button htmlType='submit' style={{ height: 40, fontWeight: 'normal' }}>立即注册</Button>
              </Form.Item>

              <Form.Item>
--- a/src/pages/deposit/index.tsx
+++ b/src/pages/deposit/index.tsx
@ -1,36 +1,185 @@
-import { Button, Form, Input, Select } from 'antd'
+import { Button, Form, Input, QRCode, Select, Tag, Upload, notification } from 'antd'
 import '../../styles/home.scss'
+import { http_depositAddress, http_transferDeposit } from '../../http/api'
+import { useEffect, useRef, useState } from 'react'
+import { observer } from 'mobx-react'
+import store from '../../store'
+import { copy } from '../../utils'
+import signGenerator from '../../http/sign'

 const Deposit = () => {
+
+  const { userInfo, token } = store.state
+  const [form] = Form.useForm()
+  const [receiveAdds, setReceiveAdds] = useState([] as any)
+  const [visibles, setVisibles] = useState(false)
+  const [urls, setUrls] = useState([] as any)
+  const amount = useRef('0')
+
+  const getData = async () => {
+    const res: any = await http_depositAddress()
+    if (res.code === 0) {
+      setReceiveAdds(res.data)
+    }
+  }
+
+  const onFinish = (values: any) => {
+    amount.current = values.amount;
+    form.resetFields()
+    setVisibles(true)
+  }
+
+  const validateAmount = (_: any, value: string) => {
+    if (!value) {
+      return Promise.reject(new Error('请输入转账金额'))
+    }
+    if (Number(value) <= 0) {
+      return Promise.reject(new Error('转账金额必须大于 0'))
+    }
+    return Promise.resolve();
+  }
+
+  const uploadProps = {
+    name: 'file',
+    action: `${process.env.REACT_APP_BASEURL}/api/v1/uploadImg`,
+    headers: {
+      sign: signGenerator({
+        uri: '/api/v1/uploadImg',
+        timestamp: Date.now(),
+        args: '',
+      }),
+      Token: token,
+      timestamp: Date.now() as any
+    },
+  }
+
+  const onChange = (info: any, index: number) => {
+
+    if (info.file.status === 'removed') {
+      urls[index] && urls.splice(index, 1)
+    }
+
+    if (info.file.status === 'done') {
+      if (info.file.response && info.file.response.code === 0) {
+        urls[index] = info.file.response.data.url
+        setUrls([...urls])
+      }
+      notification.success({
+        message: `凭证上传成功`
+      });
+    } else if (info.file.status === 'error') {
+      notification.error({
+        message: `凭证上传失败`
+      });
+    }
+  }
+
+  const submit = async (index: number) => {
+    const url = urls[index]
+    if (!url) return notification.warning({ message: '请上传付款凭证' });
+    const res: any = await http_transferDeposit({
+      url,
+      amount: amount.current
+    })
+    if (res.code === 0) {
+      resetData()
+      setVisibles(false)
+      notification.success({
+        message: '提交成功'
+      })
+    }
+  }
+
+  const resetData = () => {
+    setUrls([])
+    amount.current = '0'
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
+  useEffect(() => {
+    if (!visibles) {
+      resetData()
+    }
+  }, [visibles])
+
  return (
    <div className="deposit">
-      <div className='text-white fz-22 mb-2'>办理存款</div>
-      <div className="flex-1 container">
-        <div className='p-2'>
-          <div className='fz-wb-550'>策略量化存款-存款注意事项</div>
-          <div className='text-sub fz-14 mt-1'>尊敬的客户，请您转账时务必仔细检查钱包地址全部一致。转账完毕后，请及时上传转账凭证。</div>
-        </div>
-        <div className='divider' style={{ backgroundColor: '#8492a6' }}></div>
-        <div className='p-2'>
-          <Form
-            layout="vertical"
-          >
-            <Form.Item vertical={true} label={<span className='fz-wb-550'>存款到</span>}>
-              <Select style={{ height: 50 }} value="(CFD)658532 余额:10291.51" className='tac' />
-            </Form.Item>
-            <Form.Item vertical={true} label={<span className='fz-wb-550'>存款到</span>}>
-              <Input style={{ height: 50 }} placeholder='请输入存款金额' />
-            </Form.Item>
-            <Form.Item>
-              <div className='row-justify-end'>
-                <Button type='primary' style={{ borderRadius: 30 }}>下一步</Button>
+      <div className='text-white fz-22 mb-2 tp' onClick={() => setVisibles(false)}>办理存款</div>
+
+      {
+        !visibles && (
+          <div className="flex-1 container">
+            <div className='p-2'>
+              <div className='fz-wb-550'>策略量化存款-存款注意事项</div>
+              <div className='text-sub fz-14 mt-1'>尊敬的客户，请您转账时务必仔细检查钱包地址全部一致。转账完毕后，请及时上传转账凭证。</div>
+            </div>
+            <div className='divider' style={{ backgroundColor: '#8492a6' }}></div>
+            <div className='p-2'>
+              <Form
+                layout="vertical"
+                onFinish={onFinish}
+                form={form}
+              >
+                <Form.Item label={<span className='fz-wb-550'>存款到</span>}>
+                  <Select style={{ height: 50 }} value={`(CFD)${userInfo.account} 余额:${userInfo.account_balance}`} className='tac' />
+                </Form.Item>
+                <Form.Item name="amount" rules={[{ validator: validateAmount }]} label={<span className='fz-wb-550'>存款金额</span>}>
+                  <Input style={{ height: 50 }} placeholder='请输入存款金额' />
+                </Form.Item>
+                <Form.Item>
+                  <div className='row-justify-end'>
+                    <Button type='primary' htmlType='submit' style={{ borderRadius: 30 }}>下一步</Button>
+                  </div>
+                </Form.Item>
+              </Form>
+            </div>
+          </div>
+        )
+      }
+
+      {
+        visibles && receiveAdds.map((item: any, index: number) => (
+          <div key={item.id} className="flex-1 container mb-2">
+            <div className='p-2'>
+              <div className='fz-wb-550'>策略量化存款-存款注意事项</div>
+              <div className='text-sub fz-14 mt-1'>尊敬的客户，请您转账时务必仔细检查钱包地址全部一致。转账完毕后，请及时上传转账凭证。</div>
+            </div>
+            <div className='divider' style={{ backgroundColor: '#8492a6' }}></div>
+            <div className='p-2'>
+              <div className='text-sub'>请向下方账户转账</div>
+              <div className='plr-1'>
+                <div className='row-items mt-2'>
+                  <div className='fz-wb-550 fz-14'>钱包类型</div>
+                  <Tag color='#87d068' className='ml-1'>{item.type}</Tag>
+                </div>
+                <div className='mt-2 fz-wb-550 fz-14'>钱包地址</div>
+                <Tag color='#87d068' className='mt-1' onClick={() => copy(item.address)}>{item.address}</Tag>
+                <div className='mt-2'>
+                  <QRCode value={item.address} />
+                </div>
+                <div className='mt-2 row-items'>
+                  <div className='fz-14 fz-wb-550 mr-2'>上传付款凭证</div>
+                  <Upload
+                    {...uploadProps}
+                    maxCount={1}
+                    onChange={(file: any) => onChange(file, index)}
+                  >
+                    <Button type='primary'>上传付款凭证</Button>
+                  </Upload>
+                </div>
+                <div className='row-center mt-4'>
+                  <Button type='primary' disabled={!urls[index]} onClick={() => submit(index)}>提交</Button>
+                </div>
              </div>
-            </Form.Item>
-          </Form>
-        </div>
-      </div>
-    </div>
+            </div>
+          </div>
+        ))
+      }
+    </div >
  )
 }

-export default Deposit
+export default observer(Deposit)
--- a/src/pages/forget/index.tsx
+++ b/src/pages/forget/index.tsx
@ -1,32 +1,68 @@
-import { Form, Input } from 'antd'
+import { Form, FormProps, Input, notification } from 'antd'
 import '../../styles/login.scss'
 import Button from '../../components/Button'
 import { useRouter } from '../../hooks/useRouter'
+import { useEffect, useState } from 'react';
+import { http_code, http_forget } from '../../http/api';
+
+interface FieldType {
+  email: string;
+  code: string
+}

 const ForGet = () => {

  const { push } = useRouter()
+  const [form] = Form.useForm()
+  const [codeId, setCodeId] = useState('')
+  const [codeUrl, setCodeUrl] = useState('')
+
+  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
+    const res: any = await http_forget({
+      ...values,
+      id: codeId
+    })
+    getCode()
+    if (res.code === 0) {
+      form.resetFields()
+      notification.success({
+        message: '密码已发送至您的邮箱！'
+      })
+    }
+  };
+
+  const getCode = async () => {
+    const res: any = await http_code()
+    if (res.code === 0) {
+      setCodeId(res.data.id)
+      setCodeUrl(res.data.url)
+    }
+  }
+
+  useEffect(() => {
+    getCode()
+  }, [])

  return (
    <div className='login'>
      <div className='container'>
        <div className='row-center'>
-          <img src={require('../../assets/login.jpg')} className='img' alt="" />
+          <img src={require('../../assets/login.png')} className='img' alt="" />
        </div>
        <div className='row-center'>
          <div style={{ maxWidth: 500, width: '100%', padding: '0 20px' }}>
-            <Form>
-              <Form.Item>
+            <Form onFinish={onFinish} form={form}>
+              <Form.Item name="email" rules={[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '请输入有效的邮箱！' }]}>
                <Input className='input' placeholder='邮箱' ></Input>
              </Form.Item>
-              <Form.Item>
+              <Form.Item name="code" rules={[{ required: true, message: '请输入验证码' }]}>
                <div style={{ position: 'relative' }}>
                  <Input className='input' placeholder='验证码'></Input>
-                  <img src="https://trader.gmigldgodfx.com/get/captcha?cc=0.24735417863504017" className='verify-img' alt="" />
+                  <img src={codeUrl} className='verify-img' alt="" onClick={getCode} />
                </div>
              </Form.Item>
              <Form.Item>
-                <Button>立即找回</Button>
+                <Button htmlType='submit'>立即找回</Button>
              </Form.Item>
            </Form>
            <div onClick={() => push(-1)} className='tac tp'>已有账号，登录</div>
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@ -1,30 +1,113 @@
+import { Progress } from 'antd'
 import '../../styles/home.scss'
+import ProfitChart from '../../components/profitChart'
+import { HiDotsVertical } from "react-icons/hi";
+import { useEffect, useState } from 'react';
+import store from '../../store';
+import { http_earn_trend } from '../../http/api';
+import { observer } from 'mobx-react';

 const Home = () => {
+
+  const { token, userInfo } = store.state
+  const [chartData, setChartData] = useState({
+    times: [],
+    values: []
+  })
+
+  const getTime = (value: number, type?: string) => {
+    let date = new Date(value);
+    let mm: number | string = date.getMonth() + 1;
+    let dd: number | string = date.getDate();
+    mm = mm >= 10 ? mm : "0" + mm;
+    dd = dd >= 10 ? dd : "0" + dd;
+    return `${mm}/${dd}`;
+  };
+
+  const getData = async () => {
+    const res: any = await http_earn_trend()
+    const times = [] as any
+    const values = [] as any
+    if (res.code === 0) {
+      res.data.forEach((item: any) => {
+        times.push(getTime(item.time * 1000))
+        values.push(Number(item.amount))
+      })
+    }
+    setChartData({ times, values })
+  }
+
+  useEffect(() => {
+    token && getData()
+  }, [token])
+
  return (
    <div className="home">
-      <div className="text-white fz-22 fz-wb-500">仪表盘</div>
-      <div className="row-between">
-        <div className="income"></div>
-        <div className="total-income"></div>
+      <div className="text-white fz-22 fz-wb-500 mb-2">仪表盘</div>
+      <div className='box'>
+        <div className="income p-1">
+          <ProfitChart data={chartData} />
+        </div>
+        <div className="total-income row-center">
+          <div>
+            <div className='tac fz-22 mb-1'>总收益</div>
+            <Progress type="circle" percent={50} size={150} strokeColor="#f7b93f" format={() => `$${userInfo.total_income || 0}`} />
+          </div>
+        </div>
      </div>

-      <div className='CFD-box mt-2'>
+      <div className='CFD-box mt-2 p-2'>
+        <div className='row-between'>
+          <div>CFD 账户 {userInfo.account}</div>
+          <HiDotsVertical />
+        </div>
+        <div className='mt-2'>
+          <table border={0} style={{ width: '100%', background: '#eff2f7' }} cellSpacing={5}>
+            <tbody>
+              <tr style={{ background: '#fff' }}>
+                <td className='tac'>
+                  <p>资本</p>
+                  <p className='text-success'>${userInfo.account_capital || 0}</p>
+                </td>
+              </tr>
+
+              <tr style={{ background: '#fff' }}>
+                <td className='tac'>
+                  <p>余额</p>
+                  <p className='text-success'>${userInfo.account_balance || 0}</p>
+                </td>
+              </tr>

+              <tr style={{ background: '#fff' }}>
+                <td className='tac'>
+                  <p>信用度</p>
+                  <p className='text-success'>${userInfo.account_credit || 0}</p>
+                </td>
+              </tr>
+
+              <tr style={{ background: '#fff' }}>
+                <td className='tac'>
+                  <p>净值</p>
+                  <p className='text-success'>${userInfo.account_net_worth || 0}</p>
+                </td>
+              </tr>
+
+            </tbody>
+          </table>
+        </div>
+        <div className='mt-2'>账户状态：{userInfo.account_status}</div>
      </div>

      <div className='mt-2'>
-        <iframe frameBorder="0" width="100%" height="500" scrolling="yes" src="https://www.jin10.com/example/jin10.com.html?fontSize=14px&theme=white">
-
-        </iframe>
+        <iframe frameBorder="0" width="100%" height="500" scrolling="yes" src="https://www.jin10.com/example/jin10.com.html?fontSize=14px&theme=white"></iframe>
      </div>

      <div className='mt-2'>
        <iframe id="iframe" frameBorder="0" width="100%" height="500" src="https://rili-test2.jin10.com?quote=1&fontSize=14px&theme=primary"></iframe>
-
      </div>
+
    </div>
  )
 }

-export default Home
+export default observer(Home)
--- a/src/pages/link/index.tsx
+++ b/src/pages/link/index.tsx
@ -0,0 +1,51 @@
+import { Input, QRCode } from 'antd'
+import '../../styles/home.scss'
+import Button from '../../components/Button'
+import { IoCopyOutline } from "react-icons/io5";
+import { copy } from '../../utils';
+import { observer } from 'mobx-react';
+import store from '../../store';
+
+const Link = () => {
+
+  const { userInfo } = store.state
+
+  return (
+    <div className='link'>
+      <div className='text-white fz-22 mb-2'>推广链接</div>
+
+      <div className='container ptb-2'>
+        <div className='plr-2'>代理推广链接</div>
+        <div className='divider mt-2'></div>
+        <div className='plr-2'>
+          <div className='row-center'>
+            <QRCode value={`${window.origin}/#/createProxy?code=${userInfo.inviti_code}`} bordered={false} />
+          </div>
+          <div className='tac fz-14 fz-wb-550 mt-1 row-center'>
+            <span>推荐码：</span>
+            <span className='text-success'>{userInfo.inviti_code}</span>
+            <IoCopyOutline className='ml-1 tp' onClick={() => copy(userInfo.inviti_code)} />
+          </div>
+          <div className='mt-1'>
+            <Input className='tac text-sub' disabled style={{
+              backgroundColor: '#eff2f7',
+              height: 40
+            }} value={`${window.origin}/#/createProxy?code=${userInfo.inviti_code}`} />
+          </div>
+          <div className='mt-2 row-center'>
+            <Button
+              style={{
+                width: 150,
+                height: 50,
+                backgroundColor: '#007DBA'
+              }}
+              onClick={() => copy(`${window.origin}/#/createProxy?code=${userInfo.inviti_code}`)}
+            >链接复制</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default observer(Link)
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@ -1,39 +1,108 @@
-import { Form, Input } from 'antd'
+import { Form, FormProps, Input, notification } from 'antd'
 import '../../styles/login.scss'
 import Button from '../../components/Button'
 import { useRouter } from '../../hooks/useRouter'
 import store from '../../store'
+import { useEffect, useState } from 'react'
+import { http_code, http_login } from '../../http/api'
+type FieldType = {
+  email: string;
+  password: string;
+  code: string;
+};

 const Login = () => {

  const { push } = useRouter()
+  const [codeId, setCodeId] = useState('')
+  const [codeUrl, setCodeUrl] = useState('')
+
+  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
+    const res: any = await http_login({
+      ...values,
+      id: codeId
+    })
+    if (res.code === 0) {
+      notification.success({
+        message: '登录成功'
+      })
+      store.setToken(res.data.token)
+      push('/', null, true)
+    } else {
+      getCode()
+    }
+  };
+  // alert(`buzz: ${window.ethereum.isBUZZUP}`)
+  // alert(`metamask: ${(window as any).ethereum.isMetaMask}`)
+  const getCode = async () => {
+    const res: any = await http_code()
+    if (res.code === 0) {
+      setCodeId(res.data.id)
+      setCodeUrl(res.data.url)
+    }
+  }
+
+  const login = async () => {
+
+  }
+
+  useEffect(() => {
+    getCode()
+  }, [])

  return (
    <div className='login'>
      <div className='container'>
        <div className='row-center'>
-          <img src={require('../../assets/login.jpg')} className='img' alt="" />
+          <img src={require('../../assets/login.png')} className='img' alt="" />
        </div>
        <div className='row-center'>
          <div style={{ maxWidth: 500, width: '100%', padding: '0 20px' }}>
-            <Form>
-              <Form.Item>
+            <Form
+              onFinish={onFinish}
+            >
+              <Form.Item
+                name="email"
+                rules={[
+                  {
+                    type: 'email',
+                    message: '请输入有效的邮箱！',
+                  },
+                  {
+                    required: true,
+                    message: '请输入邮箱！',
+                  },
+                ]}
+              >
                <Input className='input' placeholder='邮箱' ></Input>
              </Form.Item>
-              <Form.Item>
-                <Input className='input' placeholder='密码'></Input>
+              <Form.Item
+                name="password"
+                rules={[
+                  {
+                    required: true,
+                    message: '请输入密码！',
+                  },
+                ]}
+              >
+                <Input.Password className='input' placeholder='请输入密码' />
              </Form.Item>
-              <Form.Item>
+              <Form.Item
+                name="code"
+                rules={[
+                  {
+                    required: true,
+                    message: '请输入验证码！',
+                  },
+                ]}
+              >
                <div style={{ position: 'relative' }}>
                  <Input className='input' placeholder='验证码'></Input>
-                  <img src="https://trader.gmigldgodfx.com/get/captcha?cc=0.24735417863504017" className='verify-img' alt="" />
+                  <img src={codeUrl} className='verify-img' alt="" onClick={getCode} />
                </div>
              </Form.Item>
              <Form.Item>
-                <Button onClick={() => {
-                  store.setToken('asdakdjajklsdjklas')
-                  push('/')
-                }}>登录</Button>
+                <Button htmlType="submit">登录</Button>
              </Form.Item>
            </Form>
            <div className='tac tp' style={{ cursor: 'pointer' }} onClick={() => push('/forget')}>忘记密码?</div>
--- a/src/pages/personal/index.tsx
+++ b/src/pages/personal/index.tsx
@ -0,0 +1,53 @@
+import { Form, Input } from "antd"
+import "../../styles/home.scss"
+
+const Personal = () => {
+  return (
+    <div className="widthdraw">
+      <div className='text-white fz-22 mb-2'>个人资料</div>
+      <div className="container p-2">
+        <Form
+          layout="vertical"
+        >
+
+          <div className='form-box'>
+            <Form.Item className='input' label={<span className='fz-wb-550'>姓名</span>}>
+              <Input style={{ height: 40 }} placeholder='' disabled value={"-"} />
+            </Form.Item>
+            <Form.Item className='input' label={<span className='fz-wb-550'>国家</span>}>
+              <div className='row-items'>
+                <Input style={{ height: 40 }} placeholder='' disabled value="-" />
+              </div>
+            </Form.Item>
+          </div>
+
+          <div className='form-box'>
+            <Form.Item className='input' label={<span className='fz-wb-550'>省</span>}>
+              <Input style={{ height: 40 }} placeholder='' disabled value="-" />
+            </Form.Item>
+            <Form.Item className='input' label={<span className='fz-wb-550'>地址</span>}>
+              <div className='row-items'>
+                <Input style={{ height: 40 }} placeholder='' disabled value="-" />
+              </div>
+            </Form.Item>
+          </div>
+
+          <div className='form-box'>
+            <Form.Item className='input' label={<span className='fz-wb-550'>邮箱</span>}>
+              <Input style={{ height: 40 }} placeholder='' disabled value="9317088@qq.com" />
+            </Form.Item>
+            <Form.Item className='input' label={<span className='fz-wb-550'>电话</span>}>
+              <div className='row-items'>
+                <Input style={{ height: 40 }} placeholder='' disabled value="-" />
+              </div>
+            </Form.Item>
+          </div>
+
+        </Form>
+      </div>
+
+    </div>
+  )
+}
+
+export default Personal
--- a/src/pages/record/assets/index.tsx
+++ b/src/pages/record/assets/index.tsx
@ -0,0 +1,216 @@
+import { title } from 'process'
+import MyTable from '../../../components/MyTable'
+import '../../../styles/home.scss'
+import { observer } from 'mobx-react'
+import store from '../../../store'
+import { useMemo } from 'react'
+import { ConfigProvider, Tabs } from 'antd'
+import { http_account_assetsRecords, http_cash } from '../../../http/api'
+import { getTime } from '../../../utils'
+
+const AssetsRecords = () => {
+
+  const { screenWidth } = store.state
+
+  const containerWidth = useMemo(() => {
+    if (screenWidth > 1420) {
+      return 1420 - 310
+    }
+    if (screenWidth > 1000) {
+      return screenWidth - 320
+    }
+    return screenWidth - 30
+  }, [screenWidth])
+
+  const AccountRecord = () => (
+    <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
+      <MyTable
+        apiFun={http_account_assetsRecords}
+        columns={[
+          {
+            title: '状态',
+            dataIndex: 'status',
+            width: 150
+          },
+          {
+            title: '时间',
+            dataIndex: 'time',
+            width: 200,
+            render: (time: number) => (
+              <span>{getTime(time * 1000)}</span>
+            )
+          },
+          {
+            title: '事件',
+            dataIndex: 'event',
+            width: 150
+          },
+          {
+            title: '订单',
+            dataIndex: 'order',
+            width: 120
+          },
+          {
+            title: '账户',
+            dataIndex: 'account'
+          },
+          {
+            title: '金额',
+            dataIndex: 'amount',
+            render: (val: string) => (
+              <span>${val}</span>
+            )
+          },
+          {
+            title: '描述',
+            dataIndex: 'describe'
+          },
+
+        ]}
+      />
+    </div>
+  )
+
+  const WalletToAsseetRecord = () => (
+    <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
+      <MyTable
+        apiFun={http_cash}
+        extraProps={{ type: 1 }}
+        columns={[
+          {
+            title: '时间',
+            dataIndex: 'time',
+            width: 200,
+            render: (time: number) => (
+              <span>{getTime(time * 1000)}</span>
+            )
+          },
+          {
+            title: '订单',
+            dataIndex: 'order',
+          },
+          {
+            title: '描述',
+            dataIndex: 'describe',
+          },
+          {
+            title: '剩余',
+            dataIndex: 'balance',
+            render: (val: string) => (
+              <span>${val}</span>
+            )
+          },
+        ]}
+      />
+    </div>
+  )
+
+  const AssetToVipRecords = () => (
+    <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
+      <MyTable
+        apiFun={http_cash}
+        extraProps={{ type: 2 }}
+        columns={[
+          {
+            title: '时间',
+            dataIndex: 'time',
+            width: 200,
+            render: (time: number) => (
+              <span>{getTime(time * 1000)}</span>
+            )
+          },
+          {
+            title: '订单',
+            dataIndex: 'order',
+          },
+          {
+            title: '描述',
+            dataIndex: 'describe',
+          },
+          {
+            title: '剩余',
+            dataIndex: 'balance',
+            render: (val: string) => (
+              <span>${val}</span>
+            )
+          },
+        ]}
+      />
+    </div>
+  )
+
+  const AssetToWalletRecords = () => (
+    <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
+      <MyTable
+        apiFun={http_cash}
+        extraProps={{ type: 3 }}
+        columns={[
+          {
+            title: '时间',
+            dataIndex: 'time',
+            width: 200,
+            render: (time: number) => (
+              <span>{getTime(time * 1000)}</span>
+            )
+          },
+          {
+            title: '订单',
+            dataIndex: 'order',
+          },
+          {
+            title: '描述',
+            dataIndex: 'describe',
+          },
+          {
+            title: '剩余',
+            dataIndex: 'balance',
+            render: (val: string) => (
+              <span>${val}</span>
+            )
+          },
+        ]}
+      />
+    </div>
+  )
+
+  return (
+    <div className="records" >
+      <div className='text-white fz-22'>账单记录</div>
+      <ConfigProvider theme={{
+        components: {
+          Tabs: {
+            itemColor: '#fff',
+            itemSelectedColor: '#f7b93f',
+            inkBarColor: '#f7b93f'
+          }
+        }
+      }}>
+        <Tabs defaultActiveKey='1'  tabPosition="top" items={[
+          {
+            key: '1',
+            label: '资金账户记录',
+            children: AccountRecord(),
+          },
+          {
+            key: '2',
+            label: '现金钱包->资金账户',
+            children: WalletToAsseetRecord(),
+          },
+          {
+            key: '3',
+            label: '现金钱包->其他会员',
+            children: AssetToVipRecords(),
+          },
+          {
+            key: '4',
+            label: '资产账户->现金钱包',
+            children: AssetToWalletRecords(),
+          }
+        ]} />
+      </ConfigProvider>
+
+    </div >
+  )
+}
+
+export default observer(AssetsRecords)
--- a/src/pages/record/bonus/index.tsx
+++ b/src/pages/record/bonus/index.tsx
@ -0,0 +1,111 @@
+import { title } from 'process'
+import MyTable from '../../../components/MyTable'
+import '../../../styles/home.scss'
+import { observer } from 'mobx-react'
+import store from '../../../store'
+import { useMemo } from 'react'
+import { http_bonus } from '../../../http/api'
+import { getTime } from '../../../utils'
+import { Input, Select } from 'antd'
+
+const BonusRecords = () => {
+
+  const { screenWidth } = store.state
+
+  const containerWidth = useMemo(() => {
+    if (screenWidth > 1420) {
+      return 1420 - 310
+    }
+    if (screenWidth > 1000) {
+      return screenWidth - 320
+    }
+    return screenWidth - 30
+  }, [screenWidth])
+
+  const options = [
+    { label: '请选择类型', value: 0 },
+    { label: '交易利润', value: 1 },
+    { label: '盈利分红', value: 2 },
+    { label: '超级奖励', value: 3 },
+    { label: '交易佣金', value: 4 },
+    { label: '星际奖励', value: 5 },
+  ]
+
+  const searchConfigList = [
+    {
+      key: 'type',
+      name: 'type',
+      label: '全部类型',
+      initialValue: 0,
+      slot: <Select style={{ maxWidth: 200, minWidth: 150 }} placeholder="请选择类型" options={options} />
+    },
+    {
+      key: 'order',
+      name: 'order',
+      label: '订单号',
+      initialValue: '',
+      slot: <Input style={{ maxWidth: 200, minWidth: 150 }} placeholder='请输入订单号' />
+    },
+    {
+      key: 'assets',
+      name: 'assets',
+      label: '资金账户',
+      initialValue: '',
+      slot: <Input style={{ maxWidth: 200, minWidth: 150 }} placeholder='请输入资金账户' />
+    }
+  ]
+
+  return (
+    <div className="records" >
+      <div className='text-white fz-22 mb-2'>奖金明细</div>
+      <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
+        <MyTable
+          searchConfigList={searchConfigList}
+          apiFun={http_bonus}
+          columns={[
+            {
+              title: '时间',
+              dataIndex: 'time',
+              width: 200,
+              render: (time: number) => (
+                <span>{getTime(time * 1000)}</span>
+              )
+            },
+            {
+              title: '订单',
+              dataIndex: 'order'
+            },
+            {
+              title: '事件',
+              dataIndex: 'event',
+              width: 200
+            },
+            {
+              title: '来自',
+              dataIndex: 'source'
+            },
+            // {
+            //   title: '受益'
+            // },
+            {
+              title: '金额',
+              dataIndex: 'amount',
+              render: (val: string) => (
+                <span>${val}</span>
+              )
+            },
+            {
+              title: '余额',
+              dataIndex: 'balance',
+              render: (val: string) => (
+                <span>${val}</span>
+              )
+            },
+          ]}
+        />
+      </div>
+    </div >
+  )
+}
+
+export default observer(BonusRecords)
--- a/src/pages/record/deposit/index.tsx
+++ b/src/pages/record/deposit/index.tsx
@ -0,0 +1,75 @@
+import { title } from 'process'
+import MyTable from '../../../components/MyTable'
+import '../../../styles/home.scss'
+import { observer } from 'mobx-react'
+import store from '../../../store'
+import { useMemo } from 'react'
+import { http_depositHistory, http_withdrawRecords } from '../../../http/api'
+import { getTime } from '../../../utils'
+
+const DepositRecords = () => {
+
+  const { screenWidth } = store.state
+
+  const containerWidth = useMemo(() => {
+    if (screenWidth > 1420) {
+      return 1420 - 310
+    }
+    if (screenWidth > 1000) {
+      return screenWidth - 320
+    }
+    return screenWidth - 30
+  }, [screenWidth])
+
+  return (
+    <div className="records" >
+      <div className='text-white fz-22 mb-2'>存款记录</div>
+      <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
+        <MyTable
+          apiFun={http_depositHistory}
+          columns={[
+            {
+              title: '状态',
+              dataIndex: 'status',
+              width: 150,
+            },
+            {
+              title: '时间',
+              dataIndex: 'time',
+              width: 200,
+              render: (time: number) => (
+                <span>{getTime(time * 1000)}</span>
+              )
+            },
+            {
+              title: '订单',
+              dataIndex: 'order'
+            },
+            {
+              title: '到账金额',
+              dataIndex: 'amount',
+              width: 160,
+              render: (val: string) => (
+                <span>${val}</span>
+              )
+            },
+            {
+              title: '付款金额',
+              dataIndex: 'payment_amount',
+              width: 160,
+              render: (val: string) => (
+                <span>{val} USDT</span>
+              )
+            },
+            {
+              title: '账号',
+              dataIndex: 'account'
+            }
+          ]}
+        />
+      </div>
+    </div >
+  )
+}
+
+export default observer(DepositRecords)
--- a/src/pages/record/escrow/index.tsx
+++ b/src/pages/record/escrow/index.tsx
@ -0,0 +1,67 @@
+import { title } from 'process'
+import MyTable from '../../../components/MyTable'
+import '../../../styles/home.scss'
+import { observer } from 'mobx-react'
+import store from '../../../store'
+import { useMemo } from 'react'
+import { http_escrowRecords } from '../../../http/api'
+import { getTime } from '../../../utils'
+
+const EscrowRecords = () => {
+
+  const { screenWidth } = store.state
+
+  const containerWidth = useMemo(() => {
+    if (screenWidth > 1420) {
+      return 1420 - 310
+    }
+    if (screenWidth > 1000) {
+      return screenWidth - 320
+    }
+    return screenWidth - 30
+  }, [screenWidth])
+
+  return (
+    <div className="records" >
+      <div className='text-white fz-22 mb-2'>托管记录</div>
+      <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
+        <MyTable
+          apiFun={http_escrowRecords}
+          columns={[
+            {
+              title: '账号',
+              dataIndex: 'account',
+              width: 200
+            },
+            {
+              title: '开始时间',
+              dataIndex: 'start_time',
+              width: 200,
+              render: (time: number) => (
+                <span>{getTime(time * 1000)}</span>
+              )
+            },
+            {
+              title: '结束时间',
+              dataIndex: 'end_time',
+              width: 200,
+              render: (time: number) => (
+                <span>{getTime(time * 1000)}</span>
+              )
+            },
+            {
+              title: '金额',
+              dataIndex: 'amount',
+              width: 160,
+              render: (val: string) => (
+                <span>${val}</span>
+              )
+            }
+          ]}
+        />
+      </div>
+    </div >
+  )
+}
+
+export default observer(EscrowRecords)
--- a/src/pages/record/withdraw/index.tsx
+++ b/src/pages/record/withdraw/index.tsx
@ -0,0 +1,81 @@
+import { title } from 'process'
+import MyTable from '../../../components/MyTable'
+import '../../../styles/home.scss'
+import { observer } from 'mobx-react'
+import store from '../../../store'
+import { useMemo } from 'react'
+import { http_withdrawRecords } from '../../../http/api'
+import { getTime } from '../../../utils'
+
+const WithdrawRecords = () => {
+
+  const { screenWidth } = store.state
+
+  const containerWidth = useMemo(() => {
+    if (screenWidth > 1420) {
+      return 1420 - 310
+    }
+    if (screenWidth > 1000) {
+      return screenWidth - 320
+    }
+    return screenWidth - 30
+  }, [screenWidth])
+
+  return (
+    <div className="records" >
+      <div className='text-white fz-22 mb-2'>取款记录</div>
+      <div className="container p-2" style={{ '--screen': `${containerWidth}px` } as React.CSSProperties}>
+        <MyTable
+          apiFun={http_withdrawRecords}
+          columns={[
+            {
+              title: '状态',
+              dataIndex: 'status',
+              width: 150,
+            },
+            {
+              title: '时间',
+              dataIndex: 'time',
+              width: 200,
+              render: (time: number) => (
+                <span>{getTime(time * 1000)}</span>
+              )
+            },
+            {
+              title: '订单',
+              dataIndex: 'order'
+            },
+            {
+              title: '取款金额',
+              dataIndex: 'amount',
+              render: (val: string) => (
+                <span>${val}</span>
+              )
+            },
+            {
+              title: '到账金额',
+              dataIndex: 'receipt_amount',
+              render: (val: string) => (
+                <span>${val}</span>
+              )
+            },
+            {
+              title: '账号',
+              dataIndex: 'account'
+            },
+            {
+              title: '收款户名',
+              dataIndex: 'type'
+            },
+            {
+              title: '收款地址',
+              dataIndex: 'address'
+            }
+          ]}
+        />
+      </div>
+    </div >
+  )
+}
+
+export default observer(WithdrawRecords)
--- a/src/pages/security/index.tsx
+++ b/src/pages/security/index.tsx
@ -1,7 +1,64 @@
-import { Button, Form, Input } from "antd"
+import { Button, Form, FormProps, Input, notification } from "antd"
 import "../../styles/home.scss"
+import { HttpRequestPs } from "../../http/types"
+import { http_reset_password, http_send_email } from "../../http/api"
+import CountdownTimer, { CountdownTimerRef } from "../../components/CountdownTimer"
+import { useRef } from "react"
+import { observer } from "mobx-react"
+import store from "../../store"

 const Security = () => {
+
+  const { userInfo } = store.state
+  const [form] = Form.useForm()
+  const countdownRef = useRef<CountdownTimerRef>(null)
+
+  const onFinish: FormProps<HttpRequestPs.ResetPassword>['onFinish'] = async (values) => {
+    const res: any = await http_reset_password(values)
+    if (res.code === 0) {
+      notification.success({
+        message: '修改成功，请重新登录'
+      })
+      store.setToken('')
+    }
+  }
+
+  const validatePassword = (_: any, value: string) => {
+    if (!value) {
+      return Promise.reject(new Error("请输入新密码"));
+    }
+    const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,32}$/;
+    if (!regex.test(value)) {
+      return Promise.reject(new Error("密码必须包含字母和数字，长度为8-32位"));
+    }
+    return Promise.resolve();
+  };
+
+  const getVerifyCode = async () => {
+    try {
+      if (countdownRef.current?.isActive) return
+      countdownRef.current?.handleStart()
+      const res: any = await http_send_email({
+        email: userInfo.email,
+        type: 3
+      })
+      if (res.code === 0) {
+        notification.success({
+          message: '验证码发送成功'
+        })
+      } else {
+        notification.error({
+          message: '验证码发送失败'
+        })
+        countdownRef.current?.handleStop()
+      }
+
+    } catch (error) {
+      countdownRef.current?.handleStop()
+    }
+  }
+
+
  return (
    <div className="securify">
      <div className='text-white fz-22 mb-2'>办理存款</div>
@ -15,18 +72,20 @@ const Security = () => {
        </div>
        <div className="divider"></div>
        <div className="plr-2">
-          <Form layout="vertical">
-            <Form.Item label={<span className="fz-wb-550">新密码</span>}>
-              <Input style={{ height: 50 }} placeholder="密码必须是字母加数字的组合" />
+          <Form layout="vertical" form={form} onFinish={onFinish}>
+            <Form.Item name="password" rules={[{ validator: validatePassword }]} label={<span className="fz-wb-550" >新密码</span>}>
+              <Input.Password style={{ height: 50 }} placeholder="密码必须是字母加数字的组合" />
            </Form.Item>
-            <Form.Item label={<span className="fz-wb-550">验证码</span>}>
+            <Form.Item name="code" rules={[{ required: true, message: '请输入验证码' }]} label={<span className="fz-wb-550">验证码</span>}>
              <div className="row-items">
                <Input style={{ height: 50 }} placeholder="密码必须是字母加数字的组合" />
-                <Button type="primary" style={{ height: 50 }} className="ml-1">获取验证码</Button>
+                <Button type="primary" style={{ height: 50, width: 150 }} className="ml-1" onClick={getVerifyCode}>
+                  <CountdownTimer initialSeconds={60} ref={countdownRef} />
+                </Button>
              </div>
            </Form.Item>
            <Form.Item className="row-center">
-              <Button type="primary" style={{ borderRadius: 50 }}>提交</Button>
+              <Button type="primary" htmlType="submit" style={{ borderRadius: 50 }}>提交</Button>
            </Form.Item>
          </Form>
        </div>
@ -35,4 +94,4 @@ const Security = () => {
  )
 }

-export default Security
+export default observer(Security)
--- a/src/pages/submit/index.tsx
+++ b/src/pages/submit/index.tsx
@ -0,0 +1,78 @@
+import { Form, FormProps, Input, notification } from 'antd'
+import '../../styles/login.scss'
+import Button from '../../components/Button'
+import { useRouter } from '../../hooks/useRouter'
+import store from '../../store'
+import { useEffect, useState } from 'react'
+import { http_code, http_login, http_submit } from '../../http/api'
+type FieldType = {
+  account: string;
+  password: string;
+};
+
+const Submit = () => {
+
+  const [form] = Form.useForm()
+
+  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
+    const res: any = await http_submit({
+      ...values
+    })
+    if (res.code === 0) {
+      notification.success({
+        message: '提交成功'
+      })
+      form.resetFields()
+    }
+  };
+
+
+  useEffect(() => {
+  }, [])
+
+  return (
+    <div className='login'>
+      <div className='container'>
+        <div className='row-center'>
+          <img src={require('../../assets/login.png')} className='img' alt="" />
+        </div>
+        <div className='row-center'>
+          <div style={{ maxWidth: 500, width: '100%', padding: '0 20px' }}>
+            <Form
+              onFinish={onFinish}
+              form={form}
+            >
+              <Form.Item
+                name="account"
+                rules={[
+                  {
+                    required: true,
+                    message: '请输入账号！',
+                  },
+                ]}
+              >
+                <Input className='input' placeholder='账号' ></Input>
+              </Form.Item>
+              <Form.Item
+                name="password"
+                rules={[
+                  {
+                    required: true,
+                    message: '请输入密码！',
+                  },
+                ]}
+              >
+                <Input.Password className='input' placeholder='请输入密码' />
+              </Form.Item>
+              <Form.Item>
+                <Button htmlType="submit">提交</Button>
+              </Form.Item>
+            </Form>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Submit
--- a/src/pages/team/index.tsx
+++ b/src/pages/team/index.tsx
@ -0,0 +1,110 @@
+import { QRCode } from 'antd'
+import '../../styles/home.scss'
+import { useEffect, useState } from 'react'
+import { http_team } from '../../http/api'
+import { observer } from 'mobx-react'
+import store from '../../store'
+
+const Team = () => {
+
+  const { token } = store.state
+  const [rootAccount, setRootState] = useState('')
+  const [teamAccount, setTeamAccount] = useState([])
+
+  useEffect(() => {
+    const getData = async () => {
+      const res: any = await http_team()
+      if (res.code === 0) {
+        setRootState(res.data.email)
+        setTeamAccount(res.data.team)
+      }
+    }
+
+    token && getData()
+  }, [token])
+
+  return (
+    <div className='team'>
+      <div className='text-white fz-22 mb-2'>团队详情</div>
+
+      <div className='container p-2'>
+
+        <div className='row-items'>
+          <img src={require('../../assets/root.png')} alt="" />
+          <div className='ml-1 tp'>{rootAccount}</div>
+        </div>
+
+        {
+          teamAccount.map((item: any) => (
+            <div className='row-items' key={item.id}>
+              <img src={require('../../assets/_line2.png')} alt="" />
+              <div className='ml-1 tp'>{item.account}</div>
+            </div>
+          ))
+        }
+
+      </div>
+
+      {/* <div className='container p-2 mt-2'>
+        <div className='text-sub fz-wb-550'>CE08,658532</div>
+        <div className='row-items mt-2 flex-wrap'>
+          <div className='box-width'>
+            <div>$0</div>
+            <div className='text-sub'>总存款</div>
+          </div>
+          <div className='box-width'>
+            <div>$0</div>
+            <div className='text-sub'>总取款</div>
+          </div>
+          <div className='box-width'>
+            <div>$0</div>
+            <div className='text-sub'>总交易量</div>
+          </div>
+          <div className='box-width'>
+            <div>$0</div>
+            <div className='text-sub'>总利润</div>
+          </div>
+
+        </div>
+      </div>
+
+      <div className='container p-2 mt-2'>
+        <div className='text-sub fz-wb-550'>团队统计数量</div>
+        <div className='row-items mt-2 flex-wrap'>
+          <div className='box-width'>
+            <div>$0</div>
+            <div className='text-sub'>团队总资本金</div>
+          </div>
+          <div className='box-width'>
+            <div>$0</div>
+            <div className='text-sub'>团队总余额</div>
+          </div>
+          <div className='box-width'>
+            <div>1</div>
+            <div className='text-sub'>团队人数</div>
+          </div>
+          <div className='box-width'>
+            <div>$0</div>
+            <div className='text-sub'>团队存款</div>
+          </div>
+          <div className='box-width'>
+            <div>$0</div>
+            <div className='text-sub'>团队取款</div>
+          </div>
+          <div className='box-width'>
+            <div>0</div>
+            <div className='text-sub'>团队总交易量</div>
+          </div>
+          <div className='box-width'>
+            <div>$0</div>
+            <div className='text-sub'>团队总利润</div>
+          </div>
+
+        </div>
+      </div> */}
+
+    </div>
+  )
+}
+
+export default observer(Team)
--- a/src/pages/transfer/index.tsx
+++ b/src/pages/transfer/index.tsx
@ -1,7 +1,40 @@
-import { Button, Form, Input, Select } from 'antd'
+import { Button, Form, Input, Select, notification } from 'antd'
 import '../../styles/home.scss'
+import { useState } from 'react'
+import { observer } from 'mobx-react'
+import store from '../../store'
+import { http_transfer } from '../../http/api'

 const Transfer = () => {
+
+  const { userInfo } = store.state
+  const [form] = Form.useForm()
+  const options = [
+    { label: '现金钱包-资产账户', value: 1 },
+    { label: '现金钱包-其他会员', value: 2 },
+    { label: '资产账户-现金钱包', value: 3 }
+  ]
+
+  const [type, setType] = useState(-1)
+
+  const onSelect = (_type: any) => {
+    setType(_type)
+  }
+
+  const onFinish = async (values: any) => {
+    const res: any = await http_transfer({
+      ...values,
+      type
+    })
+    if (res.code === 0) {
+      form.resetFields()
+      notification.success({
+        message: '提交成功'
+      })
+    }
+
+  }
+
  return (
    <div className="deposit">
      <div className='text-white fz-22 mb-2'>资金划转</div>
@ -18,22 +51,48 @@ const Transfer = () => {
        <div className='p-2'>
          <Form
            layout="vertical"
+            onFinish={onFinish}
+            form={form}
          >
-            <Form.Item vertical={true} label={<span className='fz-wb-550'>资金操作</span>}>
-              <Select style={{ height: 50 }} placeholder="请选择操作类型..." />
+            <Form.Item label={<span className='fz-wb-550'>资金操作</span>}>
+              <Select style={{ height: 50 }} placeholder="请选择操作类型..." options={options} onSelect={onSelect} />
              <div>
                <span className='fz-12 text-primary'>钱包金额：</span>
-                <span className='fz-12 text-success'>$0.00</span>
+                <span className='fz-12 text-success'>${userInfo.account_balance}</span>
              </div>
            </Form.Item>

-            <Form.Item vertical={true} label={<span className='fz-wb-550'>转账金额</span>}>
+            {
+              type === 2 && (
+                <Form.Item name="email" label="会员账号" rules={[{ required: true, message: "请输入对方登录账户（邮箱）" }, { type: 'email', message: '邮箱格式错误' }]}>
+                  <Input style={{ height: 50 }} placeholder='请输入对方登录账户（邮箱）' />
+                </Form.Item>
+              )
+            }
+
+            {
+              type === 1 && (
+                <Form.Item label={<span className='fz-wb-550'>资金账户</span>}>
+                  <Input style={{ height: 50 }} placeholder='请输入转账金额' value={`(CFD) ${userInfo.account},余额：${userInfo.account_balance}`} disabled />
+                </Form.Item>
+              )
+            }
+
+            {
+              type === 3 && (
+                <Form.Item label={<span className='fz-wb-550'>资金账户</span>}>
+                  <Input style={{ height: 50 }} placeholder='请输入转账金额' value={`(CFD) ${userInfo.account},余额：${userInfo.account_balance}`} disabled />
+                </Form.Item>
+              )
+            }
+
+            <Form.Item name="amount" rules={[{ required: true, message: "请输入转账金额" }]} label={<span className='fz-wb-550'>转账金额</span>}>
              <Input style={{ height: 50 }} placeholder='请输入转账金额' />
            </Form.Item>

            <Form.Item>
              <div className='row-center'>
-                <Button type='primary' style={{ borderRadius: 30 }}>提交</Button>
+                <Button type='primary' htmlType='submit' style={{ borderRadius: 30 }}>提交</Button>
              </div>
            </Form.Item>
          </Form>
@ -43,4 +102,4 @@ const Transfer = () => {
  )
 }

-export default Transfer
+export default observer(Transfer)
--- a/src/pages/withdraw/index.tsx
+++ b/src/pages/withdraw/index.tsx
@ -1,9 +1,74 @@
-import { Button, Form, Input, Select } from 'antd'
+import { Button, Form, Input, Select, notification } from 'antd'
 import '../../styles/home.scss'
+import { observer } from 'mobx-react'
+import store from '../../store'
+import { useMemo, useRef, useState } from 'react'
+import CountdownTimer, { CountdownTimerRef } from '../../components/CountdownTimer'
+import { http_send_email, http_withdraw } from '../../http/api'

 const Withdraw = () => {
+
+  const [form] = Form.useForm()
+  const { receiveAccount, userInfo } = store.state
+  const countdownRef = useRef<CountdownTimerRef>(null)
+
+  const options = useMemo(() => {
+    const map = receiveAccount.map(item => ({
+      label: `${item.type}:${item.address}`,
+      value: item.id
+    }))
+    return map
+  }, [receiveAccount])
+
+  const onFinish = async (values: any) => {
+
+    if (Number(values.amount) > Number(userInfo.balance)) {
+      notification.warning({
+        message: '余额不足'
+      })
+      return
+    }
+
+    return
+    const res: any = await http_withdraw({
+      ...values,
+      receiving_account_id: Number(values.receiving_account_id)
+    })
+    if (res.code === 0) {
+      form.resetFields()
+      notification.success({
+        message: '提交成功'
+      })
+    }
+
+  }
+
+  const getVerifyCode = async () => {
+    try {
+      if (countdownRef.current?.isActive) return
+      countdownRef.current?.handleStart()
+      const res: any = await http_send_email({
+        email: userInfo.email,
+        type: 2
+      })
+      if (res.code === 0) {
+        notification.success({
+          message: '验证码发送成功'
+        })
+      } else {
+        notification.error({
+          message: '验证码发送失败'
+        })
+        countdownRef.current?.handleStop()
+      }
+
+    } catch (error) {
+      countdownRef.current?.handleStop()
+    }
+  }
+
  return (
-    <div className="deposit">
+    <div className="widthdraw">
      <div className='text-white fz-22 mb-2'>办理取款</div>
      <div className="flex-1 container">
        <div className='p-2'>
@ -13,13 +78,15 @@ const Withdraw = () => {
        <div className='divider' style={{ backgroundColor: '#8492a6' }}></div>
        <div className='p-2'>
          <Form
+            onFinish={onFinish}
            layout="vertical"
+            form={form}
          >
-            <div className='row-between'>
-              <Form.Item style={{ width: '48%' }} vertical={true} label={<span className='fz-wb-550'>取款账号</span>}>
-                <Select style={{ height: 40 }} value="现金钱包 余额:$10291.51" />
+            <div className={'form-box'}>
+              <Form.Item className='input' label={<span className='fz-wb-550'>取款账号</span>}>
+                <Select style={{ height: 40 }} value={`现金钱包 余额:$${userInfo.balance}`} />
              </Form.Item>
-              <Form.Item style={{ width: '48%' }} vertical={true} label={<span className='fz-wb-550'>取款金额</span>}>
+              <Form.Item name="amount" rules={[{ required: true, message: '请输入取款金额' }]} className='input' label={<span className='fz-wb-550'>取款金额</span>}>
                <div className='row-items'>
                  <Input style={{ height: 40, flex: 1 }} placeholder='请输入取款金额' />
                  <div className='fz-wb-550 ml-1'>USD</div>
@ -27,21 +94,23 @@ const Withdraw = () => {
              </Form.Item>
            </div>

-            <div className='row-between'>
-              <Form.Item style={{ width: '48%' }} vertical={true} label={<span className='fz-wb-550'>取款方式</span>}>
-                <Select style={{ height: 40 }} placeholder="选择收款方式..." />
+            <div className='form-box'>
+              <Form.Item name="receiving_account_id" rules={[{ required: true, message: '请选择收款方式...' }]} className='input' label={<span className='fz-wb-550'>收款方式</span>}>
+                <Select style={{ height: 40 }} placeholder="选择收款方式..." options={options} />
              </Form.Item>
-              <Form.Item style={{ width: '48%' }} vertical={true} label={<span className='fz-wb-550'>验证码</span>}>
+              <Form.Item rules={[{ required: true, message: '请选择收款方式...' }]} name="code" className='input' label={<span className='fz-wb-550'>验证码</span>}>
                <div className='row-items'>
                  <Input style={{ height: 40, flex: 1 }} placeholder='请输入验证码' />
-                  <Button type="primary" className='ml-1' style={{ height: 40 }}>获取验证码</Button>
+                  <Button type="primary" className='ml-1' style={{ height: 40, width: 100 }} onClick={getVerifyCode}>
+                    <CountdownTimer ref={countdownRef} initialSeconds={60} />
+                  </Button>
                </div>
              </Form.Item>
            </div>

            <Form.Item>
              <div className='row-center'>
-                <Button type='primary' style={{ borderRadius: 30 }}>提交</Button>
+                <Button type='primary' htmlType='submit' style={{ borderRadius: 30 }}>提交</Button>
              </div>
            </Form.Item>
          </Form>
@ -51,4 +120,4 @@ const Withdraw = () => {
  )
 }

-export default Withdraw
+export default observer(Withdraw)
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@ -5,11 +5,12 @@ import '../styles/app.scss'
 import { useRouter } from "../hooks/useRouter";
 import Slider from "../components/layout/Slider";
 import Header from "../components/layout/Header";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
+import { unLoginPath } from "./routes";

 const LayoutRouter = () => {

-  const { push } = useRouter()
+  const { push, location } = useRouter()

  const { token, screenWidth } = store.state
  // 
@ -18,12 +19,46 @@ const LayoutRouter = () => {
    window.addEventListener("resize", (e) => {
      const _width = window.innerWidth;
      store.setScreenWidth(_width)
-      console.log('react', window.innerWidth);
+    })
+    window.onload = () => {
+      const _width = window.innerWidth;
+      store.setScreenWidth(_width)
+    }
+  }, [])
+
+  useEffect(() => {
+
+    if (!token && !unLoginPath.includes(location.pathname) && location.pathname !== "/submit") {
+      push('/login', null, true)
+    }
+    if (token && unLoginPath.includes(location.pathname) && location.pathname !== "/submit") {
+      push('/', null, true)
+    }
+  }, [location.pathname, token])
+
+  useEffect(() => {
+    token && store.getUserInfo()
+    token && store.getReceiveAccount()
+    !token && store.resetUserInfo()
+    !token && store.resetReceiveAccount()
+  }, [token])
+
+  useEffect(() => {
+    window.addEventListener('message', (res) => {
+      if (res.origin === process.env.REACT_APP_ORIGIN) {
+        if (res && res.data && res.data.token) {
+          store.setToken(res.data.token)
+          if (!window.sessionStorage.getItem('first_render')) {
+            window.location.reload()
+          }
+          window.sessionStorage.setItem('first_render', 'true')
+        }
+      }
    })
  }, [])

  return (
-    token ? (
+    !token ? (
      <RenderRouter />
    ) : (
      <div className="layout">
--- a/src/router/renderRouter.tsx
+++ b/src/router/renderRouter.tsx
@ -1,6 +1,7 @@
 import { Suspense } from "react";
 import { Route, Routes } from "react-router-dom";
 import routes from "./routes";
+import { observer } from "mobx-react";

 const RenderRouter = () => {
  return (
@ -21,4 +22,4 @@ const RenderRouter = () => {
  )
 }

-export default RenderRouter;
+export default observer(RenderRouter);
--- a/src/router/routes.tsx
+++ b/src/router/routes.tsx
@ -10,6 +10,20 @@ const Transfer = lazy(() => import("../pages/transfer"));
 const Withdraw = lazy(() => import("../pages/withdraw"));
 const Account = lazy(() => import("../pages/account"));
 const Security = lazy(() => import("../pages/security"));
+const Link = lazy(() => import("../pages/link"));
+const Team = lazy(() => import("../pages/team"));
+const AssetsRecords = lazy(() => import("../pages/record/assets"));
+const WithdrawRecords = lazy(() => import("../pages/record/withdraw"));
+const DepositRecords = lazy(() => import("../pages/record/deposit"));
+const Personal = lazy(() => import("../pages/personal"));
+const BonusRecords = lazy(() => import("../pages/record/bonus"));
+const EscrowRecords = lazy(() => import("../pages/record/escrow"));
+
+export const unLoginPath = [
+  "/login",
+  "/forget",
+  "/createProxy"
+]

 const routes = [
  {
@ -48,6 +62,38 @@ const routes = [
    path: "/security",
    element: <Security />
  },
+  {
+    path: "/link",
+    element: <Link />
+  },
+  {
+    path: "/team",
+    element: <Team />
+  },
+  {
+    path: "/assetsRecords",
+    element: <AssetsRecords />
+  },
+  {
+    path: "/personal",
+    element: <Personal />
+  },
+  {
+    path: '/withdrawRecords',
+    element: <WithdrawRecords />
+  },
+  {
+    path: '/depositRecords',
+    element: <DepositRecords />
+  },
+  {
+    path: '/bonusRecords',
+    element: <BonusRecords />
+  },
+  {
+    path: '/escrowRecords',
+    element: <EscrowRecords />
+  }
 ] as RouteObject[];

 export default routes;
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -1,13 +1,13 @@
 import { makeAutoObservable } from "mobx";
+import { Store } from "../types";
+import { http_account, http_receiveAccount } from "../http/api";

-interface Store {
-  state: object;
-}
-
-class AppStore implements Store {
+class AppStore {
  state = {
    token: "",
-    screenWidth: 0
+    screenWidth: 0,
+    userInfo: {} as Store.AccountDetails,
+    receiveAccount: [] as Store.ReceiveAccount[]
  };

  constructor() {
@ -22,17 +22,41 @@ class AppStore implements Store {
    // let addr =
    //   window.sessionStorage.getItem(StoreLocalStorageKey.ADDRESS) || "";
    // this.state.walletAddress = addr;
+    this.state.token = window.localStorage.getItem('Tarder_Token') || ""
    this.state.screenWidth = window.innerWidth
  }

  setToken(_token: string) {
-    this.state.token = _token
+    this.state.token = _token;
+    window.localStorage.setItem('Tarder_Token', _token)
  }

  setScreenWidth(_width: number) {
    this.state.screenWidth = _width
  }

+  async getUserInfo() {
+    const res: any = await http_account()
+    if (res.code === 0) {
+      this.state.userInfo = res.data
+    }
+  }
+
+  resetUserInfo() {
+    this.state.userInfo = {} as Store.AccountDetails
+  }
+
+  async getReceiveAccount() {
+    const res: any = await http_receiveAccount()
+    if (res.code === 0) {
+      this.state.receiveAccount = res.data
+    }
+  }
+
+  resetReceiveAccount() {
+    this.state.receiveAccount = []
+  }
+
 }

 const store = new AppStore();
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@ -85,4 +85,14 @@
  &::-webkit-scrollbar {
    display: none;
  }
-}
+}
+
+.ant-collapse-expand-icon{
+  color: #fff;
+  font-weight: bold;
+}
+
+.ant-collapse-header-text{
+  color: #fff;
+  font-weight: bold;
+}
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@ -10,6 +10,10 @@
  justify-content: center;
  align-items: center;
  cursor: pointer;
+  border: none;
+  padding: 0;
+  text-decoration: none;
+  outline: inherit;

  &:hover {
    opacity: 0.9;
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -9,7 +9,7 @@ $iterations: 10;
 body {
  font-size: 1rem;
  color: #000;
-  user-select: none;
+  // user-select: none;
  background-color: #f8f8fb;
  font-family: Play;
  width: 100%;
@ -296,4 +296,25 @@ body {
  height: 1px;
  background-color: #fff;
  transform: scaleY(0.1);
+}
+
+.tx-over {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:where(.css-dev-only-do-not-override-1q0h2je).ant-table-wrapper .ant-table-pagination-right {
+  justify-content: left;
+}
+
+:where(.css-dev-only-do-not-override-1q0h2je).ant-input-affix-wrapper>input.ant-input,
+:where(.css-dev-only-do-not-override-1q0h2je).ant-input-affix-wrapper>textarea.ant-input {
+  &::placeholder {
+    color: #999;
+  }
+}
+
+:where(.css-dev-only-do-not-override-myver8).ant-table-wrapper .ant-table-pagination-right {
+  justify-content: left;
 }
--- a/src/styles/home.scss
+++ b/src/styles/home.scss
@ -1,4 +1,10 @@
 .home {
+  .box {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
  .income {
    width: 60%;
    height: 400px;
@ -17,19 +23,35 @@

  .CFD-box {
    width: 360px;
-    height: 430px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 .05rem 0.04rem rgba(8, 5, 3, .03);
  }

-}
+  @media (max-width:1000px) {
+    .income {
+      width: 100%;
+      height: 420px;
+    }

+    .total-income {
+      width: 100%;
+      height: 250px;
+      margin-top: 20px;
+    }

+    .box {
+      flex-direction: column;
+    }

+    .CFD-box {
+      width: 100%;
+    }
+  }



+}


 .deposit {
@ -56,11 +78,97 @@
 }

 .securify {
-  
+
  .container {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 .05rem 0.04rem rgba(8, 5, 3, .03);
    border-radius: 5px;
  }
+}
+
+.widthdraw {
+  .container {
+    width: 100%;
+    background-color: #fff;
+    box-shadow: 0 .05rem 0.04rem rgba(8, 5, 3, .03);
+    border-radius: 5px;
+
+    .form-box {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .input {
+        width: 48%;
+      }
+    }
+
+    @media (max-width:700px) {
+      .form-box {
+        flex-direction: column;
+
+        .input {
+          width: 100%;
+        }
+      }
+    }
+
+  }
+
+}
+
+.link {
+  .container {
+    width: 100%;
+    background-color: #fff;
+    box-shadow: 0 .05rem 0.04rem rgba(8, 5, 3, .03);
+    border-radius: 5px;
+    max-width: 450px;
+  }
+}
+
+
+.team {
+  .container {
+    width: 100%;
+    background-color: #fff;
+    box-shadow: 0 .05rem 0.04rem rgba(8, 5, 3, .03);
+    border-radius: 5px;
+  }
+
+  .box-width {
+    width: 25%;
+  }
+
+  @media (max-width:700px) {
+    .box-width {
+      width: 50%;
+    }
+  }
+
+  @media (max-width:350px) {
+    .box-width {
+      width: 100%;
+    }
+  }
+}
+
+.records {
+
+  .container {
+    width: var(--screen);
+    background-color: #fff;
+    box-shadow: 0 .05rem 0.04rem rgba(8, 5, 3, .03);
+    border-radius: 5px;
+    height: 100%;
+    overflow-x: scroll;
+    scrollbar-color: #f7b93f #f5f5f5;
+  }
+}
+
+.ant-tabs-nav-wrap {
+  overflow: hidden;
+  overflow-x: scroll;
+  width: 400px;
 }
--- a/src/styles/login.scss
+++ b/src/styles/login.scss
@ -13,10 +13,9 @@
    color: #fff;

    .img {
-      max-width: 100%;
-      margin-top: 20px;
+      max-width: 140px;
+      margin-top: 100px;
      margin-bottom: 30px;
-
    }

    .verify-button {
@ -43,8 +42,11 @@
      &::placeholder {
        color: #999;
      }
-    }

+      &:hover {
+        background: none;
+      }
+    }
    .button {
      width: 100%;
      height: 52px;
--- a/src/types/index.ts
+++ b/src/types/index.ts
@ -0,0 +1,27 @@
+export namespace Store {
+  export interface AccountDetails {
+    account: string;
+    account_balance: string;
+    account_capital: string;
+    account_credit: string;
+    account_net_worth: string;
+    account_observer_password: string;
+    account_prepaid: string;
+    account_status: string;
+    balance: string;
+    email: string;
+    inviti_code: string;
+    name: string;
+    total_assets: string;
+    total_income: string;
+  }
+
+  export interface ReceiveAccount {
+    "address": string,
+    "fee": string,
+    "id": number,
+    "time": number,
+    "type": string
+  }
+}
+
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -0,0 +1,47 @@
+import { notification } from "antd"
+
+export function copy(value: string, cb?: Function) {
+  // 动态创建 textarea 标签
+  const textarea: any = document.createElement('textarea')
+  // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
+  textarea.readOnly = 'readonly'
+  textarea.style.position = 'absolute'
+  textarea.style.left = '-9999px'
+  // 将要 copy 的值赋给 textarea 标签的 value 属性  
+  // 网上有些例子是赋值给innerText,这样也会赋值成功，但是识别不了\r\n的换行符，赋值给value属性就可以
+  textarea.value = value
+  // 将 textarea 插入到 body 中
+  document.body.appendChild(textarea)
+  // 选中值并复制
+  textarea.select()
+  textarea.setSelectionRange(0, textarea.value.length)
+  document.execCommand('Copy')
+  document.body.removeChild(textarea)
+  notification.success({
+    message: '复制成功'
+  })
+  if (cb && Object.prototype.toString.call(cb) === '[object Function]') {
+    cb()
+  }
+}
+
+/**
+ * @param value
+ * @returns
+ */
+export const getTime = (value: number, type?: string) => {
+  let date = new Date(value);
+  let yy: number | string = date.getFullYear();
+  let mm: number | string = date.getMonth() + 1;
+  let dd: number | string = date.getDate();
+  let xs: number | string = date.getHours();
+  let ff: number | string = date.getMinutes();
+  let ss: number | string = date.getSeconds();
+  mm = mm >= 10 ? mm : "0" + mm;
+  dd = dd >= 10 ? dd : "0" + dd;
+  xs = xs >= 10 ? xs : "0" + xs;
+  ff = ff >= 10 ? ff : "0" + ff;
+  ss = ss >= 10 ? ss : "0" + ss;
+  if (type === "day") return `${yy}-${mm}-${dd}`;
+  return `${yy}-${mm}-${dd} ${xs}:${ff}`;
+};
--- a/yarn.lock
+++ b/yarn.lock
@ -3067,6 +3067,15 @@ axe-core@=4.7.0:
  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
  integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==

+axios@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.2.tgz#b625db8a7051fbea61c35a3cbb3a1daa7b9c7621"
+  integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.2.1:
  version "3.2.1"
  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
@ -4262,6 +4271,22 @@ eastasianwidth@^0.2.0:
  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==

+echarts-for-react@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz#ac5859157048a1066d4553e34b328abb24f2b7c1"
+  integrity sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    size-sensor "^1.0.1"
+
+echarts@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.0.tgz#c13945a7f3acdd67c134d8a9ac67e917830113ac"
+  integrity sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.5.0"
+
 ee-first@1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@ -5029,7 +5054,7 @@ flatted@^3.2.9:
  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
  integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==

-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.15.6:
  version "1.15.6"
  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
@ -5077,6 +5102,15 @@ form-data@^3.0.0:
    combined-stream "^1.0.8"
    mime-types "^2.1.12"

+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@ -6497,6 +6531,11 @@ jiti@^1.21.0:
  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==

+js-md5@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/js-md5/-/js-md5-0.8.3.tgz#921bab7efa95bfc9d62b87ee08a57f8fe4305b69"
+  integrity sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@ -8107,6 +8146,11 @@ proxy-addr@~2.0.7:
    forwarded "0.2.0"
    ipaddr.js "1.9.1"

+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.33:
  version "1.9.0"
  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
@ -8589,6 +8633,11 @@ react-error-overlay@^6.0.11:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==

+react-icons@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
+  integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==
+
 react-is@^16.13.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@ -9223,6 +9272,11 @@ sisteransi@^1.0.5:
  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==

+size-sensor@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-1.0.2.tgz#b8f8da029683cf2b4e22f12bf8b8f0a1145e8471"
+  integrity sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw==
+
 slash@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@ -9838,6 +9892,11 @@ tsconfig-paths@^3.15.0:
    minimist "^1.2.6"
    strip-bom "^3.0.0"

+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.8.1:
  version "1.14.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@ -10697,3 +10756,10 @@ yocto-queue@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zrender@5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.5.0.tgz#54d0d6c4eda81a96d9f60a9cd74dc48ea026bc1e"
+  integrity sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==
+  dependencies:
+    tslib "2.3.0"