Skip to content

Commit

Permalink
fix(swap2.0): move upgrade copy into data.cata
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheLeoB
TheLeoB committed Oct 27, 2020
1 parent 3b310af commit f40e55a
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 67 deletions.
99 changes: 32 additions & 67 deletions packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button, Icon, SpinningLoader, Text } from 'blockchain-info-components'
import { connect, ConnectedProps } from 'react-redux'
import { FormattedMessage } from 'react-intl'
import { Icon, SpinningLoader, Text } from 'blockchain-info-components'
import { RootState } from 'data/rootReducer'
import React, { PureComponent } from 'react'
import styled from 'styled-components'
Expand All @@ -17,14 +17,12 @@ import { getData } from './selectors'
import Checkout from './Checkout'
import CoinBalance from '../components/CoinBalance'
import Loading from './template.loading'
import Upgrade from './template.upgrade'

const SubTopText = styled.div`
display: flex;
align-items: center;
`
const UpgradeRow = styled(SubTopText)`
justify-content: space-between;
`
const Options = styled.div`
position: relative;
`
Expand All @@ -50,18 +48,15 @@ const Toggler = styled.div`
top: 2px;
}
`
const CustomFlyoutWrapper = styled(FlyoutWrapper)`
justify-content: space-between;
`

class EnterAmount extends PureComponent<Props> {
state = {}

componentDidMount() {
componentDidMount () {
this.props.swapActions.initAmountForm()
}

render() {
render () {
if (
!this.props.initSwapFormValues?.BASE ||
!this.props.initSwapFormValues?.COUNTER
Expand All @@ -78,56 +73,56 @@ class EnterAmount extends PureComponent<Props> {
<TopText spaceBetween>
<SubTopText>
<Icon
role="button"
name="arrow-left"
role='button'
name='arrow-left'
cursor
size="24px"
color="grey600"
size='24px'
color='grey600'
onClick={() =>
this.props.swapActions.setStep({
step: 'INIT_SWAP'
})
}
/>{' '}
<Text
size="20px"
color="grey900"
size='20px'
color='grey900'
weight={600}
style={{ marginLeft: '16px' }}
>
<FormattedMessage
id="copy.new_swap"
defaultMessage="New Swap"
id='copy.new_swap'
defaultMessage='New Swap'
/>
</Text>
</SubTopText>
{this.props.quoteR.cata({
Success: val => (
<Text size="14px" color="grey900" weight={500}>
<Text size='14px' color='grey900' weight={500}>
1 {BASE.coin} = {formatCoin(val.rate)} {COUNTER.coin}
</Text>
),
Failure: () => (
<Text size="14px" color="red600">
<Text size='14px' color='red600'>
<FormattedMessage
id="copy.oops"
defaultMessage="Oops. Something went wrong."
id='copy.oops'
defaultMessage='Oops. Something went wrong.'
/>
</Text>
),
Loading: () => (
<SpinningLoader borderWidth="4px" height="14px" width="14px" />
<SpinningLoader borderWidth='4px' height='14px' width='14px' />
),
NotAsked: () => (
<SpinningLoader borderWidth="4px" height="14px" width="14px" />
<SpinningLoader borderWidth='4px' height='14px' width='14px' />
)
})}
</TopText>
</FlyoutWrapper>
<div>
<Options>
<Option
role="button"
role='button'
onClick={() =>
this.props.swapActions.setStep({
step: 'COIN_SELECTION',
Expand All @@ -138,7 +133,7 @@ class EnterAmount extends PureComponent<Props> {
}
>
<div>
<Text color="grey600" weight={500} size="14px">
<Text color='grey600' weight={500} size='14px'>
Swap From
</Text>
<OptionTitle>{BASE.label}</OptionTitle>
Expand All @@ -149,15 +144,15 @@ class EnterAmount extends PureComponent<Props> {
<Icon
name={coins[BASE.coin].icons.circleFilled}
color={coins[BASE.coin].colorCode}
size="32px"
size='32px'
/>
</Option>
<Toggler onClick={this.props.swapActions.toggleBaseAndCounter}>
<Icon color="blue600" size="24px" name="arrow-up" />
<Icon color="blue600" size="24px" name="arrow-down" />
<Icon color='blue600' size='24px' name='arrow-up' />
<Icon color='blue600' size='24px' name='arrow-down' />
</Toggler>
<Option
role="button"
role='button'
onClick={() =>
this.props.swapActions.setStep({
step: 'COIN_SELECTION',
Expand All @@ -168,7 +163,7 @@ class EnterAmount extends PureComponent<Props> {
}
>
<div>
<Text color="grey600" weight={500} size="14px">
<Text color='grey600' weight={500} size='14px'>
Swap From
</Text>
<OptionTitle>{COUNTER.label}</OptionTitle>
Expand All @@ -182,52 +177,22 @@ class EnterAmount extends PureComponent<Props> {
<Icon
name={coins[COUNTER.coin].icons.circleFilled}
color={coins[COUNTER.coin].colorCode}
size="32px"
size='32px'
/>
</Option>
</Options>
{this.props.data.cata({
Success: val => <Checkout {...val} {...this.props} BASE={BASE} />,
Success: val => (
<>
<Checkout {...val} {...this.props} BASE={BASE} />
<Upgrade {...this.props} />
</>
),
Failure: () => <>oops</>,
Loading: () => <Loading />,
NotAsked: () => <Loading />
})}
</div>
<FlyoutWrapper>
<UpgradeRow>
<div>
<Text size="14px" weight={500} color="grey600" lineHeight="150%">
<FormattedMessage
id="copy.upgrade"
defaultMessage="Upgrade To Gold"
/>
</Text>
<Text size="16px" color="grey800" weight={600} lineHeight="150%">
<FormattedMessage
id="copy.swap_up_to"
defaultMessage="Swap Up to $10,000 a Day"
/>
</Text>
</div>
<Button
data-e2e="earnInterestLearnMore"
nature="light"
onClick={() =>
this.props.swapActions.setStep({
step: 'UPGRADE_PROMPT'
})
}
height="32px"
width="90px"
size="14px"
>
<FormattedMessage
id="buttons.learn_more"
defaultMessage="Learn More"
/>
</Button>
</UpgradeRow>
</FlyoutWrapper>
</>
)
}
Expand Down
54 changes: 54 additions & 0 deletions packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/template.upgrade.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { Button, Text } from 'blockchain-info-components'
import { FlyoutWrapper } from 'components/Flyout'
import { FormattedMessage } from 'react-intl'
import { Props } from '.'
import React from 'react'
import styled from 'styled-components'

const UpgradeRow = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`

const Upgrade: React.FC<Props> = props => {
return (
<FlyoutWrapper>
<UpgradeRow>
<div>
<Text size='14px' weight={500} color='grey600' lineHeight='150%'>
<FormattedMessage
id='copy.upgrade'
defaultMessage='Upgrade To Gold'
/>
</Text>
<Text size='16px' color='grey800' weight={600} lineHeight='150%'>
<FormattedMessage
id='copy.swap_up_to'
defaultMessage='Swap Up to $10,000 a Day'
/>
</Text>
</div>
<Button
data-e2e='earnInterestLearnMore'
nature='light'
onClick={() =>
props.swapActions.setStep({
step: 'UPGRADE_PROMPT'
})
}
height='32px'
width='90px'
size='14px'
>
<FormattedMessage
id='buttons.learn_more'
defaultMessage='Learn More'
/>
</Button>
</UpgradeRow>
</FlyoutWrapper>
)
}

export default Upgrade

0 comments on commit f40e55a

Please sign in to comment.