gary
/
frontend-recharge-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

添加功能

This commit is contained in:
zzy 2022-06-28 13:49:56 +08:00
parent 10614bdb9b
commit 4688ee9667
14 changed files with 437 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/pages/All/Address/Edit/AddAddressModal.tsx Normal file
View File

@ -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;

70
src/pages/All/Address/Edit/index.tsx Normal file
View File

@ -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;

105
src/pages/All/Address/List/index.tsx Normal file
View File

@ -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;

0
src/pages/All/Currency/Edit/components/AddCurrency.tsx Normal file
View File

0
src/pages/All/Currency/List/index.tsx Normal file
View File

107
src/pages/All/Record/List/index.tsx Normal file
View File

@ -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;

7
src/pages/Eth/Address/Edit/AddAddressModal.tsx
View File

@ -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>

8
src/pages/Eth/Address/List/index.tsx
View File

@ -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('操作成功');

23
src/pages/Eth/Record/List/index.tsx
View File

@ -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 (

8
src/pages/Login/index.less
View File

@ -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;
}
}

20
src/pages/Login/index.tsx
View File

@ -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>
);

38
src/routes/index.ts
View File

@ -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,

13
src/routes/routePath.ts
View File

@ -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`,

7
src/utils/web3.ts
View File

@ -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;
}
}