fix(Profile): add xlm airdrop info copy

blockchain · Jun 3, 2019 · 4f6c2cf · 4f6c2cf
1 parent 01e1d19
commit 4f6c2cf
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 11 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/IdentityVerification/TierCard/index.js b/packages/blockchain-wallet-v4-frontend/src/components/IdentityVerification/TierCard/index.js
@@ -113,7 +113,7 @@ export const TierCard = ({
   goToSwap
 }) => {
   const tierData = head(userTiers.filter(propEq('index', tier)))
-  const symbol =
+  const tierFiatLimit =
     Exchange.getSymbol(tierData.limits.currency) +
     Currency.formatFiat(
       tierData.limits[toLower(path([tier, 'limit'], TIERS))],
@@ -146,13 +146,23 @@ export const TierCard = ({
         <Content>
           <Row>
             <Column>
-              <Text size='32px' color='marketing-secondary'>
-                {symbol}
+              <Text size='32px' weight={600} color='marketing-secondary'>
+                {tierFiatLimit}
               </Text>
-              <Text size='14px' color='textBlack' style={{ marginTop: '8px' }}>
+              <Text
+                size='14px'
+                weight={500}
+                color='textBlack'
+                style={{ marginTop: '8px' }}
+              >
                 {tierLimit}
               </Text>
-              <Text size='14px' color='gray-3' style={{ marginTop: '7px' }}>
+              <Text
+                size='14px'
+                weight={500}
+                color='gray-3'
+                style={{ marginTop: '7px' }}
+              >
                 {tierStatus}
               </Text>
             </Column>

diff --git a/...c/modals/Exchange/IdentityVerification/Verify/__snapshots__/template.lowflow.spec.js.snap b/...c/modals/Exchange/IdentityVerification/Verify/__snapshots__/template.lowflow.spec.js.snap
@@ -61,7 +61,43 @@ exports[`HighFlow should render correctly 1`] = `
               opacity={1}
               size="18px"
               uppercase={false}
+              weight={500}
+            >
+              <FormattedMessage
+                defaultMessage="Is my country supported?"
+                id="identityverification.verify.supportedcountries"
+                values={Object {}}
+              />
+            </Text>
+            <Text
+              altFont={false}
+              capitalize={false}
+              color="gray-5"
+              cursor="inherit"
+              italic={false}
+              opacity={1}
+              size="16px"
+              uppercase={false}
               weight={400}
+            >
+              <FormattedHTMLMessage
+                defaultMessage="Not all countries are supported at this time. Check our up to date <a href=\\"https://support.blockchain.com/hc/en-us/articles/360018751932\\" target=\\"_blank\\" rel=\\"noopener noreferrrer\\">list of countries</a> before proceeding."
+                id="identityverification.verify.supportecountrieslist"
+                values={Object {}}
+              />
+            </Text>
+          </ForwardRef>
+          <ForwardRef>
+            <Text
+              altFont={false}
+              capitalize={false}
+              color="gray-5"
+              cursor="inherit"
+              italic={false}
+              opacity={1}
+              size="18px"
+              uppercase={false}
+              weight={500}
             >
               <FormattedMessage
                 defaultMessage="How do I enable my camera and microphone?"

diff --git a/...s/blockchain-wallet-v4-frontend/src/scenes/Settings/Profile/IdentityVerification/index.js b/...s/blockchain-wallet-v4-frontend/src/scenes/Settings/Profile/IdentityVerification/index.js
@@ -1,11 +1,21 @@
 import React from 'react'
+import { pathOr, propEq } from 'ramda'
 import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'
 import styled from 'styled-components'
 
-import { Text, TooltipHost, TooltipIcon } from 'blockchain-info-components'
+import { Exchange } from 'blockchain-wallet-v4/src'
+import * as Currency from 'blockchain-wallet-v4/src/exchange/currency'
+import {
+  Icon,
+  Text,
+  TooltipHost,
+  TooltipIcon
+} from 'blockchain-info-components'
 import TierCard from 'components/IdentityVerification/TierCard'
 import media from 'services/ResponsiveService'
 
+import { KYC_STATES } from 'data/modules/profile/model'
+
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -92,7 +102,15 @@ const LearnMoreContainer = styled.div`
   `};
 `
 
-const IdentityVerification = () => {
+const IdentityVerification = ({ userData, userTiers }) => {
+  const tier2LimitAmount = pathOr('25000', [1, 'limits', 'daily'], userTiers)
+  const tier2LimitCurrency = pathOr('USD', [1, 'limits', 'currency'], userTiers)
+  const isUnderReview = propEq('kycState', KYC_STATES.UNDER_REVIEW, userData)
+
+  const formattedTier2Limit =
+    Exchange.getSymbol(tier2LimitCurrency) +
+    Currency.formatFiat(tier2LimitAmount, 0)
+
   return (
     <Wrapper>
       <Container>
@@ -111,19 +129,39 @@ const IdentityVerification = () => {
               />
             </SwapText>
             <LearnMoreContainer>
-              <SwapText size='12px' color='textBlack'>
+              <SwapText size='13px' color='textBlack'>
                 <FormattedMessage
                   id='scenes.profile.identityverification.swaplimit.wanttolearnmore'
                   defaultMessage='Want to learn more?'
                 />
               </SwapText>
-              <SwapText size='12px' weight={400}>
+              <SwapText size='13px' weight={400}>
                 <FormattedHTMLMessage
                   id='scenes.profile.identityverification.swaplimit.learn_more_limits'
                   defaultMessage="We’ve put together an article on Swap Limits. <a href='https://blockchain.zendesk.com/hc/en-us/articles/360018353031-Exchange-Limit-Amounts' rel='noopener noreferrer' target='_blank'>Learn more.</a>"
                 />
               </SwapText>
             </LearnMoreContainer>
+            <LearnMoreContainer>
+              <SwapText>
+                <Icon size='24px' name='alert-filled' color='orange' />
+              </SwapText>
+              {isUnderReview && (
+                <SwapText size='14px'>
+                  <FormattedMessage
+                    id='scenes.profile.idv.swaplimit.airdropdisclaimer'
+                    defaultMessage="Gold verification is under review, once verified you'll be able to use Swap and trade up to {tier2Limit}."
+                    values={{ tier2Limit: formattedTier2Limit }}
+                  />
+                </SwapText>
+              )}
+              <SwapText size='14px'>
+                <FormattedMessage
+                  id='scenes.profile.idv.swaplimit.airdropdisclaimer2'
+                  defaultMessage='Please be aware there is a large waiting list for Stellar airdrops and unfortunately not all applications for free XLM will be successful.'
+                />
+              </SwapText>
+            </LearnMoreContainer>
           </Column>
         </Row>
         <Row width='60%'>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Profile/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Profile/index.js
@@ -34,10 +34,10 @@ const Loading = () => (
 
 export const Profile = ({ data, fetchUser }) =>
   data.cata({
-    Success: () => (
+    Success: ({ userData, userTiers }) => (
       <Wrapper>
         <Container>
-          <IdentityVerification />
+          <IdentityVerification userData={userData} userTiers={userTiers} />
         </Container>
       </Wrapper>
     ),