Hide input when no Safe is opened

safe-global · Oct 23, 2023 · 631a428 · 631a428
1 parent 2028dff
commit 631a428
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/components/walletconnect/WcConnectionForm/index.tsx b/src/components/walletconnect/WcConnectionForm/index.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react'
-import { Grid, Typography, Divider, SvgIcon, IconButton, Tooltip } from '@mui/material'
+import { Grid, Typography, Divider, SvgIcon, IconButton, Tooltip, Box } from '@mui/material'
 import type { ReactElement } from 'react'
 import type { SessionTypes } from '@walletconnect/types'
 import useLocalStorage from '@/services/local-storage/useLocalStorage'
@@ -51,11 +51,17 @@ export const WcConnectionForm = ({
 
         <WcLogoHeader />
 
-        <Typography variant="body2" color="text.secondary" mb={3}>
-          Paste the pairing code below to connect to your {`Safe{Wallet}`} via WalletConnect
+        <Typography variant="body2" color="text.secondary">
+          {safeAddress
+            ? `Paste the pairing code below to connect to your Safe{Wallet} via WalletConnect`
+            : `Please open one of your Safe Accounts to connect to via WalletConnect`}
         </Typography>
 
-        <WcInput uri={uri} disabled={!safeAddress} />
+        {safeAddress ? (
+          <Box mt={3}>
+            <WcInput uri={uri} />
+          </Box>
+        ) : null}
       </Grid>
 
       <Divider flexItem className={css.divider} />

diff --git a/src/components/walletconnect/WcInput/index.tsx b/src/components/walletconnect/WcInput/index.tsx
@@ -5,7 +5,7 @@ import { asError } from '@/services/exceptions/utils'
 import { getClipboard, isClipboardSupported } from '@/utils/clipboard'
 import { isPairingUri } from '@/services/walletconnect/utils'
 
-const WcInput = ({ uri, disabled }: { uri: string; disabled: boolean }) => {
+const WcInput = ({ uri }: { uri: string }) => {
   const { walletConnect } = useContext(WalletConnectContext)
   const [value, setValue] = useState('')
   const [error, setError] = useState<Error>()
@@ -53,14 +53,14 @@ const WcInput = ({ uri, disabled }: { uri: string; disabled: boolean }) => {
       onChange={(e) => onInput(e.target.value)}
       fullWidth
       autoComplete="off"
-      disabled={connecting || disabled}
+      disabled={connecting}
       error={!!error}
       label={error ? error.message : 'Pairing code'}
       placeholder="wc:"
       InputProps={{
         endAdornment: isClipboardSupported() ? undefined : (
           <InputAdornment position="end">
-            <Button variant="contained" onClick={onPaste} sx={{ py: 0.8 }} disabled={connecting || disabled}>
+            <Button variant="contained" onClick={onPaste} sx={{ py: 0.8 }} disabled={connecting}>
               Paste
             </Button>
           </InputAdornment>