Merge pull request #781 from hubiinetwork/feature/1.2.3

1.2.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hubii-core",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "author": {
     "name": "hubii",
     "email": "info@hubii.com",
@@ -318,7 +318,7 @@
     "minimist": "1.2.0",
     "moment": "2.22.2",
     "nahmii-ethereum-address": "^2.0.1",
-    "nahmii-sdk": "3.0.5",
+    "nahmii-sdk": "3.0.6",
     "prop-types": "15.6.1",
     "qrcode.react": "0.8.0",
     "react": "16.6.3",

src/components/Transaction/index.js

@@ -61,7 +61,8 @@ const Transaction = (props) => {
                 type={type === 'received' ? 'download' : 'upload'}
               />
               <TypeText>
-                {type === 'received' ? formatMessage({ id: 'received' }) : formatMessage({ id: 'sent' })}
+                {type === 'deposit' && <NahmiiText style={{ marginRight: '0.5rem' }} />}
+                {formatMessage({ id: type })}
               </TypeText>
               <SelectableText>
                 <Amount maxDecimalPlaces={18} value={amount.toString()} /> {symbol}

src/components/Transaction/tests/index.test.js

@@ -31,7 +31,7 @@ describe('<Transaction />', () => {
     const wrapper = shallow(
       <Transaction
         {...props}
-        type="recieved"
+        type="received"
       />);
     expect(wrapper).toMatchSnapshot();
   });
@@ -49,7 +49,7 @@ describe('<Transaction />', () => {
     const wrapper = shallow(
       <Transaction
         {...props}
-        type={'nahmii'}
+        layer={'nahmii'}
       />);
     expect(wrapper).toMatchSnapshot();
   });

src/containers/ConnectionStatus/saga.js

@@ -43,7 +43,11 @@ export const errorSuccessPairs = {
   [LOAD_PRICES_ERROR]: LOAD_PRICES_SUCCESS,
 };
 
-export function* handleError({ type }) {
+export function* handleError({ type, error }) {
+  if (type === LOAD_TRANSACTIONS_ERROR && error.message.match(/too many request/i)) {
+    return;
+  }
+
   const successType = errorSuccessPairs[type];
   const { timeout } = yield race({
     timeout: call(delay, 5000),

src/containers/ConnectionStatus/tests/saga.test.js

@@ -12,6 +12,8 @@ import {
   LOAD_NAHMII_BALANCES_SUCCESS,
 } from 'containers/NahmiiHoc/constants';
 
+import { LOAD_TRANSACTIONS_ERROR } from 'containers/HubiiApiHoc/constants';
+
 import root, { handleError, errorSuccessPairs } from '../saga';
 import { networkFailure, networkReconnected } from '../actions';
 
@@ -38,6 +40,17 @@ describe('handleError saga', () => {
       .not.put(networkReconnected(LOAD_NAHMII_BALANCES_ERROR))
       .run()
   );
+
+  it('skip 429 error for transaction API', () =>
+    expectSaga(handleError, { type: LOAD_TRANSACTIONS_ERROR, error: new Error('Too Many Request') })
+      .provide({
+        race: () => ({ timeout: true }),
+        take: () => {},
+      })
+      .not.put(networkFailure(LOAD_TRANSACTIONS_ERROR))
+      .not.put(networkReconnected(LOAD_TRANSACTIONS_ERROR))
+      .run()
+  );
 });
 
 describe('root Saga', () => {

src/containers/NahmiiHoc/saga.js

@@ -5,7 +5,7 @@ import { utils } from 'ethers';
 import { all, fork, takeEvery, takeLatest, select, put, call, take, cancel, race } from 'redux-saga/effects';
 import { delay } from 'redux-saga';
 import BigNumber from 'bignumber.js';
-import { requestWalletAPI, requestHardwareWalletAPI } from 'utils/request';
+import { requestHardwareWalletAPI } from 'utils/request';
 import rpcRequest from 'utils/rpcRequest';
 import { isAddressMatch } from 'utils/wallet';
 import { logErrorMsg } from 'utils/friendlyErrors';
@@ -707,26 +707,10 @@ export function* loadSettleableChallenges({ address, currency }, network, noPoll
   }
 }
 
-export function* loadReceipts({ address }, network) {
-  while (true) { // eslint-disable-line no-constant-condition
-    try {
-      const path = `trading/wallets/${address}/receipts?`;
-      let receipts = yield call((...args) => requestWalletAPI(...args), path, network);
-      receipts = receipts.map((r) => ({ ...r, operatorId: 0 }));
-      yield put(actions.loadReceiptsSuccess(address, receipts));
-    } catch (err) {
-      yield put(actions.loadReceiptsError(address));
-    } finally {
-      const TWENTY_SEC_IN_MS = 1000 * 20;
-      yield delay(TWENTY_SEC_IN_MS);
-    }
-  }
-}
-
 export function* loadWalletReceipts({ address }, network) {
   while (true) { // eslint-disable-line no-constant-condition
     try {
-      const receipts = yield call(network.nahmiiProvider.getWalletReceipts.bind(network.nahmiiProvider), address);
+      const receipts = yield call(network.nahmiiProvider.getWalletReceipts.bind(network.nahmiiProvider), address, null, 1000);
       yield put(actions.loadReceiptsSuccess(address, receipts));
     } catch (e) {
       yield put(actions.loadReceiptsError(address, e));

src/containers/NahmiiHoc/selectors.js

@@ -23,17 +23,13 @@ export const createReceiptsSelector = createSelectorCreator(
   (previousArray, currentArray) => {
     let changed = false;
     currentArray.keySeq().forEach((address) => {
-      const previousReceipts = previousArray.getIn([address, 'receipts']);
-      const currentReceipts = currentArray.getIn([address, 'receipts']);
+      const previousReceipts = previousArray.getIn([address, 'receipts']) || fromJS([]);
+      const currentReceipts = currentArray.getIn([address, 'receipts']) || fromJS([]);
 
-      if (!currentReceipts && !previousReceipts) {
-        return;
-      }
+      const previousLastCreated = previousReceipts.getIn([previousReceipts.size - 1, 'created']);
+      const currentLastCreated = currentReceipts.getIn([currentReceipts.size - 1, 'created']);
 
-      if (
-        (!previousReceipts && currentReceipts) ||
-        (previousReceipts.size !== currentReceipts.size)
-      ) {
+      if (previousLastCreated !== currentLastCreated) {
         changed = true;
       }
     });

src/containers/NahmiiHoc/tests/selectors.test.js

@@ -80,16 +80,11 @@ describe('makeSelectReceipts', () => {
         receiptsSelector(storeMock.setIn(['nahmiiHoc', 'receipts', address, 'receipts'], null))
       ).toEqual(receiptsLoaded.setIn([address, 'receipts'], null));
     });
-    it('should update the cache when the current receipts state has initialised array value', () => {
-      expect(
-        receiptsSelector(storeMock.setIn(['nahmiiHoc', 'receipts', address, 'receipts'], []))
-      ).toEqual(receiptsLoaded.setIn([address, 'receipts'], []));
-    });
   });
 
   describe('when previous receipts state has initialised', () => {
-    const store = storeMock.setIn(['nahmiiHoc', 'receipts', address, 'receipts'], fromJS([{}]));
-    const txs = receiptsLoaded.setIn([address, 'receipts'], fromJS([{}]));
+    const store = storeMock.setIn(['nahmiiHoc', 'receipts', address, 'receipts'], fromJS([{ created: '2018' }]));
+    const txs = receiptsLoaded.setIn([address, 'receipts'], fromJS([{ created: '2018' }]));
     beforeEach(() => {
       expect(
         receiptsSelector(store)
@@ -98,11 +93,16 @@ describe('makeSelectReceipts', () => {
     describe('should update the cache', () => {
       it('when the size of receipts array is different from previous state', () => {
         expect(receiptsSelector(
-          store.updateIn(['nahmiiHoc', 'receipts', address, 'receipts'], (arr) => arr.push({}))
-        )).toEqual(txs.updateIn([address, 'receipts'], (arr) => arr.push({})));
+          store.updateIn(['nahmiiHoc', 'receipts', address, 'receipts'], (arr) => arr.push(fromJS({ created: '2019' })))
+        )).toEqual(txs.updateIn([address, 'receipts'], (arr) => arr.push(fromJS({ created: '2019' }))));
       });
     });
     describe('should not update the cache', () => {
+      it('when the last created property is the same', () => {
+        expect(receiptsSelector(
+          store.updateIn(['nahmiiHoc', 'receipts', address, 'receipts'], (arr) => arr.push(fromJS({ created: '2018' })))
+        )).toEqual(txs);
+      });
       it('even when the loading state is changed', () => {
         expect(txs.getIn([address, 'loading'])).toEqual(false);
         expect(receiptsSelector(

src/containers/NahmiiWithdraw/index.js

@@ -31,6 +31,7 @@ import SelectableText from 'components/ui/SelectableText';
 import TooltipText from 'components/ui/TooltipText';
 import Input from 'components/ui/Input';
 import Select, { Option } from 'components/ui/Select';
+import { Modal } from 'components/ui/Modal';
 import TransferDescriptionItem from 'components/TransferDescriptionItem';
 import GasOptions from 'components/GasOptions';
 import AgreementButton from 'components/AgreementButton';
@@ -74,6 +75,9 @@ import {
   SettlementWarning,
   ScrollableContentWrapper,
   StyledSteps,
+  ModalTitleWrapper,
+  ModalButtonWrapper,
+  ModalContainer,
 } from './style';
 
 const Step = Steps.Step;
@@ -111,6 +115,7 @@ export class NahmiiWithdraw extends React.Component { // eslint-disable-line rea
       gasLimit: 2000000,
       gasLimitInput: '2000000',
       addContactModalVisibility: false,
+      showGasPriceConfirmModal: false,
     };
     this.onFocusNumberInput = this.onFocusNumberInput.bind(this);
     this.onBlurNumberInput = this.onBlurNumberInput.bind(this);
@@ -119,7 +124,8 @@ export class NahmiiWithdraw extends React.Component { // eslint-disable-line rea
     this.handleAssetChange = this.handleAssetChange.bind(this);
     this.generateTxStatus = this.generateTxStatus.bind(this);
     this.getRequiredSettlementAmount = this.getRequiredSettlementAmount.bind(this);
-    this.startChallenge = this.startChallenge.bind(this);
+    this.handleStartSettlement = this.handleStartSettlement.bind(this);
+    this.startSettlement = this.startSettlement.bind(this);
     this.settle = this.settle.bind(this);
     this.withdraw = this.withdraw.bind(this);
 
@@ -190,15 +196,35 @@ export class NahmiiWithdraw extends React.Component { // eslint-disable-line rea
     this.props.settle(currentWalletWithInfo.get('address'), currency, options);
   }
 
-  startChallenge(stageAmount, assetToWithdraw) {
+  getSuggestedGasPrice = () => {
+    const { gasStatistics } = this.props;
+    const estimate = gasStatistics.get('estimate');
+    const suggestedGasPrice = estimate ? parseFloat(estimate.average / 10) : 10;
+    return suggestedGasPrice;
+  }
+
+  startSettlement(stageAmount, assetToWithdraw) {
     const { currentWalletWithInfo } = this.props;
     const { assetToWithdrawMaxDecimals, gasLimit, gasPriceGwei } = this.state;
+
     const currency = this.getCurrencyAddress(assetToWithdraw.currency);
     const stageAmountBN = stageAmount.times(new BigNumber(10).pow(assetToWithdrawMaxDecimals));
     const options = { gasLimit, gasPrice: gweiToWei(gasPriceGwei).toNumber() || null };
     this.props.startChallenge(currentWalletWithInfo.get('address'), currency, stageAmountBN, options);
   }
 
+  handleStartSettlement(stageAmount, assetToWithdraw) {
+    const { gasPriceGwei } = this.state;
+    const suggestedGasPrice = this.getSuggestedGasPrice();
+
+    if (gasPriceGwei.toNumber() < suggestedGasPrice) {
+      this.setState({ showGasPriceConfirmModal: true });
+      return;
+    }
+
+    this.startSettlement(stageAmount, assetToWithdraw);
+  }
+
   withdraw(amountToWithdraw, assetToWithdraw) {
     const { currentWalletWithInfo } = this.props;
     const { assetToWithdrawMaxDecimals, gasLimit, gasPriceGwei } = this.state;
@@ -784,7 +810,7 @@ export class NahmiiWithdraw extends React.Component { // eslint-disable-line rea
                                     {TxStatus}
                                   </div>
                                 ) : (
-                                  <AgreementButton className="challenge-btn" onClick={() => this.startChallenge(requiredSettlementAmount, assetToWithdraw)} disabled={disableSettleButton}>
+                                  <AgreementButton className="challenge-btn" onClick={() => this.handleStartSettlement(requiredSettlementAmount, assetToWithdraw)} disabled={disableSettleButton}>
                                     {formatMessage({ id: 'settle_balance' })}
                                   </AgreementButton>
                                 )
@@ -950,6 +976,38 @@ export class NahmiiWithdraw extends React.Component { // eslint-disable-line rea
             {this.renderSteppers()}
           </div>
         </BottomWrapper>
+        <Modal
+          footer={null}
+          width={'41.79rem'}
+          maskClosable
+          style={{ marginTop: '1.43rem' }}
+          visible={this.state.showGasPriceConfirmModal}
+          onCancel={() => this.setState({ showGasPriceConfirmModal: false })}
+          destroyOnClose
+        >
+          <ModalTitleWrapper>
+            {formatMessage({ id: 'low_gas_price_warning_title' })}
+          </ModalTitleWrapper>
+          <ModalContainer>
+            {formatMessage({ id: 'low_gas_price_warning_content' }, {
+              gas_price: gasPriceGwei.toNumber(),
+              average: this.getSuggestedGasPrice(),
+            })}
+          </ModalContainer>
+          <ModalButtonWrapper>
+            <StyledButton
+              onClick={() => {
+                this.setState({ showGasPriceConfirmModal: false });
+                this.startSettlement(requiredSettlementAmount, assetToWithdraw);
+              }}
+            >
+              {formatMessage({ id: 'continue' })}
+            </StyledButton>
+            <StyledButton type="primary" onClick={() => this.setState({ showGasPriceConfirmModal: false })}>
+              {formatMessage({ id: 'update_gas_price' })}
+            </StyledButton>
+          </ModalButtonWrapper>
+        </Modal>
       </ContentWrapper>
     );
   }

src/containers/NahmiiWithdraw/style.js

@@ -125,3 +125,33 @@ export const StyledSteps = styled(Steps)`
     color: ${({ theme }) => theme.palette.info1};
   }
 `;
+
+export const ModalTitleWrapper = styled.div`
+  font-size: 1.6rem;
+  margin: 0 2rem;
+  text-align: center;
+  color: ${({ theme }) => theme.palette.light};
+  font-weight: 400;
+`;
+
+export const ModalContainer = styled.div`
+  overflow-x: hidden;
+  max-height: 400px;
+  padding: 2rem 0;
+  h1 {
+    color: ${({ theme }) => theme.palette.light};
+  }
+  h2 {
+    color: ${({ theme }) => theme.palette.light};
+  }
+  h3 {
+    color: ${({ theme }) => theme.palette.light};
+  }
+`;
+
+export const ModalButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: ${(props) => props.loading ? '1.79rem' : '3.57rem'};
+  margin-bottom: 1.86rem;
+`;