Feat(Tax Center) Tax Center page

config/mocks/wallet-options-v4.json

@@ -45,7 +45,7 @@
         "recurringBuys": true,
         "isRedesignEnabled": true,
         "signupCountry": true,
-        "taxCenter": false,
+        "taxCenter": true,
         "tradingCurrencyFlyout": true,
         "useNewPaymentProviders": true,
         "walletConnect": true,

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<any>,
+  grouped?: boolean,
+  label?: string | unknown,
+  onBlur?: () => void,
+  onChange?: () => void,
+  onFocus?: () => void,
+  opened?: boolean,
+  searchEnabled?: boolean,
+  value: string | boolean | number
+}>

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

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 = () => {
         </Header>
         <LinkContainer to='/recover' style={{ marginBottom: '20px' }}>
           <IconTextRow>
-            <CircleBackground color='blue000'>
+            <StyledCircle size='48px'>
               <Icon name='keyboard' color='blue600' size='16px' />
-            </CircleBackground>
+            </StyledCircle>
             <TextStack>
               <Text color='grey900' size='14px' weight={600} lineHeight='1.5'>
                 <FormattedMessage
@@ -143,9 +136,9 @@ const Help = () => {
         </LinkContainer>
         <LinkContainer to='/reset-2fa'>
           <IconTextRow>
-            <CircleBackground color='blue000'>
+            <StyledCircle size='48px' color='blue000'>
               <Icon name='lock' color='blue600' size='24px' />
-            </CircleBackground>
+            </StyledCircle>
             <TextStack>
               <Text color='grey900' size='14px' weight={600} lineHeight='1.5'>
                 <FormattedMessage id='scenes.help.2falost' defaultMessage='Lost your 2FA device?' />

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<Props, State> {
             </Text>
           </Header>
           <IconTextRow onClick={this.showPasswordResetForm} style={{ marginBottom: '12px' }}>
-            <CircleBackground color='blue000'>
+            <StyledCircle size='48px'>
               <Icon name='keyboard' color='blue600' size='16px' />
-            </CircleBackground>
+            </StyledCircle>
             <TextStack>
               <Text color='grey900' size='14px' weight={600} lineHeight='1.5'>
                 <FormattedMessage
@@ -159,9 +152,9 @@ class Help extends React.PureComponent<Props, State> {
             target='_blank'
           >
             <IconTextRow>
-              <CircleBackground color='blue000'>
+              <StyledCircle size='48px' color='blue000'>
                 <Icon name='lock' color='blue600' size='24px' />
-              </CircleBackground>
+              </StyledCircle>
               <TextStack>
                 <Text color='grey900' size='14px' weight={600} lineHeight='1.5'>
                   <FormattedMessage

packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/Card/Card.tsx

@@ -0,0 +1,51 @@
+import React, { ReactElement } from 'react'
+import styled from 'styled-components'
+
+import { Text } from 'blockchain-info-components'
+import CircleBackground from 'components/CircleBackground'
+
+import { Box } from '../../model'
+
+const ShadedBox = styled(Box)`
+  margin-top: 16px;
+  box-shadow: 0px 0px 12px rgba(5, 24, 61, 0.08);
+  border: none;
+  flex-direction: column;
+`
+
+const Header = styled.div`
+  display: inline-flex;
+  align-items: center;
+`
+
+const Body = styled.div`
+  margin-top: 24px;
+`
+
+const Card = ({ children, description, number = 0, title }: Props) => (
+  <ShadedBox>
+    <Header>
+      <CircleBackground>
+        <Text size='20px' weight={600} color='blue600'>
+          {number}
+        </Text>
+      </CircleBackground>
+      <Text size='20px' weight={600} color='black'>
+        {title}
+      </Text>
+    </Header>
+    <Text size='12px' weight={500} color='grey700'>
+      {description}
+    </Text>
+    <Body>{children}</Body>
+  </ShadedBox>
+)
+
+type Props = {
+  children: ReactElement
+  description: ReactElement
+  number: number
+  title: ReactElement
+}
+
+export default Card

packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/Card/index.tsx

@@ -0,0 +1 @@
+export { default } from './Card'

packages/blockchain-wallet-v4-frontend/src/scenes/TaxCenter/components/index.tsx

@@ -0,0 +1 @@
+export { default as Card } from './Card'

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,57 @@ 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;
+  height: 48px;
+`
+
+export const VisitButton = styled(Button)`
+  margin-top: 16px;
+  height: 48px;
+`