feat(sb): fix funds amounts and style

packages/blockchain-wallet-v4-frontend/src/components/Flyout/index.tsx

@@ -105,16 +105,17 @@ export const Row = styled.div`
   }
 `
 
-export const Title = styled(Text)`
+export const Title = styled(Text)<{ asValue?: boolean }>`
   font-size: 14px;
   font-weight: 500;
   color: ${props => props.theme.grey600};
+  margin-top: ${props => (props.asValue ? '4px' : '0px')};
 `
-export const Value = styled(Text)`
-  margin-top: 4px;
+export const Value = styled(Text)<{ asTitle?: boolean }>`
   font-size: 16px;
   font-weight: 600;
   color: ${props => props.theme.grey800};
+  margin-top: ${props => (props.asTitle ? '0px' : '4px')};
 `
 
 type OwnProps = {

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Card/index.tsx

@@ -2,34 +2,18 @@ import { convertBaseToStandard } from 'data/components/exchange/services'
 import {
   DisplayContainer,
   DisplayIcon,
-  DisplaySubTitle,
-  DisplayTitle,
   MultiRowContainer
 } from 'components/SimpleBuy'
 import { fiatToString } from 'core/exchange/currency'
 import { FiatType, SBPaymentMethodType } from 'core/types'
 import { FormattedMessage } from 'react-intl'
-import { Value } from 'components/Flyout'
+import { Title, Value } from 'components/Flyout'
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 
-const MainValue = styled(Value)`
-  margin-top: 0;
-  text-align: right;
-  font-size: 16px;
-  color: ${props => props.theme.grey900};
-`
-const SubValue = styled(Value)`
-  margin-top: 0;
-  font-weight: 500;
-  color: ${props => props.theme.grey600};
-  text-align: right;
-  font-size: 14px;
-`
-
 const DisplayCardDetails = styled.div`
-  width: 130px;
   text-align: right;
+  white-space: nowrap;
 `
 
 type Props = {
@@ -47,8 +31,8 @@ const Card: React.FC<Props> = ({ value, onClick, icon, text }) => (
   >
     <DisplayIcon>{icon}</DisplayIcon>
     <MultiRowContainer>
-      <DisplayTitle>{text}</DisplayTitle>
-      <DisplaySubTitle>
+      <Value asTitle>{text}</Value>
+      <Title asValue>
         <FormattedMessage
           id='modals.simplebuy.card_limit'
           defaultMessage='{card} Limit'
@@ -59,12 +43,12 @@ const Card: React.FC<Props> = ({ value, onClick, icon, text }) => (
             })} ${value.currency}`
           }}
         />
-      </DisplaySubTitle>
+      </Title>
     </MultiRowContainer>
     {value.card && (
       <DisplayCardDetails>
-        <MainValue>{value.card.number}</MainValue>
-        <SubValue>
+        <Value asTitle>{value.card.number}</Value>
+        <Title asValue>
           <FormattedMessage
             id='modals.simplebuy.card_expire'
             defaultMessage='Exp: {month}/{year}'
@@ -73,7 +57,7 @@ const Card: React.FC<Props> = ({ value, onClick, icon, text }) => (
               year: value.card.expireYear
             }}
           />
-        </SubValue>
+        </Title>
       </DisplayCardDetails>
     )}
   </DisplayContainer>

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Fund/index.tsx

@@ -2,73 +2,68 @@ import { convertBaseToStandard } from 'data/components/exchange/services'
 import {
   DisplayContainer,
   DisplayIcon,
-  DisplaySubTitle,
-  DisplayTitle,
   MultiRowContainer
 } from 'components/SimpleBuy'
 import { fiatToString } from 'core/exchange/currency'
-import { FiatType, SBPaymentMethodType } from 'core/types'
-import { Value } from 'components/Flyout'
+import { FiatType, SBBalanceType, SBPaymentMethodType } from 'core/types'
+import { Title, Value } from 'components/Flyout'
 import Currencies from 'blockchain-wallet-v4/src/exchange/currencies'
+import FiatDisplay from 'components/Display/FiatDisplay'
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 
 const DisplayMoney = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 120px;
-  color: ${props => props.theme.grey800};
-`
-
-const MainValue = styled(Value)`
-  margin-top: 0;
   text-align: right;
-  font-size: 16px;
-  color: ${props => props.theme.grey900};
 `
-const SubValue = styled(Value)`
-  margin-top: 0;
-  color: ${props => props.theme.grey600};
-  text-align: right;
-  font-size: 14px;
+const StyledFiatDisplay = styled(FiatDisplay)`
+  justify-content: flex-end;
 `
 
-type Props = {
-  balance: string
-  icon: ReactElement
-  onClick: (string) => void
-  value: SBPaymentMethodType
-}
-
-const Fund: React.FC<Props> = ({ value, icon, onClick, balance }) => (
+const Fund: React.FC<Props> = ({
+  balances,
+  icon,
+  onClick,
+  value,
+  walletCurrency
+}) => (
   <DisplayContainer
     data-e2e={`sb${value.type.toLowerCase()}Fund`}
     role='button'
     onClick={onClick}
   >
     <DisplayIcon>{icon}</DisplayIcon>
     <MultiRowContainer>
-      <DisplayTitle>{Currencies[value.currency].displayName}</DisplayTitle>
-      <DisplaySubTitle>{value.currency}</DisplaySubTitle>
+      <Value asTitle>{Currencies[value.currency].displayName}</Value>
+      <Title asValue>{value.currency}</Title>
     </MultiRowContainer>
     <DisplayMoney>
-      <MainValue>
+      <Value asTitle>
         {fiatToString({
-          value: convertBaseToStandard('FIAT', balance),
-          unit: String(value.currency) as FiatType
+          value: convertBaseToStandard('FIAT', balances.available),
+          unit: value.currency as FiatType
         })}
-      </MainValue>
-      {value.limits.min && (
-        <SubValue>
-          {fiatToString({
-            value: value.limits.min,
-            unit: String(value.currency) as FiatType
-          })}
-        </SubValue>
+      </Value>
+      {value.currency !== walletCurrency && (
+        <StyledFiatDisplay
+          coin={value.currency}
+          size='14px'
+          weight={500}
+          color='grey600'
+          style={{ marginTop: '4px', alignSelf: 'flex-end' }}
+        >
+          {convertBaseToStandard('FIAT', balances.available)}
+        </StyledFiatDisplay>
       )}
     </DisplayMoney>
   </DisplayContainer>
 )
 
+type Props = {
+  balances: SBBalanceType
+  icon: ReactElement
+  onClick: (string) => void
+  value: SBPaymentMethodType
+  walletCurrency: FiatType
+}
+
 export default Fund

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx

@@ -188,7 +188,8 @@ class Payments extends PureComponent<InjectedFormProps<{}, Props> & Props> {
                   value={fund.value}
                   icon={this.getIcon(fund.value)}
                   onClick={() => this.handleSubmit(fund.value)}
-                  balance={this.props.balances[fund.value.currency].available}
+                  balances={this.props.balances[fund.value.currency]}
+                  walletCurrency={this.props.walletCurrency}
                 />
               ))}
             {cardMethods &&

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/selectors.ts

@@ -1,4 +1,4 @@
-import { ExtractSuccess } from 'core/types'
+import { ExtractSuccess, FiatType } from 'core/types'
 import { lift } from 'ramda'
 import { selectors } from 'data'
 
@@ -10,20 +10,23 @@ export const getData = state => {
     state
   )
   const balancesR = selectors.components.simpleBuy.getSBBalances(state)
+  const walletCurrencyR = selectors.core.settings.getCurrency(state)
 
   return lift(
     (
+      balances: ExtractSuccess<typeof balancesR>,
       cards: ExtractSuccess<typeof cardsR>,
       eligibility: ExtractSuccess<typeof eligibilityR>,
       pairs: ExtractSuccess<typeof pairsR>,
       paymentMethods: ExtractSuccess<typeof paymentMethodsR>,
-      balances: ExtractSuccess<typeof balancesR>
+      walletCurrency: FiatType
     ) => ({
+      balances,
       cards,
       eligibility,
       pairs,
       paymentMethods,
-      balances
+      walletCurrency
     })
-  )(cardsR, eligibilityR, pairsR, paymentMethodsR, balancesR)
+  )(balancesR, cardsR, eligibilityR, pairsR, paymentMethodsR, walletCurrencyR)
 }