feat(Airdrops): stx airdrop card

packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/AirdropInfo/index.js

@@ -11,7 +11,7 @@ export const Box = styled.div`
   padding: 24px;
   border-radius: 8px;
   border: 1px solid ${props => props.theme['grey000']};
-  max-width: 300px;
+  width: 300px;
 `
 
 const AirdropBox = styled(Box)`

packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/AirdropInfo/model.js

@@ -11,22 +11,22 @@ const Copy = styled(Text)`
   margin-top: 8px;
   line-height: 1.5;
 `
-const CustomCartridge = styled(Cartridge)`
+export const CustomCartridge = styled(Cartridge)`
   text-transform: none;
   border-radius: 4px;
   padding: 6px 8px;
   font-size: 14px;
   margin-left: 0px;
 `
-const GreyCartridge = styled(CustomCartridge)`
+export const GreyCartridge = styled(CustomCartridge)`
   background-color: ${props => props.theme['grey000']};
   color: ${props => props.theme['grey600']};
 `
-const ErrorCartridge = styled(CustomCartridge)`
+export const ErrorCartridge = styled(CustomCartridge)`
   background-color: ${props => props.theme['red000']};
   color: ${props => props.theme['red600']};
 `
-const SuccessCartridge = styled(CustomCartridge)`
+export const SuccessCartridge = styled(CustomCartridge)`
   background-color: ${props => props.theme['green000']};
   color: ${props => props.theme['green600']};
 `

packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/StxAirdrop/index.js

@@ -0,0 +1,95 @@
+import { Box } from '../AirdropInfo'
+import { FormattedHTMLMessage, FormattedMessage } from 'react-intl'
+import { Icon, Link, Text } from 'blockchain-info-components'
+import { StxStatus } from './model'
+import React from 'react'
+import styled from 'styled-components'
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+`
+const StatusContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 26px;
+  min-height: 50px;
+  > div {
+    width: 50%;
+  }
+`
+const Date = styled.div`
+  height: 100%;
+  padding-left: 20px;
+  border-left: 1px solid ${props => props.theme['grey000']};
+`
+
+const StxAirdrop = props => {
+  return (
+    <Box>
+      <Header>
+        <Icon name='stx' color='stx' size='32px' />
+        <Text
+          size='20px'
+          color='grey800'
+          weight={600}
+          style={{ marginLeft: '16px' }}
+        >
+          <FormattedMessage
+            id='scenes.airdrops.blockstack'
+            defaultMessage='Blockstack'
+          />
+        </Text>
+      </Header>
+      <Text
+        size='12px'
+        color='grey600'
+        weight={500}
+        style={{ marginTop: '16px' }}
+      >
+        <FormattedHTMLMessage
+          id='scenes.airdrop.stx.stxinfo'
+          defaultMessage='Own your digital identity and data. With hundreds of decentralized apps in the Blockstack ecosystem.'
+        />{' '}
+        <Link
+          href='https://blockstack.org/try-blockstack'
+          target='_blank'
+          rel='noopener noreferrer'
+          size='12px'
+        >
+          <FormattedHTMLMessage
+            id='scenes.airdrop.stx.learnmore'
+            defaultMessage='Learn more'
+          />
+        </Link>
+      </Text>
+      <StatusContainer>
+        <div>
+          <StxStatus {...props} />
+        </div>
+        <Date>
+          <Text size='16px' color='grey800' weight={500}>
+            <FormattedMessage
+              id='scenes.airdrop.stx.feb'
+              defaultMessage='Feb. 2020'
+            />
+          </Text>
+          <Text size='12px' color='grey600' weight={500}>
+            <FormattedMessage
+              id='scenes.airdrop.stx.date'
+              defaultMessage='Airdrop Date'
+            />
+          </Text>
+        </Date>
+      </StatusContainer>
+      <Text size='11px' color='grey600' style={{ marginTop: '12px' }}>
+        <FormattedMessage
+          id='scenes.airdrop.stx.regulatory'
+          defaultMessage="*For regulatory reasons, USA, Canada and Japan nationals can't participate in the airdrop."
+        />
+      </Text>
+    </Box>
+  )
+}
+
+export default StxAirdrop

packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/StxAirdrop/model.js

@@ -0,0 +1,75 @@
+import {
+  CustomCartridge,
+  ErrorCartridge,
+  GreyCartridge,
+  SuccessCartridge
+} from '../AirdropInfo/model'
+import { FormattedMessage } from 'react-intl'
+import { model } from 'data'
+import React from 'react'
+import styled from 'styled-components'
+
+const { KYC_STATES } = model.profile
+
+const BlueCartridge = styled(CustomCartridge)`
+  cursor: pointer;
+  background-color: ${props => props.theme['blue600']};
+`
+
+export const StxStatus = ({ tags, kycState, identityVerificationActions }) => {
+  switch (kycState) {
+    case KYC_STATES.REJECTED:
+    case KYC_STATES.EXPIRED:
+      return (
+        <ErrorCartridge>
+          <FormattedMessage
+            id='scenes.airdrop.stx.ineligible'
+            defaultMessage='Ineligible'
+          />
+        </ErrorCartridge>
+      )
+    case KYC_STATES.PENDING:
+    case KYC_STATES.UNDER_REVIEW:
+      return (
+        <GreyCartridge>
+          <FormattedMessage
+            id='scenes.airdrop.stx.pending'
+            defaultMessage='Enrollment Pending'
+          />
+        </GreyCartridge>
+      )
+    case KYC_STATES.VERIFIED:
+      return tags['BLOCKSTACK'] ? (
+        <SuccessCartridge>
+          <FormattedMessage
+            id='scenes.airdrop.stx.enrolled'
+            defaultMessage='Enrolled'
+          />
+        </SuccessCartridge>
+      ) : (
+        <BlueCartridge
+          onClick={() =>
+            identityVerificationActions.claimCampaignClicked('BLOCKSTACK')
+          }
+        >
+          <FormattedMessage
+            id='scenes.airdrop.stx.enroll'
+            defaultMessage='Enroll'
+          />
+        </BlueCartridge>
+      )
+    case KYC_STATES.NONE:
+      return (
+        <BlueCartridge
+          onClick={() => identityVerificationActions.verifyIdentity(2)}
+        >
+          <FormattedMessage
+            id='scenes.airdrop.stx.upgrade'
+            defaultMessage='Upgrade'
+          />
+        </BlueCartridge>
+      )
+    default:
+      return null
+  }
+}

packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/index.js

@@ -25,7 +25,9 @@ class Airdrops extends React.PureComponent {
       Success: val => <Success {...val} {...this.props} />,
       Loading: () => <Loading />,
       NotAsked: () => <Loading />,
-      Failure: () => <span>Oops.</span>
+      Failure: () => (
+        <Text>Oops. Something went wrong and we don't know why</Text>
+      )
     })
     return (
       <Wrapper>

packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/template.loading.js

@@ -5,8 +5,8 @@ import React from 'react'
 const Loading = () => {
   return (
     <Container>
-      <SkeletonRectangle width='300px' height='300px' />
-      <SkeletonRectangle width='300px' height='300px' />
+      <SkeletonRectangle width='350px' height='300px' />
+      <SkeletonRectangle width='350px' height='300px' />
     </Container>
   )
 }

packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/template.success.js

@@ -1,5 +1,7 @@
 import AirdropInfo from './AirdropInfo'
+import media from 'services/ResponsiveService'
 import React from 'react'
+import StxAirdrop from './StxAirdrop'
 import styled from 'styled-components'
 
 export const Container = styled.div`
@@ -10,12 +12,20 @@ export const Container = styled.div`
       margin-right: 0px;
     }
   }
+  ${media.laptop`
+    flex-direction: column;
+    > div {
+      margin-right: 0;
+      margin-bottom: 12px; 
+    }
+  `};
 `
 
 const Success = props => {
   return (
     <Container>
       <AirdropInfo {...props} />
+      <StxAirdrop {...props} />
     </Container>
   )
 }