chore(fix): reduce login footer rerenders (#6251)

packages/blockchain-wallet-v4-frontend/src/layouts/Auth/components/Footer/DropdownLanguage/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import Cookies from 'universal-cookie'
+
+import { SimpleDropdown } from 'blockchain-info-components/src/Dropdowns'
+import { setLanguage } from 'data/preferences/actions'
+import { getLanguage } from 'data/preferences/selectors'
+import { languagesSortedByName as languages } from 'services/locales'
+
+const DropdownLanguage = ({ color, size }: { color: string; size: string }) => {
+  const dispatch = useDispatch()
+  const currentLanguage = useSelector(getLanguage)
+
+  const handleClick = (selectedLanguage) => {
+    const cookies = new Cookies()
+    dispatch(setLanguage(selectedLanguage.language, true))
+    cookies.set('clang', selectedLanguage.language, {
+      domain: '.blockchain.com',
+      path: '/'
+    })
+  }
+
+  const languageList = languages.map((lang) => {
+    return {
+      language: lang.language,
+      text: lang.name,
+      value: lang.language
+    }
+  })
+
+  return (
+    <SimpleDropdown
+      color={color || 'whiteFade900'}
+      uppercase={false}
+      items={languageList}
+      selectedValue={currentLanguage}
+      size={size}
+      callback={(selectedLanguage) => handleClick(selectedLanguage)}
+    />
+  )
+}
+
+export default DropdownLanguage

packages/blockchain-wallet-v4-frontend/src/layouts/Auth/components/Footer/Help/index.tsx

@@ -1,28 +1,18 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import styled from 'styled-components'
 
-import { Link, Text } from 'blockchain-info-components'
-
-const HelpContainer = styled.div`
-  display: inline-flex;
-  cursor: pointer;
-`
+import { Link } from 'blockchain-info-components'
 
 const Help = () => (
-  <HelpContainer>
-    <Link
-      color='grey400'
-      href='https://support.blockchain.com'
-      size='14px'
-      target='_blank'
-      weight={500}
-    >
-      <Text color='grey400' size='16px' weight={500}>
-        <FormattedMessage id='scenes.login.need.help' defaultMessage='Need Help?' />
-      </Text>
-    </Link>
-  </HelpContainer>
+  <Link
+    color='grey400'
+    href='https://support.blockchain.com'
+    size='16px'
+    target='_blank'
+    weight={500}
+  >
+    <FormattedMessage id='scenes.login.need.help' defaultMessage='Need Help?' />
+  </Link>
 )
 
 export default Help

packages/blockchain-wallet-v4-frontend/src/layouts/Auth/components/Footer/InstitutionalPortal/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { connect } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { LinkContainer } from 'react-router-bootstrap'
-import { bindActionCreators } from 'redux'
+import { change } from 'redux-form'
 import styled from 'styled-components'
 
 import { Text } from 'blockchain-info-components'
-import { actions } from 'data'
+import { auth } from 'data/actions'
 import { LOGIN_FORM } from 'data/auth/model'
 import { AuthUserType, LoginSteps } from 'data/types'
 
@@ -23,10 +23,11 @@ const SignUpText = styled(Text)`
   }
 `
 
-const InstitutionalPortal = (props) => {
+const InstitutionalPortal = () => {
+  const dispatch = useDispatch()
   const institutionalPortalFooterClick = () => {
-    props.authActions.setProductAuthMetadata({ userType: AuthUserType.INSTITUTIONAL })
-    props.formActions.change(LOGIN_FORM, 'step', LoginSteps.INSTITUTIONAL_PORTAL)
+    dispatch(auth.setProductAuthMetadata({ userType: AuthUserType.INSTITUTIONAL }))
+    dispatch(change(LOGIN_FORM, 'step', LoginSteps.INSTITUTIONAL_PORTAL))
   }
   return (
     <LinkContainer to='/login?product=exchange&userType=institutional'>
@@ -45,9 +46,5 @@ const InstitutionalPortal = (props) => {
     </LinkContainer>
   )
 }
-const mapDispatchToProps = (dispatch) => ({
-  authActions: bindActionCreators(actions.auth, dispatch),
-  formActions: bindActionCreators(actions.form, dispatch)
-})
 
-export default connect(null, mapDispatchToProps)(InstitutionalPortal)
+export default InstitutionalPortal

packages/blockchain-wallet-v4-frontend/src/layouts/Auth/components/Footer/Version/index.tsx

@@ -4,32 +4,20 @@ import styled from 'styled-components'
 
 import { Link } from 'blockchain-info-components'
 
-const VersionWrapper = styled.span`
-  margin-top: 4px;
-  margin-left: 16px;
-  margin-right: 16px;
-`
-
 const Version = () => (
-  <>
-    <VersionWrapper>
-      <Link
-        color='grey400'
-        href='https://github.com/blockchain/blockchain-wallet-v4-frontend/releases'
-        size='14px'
-        target='_blank'
-        weight={500}
-      >
-        <FormattedMessage
-          id='scenes.login.version'
-          defaultMessage='Version {version}'
-          values={{
-            version: window.APP_VERSION
-          }}
-        />
-      </Link>
-    </VersionWrapper>
-  </>
+  <Link
+    color='grey400'
+    href='https://github.com/blockchain/blockchain-wallet-v4-frontend/releases'
+    size='16px'
+    target='_blank'
+    weight={500}
+  >
+    <FormattedMessage
+      id='scenes.login.version'
+      defaultMessage='Version {version}'
+      values={{ version: window.APP_VERSION }}
+    />
+  </Link>
 )
 
 export default Version

packages/blockchain-wallet-v4-frontend/src/layouts/Auth/components/Footer/index.tsx

@@ -1,35 +1,65 @@
 import React from 'react'
+import { useSelector } from 'react-redux'
+import { formValueSelector } from 'redux-form'
 import styled from 'styled-components'
 
+import { LOGIN_FORM } from 'data/auth/model'
+import { getMagicLinkData, getProduct } from 'data/auth/selectors'
 import { LoginSteps, PlatformTypes, ProductAuthOptions } from 'data/types'
+import { media } from 'services/styles'
 
 import DropdownLanguage from './DropdownLanguage'
 import Help from './Help'
 import InstitutionalPortal from './InstitutionalPortal'
 import Version from './Version'
 
+const FooterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  margin: 6rem 0 2rem;
+
+  ${media.mobile`
+    flex-direction: column;
+    margin-top: 0.5rem;
+  `}
+`
+
 const FooterInner = styled.div`
   padding: 2rem 2rem 0;
+
+  > * {
+    margin: 0 0.5rem;
+  }
 `
 
-const Footer = (props) => {
+const Footer = ({ path }) => {
+  const authProduct = useSelector(getProduct)
+  const step = useSelector((state) => formValueSelector(LOGIN_FORM)(state, 'step')) as LoginSteps
+  const platform = useSelector(getMagicLinkData)?.platform_type
+
+  const isMobile = platform !== PlatformTypes.IOS && platform !== PlatformTypes.ANDROID
+  const showInstitutionalPortal =
+    authProduct === ProductAuthOptions.EXCHANGE &&
+    step !== LoginSteps.INSTITUTIONAL_PORTAL &&
+    !isMobile &&
+    path !== '/login'
+
   return (
-    <>
-      {props.authProduct === ProductAuthOptions.EXCHANGE &&
-        props.formValues?.step !== LoginSteps.INSTITUTIONAL_PORTAL &&
-        props.platform !== PlatformTypes.IOS &&
-        props.platform !== PlatformTypes.ANDROID &&
-        props.path === '/login' && (
-          <FooterInner>
-            <InstitutionalPortal />
-          </FooterInner>
-        )}
+    <FooterContainer>
+      {showInstitutionalPortal && (
+        <FooterInner>
+          <InstitutionalPortal />
+        </FooterInner>
+      )}
       <FooterInner>
         <DropdownLanguage color='grey400' size='16px' />
         <Version />
         <Help />
       </FooterInner>
-    </>
+    </FooterContainer>
   )
 }
 

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

@@ -1,11 +1,10 @@
 import React, { ComponentType } from 'react'
-import { connect, ConnectedProps } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { Route } from 'react-router-dom'
 import styled from 'styled-components'
 
 import Alerts from 'components/Alerts'
-import { selectors } from 'data'
-import { LOGIN_FORM } from 'data/auth/model'
+import { getProduct } from 'data/auth/selectors'
 import { useDefer3rdPartyScript } from 'hooks'
 import ErrorBoundary from 'providers/ErrorBoundaryProvider'
 import { isMobile, media } from 'services/styles'
@@ -19,19 +18,6 @@ const isLatam = qsParams.has('latam')
 const isSofi = window.location.hash.includes('sofi')
 const isSofiOnMobile = isSofi && isMobile()
 
-const FooterContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  margin: 6rem 0 2rem;
-  ${media.mobile`
-    flex-direction: column;
-    margin-top: 8px;
-  `}
-`
-
 const Wrapper = styled.div<{ authProduct?: string }>`
   background-color: ${(props) =>
     props.authProduct === 'EXCHANGE'
@@ -75,16 +61,8 @@ const ContentContainer = styled.div`
 `}
 `
 
-const AuthLayoutContainer = ({
-  authProduct,
-  component: Component,
-  exact = false,
-  formValues,
-  pageTitle,
-  path,
-  platform,
-  unified
-}: Props) => {
+const AuthLayoutContainer = ({ component: Component, exact = false, pageTitle, path }: Props) => {
+  const authProduct = useSelector(getProduct)
   // lazy load google captcha
   useDefer3rdPartyScript(
     `https://www.google.com/recaptcha/enterprise.js?render=${window.CAPTCHA_KEY}`,
@@ -112,38 +90,19 @@ const AuthLayoutContainer = ({
             <ContentContainer>
               <Component {...matchProps} />
             </ContentContainer>
-            {!isSofiOnMobile && (
-              <FooterContainer>
-                <Footer
-                  authProduct={authProduct}
-                  formValues={formValues}
-                  platform={platform}
-                  path={path}
-                  unified={unified}
-                />
-              </FooterContainer>
-            )}
+            {!isSofiOnMobile && <Footer path={path} />}
           </Wrapper>
         </ErrorBoundary>
       )}
     />
   )
 }
 
-const mapStateToProps = (state) => ({
-  authProduct: selectors.auth.getProduct(state),
-  formValues: selectors.form.getFormValues(LOGIN_FORM)(state),
-  platform: selectors.auth.getMagicLinkData(state)?.platform_type,
-  unified: selectors.cache.getUnifiedAccountStatus(state)
-})
-
-const connector = connect(mapStateToProps)
-
-type Props = ConnectedProps<typeof connector> & {
+type Props = {
   component: ComponentType<any>
   exact?: boolean
   pageTitle?: string
   path: string
 }
 
-export default connector(AuthLayoutContainer)
+export default AuthLayoutContainer