Skip to content

Commit

Permalink
feat(swap2.0): upgrade prompt and flyout
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheLeoB
TheLeoB committed Oct 27, 2020
1 parent cbbb426 commit 3b310af
Show file tree
Hide file tree
Showing 6 changed files with 240 additions and 25 deletions.
9 changes: 9 additions & 0 deletions packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ type MessagesType = {
'buttons.swap_x_for_y': 'Swap {base} for {counter}'
'buttons.transact': 'Transact'
'buttons.transfer': 'Transfer'
'buttons.verify_id_now': 'Verify My ID Now'
'buttons.verify_now': 'Verify Now'
'buttons.viewstatus': 'View Status'
'buttons.withdraw': 'Withdraw'
Expand Down Expand Up @@ -348,12 +349,20 @@ type MessagesType = {
'copy.swap_instantly_exchange': 'Instantly exchange your crypto.'
'copy.swap_name_address': 'We need to know your name and address to comply with local laws.'
'copy.swap_start': 'Start Swapping'
'copy.swap_up_to': 'Swap Up to $10,000 a Day'
'copy.swap_upgrade_current_country': 'Blockchain.com needs to know your current country in accordance with local laws.'
'copy.swap_upgrade_once_verified': 'Once verified, come back to Swap and exchange your crypto.'
'copy.swap_upgrade_really_you': "We need to make sure it's really you to prevent fraud by uploading an ID."
'copy.swap_upgrade_select': 'Select Your Country'
'copy.swap_upgrade_upload': 'Upload Your ID. Swap More Crypto Everyday.'
'copy.swap_verify_email': 'Verify Your Email & Swap Today.'
'copy.swap_verify_id': 'Verify your identity to increase how much you can Swap everyday.'
'copy.swap_your_crypto': 'Swap Your Crypto'
'copy.to': 'To'
'copy.to:': 'To: '
'copy.transaction_fee': 'Transaction Fee'
'copy.total': 'Total'
'copy.upgrade': 'Upgrade To Gold'
'copy.view': 'View'
'dentityverification.verify.resubmit.reason.missing': 'The required photos are missing'
'exchange-side-nav-tooltip-connected': 'connected'
Expand Down
2 changes: 2 additions & 0 deletions packages/blockchain-wallet-v4-frontend/src/data/components/swap/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export enum SwapStepType {
'INIT_SWAP',
'COIN_SELECTION',
'ENTER_AMOUNT',
'UPGRADE_PROMPT',
'PREVIEW_SWAP',
'ORDER_DETAILS'
}
Expand Down Expand Up @@ -143,6 +144,7 @@ export type SwapStepPayload =
step: 'ORDER_DETAILS'
}
| { options: { side: 'BASE' | 'COUNTER' }; step: 'COIN_SELECTION' }
| { options?: never; step: 'UPGRADE_PROMPT' }

export type SwapActionTypes =
| FetchLimitsFailureActionType
Expand Down
1 change: 1 addition & 0 deletions packages/blockchain-wallet-v4-frontend/src/data/modals/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ export type ModalOriginType =
| 'SimpleBuyLink'
| 'Swap'
| 'SwapGetStarted'
| 'SwapPrompt'
| 'TheExchangePage'
| 'TransactionList'
| 'Unknown'
Expand Down
91 changes: 66 additions & 25 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 @@ -22,6 +22,9 @@ 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 @@ -47,15 +50,18 @@ 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 @@ -72,56 +78,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 @@ -132,7 +138,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 @@ -143,15 +149,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 @@ -162,7 +168,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 @@ -176,7 +182,7 @@ class EnterAmount extends PureComponent<Props> {
<Icon
name={coins[COUNTER.coin].icons.circleFilled}
color={coins[COUNTER.coin].colorCode}
size='32px'
size="32px"
/>
</Option>
</Options>
Expand All @@ -187,6 +193,41 @@ class EnterAmount extends PureComponent<Props> {
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

0 comments on commit 3b310af

Please sign in to comment.