feat(interest): toggle min and max buttons based on displayCoin

blockchain · Jun 1, 2020 · 4a87bcb · 4a87bcb
1 parent c3d0d34
commit 4a87bcb
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 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
@@ -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
@@ -36,6 +36,7 @@ export const Bottom = styled(FlyoutWrapper)`
 `
 export const CustomFormLabel = styled(FormLabel)`
   margin-top: 24px;
+  display: flex;
 `
 export const CustomField = styled(Field)<BaseFieldProps>`
   > 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
@@ -45,6 +45,7 @@ import {
   PrincipalCcyAbsolute,
   SendingWrapper,
   TermsContainer,
+  ToggleCoinFiat,
   Top,
   TopText
 } from './model'
@@ -85,6 +86,7 @@ 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({
@@ -99,6 +101,14 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & 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<InjectedFormProps<{}, Props> & Props> = props => {
               id='modals.interest.deposit.amount'
               defaultMessage='Enter deposit amount'
             />
+            <ToggleCoinFiat
+              data-e2e='toggleFiatCrypto'
+              onClick={handleDisplayToggle}
+            >
+              {displayCoin ? (
+                <FormattedMessage
+                  id='modals.interest.deposit.showfiat'
+                  defaultMessage='Show {walletCurrency}'
+                  values={{ walletCurrency }}
+                />
+              ) : (
+                <FormattedMessage
+                  id='modals.interest.deposit.showcoin'
+                  defaultMessage='Show {coinTicker}'
+                  values={{ coinTicker }}
+                />
+              )}
+            </ToggleCoinFiat>
           </Text>
-          <Button
-            nature='empty-secondary'
-            data-e2e='toggleFiatCrypto'
-            width='20px'
-            onClick={handleDisplayToggle}
-          >
-            {displayCoin ? (
-              <FormattedMessage
-                id='modals.interest.deposit.showfiat'
-                defaultMessage='Show {walletCurrency}'
-                values={{ walletCurrency }}
-              />
-            ) : (
-              <FormattedMessage
-                id='modals.interest.deposit.showcoin'
-                defaultMessage='Show {coinTicker}'
-                values={{ coinTicker }}
-              />
-            )}
-          </Button>
         </CustomFormLabel>
         <AmountFieldContainer>
           <CustomField
@@ -228,7 +236,7 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
               {amtError === 'ABOVE_MAX' ? (
                 <FormattedMessage
                   id='modals.interest.deposit.max'
-                  defaultMessage='You cannot deposit more than {maxFiat}'
+                  defaultMessage='Maximum deposit: {maxFiat}'
                   values={{
                     maxFiat: displayCoin
                       ? depositLimits.maxCoin
@@ -245,10 +253,7 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
                   values={{
                     minFiat: displayCoin
                       ? depositLimits.minCoin
-                      : fiatToString({
-                          value: depositLimits.minFiat,
-                          unit: walletCurrency
-                        })
+                      : maxDepositFiat
                   }}
                 />
               )}
@@ -261,12 +266,16 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & 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<InjectedFormProps<{}, Props> & Props> = props => {
                   formActions.change(
                     FORM_NAME,
                     'depositAmount',
-                    depositLimits.maxFiat
+                    displayCoin ? depositLimits.maxCoin : depositLimits.maxFiat
                   )
                 }
               >
-                <Text color='blue600' size='14px' weight={500}>
-                  {fiatToString({
-                    value: depositLimits.maxFiat,
-                    unit: walletCurrency
-                  })}{' '}
-                </Text>
+                {displayCoin ? (
+                  <Text color='blue600' size='14px' weight={500}>
+                    {depositLimits.maxCoin}{' '}
+                  </Text>
+                ) : (
+                  <Text color='blue600' size='14px' weight={500}>
+                    {maxDepositFiat}{' '}
+                  </Text>
+                )}
               </FiatMaxContainer>
               <FormattedMessage
                 id='modals.interest.deposit.uptoamount2'
@@ -332,11 +344,19 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
             </TooltipHost>
           </CalculatorHeaderContainer>
           <CalculatorDesc color='grey600' size='12px' weight={500}>
-            <FormattedMessage
-              id='modals.interest.deposit.calcdesc'
-              defaultMessage='With {currencySymbol}{depositAmountFiat} in your Interest Account you can earn:'
-              values={{ currencySymbol, depositAmountFiat }}
-            />
+            {displayCoin ? (
+              <FormattedMessage
+                id='modals.interest.deposit.calcdesccoin'
+                defaultMessage='With {depositAmountCrypto} {coinTicker} in your Interest Account you can earn:'
+                values={{ depositAmountCrypto, coinTicker }}
+              />
+            ) : (
+              <FormattedMessage
+                id='modals.interest.deposit.calcdesc'
+                defaultMessage='With {currencySymbol}{depositAmountFiat} in your Interest Account you can earn:'
+                values={{ currencySymbol, depositAmountFiat }}
+              />
+            )}
           </CalculatorDesc>
           <CalculatorContainer>
             <Field component={TabMenuTimeFrame} name='loanTimeFrame' />