Merge pull request #6375 from blockchain/feat/v5-card-GROWUX-3672

feat(v5card): add v5 linkout card to homescreen

config/mocks/wallet-options-v4.json

@@ -61,6 +61,7 @@
         "isReferralRetrievalEnabled": true,
         "isStakingEnabled": true,
         "isStakingWithdrawalEnabled": true,
+        "isSuperAppEnabled": true,
         "isMnemonicRecoveryEnabled": true,
         "mergeAndUpgrade": false,
         "nftExplorer": true,

packages/blockchain-info-components/src/Colors/DarkMode.ts

@@ -172,7 +172,8 @@ const DarkTheme: DefaultTheme = {
   purple: '#4C18BA',
   // Service Announcements
   info: '#2C5687',
-  ultraLight: '#FAFBFF'
+  ultraLight: '#FAFBFF',
+  alertsNegative: '#F00699'
 }
 
 export default DarkTheme

packages/blockchain-info-components/src/Colors/Default.ts

@@ -169,7 +169,8 @@ const Default = {
   purple: '#4C18BA',
   // Service Announcements
   info: '#4A90E2',
-  ultraLight: '#FAFBFF'
+  ultraLight: '#FAFBFF',
+  alertsNegative: '#F00699'
 }
 
 export type IDefaultTheme = typeof Default

packages/blockchain-info-components/src/Images/Images.ts

@@ -8,6 +8,7 @@ import alertOrange from './img/alert-orange.svg'
 import appleAppStoreBadge from './img/apple-app-store-badge.svg'
 import applePay from './img/apple-pay-icon.svg'
 import arrowLeft from './img/arrow-left.svg'
+import arrowRightCircle from './img/arrow-right-circle.svg'
 import bank from './img/bank.svg'
 import bankEmpty from './img/bank-empty.svg'
 import bankEmptyBlue from './img/bank-empty-blue.svg'
@@ -178,6 +179,7 @@ import sofiMigrationPending from './img/sofi-migration-pending.svg'
 import sourceOfWealth from './img/source-of-wealth.svg'
 import ssBcLogo from './img/ss-bc-logo.svg'
 import subtractCheckCircle from './img/subtract-check-circle.png'
+import superAppIcon from './img/super-app-icon.svg'
 import swap from './img/swap.svg'
 import swapBlue from './img/swap-blue.svg'
 import swapSuccess from './img/swap-success.svg'
@@ -210,6 +212,7 @@ const Images = {
   'apple-app-store-badge': appleAppStoreBadge,
   'apple-pay': applePay,
   'arrow-left': arrowLeft,
+  'arrow-right-circle': arrowRightCircle,
   'backgorund-modal-gradient': bgModalGradient,
   bank,
   'bank-empty': bankEmpty,
@@ -377,6 +380,7 @@ const Images = {
   'sofi-migration-pending': sofiMigrationPending,
   'source-of-wealth': sourceOfWealth,
   'subtract-check-circle': subtractCheckCircle,
+  'super-app-icon': superAppIcon,
   swap,
   'swap-blue': swapBlue,
   'swap-success': swapSuccess,

packages/blockchain-wallet-v4-frontend/src/components/Navbar/MobileNav.tsx

@@ -8,6 +8,7 @@ import { Button, Text } from 'blockchain-info-components'
 import { FlyoutContainer, FlyoutContent, FlyoutFooter } from 'components/Flyout/Layout'
 
 import { PrimaryNavItem } from './Navbar'
+import SuperAppLink from './SuperAppLink'
 
 const MobileNavList = styled.ul`
   margin: 0;
@@ -65,6 +66,7 @@ const MobileNav = ({ handleClose, location, primaryNavItems, userNavItems }: Pro
     >
       <FlyoutContainer>
         <FlyoutContent mode='top'>
+          <SuperAppLink />
           <MobileNavList>
             {primaryNavItems.map((item: PrimaryNavItem) => (
               <StyledLi key={item.e2e} selected={location.pathname.includes(item.dest)}>

packages/blockchain-wallet-v4-frontend/src/components/Navbar/SuperAppLink/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useSelector } from 'react-redux'
+import Cookies from 'universal-cookie'
+
+import { getIsSuperAppEnabled } from '@core/redux/walletOptions/selectors'
+import { Image, Text } from 'blockchain-info-components'
+import { Separator } from 'layouts/Wallet/components'
+
+import { Container, LeftContainer, SeparatorWrapper, TextContainer } from './styles'
+
+export const Divider = () => (
+  <SeparatorWrapper>
+    <Separator />
+  </SeparatorWrapper>
+)
+
+const SuperAppLink = () => {
+  const isSuperAppEnabled = useSelector(getIsSuperAppEnabled).getOrElse(false)
+  const cookies = new Cookies()
+  const hasSuperAppAccess = cookies.get('wallet_v5_ui_available')
+
+  const handleClick = () => {
+    cookies.set('opt_out_wallet_v5_ui', 'false', { path: '/' })
+    window.location.reload()
+  }
+
+  if (!isSuperAppEnabled || !hasSuperAppAccess) return null
+
+  return (
+    <>
+      <Divider />
+      <Container onClick={handleClick}>
+        <LeftContainer>
+          <Image name='super-app-icon' size='32px' />
+          <TextContainer>
+            <Text color='alertsNegative' weight={500} lineHeight='18px' size='12px'>
+              <FormattedMessage defaultMessage='NEW' id='scene.wallet.menu.new' />
+            </Text>
+            <Text weight={600} lineHeight='21px' size='14px'>
+              <FormattedMessage
+                defaultMessage='Try the new wallet'
+                id='scene.wallet.menu.try-new-wallet'
+              />
+            </Text>
+          </TextContainer>
+        </LeftContainer>
+        <Image name='arrow-right-circle' size='16px' />
+      </Container>
+    </>
+  )
+}
+
+export default SuperAppLink

packages/blockchain-wallet-v4-frontend/src/components/Navbar/SuperAppLink/styles.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+
+import { media } from 'services/styles'
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.grey000};
+  border-radius: 16px;
+  cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+
+  ${media.tablet`
+    margin-bottom: 8px;
+  `}
+`
+
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const LeftContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`
+export const SeparatorWrapper = styled.div`
+  width: calc(100% - 32px);
+  margin: 8px 16px;
+  box-sizing: border-box;
+`

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/index.tsx

@@ -5,6 +5,7 @@ import { LinkContainer } from 'react-router-bootstrap'
 import styled from 'styled-components'
 
 import { Icon, Text } from 'blockchain-info-components'
+import SuperAppLink from 'components/Navbar/SuperAppLink'
 import { isKycVerificationEnabled } from 'data/custodial/selectors'
 import { authAndRouteToExchangeAction } from 'data/modules/profile/actions'
 import { ExchangeAuthOriginType } from 'data/types'
@@ -37,7 +38,7 @@ const ExchangeMenuItem = styled(MenuItem)`
   align-items: center;
 `
 
-const Divider = ({ margin }: { margin?: string }) => (
+export const Divider = ({ margin }: { margin?: string }) => (
   <SeparatorWrapper margin={margin}>
     <Separator />
   </SeparatorWrapper>
@@ -69,6 +70,7 @@ const Navigation = () => {
 
   return (
     <Wrapper>
+      <SuperAppLink />
       <Divider />
       <LinkContainer to='/home' activeClassName='active'>
         <MenuItem data-e2e='dashboardLink'>

packages/blockchain-wallet-v4/src/redux/walletOptions/selectors.ts

@@ -172,6 +172,10 @@ export const getMnemonicRecoveryEnabled = (state: RootState) =>
 export const getIsStakingEnabled = (state: RootState) =>
   getWebOptions(state).map(path(['featureFlags', 'isStakingEnabled']))
 
+// Super app link out feature flag
+export const getIsSuperAppEnabled = (state: RootState) =>
+  getWebOptions(state).map(path(['featureFlags', 'isSuperAppEnabled']))
+
 // crates nabu user at login if credentials aren't in metadata
 export const createNabuUserAtLogin = (state: RootState) =>
   getWebOptions(state).map(path(['featureFlags', 'createNabuUserAtLogin']))