Feat: new connect button + deprecate mobile pairing (#2544)

* Feat: new connect button + deprecate mobile pairing

* 15 November

* Text edits

src/components/common/ConnectWallet/ConnectWalletButton.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@mui/material'
+import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
+
+const ConnectWalletButton = ({ onConnect }: { onConnect?: () => void }): React.ReactElement => {
+  const connectWallet = useConnectWallet()
+
+  const handleConnect = () => {
+    onConnect?.()
+    connectWallet()
+  }
+
+  return (
+    <Button
+      onClick={handleConnect}
+      variant="contained"
+      size="small"
+      disableElevation
+      fullWidth
+      sx={{ fontSize: ['12px', '13px'] }}
+    >
+      Connect
+    </Button>
+  )
+}
+
+export default ConnectWalletButton

src/components/common/ConnectWallet/index.tsx

@@ -1,12 +1,12 @@
 import type { ReactElement } from 'react'
 import useWallet from '@/hooks/wallets/useWallet'
 import AccountCenter from '@/components/common/ConnectWallet/AccountCenter'
-import ConnectionCenter from '@/components/common/ConnectWallet/ConnectionCenter'
+import ConnectWalletButton from './ConnectWalletButton'
 
 const ConnectWallet = (): ReactElement => {
   const wallet = useWallet()
 
-  return wallet ? <AccountCenter wallet={wallet} /> : <ConnectionCenter />
+  return wallet ? <AccountCenter wallet={wallet} /> : <ConnectWalletButton />
 }
 
 export default ConnectWallet

src/components/common/ConnectWallet/styles.module.css

@@ -1,8 +1,3 @@
-.connectedContainer {
-  display: flex;
-  align-items: center;
-}
-
 .buttonContainer {
   display: flex;
   align-items: center;
@@ -46,21 +41,3 @@
 .row:last-of-type {
   border-bottom: 1px solid var(--color-border-light);
 }
-
-.pairingDetails {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-@media (max-width: 599.95px) {
-  .buttonContainer {
-    transform: scale(0.8);
-  }
-
-  .notConnected,
-  .pairingDetails {
-    display: none;
-  }
-}

src/components/common/PairingDetails/PairingDeprecationWarning.tsx

@@ -0,0 +1,12 @@
+import { Alert } from '@mui/material'
+
+const PairingDeprecationWarning = (): React.ReactElement => {
+  return (
+    <Alert severity="warning" sx={{ mb: 4 }}>
+      The {'Safe{Wallet}'} web-mobile pairing feature will be discontinued from 15th November 2023. Please migrate to a
+      different signer wallet before this date.
+    </Alert>
+  )
+}
+
+export default PairingDeprecationWarning

src/components/new-safe/create/steps/ConnectWalletStep/index.tsx

@@ -1,24 +1,18 @@
 import { useEffect, useState } from 'react'
-import { Box, Button, Grid, Typography } from '@mui/material'
+import { Box, Button } from '@mui/material'
 import useWallet from '@/hooks/wallets/useWallet'
-import { useCurrentChain } from '@/hooks/useChains'
-import { isPairingSupported } from '@/services/pairing/utils'
 
 import type { NewSafeFormData } from '@/components/new-safe/create'
 import type { StepRenderProps } from '@/components/new-safe/CardStepper/useCardStepper'
 import useSyncSafeCreationStep from '@/components/new-safe/create/useSyncSafeCreationStep'
 import layoutCss from '@/components/new-safe/create/styles.module.css'
 import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
 import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
-import PairingDescription from '@/components/common/PairingDetails/PairingDescription'
-import PairingQRCode from '@/components/common/PairingDetails/PairingQRCode'
 import { usePendingSafe } from '../StatusStep/usePendingSafe'
 
 const ConnectWalletStep = ({ onSubmit, setStep }: StepRenderProps<NewSafeFormData>) => {
   const [pendingSafe] = usePendingSafe()
   const wallet = useWallet()
-  const chain = useCurrentChain()
-  const isSupported = isPairingSupported(chain?.disabledWallets)
   const handleConnect = useConnectWallet()
   const [, setSubmitted] = useState(false)
   useSyncSafeCreationStep(setStep)
@@ -34,31 +28,12 @@ const ConnectWalletStep = ({ onSubmit, setStep }: StepRenderProps<NewSafeFormDat
   }, [onSubmit, wallet, pendingSafe])
 
   return (
-    <>
-      <Box className={layoutCss.row}>
-        <Grid container spacing={3}>
-          <Grid item xs={12} md={6} display="flex" flexDirection="column" alignItems="center" gap={2}>
-            <Box width={100} height={100} display="flex" alignItems="center" justifyContent="center">
-              <KeyholeIcon />
-            </Box>
-
-            <Button onClick={handleConnect} variant="contained" size="stretched" disableElevation>
-              Connect
-            </Button>
-          </Grid>
-
-          {isSupported && (
-            <Grid item xs={12} md={6} display="flex" flexDirection="column" alignItems="center" gap={2}>
-              <PairingQRCode />
-              <Typography variant="h6" fontWeight="700">
-                Connect to {'Safe{Wallet}'} mobile
-              </Typography>
-              <PairingDescription />
-            </Grid>
-          )}
-        </Grid>
-      </Box>
-    </>
+    <Box className={layoutCss.row} display="flex" alignItems="center" gap={3}>
+      <KeyholeIcon />
+      <Button onClick={handleConnect} variant="contained" size="stretched" disableElevation>
+        Connect wallet
+      </Button>
+    </Box>
   )
 }
 

src/services/pairing/QRModal.tsx

@@ -8,6 +8,7 @@ import { StoreHydrator } from '@/store'
 import { AppProviders } from '@/pages/_app'
 import { PAIRING_MODULE_LABEL } from '@/services/pairing/module'
 import css from './styles.module.css'
+import PairingDeprecationWarning from '@/components/common/PairingDetails/PairingDeprecationWarning'
 
 const WRAPPER_ID = 'safe-mobile-qr-modal'
 const QR_CODE_SIZE = 200
@@ -75,6 +76,7 @@ const Modal = ({ uri, cb }: { uri: string; cb: () => void }) => {
             </IconButton>
           </DialogTitle>
           <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
+            <PairingDeprecationWarning />
             <PairingQRCode size={QR_CODE_SIZE} />
             <br />
             <PairingDescription />