feat(interest): add formatFiat and withdrawal from styling

blockchain · Jun 6, 2020 · 78e9ecb · 78e9ecb
1 parent 05bedb5
commit 78e9ecb
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/index.tsx
@@ -30,6 +30,12 @@ class DepositForm extends PureComponent<Props, State> {
       displayCoin: !this.state.displayCoin
     })
     this.props.interestActions.setCoinDisplay(!this.state.displayCoin)
+    this.props.formActions.clearFields(
+      'interestDepositForm',
+      false,
+      false,
+      'depositAmount'
+    )
   }
   handleRefresh = () => {
     this.handleInitializeDepositForm()

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
@@ -88,7 +88,9 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
   const currencySymbol = Exchange.getSymbol(walletCurrency) as string
   const depositAmount = (values && values.depositAmount) || '0'
   const depositAmountFiat = displayCoin
-    ? Exchange.convertCoinToFiat(depositAmount, coin, walletCurrency, rates)
+    ? formatFiat(
+        Exchange.convertCoinToFiat(depositAmount, coin, walletCurrency, rates)
+      )
     : formatFiat(depositAmount)
   const depositAmountCrypto = displayCoin
     ? depositAmount

diff --git a/...ges/blockchain-wallet-v4-frontend/src/modals/Interest/WithdrawalForm/template.success.tsx b/...ges/blockchain-wallet-v4-frontend/src/modals/Interest/WithdrawalForm/template.success.tsx
@@ -44,7 +44,7 @@ const ArrowIcon = styled(Icon)`
 const BalanceWrapper = styled.div`
   display: flex;
   margin-top: 40px;
-  padding-bottom: 30px;
+  padding-bottom: 20px;
   border-bottom: 1px solid ${props => props.theme.grey000};
 `
 const BalanceItem = styled.div`
@@ -55,8 +55,7 @@ const BalanceItem = styled.div`
 `
 const MaxAmountContainer = styled.div`
   display: flex;
-  margin-top: 14px;
-  margin-bottom: 14px;
+  margin-top: 24px;
 `
 const AmountAvailContainer = styled.div`
   cursor: pointer;
@@ -78,7 +77,7 @@ const Bottom = styled(FlyoutWrapper)`
 const CustomFormLabel = styled(FormLabel)`
   display: block;
   margin-top: 24px;
-  margin-bottom: 4px;
+  margin-bottom: 10px;
 `
 const CustomField = styled(Field)<BaseFieldProps>`
   > input {
@@ -118,6 +117,7 @@ const ToggleCoinFiat = styled(Text)`
   display: inline;
   padding: 5px;
   border: 1px solid ${({ theme }) => theme.grey000};
+  margin: 0 0 5px 5px;
 `
 
 const FORM_NAME = 'interestWithdrawalForm'
@@ -126,7 +126,6 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> &
   Props> = props => {
   const {
     accountBalances,
-
     availToWithdrawFiat,
     coin,
     accountBalanceStandard,
@@ -154,7 +153,14 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> &
   const withdrawalAmount = (values && values.withdrawalAmount) || 0
 
   const withdrawalAmountFiat = displayCoin
-    ? Exchange.convertCoinToFiat(withdrawalAmount, coin, walletCurrency, rates)
+    ? formatFiat(
+        Exchange.convertCoinToFiat(
+          withdrawalAmount,
+          coin,
+          walletCurrency,
+          rates
+        )
+      )
     : formatFiat(withdrawalAmount)
 
   const withdrawalAmountCrypto = displayCoin
@@ -331,6 +337,14 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> &
                 </Text>
               </AmountAvailContainer>
             )}
+          </Text>
+        </MaxAmountContainer>
+        <CustomFormLabel>
+          <Text color='grey600' weight={500} size='14px'>
+            <FormattedMessage
+              id='modals.interest.withdrawal.enteramount'
+              defaultMessage='Enter withdrawal amount'
+            />
             <ToggleCoinFiat
               data-e2e='toggleFiatCrypto'
               onClick={handleDisplayToggle}
@@ -350,14 +364,6 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> &
               )}
             </ToggleCoinFiat>
           </Text>
-        </MaxAmountContainer>
-        <CustomFormLabel>
-          <Text color='grey600' weight={500} size='14px'>
-            <FormattedMessage
-              id='modals.interest.withdrawal.enteramount'
-              defaultMessage='Enter withdrawal amount'
-            />
-          </Text>
         </CustomFormLabel>
         <AmountFieldContainer>
           <CustomField