src/pages/All/Address/Edit/AddAddressModal.tsx

@@ -0,0 +1,57 @@
+// 选择作品弹窗
+import React, { useRef } from 'react';
+import { createForm } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import Modal, { ModalProps } from '@/components/Modal';
+import { Form, FormItem, Input, NumberPicker } from '@formily/antd';
+
+interface AddAddressModalPropsType extends ModalProps {
+  onOk: (val: any) => void;
+  onCancel: () => void;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    NumberPicker,
+  },
+});
+
+const form = createForm({});
+
+const AddAddressModal = ({ onOk, onCancel, ...rest }: AddAddressModalPropsType) => {
+  const handleOk = () => {
+    const formState = form.getFormState();
+    onOk(formState.values);
+  };
+
+  const handleCancel = () => {
+    onCancel();
+  };
+
+  return (
+    <Modal title="添加地址" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
+      <Form form={form} labelCol={4} wrapperCol={18}>
+        <SchemaField>
+          <SchemaField.String
+            name="alias"
+            title="备注"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.Number
+            name="num"
+            title="数量"
+            required
+            x-decorator="FormItem"
+            x-component="NumberPicker"
+          />
+        </SchemaField>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddAddressModal;

src/pages/All/Address/Edit/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { createForm } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import { message, Spin } from 'antd';
+import DetailPageContainer from '@/components/DetailPageContainer';
+import { AddAddress } from '@/services/eth';
+import { initWeb3, walletSign } from '../../../../utils/web3';
+import { Form, FormItem, Input, FormButtonGroup, Submit } from '@formily/antd';
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    Submit,
+  },
+});
+const form = createForm({});
+const WorkEdit = () => {
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (val) => {
+    setLoading(true);
+    try {
+      await initWeb3();
+      const signInfo = await walletSign();
+      val.key = signInfo.raw;
+      val.sign = signInfo.sign;
+      val.coinType = 'eth';
+      val.num = parseInt(val.num);
+      const params = { ...val };
+      await AddAddress(params);
+      message.success('操作成功');
+      setLoading(false);
+      history.back();
+    } catch (e) {
+      setLoading(false);
+    }
+  };
+  return (
+    <DetailPageContainer>
+      <Spin spinning={loading}>
+        <Form form={form} labelCol={4} wrapperCol={18} onAutoSubmit={handleSubmit}>
+          <SchemaField>
+            <SchemaField.String
+              name="alias"
+              title="备注"
+              required
+              x-decorator="FormItem"
+              x-component="Input"
+            />
+            <SchemaField.Number
+              name="num"
+              title="数量"
+              required
+              x-decorator="FormItem"
+              x-component="Input"
+            />
+          </SchemaField>
+          <FormButtonGroup.FormItem>
+            <Submit block size="large">
+              提交
+            </Submit>
+          </FormButtonGroup.FormItem>
+        </Form>
+      </Spin>
+    </DetailPageContainer>
+  );
+};
+
+export default WorkEdit;

src/pages/All/Address/List/index.tsx

@@ -0,0 +1,105 @@
+import React, { useRef, useState } from 'react';
+import Table, { ProColumns, ActionType } from '@/components/Table';
+import { queryAddressList } from '@/services/eth';
+import { fetchTableData } from '@/utils/table';
+import CoinType from '@/constants/enum/coinType';
+import AddAddressModal from '../Edit/AddAddressModal';
+import { AddAddress } from '@/services/eth';
+import { initWeb3, walletSign } from '../../../../utils/web3';
+import { message, Select } from 'antd';
+
+const AddressList = () => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [selectValue, setSelectValue] = useState(CoinType.ETH);
+
+  const tableRef = useRef<ActionType>();
+  const columns: ProColumns<any>[] = [
+    {
+      title: '类型',
+      dataIndex: 'coinType',
+      hideInTable: true,
+      initialValue: CoinType.ETH,
+      renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
+        return (
+          <Select
+            options={[
+              {
+                label: 'ETH',
+                value: CoinType.ETH,
+              },
+              {
+                label: 'TRON',
+                value: CoinType.TRON,
+              },
+            ]}
+            onChange={(val) => {
+              setSelectValue(val);
+            }}
+          />
+        );
+      },
+    },
+    {
+      title: '备注',
+      dataIndex: 'remarks',
+      hideInSearch: true,
+      width: '20%',
+      // hideInSearch: true,
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+      hideInSearch: true,
+      ellipsis: true,
+    },
+
+    {
+      title: 'key',
+      dataIndex: 'key',
+      hideInSearch: true,
+    },
+  ];
+  return (
+    <div>
+      <Table
+        columns={columns}
+        // indexColumn
+        rowKey="id"
+        actionRef={tableRef}
+        toolBarActions={[
+          {
+            type: 'add',
+            onConfirm: () => {
+              // history.push(RoutePath.ETH_ADDRESS.EDIT);
+              setIsModalVisible(true);
+            },
+          },
+        ]}
+        request={async (params) => {
+          return fetchTableData(queryAddressList, params);
+        }}
+      />
+      <AddAddressModal
+        visible={isModalVisible}
+        onCancel={function () {
+          setIsModalVisible(false);
+        }}
+        onOk={async function (val: any): Promise<void> {
+          try {
+            await initWeb3();
+            const signInfo = await walletSign();
+            val.key = signInfo.raw;
+            val.sign = signInfo.sign;
+            val.coinType = selectValue;
+            const params = { ...val };
+            await AddAddress(params);
+            message.success('操作成功');
+          } catch (e) {}
+          setIsModalVisible(false);
+        }}
+      />
+    </div>
+  );
+};
+
+export default AddressList;

src/pages/All/Record/List/index.tsx

@@ -0,0 +1,107 @@
+import React, { useRef } from 'react';
+import Table, { ProColumns, ActionType } from '@/components/Table';
+import { queryRecordList } from '@/services/eth';
+import { fetchTableData } from '@/utils/table';
+import CoinType from '@/constants/enum/coinType';
+import { web3 } from '@/utils/web3';
+import { Select } from 'antd';
+
+const AddressList = () => {
+  const tableRef = useRef<ActionType>();
+  const columns: ProColumns<any>[] = [
+    {
+      title: '类型',
+      dataIndex: 'coinType',
+      hideInTable: true,
+      initialValue: CoinType.ETH,
+      renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
+        return (
+          <Select
+            options={[
+              {
+                label: 'ETH',
+                value: CoinType.ETH,
+              },
+              {
+                label: 'TRON',
+                value: CoinType.TRON,
+              },
+            ]}
+          />
+        );
+      },
+    },
+    {
+      title: '交易哈希',
+      dataIndex: 'txHash',
+      hideInSearch: true,
+      ellipsis: true,
+      // search: { transform: (value: any) => ({ startTime: value[0], endTime: value[1] }) },
+    },
+    {
+      title: '金额',
+      dataIndex: 'amount',
+      width: '10%',
+      hideInSearch: true,
+    },
+    {
+      title: '位数',
+      dataIndex: 'decimals',
+      width: '5%',
+      hideInSearch: true,
+    },
+    {
+      title: '区块',
+      dataIndex: 'blockNumber',
+      width: '10%',
+      hideInSearch: true,
+    },
+    {
+      title: '发送地址',
+      dataIndex: 'from',
+      hideInSearch: true,
+      ellipsis: true,
+    },
+    {
+      title: '接受地址',
+      dataIndex: 'to',
+      hideInSearch: true,
+      ellipsis: true,
+    },
+  ];
+  return (
+    <div>
+      <Table
+        columns={columns}
+        // indexColumn
+        rowKey="id"
+        actionRef={tableRef}
+        // toolBarActions={[
+        //   {
+        //     type: 'add',
+        //     onConfirm: () => {
+        //       history.push(RoutePath.ETH_ADDRESS.EDIT);
+        //       setIsModalVisible(true);
+        //     },
+        //   },
+        // ]}
+        request={async (params) => {
+          // params.coinType = CoinType.ETH;
+          const res = await fetchTableData(queryRecordList, params);
+          for (const key in res.data) {
+            if (Object.prototype.hasOwnProperty.call(res.data, key)) {
+              const element = res.data[key];
+              element.amount = web3.utils
+                .toBN(element.amount)
+                .div(web3.utils.toBN(Math.pow(10, Number(element.decimals))))
+                .toNumber();
+            }
+          }
+          return res;
+        }}
+      />
+    </div>
+  );
+};
+
+export default AddressList;

src/pages/Eth/Address/Edit/AddAddressModal.tsx

@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { createForm } from '@formily/core';
 import { createSchemaField } from '@formily/react';
 import Modal, { ModalProps } from '@/components/Modal';
-import { Form, FormItem, Input } from '@formily/antd';
+import { Form, FormItem, Input, NumberPicker } from '@formily/antd';
 
 interface AddAddressModalPropsType extends ModalProps {
   onOk: (val: any) => void;
@@ -14,6 +14,7 @@ const SchemaField = createSchemaField({
   components: {
     FormItem,
     Input,
+    NumberPicker,
   },
 });
 
@@ -30,7 +31,7 @@ const AddAddressModal = ({ onOk, onCancel, ...rest }: AddAddressModalPropsType)
   };
 
   return (
-    <Modal title="选择作品" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
+    <Modal title="添加地址" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
       <Form form={form} labelCol={4} wrapperCol={18}>
         <SchemaField>
           <SchemaField.String
@@ -45,7 +46,7 @@ const AddAddressModal = ({ onOk, onCancel, ...rest }: AddAddressModalPropsType)
             title="数量"
             required
             x-decorator="FormItem"
-            x-component="Input"
+            x-component="NumberPicker"
           />
         </SchemaField>
       </Form>

src/pages/Eth/Address/List/index.tsx

@@ -15,6 +15,7 @@ const AddressList = () => {
     {
       title: '备注',
       dataIndex: 'remarks',
+      hideInSearch: true,
       width: '20%',
       // hideInSearch: true,
     },
@@ -24,11 +25,7 @@ const AddressList = () => {
       hideInSearch: true,
       ellipsis: true,
     },
-    // {
+
-    //   title: '余额',
-    //   dataIndex: 'series',
-    //   hideInSearch: true,
-    // },
     {
       title: 'key',
       dataIndex: 'key',
@@ -68,7 +65,6 @@ const AddressList = () => {
             val.key = signInfo.raw;
             val.sign = signInfo.sign;
             val.coinType = CoinType.ETH;
-            val.num = parseInt(val.num);
             const params = { ...val };
             await AddAddress(params);
             message.success('操作成功');

src/pages/Eth/Record/List/index.tsx

@@ -11,36 +11,39 @@ const AddressList = () => {
     {
       title: '交易哈希',
       dataIndex: 'txHash',
-      // width: '20%',
+      hideInSearch: true,
-      // hideInSearch: true,
+      ellipsis: true,
+      // search: { transform: (value: any) => ({ startTime: value[0], endTime: value[1] }) },
     },
     {
       title: '金额',
       dataIndex: 'amount',
-      // hideInSearch: true,
+      width: '10%',
-      // ellipsis: true,
+      hideInSearch: true,
     },
     {
       title: '位数',
       dataIndex: 'decimals',
-      // hideInSearch: true,
+      width: '5%',
-      // ellipsis: true,
+      hideInSearch: true,
     },
     {
       title: '区块',
       dataIndex: 'blockNumber',
-      // hideInSearch: true,
+      width: '10%',
+      hideInSearch: true,
     },
     {
       title: '发送地址',
       dataIndex: 'from',
-      // hideInSearch: true,
+      hideInSearch: true,
-      // ellipsis: true,
+      ellipsis: true,
     },
     {
       title: '接受地址',
       dataIndex: 'to',
-      // hideInSearch: true,
+      hideInSearch: true,
+      ellipsis: true,
     },
   ];
   return (

src/pages/Login/index.less

@@ -3,6 +3,7 @@
 .container {
   display: flex;
   flex-direction: column;
+  align-items: center;
   height: 100vh;
   overflow: auto;
   background: @layout-body-background;
@@ -23,6 +24,10 @@
   }
 }
 
+.button {
+  margin-top: 24px;
+}
+
 .content {
   flex: 1;
   padding: 32px 0;
@@ -37,7 +42,8 @@
   }
 
   .content {
-    padding: 100px 0 24px;
+    width: 40%;
+    padding: 300px 0 24px;
   }
 }
 

src/pages/Login/index.tsx

@@ -8,10 +8,11 @@ import styles from './index.less';
 import { CACHE_TOKEN } from '@/constants/cacheKey';
 
 import { initWeb3, walletSign } from '../../utils/web3';
+import { Button } from 'antd';
 
 const Login: React.FC = () => {
   const intl = useIntl();
-  const handleSubmit = async (values: API.LoginParams) => {
+  const handleSubmit = async () => {
     // 登录
     await initWeb3();
     const signInfo = await walletSign();
@@ -25,10 +26,23 @@ const Login: React.FC = () => {
     const { redirect } = query as { redirect: string };
     history.push(redirect || '/');
   };
+  const handleQRCodeSubmit = async () => {};
   return (
     <div className={styles.container}>
       <div className={styles.content}>
-        <LoginForm
+        <Button size={'large'} type="primary" block onClick={handleSubmit}>
+          登录
+        </Button>
+        <Button
+          className={styles.button}
+          size={'large'}
+          type="primary"
+          block
+          onClick={handleQRCodeSubmit}
+        >
+          扫码登录
+        </Button>
+        {/* <LoginForm
           logo={<img alt="logo" src="/logo.svg" />}
           title={defaultSettings.title as string}
           initialValues={{
@@ -82,7 +96,7 @@ const Login: React.FC = () => {
               },
             ]}
           />
-        </LoginForm>
+        </LoginForm> */}
       </div>
     </div>
   );

src/routes/index.ts

@@ -10,6 +10,44 @@ export default [
     layout: false,
     component: './Login',
   },
+  {
+    name: 'ALL',
+    path: RoutePath.ALL,
+    routes: [
+      {
+        path: RoutePath.ALL,
+        redirect: RoutePath.ALL_ADDRESS.LIST,
+        hideInMenu: true,
+      },
+      {
+        name: '地址管理',
+        path: RoutePath.ALL_ADDRESS.LIST,
+        component: './All/Address/List',
+      },
+      {
+        name: '地址详情',
+        path: RoutePath.ALL_ADDRESS.EDIT,
+        hideInMenu: true,
+        component: './All/Address/Edit',
+      },
+      {
+        name: '充值记录',
+        path: RoutePath.ALL_RECORD.LIST,
+        component: './All/Record/List',
+      },
+      {
+        name: '币种管理',
+        path: RoutePath.ALL_CURRENCY.LIST,
+        component: './Work/List',
+      },
+      {
+        name: '币种详情',
+        path: RoutePath.ALL_CURRENCY.EDIT,
+        hideInMenu: true,
+        component: './Work/Edit',
+      },
+    ],
+  },
   {
     name: 'ETH',
     path: RoutePath.ETH,

src/routes/routePath.ts

@@ -1,7 +1,20 @@
 const SETTING = '/setting';
 const ETH = '/eth';
+const ALL = '/all';
 const RoutePath = {
   LOGIN: '/login',
+  ALL: ALL,
+  ALL_ADDRESS: {
+    LIST: `${ALL}/address`,
+    EDIT: `${ALL}/address/edit`,
+  },
+  ALL_RECORD: {
+    LIST: `${ALL}/record`,
+  },
+  ALL_CURRENCY: {
+    LIST: `${ALL}/currency`,
+    EDIT: `${ALL}/currency/edit`,
+  },
   ETH: ETH,
   ETH_ADDRESS: {
     LIST: `${ETH}/address`,

src/utils/web3.ts

@@ -1,6 +1,7 @@
 import Web3 from 'web3';
 import detectEthereumProvider from '@metamask/detect-provider';
 import { getData } from '@/services/login';
+import { message } from 'antd';
 
 let provider: any;
 
@@ -28,14 +29,14 @@ export async function initWeb3() {
   } catch (reason) {
     switch (reason) {
       case 'Already processing eth_requestAccounts. Please wait.': // 已有请求存在
-        console.log('请打开MetaMask完成授权');
+        message.warning('请打开MetaMask完成授权');
         break;
       case 'User rejected provider access': //如果用户拒绝了登录请求
-        console.log('请同意登录请求');
+        message.warning('请同意登录请求');
         break;
       default:
         // 本不该执行到这里，但是真到这里了，说明发生了意外
-        console.log('登录出错！err:' + reason);
+        message.warning('登录出错！err:' + reason);
         break;
     }
   }