[Epic] Safe Proposers

package.json

@@ -58,7 +58,7 @@
     "@safe-global/protocol-kit": "^4.1.1",
     "@safe-global/safe-apps-sdk": "^9.1.0",
     "@safe-global/safe-deployments": "1.37.12",
-    "@safe-global/safe-client-gateway-sdk": "v1.60.1",
+    "@safe-global/safe-client-gateway-sdk": "1.60.1-next-069fa2b",
     "@safe-global/safe-gateway-typescript-sdk": "3.22.3-beta.15",
     "@safe-global/safe-modules-deployments": "^2.2.1",
     "@sentry/react": "^7.91.0",

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

@@ -16,5 +16,4 @@
 
 .readOnly :global .MuiInputBase-input {
   visibility: hidden;
-  position: absolute;
 }

src/components/common/CheckWallet/index.test.tsx

@@ -5,7 +5,7 @@ import useIsSafeOwner from '@/hooks/useIsSafeOwner'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
 import useWallet from '@/hooks/wallets/useWallet'
 import { chainBuilder } from '@/tests/builders/chains'
-import { useIsWalletDelegate } from '@/hooks/useDelegates'
+import { useIsWalletProposer } from '@/hooks/useProposers'
 import { faker } from '@faker-js/faker'
 import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import useSafeInfo from '@/hooks/useSafeInfo'
@@ -42,9 +42,9 @@ jest.mock('@/hooks/useIsWrongChain', () => ({
   default: jest.fn(() => false),
 }))
 
-jest.mock('@/hooks/useDelegates', () => ({
+jest.mock('@/hooks/useProposers', () => ({
   __esModule: true,
-  useIsWalletDelegate: jest.fn(() => false),
+  useIsWalletProposer: jest.fn(() => false),
 }))
 
 jest.mock('@/hooks/useSafeInfo', () => ({
@@ -125,15 +125,37 @@ describe('CheckWallet', () => {
     expect(allowContainer.querySelector('button')).not.toBeDisabled()
   })
 
-  it('should not disable the button for delegates', () => {
+  it('should not disable the button for proposers', () => {
     ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(false)
-    ;(useIsWalletDelegate as jest.MockedFunction<typeof useIsWalletDelegate>).mockReturnValueOnce(true)
+    ;(useIsWalletProposer as jest.MockedFunction<typeof useIsWalletProposer>).mockReturnValueOnce(true)
 
     const { container } = renderButton()
 
     expect(container.querySelector('button')).not.toBeDisabled()
   })
 
+  it('should disable the button for proposers if specified via flag', () => {
+    ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(false)
+    ;(useIsWalletProposer as jest.MockedFunction<typeof useIsWalletProposer>).mockReturnValueOnce(true)
+
+    const { getByText } = render(
+      <CheckWallet allowProposer={false}>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>,
+    )
+
+    expect(getByText('Continue')).toBeDisabled()
+  })
+
+  it('should not disable the button for proposers that are also owners', () => {
+    ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(true)
+    ;(useIsWalletProposer as jest.MockedFunction<typeof useIsWalletProposer>).mockReturnValueOnce(true)
+
+    const { getByText } = render(
+      <CheckWallet allowProposer={false}>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>,
+    )
+
+    expect(getByText('Continue')).not.toBeDisabled()
+  })
+
   it('should disable the button for counterfactual Safes', () => {
     ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(true)
 

src/components/common/CheckWallet/index.tsx

@@ -1,4 +1,4 @@
-import { useIsWalletDelegate } from '@/hooks/useDelegates'
+import { useIsWalletProposer } from '@/hooks/useProposers'
 import { useMemo, type ReactElement } from 'react'
 import useIsOnlySpendingLimitBeneficiary from '@/hooks/useIsOnlySpendingLimitBeneficiary'
 import useIsSafeOwner from '@/hooks/useIsSafeOwner'
@@ -15,6 +15,7 @@ type CheckWalletProps = {
   noTooltip?: boolean
   checkNetwork?: boolean
   allowUndeployedSafe?: boolean
+  allowProposer?: boolean
 }
 
 enum Message {
@@ -30,13 +31,14 @@ const CheckWallet = ({
   noTooltip,
   checkNetwork = false,
   allowUndeployedSafe = false,
+  allowProposer = true,
 }: CheckWalletProps): ReactElement => {
   const wallet = useWallet()
   const isSafeOwner = useIsSafeOwner()
   const isOnlySpendingLimit = useIsOnlySpendingLimitBeneficiary()
   const connectWallet = useConnectWallet()
   const isWrongChain = useIsWrongChain()
-  const isDelegate = useIsWalletDelegate()
+  const isProposer = useIsWalletProposer()
 
   const { safe } = useSafeInfo()
 
@@ -46,18 +48,24 @@ const CheckWallet = ({
     if (!wallet) {
       return Message.WalletNotConnected
     }
+
     if (isUndeployedSafe && !allowUndeployedSafe) {
       return Message.SafeNotActivated
     }
 
-    if (!allowNonOwner && !isSafeOwner && !isDelegate && (!isOnlySpendingLimit || !allowSpendingLimit)) {
+    if (!allowNonOwner && !isSafeOwner && !isProposer && (!isOnlySpendingLimit || !allowSpendingLimit)) {
+      return Message.NotSafeOwner
+    }
+
+    if (!allowProposer && isProposer && !isSafeOwner) {
       return Message.NotSafeOwner
     }
   }, [
     allowNonOwner,
+    allowProposer,
     allowSpendingLimit,
     allowUndeployedSafe,
-    isDelegate,
+    isProposer,
     isOnlySpendingLimit,
     isSafeOwner,
     isUndeployedSafe,

src/components/common/Header/index.test.tsx

@@ -0,0 +1,129 @@
+import Header from '@/components/common/Header/index'
+import * as useChains from '@/hooks/useChains'
+import * as useIsSafeOwner from '@/hooks/useIsSafeOwner'
+import * as useProposers from '@/hooks/useProposers'
+import * as useSafeAddress from '@/hooks/useSafeAddress'
+import * as useSafeTokenEnabled from '@/hooks/useSafeTokenEnabled'
+import { render } from '@/tests/test-utils'
+import { faker } from '@faker-js/faker'
+import { screen, fireEvent } from '@testing-library/react'
+
+jest.mock(
+  '@/components/common/SafeTokenWidget',
+  () =>
+    function SafeTokenWidget() {
+      return <div>SafeTokenWidget</div>
+    },
+)
+
+jest.mock(
+  '@/features/walletconnect/components',
+  () =>
+    function WalletConnect() {
+      return <div>WalletConnect</div>
+    },
+)
+
+jest.mock(
+  '@/components/common/NetworkSelector',
+  () =>
+    function NetworkSelector() {
+      return <div>NetworkSelector</div>
+    },
+)
+
+describe('Header', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('renders the menu button when onMenuToggle is provided', () => {
+    render(<Header onMenuToggle={jest.fn()} />)
+    expect(screen.getByLabelText('menu')).toBeInTheDocument()
+  })
+
+  it('does not render the menu button when onMenuToggle is not provided', () => {
+    render(<Header />)
+    expect(screen.queryByLabelText('menu')).not.toBeInTheDocument()
+  })
+
+  it('calls onMenuToggle when menu button is clicked', () => {
+    const onMenuToggle = jest.fn()
+    render(<Header onMenuToggle={onMenuToggle} />)
+
+    const menuButton = screen.getByLabelText('menu')
+    fireEvent.click(menuButton)
+
+    expect(onMenuToggle).toHaveBeenCalled()
+  })
+
+  it('renders the SafeTokenWidget when showSafeToken is true', () => {
+    jest.spyOn(useSafeTokenEnabled, 'useSafeTokenEnabled').mockReturnValue(true)
+
+    render(<Header />)
+    expect(screen.getByText('SafeTokenWidget')).toBeInTheDocument()
+  })
+
+  it('does not render the SafeTokenWidget when showSafeToken is false', () => {
+    jest.spyOn(useSafeTokenEnabled, 'useSafeTokenEnabled').mockReturnValue(false)
+
+    render(<Header />)
+    expect(screen.queryByText('SafeTokenWidget')).not.toBeInTheDocument()
+  })
+
+  it('displays the safe logo', () => {
+    render(<Header />)
+    expect(screen.getAllByAltText('Safe logo')[0]).toBeInTheDocument()
+  })
+
+  it('renders the BatchIndicator when showBatchButton is true', () => {
+    jest.spyOn(useSafeAddress, 'default').mockReturnValue(faker.finance.ethereumAddress())
+    jest.spyOn(useProposers, 'useIsWalletProposer').mockReturnValue(false)
+    jest.spyOn(useIsSafeOwner, 'default').mockReturnValue(false)
+
+    render(<Header />)
+    expect(screen.getByTitle('Batch')).toBeInTheDocument()
+  })
+
+  it('does not render the BatchIndicator when there is no safe address', () => {
+    jest.spyOn(useSafeAddress, 'default').mockReturnValue('')
+
+    render(<Header />)
+    expect(screen.queryByTitle('Batch')).not.toBeInTheDocument()
+  })
+
+  it('does not render the BatchIndicator when connected wallet is a proposer', () => {
+    jest.spyOn(useProposers, 'useIsWalletProposer').mockReturnValue(true)
+
+    render(<Header />)
+    expect(screen.queryByTitle('Batch')).not.toBeInTheDocument()
+  })
+
+  it('renders the WalletConnect component when enableWc is true', () => {
+    jest.spyOn(useChains, 'useHasFeature').mockReturnValue(true)
+
+    render(<Header />)
+    expect(screen.getByText('WalletConnect')).toBeInTheDocument()
+  })
+
+  it('does not render the WalletConnect component when enableWc is false', () => {
+    jest.spyOn(useChains, 'useHasFeature').mockReturnValue(false)
+
+    render(<Header />)
+    expect(screen.queryByText('WalletConnect')).not.toBeInTheDocument()
+  })
+
+  it('renders the NetworkSelector when safeAddress exists', () => {
+    jest.spyOn(useSafeAddress, 'default').mockReturnValue(faker.finance.ethereumAddress())
+
+    render(<Header />)
+    expect(screen.getByText('NetworkSelector')).toBeInTheDocument()
+  })
+
+  it('does not render the NetworkSelector when safeAddress is falsy', () => {
+    jest.spyOn(useSafeAddress, 'default').mockReturnValue('')
+
+    render(<Header />)
+    expect(screen.queryByText('NetworkSelector')).not.toBeInTheDocument()
+  })
+})

src/components/common/Header/index.tsx

@@ -1,3 +1,5 @@
+import useIsSafeOwner from '@/hooks/useIsSafeOwner'
+import { useIsWalletProposer } from '@/hooks/useProposers'
 import type { Dispatch, SetStateAction } from 'react'
 import { type ReactElement } from 'react'
 import { useRouter } from 'next/router'
@@ -39,6 +41,8 @@ function getLogoLink(router: ReturnType<typeof useRouter>): Url {
 const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
   const safeAddress = useSafeAddress()
   const showSafeToken = useSafeTokenEnabled()
+  const isProposer = useIsWalletProposer()
+  const isSafeOwner = useIsSafeOwner()
   const router = useRouter()
   const enableWc = useHasFeature(FEATURES.NATIVE_WALLETCONNECT)
 
@@ -59,6 +63,8 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
     }
   }
 
+  const showBatchButton = safeAddress && (!isProposer || isSafeOwner)
+
   return (
     <Paper className={css.container}>
       <div className={classnames(css.element, css.menuButton)}>
@@ -91,7 +97,7 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
         <NotificationCenter />
       </div>
 
-      {safeAddress && (
+      {showBatchButton && (
         <div className={classnames(css.element, css.hideMobile)}>
           <BatchIndicator onClick={handleBatchToggle} />
         </div>