feat: roles and permissions setup [SW-601]

apps/web/src/components/common/CheckWalletWithPermission/index.test.tsx

@@ -0,0 +1,204 @@
+import { useSafeSDK } from '@/hooks/coreSDK/safeCoreSDK'
+import { render } from '@/tests/test-utils'
+import CheckWalletWithPermission from './index'
+import useIsWrongChain from '@/hooks/useIsWrongChain'
+import useWallet from '@/hooks/wallets/useWallet'
+import { chainBuilder } from '@/tests/builders/chains'
+import { faker } from '@faker-js/faker'
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import type Safe from '@safe-global/protocol-kit'
+import * as useHasPermission from '@/permissions/hooks/useHasPermission'
+import { Permission } from '@/permissions/types'
+
+const mockWalletAddress = faker.finance.ethereumAddress()
+// mock useWallet
+jest.mock('@/hooks/wallets/useWallet', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    address: mockWalletAddress,
+  })),
+}))
+
+// mock useCurrentChain
+jest.mock('@/hooks/useChains', () => ({
+  __esModule: true,
+  useCurrentChain: jest.fn(() => chainBuilder().build()),
+}))
+
+// mock useIsWrongChain
+jest.mock('@/hooks/useIsWrongChain', () => ({
+  __esModule: true,
+  default: jest.fn(() => false),
+}))
+
+jest.mock('@/hooks/useSafeInfo', () => ({
+  __esModule: true,
+  default: jest.fn(() => {
+    const safeAddress = faker.finance.ethereumAddress()
+    return {
+      safeAddress,
+      safe: extendedSafeInfoBuilder()
+        .with({ address: { value: safeAddress } })
+        .with({ deployed: true })
+        .build(),
+    }
+  }),
+}))
+
+jest.mock('@/hooks/coreSDK/safeCoreSDK')
+const mockUseSafeSdk = useSafeSDK as jest.MockedFunction<typeof useSafeSDK>
+
+const renderButton = () =>
+  render(
+    <CheckWalletWithPermission permission={Permission.SignTransaction} checkNetwork={false}>
+      {(isOk) => <button disabled={!isOk}>Continue</button>}
+    </CheckWalletWithPermission>,
+  )
+
+describe('CheckWalletWithPermission', () => {
+  const useHasPermissionSpy = jest.spyOn(useHasPermission, 'useHasPermission')
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseSafeSdk.mockReturnValue({} as unknown as Safe)
+    useHasPermissionSpy.mockReturnValue(true)
+  })
+
+  it('renders correctly when the wallet is connected to the right chain and is an owner', () => {
+    const { getByText } = renderButton()
+
+    // Check that the button is enabled
+    expect(getByText('Continue')).not.toBeDisabled()
+  })
+
+  it('should disable the button when the wallet is not connected', () => {
+    ;(useWallet as jest.MockedFunction<typeof useWallet>).mockReturnValueOnce(null)
+
+    const { getByText, getByLabelText } = renderButton()
+
+    // Check that the button is disabled
+    expect(getByText('Continue')).toBeDisabled()
+
+    // Check the tooltip text
+    expect(getByLabelText('Please connect your wallet')).toBeInTheDocument()
+  })
+
+  it('should disable the button when the current user does not have the specified permission', () => {
+    useHasPermissionSpy.mockReturnValue(false)
+
+    const { getByText, getByLabelText } = renderButton()
+
+    expect(getByText('Continue')).toBeDisabled()
+    expect(getByLabelText('Your connected wallet is not a signer of this Safe Account')).toBeInTheDocument()
+
+    expect(useHasPermissionSpy).toHaveBeenCalledTimes(1)
+    expect(useHasPermissionSpy).toHaveBeenCalledWith(Permission.SignTransaction)
+  })
+
+  it('should be disabled when connected to the wrong network', () => {
+    ;(useIsWrongChain as jest.MockedFunction<typeof useIsWrongChain>).mockReturnValue(true)
+
+    const renderButtonWithNetworkCheck = () =>
+      render(
+        <CheckWalletWithPermission permission={Permission.SignTransaction} checkNetwork={true}>
+          {(isOk) => <button disabled={!isOk}>Continue</button>}
+        </CheckWalletWithPermission>,
+      )
+
+    const { getByText } = renderButtonWithNetworkCheck()
+
+    expect(getByText('Continue')).toBeDisabled()
+  })
+
+  it('should disable the button for counterfactual Safes', () => {
+    const safeAddress = faker.finance.ethereumAddress()
+    const mockSafeInfo = {
+      safeAddress,
+      safe: extendedSafeInfoBuilder()
+        .with({ address: { value: safeAddress } })
+        .with({ deployed: false })
+        .build(),
+    }
+
+    ;(useSafeInfo as jest.MockedFunction<typeof useSafeInfo>).mockReturnValueOnce(
+      mockSafeInfo as unknown as ReturnType<typeof useSafeInfo>,
+    )
+
+    const { getByText, getByLabelText } = renderButton()
+
+    expect(getByText('Continue')).toBeDisabled()
+    expect(getByLabelText('You need to activate the Safe before transacting')).toBeInTheDocument()
+  })
+
+  it('should enable the button for counterfactual Safes if allowed', () => {
+    const safeAddress = faker.finance.ethereumAddress()
+    const mockSafeInfo = {
+      safeAddress,
+      safe: extendedSafeInfoBuilder()
+        .with({ address: { value: safeAddress } })
+        .with({ deployed: false })
+        .build(),
+    }
+
+    ;(useSafeInfo as jest.MockedFunction<typeof useSafeInfo>).mockReturnValueOnce(
+      mockSafeInfo as unknown as ReturnType<typeof useSafeInfo>,
+    )
+
+    const { getByText } = render(
+      <CheckWalletWithPermission permission={Permission.SignTransaction} allowUndeployedSafe>
+        {(isOk) => <button disabled={!isOk}>Continue</button>}
+      </CheckWalletWithPermission>,
+    )
+
+    expect(getByText('Continue')).toBeEnabled()
+  })
+
+  it('should disable the button if SDK is not initialized and safe is loaded', () => {
+    mockUseSafeSdk.mockReturnValue(undefined)
+
+    const mockSafeInfo = {
+      safeLoaded: true,
+      safe: extendedSafeInfoBuilder(),
+    }
+
+    ;(useSafeInfo as jest.MockedFunction<typeof useSafeInfo>).mockReturnValueOnce(
+      mockSafeInfo as unknown as ReturnType<typeof useSafeInfo>,
+    )
+
+    const { getByText, getByLabelText } = render(
+      <CheckWalletWithPermission permission={Permission.SignTransaction}>
+        {(isOk) => <button disabled={!isOk}>Continue</button>}
+      </CheckWalletWithPermission>,
+    )
+
+    expect(getByText('Continue')).toBeDisabled()
+    expect(getByLabelText('SDK is not initialized yet'))
+  })
+
+  it('should not disable the button if SDK is not initialized and safe is not loaded', () => {
+    mockUseSafeSdk.mockReturnValue(undefined)
+
+    const safeAddress = faker.finance.ethereumAddress()
+    const mockSafeInfo = {
+      safeAddress,
+      safe: extendedSafeInfoBuilder()
+        .with({ address: { value: safeAddress } })
+        .with({ deployed: true })
+        .build(),
+      safeLoaded: false,
+    }
+
+    ;(useSafeInfo as jest.MockedFunction<typeof useSafeInfo>).mockReturnValueOnce(
+      mockSafeInfo as unknown as ReturnType<typeof useSafeInfo>,
+    )
+
+    const { queryByText } = render(
+      <CheckWalletWithPermission permission={Permission.SignTransaction}>
+        {(isOk) => <button disabled={!isOk}>Continue</button>}
+      </CheckWalletWithPermission>,
+    )
+
+    expect(queryByText('Continue')).not.toBeDisabled()
+  })
+})

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

@@ -0,0 +1,81 @@
+import { useSafeSDK } from '@/hooks/coreSDK/safeCoreSDK'
+import { useMemo, type ReactElement } from 'react'
+import useWallet from '@/hooks/wallets/useWallet'
+import useConnectWallet from '../ConnectWallet/useConnectWallet'
+import useIsWrongChain from '@/hooks/useIsWrongChain'
+import { Tooltip } from '@mui/material'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import type { Permission, PermissionProps } from '@/permissions/types'
+import { useHasPermission } from '@/permissions/hooks/useHasPermission'
+
+type CheckWalletWithPermissionProps<
+  P extends Permission,
+  PProps = PermissionProps<P> extends undefined ? { permissionProps?: never } : { permissionProps: PermissionProps<P> },
+> = {
+  children: (ok: boolean) => ReactElement
+  permission: P
+  noTooltip?: boolean
+  checkNetwork?: boolean
+  allowUndeployedSafe?: boolean
+} & PProps
+
+enum Message {
+  WalletNotConnected = 'Please connect your wallet',
+  SDKNotInitialized = 'SDK is not initialized yet',
+  NotSafeOwner = 'Your connected wallet is not a signer of this Safe Account',
+  SafeNotActivated = 'You need to activate the Safe before transacting',
+}
+
+const CheckWalletWithPermission = <P extends Permission>({
+  children,
+  permission,
+  permissionProps,
+  noTooltip,
+  checkNetwork = false,
+  allowUndeployedSafe = false,
+}: CheckWalletWithPermissionProps<P>): ReactElement => {
+  const wallet = useWallet()
+  const connectWallet = useConnectWallet()
+  const isWrongChain = useIsWrongChain()
+  const sdk = useSafeSDK()
+  const hasPermission = useHasPermission(
+    permission,
+    ...((permissionProps ? [permissionProps] : []) as PermissionProps<P> extends undefined
+      ? []
+      : [props: PermissionProps<P>]),
+  )
+
+  const { safe, safeLoaded } = useSafeInfo()
+
+  const isUndeployedSafe = !safe.deployed
+
+  const message = useMemo(() => {
+    if (!wallet) {
+      return Message.WalletNotConnected
+    }
+
+    if (!sdk && safeLoaded) {
+      return Message.SDKNotInitialized
+    }
+
+    if (isUndeployedSafe && !allowUndeployedSafe) {
+      return Message.SafeNotActivated
+    }
+
+    if (!hasPermission) {
+      return Message.NotSafeOwner
+    }
+  }, [allowUndeployedSafe, hasPermission, isUndeployedSafe, sdk, wallet, safeLoaded])
+
+  if (checkNetwork && isWrongChain) return children(false)
+  if (!message) return children(true)
+  if (noTooltip) return children(false)
+
+  return (
+    <Tooltip title={message}>
+      <span onClick={wallet ? undefined : connectWallet}>{children(false)}</span>
+    </Tooltip>
+  )
+}
+
+export default CheckWalletWithPermission

apps/web/src/components/notification-center/NotificationRenewal/index.tsx

@@ -1,10 +1,11 @@
 import { useState, type ReactElement } from 'react'
 import { Alert, Box, Button, Typography } from '@mui/material'
 import useSafeInfo from '@/hooks/useSafeInfo'
-import CheckWallet from '@/components/common/CheckWallet'
+import CheckWalletWithPermission from '@/components/common/CheckWalletWithPermission'
 import { useNotificationsRenewal } from '@/components/settings/PushNotifications/hooks/useNotificationsRenewal'
 import { useIsNotificationsRenewalEnabled } from '@/components/settings/PushNotifications/hooks/useNotificationsTokenVersion'
 import { RENEWAL_MESSAGE } from '@/components/settings/PushNotifications/constants'
+import { Permission } from '@/permissions/types'
 
 const NotificationRenewal = (): ReactElement => {
   const { safe } = useSafeInfo()
@@ -32,7 +33,10 @@ const NotificationRenewal = (): ReactElement => {
         <Typography variant="body2">{RENEWAL_MESSAGE}</Typography>
       </Alert>
       <Box>
-        <CheckWallet allowNonOwner checkNetwork={!isRegistering && safe.deployed}>
+        <CheckWalletWithPermission
+          permission={Permission.EnablePushNotifications}
+          checkNetwork={!isRegistering && safe.deployed}
+        >
           {(isOk) => (
             <Button
               variant="contained"
@@ -44,7 +48,7 @@ const NotificationRenewal = (): ReactElement => {
               Sign now
             </Button>
           )}
-        </CheckWallet>
+        </CheckWalletWithPermission>
       </Box>
     </>
   )

apps/web/src/components/settings/PushNotifications/GlobalPushNotifications.tsx

@@ -33,7 +33,8 @@ import { PUSH_NOTIFICATION_EVENTS } from '@/services/analytics/events/push-notif
 import { requestNotificationPermission } from './logic'
 import type { NotifiableSafes } from './logic'
 import type { PushNotificationPreferences } from '@/services/push-notifications/preferences'
-import CheckWallet from '@/components/common/CheckWallet'
+import CheckWalletWithPermission from '@/components/common/CheckWalletWithPermission'
+import { Permission } from '@/permissions/types'
 
 import css from './styles.module.css'
 import useAllOwnedSafes from '@/features/myAccounts/hooks/useAllOwnedSafes'
@@ -403,13 +404,13 @@ export const GlobalPushNotifications = (): ReactElement | null => {
             </Typography>
           )}
 
-          <CheckWallet allowNonOwner>
+          <CheckWalletWithPermission permission={Permission.EnablePushNotifications}>
             {(isOk) => (
               <Button variant="contained" disabled={!canSave || !isOk || isLoading} onClick={onSave}>
                 {isLoading ? <CircularProgress size={20} /> : 'Save'}
               </Button>
             )}
-          </CheckWallet>
+          </CheckWalletWithPermission>
         </Box>
       </Grid>
 

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

@@ -27,9 +27,10 @@ import { HelpCenterArticle, IS_DEV } from '@/config/constants'
 import { trackEvent } from '@/services/analytics'
 import { PUSH_NOTIFICATION_EVENTS } from '@/services/analytics/events/push-notifications'
 import { AppRoutes } from '@/config/routes'
-import CheckWallet from '@/components/common/CheckWallet'
+import CheckWalletWithPermission from '@/components/common/CheckWalletWithPermission'
 import { useIsMac } from '@/hooks/useIsMac'
 import ExternalLink from '@/components/common/ExternalLink'
+import { Permission } from '@/permissions/types'
 
 import css from './styles.module.css'
 import NetworkWarning from '@/components/new-safe/create/NetworkWarning'
@@ -148,7 +149,10 @@ export const PushNotifications = (): ReactElement => {
                       showName={true}
                       hasExplorer
                     />
-                    <CheckWallet allowNonOwner checkNetwork={!isRegistering && safe.deployed}>
+                    <CheckWalletWithPermission
+                      permission={Permission.EnablePushNotifications}
+                      checkNetwork={!isRegistering && safe.deployed}
+                    >
                       {(isOk) => (
                         <FormControlLabel
                           data-testid="notifications-switch"
@@ -157,7 +161,7 @@ export const PushNotifications = (): ReactElement => {
                           disabled={!isOk || isRegistering || !safe.deployed}
                         />
                       )}
-                    </CheckWallet>
+                    </CheckWalletWithPermission>
                   </div>
 
                   <Paper className={css.globalInfo} variant="outlined">