fix: Only hide first wallet if mobile pairing is enabled

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

@@ -9,6 +9,7 @@ import Paragraph from 'src/components/layout/Paragraph'
 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'))
 
@@ -52,7 +53,7 @@ const ConnectDetails = ({ classes }): ReactElement => (
       <ConnectButton data-testid="heading-connect-btn" />
     </Block>
 
-    {isPairingSupported() && <PairingDetails classes={classes} />}
+    {isPairingSupported() && wrapInSuspense(<PairingDetails classes={classes} />)}
   </StyledCard>
 )
 

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

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactElement } from 'react'
+import { CSSProperties, ReactElement, useEffect } from 'react'
 import Skeleton from '@material-ui/lab/Skeleton'
 import RefreshIcon from '@material-ui/icons/Refresh'
 import IconButton from '@material-ui/core/IconButton'
@@ -10,11 +10,10 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import usePairing from 'src/logic/wallets/pairing/hooks/usePairing'
 import { initPairing, isPairingModule } from 'src/logic/wallets/pairing/utils'
-
-// Hides first wallet in Onboard modal (pairing module)
-import 'src/components/AppLayout/Header/components/ProviderDetails/hidePairingModule.css'
 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;
@@ -32,6 +31,17 @@ 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

@@ -16,7 +16,6 @@ import {
 } from 'src/logic/wallets/store/selectors'
 import onboard, { loadLastUsedProvider } from 'src/logic/wallets/onboard'
 import { isSupportedWallet } from 'src/logic/wallets/utils/walletList'
-import { wrapInSuspense } from 'src/utils/wrapInSuspense'
 
 const HeaderComponent = (): React.ReactElement => {
   const provider = useSelector(providerNameSelector)
@@ -57,7 +56,7 @@ const HeaderComponent = (): React.ReactElement => {
 
   const getProviderDetailsBased = () => {
     if (!loaded) {
-      return wrapInSuspense(<ConnectDetails />)
+      return <ConnectDetails />
     }
 
     return (