123 lines
3.4 KiB
TypeScript
123 lines
3.4 KiB
TypeScript
/**
|
|
* Title: 获取矿晶
|
|
* Routes:
|
|
* - ./src/pages/routes
|
|
*/
|
|
import React, { useEffect, useState } from 'react';
|
|
import { connect, DispatchProp } from 'dva';
|
|
import { Spin, Input, Select, message } from 'antd';
|
|
import { formatMessage } from 'umi-plugin-locale';
|
|
import _ from 'lodash';
|
|
import { QRCanvas } from 'qrcanvas-react';
|
|
import Clipboard from 'react-clipboard.js';
|
|
import { MineModelState } from './model';
|
|
import { PageState } from '@/types/common';
|
|
import Header from '@/components/Header';
|
|
|
|
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}
|
|
>{(_.take(it.label, 4).join('')).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 })}
|
|
type="number"
|
|
/> {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}>
|
|
<Header
|
|
className="header"
|
|
title={formatMessage({ id: 'home.mine.retrieve' })}
|
|
/>
|
|
|
|
<div className={styles.body}>
|
|
<div className={styles.card}>{body}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default connect(
|
|
({ mine }: any) => ({ ...mine }),
|
|
)(MinePage);
|