Merge pull request #3708 from blockchain/feat/new-banners

feat(banners): dynamic coin rename banner
blockchain · Oct 5, 2021 · 9c831de · 9c831de
2 parents 3fd59fc + 50cfba9
commit 9c831de
Show file tree

Hide file tree

Showing 8 changed files with 330 additions and 6 deletions.
diff --git a/config/mocks/wallet-options-v4.json b/config/mocks/wallet-options-v4.json
@@ -12,10 +12,12 @@
         }
       },
       "coinListing": "",
+      "coinRename": "CLOUT",
       "sift": {
         "apiKey": "0ecd212038"
       },
       "featureFlags": {
+        "cEURSweepstake": true,
         "eddInterestFileUpload": true,
         "legacyMagicEmailLink": false,
         "legacyMobilePairing": false,

diff --git a/lang/en.json b/lang/en.json
@@ -353,6 +353,7 @@
     "copy.forms.amount_min": "The minimum amount is {amount}",
     "copy.free": "FREE",
     "copy.from": "From",
+    "copy.has_new_name": "has a new name",
     "copy.here": "here",
     "copy.holdings": "Holdings",
     "copy.home": "Home",
@@ -515,6 +516,7 @@
     "layouts.wallet.header.announcements.emailreminder.emailsent": "- An email was sent to {email}",
     "layouts.wallet.header.announcements.emailreminder.resend": "Resend Email",
     "layouts.wallet.header.announcements.newcoin.description": "Wrapped Digital Gold (wDGLD) is an ERC-20 tokenized version of DGLD.",
+    "layouts.wallet.header.announcements.coin_rename.description": "Heads up: {symbol} has renamed to {displaySymbol}. All balances are unaffected.",
     "layouts.wallet.header.general": "General",
     "layouts.wallet.header.preferences": "Preferences",
     "layouts.wallet.header.Sign Out": "Sign Out",

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Banners/CeloEURSweepstake/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Banners/CeloEURSweepstake/index.tsx
@@ -0,0 +1,132 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { connect, ConnectedProps } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
+import styled from 'styled-components'
+
+import { CoinType } from '@core/types'
+import { Button, Icon, Link, Text } from 'blockchain-info-components'
+import { actions, selectors } from 'data'
+import { media } from 'services/styles'
+
+import { getCoinRenameAnnouncement, getNewCoinAnnouncement } from '../selectors'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  border: 1px solid ${(props) => props.theme.grey000};
+  border-radius: 8px;
+  overflow: hidden;
+  padding: 20px;
+
+  ${media.atLeastLaptop`
+    height: 80px;
+    padding: 0 20px;
+  `}
+`
+const NewCoinWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+const VerbText = styled(Text)`
+  margin-right: 5px;
+  font-weight: 600;
+  font-size: 18px;
+  color: ${(props) => props.theme.black};
+`
+
+const Description = styled(Text)`
+  margin-top: 2px;
+  font-weight: 500;
+  font-size: 16px;
+  color: ${(props) => props.theme.black};
+  display: none;
+
+  ${media.atLeastMobile`
+    display: block;
+  `}
+`
+
+const CTAWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const CTAButton = styled(Button)`
+  margin-right: 12px;
+
+  & div {
+    color: ${(props) => props.theme.white};
+    font-weight: 600;
+    font-size: 14px;
+  }
+`
+const CloseLink = styled.div`
+  cursor: pointer;
+`
+
+const CoinRename = ({ cacheActions, showBanner }: Props) => {
+  if (!showBanner) return null
+
+  const newCoinAnnouncement = 'ceur-sweepstake'
+  const coin = 'CEUR'
+  if (!window.coins[coin]) return null
+  const { coinfig } = window.coins[coin]
+  const { displaySymbol } = coinfig
+
+  return (
+    <Wrapper>
+      <NewCoinWrapper>
+        <Icon name={coin} size='36px' style={{ marginRight: '16px' }} />
+        <div>
+          <VerbText>
+            <FormattedMessage
+              id='copy.when_up_to_500k'
+              defaultMessage='Win up to €500K in {displaySymbol}'
+              values={{ displaySymbol }}
+            />
+          </VerbText>
+          <Description>
+            <FormattedMessage
+              id='layouts.wallet.header.announcements.ceur.description'
+              defaultMessage='Buy €100 or more in {displaySymbol} for your chance to win up to €500K in {displaySymbol}.'
+              values={{ displaySymbol }}
+            />
+          </Description>
+        </div>
+      </NewCoinWrapper>
+
+      <CTAWrapper>
+        <CTAButton data-e2e='ceurLearnMore' nature='primary' small style={{ borderRadius: '4px' }}>
+          <Link href='https://www.blockchain.com/celo' target='_blank' rel='noopener noreferrer'>
+            <Text>
+              <FormattedMessage id='copy.learn_more' defaultMessage='Learn More' />
+            </Text>
+          </Link>
+        </CTAButton>
+        <CloseLink
+          data-e2e='newCoinCloseButton'
+          onClick={() => cacheActions.announcementDismissed(newCoinAnnouncement)}
+        >
+          <Icon size='20px' color='grey400' name='close-circle' />
+        </CloseLink>
+      </CTAWrapper>
+    </Wrapper>
+  )
+}
+
+const mapStateToProps = (state) => ({
+  showBanner: selectors.core.walletOptions.getCeloEurSweepstake(state).getOrElse(false)
+})
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  cacheActions: bindActionCreators(actions.cache, dispatch)
+})
+
+const connector = connect(mapStateToProps, mapDispatchToProps)
+
+type Props = ConnectedProps<typeof connector>
+
+export default connector(CoinRename)
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Banners/CoinRename/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Banners/CoinRename/index.tsx
@@ -0,0 +1,138 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { connect, ConnectedProps } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
+import styled from 'styled-components'
+
+import { CoinType } from '@core/types'
+import { Button, Icon, Text } from 'blockchain-info-components'
+import { actions, selectors } from 'data'
+import { media } from 'services/styles'
+
+import { getCoinRenameAnnouncement, getNewCoinAnnouncement } from '../selectors'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  border: 1px solid ${(props) => props.theme.grey000};
+  border-radius: 8px;
+  overflow: hidden;
+  padding: 20px;
+
+  ${media.atLeastLaptop`
+    height: 80px;
+    padding: 0 20px;
+  `}
+`
+const NewCoinWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+const VerbText = styled(Text)`
+  margin-right: 5px;
+  font-weight: 600;
+  font-size: 18px;
+  color: ${(props) => props.theme.black};
+`
+
+const Description = styled(Text)`
+  margin-top: 2px;
+  font-weight: 500;
+  font-size: 16px;
+  color: ${(props) => props.theme.black};
+  display: none;
+
+  ${media.atLeastMobile`
+    display: block;
+  `}
+`
+
+const CTAWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const CTAButton = styled(Button)`
+  margin-right: 12px;
+
+  & div {
+    color: ${(props) => props.theme.white};
+    font-weight: 600;
+    font-size: 14px;
+  }
+`
+const CloseLink = styled.div`
+  cursor: pointer;
+`
+
+const CoinRename = ({ buySellActions, cacheActions, coinRename }: Props) => {
+  if (!coinRename) return null
+  if (!window.coins[coinRename]) return null
+
+  const newCoinAnnouncement = getCoinRenameAnnouncement(coinRename)
+  const { coinfig } = window.coins[coinRename]
+  const { displaySymbol, symbol } = coinfig
+
+  return (
+    <Wrapper>
+      <NewCoinWrapper>
+        <Icon name={coinRename} size='36px' style={{ marginRight: '16px' }} />
+        <div>
+          <VerbText>
+            {symbol} <FormattedMessage id='copy.has_new_name' defaultMessage='has a new name' />
+          </VerbText>
+          <Description>
+            <FormattedMessage
+              id='layouts.wallet.header.announcements.coin_rename.description'
+              defaultMessage='Heads up: {symbol} has renamed to {displaySymbol}. All balances are unaffected.'
+              values={{ displaySymbol, symbol }}
+            />
+          </Description>
+        </div>
+      </NewCoinWrapper>
+
+      <CTAWrapper>
+        <CTAButton
+          data-e2e='newCoinTradeNowButton'
+          nature='primary'
+          onClick={() =>
+            buySellActions.showModal({
+              cryptoCurrency: symbol as CoinType,
+              orderType: 'BUY',
+              origin: 'TransactionList'
+            })
+          }
+          small
+          style={{ borderRadius: '4px' }}
+        >
+          <Text>
+            <FormattedMessage id='copy.trade' defaultMessage='Trade' /> {displaySymbol}
+          </Text>
+        </CTAButton>
+        <CloseLink
+          data-e2e='newCoinCloseButton'
+          onClick={() => cacheActions.announcementDismissed(newCoinAnnouncement)}
+        >
+          <Icon size='20px' color='grey400' name='close-circle' />
+        </CloseLink>
+      </CTAWrapper>
+    </Wrapper>
+  )
+}
+
+const mapStateToProps = (state) => ({
+  coinRename: selectors.core.walletOptions.getCoinRename(state).getOrElse('')
+})
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  buySellActions: bindActionCreators(actions.components.buySell, dispatch),
+  cacheActions: bindActionCreators(actions.cache, dispatch)
+})
+
+const connector = connect(mapStateToProps, mapDispatchToProps)
+
+type Props = ConnectedProps<typeof connector>
+
+export default connector(CoinRename)
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Banners/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Banners/index.tsx
@@ -8,6 +8,8 @@ import { RootState } from 'data/rootReducer'
 import { UserDataType } from 'data/types'
 
 import BuyCrypto from './BuyCrypto'
+import CeloEURSweepstake from './CeloEURSweepstake'
+import CoinRename from './CoinRename'
 import ContinueToGold from './ContinueToGold'
 import FinishKyc from './FinishKyc'
 import KycResubmit from './KycResubmit'
@@ -59,6 +61,12 @@ class Banners extends React.PureComponent<Props> {
             <SBOrderBanner />
           </BannerWrapper>
         )
+      case 'coinRename':
+        return (
+          <BannerWrapper>
+            <CoinRename />
+          </BannerWrapper>
+        )
       case 'newCurrency':
         return (
           <BannerWrapper>
@@ -77,6 +85,12 @@ class Banners extends React.PureComponent<Props> {
             <ContinueToGold />
           </BannerWrapper>
         )
+      case 'celoEURSweepstake':
+        return (
+          <BannerWrapper>
+            <CeloEURSweepstake />
+          </BannerWrapper>
+        )
       case 'recurringBuys':
         return (
           <BannerWrapper>