Skip to content

Commit

Permalink
fix(TxList Welcome): move xlm to normal tx list welcome state, update…
Browse files Browse the repository at this point in the history 
… other currrencies style
  • Loading branch information
plondon committed Jun 3, 2019
1 parent 159deb0 commit deae4e8
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 232 deletions.
1 change: 1 addition & 0 deletions config/mocks/wallet-options-v4.json
View file
Expand Up @@ -181,6 +181,7 @@
"circle": "xlm-circle-filled",
"circleFilled": "xlm-circle-filled"
},
"learnMoreLink": "https://support.blockchain.com/hc/en-us/articles/360019105171-What-is-Stellar-",
"minConfirmations": 1,
"txExplorerBaseUrl": "https://stellarchain.io/tx",
"txListAppRoute": "/xlm/transactions"
Expand Down
6 changes: 0 additions & 6 deletions .../blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/index.js
View file
Expand Up @@ -11,7 +11,6 @@ import {
} from './selectors'
import Welcome from './template'
import WelcomePax from './template.pax'
import WelcomeXlm from './template.xlm'

class CoinWelcomeContainer extends React.PureComponent {
render () {
Expand All @@ -37,11 +36,6 @@ class CoinWelcomeContainer extends React.PureComponent {
/>
)
}
case 'XLM': {
return (
<WelcomeXlm availability={availability} currentCoin={currentCoin} />
)
}
default: {
return (
<Welcome
Expand Down
185 changes: 106 additions & 79 deletions ...ockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/template.js
View file
Expand Up @@ -4,7 +4,6 @@ import styled from 'styled-components'
import { FormattedMessage } from 'react-intl'
import { LinkContainer } from 'react-router-bootstrap'
import media from 'services/ResponsiveService'
import { lighten } from 'polished'

import { model } from 'data'
import { Button, Icon, Link, Text } from 'blockchain-info-components'
Expand All @@ -14,47 +13,40 @@ const Wrapper = styled.div`
`
const Container = styled.div`
display: flex;
flex-direction: row;
flex-direction: column;
position: relative;
margin: 0 auto 25px;
width: 640px;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid ${props => props.theme['brand-quaternary']};
${media.mobile`
${media.tablet`
flex-direction: column;
width: 100%;
`};
`
const Row = styled.div`
width: 50%;
padding: 25px;
${media.mobile`
width: 100%;
box-sizing: border-box;
`};
display: flex;
flex-direction: row;
width: 100%;
margin-top: 16px;
&:last-child {
margin-top: 32px;
}
`
const Content = styled(Text)`
margin: 15px 0 20px 0;
line-height: 1.4;
`
const CoinRow = styled.div`
width: 50%;
const Column = styled.div`
display: flex;
position: relative;
flex-direction: row;
width: 100%;
align-items: center;
justify-content: center;
background-color: ${props => lighten(0.4, props.theme[props.color])};
${media.mobile`
width: 100%;
`};
`
const ButtonContainer = styled.div`
display: flex;
flex-direction: row;
> button:first-child {
margin-right: 15px;
}
const FooterButton = styled(Button)`
height: 56px;
width: 100%;
font-size: 16px;
font-weight: 500;
`
const LearnMoreContainer = styled(Link)`
width: 640px;
Expand All @@ -74,34 +66,67 @@ const LearnMoreLink = styled(Link)`
display: inline-flex;
`

const getContent = currentCoin => {
switch (currentCoin.coinCode) {
case 'XLM': {
return (
<Content weight={400}>
<FormattedMessage
id='scenes.transaction.content.empty.xlm.subtitle2'
defaultMessage='XLM is a token that enables quick, low cost global transactions. Send, receive, and trade XLM from your Wallet today.'
/>
</Content>
)
}
default: {
return (
<Content weight={400}>
<FormattedMessage
id='scenes.transaction.content.empty.newcoinswap'
defaultMessage='Send, Request and Swap {coinName} ({coinCode}) directly from your Blockchain Wallet.'
values={{
coinName: currentCoin.displayName,
coinCode: currentCoin.coinTicker
}}
/>
</Content>
)
}
}
}

const Welcome = props => {
const { availability, currentCoin, handleRequest, partner } = props

return (
<Wrapper>
<Container>
<Row>
<Text size='24px' weight={500} color='brand-primary'>
<FormattedMessage
id='scenes.transaction.content.empty.newcoinwallet'
defaultMessage='Your {coin} Wallet'
values={{ coin: currentCoin.coinTicker }}
/>
</Text>
<Content weight={400}>
<FormattedMessage
id='scenes.transaction.content.empty.newcoinswap'
defaultMessage='Send, Request and Swap {coinName} ({coinCode}) directly from your Blockchain Wallet.'
values={{
coinName: currentCoin.displayName,
coinCode: currentCoin.coinTicker
}}
<Column>
<div>
<Text size='24px' weight={500} color='brand-primary'>
<FormattedMessage
id='scenes.transaction.content.empty.newcoinwallet'
defaultMessage='Your {coin} Wallet'
values={{ coin: currentCoin.coinTicker }}
/>
</Text>
{getContent(currentCoin)}
</div>
</Column>
<Column>
<Icon
name={currentCoin.icons.circleFilled}
color={currentCoin.colorCode}
size='112px'
/>
</Content>
<ButtonContainer>
</Column>
</Row>
<Row>
<Column style={{ paddingRight: '20px' }}>
{partner ? (
<LinkContainer to='/buy-sell'>
<Button
<FooterButton
nature='primary'
fullwidth
disabled={!availability.exchange}
Expand All @@ -111,10 +136,10 @@ const Welcome = props => {
defaultMessage='Buy {coin}'
values={{ coin: currentCoin.coinTicker }}
/>
</Button>
</FooterButton>
</LinkContainer>
) : (
<Button
<FooterButton
nature='primary'
onClick={handleRequest}
fullwidth
Expand All @@ -125,8 +150,10 @@ const Welcome = props => {
defaultMessage='Get {coin}'
values={{ coin: currentCoin.coinTicker }}
/>
</Button>
</FooterButton>
)}
</Column>
<Column style={{ paddingLeft: '20px' }}>
<LinkContainer
to={{
pathname: '/swap',
Expand All @@ -138,7 +165,7 @@ const Welcome = props => {
}
}}
>
<Button
<FooterButton
nature='empty-secondary'
fullwidth
disabled={!availability.exchange}
Expand All @@ -148,41 +175,41 @@ const Welcome = props => {
defaultMessage='Swap {coin}'
values={{ coin: currentCoin.coinTicker }}
/>
</Button>
</FooterButton>
</LinkContainer>
</ButtonContainer>
</Column>
</Row>
<Row>
<Column>
{currentCoin.learnMoreLink && (
<LearnMoreContainer
href={currentCoin.learnMoreLink}
target='_blank'
>
<Text size='15px'>
<FormattedMessage
id='scenes.transaction.content.empty.getstarted.explanation'
defaultMessage="We've put together a page explaining all of this."
/>
</Text>
<LearnMoreLink>
<LearnMoreText size='15px'>
<FormattedMessage
id='scenes.transaction.content.empty.getstarted.learnmore'
defaultMessage='Learn More'
/>
</LearnMoreText>
<Icon
name='short-right-arrow'
color='brand-secondary'
size='18px'
/>
</LearnMoreLink>
</LearnMoreContainer>
)}
</Column>
</Row>
<CoinRow color={currentCoin.colorCode}>
<Icon
name={currentCoin.icons.circle}
color={currentCoin.colorCode}
size='160px'
/>
</CoinRow>
</Container>
{currentCoin.learnMoreLink && (
<LearnMoreContainer href={currentCoin.learnMoreLink} target='_blank'>
<Text size='15px'>
<FormattedMessage
id='scenes.transaction.content.empty.getstarted.explanation'
defaultMessage="We've put together a page explaining all of this."
/>
</Text>
<LearnMoreLink>
<LearnMoreText size='15px'>
<FormattedMessage
id='scenes.transaction.content.empty.getstarted.learnmore'
defaultMessage='Learn More'
/>
</LearnMoreText>
<Icon
name='short-right-arrow'
color='brand-secondary'
size='18px'
/>
</LearnMoreLink>
</LearnMoreContainer>
)}
</Wrapper>
)
}
Expand Down

0 comments on commit deae4e8

Please sign in to comment.