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