From deae4e8217577b8f2a1242b68696fb09250bedc9 Mon Sep 17 00:00:00 2001
From: plondon <philip@blockchain.com>
Date: Mon, 3 Jun 2019 08:31:13 -0400
Subject: [PATCH] fix(TxList Welcome): move xlm to normal tx list welcome
 state, update other currrencies style

---
 config/mocks/wallet-options-v4.json           |   1 +
 .../Content/Empty/CoinWelcome/index.js        |   6 -
 .../Content/Empty/CoinWelcome/template.js     | 185 ++++++++++--------
 .../Content/Empty/CoinWelcome/template.xlm.js | 147 --------------
 .../__mocks__/wallet-options-v4.js            |   2 +
 5 files changed, 109 insertions(+), 232 deletions(-)
 delete mode 100644 packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/template.xlm.js

diff --git a/config/mocks/wallet-options-v4.json b/config/mocks/wallet-options-v4.json
index a55f563dcf5..eaca80e6152 100644
--- a/config/mocks/wallet-options-v4.json
+++ b/config/mocks/wallet-options-v4.json
@@ -181,6 +181,7 @@
             "circle": "xlm-circle-filled",
             "circleFilled": "xlm-circle-filled"
           },
+          "learnMoreLink": "https://support.blockchain.com/hc/en-us/articles/360019105171-What-is-Stellar-",
           "minConfirmations": 1,
           "txExplorerBaseUrl": "https://stellarchain.io/tx",
           "txListAppRoute": "/xlm/transactions"
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/index.js
index 62d2d994f69..4c781698f23 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/index.js
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/index.js
@@ -11,7 +11,6 @@ import {
 } from './selectors'
 import Welcome from './template'
 import WelcomePax from './template.pax'
-import WelcomeXlm from './template.xlm'
 
 class CoinWelcomeContainer extends React.PureComponent {
   render () {
@@ -37,11 +36,6 @@ class CoinWelcomeContainer extends React.PureComponent {
           />
         )
       }
-      case 'XLM': {
-        return (
-          <WelcomeXlm availability={availability} currentCoin={currentCoin} />
-        )
-      }
       default: {
         return (
           <Welcome
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/template.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/template.js
index 81aaa8f878c..d8164347881 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/template.js
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/template.js
@@ -4,7 +4,6 @@ import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 import { LinkContainer } from 'react-router-bootstrap'
 import media from 'services/ResponsiveService'
-import { lighten } from 'polished'
 
 import { model } from 'data'
 import { Button, Icon, Link, Text } from 'blockchain-info-components'
@@ -14,47 +13,40 @@ const Wrapper = styled.div`
 `
 const Container = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   position: relative;
   margin: 0 auto 25px;
   width: 640px;
-  box-sizing: border-box;
-  border-radius: 3px;
-  border: 1px solid ${props => props.theme['brand-quaternary']};
-  ${media.mobile`
+  ${media.tablet`
     flex-direction: column;
     width: 100%;
   `};
 `
 const Row = styled.div`
-  width: 50%;
-  padding: 25px;
-  ${media.mobile`
-    width: 100%;
-    box-sizing: border-box;
-  `};
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  margin-top: 16px;
+  &:last-child {
+    margin-top: 32px;
+  }
 `
 const Content = styled(Text)`
   margin: 15px 0 20px 0;
   line-height: 1.4;
 `
-const CoinRow = styled.div`
-  width: 50%;
+const Column = styled.div`
   display: flex;
-  position: relative;
+  flex-direction: row;
+  width: 100%;
   align-items: center;
   justify-content: center;
-  background-color: ${props => lighten(0.4, props.theme[props.color])};
-  ${media.mobile`
-    width: 100%;
-  `};
 `
-const ButtonContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  > button:first-child {
-    margin-right: 15px;
-  }
+const FooterButton = styled(Button)`
+  height: 56px;
+  width: 100%;
+  font-size: 16px;
+  font-weight: 500;
 `
 const LearnMoreContainer = styled(Link)`
   width: 640px;
@@ -74,6 +66,35 @@ const LearnMoreLink = styled(Link)`
   display: inline-flex;
 `
 
+const getContent = currentCoin => {
+  switch (currentCoin.coinCode) {
+    case 'XLM': {
+      return (
+        <Content weight={400}>
+          <FormattedMessage
+            id='scenes.transaction.content.empty.xlm.subtitle2'
+            defaultMessage='XLM is a token that enables quick, low cost global transactions. Send, receive, and trade XLM from your Wallet today.'
+          />
+        </Content>
+      )
+    }
+    default: {
+      return (
+        <Content weight={400}>
+          <FormattedMessage
+            id='scenes.transaction.content.empty.newcoinswap'
+            defaultMessage='Send, Request and Swap {coinName} ({coinCode}) directly from your Blockchain Wallet.'
+            values={{
+              coinName: currentCoin.displayName,
+              coinCode: currentCoin.coinTicker
+            }}
+          />
+        </Content>
+      )
+    }
+  }
+}
+
 const Welcome = props => {
   const { availability, currentCoin, handleRequest, partner } = props
 
@@ -81,27 +102,31 @@ const Welcome = props => {
     <Wrapper>
       <Container>
         <Row>
-          <Text size='24px' weight={500} color='brand-primary'>
-            <FormattedMessage
-              id='scenes.transaction.content.empty.newcoinwallet'
-              defaultMessage='Your {coin} Wallet'
-              values={{ coin: currentCoin.coinTicker }}
-            />
-          </Text>
-          <Content weight={400}>
-            <FormattedMessage
-              id='scenes.transaction.content.empty.newcoinswap'
-              defaultMessage='Send, Request and Swap {coinName} ({coinCode}) directly from your Blockchain Wallet.'
-              values={{
-                coinName: currentCoin.displayName,
-                coinCode: currentCoin.coinTicker
-              }}
+          <Column>
+            <div>
+              <Text size='24px' weight={500} color='brand-primary'>
+                <FormattedMessage
+                  id='scenes.transaction.content.empty.newcoinwallet'
+                  defaultMessage='Your {coin} Wallet'
+                  values={{ coin: currentCoin.coinTicker }}
+                />
+              </Text>
+              {getContent(currentCoin)}
+            </div>
+          </Column>
+          <Column>
+            <Icon
+              name={currentCoin.icons.circleFilled}
+              color={currentCoin.colorCode}
+              size='112px'
             />
-          </Content>
-          <ButtonContainer>
+          </Column>
+        </Row>
+        <Row>
+          <Column style={{ paddingRight: '20px' }}>
             {partner ? (
               <LinkContainer to='/buy-sell'>
-                <Button
+                <FooterButton
                   nature='primary'
                   fullwidth
                   disabled={!availability.exchange}
@@ -111,10 +136,10 @@ const Welcome = props => {
                     defaultMessage='Buy {coin}'
                     values={{ coin: currentCoin.coinTicker }}
                   />
-                </Button>
+                </FooterButton>
               </LinkContainer>
             ) : (
-              <Button
+              <FooterButton
                 nature='primary'
                 onClick={handleRequest}
                 fullwidth
@@ -125,8 +150,10 @@ const Welcome = props => {
                   defaultMessage='Get {coin}'
                   values={{ coin: currentCoin.coinTicker }}
                 />
-              </Button>
+              </FooterButton>
             )}
+          </Column>
+          <Column style={{ paddingLeft: '20px' }}>
             <LinkContainer
               to={{
                 pathname: '/swap',
@@ -138,7 +165,7 @@ const Welcome = props => {
                 }
               }}
             >
-              <Button
+              <FooterButton
                 nature='empty-secondary'
                 fullwidth
                 disabled={!availability.exchange}
@@ -148,41 +175,41 @@ const Welcome = props => {
                   defaultMessage='Swap {coin}'
                   values={{ coin: currentCoin.coinTicker }}
                 />
-              </Button>
+              </FooterButton>
             </LinkContainer>
-          </ButtonContainer>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            {currentCoin.learnMoreLink && (
+              <LearnMoreContainer
+                href={currentCoin.learnMoreLink}
+                target='_blank'
+              >
+                <Text size='15px'>
+                  <FormattedMessage
+                    id='scenes.transaction.content.empty.getstarted.explanation'
+                    defaultMessage="We've put together a page explaining all of this."
+                  />
+                </Text>
+                <LearnMoreLink>
+                  <LearnMoreText size='15px'>
+                    <FormattedMessage
+                      id='scenes.transaction.content.empty.getstarted.learnmore'
+                      defaultMessage='Learn More'
+                    />
+                  </LearnMoreText>
+                  <Icon
+                    name='short-right-arrow'
+                    color='brand-secondary'
+                    size='18px'
+                  />
+                </LearnMoreLink>
+              </LearnMoreContainer>
+            )}
+          </Column>
         </Row>
-        <CoinRow color={currentCoin.colorCode}>
-          <Icon
-            name={currentCoin.icons.circle}
-            color={currentCoin.colorCode}
-            size='160px'
-          />
-        </CoinRow>
       </Container>
-      {currentCoin.learnMoreLink && (
-        <LearnMoreContainer href={currentCoin.learnMoreLink} target='_blank'>
-          <Text size='15px'>
-            <FormattedMessage
-              id='scenes.transaction.content.empty.getstarted.explanation'
-              defaultMessage="We've put together a page explaining all of this."
-            />
-          </Text>
-          <LearnMoreLink>
-            <LearnMoreText size='15px'>
-              <FormattedMessage
-                id='scenes.transaction.content.empty.getstarted.learnmore'
-                defaultMessage='Learn More'
-              />
-            </LearnMoreText>
-            <Icon
-              name='short-right-arrow'
-              color='brand-secondary'
-              size='18px'
-            />
-          </LearnMoreLink>
-        </LearnMoreContainer>
-      )}
     </Wrapper>
   )
 }
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/template.xlm.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/template.xlm.js
deleted file mode 100644
index e648d5ce22e..00000000000
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/template.xlm.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import { FormattedMessage } from 'react-intl'
-import { LinkContainer } from 'react-router-bootstrap'
-
-import media from 'services/ResponsiveService'
-import { Button, Icon, Link, Text } from 'blockchain-info-components'
-
-const Wrapper = styled.div`
-  padding-top: 20px;
-`
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  margin: 0 auto 25px;
-  width: 640px;
-  ${media.tablet`
-    flex-direction: column;
-    width: 100%;
-  `};
-`
-const Row = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  margin-top: 16px;
-  &:last-child {
-    margin-top: 32px;
-  }
-`
-const Column = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-`
-const FooterButton = styled(Button)`
-  height: 54px;
-  width: 100%;
-  font-size: 16px;
-  font-weight: 500;
-`
-
-const WelcomePax = props => {
-  const { availability, handleRequest, currentUserTier } = props
-  return (
-    <Wrapper>
-      <Container>
-        <Row>
-          <Column>
-            <div>
-              <Text size='24px' weight={500} color='brand-primary'>
-                <FormattedMessage
-                  id='scenes.transaction.content.empty.xlm.title1'
-                  defaultMessage='We Now Offer'
-                />
-              </Text>
-              <Text size='24px' weight={500} color='brand-primary'>
-                <FormattedMessage
-                  id='scenes.transaction.content.empty.xlm.title2'
-                  defaultMessage='Stellar (XLM)'
-                />
-              </Text>
-              <Text weight={400} style={{ marginTop: '16px' }}>
-                <FormattedMessage
-                  id='scenes.transaction.content.empty.xlm.subtitle2'
-                  defaultMessage='XLM is a token that enables quick, low cost global transactions. Send, receive, and trade XLM from your Wallet today.'
-                />
-              </Text>
-            </div>
-          </Column>
-          <Column>
-            <Icon name='xlm-circle-filled' size='112px' color='xlm' />
-          </Column>
-        </Row>
-        <Row>
-          <Column style={{ paddingRight: '20px' }}>
-            {currentUserTier ? (
-              <LinkContainer
-                to={{
-                  pathname: '/swap',
-                  state: {
-                    from: 'BTC',
-                    to: 'XLM'
-                  }
-                }}
-              >
-                <FooterButton
-                  nature='primary'
-                  onClick={handleRequest}
-                  fullwidth
-                >
-                  <FormattedMessage
-                    id='scenes.transaction.content.empty.xlm.swapcta'
-                    defaultMessage='Get Stellar Now'
-                  />
-                </FooterButton>
-              </LinkContainer>
-            ) : (
-              <LinkContainer to={'/swap/profile'}>
-                <FooterButton
-                  nature='primary'
-                  onClick={handleRequest}
-                  fullwidth
-                >
-                  <FormattedMessage
-                    id='scenes.transaction.content.empty.xlm.signupcta'
-                    defaultMessage='Get Stellar Now'
-                  />
-                </FooterButton>
-              </LinkContainer>
-            )}
-          </Column>
-          <Column style={{ paddingLeft: '20px' }}>
-            <Link
-              href='https://support.blockchain.com/hc/en-us/articles/360019105171-What-is-Stellar-'
-              target='_blank'
-              style={{ width: '100%' }}
-            >
-              <FooterButton
-                nature='empty-secondary'
-                fullwidth
-                disabled={!availability.exchange}
-              >
-                <FormattedMessage
-                  id='scenes.transaction.content.empty.getstarted.learnmore'
-                  defaultMessage='Learn More'
-                />
-              </FooterButton>
-            </Link>
-          </Column>
-        </Row>
-      </Container>
-    </Wrapper>
-  )
-}
-
-WelcomePax.propTypes = {
-  availability: PropTypes.object.isRequired,
-  currentCoin: PropTypes.object.isRequired,
-  currentUserTier: PropTypes.object.isRequired
-}
-
-export default WelcomePax
diff --git a/packages/blockchain-wallet-v4/src/redux/walletOptions/__mocks__/wallet-options-v4.js b/packages/blockchain-wallet-v4/src/redux/walletOptions/__mocks__/wallet-options-v4.js
index b4b58d66b1c..91a5f6da149 100644
--- a/packages/blockchain-wallet-v4/src/redux/walletOptions/__mocks__/wallet-options-v4.js
+++ b/packages/blockchain-wallet-v4/src/redux/walletOptions/__mocks__/wallet-options-v4.js
@@ -150,6 +150,8 @@ export default {
             circle: 'xlm-circle-filled',
             circleFilled: 'xlm-circle-filled'
           },
+          learnMoreLink:
+            'https://support.blockchain.com/hc/en-us/articles/360019105171-What-is-Stellar-',
           minConfirmations: 1,
           name: 'Stellar',
           txExplorerBaseUrl: 'https://stellarchain.io/tx',