Charge coin

src/pages/mine/index.tsx

@@ -3,22 +3,103 @@
  * Routes:
  *   - ./src/pages/routes
  */
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect, DispatchProp } from 'dva';
-import { Spin, Tabs } from 'antd';
+import { Spin, Input, Select, message } from 'antd';
 import { formatMessage } from 'umi-plugin-locale';
-import FittedImage from 'react-fitted-image';
+import { QRCanvas } from 'qrcanvas-react';
+import Clipboard from 'react-clipboard.js';
 import { MineModelState } from './model';
-import { PageState, EstateType } from '@/types/common';
+import { PageState } from '@/types/common';
 import Header from '@/components/Header';
-import Info, { InfoItem } from '@/components/Info';
-import Failure from '@/components/Failure';
 
 import styles from './style.less';
 
+const Option = Select.Option;
+
 const MinePage: React.FC<DispatchProp & MineModelState> = ({
   dispatch,
+  pageState,
+  coin,
+  coins,
+  srcValue,
+  dstValue,
 }) => {
+  useEffect(() => {
+    dispatch({ type: 'mine/load' });
+  }, []);
+
+  let body;
+  if (pageState === PageState.Pending) {
+    body = (
+      <Spin className={styles.none} />
+    );
+  } else if (pageState === PageState.Failure) {
+    body = (
+      <div className={styles.none}>{formatMessage({ id: 'common.loadError' })}</div>
+    );
+  } else if (pageState === PageState.Success) {
+    const onAddressCopied = () => {
+      message.success(formatMessage({ id: 'common.copied' }));
+    };
+    body = (
+      <>
+        <div className={styles.section}>
+          <div className="coin-selection">
+            <span>{formatMessage({ id: 'mine.origin' })}</span>
+            <Select
+              size="small"
+              value={coin && coin.id}
+              onChange={(payload: any) => dispatch({ type: 'mine/selectCoin', payload })}
+            >
+              {coins.map(it => (
+                <Option
+                  key={it.id}
+                  value={it.id}
+                >{it.label.toUpperCase()}</Option>
+              ))}
+            </Select>
+          </div>
+          <div className="rate-trans">
+            <span>{formatMessage({ id: 'mine.calc' })}</span>
+            <Input
+              size="small"
+              value={srcValue}
+              onChange={e => dispatch({ type: 'mine/changeSrc', payload: e.target.value })}
+            /> {coin && coin.label.toUpperCase()} = {dstValue} {formatMessage({ id: 'mine.mine' })}
+          </div>
+        </div>
+
+        <div
+          className={`${styles.section} ${styles.main}`}
+        >
+          <div>{formatMessage({ id: 'mine.addressTitle' }, { label: coin && coin.label.toUpperCase() })}</div>
+          <Clipboard
+            component="div"
+            data-clipboard-text={coin && coin.address}
+            onSuccess={onAddressCopied}
+          >
+            <QRCanvas options={{
+              data: coin ? coin.address : '',
+              size: 240,
+            }} />
+          </Clipboard>
+          <Clipboard
+            component="div"
+            className="address"
+            data-clipboard-text={coin && coin.address}
+            onSuccess={onAddressCopied}
+          >
+            {coin && coin.address}
+          </Clipboard>
+        </div>
+
+        <div className={styles.section}>
+          <span>{formatMessage({ id: 'mine.info' })}</span>
+        </div>
+      </>
+    );
+  }
 
   return (
     <div className={styles.container}>
@@ -26,6 +107,10 @@ const MinePage: React.FC<DispatchProp & MineModelState> = ({
         className="header"
         title={formatMessage({ id: 'home.mine.retrieve' })}
       />
+
+      <div className={styles.body}>
+        <div className={styles.card}>{body}</div>
+      </div>
     </div>
   );
 };