feat(interest): add btc toggle to withdraw form

packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts

@@ -643,8 +643,8 @@ type MessagesType = {
   'modals.importbtcaddress.title': 'Import Existing Bitcoin Address'
   'modals.interest.deposit.amount': 'Enter deposit amount'
   'modals.interest.deposit.calc': 'Interest Calculator'
-  'modals.interest.deposit.calcdesc': 'With {currencySymbol}{depositAmountFiat} in your Interest Account you can earn:'
-  'modals.interest.deposit.calcdesccoin': 'With {depositAmountCrypto} {coinTicker} in your Interest Account you can earn:'
+  'modals.interest.deposit.calcdesc': 'With {currencySymbol} {depositAmountFiat} in your Interest Account you can earn:'
+  'modals.interest.deposit.calcdesccoin': 'With {depositAmount} {coinTicker} in your Interest Account you can earn:'
   'modals.interest.deposit.confirm': 'Confirm Deposit'
   'modals.interest.deposit.agreement1': 'By accepting this, you agree to transfer {depositAmountFiat} ({depositAmountCrypto}) plus network fees from your Bitcoin Wallet to your Interest Account. An initial hold period of {lockupPeriod} days will be applied to your funds.'
   'modals.interest.deposit.calcfooter': 'Estimates based on current interest rate and {coin} price.'
@@ -699,7 +699,7 @@ type MessagesType = {
   'modals.interest.withdrawal.balance': 'Your {coin} Balance'
   'modals.interest.withdrawal.enteramount': 'Enter withdrawal amount'
   'modals.interest.withdrawal.loading': 'Doing work...'
-  'modals.interest.withdrawal.recap': 'You are requesting to withdraw {withdrawalAmount} ({withdrawalAmountCrypto}) from your Interest Account. After confirming this withdrawal, you will not continue to earn interest on the amount withdrawn.'
+  'modals.interest.withdrawal.recap': 'You are requesting to withdraw {withdrawalAmountFiat} ({withdrawalAmountCrypto}) from your Interest Account. After confirming this withdrawal, you will not continue to earn interest on the amount withdrawn.'
   'modals.interest.withdrawal.progress': 'In Progress'
   'modals.interest.withdrawal.progressmsg': 'Requesting a withdrawal from your Interest Account'
   'modals.interest.withdrawal.success': 'Waiting on your withdrawal to be confirmed by our team. It may take a few moments to show in your Interest Account History. No action is required at this time.'

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

@@ -87,3 +87,4 @@ export const REQUEST_WITHDRAWAL = '@EVENT.INTEREST.REQUEST_WITHDRAWAL'
 export const ROUTE_TO_TX_HASH = '@EVENT.INTEREST.ROUTE_TO_TX_HASH'
 export const SHOW_INTEREST_MODAL = '@EVENT.INTEREST.SHOW_INTEREST_MODAL'
 export const SET_INTEREST_STEP = '@EVENT.INTEREST.SET_INTEREST_STEP'
+export const SET_COIN_DISPLAY = '@EVENT.INTEREST.SET_COIN_DISPLAY'

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

@@ -233,6 +233,11 @@ export const setInterestStep = (
   payload: { name, data },
   type: AT.SET_INTEREST_STEP
 })
+
+export const setCoinDisplay = (isCoinDisplayed: boolean) => ({
+  payload: { isCoinDisplayed },
+  type: AT.SET_COIN_DISPLAY
+})
 export const showInterestModal = (step: InterestStep) => ({
   payload: { step },
   type: AT.SHOW_INTEREST_MODAL

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

@@ -19,6 +19,7 @@ const INITIAL_STATE: InterestState = {
   instruments: Remote.NotAsked,
   interestLimits: Remote.NotAsked,
   interestRate: Remote.NotAsked,
+  isCoinDisplayed: true,
   payment: Remote.NotAsked,
   step: {
     data: {},
@@ -175,6 +176,13 @@ export function interestReducer (
         }
       }
     }
+
+    case AT.SET_COIN_DISPLAY: {
+      return {
+        ...state,
+        isCoinDisplayed: payload.isCoinDisplayed
+      }
+    }
     case AT.SET_PAYMENT_FAILURE:
       return {
         ...state,

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

@@ -165,19 +165,33 @@ export default ({
     const values: InterestDepositFormType = yield select(
       selectors.form.getFormValues('interestDepositForm')
     )
-
+    const isDisplayed = S.getCoinDisplay(yield select())
     switch (action.meta.field) {
       case 'depositAmount':
-        const value = 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))
+        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()
+
+          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())

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

@@ -10,6 +10,9 @@ export const getInterestAccountBalance = (state: RootState) =>
 
 export const getCoinType = (state: RootState) => state.components.interest.coin
 
+export const getCoinDisplay = (state: RootState) =>
+  state.components.interest.isCoinDisplayed
+
 export const getDepositAddress = (state: RootState) => {
   const account = getInterestAccount(state).getOrElse({ accountRef: null })
   return account.accountRef

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

@@ -62,6 +62,7 @@ export interface InterestState {
   interestEligible: RemoteDataType<string, InterestEligibleType>
   interestLimits: RemoteDataType<string, InterestLimitsType>
   interestRate: RemoteDataType<string, InterestRateType['rates']>
+  isCoinDisplayed: boolean
   payment: RemoteDataType<string, PaymentValue>
   step: {
     data: InterestStepMetadata
@@ -234,6 +235,13 @@ interface SetInterestStep {
   }
   type: typeof AT.SET_INTEREST_STEP
 }
+
+interface SetCoinDisplay {
+  payload: {
+    boolean
+  }
+  type: typeof AT.SET_COIN_DISPLAY
+}
 interface ShowInterestModal {
   payload: {
     step: InterestStep
@@ -269,6 +277,7 @@ export type InterestActionTypes =
   | RouteToTxHash
   | SetInterestStep
   | ShowInterestModal
+  | SetCoinDisplay
   | SetDepositLimitsAction
   | SetPaymentFailureAction
   | SetPaymentLoadingAction

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

@@ -29,6 +29,7 @@ class DepositForm extends PureComponent<Props, State> {
     this.setState({
       displayCoin: !this.state.displayCoin
     })
+    this.props.interestActions.setCoinDisplay(!this.state.displayCoin)
   }
   handleRefresh = () => {
     this.handleInitializeDepositForm()

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

@@ -5,7 +5,7 @@ import { Icon, Text } from 'blockchain-info-components'
 
 import { CustomCartridge } from 'components/Cartridge'
 import { FlyoutWrapper } from 'components/Flyout'
-import { Form, FormLabel } from 'components/Form'
+import { Form } from 'components/Form'
 
 export const SendingWrapper = styled.div`
   width: 100%;
@@ -34,8 +34,8 @@ export const Bottom = styled(FlyoutWrapper)`
   justify-content: flex-end;
   height: 100%;
 `
-export const CustomFormLabel = styled(FormLabel)`
-  margin-top: 24px;
+export const CustomFormLabel = styled.div`
+  margin: 24px 0 10px 0;
   display: flex;
 `
 export const CustomField = styled(Field)<BaseFieldProps>`
@@ -154,4 +154,7 @@ export const ToggleCoinFiat = styled(Text)`
   font-weight: 500;
   color: ${props => props.theme.blue600};
   cursor: pointer;
+  display: inline;
+  padding: 5px;
+  border: 1px solid ${({ theme }) => theme.grey000};
 `

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

@@ -86,35 +86,33 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
   const { coinTicker, displayName } = supportedCoins[coin]
 
   const currencySymbol = Exchange.getSymbol(walletCurrency) as string
-  // const depositAmountAbsolute = (values && values.depositAmount) || '0'
   const depositAmount = (values && values.depositAmount) || '0'
-  const depositAmountFiat = formatFiat(depositAmount)
-  const depositAmountCrypto = Exchange.convertCoinToCoin({
-    baseToStandard: true,
-    coin,
-    value: Exchange.convertFiatToBtc({
-      fromCurrency: walletCurrency,
-      toUnit: 'SAT',
-      rates,
-      value: depositAmount
-    }).value
-  }).value
+  const depositAmountFiat = displayCoin
+    ? Exchange.convertCoinToFiat(depositAmount, coin, walletCurrency, rates)
+    : formatFiat(depositAmount)
+  const depositAmountCrypto = displayCoin
+    ? depositAmount
+    : Exchange.convertCoinToCoin({
+        baseToStandard: true,
+        coin,
+        value: Exchange.convertFiatToBtc({
+          fromCurrency: walletCurrency,
+          toUnit: 'SAT',
+          rates,
+          value: depositAmount
+        }).value
+      }).value
   const loanTimeFrame = values && values.loanTimeFrame
   const lockupPeriod = interestLimits[coin].lockUpDuration / 86400
   const maxDepositFiat = fiatToString({
     value: depositLimits.maxFiat,
     unit: walletCurrency
   })
-  // const minDepositFiat = fiatToString({
-  //   value: depositLimits.minFiat,
-  //   unit: walletCurrency
-  // })
 
   const amtError =
     formErrors.depositAmount &&
     typeof formErrors.depositAmount === 'string' &&
     formErrors.depositAmount
-
   return submitting ? (
     <SendingWrapper>
       <SpinningLoader />
@@ -185,7 +183,7 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
             <FormattedMessage
               id='modals.interest.deposit.amount'
               defaultMessage='Enter deposit amount'
-            />
+            />{' '}
             <ToggleCoinFiat
               data-e2e='toggleFiatCrypto'
               onClick={handleDisplayToggle}
@@ -347,13 +345,13 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
             {displayCoin ? (
               <FormattedMessage
                 id='modals.interest.deposit.calcdesccoin'
-                defaultMessage='With {depositAmountCrypto} {coinTicker} in your Interest Account you can earn:'
-                values={{ depositAmountCrypto, coinTicker }}
+                defaultMessage='With {depositAmount} {coinTicker} in your Interest Account you can earn:'
+                values={{ depositAmount, coinTicker }}
               />
             ) : (
               <FormattedMessage
                 id='modals.interest.deposit.calcdesc'
-                defaultMessage='With {currencySymbol}{depositAmountFiat} in your Interest Account you can earn:'
+                defaultMessage='With {currencySymbol} {depositAmountFiat} in your Interest Account you can earn:'
                 values={{ currencySymbol, depositAmountFiat }}
               />
             )}
@@ -373,7 +371,7 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
                     <Text color='grey800' weight={600}>
                       {currencySymbol}
                       {calcCompoundInterest(
-                        depositAmount,
+                        depositAmountFiat,
                         interestRate[coin],
                         1 / 365
                       )}
@@ -389,7 +387,7 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
                     <Text color='grey800' weight={600}>
                       {currencySymbol}
                       {calcCompoundInterest(
-                        depositAmount,
+                        depositAmountFiat,
                         interestRate[coin],
                         1 / 52
                       )}
@@ -405,7 +403,7 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
                     <Text color='grey800' weight={600}>
                       {currencySymbol}
                       {calcCompoundInterest(
-                        depositAmount,
+                        depositAmountFiat,
                         interestRate[coin],
                         1 / 12
                       )}
@@ -424,7 +422,7 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
                     <Text color='grey800' weight={600}>
                       {currencySymbol}
                       {calcCompoundInterest(
-                        depositAmount,
+                        depositAmountFiat,
                         interestRate[coin],
                         1
                       )}
@@ -440,7 +438,7 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
                     <Text color='grey800' weight={600}>
                       {currencySymbol}
                       {calcCompoundInterest(
-                        depositAmount,
+                        depositAmountFiat,
                         interestRate[coin],
                         3
                       )}
@@ -456,7 +454,7 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
                     <Text color='grey800' weight={600}>
                       {currencySymbol}
                       {calcCompoundInterest(
-                        depositAmount,
+                        depositAmountFiat,
                         interestRate[coin],
                         5
                       )}

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

@@ -18,19 +18,34 @@ import { getData } from './selectors'
 import Loading from './template.loading'
 import WithdrawalForm from './template.success'
 
-class WithdrawalFormContainer extends PureComponent<Props> {
+class WithdrawalFormContainer extends PureComponent<Props, State> {
+  state: State = { displayCoin: true }
   componentDidMount () {
     this.props.interestActions.initializeWithdrawalForm('BTC')
   }
 
+  handleDisplayToggle = () => {
+    this.setState({
+      displayCoin: !this.state.displayCoin
+    })
+    this.props.interestActions.setCoinDisplay(!this.state.displayCoin)
+  }
+
   handleRefresh = () => {
     this.props.interestActions.initializeWithdrawalForm('BTC')
   }
 
   render () {
     const { data } = this.props
     return data.cata({
-      Success: val => <WithdrawalForm {...val} {...this.props} />,
+      Success: val => (
+        <WithdrawalForm
+          {...val}
+          {...this.props}
+          displayCoin={this.state.displayCoin}
+          handleDisplayToggle={this.handleDisplayToggle}
+        />
+      ),
       Failure: () => <DataError onClick={this.handleRefresh} />,
       Loading: () => <Loading />,
       NotAsked: () => <Loading />
@@ -53,11 +68,16 @@ export type OwnProps = {
   handleClose: () => void
 }
 
+export type State = {
+  displayCoin: boolean
+}
+
 export type SuccessStateType = {
   accountBalances: InterestAccountBalanceType
-  availToWithdraw: number
+  availToWithdrawFiat: number
   coin: CoinType
   interestLimits: InterestLimitsType
+  lockedCoin: number
   rates: RatesType
   supportedCoins: SupportedCoinsType
   walletCurrency: FiatType

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

@@ -23,7 +23,8 @@ export const getData = state => {
       interestLimits
     ) => ({
       accountBalances,
-      availToWithdraw:
+      lockedCoin: convertBaseToStandard(coin, accountBalances[coin].locked),
+      availToWithdrawFiat:
         Exchange.convertCoinToFiat(
           convertBaseToStandard(coin, accountBalances[coin].balance),
           coin,