From 4faa770778dd4a6cc86467949b770f8e52ca3c3a Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Wed, 9 Mar 2022 16:30:38 +0100
Subject: [PATCH] chore: Always hide first wallet if mobile pairing is enabled
 (#3646)

---
 .../ProviderDetails/PairingDetails.tsx         | 18 ++++--------------
 .../ProviderDetails/hidePairingModule.css      |  3 +++
 2 files changed, 7 insertions(+), 14 deletions(-)
 create mode 100644 src/components/AppLayout/Header/components/ProviderDetails/hidePairingModule.css

diff --git a/src/components/AppLayout/Header/components/ProviderDetails/PairingDetails.tsx b/src/components/AppLayout/Header/components/ProviderDetails/PairingDetails.tsx
index 6d05c306b7..2964c4e172 100644
--- a/src/components/AppLayout/Header/components/ProviderDetails/PairingDetails.tsx
+++ b/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'
@@ -10,9 +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'
-import { useGetPairingUri } from 'src/logic/wallets/pairing/hooks/useGetPairingUri'
 
-const HIDE_PAIRING_STYLE = '.bn-onboard-modal-select-wallets li:first-of-type {display: none;}'
+// 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 StyledDivider = styled(Divider)`
   width: calc(100% + 40px);
@@ -31,17 +32,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 />
diff --git a/src/components/AppLayout/Header/components/ProviderDetails/hidePairingModule.css b/src/components/AppLayout/Header/components/ProviderDetails/hidePairingModule.css
new file mode 100644
index 0000000000..27c97f5cc0
--- /dev/null
+++ b/src/components/AppLayout/Header/components/ProviderDetails/hidePairingModule.css
@@ -0,0 +1,3 @@
+.bn-onboard-modal-select-wallets li:first-of-type {
+    display: none;
+}
\ No newline at end of file