From 4688ee966733a1b5c72afd3daf1aeda7875a9f99 Mon Sep 17 00:00:00 2001 From: zzy <> Date: Tue, 28 Jun 2022 13:49:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../All/Address/Edit/AddAddressModal.tsx | 57 ++++++++++ src/pages/All/Address/Edit/index.tsx | 70 ++++++++++++ src/pages/All/Address/List/index.tsx | 105 +++++++++++++++++ .../Currency/Edit/components/AddCurrency.tsx | 0 src/pages/All/Currency/List/index.tsx | 0 src/pages/All/Record/List/index.tsx | 107 ++++++++++++++++++ .../Eth/Address/Edit/AddAddressModal.tsx | 7 +- src/pages/Eth/Address/List/index.tsx | 8 +- src/pages/Eth/Record/List/index.tsx | 23 ++-- src/pages/Login/index.less | 8 +- src/pages/Login/index.tsx | 20 +++- src/routes/index.ts | 38 +++++++ src/routes/routePath.ts | 13 +++ src/utils/web3.ts | 7 +- 14 files changed, 437 insertions(+), 26 deletions(-) create mode 100644 src/pages/All/Address/Edit/AddAddressModal.tsx create mode 100644 src/pages/All/Address/Edit/index.tsx create mode 100644 src/pages/All/Address/List/index.tsx create mode 100644 src/pages/All/Currency/Edit/components/AddCurrency.tsx create mode 100644 src/pages/All/Currency/List/index.tsx create mode 100644 src/pages/All/Record/List/index.tsx diff --git a/src/pages/All/Address/Edit/AddAddressModal.tsx b/src/pages/All/Address/Edit/AddAddressModal.tsx new file mode 100644 index 0000000..835286f --- /dev/null +++ b/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 ( + +
+ + + + +
+ + ); +}; + +export default AddAddressModal; diff --git a/src/pages/All/Address/Edit/index.tsx b/src/pages/All/Address/Edit/index.tsx new file mode 100644 index 0000000..4946e4f --- /dev/null +++ b/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 ( + + +
+ + + + + + + 提交 + + +
+ + + ); +}; + +export default WorkEdit; diff --git a/src/pages/All/Address/List/index.tsx b/src/pages/All/Address/List/index.tsx new file mode 100644 index 0000000..48fe575 --- /dev/null +++ b/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(); + const columns: ProColumns[] = [ + { + title: '类型', + dataIndex: 'coinType', + hideInTable: true, + initialValue: CoinType.ETH, + renderFormItem: (item, { type, defaultRender, ...rest }, form) => { + return ( + + ); + }, + }, + { + 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 ( +
+ { + // 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; + }} + /> + + ); +}; + +export default AddressList; diff --git a/src/pages/Eth/Address/Edit/AddAddressModal.tsx b/src/pages/Eth/Address/Edit/AddAddressModal.tsx index 219d053..835286f 100644 --- a/src/pages/Eth/Address/Edit/AddAddressModal.tsx +++ b/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 ( - +
diff --git a/src/pages/Eth/Address/List/index.tsx b/src/pages/Eth/Address/List/index.tsx index ff1d5d6..0d6de07 100644 --- a/src/pages/Eth/Address/List/index.tsx +++ b/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('操作成功'); diff --git a/src/pages/Eth/Record/List/index.tsx b/src/pages/Eth/Record/List/index.tsx index 6d791d8..4668c0c 100644 --- a/src/pages/Eth/Record/List/index.tsx +++ b/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, - // ellipsis: true, + width: '10%', + hideInSearch: true, }, { title: '位数', dataIndex: 'decimals', - // hideInSearch: true, - // ellipsis: true, + width: '5%', + hideInSearch: true, }, { title: '区块', dataIndex: 'blockNumber', - // hideInSearch: true, + width: '10%', + hideInSearch: true, }, { title: '发送地址', dataIndex: 'from', - // hideInSearch: true, - // ellipsis: true, + hideInSearch: true, + ellipsis: true, }, { title: '接受地址', dataIndex: 'to', - // hideInSearch: true, + hideInSearch: true, + ellipsis: true, }, ]; return ( diff --git a/src/pages/Login/index.less b/src/pages/Login/index.less index 88b73ab..a44d4be 100644 --- a/src/pages/Login/index.less +++ b/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; } } diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index 45404eb..b26c785 100644 --- a/src/pages/Login/index.tsx +++ b/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 (
- + 登录 + + + {/* } title={defaultSettings.title as string} initialValues={{ @@ -82,7 +96,7 @@ const Login: React.FC = () => { }, ]} /> - + */}
); diff --git a/src/routes/index.ts b/src/routes/index.ts index 986575d..4581854 100644 --- a/src/routes/index.ts +++ b/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, diff --git a/src/routes/routePath.ts b/src/routes/routePath.ts index 1594520..a82c4b9 100644 --- a/src/routes/routePath.ts +++ b/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`, diff --git a/src/utils/web3.ts b/src/utils/web3.ts index b64adcb..d5f47a7 100644 --- a/src/utils/web3.ts +++ b/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; } }