From c3b25f56385f35d39a9f89d284bb06355a5031f9 Mon Sep 17 00:00:00 2001 From: hcondori Date: Fri, 18 Feb 2022 18:10:13 -0300 Subject: [PATCH 1/3] feat(Tax Center): card report and circlebackground were added --- config/mocks/wallet-options-v4.json | 2 +- .../src/components/CircleBackground/index.tsx | 15 ++ .../src/scenes/Help/index.tsx | 19 +-- .../src/scenes/HelpExchange/index.tsx | 19 +-- .../scenes/TaxCenter/components/Card/Card.tsx | 44 +++++ .../TaxCenter/components/Card/index.tsx | 1 + .../src/scenes/TaxCenter/components/index.tsx | 1 + .../src/scenes/TaxCenter/model.tsx | 51 +++++- .../src/scenes/TaxCenter/template.tsx | 156 +++++++++++++++--- 9 files changed, 261 insertions(+), 47 deletions(-) create mode 100644 packages/blockchain-wallet-v4-frontend/src/components/CircleBackground/index.tsx create mode 100644 packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/Card/Card.tsx create mode 100644 packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/Card/index.tsx create mode 100644 packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/index.tsx diff --git a/config/mocks/wallet-options-v4.json b/config/mocks/wallet-options-v4.json index 81b369b9c4e..e287a3c69a7 100644 --- a/config/mocks/wallet-options-v4.json +++ b/config/mocks/wallet-options-v4.json @@ -44,7 +44,7 @@ "recurringBuys": true, "isRedesignEnabled": true, "signupCountry": true, - "taxCenter": false, + "taxCenter": true, "tradingCurrencyFlyout": true, "useNewPaymentProviders": true, "walletConnect": true, diff --git a/packages/blockchain-wallet-v4-frontend/src/components/CircleBackground/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/CircleBackground/index.tsx new file mode 100644 index 00000000000..2d7a989b842 --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/components/CircleBackground/index.tsx @@ -0,0 +1,15 @@ +import styled from 'styled-components' + +const CircleBackground = styled.div<{ color?: string; size?: string }>` + display: flex; + justify-content: center; + align-items: center; + width: ${({ size = '40px' }) => size}; + height: ${({ size = '40px' }) => size}; + min-width: ${({ size = '40px' }) => size}; + background-color: ${({ color, theme }) => (color ? theme[color] : theme.blue000)}; + border-radius: ${({ size = '40px' }) => size}; + margin: 8px; +` + +export default CircleBackground diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Help/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Help/index.tsx index 17cc4d67840..f03aa55ce51 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Help/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Help/index.tsx @@ -4,6 +4,7 @@ import { LinkContainer } from 'react-router-bootstrap' import styled from 'styled-components' import { Icon, Link, Text } from 'blockchain-info-components' +import CircleBackground from 'components/CircleBackground' import { Wrapper } from 'components/Public' import { media } from 'services/styles' @@ -51,15 +52,7 @@ const IconTextRow = styled.div` cursor: pointer; ` -const CircleBackground = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 48px; - height: 48px; - min-width: 48px; - background-color: ${(props) => props.theme.blue000}; - border-radius: 48px; +const StyledCircle = styled(CircleBackground)` margin: 8px 16px 8px 0; ` @@ -119,9 +112,9 @@ const Help = () => { - + - + { - + - + diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/HelpExchange/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/HelpExchange/index.tsx index 4e34e88ac73..acd235d5dbe 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/HelpExchange/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/HelpExchange/index.tsx @@ -4,6 +4,7 @@ import { LinkContainer } from 'react-router-bootstrap' import styled from 'styled-components' import { Icon, Link, Text } from 'blockchain-info-components' +import CircleBackground from 'components/CircleBackground' import { Wrapper } from 'components/Public' import { media } from 'services/styles' @@ -76,15 +77,7 @@ const IconTextRow = styled.div` cursor: pointer; ` -const CircleBackground = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 48px; - height: 48px; - min-width: 48px; - background-color: ${(props) => props.theme.blue000}; - border-radius: 48px; +const StyledCircle = styled(CircleBackground)` margin: 8px 16px 8px 0; ` @@ -133,9 +126,9 @@ class Help extends React.PureComponent { - + - + { target='_blank' > - + - + ( + +
+ + + {number} + + + + {title} + +
+ + {description} + + {children} + +) + +export default Card diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/Card/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/Card/index.tsx new file mode 100644 index 00000000000..95cfda28ea2 --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/Card/index.tsx @@ -0,0 +1 @@ +export { default } from './Card' diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/index.tsx new file mode 100644 index 00000000000..03fa782ed13 --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/index.tsx @@ -0,0 +1 @@ +export { default as Card } from './Card' diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/model.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/model.tsx index 19c135be509..e00cafecc36 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/model.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/model.tsx @@ -1,6 +1,7 @@ import styled from 'styled-components' -import { Text } from 'blockchain-info-components' +import { Button, SelectInput, Text } from 'blockchain-info-components' +import { SceneWrapper } from 'components/Layout' import MenuHeader from 'components/MenuHeader' export const Title = styled(Text)` @@ -10,3 +11,51 @@ export const Title = styled(Text)` export const MenuHeaderCentered = styled(MenuHeader)` align-items: center; ` + +export const Box = styled.div` + position: relative; + margin-top: 64px; + padding: 24px; + border-radius: 8px; + border: 1px solid ${(props) => props.theme.grey000}; + display: flex; + flex: 1; +` + +export const Slide = styled.div` + width: 100%; + display: flex; + flex-direction: column; + flex: 1; +` + +export const Container = styled(SceneWrapper)` + padding: 0 8px; +` + +export const Footer = styled.div` + padding: 24px; + height: 300px; + text-align: center; +` +export const Content = styled.div` + display: flex; + align-items: center; +` + +export const SelectGroup = styled.div` + height: 75px; +` + +export const StyledSelect = styled(SelectInput)` + width: 172px; + margin-right: 16px; +` + +export const SelectLabel = styled(Text)` + margin-bottom: 8px; +` + +export const GenerateButton = styled(Button)` + margin-top: 24px; +` diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/template.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/template.tsx index 18352550e50..0194fd715ee 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/template.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/template.tsx @@ -1,30 +1,148 @@ import React from 'react' import { FormattedMessage } from 'react-intl' -import { Text } from 'blockchain-info-components' -import { SceneWrapper, StickyHeader } from 'components/Layout' +import { Button, Carousel, Link, Text, TextGroup } from 'blockchain-info-components' -import { MenuHeaderCentered, Title } from './model' +import { Card } from './components' +import { + Box, + Container, + Content, + Footer, + GenerateButton, + MenuHeaderCentered, + SelectGroup, + SelectLabel, + Slide, + StyledSelect, + Title +} from './model' const TaxCenter = () => ( - - - - - <FormattedMessage - id='scenes.tax.center.title' - defaultMessage='Blockchain.com Tax Center' - /> - - - + + + <FormattedMessage id='scenes.tax.center.title' defaultMessage='Blockchain.com Tax Center' /> + + + + + + + + + + Do I owe taxes on my crypto? + + + {`If you sold or converted your crypto last year, the transactions are likely subject to U.S. capital + gains taxes.`} + + + + + How do I file? + + + {`Export your transaction history then manually calculate your gains/losses using your cost + basis. If you want to simplify the process, use our crypto tax partner CoinTracker to get free + tax reports for up to 1,000 transactions.`} + + + + + What if I use other crypto services? + + + + {`This file only contains your Blockchain.com Wallet activity. If you use other crypto services, + those transactions will not appear here. If you use the Blockchain.com Exchange, you can + connect your account to CoinTracker via API.`} + + + + Learn more + + + + + + + + + + + Choose tax year + + {}} /> + + {}} + > + Generate Report + + + + + + +
+ + + Have a Blockchain.com Exchange Account? + + + + Visit Exchange Tax Center + - - - + +
+ ) export default TaxCenter From bb61aa9e1fc941896f42fd2843201fe2c6948053 Mon Sep 17 00:00:00 2001 From: hcondori Date: Tue, 22 Feb 2022 12:01:58 -0300 Subject: [PATCH 2/3] feat(TaxCenter): card and carousel were added in tax center page --- lang/en.json | 17 +++ .../blockchain-info-components/index.d.ts | 12 ++ .../scenes/TaxCenter/components/Card/Card.tsx | 11 +- .../src/scenes/TaxCenter/model.tsx | 6 + .../src/scenes/TaxCenter/template.tsx | 138 +++++++++++------- 5 files changed, 126 insertions(+), 58 deletions(-) diff --git a/lang/en.json b/lang/en.json index a8641f1e101..30dc9cc0877 100644 --- a/lang/en.json +++ b/lang/en.json @@ -2086,6 +2086,23 @@ "scenes.settings.tor.description2": "The Tor network is frequently used by hackers attempting to access Blockchain users wallets.", "scenes.settings.tor.title": "Wallet Access via Tor", "scenes.swap.low_fees": "Low Fees", + "scenes.tax.center.title": "Blockchain.com Tax Center", + "scenes.tax.center.description": "Here’s everything you’ll need from Blockchain.com to file your taxes this year.", + "scenes.tax.center.carousel.taxes": "Do I owe taxes on my crypto?", + "scenes.tax.center.carousel.taxes.description": "If you sold or converted your crypto last year, the transactions are likely subject to U.S. capital gains taxes.", + "scenes.tax.center.carousel.file": "How do I file?", + "scenes.tax.center.carousel.file.description": "Export your transaction history then manually calculate your gains/losses using your cost basis. If you want to simplify the process, use our crypto tax partner CoinTracker to get free tax reports for up to 1,000 transactions.", + "scenes.tax.center.carousel.services": "What if I use other crypto services?", + "scenes.tax.center.carousel.services.title": "This file only contains your Blockchain.com Wallet activity. If you use other crypto services, those transactions will not appear here. If you use the Blockchain.com Exchange, you can connect your account to CoinTracker via API.", + "scenes.tax.center.card.report.title": "Export your transaction history", + "scenes.tax.center.card.report.description": "Get the full transaction history from your Wallet's Trading, Rewards, and Private Key accounts.", + "scenes.tax.center.card.report.select": "Choose tax year", + "scenes.tax.center.card.report.button": "Generate Report", + "scenes.tax.center.card.service.title": "Export your transaction history", + "scenes.tax.center.card.service.description": "We have partnered with CoinTracker to simplify your tax reporting. Get free tax reports for up to 1,000 transactions with CoinTracker or use a service provider of your choosing.", + "scenes.tax.center.card.service.button": "Visit CoinTracker", + "scenes.tax.center.footer.description": "Have a Blockchain.com Exchange Account?", + "scenes.tax.center.footer.link": "Visit Exchange Tax Center", "scenes.transaction.content.empty.buycoinnow": "Buy {coin} Now", "scenes.transaction.content.empty.cointxs": "All your {coinName} transactions will show up here.", "scenes.transaction.content.empty.depositnow": "Deposit {coin} Now", diff --git a/packages/blockchain-info-components/index.d.ts b/packages/blockchain-info-components/index.d.ts index f24b42f8d73..4c91b708bb4 100644 --- a/packages/blockchain-info-components/index.d.ts +++ b/packages/blockchain-info-components/index.d.ts @@ -277,3 +277,15 @@ export const CheckBoxInput: FunctionComponent<{ onClick?: () => void onChange?: () => void }> +export const SelectInput: FunctionComponent<{ + disabled?: boolean, + elements?: Array, + grouped?: boolean, + label?: string | any, + onBlur?: () => void, + onChange?: () => void, + onFocus?: () => void, + opened?: boolean, + searchEnabled?: boolean, + value: string | boolean | number +}> diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/Card/Card.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/Card/Card.tsx index 258599eb4ef..8c1cc44a240 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/Card/Card.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/Card/Card.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react' +import React, { ReactElement } from 'react' import styled from 'styled-components' import { Text } from 'blockchain-info-components' @@ -22,7 +22,7 @@ const Body = styled.div` margin-top: 24px; ` -const Card = ({ children, description = '', number = 0, title = '' }) => ( +const Card = ({ children, description, number = 0, title }: Props) => (
@@ -41,4 +41,11 @@ const Card = ({ children, description = '', number = 0, title = '' }) => ( ) +type Props = { + children: ReactElement + description: ReactElement + number: number + title: ReactElement +} + export default Card diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/model.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/model.tsx index e00cafecc36..2ce2e317e11 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/model.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/model.tsx @@ -58,4 +58,10 @@ export const SelectLabel = styled(Text)` export const GenerateButton = styled(Button)` margin-top: 24px; + height: 48px; +` + +export const VisitButton = styled(Button)` + margin-top: 16px; + height: 48px; ` diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/template.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/template.tsx index 0194fd715ee..158e4cc18c2 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/template.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/template.tsx @@ -1,7 +1,7 @@ import React from 'react' import { FormattedMessage } from 'react-intl' -import { Button, Carousel, Link, Text, TextGroup } from 'blockchain-info-components' +import { Carousel, Link, Text, TextGroup } from 'blockchain-info-components' import { Card } from './components' import { @@ -15,7 +15,8 @@ import { SelectLabel, Slide, StyledSelect, - Title + Title, + VisitButton } from './model' const TaxCenter = () => ( @@ -26,7 +27,7 @@ const TaxCenter = () => ( @@ -35,41 +36,54 @@ const TaxCenter = () => ( - Do I owe taxes on my crypto? + <FormattedMessage + id='scenes.tax.center.carousel.taxes' + defaultMessage='Do I owe taxes on my crypto?' + /> - {`If you sold or converted your crypto last year, the transactions are likely subject to U.S. capital - gains taxes.`} + - How do I file? + <FormattedMessage + id='scenes.tax.center.carousel.file' + defaultMessage='How do I file?' + /> - {`Export your transaction history then manually calculate your gains/losses using your cost - basis. If you want to simplify the process, use our crypto tax partner CoinTracker to get free - tax reports for up to 1,000 transactions.`} + - What if I use other crypto services? + <FormattedMessage + id='scenes.tax.center.carousel.services' + defaultMessage='What if I use other crypto services?' + /> - {`This file only contains your Blockchain.com Wallet activity. If you use other crypto services, + - - Learn more + + @@ -77,67 +91,79 @@ const TaxCenter = () => ( + } number={1} - title='Export your transaction history' + title={ + + } > - Choose tax year + - {}} - /> + {}} /> {}} > - Generate Report + + } number={2} - title='Upload to a tax service' + title={ + + } > - + {}}> + +