fix: Enable Add proposer button for owners only (#4744)

* fix: Enable Add proposer button for owners only

* fix: Add wallet connected status check to OnlyOwner

apps/web/src/components/common/OnlyOwner/index.tsx

@@ -0,0 +1,40 @@
+import { useMemo, type ReactElement } from 'react'
+import useIsSafeOwner from '@/hooks/useIsSafeOwner'
+import useWallet from '@/hooks/wallets/useWallet'
+import useConnectWallet from '../ConnectWallet/useConnectWallet'
+import { Tooltip } from '@mui/material'
+
+type CheckWalletProps = {
+  children: (ok: boolean) => ReactElement
+}
+
+enum Message {
+  WalletNotConnected = 'Please connect your wallet',
+  NotSafeOwner = 'Your connected wallet is not a signer of this Safe Account',
+}
+
+const OnlyOwner = ({ children }: CheckWalletProps): ReactElement => {
+  const wallet = useWallet()
+  const isSafeOwner = useIsSafeOwner()
+  const connectWallet = useConnectWallet()
+
+  const message = useMemo(() => {
+    if (!wallet) {
+      return Message.WalletNotConnected
+    }
+
+    if (!isSafeOwner) {
+      return Message.NotSafeOwner
+    }
+  }, [isSafeOwner, wallet])
+
+  if (!message) return children(true)
+
+  return (
+    <Tooltip title={message}>
+      <span onClick={wallet ? undefined : connectWallet}>{children(false)}</span>
+    </Tooltip>
+  )
+}
+
+export default OnlyOwner

apps/web/src/components/settings/ProposersList/index.tsx

@@ -1,7 +1,7 @@
-import CheckWallet from '@/components/common/CheckWallet'
 import { Chip } from '@/components/common/Chip'
 import EnhancedTable from '@/components/common/EnhancedTable'
 import tableCss from '@/components/common/EnhancedTable/styles.module.css'
+import OnlyOwner from '@/components/common/OnlyOwner'
 import Track from '@/components/common/Track'
 import UpsertProposer from '@/features/proposers/components/UpsertProposer'
 import DeleteProposerDialog from '@/features/proposers/components/DeleteProposerDialog'
@@ -100,7 +100,7 @@ const ProposersList = () => {
 
             {isEnabled && (
               <Box mb={2}>
-                <CheckWallet allowProposer={false}>
+                <OnlyOwner>
                   {(isOk) => (
                     <Track {...SETTINGS_EVENTS.PROPOSERS.ADD_PROPOSER}>
                       <Button
@@ -115,7 +115,7 @@ const ProposersList = () => {
                       </Button>
                     </Track>
                   )}
-                </CheckWallet>
+                </OnlyOwner>
               </Box>
             )}