提取

src/pages/check/service.ts

@@ -31,7 +31,7 @@ export async function signIn(areacode: AreaCode, phone: string, password: string
 
 export async function signUp(areacode: AreaCode, phone: string, password: string, code: string, inviter: string): Promise<string> {
   const { ok, msg, data } = await http.post(
-    '/sign/up',
+    '/sign/upwi',
     {
       phone: encodePhone(areacode, phone),
       password,

src/pages/draw/index.tsx

@@ -0,0 +1,166 @@
+/**
+ * Title: 获取矿晶
+ * Routes:
+ *   - ./src/pages/routes
+ */
+import React, { useEffect } from 'react';
+import { connect, DispatchProp } from 'dva';
+import { Spin, Input, Select, Icon, Button, message, Modal } from 'antd';
+import { formatMessage } from 'umi-plugin-locale';
+import { DrawModelState } from './model';
+import { PageState } from '@/types/common';
+import Header from '@/components/Header';
+
+import styles from './style.less';
+
+const Option = Select.Option;
+
+const DrawPage: React.FC<DispatchProp & DrawModelState> = ({
+  dispatch,
+  pageState,
+  coin,
+  coins,
+  balance,
+  address,
+  amount,
+  fee,
+  actual,
+  confirmVisible,
+  confirmLoading,
+  password,
+}) => {
+  useEffect(() => {
+    dispatch({ type: 'draw/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 coinLabel = coin && coin.label.toUpperCase();
+    const onScan = () => {
+      message.warn(formatMessage({ id: 'draw.qrPrompt' }));
+    }
+    const confirmContent = (
+      <Modal
+        visible={confirmVisible}
+        onCancel={() => dispatch({ type: 'draw/onUpdateState', confirmVisible: false })}
+        onOk={() => dispatch({ type: 'draw/draw' })}
+        okText={formatMessage({ id: 'common.ok' })}
+        cancelText={formatMessage({ id: 'common.cancel' })}
+        confirmLoading={confirmLoading}
+        title={formatMessage({ id: 'common.prompt' })}
+        maskClosable={false}
+      >
+        <span style={{ wordBreak: 'break-all' }}>
+          {formatMessage(
+            { id: 'draw.summary' },
+            { num: amount, coin: coinLabel, address },
+          )}
+        </span>
+        <div style={{ marginTop: 24 }}>
+          <span>{formatMessage({ id: 'draw.pwdPrompt' })}</span>
+          <Input
+            style={{ marginTop: 8 }}
+            value={password}
+            onChange={e => dispatch({ type: 'draw/onUpdateState', password: e.target.value })}
+            type="password"
+          />
+        </div>
+      </Modal>
+    );
+    body = (
+      <>
+        <div className={styles.section}>
+          <div className="coin-selection">
+            <span>{formatMessage({ id: 'draw.selection' })}</span>
+            <Select
+              size="small"
+              value={coin && coin.id}
+              onChange={(payload: any) => dispatch({ type: 'draw/selectCoin', payload })}
+            >
+              {coins.map(it => (
+                <Option
+                  key={it.id}
+                  value={it.id}
+                >{it.label.toUpperCase()}</Option>
+              ))}
+            </Select>
+          </div>
+        </div>
+
+        <div
+          className={`${styles.section}`}
+        >
+          <div>{formatMessage({ id: 'draw.target' }, { label: coinLabel })}</div>
+          <Input
+            value={address}
+            className="app-input"
+            placeholder={formatMessage({ id: 'draw.placeholder' })}
+            suffix={<Icon onClick={onScan} type="scan" />}
+            onChange={e => dispatch({ type: 'draw/changeAddress', payload: e.target.value })}
+          />
+        </div>
+
+        <div className={styles.section}>
+          <div className="with-postfix">
+            <span>{formatMessage({ id: 'draw.amount' })}</span>
+            <span className="small-info">
+              {formatMessage(
+                { id: 'draw.avaliable' },
+                { num: balance || 0, coin: coinLabel },
+              )}
+            </span>
+          </div>
+          <Input
+            className="app-input"
+            placeholder={formatMessage({ id: 'draw.drawHint' })}
+            addonAfter={coinLabel}
+            type="number"
+            value={amount}
+            onChange={e => dispatch({ type: 'draw/changeAmount', payload: e.target.value })}
+          />
+          <div className="small-info right">
+            {formatMessage({ id: 'draw.fee' }, { num: fee || 0, coin: coinLabel })}
+          </div>
+          <div className="small-info right">
+            {formatMessage({ id: 'draw.actual' }, { num: actual || 0, coin: coinLabel })}
+          </div>
+        </div>
+
+        <Button
+          type="primary"
+          className={styles.btn}
+          onClick={() => dispatch({ type: 'draw/performDraw' })}
+        >
+          {formatMessage({ id: 'draw.draw' })}
+        </Button>
+
+        {confirmContent}
+      </>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <Header
+        className="header"
+        title={formatMessage({ id: 'draw.title' })}
+      />
+
+      <div className={styles.body}>
+        <div className={styles.card}>{body}</div>
+      </div>
+    </div>
+  );
+};
+
+export default connect(
+  ({ draw }: any) => ({ ...draw }),
+)(DrawPage);

src/pages/draw/model.ts

@@ -0,0 +1,169 @@
+import { Model, routerRedux } from "dva";
+import _ from 'lodash';
+import { PageState, CoinDrawn, FundBasic } from '@/types/common';
+import { getCoins, retrieveBalance, calcFee, withdraw } from './service';
+import { getFundBasic } from '@/services/common';
+import { message, Modal } from 'antd';
+import { formatMessage } from 'umi-plugin-locale';
+import BigNumber from 'bignumber.js';
+import { dispatch } from '@/utils/utils';
+
+export interface DrawModelState {
+  coins: CoinDrawn[];
+  pageState: PageState;
+  coin: CoinDrawn | null;
+
+  basic: FundBasic | null,
+  balance: string;
+  address: string;
+  amount: string;
+  fee: string; // 转账费用
+  actual: string; // 实际到账
+
+  confirmVisible: boolean;
+  password: string;
+  confirmLoading: boolean;
+}
+
+const initState: DrawModelState = {
+  coins: [],
+  coin: null,
+  pageState: PageState.Pending,
+
+  basic: null,
+  balance: '',
+  address: '',
+  amount: '',
+  fee: '',
+  actual: '',
+
+  confirmVisible: false,
+  password: '',
+  confirmLoading: false,
+};
+
+const model: Model = {
+  namespace: 'draw',
+
+  state: initState,
+
+  effects: {
+    *load(_, { put, call, all }) {
+      yield put({ type: 'onUpdateState', pageState: PageState.Pending });
+      try {
+        const [coins, basic]: [CoinDrawn[], FundBasic] = yield all([
+          call(getCoins),
+          call(getFundBasic),
+        ]);
+        const coin = coins[0];
+        yield put({
+          type: 'onUpdateState',
+          pageState: PageState.Success,
+          coins,
+          coin,
+          basic,
+          balance: retrieveBalance(basic, coin),
+        });
+      } catch (e) {
+        yield put({
+          type: 'onUpdateState',
+          pageState: PageState.Failure,
+        });
+      }
+    },
+
+    *selectCoin({ payload: id }, { put, select }) {
+      const { coins, basic } = yield select((state: any) => state.draw);
+      const coin = _.find(coins, ['id', id]);
+      yield put({
+        type: 'onUpdateState',
+        coin,
+        balance: retrieveBalance(basic, coin),
+      });
+    },
+
+    *changeAddress({ payload }, { put }) {
+      if (!/^[\da-zA-Z]*$/.test(payload)) return;
+      yield put({
+        type: 'onUpdateState',
+        address: payload,
+      })
+    },
+
+    *changeAmount({ payload }, { put, select }) {
+      if (isNaN(payload)) return;
+      const { coin } = (yield select((state: any) => state.draw)) as DrawModelState;
+      if (!coin) return;
+      const { fee, actual } = calcFee(coin, payload);
+      yield put({
+        type: 'onUpdateState',
+        amount: payload,
+        fee,
+        actual,
+      });
+    },
+
+    *performDraw(_, { put, select }) {
+      const {
+        coin,
+        amount,
+        address,
+        balance,
+      } = (yield select((state: any) => state.draw)) as DrawModelState;
+      if (!coin || !balance) return;
+      if (!address) return message.warn(formatMessage({ id: 'draw.targetPrompt' }));
+      const inputAmount = new BigNumber(amount || 0);
+      if (inputAmount.lt(1000)) return message.warn(formatMessage({ id: 'draw.amountLt' }));
+      if (inputAmount.gt(balance)) return message.warn(formatMessage({ id: 'draw.amountGt' }));
+      yield put({
+        type: 'onUpdateState',
+        confirmVisible: true,
+        confirmLoading: false,
+        password: '',
+      })
+    },
+
+    *draw(_, { put, select, call }) {
+      const {
+        coin,
+        amount,
+        address,
+        password,
+      } = (yield select((state: any) => state.draw)) as DrawModelState;
+      if (!coin) return;
+      if (!address) return message.warn(formatMessage({ id: 'draw.targetPrompt' }));
+      if (!password) return;
+      yield put({ type: 'onUpdateState', confirmLoading: true });
+      try {
+        yield call(withdraw, coin, address, amount, password);
+        yield put({
+          type: 'onUpdateState',
+          confirmVisible: false,
+        });
+        Modal.info({
+          title: formatMessage({ id: 'common.prompt' }),
+          content: formatMessage({ id: 'draw.success' }),
+          okText: formatMessage({ id: 'common.ok' }),
+          cancelText: formatMessage({ id: 'common.cancel' }),
+          maskClosable: false,
+          onOk: () => dispatch(routerRedux.goBack()),
+        });
+      } catch (e) {
+        message.error(e.message);
+      } finally {
+        yield put({ type: 'onUpdateState', confirmLoading: false });
+      }
+    }
+  },
+
+  reducers: {
+    onUpdateState(state, payload) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};
+
+export default model;

src/pages/draw/service.ts

@@ -0,0 +1,55 @@
+import http from '@/utils/http';
+import _ from 'lodash';
+import BigNumber from 'bignumber.js';
+import { CoinDrawn, FundBasic } from '@/types/common';
+import { loadDrawCoins, storeDrawCoins } from '@/utils/storage';
+
+export async function getCoins(): Promise<CoinDrawn[]> {
+  const coinsCached = loadDrawCoins();
+  if (coinsCached && coinsCached.length) {
+    return coinsCached;
+  }
+
+  const { ok, msg, data } = await  http.get<CoinDrawn[]>('/fund/withdrawCoins');
+
+  if (!ok || !data) {
+    throw Error(msg);
+  }
+  storeDrawCoins(data);
+
+  return data;
+}
+
+export async function withdraw(
+  coin: CoinDrawn,
+  targetAddress: string,
+  amount: string,
+  password: string,
+): Promise<void> {
+  const { ok, msg } = await http.post('/fund/withdraw', {
+    coinId: coin.id,
+    targetAddress,
+    amount,
+    password,
+  });
+  if (ok) return
+  throw Error(msg);
+}
+
+export function retrieveBalance(basic?: FundBasic, coin?: CoinDrawn): string {
+  if (!basic || !coin) return '';
+  return (basic as any)[coin.label.toLocaleLowerCase()]
+}
+
+export function calcFee(coin: CoinDrawn, input: string): { fee: string, actual: string } {
+  const fail = { fee: '', actual: '' };
+  if (!coin || !input) return fail;
+  const i = new BigNumber(input);
+  const f = new BigNumber(coin.fee);
+  if (i.isNaN() || f.isNaN()) return fail;
+  const fee = i.times(f);
+  return {
+    fee: fee.decimalPlaces(2).toString(),
+    actual: i.minus(fee).decimalPlaces(2).toString(),
+  };
+}

src/pages/draw/style.less

@@ -0,0 +1,117 @@
+
+@import '../../global.less';
+
+.container {
+  height: 100%;
+  background: linear-gradient(to bottom, @blue-one, @blue-two);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  :global {
+    .header {
+      background-color: rgba(255,255,255,0);
+      color: white;
+    }
+
+    .ant-btn-primary {
+      border-width: 0;
+      background-color: @blue-one;
+    }
+  }
+}
+
+.body {
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.none {
+  text-align: center;
+  width: 100%;
+  padding-top: 40%;
+}
+
+.card {
+  background-color: #fff;
+  margin: 10px;
+  padding-bottom: 20px;
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, .2);
+  min-height: 60%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+@pLeft: 48px;
+@pRight: 30px;
+@pTop: 20px;
+
+.btn {
+  margin-left: @pLeft;
+  margin-right: @pRight;
+  margin-top: 40px;
+}
+
+.section {
+  padding-left: @pLeft;
+  padding-right: @pRight;
+  padding-top: @pTop;
+  position: relative;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    @size: 10px;
+    width: @size;
+    height: @size;
+    background-color: @blue-two;
+    border-radius: @size / 2;
+    top: @pTop + @size / 2 + 2px;
+    left: @pLeft / 2 - @size / 2;
+  }
+
+  :global {
+    .app-input {
+      margin: 8px 0;
+    }
+
+    .with-postfix {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+    }
+
+    .small-info {
+      font-weight: lighter;
+      font-size: 0.8rem;
+    }
+
+    .coin-selection {
+      display: flex;
+      align-items: baseline;
+
+      .ant-select {
+        flex-grow: 1;
+        margin: 0 4px;
+      }
+    }
+
+    .right {
+      text-align: right;
+    }
+  }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  :global {
+    canvas {
+      margin: 10px 0;
+    }
+  }
+}

src/pages/home/fund/index.tsx

@@ -6,7 +6,6 @@ import { HomeFundModelState } from './model';
 import { Journal, JournalOp } from '@/types/common';
 import Label from '@/components/Label';
 import List from '@/components/List';
-import { dispatch } from '@/utils/utils';
 
 import styles from './style.less';
 
@@ -19,6 +18,7 @@ const FundPage: React.FC<HomeFundModelState & DispatchProp> = ({
   data,
   refreshingBasic,
   errorBasic,
+  loadingDraw,
   info,
 }) => {
 
@@ -42,25 +42,26 @@ const FundPage: React.FC<HomeFundModelState & DispatchProp> = ({
       <div className="bg" />
       <span className="title">{formatMessage({ id: 'home.fund.total' })}</span>
       <span className="content">
-        <span className="large">{info ? info.balanceSum : 0}</span>
+        <span className="large">{info ? info.sum : 0}</span>
         VIC
       </span>
       <div className={styles.card}>
         <div className="left">
           <span className="line">
             <span className="title2">{formatMessage({ id: 'home.fund.totalVIC' })}</span>
-            <span className="value">+{info ? info.balanceVIC : 0} VIC</span>
+            <span className="value">+{info ? info.vic : 0} VIC</span>
           </span>
           <span className="line">
             <span className="title2">{formatMessage({ id: 'home.fund.totalUSDT' })}</span>
-            <span className="value">+{info ? info.balanceUSDT : 0} USDT</span>
+            <span className="value">+{info ? info.usdt : 0} USDT</span>
           </span>
         </div>
 
         <div
           className="right app-btn"
+          onClick={() => dispatch({ type: 'homeFund/gotoDraw' })}
         >
-          {formatMessage({ id: 'home.fund.draw' })}
+          {loadingDraw ? <Spin size="small" /> : formatMessage({ id: 'home.fund.draw' })}
         </div>
       </div>
     </div>
@@ -79,7 +80,7 @@ const FundPage: React.FC<HomeFundModelState & DispatchProp> = ({
         <div className="detail">
           {it.detail}
         </div>
-        <div className="small">{it.timestamp}</div>
+        <div className="small">{it.createdAt}</div>
       </div>
     </div>
   );

src/pages/home/fund/model.ts

@@ -1,7 +1,9 @@
 import { Model, routerRedux } from 'dva';
-import { message } from 'antd';
+import { message, Modal } from 'antd';
 import { Journal, FundBasic } from '@/types/common';
-import { getFundList, getFundBasic } from './service';
+import { getFundList } from './service';
+import { checkFundPwd, getFundBasic } from '@/services/common';
+import { formatMessage } from 'umi-plugin-locale';
 
 export interface HomeFundModelState {
   refreshingList: boolean;
@@ -15,6 +17,7 @@ export interface HomeFundModelState {
   info: FundBasic | null;
 
   pageIndex: number;
+  loadingDraw: boolean;
 }
 
 const FundModel: Model = {
@@ -32,6 +35,7 @@ const FundModel: Model = {
     info: null,
 
     pageIndex: 1,
+    loadingDraw: false,
   } as HomeFundModelState,
 
   effects: {
@@ -99,6 +103,30 @@ const FundModel: Model = {
         });
       }
     },
+
+    *gotoDraw(_, { put, select, call }) {
+      const { loadingDraw } = yield select((state: any) => state.homeFund);
+      if (loadingDraw) return;
+      yield put({ type: 'onUpdateState', loadingDraw: true });
+      try {
+        const settled = yield call(checkFundPwd);
+        if (settled) {
+          yield put(routerRedux.push('/draw'));
+        } else {
+          Modal.confirm({
+            okText: formatMessage({ id: 'common.ok' }),
+            cancelText: formatMessage({ id: 'common.cancel' }),
+            title: formatMessage({ id: 'common.prompt' }),
+            content: formatMessage({ id: 'home.fund.prompt' }),
+            onOk: () => { message.warn('暂未完成，请再次点击'); },
+          });
+        }
+      } catch (e) {
+        message.error(e.message);
+      } finally {
+        yield put({ type: 'onUpdateState', loadingDraw: false });
+      }
+    },
   },
 
   reducers: {

src/pages/home/fund/service.ts

@@ -1,24 +1,12 @@
 import http from '@/utils/http';
-import { Journal, FundBasic } from '@/types/common';
-
-export async function getFundBasic(): Promise<FundBasic> {
-  const {
-    ok,
-    data,
-    msg,
-  } = await http.get<FundBasic>('/fund/detail');
-  if (ok && data) {
-    return data;
-  }
-  throw Error(msg);
-}
+import { Journal } from '@/types/common';
 
 export async function getFundList(pageIndex: number, pageSize: number): Promise<Journal[]> {
   const {
     ok,
     data,
     msg,
-  } = await http.get<Journal[]>('/fund/journals', {
+  } = await http.get<Journal[]>('/fund/actions', {
     pageIndex,
     pageSize,
   });

src/pages/home/fund/style.less

@@ -86,6 +86,8 @@
       .app-btn {
         user-select: none;
         white-space: nowrap;
+        width: 80px;
+        text-align: center;
         background-color: @blue-one;
         @btn-height: 28px;
         height: @btn-height;

src/pages/mine/index.tsx

@@ -66,6 +66,7 @@ const MinePage: React.FC<DispatchProp & MineModelState> = ({
               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>

src/pages/mine/model.ts

@@ -1,9 +1,7 @@
 import { Model, routerRedux } from "dva";
 import _ from 'lodash';
-import { message } from 'antd';
-import { Estate, PageState, CoinUnion } from '@/types/common';
+import { PageState, CoinUnion } from '@/types/common';
 import { getCoins, calcRate } from './service';
-import { isDev } from '@/utils/utils';
 
 export interface MineModelState {
   coins: CoinUnion[];
@@ -36,7 +34,7 @@ const model: Model = {
           type: 'onUpdateState',
           pageState: PageState.Success,
           coins,
-          coin: coins[0],
+          coin,
           srcValue: '1',
           dstValue: calcRate('1', coin && coin.rate),
         });

src/pages/mine/service.ts

@@ -1,8 +1,7 @@
 import http from '@/utils/http';
 import _ from 'lodash';
 import BigNumber from 'bignumber.js';
-import { Estate, EstateType, CoinUnion, CoinSupport, CoinAddress } from '@/types/common';
-import { calcEstate } from '@/utils/transform';
+import { CoinUnion, CoinSupport, CoinAddress } from '@/types/common';
 import { loadCoins, storeCoins } from '@/utils/storage';
 
 export async function getCoins(): Promise<CoinUnion[]> {
@@ -15,7 +14,7 @@ export async function getCoins(): Promise<CoinUnion[]> {
     { ok: sOk, data: sData, msg: sMsg },
     { ok: aOk, data: aData, msg: aMsg },
   ] = await Promise.all([
-    http.get<CoinSupport[]>('/fund/coins'),
+    http.get<CoinSupport[]>('/fund/depositCoins'),
     http.get<CoinAddress[]>('/fund/queryAddress'),
   ]);
 

src/pages/mine/style.less

@@ -24,7 +24,7 @@
 .none {
   text-align: center;
   width: 100%;
-  margin-top: 40%;
+  padding-top: 40%;
 }
 
 .card {