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 06497c921d2..62d2d994f69 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
@@ -7,55 +7,58 @@ import {
currentUserTier,
getAvailability,
getCanBuyBtc,
- getCanAirdrop,
getDomains
} from './selectors'
import Welcome from './template'
-import WelcomeAirdrop from './template.airdrop'
import WelcomePax from './template.pax'
+import WelcomeXlm from './template.xlm'
class CoinWelcomeContainer extends React.PureComponent {
render () {
const {
availability,
coin,
- canAirdrop,
currentUserTier,
domains,
partner,
supportedCoins,
...rest
} = this.props
- const { modalActions, onboardingActions } = rest
+ const { modalActions } = rest
const currentCoin = supportedCoins[coin]
- return canAirdrop ? (
-
- ) : currentCoin.coinCode === 'PAX' ? (
-
- ) : (
-
- modalActions.showModal('@MODAL.REQUEST.' + currentCoin.coinCode)
- }
- />
- )
+ switch (currentCoin.coinCode) {
+ case 'PAX': {
+ return (
+
+ )
+ }
+ case 'XLM': {
+ return (
+
+ )
+ }
+ default: {
+ return (
+
+ modalActions.showModal('@MODAL.REQUEST.' + currentCoin.coinCode)
+ }
+ />
+ )
+ }
+ }
}
}
const mapStateToProps = (state, ownProps) => ({
- canAirdrop: getCanAirdrop(state, ownProps),
partner: getCanBuyBtc(state, ownProps),
domains: getDomains(state),
availability: getAvailability(state, ownProps),
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/selectors.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/selectors.js
index fa7dac5fc2d..789c9af6a31 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/selectors.js
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/selectors.js
@@ -1,22 +1,10 @@
-import { path, propOr, toUpper } from 'ramda'
+import { propOr, toUpper } from 'ramda'
import { selectors } from 'data'
export const getDomains = state =>
selectors.core.walletOptions.getDomains(state).getOrElse(false)
-export const getCanAirdrop = (state, ownProps) => {
- const { coin } = ownProps
- const supportedCoins = selectors.core.walletOptions
- .getSupportedCoins(state)
- .getOrFail()
- const userData = selectors.modules.profile.getUserData(state).getOrElse({})
- return (
- path([coin, 'airdrop'], supportedCoins) &&
- !path(['tags', path([coin, 'airdrop', 'name'], supportedCoins)], userData)
- )
-}
-
export const getCanBuyBtc = (state, ownProps) => {
const { coin } = ownProps
const canTrade = selectors.exchange.getCanTrade(state, 'Buy').getOrElse(false)
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
new file mode 100644
index 00000000000..e648d5ce22e
--- /dev/null
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/Content/Empty/CoinWelcome/template.xlm.js
@@ -0,0 +1,147 @@
+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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {currentUserTier ? (
+
+
+
+
+
+ ) : (
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+WelcomePax.propTypes = {
+ availability: PropTypes.object.isRequired,
+ currentCoin: PropTypes.object.isRequired,
+ currentUserTier: PropTypes.object.isRequired
+}
+
+export default WelcomePax