增加地址代码模块组件化

src/pages/Tron/Address/List/components/index.tsx

@@ -0,0 +1,55 @@
+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/Tron/Address/List/index.tsx

@@ -1,72 +1,13 @@
 import React, { useRef, useState } from 'react';
 import Table, { ProColumns, ActionType } from '@/components/Table';
-import { Modal, Spin, message } from 'antd';
+import { message } from 'antd';
-import { initWeb3, walletSign } from '../../../../utils/web3';
+import AddAddressModal from '@/pages/Tron/Address/List/components/index';
-import DetailPageContainer from '@/components/DetailPageContainer';
+import { initWeb3, walletSign } from '@/utils/web3';
-import {
-  Form,
-  FormItem,
-  Input,
-  Select,
-  Submit,
-  FormGrid,
-  ArrayItems,
-  Editable,
-  Switch,
-  ArrayTable,
-  FormButtonGroup,
-  NumberPicker,
-} from '@formily/antd';
 import { creatTronAddress, getAddressList } from '@/services/address';
-import { createForm } from '@formily/core';
-import { createSchemaField } from '@formily/react';
-
-// import { web3 } from '@/utils/web3';
 import { fetchTronTableData } from '@/utils/table';
-// import { getTronBalance, getTronTokenBalance, setTronRpc } from '@/utils/tronweb';
-
-// import { useIntl, history, FormattedMessage, useModel } from 'umi';
 const Address: React.FC = () => {
   const tableRef = useRef<ActionType>();
   const [visible, setVisible] = useState(false);
-  const form = createForm({});
-  const [loading, setLoading] = useState(false);
-  const SchemaField = createSchemaField({
-    components: {
-      FormItem,
-      FormGrid,
-      Input,
-      Select,
-      ArrayTable,
-      Switch,
-      ArrayItems,
-      NumberPicker,
-      Editable,
-    },
-  });
-  // const addAddress = () => {
-  //   setVisible(true);
-  // };
-  const handleSubmit = async (val) => {
-    const params = { ...val };
-    setLoading(true);
-    await initWeb3();
-    const signInfo = await walletSign();
-    params.key = signInfo.raw;
-    params.sign = signInfo.sign;
-    params.coinType = 'tron';
-    await creatTronAddress(params);
-    tableRef.current?.reload();
-    message.success('操作成功');
-    setLoading(false);
-  };
-  // const save = async () => {
-  //   const res = await makeTronAddress(state.form);
-  // };
-  // const featchdata = async (item) => {
-  //   const res = await getAddressList(state.form);
-  //   const ret = item
-  // };
 
   const columns: ProColumns<any>[] = [
     {
@@ -81,11 +22,6 @@ const Address: React.FC = () => {
       hideInSearch: true,
       width: '20%',
     },
-    {
-      title: '余额',
-      dataIndex: 'balance',
-      hideInSearch: true,
-    },
     {
       title: 'key',
       dataIndex: 'key',
@@ -112,43 +48,28 @@ const Address: React.FC = () => {
           return fetchTronTableData(getAddressList, params);
         }}
       />
-      <Modal
+      <AddAddressModal
-        title="添加地址"
-        centered
         visible={visible}
-        onOk={() => setVisible(false)}
+        onCancel={function () {
-        onCancel={() => setVisible(false)}
+          setVisible(false);
-        width={800}
+        }}
-      >
+        onOk={async function (val: any): Promise<void> {
-        <DetailPageContainer>
+          try {
-          <Spin spinning={loading}>
+            await initWeb3();
-            <Form form={form} labelCol={4} wrapperCol={18} onAutoSubmit={handleSubmit}>
+            const signInfo = await walletSign();
-              <SchemaField>
+            val.key = signInfo.raw;
-                <SchemaField.String
+            val.sign = signInfo.sign;
-                  name="alias"
+            val.coinType = 'tron';
-                  title="备注名"
+            const params = { ...val };
-                  required
+            await creatTronAddress(params);
-                  x-decorator="FormItem"
+            message.success('添加成功');
-                  x-component="Input"
+          } catch (e) {
+            console.log(e);
+            message.success('发生错误');
+            setVisible(false);
+          }
+        }}
       />
-                <SchemaField.Number
-                  name="num"
-                  title="数量"
-                  required
-                  x-validator="number"
-                  x-decorator="FormItem"
-                  x-component="NumberPicker"
-                />
-              </SchemaField>
-              <FormButtonGroup.FormItem>
-                <Submit block size="large">
-                  确定
-                </Submit>
-              </FormButtonGroup.FormItem>
-            </Form>
-          </Spin>
-        </DetailPageContainer>
-      </Modal>
     </div>
   );
 };

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

@@ -8,14 +8,12 @@ const Address: React.FC = () => {
     {
       title: '交易哈希',
       dataIndex: 'txHash',
-      // width: '10%',
       hideInSearch: true,
     },
     {
       title: '金额',
       dataIndex: 'amount',
       hideInSearch: true,
-      // width: '20%',
     },
 
     {
@@ -68,17 +66,8 @@ const Address: React.FC = () => {
     <div>
       <Table
         columns={columns}
-        // indexColumn
         rowKey="id"
         actionRef={tableRef}
-        // toolBarActions={[
-        //   {
-        //     type: 'add',
-        //     onConfirm: () => {
-        //       history.push(RoutePath.WORK.EDIT);
-        //     },
-        //   },
-        // ]}
         request={async (params) => {
           return fetchTronTableData(getTronRecord, params);
         }}

src/pages/Tron/Token/List/components/index.tsx

@@ -0,0 +1,93 @@
+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 AddTokenModalPropsType extends ModalProps {
+  onOk: (val: any) => void;
+  onCancel: () => void;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    NumberPicker,
+  },
+});
+
+const form = createForm({});
+
+const AddTokenModal = ({ onOk, onCancel, ...rest }: AddTokenModalPropsType) => {
+  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="network"
+            title="网络名称"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.String
+            name="rpcUrl"
+            title="RPC URL"
+            required
+            x-component-props={{ maxLength: 100, showCount: true }}
+            x-decorator="FormItem"
+            x-component="Input.TextArea"
+          />
+          <SchemaField.String
+            name="apiKey"
+            title="API Key"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.Number
+            name="contract"
+            title="代币合约地址（放空则查找主代币"
+            required
+            x-validator="number"
+            x-decorator="FormItem"
+            x-component="NumberPicker"
+          />
+          <SchemaField.String
+            name="symbol"
+            title="代币符号"
+            required
+            x-decorator="FormItem"
+            x-component="Editor"
+          />
+          <SchemaField.String
+            name="decimals"
+            title="精度"
+            required
+            x-decorator="FormItem"
+            x-component="Editor"
+          />
+          <SchemaField.String
+            name="browser"
+            title="区块浏览器"
+            required
+            x-decorator="FormItem"
+            x-component="Editor"
+          />
+        </SchemaField>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddTokenModal;

src/pages/Tron/Token/List/index.tsx

@@ -1,51 +1,12 @@
 import React, { useRef, useState } from 'react';
 import Table, { ProColumns, ActionType } from '@/components/Table';
-import { Modal, Spin, message } from 'antd';
+import { message } from 'antd';
-import { createSchemaField } from '@formily/react';
+import AddTokenModal from '@/pages/Tron/Token/List/components/index';
-import { createForm } from '@formily/core';
+import { initWeb3, walletSign } from '@/utils/web3';
-import DetailPageContainer from '@/components/DetailPageContainer';
-// import { fetchTronTableData } from '@/utils/table';
-
-import {
-  Form,
-  FormItem,
-  Input,
-  Select,
-  Submit,
-  FormGrid,
-  ArrayItems,
-  Editable,
-  Switch,
-  ArrayTable,
-  FormButtonGroup,
-  NumberPicker,
-} from '@formily/antd';
 
 const Address: React.FC = () => {
   const tableRef = useRef<ActionType>();
-  const form = createForm({});
   const [visible, setVisible] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const SchemaField = createSchemaField({
-    components: {
-      FormItem,
-      FormGrid,
-      Input,
-      Select,
-      ArrayTable,
-      Switch,
-      ArrayItems,
-      NumberPicker,
-      Editable,
-    },
-  });
-  // const state = {
-  //   queryForm: {
-  //     page: 1,
-  //     size: 20,
-  //     coin_type: 'tron',
-  //   },
-  // };
   const columns: ProColumns<any>[] = [
     {
       title: '网络名称',
@@ -96,27 +57,10 @@ const Address: React.FC = () => {
       width: 150,
     },
   ];
-  const handleSubmit = async (val) => {
-    const params = { ...val };
-    setLoading(true);
-    params.cointype = 'tron';
-    // const res = await makeTronAddress(params);
-    // if(res.code == 200){
-
-    //  }
-    tableRef.current?.reload();
-    message.success('操作成功');
-    setLoading(false);
-    //   history.back();
-    // } catch (e) {
-    //   setLoading(false);
-    // }
-  };
   return (
     <div>
       <Table
         columns={columns}
-        // indexColumn
         rowKey="id"
         actionRef={tableRef}
         toolBarActions={[
@@ -127,83 +71,29 @@ const Address: React.FC = () => {
             },
           },
         ]}
-        // request={async (params) => {
-        //   return fetchTronTableData(queryWorkList, state.queryForm);
-        // }}
       />
-      <Modal
+      <AddTokenModal
-        title="添加地址"
-        centered
         visible={visible}
-        onOk={() => setVisible(false)}
+        onCancel={function () {
-        onCancel={() => setVisible(false)}
+          setVisible(false);
-        width={800}
+        }}
-      >
+        onOk={async function (val: any): Promise<void> {
-        <DetailPageContainer>
+          try {
-          <Spin spinning={loading}>
+            await initWeb3();
-            <Form form={form} labelCol={4} wrapperCol={18} onAutoSubmit={handleSubmit}>
+            const signInfo = await walletSign();
-              <SchemaField>
+            val.key = signInfo.raw;
-                <SchemaField.String
+            val.sign = signInfo.sign;
-                  name="network"
+            val.coinType = 'tron';
-                  title="网络名称"
+            const params = { ...val };
-                  required
+            // await creatTronAddress(params);
-                  x-decorator="FormItem"
+            message.success('添加成功');
-                  x-component="Input"
+          } catch (e) {
+            console.log(e);
+            message.success('添加错误');
+            setVisible(false);
+          }
+        }}
       />
-                <SchemaField.String
-                  name="rpcUrl"
-                  title="RPC URL"
-                  required
-                  x-component-props={{ maxLength: 100, showCount: true }}
-                  x-decorator="FormItem"
-                  x-component="Input.TextArea"
-                />
-                <SchemaField.String
-                  name="apiKey"
-                  title="API Key"
-                  required
-                  x-decorator="FormItem"
-                  x-component="Input"
-                />
-                <SchemaField.Number
-                  name="contract"
-                  title="代币合约地址（放空则查找主代币"
-                  required
-                  x-validator="number"
-                  x-decorator="FormItem"
-                  x-component="NumberPicker"
-                />
-                <SchemaField.String
-                  name="symbol"
-                  title="代币符号"
-                  required
-                  x-decorator="FormItem"
-                  x-component="Editor"
-                />
-                <SchemaField.String
-                  name="decimals"
-                  title="精度"
-                  required
-                  x-decorator="FormItem"
-                  x-component="Editor"
-                />
-                <SchemaField.String
-                  name="browser"
-                  title="区块浏览器"
-                  required
-                  x-decorator="FormItem"
-                  x-component="Editor"
-                />
-              </SchemaField>
-              <FormButtonGroup.FormItem>
-                <Submit block size="large">
-                  确定
-                </Submit>
-              </FormButtonGroup.FormItem>
-            </Form>
-          </Spin>
-        </DetailPageContainer>
-      </Modal>
     </div>
   );
 };

src/utils/table.ts

@@ -1,5 +1,4 @@
 // 格式化表格获取数据接口的返回
-import { getTronBalance } from './tronweb';
 export const fetchTableData = async (
   fetch: (params: any) => Promise<any>,
   params: any,
@@ -33,14 +32,10 @@ export const fetchTronTableData = async (
   params.coinType = 'tron';
   const res = (await fetch(params)) || {};
   const data = res;
-  data.forEach((n: any) => {
+  data.forEach((n: any) => {});
-    // n.balance = getTronBalance(n.address);
-    console.log(n.address);
-  });
   data?.forEach((n: any) => {
     for (const key in formatObj) {
       n[key] = n[formatObj[key]];
-      n.balance = getTronBalance(n.address);
     }
   });
   return {