style(Swap): standard crypto formatting

blockchain · Dec 13, 2018 · 9178bba · 9178bba
1 parent 314d261
commit 9178bba
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 223 deletions.
diff --git a/...t-v4-frontend/src/scenes/Exchange/ExchangeForm/ComplementaryAmount/ComplementaryAmount.js b/...t-v4-frontend/src/scenes/Exchange/ExchangeForm/ComplementaryAmount/ComplementaryAmount.js
@@ -3,9 +3,9 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 
 import { getData } from './selectors'
+import { formatAmount } from '../services'
 import StringDisplay from 'components/Display/StringDisplay'
 
-import { setMinDecimals } from 'blockchain-wallet-v4/src/utils/bigNumber'
 const ComplementaryAmountContaier = styled.div`
   font-weight: 300;
   font-size: 20px;
@@ -17,11 +17,6 @@ const ComplementaryAmountContaier = styled.div`
   margin-top: 10px;
 `
 
-export const formatAmount = (isFiat, symbol, value) => {
-  return isFiat
-    ? `${symbol}${setMinDecimals(value, 2)}`
-    : `${setMinDecimals(value, 2)} ${symbol}`
-}
 export class ComplementaryAmount extends React.PureComponent {
   render () {
     const { complementaryAmount, isFiat, complementarySymbol } = this.props

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/Error/Error.spec.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/Error/Error.spec.js
@@ -23,7 +23,7 @@ import {
   ReserveOverflowMessage,
   NoAdviceMessage
 } from './validationMessages'
-import { formatAmount } from '../template.success.js'
+import { formatAmount } from '../services'
 
 const {
   NO_LIMITS_ERROR,
@@ -143,7 +143,7 @@ jest.spyOn(selectors.form, 'getFormError').mockReturnValue(null)
 jest.spyOn(selectors.components.exchange, 'getTxError').mockReturnValue(null)
 jest.spyOn(selectors.components.exchange, 'showError').mockReturnValue(null)
 
-jest.mock('../template.success.js')
+jest.mock('../services')
 
 describe('Exchange Error', () => {
   it('should not show error if showError and txError is falsy', () => {

diff --git a/...lockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/Error/validationMessages.js b/...lockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/Error/validationMessages.js
@@ -9,7 +9,7 @@ import LimitsUpdateLink from './LimitsUpdateLink'
 import MaximumAmountLink from './MaximumAmountLink'
 import MinimumAmountLink from './MinimumAmountLink'
 import CheckConfirmationLink from './CheckConfirmationLink'
-import { formatAmount } from '../template.success'
+import { formatAmount } from '../services'
 
 const {
   NO_LIMITS_ERROR,

diff --git a/...kchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/MinMaxButtons/MinMaxButtons.js b/...kchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/MinMaxButtons/MinMaxButtons.js
@@ -6,6 +6,7 @@ import { connect } from 'react-redux'
 
 import { actions } from 'data'
 import { getData } from './selectors'
+import { formatAmount } from '../services'
 import { Row } from '../Layout'
 import { Button } from 'blockchain-info-components'
 
@@ -28,10 +29,6 @@ export const MinMaxValue = styled.div`
 const MixMaxRow = styled(Row)`
   padding-bottom: 0;
 `
-
-const formatAmount = (isFiat, symbol, value) =>
-  isFiat ? `${symbol}${value}` : `${value} ${symbol}`
-
 export class MinMaxButtons extends React.PureComponent {
   render () {
     const {

diff --git a/...n-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/MinMaxButtons/MinMaxButtons.spec.js b/...n-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/MinMaxButtons/MinMaxButtons.spec.js
@@ -17,7 +17,7 @@ const props = {
   maxAmount: '0.12345678'
 }
 const EXPECTED_VALUES = {
-  MIN: `${props.minSymbol}${props.minAmount}`,
+  MIN: `${props.minSymbol}${props.minAmount}.00`,
   MAX: `${props.maxAmount} ${props.maxSymbol}`
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/Summary/Summary.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/Summary/Summary.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import { FormattedMessage } from 'react-intl'
 import { BigNumber } from 'bignumber.js'
 
-import { setMinDecimals } from 'blockchain-wallet-v4/src/utils/bigNumber'
+import { coinToString } from 'blockchain-wallet-v4/src/exchange/currency'
 import { getData } from './selectors'
 import {
   ExchangeText,
@@ -41,12 +41,12 @@ export class Summary extends React.PureComponent {
           </AmountHeader>
           <ExchangeAmount>
             <StringDisplay>
-              {sourceAmount.map(
-                amount =>
-                  `${setMinDecimals(
-                    add(amount, sourceFee.source),
-                    2
-                  )} ${sourceCoin}`
+              {sourceAmount.map(amount =>
+                coinToString({
+                  value: add(amount, sourceFee.source),
+                  unit: { symbol: sourceCoin },
+                  minDigits: 2
+                })
               )}
             </StringDisplay>
           </ExchangeAmount>
@@ -63,8 +63,12 @@ export class Summary extends React.PureComponent {
           </AmountHeader>
           <ExchangeAmount>
             <StringDisplay>
-              {targetAmount.map(
-                amount => `${setMinDecimals(amount, 2)} ${targetCoin}`
+              {targetAmount.map(amount =>
+                coinToString({
+                  value: amount,
+                  unit: { symbol: targetCoin },
+                  minDigits: 2
+                })
               )}
             </StringDisplay>
           </ExchangeAmount>
@@ -78,7 +82,11 @@ export class Summary extends React.PureComponent {
             />
           </ExchangeText>
           <ExchangeAmount>
-            {setMinDecimals(sourceFee.source, 2)} {sourceCoin}
+            {coinToString({
+              value: sourceFee.source,
+              unit: { symbol: sourceCoin },
+              minDigits: 2
+            })}
           </ExchangeAmount>
         </TableRow>
         <TableRow>
@@ -90,8 +98,13 @@ export class Summary extends React.PureComponent {
           </ExchangeText>
           <ExchangeAmount>
             <StringDisplay>
-              {targetFiat.map(
-                amount => `${setMinDecimals(amount, 2)} ${currency}`
+              {targetFiat.map(amount =>
+                coinToString({
+                  value: amount,
+                  unit: { symbol: currency },
+                  minDigits: 2,
+                  maxDigits: 2
+                })
               )}
             </StringDisplay>
           </ExchangeAmount>