Skip to content

Commit

Permalink
feat(Whats New): empty state
Browse files Browse the repository at this point in the history
  • Loading branch information
plondon committed Jun 23, 2018
1 parent baffb56 commit 3d3df0b
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 48 deletions.
46 changes: 14 additions & 32 deletions ...ckchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/WhatsNew/WhatsNewContent/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,21 @@
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { LinkContainer } from 'react-router-bootstrap'
// Wipe announcements for launch, keeping code around to remember format

import { Link } from 'blockchain-info-components'
import FaqLink from '../FaqLink'
// import React from 'react'
// import { FormattedMessage } from 'react-intl'
// import { LinkContainer } from 'react-router-bootstrap'

const LearnMore = () => <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.learnmore' defaultMessage='Learn More' />
// import { Link } from 'blockchain-info-components'
// import FaqLink from '../FaqLink'

// const LearnMore = () => <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.learnmore' defaultMessage='Learn More' />

const Announcements = [
{
title: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.title11' defaultMessage='New Bitcoin Cash Address Format' />,
desc: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.desc11' defaultMessage='Bitcoin Cash addresses now follow the CashAddr format.' />,
date: 'January 18, 2018',
link: <FaqLink />
}, {
title: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.title10' defaultMessage='Bitcoin Cash' />,
desc: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.desc10' defaultMessage='If you had bitcoin in your wallet before August 1, 2017, you can now access Bitcoin Cash in your Blockchain wallet.' />,
date: 'October 3, 2017',
link: <LinkContainer to='/bch/transactions'><Link size='13px' weight={300}><LearnMore /></Link></LinkContainer>
}, {
title: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.title9' defaultMessage='Exchange Assets' />,
desc: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.desc9' defaultMessage='You can exchange between bitcoin, ether, and bitcoin cash directly from your Blockchain wallet' />,
date: 'August 11, 2017',
link: <LinkContainer to='/exchange'><Link size='13px' weight={300}><LearnMore /></Link></LinkContainer>
}, {
title: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.title8' defaultMessage='Send & Receive Ether' />,
desc: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.desc8' defaultMessage='You can now send and receive ether from your Blockchain wallet!' />,
date: 'July 24, 2017',
link: <LinkContainer to='/eth/transactions'><Link size='13px' weight={300}><LearnMore /></Link></LinkContainer>
}, {
title: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.title7' defaultMessage='Sell Bitcoin' />,
desc: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.desc7' defaultMessage='You can now sell bitcoin directly from your Blockchain wallet!' />,
date: 'May 12, 2017',
link: <LinkContainer to='/buy-sell'><Link size='13px' weight={300}><LearnMore /></Link></LinkContainer>
}
// {
// title: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.title11' defaultMessage='New Bitcoin Cash Address Format' />,
// desc: <FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.desc11' defaultMessage='Bitcoin Cash addresses now follow the CashAddr format.' />,
// date: 'January 18, 2018',
// link: <FaqLink />
// }
]

export default Announcements
50 changes: 34 additions & 16 deletions packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/WhatsNew/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'
import styled from 'styled-components'

import { Text, TextGroup } from 'blockchain-info-components'
import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'
import Announcements from './WhatsNewContent'

const Wrapper = styled.div`
Expand Down Expand Up @@ -48,26 +49,43 @@ const RowContent = styled.div`
margin-bottom: 20px;
box-sizing: border-box;
`
const EmptyContent = styled.div`
> div:first-child {
margin-bottom: 10px;
}
a {
color: ${props => props.theme['brand-secondary']};
}
`

const WhatsNew = props => (
<Wrapper>
<Container>
{Announcements.map((item, i) => (
<Item key={i}>
<RowTitle>
<Text size='14px' weight={600}>{item.title}</Text>
</RowTitle>
<RowDate>
<Text color='gray-3' weight={400} size='12px'>{item.date}</Text>
</RowDate>
<RowContent>
<TextGroup inline>
<Text size='12px' weight={300}>{item.desc}</Text>
{item.link}
</TextGroup>
</RowContent>
</Item>
))}
{
Announcements.length ? Announcements.map((item, i) => (
<Item key={i}>
<RowTitle>
<Text size='14px' weight={600}>{item.title}</Text>
</RowTitle>
<RowDate>
<Text color='gray-3' weight={400} size='12px'>{item.date}</Text>
</RowDate>
<RowContent>
<TextGroup inline>
<Text size='12px' weight={300}>{item.desc}</Text>
{item.link}
</TextGroup>
</RowContent>
</Item>
)) : <EmptyContent>
<Text size='20px'>
<FormattedMessage id='layouts.wallet.header.whatsnew.whatsnew.empty' defaultMessage="🎉 You're all caught up!" />
</Text>
<Text size='12px' weight={300} color='gray-3'>
<FormattedHTMLMessage id='layouts.wallet.header.whatsnew.whatsnew.in_progress' defaultMessage="Our team is always working on new features, but if there's something we can improve please let us know about it <a href='https://github.com/blockchain/blockchain-wallet-v4-frontend/issues' rel='noopener noreferrer' target='_blank'>here<a/>." />
</Text>
</EmptyContent>
}
</Container>
</Wrapper>
)
Expand Down

0 comments on commit 3d3df0b

Please sign in to comment.