fix(coin-toggle): one toggle function and fix balance displaying in sats

blockchain · Jun 11, 2020 · 2a012d1 · 2a012d1
1 parent 65aaafe
commit 2a012d1
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 65 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
@@ -23,34 +23,21 @@ class DepositForm extends PureComponent<Props> {
     this.handleInitializeDepositForm()
   }
 
-  handleCoinClick = () => {
+  handleDisplayToggle = isCoin => {
     const { displayCoin } = this.props.data.getOrElse({
       displayCoin: false
     })
-    !displayCoin &&
-      this.props.formActions.clearFields(
-        'interestDepositForm',
-        false,
-        false,
-        'depositAmount'
-      )
+    if (isCoin === displayCoin) return
+    this.props.formActions.clearFields(
+      'interestDepositForm',
+      false,
+      false,
+      'depositAmount'
+    )
 
-    this.props.interestActions.setCoinDisplay(true)
+    this.props.interestActions.setCoinDisplay(isCoin)
   }
 
-  handleFiatClick = () => {
-    const { displayCoin } = this.props.data.getOrElse({
-      displayCoin: false
-    })
-    displayCoin &&
-      this.props.formActions.clearFields(
-        'interestDepositForm',
-        false,
-        false,
-        'depositAmount'
-      )
-    this.props.interestActions.setCoinDisplay(false)
-  }
   handleRefresh = () => {
     this.handleInitializeDepositForm()
   }
@@ -76,8 +63,7 @@ class DepositForm extends PureComponent<Props> {
           {...val}
           {...this.props}
           onSubmit={this.handleSubmit}
-          handleCoinClick={this.handleCoinClick}
-          handleFiatClick={this.handleFiatClick}
+          handleDisplayToggle={this.handleDisplayToggle}
         />
       ),
       Failure: () => <DataError onClick={this.handleRefresh} />,

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
@@ -74,8 +74,7 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
     displayCoin,
     formActions,
     formErrors,
-    handleCoinClick,
-    handleFiatClick,
+    handleDisplayToggle,
     interestActions,
     interestLimits,
     interestRate,
@@ -222,11 +221,17 @@ const DepositForm: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
             />{' '}
           </Text>
           <ToggleCoinFiat>
-            <ToggleFiatText displayCoin={displayCoin} onClick={handleFiatClick}>
+            <ToggleFiatText
+              displayCoin={displayCoin}
+              onClick={() => handleDisplayToggle(false)}
+            >
               {walletCurrency}
             </ToggleFiatText>
             |{' '}
-            <ToggleCoinText displayCoin={displayCoin} onClick={handleCoinClick}>
+            <ToggleCoinText
+              displayCoin={displayCoin}
+              onClick={() => handleDisplayToggle(true)}
+            >
               {coinTicker}
             </ToggleCoinText>
           </ToggleCoinFiat>
@@ -571,8 +576,7 @@ export type Props = SuccessStateType &
   FormProps
 
 type FormProps = {
-  handleCoinClick: () => void
-  handleFiatClick: () => void
+  handleDisplayToggle: (boolean) => void
   onSubmit: () => void
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Interest/WithdrawalForm/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Interest/WithdrawalForm/index.tsx
@@ -23,33 +23,18 @@ class WithdrawalFormContainer extends PureComponent<Props> {
     this.props.interestActions.initializeWithdrawalForm('BTC')
   }
 
-  handleCoinClick = () => {
+  handleDisplayToggle = isCoin => {
     const { displayCoin } = this.props.data.getOrElse({
       displayCoin: false
     })
-    !displayCoin &&
-      this.props.formActions.clearFields(
-        'interestWithdrawalForm',
-        false,
-        false,
-        'withdrawalAmount'
-      )
-
-    this.props.interestActions.setCoinDisplay(true)
-  }
-
-  handleFiatClick = () => {
-    const { displayCoin } = this.props.data.getOrElse({
-      displayCoin: false
-    })
-    displayCoin &&
-      this.props.formActions.clearFields(
-        'interestWithdrawalForm',
-        false,
-        false,
-        'withdrawalAmount'
-      )
-    this.props.interestActions.setCoinDisplay(false)
+    if (isCoin === displayCoin) return
+    this.props.formActions.clearFields(
+      'interestWithdrawalForm',
+      false,
+      false,
+      'withdrawalAmount'
+    )
+    this.props.interestActions.setCoinDisplay(isCoin)
   }
 
   handleRefresh = () => {
@@ -63,8 +48,7 @@ class WithdrawalFormContainer extends PureComponent<Props> {
         <WithdrawalForm
           {...val}
           {...this.props}
-          handleCoinClick={this.handleCoinClick}
-          handleFiatClick={this.handleFiatClick}
+          handleDisplayToggle={this.handleDisplayToggle}
         />
       ),
       Failure: () => <DataError onClick={this.handleRefresh} />,
@@ -86,7 +70,6 @@ const mapDispatchToProps = (dispatch: Dispatch): LinkDispatchPropsType => ({
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
 export type SuccessStateType = {
-  accountBalanceStandard: number
   accountBalances: InterestAccountBalanceType
   availToWithdrawCrypto: number
   availToWithdrawFiat: number

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
@@ -49,11 +49,9 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> &
     availToWithdrawCrypto,
     availToWithdrawFiat,
     coin,
-    accountBalanceStandard,
     displayCoin,
     formActions,
-    handleCoinClick,
-    handleFiatClick,
+    handleDisplayToggle,
     interestActions,
     invalid,
     rates,
@@ -93,9 +91,15 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> &
         value: withdrawalAmount
       }).value
 
+  const accountBalanceStandard = Exchange.convertCoinToCoin({
+    value: (account && account.balance) || 0,
+    coin,
+    baseToStandard: true
+  }).value
+
   const interestBalanceStandard = Exchange.convertCoinToCoin({
     value: accountInterestBalance || 0,
-    coin: 'BTC',
+    coin,
     baseToStandard: true
   }).value
 
@@ -254,11 +258,17 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> &
             />
           </Text>
           <ToggleCoinFiat>
-            <ToggleFiatText displayCoin={displayCoin} onClick={handleFiatClick}>
+            <ToggleFiatText
+              displayCoin={displayCoin}
+              onClick={() => handleDisplayToggle(false)}
+            >
               {walletCurrency}
             </ToggleFiatText>
             |{' '}
-            <ToggleCoinText displayCoin={displayCoin} onClick={handleCoinClick}>
+            <ToggleCoinText
+              displayCoin={displayCoin}
+              onClick={() => handleDisplayToggle(true)}
+            >
               {coinTicker}
             </ToggleCoinText>
           </ToggleCoinFiat>
@@ -346,8 +356,7 @@ type LinkStatePropsType = {
 }
 
 type OwnProps = {
-  handleCoinClick: () => void
-  handleFiatClick: () => void
+  handleDisplayToggle: (boolean) => void
 }
 
 export type Props = OwnProps &