chore(rerender): fix sofi banner, header nav (#6253)

packages/blockchain-wallet-v4-frontend/src/components/Banner/SofiBanner/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { useSelector } from 'react-redux'
+import { shallowEqual, useSelector } from 'react-redux'
 
 import { Image, Link, Text } from 'blockchain-info-components'
 import { selectors } from 'data'
@@ -9,7 +9,7 @@ import { getData } from '../selectors'
 import { SofiRow } from './styles'
 
 export const SofiBanner = ({ userLoggedOut = false }: { userLoggedOut?: boolean }) => {
-  const { country, ipCountry, signupCountry } = useSelector(getData)
+  const { country, ipCountry, signupCountry } = useSelector(getData, shallowEqual)
   const sofiUserStatus = useSelector(selectors.modules.profile.getSofiUserMigrationStatus)
   const userCountry = country !== undefined ? country : ipCountry
   const hideBanner = userCountry !== 'US' && signupCountry !== 'US'

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Header.tsx

@@ -1,11 +1,9 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { Navbar } from 'components/Navbar'
 import { PrimaryNavItem } from 'components/Navbar/Navbar'
-import { selectors } from 'data'
 import { Analytics, ModalName } from 'data/types'
-import { useRemote } from 'hooks'
 
 import { Props } from '.'
 
@@ -14,10 +12,9 @@ type OwnProps = Props & {
 }
 
 const Header = (props: OwnProps) => {
-  const { data } = useRemote(selectors.modules.profile.getCurrentTier)
-  const isGoldVerified = useMemo(() => data === 2, [data])
   const {
     analyticsActions,
+    currentTier,
     featureFlags,
     history,
     invitations,
@@ -31,6 +28,9 @@ const Header = (props: OwnProps) => {
     settingsActions,
     walletDebitCardEnabled
   } = props
+
+  const isGoldVerified = currentTier === 2
+
   const refreshCallback = useCallback(() => {
     refreshActions.refreshClicked()
   }, [refreshActions])

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

@@ -13,10 +13,7 @@ import Header from './Header'
 const HeaderContainer = (props: Props) => <Header {...props} />
 
 const mapStateToProps = (state: RootState) => ({
-  currenTier: lift(
-    (currentTier: ExtractSuccess<ReturnType<typeof selectors.modules.profile.getCurrentTier>>) =>
-      currentTier
-  )(selectors.modules.profile.getCurrentTier(state)),
+  currentTier: selectors.modules.profile.getCurrentTier(state).getOrElse(0),
   featureFlags: selectors.core.walletOptions
     .getFeatureFlags(state)
     .getOrElse({} as { [key in string]: boolean }),