Refactor: rename and rearrange components (#2676)

* Refactor: rename and rearrange components

* Move useWcUri

* Show/hide popup on session change

* Remove auto-pasting

src/components/common/Header/index.tsx

@@ -15,7 +15,7 @@ import SafeLogo from '@/public/images/logo.svg'
 import Link from 'next/link'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import BatchIndicator from '@/components/batch/BatchIndicator'
-import WalletConnectHeaderWidget from '@/components/walletconnect/HeaderWidget'
+import WalletConnectUi from '@/components/walletconnect'
 import { PushNotificationsBanner } from '@/components/settings/PushNotifications/PushNotificationsBanner'
 
 type HeaderProps = {
@@ -79,7 +79,7 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
       </div>
 
       <div className={classnames(css.element, css.hideMobile)}>
-        <WalletConnectHeaderWidget />
+        <WalletConnectUi />
       </div>
 
       <div className={classnames(css.element, css.connectWallet)}>

src/components/walletconnect/ConnectionForm/index.tsx → src/components/walletconnect/WcConnectionForm/index.tsx

@@ -1,21 +1,19 @@
-import useLocalStorage from '@/services/local-storage/useLocalStorage'
+import { useCallback, useEffect } from 'react'
 import { Grid, Typography, Divider, SvgIcon, IconButton, Tooltip } from '@mui/material'
-import { useCallback, useContext, useEffect } from 'react'
 import type { ReactElement } from 'react'
 import type { SessionTypes } from '@walletconnect/types'
-
-import { Hints } from '../Hints'
-import SessionList from '../SessionList'
-import WcInput from '../WcInput'
+import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import InfoIcon from '@/public/images/notifications/info.svg'
-import { WalletConnectHeader } from '../SessionManager/Header'
-import { WalletConnectContext } from '@/services/walletconnect/WalletConnectContext'
-
+import WcHints from '../WcHints'
+import WcSessionList from '../WcSessionList'
+import WcInput from '../WcInput'
+import WcLogoHeader from '../WcLogoHeader'
 import css from './styles.module.css'
+import useSafeAddress from '@/hooks/useSafeAddress'
 
 const WC_HINTS_KEY = 'wcHints'
 
-export const ConnectionForm = ({
+export const WcConnectionForm = ({
   sessions,
   onDisconnect,
   uri,
@@ -24,24 +22,16 @@ export const ConnectionForm = ({
   onDisconnect: (session: SessionTypes.Struct) => Promise<void>
   uri: string
 }): ReactElement => {
-  const { walletConnect } = useContext(WalletConnectContext)
-  const [showHints = false, setShowHints] = useLocalStorage<boolean>(WC_HINTS_KEY)
+  const [showHints = true, setShowHints] = useLocalStorage<boolean>(WC_HINTS_KEY)
+  const safeAddress = useSafeAddress()
 
-  const onToggle = () => {
+  const onToggle = useCallback(() => {
     setShowHints((prev) => !prev)
-  }
-
-  const onHide = useCallback(() => {
-    setShowHints(false)
   }, [setShowHints])
 
   useEffect(() => {
-    if (!walletConnect) {
-      return
-    }
-
-    return walletConnect.onSessionPropose(onHide)
-  }, [onHide, walletConnect])
+    return () => setShowHints(false)
+  }, [setShowHints])
 
   return (
     <Grid className={css.container}>
@@ -59,30 +49,32 @@ export const ConnectionForm = ({
           </span>
         </Tooltip>
 
-        <WalletConnectHeader />
+        <WcLogoHeader />
 
         <Typography variant="body2" color="text.secondary" mb={3}>
           Paste the pairing code below to connect to your {`Safe{Wallet}`} via WalletConnect
         </Typography>
 
-        <WcInput uri={uri} />
+        <WcInput uri={uri} disabled={!safeAddress} />
       </Grid>
 
       <Divider flexItem className={css.divider} />
 
       <Grid item>
-        <SessionList sessions={sessions} onDisconnect={onDisconnect} />
+        <WcSessionList sessions={sessions} onDisconnect={onDisconnect} />
       </Grid>
 
       {showHints && (
         <>
           <Divider flexItem className={css.divider} />
 
           <Grid item mt={1}>
-            <Hints />
+            <WcHints />
           </Grid>
         </>
       )}
     </Grid>
   )
 }
+
+export default WcConnectionForm

src/components/walletconnect/ConnectionBanner/index.tsx → src/components/walletconnect/WcConnectionState/index.tsx

@@ -10,12 +10,12 @@ import { useCurrentChain } from '@/hooks/useChains'
 
 import css from './styles.module.css'
 
-export const ConnectionBanner = ({
+const WcConnectionState = ({
   metadata,
-  isDelete = false,
+  isDelete,
 }: {
-  metadata?: CoreTypes.Metadata
-  isDelete?: boolean
+  metadata: CoreTypes.Metadata
+  isDelete: boolean
 }): ReactElement | null => {
   const chain = useCurrentChain()
 
@@ -46,3 +46,5 @@ export const ConnectionBanner = ({
     </div>
   )
 }
+
+export default WcConnectionState

src/components/walletconnect/SessionManager/ErrorMessage.tsx → src/components/walletconnect/WcErrorMessage/index.tsx

@@ -1,17 +1,17 @@
 import { Typography } from '@mui/material'
-import type { ReactElement } from 'react'
-
-import { WalletConnectHeader } from './Header'
-
+import WcLogoHeader from '../WcLogoHeader'
 import css from './styles.module.css'
 
-export const WalletConnectErrorMessage = ({ error }: { error: Error }): ReactElement => {
+const WcErrorMessage = ({ error }: { error: Error }) => {
   return (
     <div className={css.errorContainer}>
-      <WalletConnectHeader error />
+      <WcLogoHeader error />
+
       <Typography title={error.message} className={css.errorMessage}>
         {error.message}
       </Typography>
     </div>
   )
 }
+
+export default WcErrorMessage