fix(sell p2): pair, crypto, fiat, enter amount

blockchain · Aug 7, 2020 · ec2eedb · ec2eedb
1 parent fbd3abb
commit ec2eedb
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 28 deletions.
diff --git a/...llet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/index.tsx b/...llet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/index.tsx
@@ -1,9 +1,9 @@
 import { actions } from 'data'
 import { bindActionCreators, Dispatch } from 'redux'
+import { CoinType, FiatType, SBOrderActionType } from 'core/types'
 import { connect, ConnectedProps } from 'react-redux'
 import { getData } from './selectors'
 import { RootState } from 'data/rootReducer'
-import { SBOrderActionType, SBPairType } from 'core/types'
 
 import React, { PureComponent } from 'react'
 import Success from './template.success'
@@ -30,9 +30,10 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
 export type OwnProps = {
+  coin: CoinType
+  fiat: FiatType
   onClick?: (string) => void
   orderType: SBOrderActionType
-  value: SBPairType
 }
 export type SuccessStateType = ReturnType<typeof getData>['data']
 export type Props = OwnProps & ConnectedProps<typeof connector>

diff --git a/...t-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/selectors.ts b/...t-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/selectors.ts
@@ -1,13 +1,11 @@
 import { ExtractSuccess } from 'core/types'
-import { getCoinFromPair } from 'data/components/simpleBuy/model'
 import { lift } from 'ramda'
 import { OwnProps } from '.'
 import { RootState } from 'data/rootReducer'
 import { selectors } from 'data'
 
 export const getData = (state: RootState, ownProps: OwnProps) => {
-  const coin = getCoinFromPair(ownProps.value.pair)
-  const ratesR = selectors.core.data.misc.getRatesSelector(coin, state)
+  const ratesR = selectors.core.data.misc.getRatesSelector(ownProps.coin, state)
   const fiatCurrency = selectors.components.simpleBuy.getFiatCurrency(state)
   const balances = selectors.components.simpleBuy.getSBBalances(state)
   const supportedCoinsR = selectors.core.walletOptions.getSupportedCoins(state)

diff --git a/...ntend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx b/...ntend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx
@@ -3,10 +3,6 @@ import styled from 'styled-components'
 
 import { DisplayContainer } from 'components/SimpleBuy'
 import { fiatToString } from 'core/exchange/currency'
-import {
-  getCoinFromPair,
-  getFiatFromPair
-} from 'data/components/simpleBuy/model'
 import { Icon } from 'blockchain-info-components'
 import {
   Props as OwnProps,
@@ -38,16 +34,16 @@ const DisplayTitle = styled(Title)`
 type Props = OwnProps & ParentOwnProps & SuccessStateType
 
 const Success: React.FC<Props> = props => {
-  const coin = getCoinFromPair(props.value.pair)
-  const fiat = getFiatFromPair(props.value.pair)
+  const coin = props.coin
+  const fiat = props.fiat
   const coinType = props.supportedCoins[coin]
   const displayName = coinType.displayName
   const icon = coinType.icons.circleFilled
   const color = coinType.colorCode
 
   return (
     <DisplayContainer
-      data-e2e={`sb${props.value.pair}CurrencySelector`}
+      data-e2e={`sb${props.coin}-${props.fiat}CurrencySelector`}
       role='button'
       onClick={props.onClick}
     >

diff --git a/...t-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/PriceMovement/index.tsx b/...t-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/PriceMovement/index.tsx
@@ -1,8 +1,7 @@
 import { actions } from 'data'
 import { bindActionCreators, Dispatch } from 'redux'
+import { CoinType, FiatType, PriceMovementDirType } from 'core/types'
 import { connect, ConnectedProps } from 'react-redux'
-import { FiatType, PriceMovementDirType, SBPairType } from 'core/types'
-import { getCoinFromPair } from 'data/components/simpleBuy/model'
 import { getData } from './selectors'
 import { Remote } from 'blockchain-wallet-v4/src'
 import { RootState } from 'data/rootReducer'
@@ -43,11 +42,8 @@ const getColorFromMovement = (movement: PriceMovementDirType) => {
 class PriceMovement extends PureComponent<Props, State> {
   componentDidMount () {
     if (!Remote.Success.is(this.props.data)) {
-      const coin = getCoinFromPair(this.props.value.pair)
-      this.props.miscActions.fetchPrice24H(
-        coin,
-        this.props.fiatCurrency || 'EUR'
-      )
+      const coin = this.props.coin
+      this.props.miscActions.fetchPrice24H(coin, this.props.fiat || 'EUR')
     }
   }
 
@@ -81,8 +77,8 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
 export type OwnProps = {
-  fiatCurrency?: FiatType
-  value: SBPairType
+  coin: CoinType
+  fiat?: FiatType
 }
 
 type Props = OwnProps & ConnectedProps<typeof connector>

diff --git a/...4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/PriceMovement/selectors.ts b/...4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/PriceMovement/selectors.ts
@@ -1,12 +1,11 @@
 import { ExtractSuccess } from 'core/types'
-import { getCoinFromPair } from 'data/components/simpleBuy/model'
 import { lift } from 'ramda'
 import { OwnProps } from '.'
 import { RootState } from 'data/rootReducer'
 import { selectors } from 'data'
 
 export const getData = (state: RootState, ownProps: OwnProps) => {
-  const coin = getCoinFromPair(ownProps.value.pair)
+  const coin = ownProps.coin
   const price24HrR = selectors.core.data.misc.getPrice24H(coin, state)
 
   return lift((price24Hr: ExtractSuccess<typeof price24HrR>) => ({

diff --git a/...ockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/index.tsx b/...ockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/index.tsx
@@ -1,16 +1,17 @@
+import { Icon, TabMenu, TabMenuItem, Text } from 'blockchain-info-components'
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
 import { FlyoutWrapper } from 'components/Flyout'
 import { Form, InjectedFormProps, reduxForm } from 'redux-form'
 import { FormattedMessage } from 'react-intl'
 import {
   getCoinFromPair,
   getFiatFromPair
 } from 'data/components/simpleBuy/model'
-import { Icon, TabMenu, TabMenuItem, Text } from 'blockchain-info-components'
 import { Props as OwnProps, SuccessStateType } from '../index'
 import { SBPairType } from 'core/types'
 import CryptoItem from './CryptoItem'
-import React, { useState } from 'react'
-import styled from 'styled-components'
 
 const Wrapper = styled.div`
   display: flex;
@@ -116,8 +117,9 @@ const CryptoSelector: React.FC<InjectedFormProps<{}, Props> &
           {props.pairs.map((value, index) => (
             <CryptoItem
               key={index}
-              value={value}
               orderType={orderType}
+              fiat={getFiatFromPair(value.pair)}
+              coin={getCoinFromPair(value.pair)}
               onClick={() => handleSubmit(value as SBPairType)}
             />
           ))}

diff --git a/...ckchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx b/...ckchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx
@@ -202,7 +202,11 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
           />
         </TopText>
       </FlyoutWrapper>
-      <CryptoItem value={props.pair} orderType={props.orderType} />
+      <CryptoItem
+        fiat={props.fiatCurrency || 'USD'}
+        coin={props.cryptoCurrency}
+        orderType={props.orderType}
+      />
       <FlyoutWrapper style={{ paddingTop: '0px' }}>
         <AmountFieldContainer
           className={isAmtShakeActive ? 'shake' : ''}