From 353914ba6aff2186ab8bc6ed2c551d28a16b994e Mon Sep 17 00:00:00 2001
From: Anto <antoniotg96@gmail.com>
Date: Tue, 19 May 2026 20:52:27 +0200
Subject: [PATCH 1/3] fix(safe): handle Safe-over-WalletConnect
 schedule/execute/cancel flows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Detect Safe via WC peer metadata (name "Safe{Wallet}" or url
  app.safe.global), reading the live connector instance from
  useConnections() rather than the shallow useAccount() descriptor.
- Skip waitForTransactionReceipt when Safe is connected — the returned
  hash is a Safe-tx-hash, not an Ethereum tx hash, so the receipt poll
  hangs forever. Show the user a "confirm in Safe" toast instead.
- Add 5-minute timeout to waitForTransactionReceipt as a safety net for
  EOAs (and for any Safe-like wallet we may not detect).
- Latch the role/minDelay reads in useTimelockRoles so a flaky RPC
  refetch doesn't make the New operation / Execute / Cancel buttons
  flicker out on mainnet.
- 26 new tests covering Safe detection, the latch, and connectors lib.
---
 package.json                        |   2 +-
 src/components/OperationCard.tsx    |  51 +++++++--
 src/components/OperationForm.tsx    |  33 +++++-
 src/hooks/useIsSafeWallet.test.tsx  | 156 ++++++++++++++++++++++++++++
 src/hooks/useIsSafeWallet.ts        |  61 +++++++++++
 src/hooks/useTimelockRoles.test.tsx | 146 ++++++++++++++++++++++++++
 src/hooks/useTimelockRoles.ts       |  66 +++++++++---
 src/lib/connectors.test.ts          |  65 ++++++++++++
 src/lib/connectors.ts               |  44 ++++++++
 src/pages/NewOperation.tsx          |  53 +++-------
 src/pages/Operations.tsx            |   8 +-
 11 files changed, 619 insertions(+), 66 deletions(-)
 create mode 100644 src/hooks/useIsSafeWallet.test.tsx
 create mode 100644 src/hooks/useIsSafeWallet.ts
 create mode 100644 src/hooks/useTimelockRoles.test.tsx
 create mode 100644 src/lib/connectors.test.ts
 create mode 100644 src/lib/connectors.ts

diff --git a/package.json b/package.json
index e881d32..e8bf952 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "timelock-ui",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Minimal UI to operate OpenZeppelin TimelockController instances",
   "type": "module",
   "packageManager": "pnpm@11.1.1",
diff --git a/src/components/OperationCard.tsx b/src/components/OperationCard.tsx
index bc10d65..80fc430 100644
--- a/src/components/OperationCard.tsx
+++ b/src/components/OperationCard.tsx
@@ -7,6 +7,8 @@ import { useOperationState } from '../hooks/useOperationState'
 import { useTimelockRoles } from '../hooks/useTimelockRoles'
 import { timelockAbi } from '../abis/timelock'
 import { OperationState, shortHex, explorerTxUrl, explorerAddressUrl, hashOperation } from '../lib/timelock'
+import { RECEIPT_TIMEOUT_MS } from '../lib/connectors'
+import { useIsSafeWallet } from '../hooks/useIsSafeWallet'
 import type { StoredOperation } from '../lib/storage'
 
 interface Props {
@@ -23,6 +25,7 @@ export function OperationCard({ operation, explorerUrl, onPatched, onToast }: Pr
   const [saltError, setSaltError] = useState<string | null>(null)
   const { address: userAddress } = useAccount()
   const client = usePublicClient({ chainId: operation.chainId })
+  const safeFlow = useIsSafeWallet()
 
   const { data: onChain, isLoading, refetch } = useOperationState(
     operation.timelockAddress,
@@ -77,10 +80,26 @@ export function OperationCard({ operation, explorerUrl, onPatched, onToast }: Pr
         chainId: operation.chainId,
       })
       onPatched(operation.id, { executeTxHash: hash })
+
+      if (safeFlow) {
+        onToast({
+          message: 'Execute sent to Safe. Confirm signatures at app.safe.global to broadcast on-chain.',
+          type: 'info',
+        })
+        return
+      }
+
       setTxPending(true)
-      await client?.waitForTransactionReceipt({ hash })
+      try {
+        await client?.waitForTransactionReceipt({ hash, timeout: RECEIPT_TIMEOUT_MS })
+        onToast({ message: 'Operation executed successfully', type: 'success' })
+      } catch {
+        onToast({
+          message: 'Execute submitted but receipt not seen yet. Check the explorer in a moment.',
+          type: 'info',
+        })
+      }
       refetch()
-      onToast({ message: 'Operation executed successfully', type: 'success' })
     } catch (e: any) {
       onToast({ message: e?.shortMessage ?? e?.message ?? 'Unknown error', type: 'error' })
     } finally {
@@ -98,10 +117,26 @@ export function OperationCard({ operation, explorerUrl, onPatched, onToast }: Pr
         chainId: operation.chainId,
       })
       onPatched(operation.id, { cancelTxHash: hash })
+
+      if (safeFlow) {
+        onToast({
+          message: 'Cancel sent to Safe. Confirm signatures at app.safe.global to broadcast on-chain.',
+          type: 'info',
+        })
+        return
+      }
+
       setTxPending(true)
-      await client?.waitForTransactionReceipt({ hash })
+      try {
+        await client?.waitForTransactionReceipt({ hash, timeout: RECEIPT_TIMEOUT_MS })
+        onToast({ message: 'Operation cancelled', type: 'info' })
+      } catch {
+        onToast({
+          message: 'Cancel submitted but receipt not seen yet. Check the explorer in a moment.',
+          type: 'info',
+        })
+      }
       refetch()
-      onToast({ message: 'Operation cancelled', type: 'info' })
     } catch (e: any) {
       onToast({ message: e?.shortMessage ?? e?.message ?? 'Unknown error', type: 'error' })
     } finally {
@@ -165,7 +200,9 @@ export function OperationCard({ operation, explorerUrl, onPatched, onToast }: Pr
                   ? <Loader2 size={14} className="animate-spin" />
                   : <Play size={14} />
                 }
-                {isPending ? 'Confirm in wallet…' : txPending ? 'Waiting…' : 'Execute'}
+                {isPending
+                  ? safeFlow ? 'Sending to Safe…' : 'Confirm in wallet…'
+                  : txPending ? 'Waiting…' : 'Execute'}
               </button>
             ) : (
               <button
@@ -188,7 +225,9 @@ export function OperationCard({ operation, explorerUrl, onPatched, onToast }: Pr
                 ? <Loader2 size={14} className="animate-spin" />
                 : <X size={14} />
               }
-              {isPending ? 'Confirm…' : txPending ? 'Waiting…' : 'Cancel'}
+              {isPending
+                ? safeFlow ? 'Sending to Safe…' : 'Confirm…'
+                : txPending ? 'Waiting…' : 'Cancel'}
             </button>
           )}
           <button
diff --git a/src/components/OperationForm.tsx b/src/components/OperationForm.tsx
index 6bac6c2..87ca311 100644
--- a/src/components/OperationForm.tsx
+++ b/src/components/OperationForm.tsx
@@ -6,13 +6,15 @@ import { timelockAbi } from '../abis/timelock'
 import { hashOperation, generateSalt, formatDelay } from '../lib/timelock'
 import { parseMethodSignature, encodeCalldata, type ParsedParam } from '../lib/abi-parser'
 import { upsertOperation, type StoredOperation } from '../lib/storage'
+import { RECEIPT_TIMEOUT_MS } from '../lib/connectors'
+import { useIsSafeWallet } from '../hooks/useIsSafeWallet'
 import { Toast } from './Toast'
 
 interface Props {
   timelockAddress: `0x${string}`
   chainId: number
   minDelay: bigint
-  onScheduled: () => void
+  onScheduled: (opts?: { needsSafeSignatures?: boolean }) => void
   onCancel: () => void
 }
 
@@ -20,6 +22,7 @@ export function OperationForm({ timelockAddress, chainId, minDelay, onScheduled,
   const { address: userAddress } = useAccount()
   const client = usePublicClient()
   const { writeContractAsync, isPending } = useWriteContract()
+  const safeFlow = useIsSafeWallet()
 
   // ─── Form state ───────────────────────────────────────────────────────────
   const [target, setTarget] = useState('')
@@ -120,7 +123,23 @@ export function OperationForm({ timelockAddress, chainId, minDelay, onScheduled,
       }
 
       upsertOperation(op)
-      await client?.waitForTransactionReceipt({ hash })
+
+      // Safe returns a Safe-tx-hash, not an Ethereum tx hash, so waiting for
+      // a receipt would hang forever. Skip the wait and let the user track
+      // the multisig in the Safe UI. The operation is already saved locally,
+      // and the chain scan will pick up the on-chain tx once signers execute.
+      if (safeFlow) {
+        onScheduled({ needsSafeSignatures: true })
+        return
+      }
+
+      try {
+        await client?.waitForTransactionReceipt({ hash, timeout: RECEIPT_TIMEOUT_MS })
+      } catch {
+        // Timeout or transient RPC error — the schedule TX may still confirm
+        // later. The op is stored with its scheduleTxHash so the user can
+        // verify in the explorer; better to release the UI than freeze it.
+      }
       onScheduled()
     } catch (e: any) {
       setTxError(e?.shortMessage ?? e?.message ?? 'Unknown error')
@@ -277,7 +296,15 @@ export function OperationForm({ timelockAddress, chainId, minDelay, onScheduled,
           disabled={isSubmitting || !userAddress}
           className="flex-1 py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded font-medium"
         >
-          {isPending ? 'Signing…' : isSubmitting ? 'Confirming…' : 'Schedule operation'}
+          {isPending
+            ? 'Signing…'
+            : isSubmitting
+              ? safeFlow
+                ? 'Sending to Safe…'
+                : 'Confirming…'
+              : safeFlow
+                ? 'Schedule via Safe'
+                : 'Schedule operation'}
         </button>
         <button
           type="button"
diff --git a/src/hooks/useIsSafeWallet.test.tsx b/src/hooks/useIsSafeWallet.test.tsx
new file mode 100644
index 0000000..85a4906
--- /dev/null
+++ b/src/hooks/useIsSafeWallet.test.tsx
@@ -0,0 +1,156 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { renderHook, waitFor } from '@testing-library/react'
+
+const mockUseAccount = vi.fn()
+const mockUseConnections = vi.fn()
+vi.mock('wagmi', () => ({
+  useAccount: () => mockUseAccount(),
+  useConnections: () => mockUseConnections(),
+}))
+
+import { useIsSafeWallet } from './useIsSafeWallet'
+
+// Returns a fake "live" connector — the kind useConnections() yields once a
+// wallet is connected, including the getProvider instance method.
+function liveConnector(opts: {
+  id: string
+  name: string
+  type?: string
+  provider?: any
+  getProvider?: () => Promise<any>
+}) {
+  return {
+    id: opts.id,
+    name: opts.name,
+    type: opts.type ?? opts.id,
+    uid: 'uid-test',
+    getProvider:
+      opts.getProvider ??
+      (async () => opts.provider ?? { session: { peer: { metadata: {} } } }),
+  }
+}
+
+describe('useIsSafeWallet', () => {
+  beforeEach(() => {
+    mockUseAccount.mockReset()
+    mockUseConnections.mockReset()
+    mockUseConnections.mockReturnValue([])
+  })
+
+  it('is false when no wallet is connected', () => {
+    mockUseAccount.mockReturnValue({ connector: undefined })
+    const { result } = renderHook(() => useIsSafeWallet())
+    expect(result.current).toBe(false)
+  })
+
+  it('is true synchronously for the Safe Apps SDK connector (id "safe")', () => {
+    const safe = { id: 'safe', name: 'Safe', type: 'safe', uid: 'uid-safe' }
+    mockUseAccount.mockReturnValue({ connector: safe })
+    mockUseConnections.mockReturnValue([{ connector: safe }])
+    const { result } = renderHook(() => useIsSafeWallet())
+    expect(result.current).toBe(true)
+  })
+
+  it('stays false for a plain EOA over WalletConnect', async () => {
+    mockUseAccount.mockReturnValue({
+      connector: { id: 'walletConnect', name: 'WalletConnect', type: 'walletConnect' },
+    })
+    mockUseConnections.mockReturnValue([
+      {
+        connector: liveConnector({
+          id: 'walletConnect',
+          name: 'WalletConnect',
+          provider: {
+            session: { peer: { metadata: { name: 'Rainbow', url: 'https://rainbow.me' } } },
+          },
+        }),
+      },
+    ])
+    const { result } = renderHook(() => useIsSafeWallet())
+    expect(result.current).toBe(false)
+    await new Promise((r) => setTimeout(r, 10))
+    expect(result.current).toBe(false)
+  })
+
+  it('flips to true once Safe is detected via WalletConnect peer metadata', async () => {
+    mockUseAccount.mockReturnValue({
+      connector: { id: 'walletConnect', name: 'WalletConnect', type: 'walletConnect' },
+    })
+    mockUseConnections.mockReturnValue([
+      {
+        connector: liveConnector({
+          id: 'walletConnect',
+          name: 'WalletConnect',
+          provider: {
+            session: {
+              peer: {
+                metadata: { name: 'Safe{Wallet}', url: 'https://app.safe.global' },
+              },
+            },
+          },
+        }),
+      },
+    ])
+    const { result } = renderHook(() => useIsSafeWallet())
+    expect(result.current).toBe(false) // sync answer before the async probe lands
+    await waitFor(() => expect(result.current).toBe(true))
+  })
+
+  it('detects Safe even when only the metadata url gives it away', async () => {
+    mockUseAccount.mockReturnValue({
+      connector: { id: 'walletConnect', name: 'WalletConnect', type: 'walletConnect' },
+    })
+    mockUseConnections.mockReturnValue([
+      {
+        connector: liveConnector({
+          id: 'walletConnect',
+          name: 'WalletConnect',
+          provider: {
+            session: { peer: { metadata: { name: 'Unknown', url: 'https://app.safe.global' } } },
+          },
+        }),
+      },
+    ])
+    const { result } = renderHook(() => useIsSafeWallet())
+    await waitFor(() => expect(result.current).toBe(true))
+  })
+
+  it('does not crash if the live connector lacks getProvider (descriptor only)', async () => {
+    mockUseAccount.mockReturnValue({
+      connector: { id: 'walletConnect', name: 'WalletConnect', type: 'walletConnect' },
+    })
+    mockUseConnections.mockReturnValue([
+      {
+        connector: {
+          id: 'walletConnect',
+          name: 'WalletConnect',
+          type: 'walletConnect',
+          uid: 'uid-x',
+        },
+      },
+    ])
+    const { result } = renderHook(() => useIsSafeWallet())
+    await new Promise((r) => setTimeout(r, 10))
+    expect(result.current).toBe(false)
+  })
+
+  it('does not crash if getProvider throws', async () => {
+    mockUseAccount.mockReturnValue({
+      connector: { id: 'walletConnect', name: 'WalletConnect', type: 'walletConnect' },
+    })
+    mockUseConnections.mockReturnValue([
+      {
+        connector: liveConnector({
+          id: 'walletConnect',
+          name: 'WalletConnect',
+          getProvider: async () => {
+            throw new Error('provider not ready')
+          },
+        }),
+      },
+    ])
+    const { result } = renderHook(() => useIsSafeWallet())
+    await new Promise((r) => setTimeout(r, 10))
+    expect(result.current).toBe(false)
+  })
+})
diff --git a/src/hooks/useIsSafeWallet.ts b/src/hooks/useIsSafeWallet.ts
new file mode 100644
index 0000000..a5093f8
--- /dev/null
+++ b/src/hooks/useIsSafeWallet.ts
@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react'
+import { useAccount, useConnections } from 'wagmi'
+import { isSafeByMetadata, isSafeConnectorSync } from '../lib/connectors'
+
+// Returns true when the connected wallet is Safe (the multisig). Covers two
+// paths:
+//
+//   1. Synchronously: the dedicated Safe connector (id 'safe', used when the
+//      dApp is loaded as a Safe App) or any connector that names itself Safe.
+//
+//   2. Asynchronously: a WalletConnect session whose peer.metadata identifies
+//      itself as Safe — this is how Safe actually shows up when the user
+//      scans the WC QR from app.safe.global. wagmi reports the connector as
+//      "WalletConnect", so the sync check misses it; we read the WC provider's
+//      session metadata to recover the real wallet identity.
+//
+// Implementation note: useAccount().connector exposes a thin descriptor
+// (id/name/type/uid) without instance methods. The real connector — the one
+// that owns getProvider() and the live WC session — lives in the active
+// connection object returned by useConnections(). The connection sometimes
+// arrives shallow first and gets re-emitted with the full instance, which is
+// fine: the effect re-runs and picks up the provider on the second pass.
+export function useIsSafeWallet(): boolean {
+  const { connector: accountConnector } = useAccount()
+  const connections = useConnections()
+  const liveConnector = connections[0]?.connector ?? accountConnector
+
+  const [isSafe, setIsSafe] = useState<boolean>(() => isSafeConnectorSync(accountConnector))
+
+  useEffect(() => {
+    const syncAnswer = isSafeConnectorSync(liveConnector)
+    setIsSafe(syncAnswer)
+
+    if (!liveConnector) return
+    if (syncAnswer) return
+
+    const id = liveConnector.id?.toLowerCase() ?? ''
+    const type = (liveConnector as any).type?.toLowerCase() ?? ''
+    if (!id.includes('walletconnect') && !type.includes('walletconnect')) return
+
+    let cancelled = false
+    ;(async () => {
+      try {
+        const getProvider = (liveConnector as any).getProvider
+        if (typeof getProvider !== 'function') return
+        const provider: any = await getProvider.call(liveConnector)
+        if (cancelled) return
+        if (isSafeByMetadata(provider?.session?.peer?.metadata)) setIsSafe(true)
+      } catch {
+        // Provider not ready or failed to read — the receipt-wait timeout in
+        // the schedule/execute/cancel flows is the safety net.
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [liveConnector])
+
+  return isSafe
+}
diff --git a/src/hooks/useTimelockRoles.test.tsx b/src/hooks/useTimelockRoles.test.tsx
new file mode 100644
index 0000000..29f3886
--- /dev/null
+++ b/src/hooks/useTimelockRoles.test.tsx
@@ -0,0 +1,146 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { renderHook } from '@testing-library/react'
+
+const mockUseReadContracts = vi.fn()
+vi.mock('wagmi', () => ({
+  useReadContracts: () => mockUseReadContracts(),
+}))
+
+import { useTimelockRoles } from './useTimelockRoles'
+
+const ADDR_TIMELOCK = '0x1111111111111111111111111111111111111111' as `0x${string}`
+const ADDR_USER = '0x2222222222222222222222222222222222222222' as `0x${string}`
+const ADDR_OTHER_USER = '0x3333333333333333333333333333333333333333' as `0x${string}`
+
+function successData(
+  proposer: boolean,
+  executor: boolean,
+  canceller: boolean,
+  admin: boolean,
+  minDelay: bigint,
+) {
+  return [
+    { status: 'success', result: proposer },
+    { status: 'success', result: executor },
+    { status: 'success', result: canceller },
+    { status: 'success', result: admin },
+    { status: 'success', result: minDelay },
+  ]
+}
+
+function allFailures() {
+  return [0, 1, 2, 3, 4].map(() => ({ status: 'failure', error: new Error('rpc dropped') }))
+}
+
+describe('useTimelockRoles', () => {
+  beforeEach(() => {
+    mockUseReadContracts.mockReset()
+  })
+
+  it('returns all-false when no user is connected', () => {
+    mockUseReadContracts.mockReturnValue({ data: undefined, isLoading: false })
+    const { result } = renderHook(() => useTimelockRoles(ADDR_TIMELOCK, undefined))
+    expect(result.current.roles).toEqual({
+      isProposer: false,
+      isExecutor: false,
+      isCanceller: false,
+      isAdmin: false,
+    })
+    expect(result.current.minDelay).toBe(null)
+  })
+
+  it('exposes confirmed roles on a successful read', () => {
+    mockUseReadContracts.mockReturnValue({
+      data: successData(true, false, true, false, 120n),
+      isLoading: false,
+    })
+    const { result } = renderHook(() => useTimelockRoles(ADDR_TIMELOCK, ADDR_USER))
+    expect(result.current.roles).toEqual({
+      isProposer: true,
+      isExecutor: false,
+      isCanceller: true,
+      isAdmin: false,
+    })
+    expect(result.current.minDelay).toBe(120n)
+  })
+
+  it('preserves the last successful read when a later read fails (the latch)', () => {
+    mockUseReadContracts.mockReturnValue({
+      data: successData(true, false, false, false, 60n),
+      isLoading: false,
+    })
+    const { result, rerender } = renderHook(() => useTimelockRoles(ADDR_TIMELOCK, ADDR_USER))
+    expect(result.current.roles.isProposer).toBe(true)
+    expect(result.current.minDelay).toBe(60n)
+
+    // RPC hiccups — without the latch this would flip isProposer back to
+    // false and the New operation / Execute / Cancel buttons would disappear.
+    mockUseReadContracts.mockReturnValue({ data: allFailures(), isLoading: false })
+    rerender()
+    expect(result.current.roles.isProposer).toBe(true)
+    expect(result.current.minDelay).toBe(60n)
+  })
+
+  it('updates per field — failed reads keep prev, successful reads win', () => {
+    mockUseReadContracts.mockReturnValue({
+      data: successData(true, false, false, false, 60n),
+      isLoading: false,
+    })
+    const { result, rerender } = renderHook(() => useTimelockRoles(ADDR_TIMELOCK, ADDR_USER))
+    expect(result.current.roles.isProposer).toBe(true)
+    expect(result.current.roles.isExecutor).toBe(false)
+
+    mockUseReadContracts.mockReturnValue({
+      data: [
+        { status: 'failure', error: new Error('rpc') }, // proposer read fails → keep prev (true)
+        { status: 'success', result: true },             // executor now true
+        { status: 'failure', error: new Error('rpc') },
+        { status: 'failure', error: new Error('rpc') },
+        { status: 'failure', error: new Error('rpc') }, // minDelay read fails → keep 60n
+      ],
+      isLoading: false,
+    })
+    rerender()
+    expect(result.current.roles.isProposer).toBe(true)
+    expect(result.current.roles.isExecutor).toBe(true)
+    expect(result.current.minDelay).toBe(60n)
+  })
+
+  it('resets the latch when the user/timelock/chain session changes', () => {
+    mockUseReadContracts.mockReturnValue({
+      data: successData(true, true, true, true, 60n),
+      isLoading: false,
+    })
+    const { result, rerender } = renderHook(
+      ({ user }: { user: `0x${string}` | undefined }) =>
+        useTimelockRoles(ADDR_TIMELOCK, user),
+      { initialProps: { user: ADDR_USER } },
+    )
+    expect(result.current.roles.isProposer).toBe(true)
+
+    // A different wallet must not inherit the previous one's roles even if
+    // the next read fails — different AccessControl context entirely.
+    mockUseReadContracts.mockReturnValue({ data: allFailures(), isLoading: false })
+    rerender({ user: ADDR_OTHER_USER })
+    expect(result.current.roles.isProposer).toBe(false)
+    expect(result.current.minDelay).toBe(null)
+  })
+
+  it('honors a true → false transition when the read is successful (role revoked)', () => {
+    mockUseReadContracts.mockReturnValue({
+      data: successData(true, false, false, false, 60n),
+      isLoading: false,
+    })
+    const { result, rerender } = renderHook(() => useTimelockRoles(ADDR_TIMELOCK, ADDR_USER))
+    expect(result.current.roles.isProposer).toBe(true)
+
+    // We only refuse to overwrite on failed reads. A confirmed false read
+    // (role revoked on-chain) must propagate.
+    mockUseReadContracts.mockReturnValue({
+      data: successData(false, false, false, false, 60n),
+      isLoading: false,
+    })
+    rerender()
+    expect(result.current.roles.isProposer).toBe(false)
+  })
+})
diff --git a/src/hooks/useTimelockRoles.ts b/src/hooks/useTimelockRoles.ts
index cb0e17d..d5a9adc 100644
--- a/src/hooks/useTimelockRoles.ts
+++ b/src/hooks/useTimelockRoles.ts
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { useReadContracts } from 'wagmi'
 import { timelockAbi } from '../abis/timelock'
 import { ROLE_HASHES, type RoleName } from '../lib/timelock'
@@ -9,6 +10,13 @@ export interface TimelockRoles {
   isAdmin: boolean
 }
 
+const EMPTY_ROLES: TimelockRoles = {
+  isProposer: false,
+  isExecutor: false,
+  isCanceller: false,
+  isAdmin: false,
+}
+
 export function useTimelockRoles(
   timelockAddress: `0x${string}` | null,
   userAddress: `0x${string}` | undefined,
@@ -40,25 +48,53 @@ export function useTimelockRoles(
     query: { enabled },
   })
 
-  if (!data || !enabled) {
-    return {
-      roles: { isProposer: false, isExecutor: false, isCanceller: false, isAdmin: false },
-      isLoading,
-      minDelay: null,
-    }
+  // Per-field latch: each role/minDelay keeps its last *successful* read.
+  // A failed re-read (RPC hiccup, common on mainnet with Safe) leaves the
+  // latch untouched instead of flipping a confirmed-true role to false and
+  // making the New operation / Execute / Cancel buttons flicker out.
+  // The latch is scoped to (user, timelock, chain) and reset when that tuple
+  // changes, since a different access-control context is a different question.
+  const sessionKey = `${userAddress ?? ''}|${timelockAddress ?? ''}|${chainId ?? ''}`
+  const [prevSessionKey, setPrevSessionKey] = useState(sessionKey)
+  const [latchedRoles, setLatchedRoles] = useState<TimelockRoles>(EMPTY_ROLES)
+  const [latchedMinDelay, setLatchedMinDelay] = useState<bigint | null>(null)
+  if (prevSessionKey !== sessionKey) {
+    setPrevSessionKey(sessionKey)
+    setLatchedRoles(EMPTY_ROLES)
+    setLatchedMinDelay(null)
   }
 
-  const [proposer, executor, canceller, admin, minDelayResult] = data
+  useEffect(() => {
+    if (!data) return
+    setLatchedRoles((prev) => {
+      const next: TimelockRoles = {
+        isProposer: data[0]?.status === 'success' ? (data[0].result as boolean) : prev.isProposer,
+        isExecutor: data[1]?.status === 'success' ? (data[1].result as boolean) : prev.isExecutor,
+        isCanceller: data[2]?.status === 'success' ? (data[2].result as boolean) : prev.isCanceller,
+        isAdmin: data[3]?.status === 'success' ? (data[3].result as boolean) : prev.isAdmin,
+      }
+      if (
+        next.isProposer === prev.isProposer &&
+        next.isExecutor === prev.isExecutor &&
+        next.isCanceller === prev.isCanceller &&
+        next.isAdmin === prev.isAdmin
+      ) {
+        return prev
+      }
+      return next
+    })
+    if (data[4]?.status === 'success') {
+      setLatchedMinDelay(data[4].result as bigint)
+    }
+  }, [data])
+
+  if (!enabled) {
+    return { roles: EMPTY_ROLES, isLoading, minDelay: null }
+  }
 
   return {
-    roles: {
-      isProposer: proposer?.status === 'success' ? (proposer.result as boolean) : false,
-      isExecutor: executor?.status === 'success' ? (executor.result as boolean) : false,
-      isCanceller: canceller?.status === 'success' ? (canceller.result as boolean) : false,
-      isAdmin: admin?.status === 'success' ? (admin.result as boolean) : false,
-    },
+    roles: latchedRoles,
     isLoading,
-    minDelay:
-      minDelayResult?.status === 'success' ? (minDelayResult.result as bigint) : null,
+    minDelay: latchedMinDelay,
   }
 }
diff --git a/src/lib/connectors.test.ts b/src/lib/connectors.test.ts
new file mode 100644
index 0000000..8ec9749
--- /dev/null
+++ b/src/lib/connectors.test.ts
@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest'
+import { isSafeByMetadata, isSafeConnectorSync } from './connectors'
+
+describe('isSafeByMetadata', () => {
+  it('returns false for null / undefined', () => {
+    expect(isSafeByMetadata(null)).toBe(false)
+    expect(isSafeByMetadata(undefined)).toBe(false)
+  })
+
+  it('returns false for an empty object', () => {
+    expect(isSafeByMetadata({})).toBe(false)
+  })
+
+  it('matches name "Safe{Wallet}" (current Safe branding)', () => {
+    expect(isSafeByMetadata({ name: 'Safe{Wallet}' })).toBe(true)
+  })
+
+  it('matches legacy "Safe Wallet" name', () => {
+    expect(isSafeByMetadata({ name: 'Safe Wallet' })).toBe(true)
+  })
+
+  it('is case-insensitive', () => {
+    expect(isSafeByMetadata({ name: 'SAFE{WALLET}' })).toBe(true)
+    expect(isSafeByMetadata({ name: 'safe' })).toBe(true)
+  })
+
+  it('matches when only the url points to safe.global', () => {
+    expect(isSafeByMetadata({ name: 'Unknown', url: 'https://app.safe.global' })).toBe(true)
+  })
+
+  it('matches any subdomain of safe.global', () => {
+    expect(isSafeByMetadata({ url: 'https://staging.safe.global' })).toBe(true)
+  })
+
+  it('does not match unrelated wallets', () => {
+    expect(isSafeByMetadata({ name: 'MetaMask', url: 'https://metamask.io' })).toBe(false)
+    expect(isSafeByMetadata({ name: 'Rainbow', url: 'https://rainbow.me' })).toBe(false)
+    expect(isSafeByMetadata({ name: 'WalletConnect' })).toBe(false)
+  })
+})
+
+describe('isSafeConnectorSync', () => {
+  it('returns false for null / undefined', () => {
+    expect(isSafeConnectorSync(null)).toBe(false)
+    expect(isSafeConnectorSync(undefined)).toBe(false)
+  })
+
+  it('matches the dedicated Safe connector by id', () => {
+    expect(isSafeConnectorSync({ id: 'safe', name: 'Safe' })).toBe(true)
+  })
+
+  it('matches a connector whose name contains "safe"', () => {
+    expect(isSafeConnectorSync({ id: 'custom', name: 'Safe{Wallet}' })).toBe(true)
+  })
+
+  it('does NOT match plain WalletConnect (the Safe-over-WC case needs peer metadata)', () => {
+    expect(isSafeConnectorSync({ id: 'walletConnect', name: 'WalletConnect' })).toBe(false)
+  })
+
+  it('does not match common EOA connectors', () => {
+    expect(isSafeConnectorSync({ id: 'metaMask', name: 'MetaMask' })).toBe(false)
+    expect(isSafeConnectorSync({ id: 'injected', name: 'Browser Wallet' })).toBe(false)
+    expect(isSafeConnectorSync({ id: 'coinbaseWallet', name: 'Coinbase Wallet' })).toBe(false)
+  })
+})
diff --git a/src/lib/connectors.ts b/src/lib/connectors.ts
new file mode 100644
index 0000000..2d0f092
--- /dev/null
+++ b/src/lib/connectors.ts
@@ -0,0 +1,44 @@
+// Helpers for detecting Safe (smart-contract multisig) sessions.
+//
+// Why this matters: when the user pays Safe to "schedule" a transaction, the
+// hash returned by writeContract is a Safe-tx-hash, NOT an Ethereum tx hash.
+// Querying eth_getTransactionReceipt with it never resolves until enough
+// signers approve and someone broadcasts. We detect Safe to skip the receipt
+// wait and tell the user to finish signing in app.safe.global.
+
+interface WalletMetadata {
+  name?: string
+  url?: string
+}
+
+// Pure check for a WalletConnect peer metadata object — kept separate so it
+// can be unit tested without spinning up a wagmi connector. Matches both the
+// name ("Safe{Wallet}", "Safe Wallet", etc.) and the url (safe.global) so we
+// stay robust to Safe rebranding the metadata name.
+export function isSafeByMetadata(meta: WalletMetadata | null | undefined): boolean {
+  if (!meta) return false
+  const name = meta.name?.toLowerCase() ?? ''
+  const url = meta.url?.toLowerCase() ?? ''
+  return name.includes('safe') || url.includes('safe.global')
+}
+
+// Synchronous fast path. Catches:
+//   1. The wagmi Safe connector (id 'safe'), used when our dApp is embedded
+//      inside app.safe.global as a Safe App.
+//   2. Any connector whose own .name happens to report as Safe.
+// Does NOT catch Safe-over-WalletConnect — for that case the WC peer metadata
+// lives behind connector.getProvider() and must be read asynchronously. See
+// useIsSafeWallet().
+export function isSafeConnectorSync(
+  connector: { id?: string; name?: string } | null | undefined,
+): boolean {
+  if (!connector) return false
+  if (connector.id?.toLowerCase() === 'safe') return true
+  return isSafeByMetadata({ name: connector.name })
+}
+
+// Safety-net timeout for waitForTransactionReceipt with EOAs. A normal mainnet
+// TX confirms in seconds; if we're still waiting after 5 minutes something is
+// stuck (RPC issue, dropped TX, undetected smart-contract wallet) and it's
+// better to release the UI than freeze on a spinner.
+export const RECEIPT_TIMEOUT_MS = 5 * 60 * 1000
diff --git a/src/pages/NewOperation.tsx b/src/pages/NewOperation.tsx
index 39fb497..c227721 100644
--- a/src/pages/NewOperation.tsx
+++ b/src/pages/NewOperation.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ArrowLeft } from 'lucide-react'
 import { OperationForm } from '../components/OperationForm'
@@ -19,34 +18,6 @@ export function NewOperation() {
     activeTimelock?.chainId,
   )
 
-  // Latch: once we've confirmed the wallet has PROPOSER_ROLE and read a
-  // minDelay, hold on to those values. A flaky RPC can make hasRole/getMinDelay
-  // briefly return error/false on a refetch, and we don't want that to unmount
-  // the form (which would wipe everything the user typed).
-  const [confirmedProposer, setConfirmedProposer] = useState(false)
-  const [stableMinDelay, setStableMinDelay] = useState<bigint | null>(null)
-
-  // The latch is scoped to (wallet, timelock, chain). When any of those change
-  // the previous confirmation no longer applies — a different wallet may not
-  // have the role, a different timelock has its own AccessControl state, and
-  // a different chain queries a different contract entirely. Reset during
-  // render so the next paint already reflects the new session.
-  const sessionKey = `${userAddress ?? ''}|${activeTimelock?.address ?? ''}|${activeTimelock?.chainId ?? ''}`
-  const [prevSessionKey, setPrevSessionKey] = useState(sessionKey)
-  if (prevSessionKey !== sessionKey) {
-    setPrevSessionKey(sessionKey)
-    setConfirmedProposer(false)
-    setStableMinDelay(null)
-  }
-
-  useEffect(() => {
-    if (roles.isProposer) setConfirmedProposer(true)
-  }, [roles.isProposer])
-
-  useEffect(() => {
-    if (minDelay !== null) setStableMinDelay(minDelay)
-  }, [minDelay])
-
   if (!activeTimelock) {
     return (
       <div className="py-8">
@@ -69,10 +40,7 @@ export function NewOperation() {
     )
   }
 
-  // Don't show the "no PROPOSER_ROLE" warning while we're still loading, and
-  // don't show it after a successful confirmation — only show it if we've
-  // received a response and it confirmed the role is missing.
-  if (isLoading && !confirmedProposer) {
+  if (isLoading && !roles.isProposer) {
     return (
       <div className="py-8">
         <p className="text-gray-400">Checking permissions…</p>
@@ -80,7 +48,7 @@ export function NewOperation() {
     )
   }
 
-  if (!roles.isProposer && !confirmedProposer) {
+  if (!roles.isProposer) {
     return (
       <div className="py-8">
         <p className="text-yellow-400">
@@ -91,8 +59,6 @@ export function NewOperation() {
     )
   }
 
-  const effectiveMinDelay = stableMinDelay ?? minDelay
-
   return (
     <div className="py-8 space-y-6">
       <div className="flex items-center gap-3">
@@ -106,8 +72,8 @@ export function NewOperation() {
           <h1 className="text-xl font-bold text-gray-100">New operation</h1>
           <p className="text-sm text-gray-500">
             {activeTimelock.name} ·{' '}
-            {effectiveMinDelay !== null
-              ? `minDelay: ${effectiveMinDelay}s (${formatDelay(effectiveMinDelay)})`
+            {minDelay !== null
+              ? `minDelay: ${minDelay}s (${formatDelay(minDelay)})`
               : '…'}
           </p>
         </div>
@@ -117,8 +83,15 @@ export function NewOperation() {
         <OperationForm
           timelockAddress={activeTimelock.address}
           chainId={activeTimelock.chainId}
-          minDelay={effectiveMinDelay ?? 0n}
-          onScheduled={() => navigate('/', { state: { scheduledOk: true } })}
+          minDelay={minDelay ?? 0n}
+          onScheduled={(opts) =>
+            navigate('/', {
+              state: {
+                scheduledOk: true,
+                needsSafeSignatures: opts?.needsSafeSignatures ?? false,
+              },
+            })
+          }
           onCancel={() => navigate('/')}
         />
       </div>
diff --git a/src/pages/Operations.tsx b/src/pages/Operations.tsx
index a11db5a..397be50 100644
--- a/src/pages/Operations.tsx
+++ b/src/pages/Operations.tsx
@@ -42,7 +42,13 @@ export function Operations() {
 
   useEffect(() => {
     if (location.state?.scheduledOk) {
-      setToast({ message: 'Operation scheduled successfully', type: 'success' })
+      const needsSafe = Boolean(location.state.needsSafeSignatures)
+      setToast({
+        message: needsSafe
+          ? 'Operation sent to Safe. Confirm signatures at app.safe.global to schedule on-chain.'
+          : 'Operation scheduled successfully',
+        type: needsSafe ? 'info' : 'success',
+      })
       navigate('/', { replace: true, state: {} })
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps

From 2eacc1c845a47022fb8e0e51e5a5766495817d75 Mon Sep 17 00:00:00 2001
From: Anto <antoniotg96@gmail.com>
Date: Tue, 19 May 2026 21:02:10 +0200
Subject: [PATCH 2/3] fix(safe): handle Safe-over-WC flows + role-read latch
 (1.1.1)

---
 src/components/OperationCard.tsx    |  14 ++-
 src/components/OperationForm.tsx    |   6 +-
 src/hooks/useIsSafeWallet.test.tsx  | 130 +++++++++++++++-------------
 src/hooks/useIsSafeWallet.ts        |   7 +-
 src/hooks/useTimelockRoles.test.tsx |  27 +++++-
 src/hooks/useTimelockRoles.ts       |  74 +++++++++-------
 src/lib/connectors.test.ts          |  58 ++++++++++---
 src/lib/connectors.ts               |  34 ++++++--
 8 files changed, 237 insertions(+), 113 deletions(-)

diff --git a/src/components/OperationCard.tsx b/src/components/OperationCard.tsx
index 80fc430..c707ff9 100644
--- a/src/components/OperationCard.tsx
+++ b/src/components/OperationCard.tsx
@@ -79,7 +79,13 @@ export function OperationCard({ operation, explorerUrl, onPatched, onToast }: Pr
         value: BigInt(operation.value),
         chainId: operation.chainId,
       })
-      onPatched(operation.id, { executeTxHash: hash })
+      // Only persist a real Ethereum tx hash. The Safe flow returns a
+      // Safe-tx-hash that would render as a broken explorer link; the
+      // on-chain hash will be picked up by the chain scan after signers
+      // execute the multisig.
+      if (!safeFlow) {
+        onPatched(operation.id, { executeTxHash: hash })
+      }
 
       if (safeFlow) {
         onToast({
@@ -116,7 +122,11 @@ export function OperationCard({ operation, explorerUrl, onPatched, onToast }: Pr
         args: [operation.id],
         chainId: operation.chainId,
       })
-      onPatched(operation.id, { cancelTxHash: hash })
+      // See execute: avoid storing a Safe-tx-hash in a field rendered as an
+      // explorer link.
+      if (!safeFlow) {
+        onPatched(operation.id, { cancelTxHash: hash })
+      }
 
       if (safeFlow) {
         onToast({
diff --git a/src/components/OperationForm.tsx b/src/components/OperationForm.tsx
index 87ca311..59710d8 100644
--- a/src/components/OperationForm.tsx
+++ b/src/components/OperationForm.tsx
@@ -119,7 +119,11 @@ export function OperationForm({ timelockAddress, chainId, minDelay, onScheduled,
         source: 'local',
         methodSignature: rawMode ? undefined : signature,
         scheduledAt: Date.now(),
-        scheduleTxHash: hash,
+        // Only store as scheduleTxHash if it's a real Ethereum tx hash. Safe
+        // returns a Safe-tx-hash which would produce a broken explorer link;
+        // the on-chain tx hash gets populated later by the chain scan once
+        // signers execute the multisig.
+        scheduleTxHash: safeFlow ? undefined : hash,
       }
 
       upsertOperation(op)
diff --git a/src/hooks/useIsSafeWallet.test.tsx b/src/hooks/useIsSafeWallet.test.tsx
index 85a4906..7e59285 100644
--- a/src/hooks/useIsSafeWallet.test.tsx
+++ b/src/hooks/useIsSafeWallet.test.tsx
@@ -10,12 +10,11 @@ vi.mock('wagmi', () => ({
 
 import { useIsSafeWallet } from './useIsSafeWallet'
 
-// Returns a fake "live" connector — the kind useConnections() yields once a
-// wallet is connected, including the getProvider instance method.
 function liveConnector(opts: {
   id: string
   name: string
   type?: string
+  uid?: string
   provider?: any
   getProvider?: () => Promise<any>
 }) {
@@ -23,7 +22,7 @@ function liveConnector(opts: {
     id: opts.id,
     name: opts.name,
     type: opts.type ?? opts.id,
-    uid: 'uid-test',
+    uid: opts.uid ?? 'uid-test',
     getProvider:
       opts.getProvider ??
       (async () => opts.provider ?? { session: { peer: { metadata: {} } } }),
@@ -52,20 +51,14 @@ describe('useIsSafeWallet', () => {
   })
 
   it('stays false for a plain EOA over WalletConnect', async () => {
-    mockUseAccount.mockReturnValue({
-      connector: { id: 'walletConnect', name: 'WalletConnect', type: 'walletConnect' },
+    const conn = liveConnector({
+      id: 'walletConnect',
+      name: 'WalletConnect',
+      uid: 'uid-wc',
+      provider: { session: { peer: { metadata: { name: 'Rainbow', url: 'https://rainbow.me' } } } },
     })
-    mockUseConnections.mockReturnValue([
-      {
-        connector: liveConnector({
-          id: 'walletConnect',
-          name: 'WalletConnect',
-          provider: {
-            session: { peer: { metadata: { name: 'Rainbow', url: 'https://rainbow.me' } } },
-          },
-        }),
-      },
-    ])
+    mockUseAccount.mockReturnValue({ connector: { id: 'walletConnect', name: 'WalletConnect', uid: 'uid-wc' } })
+    mockUseConnections.mockReturnValue([{ connector: conn }])
     const { result } = renderHook(() => useIsSafeWallet())
     expect(result.current).toBe(false)
     await new Promise((r) => setTimeout(r, 10))
@@ -73,51 +66,68 @@ describe('useIsSafeWallet', () => {
   })
 
   it('flips to true once Safe is detected via WalletConnect peer metadata', async () => {
-    mockUseAccount.mockReturnValue({
-      connector: { id: 'walletConnect', name: 'WalletConnect', type: 'walletConnect' },
-    })
-    mockUseConnections.mockReturnValue([
-      {
-        connector: liveConnector({
-          id: 'walletConnect',
-          name: 'WalletConnect',
-          provider: {
-            session: {
-              peer: {
-                metadata: { name: 'Safe{Wallet}', url: 'https://app.safe.global' },
-              },
-            },
-          },
-        }),
+    const conn = liveConnector({
+      id: 'walletConnect',
+      name: 'WalletConnect',
+      uid: 'uid-wc',
+      provider: {
+        session: {
+          peer: { metadata: { name: 'Safe{Wallet}', url: 'https://app.safe.global' } },
+        },
       },
-    ])
+    })
+    mockUseAccount.mockReturnValue({ connector: { id: 'walletConnect', name: 'WalletConnect', uid: 'uid-wc' } })
+    mockUseConnections.mockReturnValue([{ connector: conn }])
     const { result } = renderHook(() => useIsSafeWallet())
-    expect(result.current).toBe(false) // sync answer before the async probe lands
+    expect(result.current).toBe(false)
     await waitFor(() => expect(result.current).toBe(true))
   })
 
-  it('detects Safe even when only the metadata url gives it away', async () => {
-    mockUseAccount.mockReturnValue({
-      connector: { id: 'walletConnect', name: 'WalletConnect', type: 'walletConnect' },
+  it('rejects SafePal even over WC (no false positive on look-alikes)', async () => {
+    const conn = liveConnector({
+      id: 'walletConnect',
+      name: 'WalletConnect',
+      uid: 'uid-wc',
+      provider: { session: { peer: { metadata: { name: 'SafePal', url: 'https://safepal.com' } } } },
     })
-    mockUseConnections.mockReturnValue([
-      {
-        connector: liveConnector({
-          id: 'walletConnect',
-          name: 'WalletConnect',
-          provider: {
-            session: { peer: { metadata: { name: 'Unknown', url: 'https://app.safe.global' } } },
-          },
-        }),
+    mockUseAccount.mockReturnValue({ connector: { id: 'walletConnect', name: 'WalletConnect', uid: 'uid-wc' } })
+    mockUseConnections.mockReturnValue([{ connector: conn }])
+    const { result } = renderHook(() => useIsSafeWallet())
+    await new Promise((r) => setTimeout(r, 10))
+    expect(result.current).toBe(false)
+  })
+
+  it('picks the connection that matches the active account uid', async () => {
+    // Two simultaneous connections: an injected EOA and a Safe-over-WC. The
+    // active account is the WC one — we must read THAT peer metadata, not
+    // the injected one's.
+    const injected = liveConnector({
+      id: 'injected',
+      name: 'MetaMask',
+      uid: 'uid-injected',
+      provider: { session: { peer: { metadata: { name: 'MetaMask' } } } },
+    })
+    const safeWc = liveConnector({
+      id: 'walletConnect',
+      name: 'WalletConnect',
+      uid: 'uid-safe-wc',
+      provider: {
+        session: {
+          peer: { metadata: { name: 'Safe{Wallet}', url: 'https://app.safe.global' } },
+        },
       },
-    ])
+    })
+    mockUseAccount.mockReturnValue({
+      connector: { id: 'walletConnect', name: 'WalletConnect', uid: 'uid-safe-wc' },
+    })
+    mockUseConnections.mockReturnValue([{ connector: injected }, { connector: safeWc }])
     const { result } = renderHook(() => useIsSafeWallet())
     await waitFor(() => expect(result.current).toBe(true))
   })
 
   it('does not crash if the live connector lacks getProvider (descriptor only)', async () => {
     mockUseAccount.mockReturnValue({
-      connector: { id: 'walletConnect', name: 'WalletConnect', type: 'walletConnect' },
+      connector: { id: 'walletConnect', name: 'WalletConnect', uid: 'uid-wc' },
     })
     mockUseConnections.mockReturnValue([
       {
@@ -125,7 +135,7 @@ describe('useIsSafeWallet', () => {
           id: 'walletConnect',
           name: 'WalletConnect',
           type: 'walletConnect',
-          uid: 'uid-x',
+          uid: 'uid-wc',
         },
       },
     ])
@@ -135,20 +145,16 @@ describe('useIsSafeWallet', () => {
   })
 
   it('does not crash if getProvider throws', async () => {
-    mockUseAccount.mockReturnValue({
-      connector: { id: 'walletConnect', name: 'WalletConnect', type: 'walletConnect' },
-    })
-    mockUseConnections.mockReturnValue([
-      {
-        connector: liveConnector({
-          id: 'walletConnect',
-          name: 'WalletConnect',
-          getProvider: async () => {
-            throw new Error('provider not ready')
-          },
-        }),
+    const conn = liveConnector({
+      id: 'walletConnect',
+      name: 'WalletConnect',
+      uid: 'uid-wc',
+      getProvider: async () => {
+        throw new Error('provider not ready')
       },
-    ])
+    })
+    mockUseAccount.mockReturnValue({ connector: { id: 'walletConnect', name: 'WalletConnect', uid: 'uid-wc' } })
+    mockUseConnections.mockReturnValue([{ connector: conn }])
     const { result } = renderHook(() => useIsSafeWallet())
     await new Promise((r) => setTimeout(r, 10))
     expect(result.current).toBe(false)
diff --git a/src/hooks/useIsSafeWallet.ts b/src/hooks/useIsSafeWallet.ts
index a5093f8..c429a07 100644
--- a/src/hooks/useIsSafeWallet.ts
+++ b/src/hooks/useIsSafeWallet.ts
@@ -23,7 +23,12 @@ import { isSafeByMetadata, isSafeConnectorSync } from '../lib/connectors'
 export function useIsSafeWallet(): boolean {
   const { connector: accountConnector } = useAccount()
   const connections = useConnections()
-  const liveConnector = connections[0]?.connector ?? accountConnector
+  // Match the active account's connector by uid. wagmi can hold multiple
+  // connections simultaneously (e.g. an injected wallet plus a WC session),
+  // so picking connections[0] would risk reading the wrong one.
+  const liveConnector =
+    connections.find((c) => c.connector.uid === accountConnector?.uid)?.connector ??
+    accountConnector
 
   const [isSafe, setIsSafe] = useState<boolean>(() => isSafeConnectorSync(accountConnector))
 
diff --git a/src/hooks/useTimelockRoles.test.tsx b/src/hooks/useTimelockRoles.test.tsx
index 29f3886..c9c1052 100644
--- a/src/hooks/useTimelockRoles.test.tsx
+++ b/src/hooks/useTimelockRoles.test.tsx
@@ -6,7 +6,32 @@ vi.mock('wagmi', () => ({
   useReadContracts: () => mockUseReadContracts(),
 }))
 
-import { useTimelockRoles } from './useTimelockRoles'
+import { useTimelockRoles, deriveRoles } from './useTimelockRoles'
+
+describe('deriveRoles (pure)', () => {
+  const empty = { isProposer: false, isExecutor: false, isCanceller: false, isAdmin: false }
+
+  it('returns prev when data is undefined', () => {
+    expect(deriveRoles(empty, undefined)).toBe(empty)
+  })
+
+  it('returns successful reads and falls back to prev on failures', () => {
+    const data = [
+      { status: 'success', result: true },
+      { status: 'failure' },
+      { status: 'success', result: true },
+      { status: 'failure' },
+      { status: 'failure' },
+    ] as const
+    const prev = { isProposer: false, isExecutor: true, isCanceller: false, isAdmin: true }
+    expect(deriveRoles(prev, data)).toEqual({
+      isProposer: true,
+      isExecutor: true, // preserved from prev (failure)
+      isCanceller: true,
+      isAdmin: true, // preserved from prev (failure)
+    })
+  })
+})
 
 const ADDR_TIMELOCK = '0x1111111111111111111111111111111111111111' as `0x${string}`
 const ADDR_USER = '0x2222222222222222222222222222222222222222' as `0x${string}`
diff --git a/src/hooks/useTimelockRoles.ts b/src/hooks/useTimelockRoles.ts
index d5a9adc..18c9436 100644
--- a/src/hooks/useTimelockRoles.ts
+++ b/src/hooks/useTimelockRoles.ts
@@ -17,6 +17,34 @@ const EMPTY_ROLES: TimelockRoles = {
   isAdmin: false,
 }
 
+type ReadResult = ReadonlyArray<{ status: 'success' | 'failure'; result?: unknown }> | undefined
+
+// Pure merge — exported for unit testing. For each field, return the
+// successful read; on failure, fall back to the previous latched value.
+export function deriveRoles(prev: TimelockRoles, data: ReadResult): TimelockRoles {
+  if (!data) return prev
+  return {
+    isProposer: data[0]?.status === 'success' ? (data[0].result as boolean) : prev.isProposer,
+    isExecutor: data[1]?.status === 'success' ? (data[1].result as boolean) : prev.isExecutor,
+    isCanceller: data[2]?.status === 'success' ? (data[2].result as boolean) : prev.isCanceller,
+    isAdmin: data[3]?.status === 'success' ? (data[3].result as boolean) : prev.isAdmin,
+  }
+}
+
+function deriveMinDelay(prev: bigint | null, data: ReadResult): bigint | null {
+  if (!data) return prev
+  return data[4]?.status === 'success' ? (data[4].result as bigint) : prev
+}
+
+function rolesEqual(a: TimelockRoles, b: TimelockRoles): boolean {
+  return (
+    a.isProposer === b.isProposer &&
+    a.isExecutor === b.isExecutor &&
+    a.isCanceller === b.isCanceller &&
+    a.isAdmin === b.isAdmin
+  )
+}
+
 export function useTimelockRoles(
   timelockAddress: `0x${string}` | null,
   userAddress: `0x${string}` | undefined,
@@ -48,12 +76,9 @@ export function useTimelockRoles(
     query: { enabled },
   })
 
-  // Per-field latch: each role/minDelay keeps its last *successful* read.
-  // A failed re-read (RPC hiccup, common on mainnet with Safe) leaves the
-  // latch untouched instead of flipping a confirmed-true role to false and
-  // making the New operation / Execute / Cancel buttons flicker out.
-  // The latch is scoped to (user, timelock, chain) and reset when that tuple
-  // changes, since a different access-control context is a different question.
+  // Per-field latch scoped to (user, timelock, chain). A failed re-read after
+  // a successful one preserves the prior value — keeps the New operation /
+  // Execute / Cancel buttons from flickering when the RPC hiccups.
   const sessionKey = `${userAddress ?? ''}|${timelockAddress ?? ''}|${chainId ?? ''}`
   const [prevSessionKey, setPrevSessionKey] = useState(sessionKey)
   const [latchedRoles, setLatchedRoles] = useState<TimelockRoles>(EMPTY_ROLES)
@@ -64,37 +89,28 @@ export function useTimelockRoles(
     setLatchedMinDelay(null)
   }
 
+  // Derive in render — the very first render after `data` arrives must
+  // already reflect the successful reads. Computing only in useEffect would
+  // leave one render where roles look empty, briefly hiding role-gated UI
+  // (New operation / Execute / Cancel) on the path users see most often.
+  const liveRoles = deriveRoles(latchedRoles, data)
+  const liveMinDelay = deriveMinDelay(latchedMinDelay, data)
+
+  // Persist the latch for subsequent renders. The render-time `liveRoles`
+  // already shows the right value; this effect just keeps the latch in sync
+  // for when `data` later becomes undefined or partially fails.
   useEffect(() => {
     if (!data) return
     setLatchedRoles((prev) => {
-      const next: TimelockRoles = {
-        isProposer: data[0]?.status === 'success' ? (data[0].result as boolean) : prev.isProposer,
-        isExecutor: data[1]?.status === 'success' ? (data[1].result as boolean) : prev.isExecutor,
-        isCanceller: data[2]?.status === 'success' ? (data[2].result as boolean) : prev.isCanceller,
-        isAdmin: data[3]?.status === 'success' ? (data[3].result as boolean) : prev.isAdmin,
-      }
-      if (
-        next.isProposer === prev.isProposer &&
-        next.isExecutor === prev.isExecutor &&
-        next.isCanceller === prev.isCanceller &&
-        next.isAdmin === prev.isAdmin
-      ) {
-        return prev
-      }
-      return next
+      const next = deriveRoles(prev, data)
+      return rolesEqual(prev, next) ? prev : next
     })
-    if (data[4]?.status === 'success') {
-      setLatchedMinDelay(data[4].result as bigint)
-    }
+    setLatchedMinDelay((prev) => deriveMinDelay(prev, data))
   }, [data])
 
   if (!enabled) {
     return { roles: EMPTY_ROLES, isLoading, minDelay: null }
   }
 
-  return {
-    roles: latchedRoles,
-    isLoading,
-    minDelay: latchedMinDelay,
-  }
+  return { roles: liveRoles, isLoading, minDelay: liveMinDelay }
 }
diff --git a/src/lib/connectors.test.ts b/src/lib/connectors.test.ts
index 8ec9749..c98b26a 100644
--- a/src/lib/connectors.test.ts
+++ b/src/lib/connectors.test.ts
@@ -2,34 +2,60 @@ import { describe, it, expect } from 'vitest'
 import { isSafeByMetadata, isSafeConnectorSync } from './connectors'
 
 describe('isSafeByMetadata', () => {
-  it('returns false for null / undefined', () => {
+  it('returns false for null / undefined / empty', () => {
     expect(isSafeByMetadata(null)).toBe(false)
     expect(isSafeByMetadata(undefined)).toBe(false)
-  })
-
-  it('returns false for an empty object', () => {
     expect(isSafeByMetadata({})).toBe(false)
   })
 
-  it('matches name "Safe{Wallet}" (current Safe branding)', () => {
+  // --- Matches by name (Safe's published wallet names) ---
+  it('matches "Safe{Wallet}" (current Safe branding)', () => {
     expect(isSafeByMetadata({ name: 'Safe{Wallet}' })).toBe(true)
   })
 
-  it('matches legacy "Safe Wallet" name', () => {
+  it('matches "Safe Wallet" (legacy)', () => {
     expect(isSafeByMetadata({ name: 'Safe Wallet' })).toBe(true)
   })
 
-  it('is case-insensitive', () => {
+  it('matches plain "Safe"', () => {
+    expect(isSafeByMetadata({ name: 'Safe' })).toBe(true)
+  })
+
+  it('matches "Safe Multisig" and "Gnosis Safe" (legacy names)', () => {
+    expect(isSafeByMetadata({ name: 'Safe Multisig' })).toBe(true)
+    expect(isSafeByMetadata({ name: 'Gnosis Safe' })).toBe(true)
+  })
+
+  it('is case-insensitive and tolerates surrounding whitespace', () => {
     expect(isSafeByMetadata({ name: 'SAFE{WALLET}' })).toBe(true)
-    expect(isSafeByMetadata({ name: 'safe' })).toBe(true)
+    expect(isSafeByMetadata({ name: '  safe wallet  ' })).toBe(true)
   })
 
-  it('matches when only the url points to safe.global', () => {
+  // --- Matches by url (Safe's official domain) ---
+  it('matches app.safe.global url', () => {
     expect(isSafeByMetadata({ name: 'Unknown', url: 'https://app.safe.global' })).toBe(true)
   })
 
   it('matches any subdomain of safe.global', () => {
     expect(isSafeByMetadata({ url: 'https://staging.safe.global' })).toBe(true)
+    expect(isSafeByMetadata({ url: 'https://safe.global' })).toBe(true)
+  })
+
+  // --- Rejects look-alikes ---
+  it('does NOT match SafePal (a real EOA wallet)', () => {
+    expect(isSafeByMetadata({ name: 'SafePal', url: 'https://safepal.com' })).toBe(false)
+  })
+
+  it('does NOT match other "safe-*" wallets', () => {
+    expect(isSafeByMetadata({ name: 'SafeMoon Wallet' })).toBe(false)
+    expect(isSafeByMetadata({ name: 'Safeguard' })).toBe(false)
+    expect(isSafeByMetadata({ name: 'Safe Pal' })).toBe(false)
+  })
+
+  it('does NOT match phishing-style urls', () => {
+    expect(isSafeByMetadata({ url: 'https://safe.global.attacker.com' })).toBe(false)
+    expect(isSafeByMetadata({ url: 'https://safeglobal.com' })).toBe(false)
+    expect(isSafeByMetadata({ url: 'https://notsafe.global.io' })).toBe(false)
   })
 
   it('does not match unrelated wallets', () => {
@@ -37,6 +63,11 @@ describe('isSafeByMetadata', () => {
     expect(isSafeByMetadata({ name: 'Rainbow', url: 'https://rainbow.me' })).toBe(false)
     expect(isSafeByMetadata({ name: 'WalletConnect' })).toBe(false)
   })
+
+  it('handles malformed urls without throwing', () => {
+    expect(isSafeByMetadata({ url: 'not a url' })).toBe(false)
+    expect(isSafeByMetadata({ name: 'Random', url: '' })).toBe(false)
+  })
 })
 
 describe('isSafeConnectorSync', () => {
@@ -49,14 +80,19 @@ describe('isSafeConnectorSync', () => {
     expect(isSafeConnectorSync({ id: 'safe', name: 'Safe' })).toBe(true)
   })
 
-  it('matches a connector whose name contains "safe"', () => {
+  it('matches a connector whose name is exactly Safe{Wallet}', () => {
     expect(isSafeConnectorSync({ id: 'custom', name: 'Safe{Wallet}' })).toBe(true)
   })
 
-  it('does NOT match plain WalletConnect (the Safe-over-WC case needs peer metadata)', () => {
+  it('does NOT match plain WalletConnect (Safe-over-WC needs peer metadata)', () => {
     expect(isSafeConnectorSync({ id: 'walletConnect', name: 'WalletConnect' })).toBe(false)
   })
 
+  it('does NOT match SafePal or other look-alikes by name', () => {
+    expect(isSafeConnectorSync({ id: 'safepal', name: 'SafePal' })).toBe(false)
+    expect(isSafeConnectorSync({ id: 'safemoon', name: 'SafeMoon Wallet' })).toBe(false)
+  })
+
   it('does not match common EOA connectors', () => {
     expect(isSafeConnectorSync({ id: 'metaMask', name: 'MetaMask' })).toBe(false)
     expect(isSafeConnectorSync({ id: 'injected', name: 'Browser Wallet' })).toBe(false)
diff --git a/src/lib/connectors.ts b/src/lib/connectors.ts
index 2d0f092..c9b1479 100644
--- a/src/lib/connectors.ts
+++ b/src/lib/connectors.ts
@@ -12,14 +12,36 @@ interface WalletMetadata {
 }
 
 // Pure check for a WalletConnect peer metadata object — kept separate so it
-// can be unit tested without spinning up a wagmi connector. Matches both the
-// name ("Safe{Wallet}", "Safe Wallet", etc.) and the url (safe.global) so we
-// stay robust to Safe rebranding the metadata name.
+// can be unit tested without spinning up a wagmi connector. Match rules,
+// designed to exclude unrelated wallets that happen to have "safe" in their
+// name (SafePal, SafeMoon, Safeguard, etc.):
+//
+//   - url hosted under safe.global (or its subdomains) — strong signal,
+//     hard to spoof since the domain is controlled by Safe.
+//   - OR a name that exactly matches one of Safe's published wallet names
+//     (current "Safe{Wallet}", legacy "Safe Wallet", short "Safe", and the
+//     legacy "Safe Multisig" / "Gnosis Safe").
+//
+// Substring "safe" alone is NOT enough — it produced false positives for
+// SafePal & friends, which are EOAs and shouldn't skip receipt polling.
+const SAFE_NAME_PATTERN = /^(safe(\s*\{wallet\}|\s+wallet|\s+multisig)?|gnosis\s+safe)$/i
+
+// Hostname check rather than a substring match: rejects safe.global.attacker.com
+// while still accepting any subdomain Safe owns (app.safe.global, staging…).
+function isSafeGlobalUrl(rawUrl: string): boolean {
+  try {
+    const host = new URL(rawUrl).hostname.toLowerCase()
+    return host === 'safe.global' || host.endsWith('.safe.global')
+  } catch {
+    return false
+  }
+}
+
 export function isSafeByMetadata(meta: WalletMetadata | null | undefined): boolean {
   if (!meta) return false
-  const name = meta.name?.toLowerCase() ?? ''
-  const url = meta.url?.toLowerCase() ?? ''
-  return name.includes('safe') || url.includes('safe.global')
+  const name = meta.name?.trim() ?? ''
+  if (meta.url && isSafeGlobalUrl(meta.url)) return true
+  return SAFE_NAME_PATTERN.test(name)
 }
 
 // Synchronous fast path. Catches:

From aedecd363f3cba2a5e5947af823aba60a4f8c6b2 Mon Sep 17 00:00:00 2001
From: Anto <antoniotg96@gmail.com>
Date: Tue, 19 May 2026 21:08:02 +0200
Subject: [PATCH 3/3] fix: Safe-over-WC support + role-read latch +
 receipt-pending toasts (1.1.1)

---
 src/components/OperationForm.tsx | 12 +++++++-----
 src/pages/NewOperation.tsx       |  1 +
 src/pages/Operations.tsx         | 20 ++++++++++++++------
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/OperationForm.tsx b/src/components/OperationForm.tsx
index 59710d8..c7130a8 100644
--- a/src/components/OperationForm.tsx
+++ b/src/components/OperationForm.tsx
@@ -14,7 +14,7 @@ interface Props {
   timelockAddress: `0x${string}`
   chainId: number
   minDelay: bigint
-  onScheduled: (opts?: { needsSafeSignatures?: boolean }) => void
+  onScheduled: (opts?: { needsSafeSignatures?: boolean; receiptPending?: boolean }) => void
   onCancel: () => void
 }
 
@@ -137,14 +137,16 @@ export function OperationForm({ timelockAddress, chainId, minDelay, onScheduled,
         return
       }
 
+      // Wait for the schedule TX to confirm. On timeout or transient RPC
+      // error we don't *know* whether the TX landed — it may still confirm,
+      // it may have been dropped or replaced. Report that uncertainty to
+      // the user instead of claiming success.
       try {
         await client?.waitForTransactionReceipt({ hash, timeout: RECEIPT_TIMEOUT_MS })
+        onScheduled()
       } catch {
-        // Timeout or transient RPC error — the schedule TX may still confirm
-        // later. The op is stored with its scheduleTxHash so the user can
-        // verify in the explorer; better to release the UI than freeze it.
+        onScheduled({ receiptPending: true })
       }
-      onScheduled()
     } catch (e: any) {
       setTxError(e?.shortMessage ?? e?.message ?? 'Unknown error')
       setIsSubmitting(false)
diff --git a/src/pages/NewOperation.tsx b/src/pages/NewOperation.tsx
index c227721..ed57142 100644
--- a/src/pages/NewOperation.tsx
+++ b/src/pages/NewOperation.tsx
@@ -89,6 +89,7 @@ export function NewOperation() {
               state: {
                 scheduledOk: true,
                 needsSafeSignatures: opts?.needsSafeSignatures ?? false,
+                receiptPending: opts?.receiptPending ?? false,
               },
             })
           }
diff --git a/src/pages/Operations.tsx b/src/pages/Operations.tsx
index 397be50..58fe970 100644
--- a/src/pages/Operations.tsx
+++ b/src/pages/Operations.tsx
@@ -43,12 +43,20 @@ export function Operations() {
   useEffect(() => {
     if (location.state?.scheduledOk) {
       const needsSafe = Boolean(location.state.needsSafeSignatures)
-      setToast({
-        message: needsSafe
-          ? 'Operation sent to Safe. Confirm signatures at app.safe.global to schedule on-chain.'
-          : 'Operation scheduled successfully',
-        type: needsSafe ? 'info' : 'success',
-      })
+      const receiptPending = Boolean(location.state.receiptPending)
+      let message: string
+      let type: 'info' | 'success'
+      if (needsSafe) {
+        message = 'Operation sent to Safe. Confirm signatures at app.safe.global to schedule on-chain.'
+        type = 'info'
+      } else if (receiptPending) {
+        message = 'Schedule submitted but receipt not seen yet. Check the explorer in a moment.'
+        type = 'info'
+      } else {
+        message = 'Operation scheduled successfully'
+        type = 'success'
+      }
+      setToast({ message, type })
       navigate('/', { replace: true, state: {} })
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps