From 4a87bcbeaed31a774eff7b5ba3599e8c5c88255e Mon Sep 17 00:00:00 2001 From: TheLeoB Date: Mon, 1 Jun 2020 14:53:11 -0400 Subject: [PATCH] feat(interest): toggle min and max buttons based on displayCoin --- .../src/assets/locales/index.d.ts | 4 +- .../src/modals/Interest/DepositForm/model.tsx | 8 ++ .../Interest/DepositForm/template.success.tsx | 98 +++++++++++-------- 3 files changed, 69 insertions(+), 41 deletions(-) diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts index df00ca7f536..64e77ee9938 100644 --- a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts +++ b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts @@ -640,12 +640,12 @@ type MessagesType = { '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.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.' 'modals.interest.deposit.calculator.tooltip': 'This is an estimate calculated using the current interest rate for the entire horizon. The actual interest rate is subject to change.' - 'modals.interest.deposit.max': 'You cannot deposit more than {maxFiat}' + 'modals.interest.deposit.max': 'Maximum deposit: {maxFiat}' 'modals.interest.deposit.min': 'Minimum deposit: {minFiat}' 'modals.interest.deposit.max.button': 'Deposit Max' 'modals.interest.deposit.min.button': 'Deposit Min' diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/model.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/model.tsx index a92a4fa9f99..896351493e3 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/model.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/model.tsx @@ -36,6 +36,7 @@ export const Bottom = styled(FlyoutWrapper)` ` export const CustomFormLabel = styled(FormLabel)` margin-top: 24px; + display: flex; ` export const CustomField = styled(Field)` > input { @@ -147,3 +148,10 @@ export const ButtonContainer = styled.div` padding: 15px !important; } ` + +export const ToggleCoinFiat = styled(Text)` + font-size: 14px; + font-weight: 500; + color: ${props => props.theme.blue600}; + cursor: pointer; +` diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/template.success.tsx index ed598465401..8b19d40b2e5 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/template.success.tsx @@ -45,6 +45,7 @@ import { PrincipalCcyAbsolute, SendingWrapper, TermsContainer, + ToggleCoinFiat, Top, TopText } from './model' @@ -85,6 +86,7 @@ const DepositForm: React.FC & 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({ @@ -99,6 +101,14 @@ const DepositForm: React.FC & Props> = props => { }).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 && @@ -176,27 +186,25 @@ const DepositForm: React.FC & Props> = props => { id='modals.interest.deposit.amount' defaultMessage='Enter deposit amount' /> + + {displayCoin ? ( + + ) : ( + + )} + - & Props> = props => { {amtError === 'ABOVE_MAX' ? ( & Props> = props => { values={{ minFiat: displayCoin ? depositLimits.minCoin - : fiatToString({ - value: depositLimits.minFiat, - unit: walletCurrency - }) + : maxDepositFiat }} /> )} @@ -261,12 +266,16 @@ const DepositForm: React.FC & Props> = props => { ? formActions.change( FORM_NAME, 'depositAmount', - depositLimits.maxFiat + displayCoin + ? depositLimits.maxCoin + : depositLimits.maxFiat ) : formActions.change( FORM_NAME, 'depositAmount', - depositLimits.minFiat + displayCoin + ? depositLimits.minCoin + : depositLimits.minFiat ) }} > @@ -295,16 +304,19 @@ const DepositForm: React.FC & Props> = props => { formActions.change( FORM_NAME, 'depositAmount', - depositLimits.maxFiat + displayCoin ? depositLimits.maxCoin : depositLimits.maxFiat ) } > - - {fiatToString({ - value: depositLimits.maxFiat, - unit: walletCurrency - })}{' '} - + {displayCoin ? ( + + {depositLimits.maxCoin}{' '} + + ) : ( + + {maxDepositFiat}{' '} + + )} & Props> = props => { - + {displayCoin ? ( + + ) : ( + + )}