fix(interest): remove component state and redundant code

packages/blockchain-wallet-v4-frontend/src/data/components/interest/actions.ts

@@ -196,9 +196,9 @@ export const initializeWithdrawalForm = (coin: CoinType) => ({
 })
 export const requestWithdrawal = (
   coin: CoinType,
-  withdrawalAmountCrypto: number
+  withdrawalAmount: number
 ) => ({
-  payload: { coin, withdrawalAmountCrypto },
+  payload: { coin, withdrawalAmount },
   type: AT.REQUEST_WITHDRAWAL
 })
 

packages/blockchain-wallet-v4-frontend/src/data/components/interest/sagas.ts

@@ -168,30 +168,19 @@ export default ({
     const isDisplayed = S.getCoinDisplay(yield select())
     switch (action.meta.field) {
       case 'depositAmount':
-        if (isDisplayed) {
-          const value = new BigNumber(action.payload).toNumber()
-          let provisionalPayment: PaymentValue = yield call(
-            calculateProvisionalPayment,
-            {
-              ...values.interestDepositAccount,
-              address: values.interestDepositAccount.index
-            },
-            value
-          )
-          yield put(A.setPaymentSuccess(provisionalPayment))
-        } else {
-          const value = new BigNumber(action.payload).dividedBy(rate).toNumber()
+        const value = isDisplayed
+          ? new BigNumber(action.payload).toNumber()
+          : new BigNumber(action.payload).dividedBy(rate).toNumber()
 
-          let provisionalPayment: PaymentValue = yield call(
-            calculateProvisionalPayment,
-            {
-              ...values.interestDepositAccount,
-              address: values.interestDepositAccount.index
-            },
-            value
-          )
-          yield put(A.setPaymentSuccess(provisionalPayment))
-        }
+        let provisionalPayment: PaymentValue = yield call(
+          calculateProvisionalPayment,
+          {
+            ...values.interestDepositAccount,
+            address: values.interestDepositAccount.index
+          },
+          value
+        )
+        yield put(A.setPaymentSuccess(provisionalPayment))
         break
       case 'interestDepositAccount':
         yield put(A.setPaymentLoading())
@@ -294,15 +283,11 @@ export default ({
   const requestWithdrawal = function * ({
     payload
   }: ReturnType<typeof A.requestWithdrawal>) {
-    const { coin, withdrawalAmountCrypto } = payload
+    const { coin, withdrawalAmount } = payload
     const FORM = 'interestWithdrawalForm'
     try {
       yield put(actions.form.startSubmit(FORM))
-      yield delay(3000)
-      const withdrawalAmountSats = convertStandardToBase(
-        coin,
-        withdrawalAmountCrypto
-      )
+      const withdrawalAmountSats = convertStandardToBase(coin, withdrawalAmount)
       const receiveAddress = selectors.core.common.btc
         .getNextAvailableReceiveAddress(
           networks.btc,

packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/index.tsx

@@ -18,34 +18,37 @@ import { getData } from './selectors'
 import Loading from './template.loading'
 import Success from './template.success'
 
-class DepositForm extends PureComponent<Props, State> {
-  state: State = { displayCoin: false }
-
+class DepositForm extends PureComponent<Props> {
   componentDidMount () {
     this.handleInitializeDepositForm()
   }
 
   handleCoinClick = () => {
-    !this.state.displayCoin &&
+    const { displayCoin } = this.props.data.getOrElse({
+      displayCoin: false
+    })
+    !displayCoin &&
       this.props.formActions.clearFields(
         'interestDepositForm',
         false,
         false,
         'depositAmount'
       )
-    this.setState({ displayCoin: true })
+
     this.props.interestActions.setCoinDisplay(true)
   }
 
   handleFiatClick = () => {
-    this.state.displayCoin &&
+    const { displayCoin } = this.props.data.getOrElse({
+      displayCoin: false
+    })
+    displayCoin &&
       this.props.formActions.clearFields(
         'interestDepositForm',
         false,
         false,
         'depositAmount'
       )
-    this.setState({ displayCoin: false })
     this.props.interestActions.setCoinDisplay(false)
   }
   handleRefresh = () => {
@@ -75,7 +78,6 @@ class DepositForm extends PureComponent<Props, State> {
           onSubmit={this.handleSubmit}
           handleCoinClick={this.handleCoinClick}
           handleFiatClick={this.handleFiatClick}
-          displayCoin={this.state.displayCoin}
         />
       ),
       Failure: () => <DataError onClick={this.handleRefresh} />,
@@ -97,10 +99,6 @@ const mapDispatchToProps = (dispatch: Dispatch): LinkDispatchPropsType => ({
 
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
-export type State = {
-  displayCoin: boolean
-}
-
 export type LinkDispatchPropsType = {
   analyticsActions: typeof actions.analytics
   formActions: typeof actions.form
@@ -109,6 +107,7 @@ export type LinkDispatchPropsType = {
 export type SuccessStateType = {
   coin: CoinType
   depositLimits: InterestMinMaxType
+  displayCoin: boolean
   formErrors: { depositAmount?: 'ABOVE_MAX' | 'BELOW_MIN' | boolean }
   interestLimits: InterestLimitsType
   interestRate: InterestRateType

packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/selectors.ts

@@ -11,6 +11,7 @@ export const getData = (state: RootState) => {
   const interestLimitsR = selectors.components.interest.getInterestLimits(state)
   const interestRateR = selectors.components.interest.getInterestRate(state)
   const depositLimits = selectors.components.interest.getDepositLimits(state)
+  const displayCoin = selectors.components.interest.getCoinDisplay(state)
   const paymentR = selectors.components.interest.getPayment(state)
   const supportedCoinsR = selectors.core.walletOptions.getSupportedCoins(state)
   const walletCurrencyR = selectors.core.settings.getCurrency(state)
@@ -27,6 +28,7 @@ export const getData = (state: RootState) => {
       coin,
       formErrors,
       depositLimits,
+      displayCoin,
       interestLimits,
       interestRate,
       payment,

packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/template.success.tsx

@@ -52,7 +52,7 @@ import {
   TopText
 } from './model'
 import { maxDepositAmount, minDepositAmount } from './validation'
-import { State, SuccessStateType } from '.'
+import { SuccessStateType } from '.'
 import TabMenuTimeFrame from './TabMenuTimeFrame'
 
 const calcCompoundInterest = (principal, rate, term) => {
@@ -563,8 +563,7 @@ type LinkStatePropsType = {
   values?: InterestDepositFormType
 }
 
-export type Props = State &
-  SuccessStateType &
+export type Props = SuccessStateType &
   ConnectedProps<typeof connector> &
   FormProps
 

packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/validation.tsx

@@ -4,25 +4,17 @@ import { Props } from './template.success'
 
 export const minDepositAmount = (value, allValues, props: Props) => {
   if (!value) return true
-  if (props.displayCoin) {
-    return new BigNumber(value).isLessThan(props.depositLimits.minCoin)
-      ? 'BELOW_MIN'
-      : false
-  } else {
-    return new BigNumber(value).isLessThan(props.depositLimits.minFiat)
-      ? 'BELOW_MIN'
-      : false
-  }
+  const minDeposit = props.displayCoin
+    ? props.depositLimits.minCoin
+    : props.depositLimits.minFiat
+  return new BigNumber(value).isLessThan(minDeposit) ? 'BELOW_MIN' : false
 }
+
 export const maxDepositAmount = (value, allValues, props: Props) => {
   if (!value) return true
-  if (props.displayCoin) {
-    return new BigNumber(props.depositLimits.maxCoin).isLessThan(value)
-      ? 'ABOVE_MAX'
-      : false
-  } else {
-    return new BigNumber(props.depositLimits.maxFiat).isLessThan(value)
-      ? 'ABOVE_MAX'
-      : false
-  }
+  const maxDeposit = props.displayCoin
+    ? props.depositLimits.maxCoin
+    : props.depositLimits.maxFiat
+
+  return new BigNumber(maxDeposit).isLessThan(value) ? 'ABOVE_MAX' : false
 }

packages/blockchain-wallet-v4-frontend/src/modals/Interest/WithdrawalForm/index.tsx

@@ -18,33 +18,37 @@ import { getData } from './selectors'
 import Loading from './template.loading'
 import WithdrawalForm from './template.success'
 
-class WithdrawalFormContainer extends PureComponent<Props, State> {
-  state: State = { displayCoin: false }
+class WithdrawalFormContainer extends PureComponent<Props> {
   componentDidMount () {
     this.props.interestActions.initializeWithdrawalForm('BTC')
   }
 
   handleCoinClick = () => {
-    !this.state.displayCoin &&
+    const { displayCoin } = this.props.data.getOrElse({
+      displayCoin: false
+    })
+    !displayCoin &&
       this.props.formActions.clearFields(
-        'interestDepositForm',
+        'interestWithdrawalForm',
         false,
         false,
-        'depositAmount'
+        'withdrawalAmount'
       )
-    this.setState({ displayCoin: true })
+
     this.props.interestActions.setCoinDisplay(true)
   }
 
   handleFiatClick = () => {
-    this.state.displayCoin &&
+    const { displayCoin } = this.props.data.getOrElse({
+      displayCoin: false
+    })
+    displayCoin &&
       this.props.formActions.clearFields(
-        'interestDepositForm',
+        'interestWithdrawalForm',
         false,
         false,
-        'depositAmount'
+        'withdrawalAmount'
       )
-    this.setState({ displayCoin: false })
     this.props.interestActions.setCoinDisplay(false)
   }
 
@@ -59,7 +63,6 @@ class WithdrawalFormContainer extends PureComponent<Props, State> {
         <WithdrawalForm
           {...val}
           {...this.props}
-          displayCoin={this.state.displayCoin}
           handleCoinClick={this.handleCoinClick}
           handleFiatClick={this.handleFiatClick}
         />
@@ -82,17 +85,14 @@ const mapDispatchToProps = (dispatch: Dispatch): LinkDispatchPropsType => ({
 
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
-export type State = {
-  displayCoin: boolean
-}
-
 export type SuccessStateType = {
   accountBalanceStandard: number
   accountBalances: InterestAccountBalanceType
+  availToWithdrawCrypto: number
   availToWithdrawFiat: number
   coin: CoinType
+  displayCoin: boolean
   interestLimits: InterestLimitsType
-  lockedCoin: number
   rates: RatesType
   supportedCoins: SupportedCoinsType
   walletCurrency: FiatType

packages/blockchain-wallet-v4-frontend/src/modals/Interest/WithdrawalForm/selectors.ts

@@ -7,6 +7,7 @@ import { selectors } from 'data'
 export const getData = state => {
   const btcRateR = selectors.core.data.btc.getRates(state)
   const coin = selectors.components.interest.getCoinType(state)
+  const displayCoin = selectors.components.interest.getCoinDisplay(state)
   const accountBalancesR = selectors.components.interest.getInterestAccountBalance(
     state
   )
@@ -23,11 +24,12 @@ export const getData = state => {
       interestLimits
     ) => ({
       accountBalances,
-      accountBalanceStandard: convertBaseToStandard(
+      accountBalanceStandard: accountBalances[coin].balance,
+      availToWithdrawCrypto: Exchange.convertCoinToCoin({
+        value: accountBalances[coin].balance - accountBalances[coin].locked,
         coin,
-        accountBalances[coin].balance
-      ),
-      lockedCoin: convertBaseToStandard(coin, accountBalances[coin].locked),
+        baseToStandard: true
+      }).value,
       availToWithdrawFiat:
         Exchange.convertCoinToFiat(
           convertBaseToStandard(coin, accountBalances[coin].balance),
@@ -42,6 +44,7 @@ export const getData = state => {
           rates
         ),
       coin,
+      displayCoin,
       rates,
       supportedCoins,
       walletCurrency,

packages/blockchain-wallet-v4-frontend/src/modals/Interest/WithdrawalForm/template.success.tsx

@@ -37,7 +37,7 @@ import {
   Top,
   Wrapper
 } from './model'
-import { LinkDispatchPropsType, State, SuccessStateType } from '.'
+import { LinkDispatchPropsType, SuccessStateType } from '.'
 import { maximumWithdrawalAmount, minimumWithdrawalAmount } from './validation'
 
 const FORM_NAME = 'interestWithdrawalForm'
@@ -46,6 +46,7 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> &
   Props> = props => {
   const {
     accountBalances,
+    availToWithdrawCrypto,
     availToWithdrawFiat,
     coin,
     accountBalanceStandard,
@@ -55,7 +56,6 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> &
     handleFiatClick,
     interestActions,
     invalid,
-    lockedCoin,
     rates,
     submitting,
     supportedCoins,
@@ -64,7 +64,7 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> &
   } = props
   const handleFormSubmit = e => {
     e.preventDefault()
-    interestActions.requestWithdrawal(coin, withdrawalAmountForm)
+    interestActions.requestWithdrawal(coin, withdrawalAmountCrypto)
   }
 
   const currencySymbol = Exchange.getSymbol(walletCurrency) as string
@@ -93,25 +93,11 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> &
         value: withdrawalAmount
       }).value
 
-  const withdrawalAmountForm = displayCoin
-    ? withdrawalAmount
-    : Exchange.convertCoinToCoin({
-        value: Exchange.convertFiatToBtc({
-          fromCurrency: walletCurrency,
-          toUnit: 'SAT',
-          rates,
-          value: withdrawalAmount
-        }).value,
-        coin,
-        baseToStandard: true
-      }).value
-
   const interestBalanceStandard = Exchange.convertCoinToCoin({
     value: accountInterestBalance || 0,
     coin: 'BTC',
     baseToStandard: true
   }).value
-  const availToWithdrawCrypto = accountBalanceStandard - lockedCoin
 
   if (!account) return null
 
@@ -367,8 +353,7 @@ type OwnProps = {
 export type Props = OwnProps &
   LinkStatePropsType &
   SuccessStateType &
-  LinkDispatchPropsType &
-  State
+  LinkDispatchPropsType
 
 const enhance = compose(
   reduxForm<{}, Props>({ form: FORM_NAME }),