chore(refactor): header layout & items refactor

config/mocks/wallet-options-v4.json

@@ -40,36 +40,40 @@
         "addCheckoutPaymentProvider": true,
         "addPlaidPaymentProvider": true,
         "addStripePaymentProvider": false,
-        "applePayPaymentMethod": true,
         "appleAndGooglePayPromoBanner": true,
+        "applePayPaymentMethod": true,
         "availableToTradeWithdraw": true,
-        "createNabuUserAtLogin": false,
         "coinViewV2": false,
         "completeYourProfile": true,
         "createExchangeUserOnSignupOrLogin": true,
+        "createNabuUserAtLogin": false,
         "developerMobilePairing": true,
         "dex": true,
         "eddInterestFileUpload": true,
         "exchangeMobileDuplicateAccountRedirect": true,
         "exchangePromo": true,
         "flexiblePricingModel": true,
+        "getDexProductEnabled": true,
+        "getReferralEnabled": true,
         "googlePayPaymentMethod": true,
         "institutionalPortal": true,
         "isActiveRewardsEnabled": true,
         "isActiveRewardsWithdrawalEnabled": true,
+        "isMnemonicRecoveryEnabled": true,
         "isReferralEnabled": true,
         "isReferralRetrievalEnabled": true,
         "isStakingEnabled": true,
         "isStakingWithdrawalEnabled": true,
-        "isMnemonicRecoveryEnabled": true,
         "mergeAndUpgrade": false,
         "nftExplorer": true,
+        "proveEnabled": true,
         "recurringBuys": true,
         "rewardsFlowUnderSwapEnabled": true,
         "rewardsPromoBanner": true,
         "secureEmailSmsUpdate": false,
-        "showImportedAddressSweep": false,
         "showEarnAvailableAssetsCheckbox": true,
+        "showFiatEntityRemediationAlert": true,
+        "showImportedAddressSweep": false,
         "showProveFlow": true,
         "showSilverRevamp": true,
         "showTermsAndConditions": false,
@@ -85,9 +89,7 @@
         "useNewPaymentProviders": true,
         "useVgsProvider": true,
         "walletConnect": true,
-        "walletDebitCardEnabled": true,
-        "proveEnabled": true,
-        "showFiatEntityRemediationAlert": true
+        "walletDebitCardEnabled": true
       }
     }
   },

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

@@ -54,10 +54,8 @@ const PrimaryNavItems = [
 
 export const Default = Template.bind({})
 Default.args = {
-  fabClickHandler: () => {},
   limitsClickHandler: () => {},
   logoutClickHandler: () => {},
   primaryNavItems: PrimaryNavItems,
-  referAFriendHandler: () => {},
-  refreshClickHandler: () => {}
+  referAFriendHandler: () => {}
 }

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

@@ -1,24 +1,36 @@
 import React, { useCallback, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useDispatch, useSelector } from 'react-redux'
 import { NavLink } from 'react-router-dom'
 import {
   Flex,
   IconClose,
   IconMenu,
-  IconRefresh,
   Padding,
   PaletteColors,
   Text
 } from '@blockchain-com/constellation'
 import styled from 'styled-components'
 
-import { Button, Image } from 'blockchain-info-components'
+import {
+  getReferralEnabled,
+  getReferralRetrievalEnabled
+} from '@core/redux/walletOptions/selectors'
+import { Image } from 'blockchain-info-components'
 import { RoundedBadge } from 'components/Badge'
 import FabButton from 'components/FabButton'
+import { modals } from 'data/actions'
+import { trackEvent } from 'data/analytics/slice'
+import { getReferralInformation } from 'data/components/referral/selectors'
+import { isKycVerificationEnabled as getKyCVerificationEnabled } from 'data/custodial/selectors'
+import { ModalName } from 'data/modals/types'
+import { getCurrentTier } from 'data/modules/profile/selectors'
+import { Analytics } from 'data/types'
 import { media, useMedia } from 'services/styles'
 
 import MobileDropdown from './MobileDropdown'
 import MobileNav from './MobileNav'
+import { NavButton, ReceiveButton, RefreshButton, SendButton, StyledButton } from './NavbarButtons'
 import UserNavDropdown, { userNavItems } from './UserNavDropdown'
 
 export type PrimaryNavItem = {
@@ -65,11 +77,6 @@ export const NavRight = styled.div`
   align-items: center;
 `
 
-export const DropdownNavLink = styled(NavLink)`
-  padding: 0 !important;
-  text-decoration: none;
-`
-
 const ListStyles = styled.ul`
   list-style: none;
   display: flex;
@@ -131,12 +138,6 @@ const PrimaryNavItems = styled(ListStyles)`
   }
 `
 
-const StyledButton = styled(Button)`
-  padding: 0 12px;
-  min-width: 32px;
-  border-radius: 4px;
-`
-
 const SecondaryNavItems = styled(ListStyles)`
   cursor: pointer;
 
@@ -159,54 +160,50 @@ const SecondaryNavItems = styled(ListStyles)`
   }
 `
 
-export const NavButton = styled(Button)`
-  display: flex;
-  align-items: center;
-  position: relative;
-  transition: color 0.3s;
-  background: transparent;
-  min-width: auto;
-  width: auto;
-  padding: 0;
-  border: 0;
-
-  &:hover {
-    background-color: transparent;
-  }
-`
-
 const Navbar = ({
-  fabClickHandler,
-  isKycVerificationEnabled,
-  isReferralAvailable,
-  isReferralRetrievalEnabled,
   limitsClickHandler,
   logoutClickHandler,
   primaryNavItems,
-  receiveClickHandler,
   referAFriendHandler,
-  refreshClickHandler,
-  sendClickHandler,
   taxCenterClickHandler,
   trackEventCallback
 }: Props) => {
   const [isMobileNavOpen, setMobileNav] = useState(false)
   const isMobile = useMedia('mobile')
   const isTablet = useMedia('tablet')
+  const dispatch = useDispatch()
+
+  const isKycVerificationEnabled = useSelector(getKyCVerificationEnabled)
+  const isReferralRetrievalEnabled = useSelector(getReferralRetrievalEnabled).getOrElse(
+    false
+  ) as boolean
+  const hasReferralInformation = useSelector(getReferralInformation)
+  const isReferralEnabled = useSelector(getReferralEnabled).getOrElse(false) as boolean
+
+  const currentTier = useSelector(getCurrentTier).getOrElse(0)
+  const isGoldVerified = currentTier === 2
+
+  const isReferralAvailable = !!hasReferralInformation && isGoldVerified && isReferralEnabled
 
   const closeMobileNavOpenSendCallback = useCallback(() => {
     setMobileNav(false)
-    sendClickHandler()
+    dispatch(modals.showModal(ModalName.SEND_CRYPTO_MODAL, { origin: 'Header' }))
   }, [])
 
   const closeMobileNavOpenReceiveCallback = useCallback(() => {
     setMobileNav(false)
-    receiveClickHandler()
+    dispatch(modals.showModal(ModalName.REQUEST_CRYPTO_MODAL, { origin: 'FeaturesTopNav' }))
   }, [])
 
   const closeMobileNavOpenTradeCallback = useCallback(() => {
     setMobileNav(false)
-    fabClickHandler()
+    dispatch(
+      trackEvent({
+        key: Analytics.FAB_CLICKED,
+        properties: {}
+      })
+    )
+    dispatch(modals.showModal(ModalName.TRADE_MODAL, { origin: 'Header' }))
   }, [])
 
   const closeMobileNavCallback = useCallback(() => {
@@ -218,29 +215,11 @@ const Navbar = ({
 
   const secondaryNavItems = [
     {
-      component: () => (
-        <StyledButton
-          data-e2e='sendButton'
-          nature='empty-blue'
-          onClick={closeMobileNavOpenSendCallback}
-          small
-        >
-          <FormattedMessage id='buttons.send' defaultMessage='Send' />
-        </StyledButton>
-      ),
+      component: () => <SendButton onClick={closeMobileNavOpenSendCallback} />,
       name: 'Send'
     },
     {
-      component: () => (
-        <StyledButton
-          data-e2e='receiveButton'
-          nature='empty-blue'
-          onClick={closeMobileNavOpenReceiveCallback}
-          small
-        >
-          <FormattedMessage id='buttons.receive' defaultMessage='Receive' />
-        </StyledButton>
-      ),
+      component: () => <ReceiveButton onClick={closeMobileNavOpenReceiveCallback} />,
       name: 'Receive'
     },
     {
@@ -249,15 +228,11 @@ const Navbar = ({
       name: 'Trade'
     },
     {
-      component: () => <MobileDropdown />,
+      component: MobileDropdown,
       name: 'mobile-app'
     },
     {
-      component: () => (
-        <NavButton onClick={refreshClickHandler} data-e2e='refreshLink'>
-          <IconRefresh color={PaletteColors['grey-400']} size='small' />
-        </NavButton>
-      ),
+      component: RefreshButton,
       name: 'Refresh'
     },
     {
@@ -395,17 +370,10 @@ const Navbar = ({
 }
 
 type Props = {
-  fabClickHandler: () => void
-  isKycVerificationEnabled: boolean
-  isReferralAvailable: boolean
-  isReferralRetrievalEnabled: boolean
   limitsClickHandler: () => void
   logoutClickHandler: () => void
   primaryNavItems: Array<PrimaryNavItem>
-  receiveClickHandler: () => void
   referAFriendHandler: () => void
-  refreshClickHandler: () => void
-  sendClickHandler: () => void
   taxCenterClickHandler: () => void
   trackEventCallback: (eventName: string) => void
 }

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useDispatch } from 'react-redux'
+import { IconRefresh, PaletteColors } from '@blockchain-com/constellation'
+import styled from 'styled-components'
+
+import { Button } from 'blockchain-info-components'
+import { refreshClicked } from 'data/components/refresh/actions'
+
+export const StyledButton = styled(Button)`
+  padding: 0 12px;
+  min-width: 32px;
+  border-radius: 4px;
+`
+
+export const NavButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  position: relative;
+  transition: color 0.3s;
+  background: transparent;
+  min-width: auto;
+  width: auto;
+  padding: 0;
+  border: 0;
+
+  &:hover {
+    background-color: transparent;
+  }
+`
+export const SendButton = ({ onClick }) => (
+  <StyledButton data-e2e='sendButton' nature='empty-blue' onClick={onClick} small>
+    <FormattedMessage id='buttons.send' defaultMessage='Send' />
+  </StyledButton>
+)
+
+export const ReceiveButton = ({ onClick }) => (
+  <StyledButton data-e2e='receiveButton' nature='empty-blue' onClick={onClick} small>
+    <FormattedMessage id='buttons.receive' defaultMessage='Receive' />
+  </StyledButton>
+)
+
+export const RefreshButton = () => {
+  const dispatch = useDispatch()
+  const onClick = () => {
+    dispatch(refreshClicked())
+  }
+  return (
+    <NavButton onClick={onClick} data-e2e='refreshLink'>
+      <IconRefresh color={PaletteColors['grey-400']} size='small' />
+    </NavButton>
+  )
+}

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

@@ -1,12 +1,19 @@
 import React, { useRef, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
+import { NavLink } from 'react-router-dom'
 import { IconUser, PaletteColors } from '@blockchain-com/constellation'
+import styled from 'styled-components'
 
 import { Destination } from 'layouts/Wallet/components'
 import { useOnClickOutside } from 'services/misc'
 
 import { DropdownMenu, DropdownMenuArrow, DropdownMenuItem } from './Dropdown'
-import { DropdownNavLink, NavButton } from './Navbar'
+import { NavButton } from './NavbarButtons'
+
+const DropdownNavLink = styled(NavLink)`
+  padding: 0 !important;
+  text-decoration: none;
+`
 
 export const userNavItems = ({
   isKycVerificationEnabled,

packages/blockchain-wallet-v4-frontend/src/data/session/sagas.ts

@@ -1,7 +1,6 @@
 import { call, delay, put, select } from 'redux-saga/effects'
 
 import { actions, selectors } from 'data'
-import { Analytics } from 'data/types'
 import * as C from 'services/alerts'
 
 export default ({ api }) => {
@@ -15,15 +14,6 @@ export default ({ api }) => {
 
   const logout = function* () {
     try {
-      yield put(
-        actions.analytics.trackEvent({
-          key: Analytics.LOGIN_SIGNED_OUT,
-          properties: {
-            origin: 'SETTINGS',
-            site_redirect: 'WALLET'
-          }
-        })
-      )
       yield put(actions.modules.profile.clearSession())
       yield put(actions.middleware.webSocket.rates.stopSocket())
       yield put(actions.middleware.webSocket.coins.stopSocket())