fix: Hide first wallet in onboard modal if mobile pairing is enabled

src/components/AppLayout/Header/components/ProviderDetails/ConnectDetails.tsx

@@ -10,7 +10,6 @@ import Row from 'src/components/layout/Row'
 import { KeyRing } from 'src/components/AppLayout/Header/components/KeyRing'
 import { isPairingSupported } from 'src/logic/wallets/pairing/utils'
 import { wrapInSuspense } from 'src/utils/wrapInSuspense'
-// We need lazy import because the component imports static css that should only be applied if the component is rendered
 const PairingDetails = lazy(() => import('src/components/AppLayout/Header/components/ProviderDetails/PairingDetails'))
 
 const styles = () => ({

src/components/AppLayout/Header/components/ProviderDetails/HidePairingModule.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+
+const HIDE_PAIRING_STYLE = '.bn-onboard-modal-select-wallets li:first-of-type {display: none;}'
+
+const HidePairingModule = (): null => {
+  useEffect(() => {
+    const style = document.createElement('style')
+    style.innerHTML = HIDE_PAIRING_STYLE
+    document.head.appendChild(style)
+
+    return () => {
+      style.remove()
+    }
+  }, [])
+
+  return null
+}
+
+export default HidePairingModule

src/components/AppLayout/Header/components/ProviderDetails/PairingDetails.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactElement, useEffect } from 'react'
+import { CSSProperties, ReactElement } from 'react'
 import Skeleton from '@material-ui/lab/Skeleton'
 import RefreshIcon from '@material-ui/icons/Refresh'
 import IconButton from '@material-ui/core/IconButton'
@@ -12,8 +12,6 @@ import usePairing from 'src/logic/wallets/pairing/hooks/usePairing'
 import { initPairing, isPairingModule } from 'src/logic/wallets/pairing/utils'
 import { useGetPairingUri } from 'src/logic/wallets/pairing/hooks/useGetPairingUri'
 
-const HIDE_PAIRING_STYLE = '.bn-onboard-modal-select-wallets li:first-of-type {display: none;}'
-
 const StyledDivider = styled(Divider)`
   width: calc(100% + 40px);
   margin-left: -20px;
@@ -31,17 +29,6 @@ const PairingDetails = ({ classes }: { classes: Record<string, string> }): React
   const isPairingLoaded = isPairingModule()
   usePairing()
 
-  // Hides first wallet in Onboard modal (pairing module)
-  useEffect(() => {
-    const style = document.createElement('style')
-    style.innerHTML = HIDE_PAIRING_STYLE
-    document.head.appendChild(style)
-
-    return () => {
-      style.remove()
-    }
-  }, [])
-
   return (
     <>
       <StyledDivider />

src/components/AppLayout/Header/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { lazy, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 
 import Layout from './components/Layout'
@@ -16,6 +16,12 @@ import {
 } from 'src/logic/wallets/store/selectors'
 import onboard, { loadLastUsedProvider } from 'src/logic/wallets/onboard'
 import { isSupportedWallet } from 'src/logic/wallets/utils/walletList'
+import { isPairingSupported } from 'src/logic/wallets/pairing/utils'
+import { wrapInSuspense } from 'src/utils/wrapInSuspense'
+
+const HidePairingModule = lazy(
+  () => import('src/components/AppLayout/Header/components/ProviderDetails/HidePairingModule'),
+)
 
 const HeaderComponent = (): React.ReactElement => {
   const provider = useSelector(providerNameSelector)
@@ -74,7 +80,12 @@ const HeaderComponent = (): React.ReactElement => {
   const info = getProviderInfoBased()
   const details = getProviderDetailsBased()
 
-  return <Layout providerDetails={details} providerInfo={info} />
+  return (
+    <>
+      {isPairingSupported() && wrapInSuspense(<HidePairingModule />)}
+      <Layout providerDetails={details} providerInfo={info} />
+    </>
+  )
 }
 
 export default HeaderComponent