feat: basic gnosis pay support

src/components/common/CheckWallet/index.tsx

@@ -4,11 +4,13 @@ import useIsOnlySpendingLimitBeneficiary from '@/hooks/useIsOnlySpendingLimitBen
 import useIsSafeOwner from '@/hooks/useIsSafeOwner'
 import useWallet from '@/hooks/wallets/useWallet'
 import useConnectWallet from '../ConnectWallet/useConnectWallet'
+import { useIsGnosisPayOwner } from '@/features/gnosispay/hooks/useIsGnosisPayOwner'
 
 type CheckWalletProps = {
   children: (ok: boolean) => ReactElement
   allowSpendingLimit?: boolean
   allowNonOwner?: boolean
+  allowGnosisPayOwner?: boolean
   noTooltip?: boolean
 }
 
@@ -17,14 +19,25 @@ enum Message {
   NotSafeOwner = 'Your connected wallet is not a signer of this Safe Account',
 }
 
-const CheckWallet = ({ children, allowSpendingLimit, allowNonOwner, noTooltip }: CheckWalletProps): ReactElement => {
+const CheckWallet = ({
+  children,
+  allowSpendingLimit,
+  allowNonOwner,
+  noTooltip,
+  allowGnosisPayOwner,
+}: CheckWalletProps): ReactElement => {
   const wallet = useWallet()
   const isSafeOwner = useIsSafeOwner()
   const isSpendingLimit = useIsOnlySpendingLimitBeneficiary()
+  const [isGnosisPayOwner] = useIsGnosisPayOwner()
   const connectWallet = useConnectWallet()
 
   const message =
-    wallet && (isSafeOwner || allowNonOwner || (isSpendingLimit && allowSpendingLimit))
+    wallet &&
+    (isSafeOwner ||
+      allowNonOwner ||
+      (isSpendingLimit && allowSpendingLimit) ||
+      (allowGnosisPayOwner && Boolean(isGnosisPayOwner)))
       ? ''
       : !wallet
       ? Message.WalletNotConnected

src/components/common/CooldownButton/index.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@mui/material'
+import { Button, type ButtonProps } from '@mui/material'
 import { useState, useCallback, useEffect, type ReactNode } from 'react'
 
 // TODO: Extract into a hook so it can be reused for links and not just buttons
@@ -7,8 +7,9 @@ const CooldownButton = ({
   cooldown,
   startDisabled = false,
   children,
-}: {
-  onClick: () => void
+  ...props
+}: ButtonProps & {
+  onClick?: () => void
   startDisabled?: boolean
   cooldown: number // Cooldown in seconds
   children: ReactNode
@@ -30,13 +31,13 @@ const CooldownButton = ({
   const handleClick = () => {
     setLastSendTime(Date.now())
     setRemainingSeconds(cooldown)
-    onClick()
+    onClick?.()
   }
 
   const isDisabled = remainingSeconds > 0
 
   return (
-    <Button onClick={handleClick} variant="contained" size="small" disabled={isDisabled}>
+    <Button onClick={handleClick} variant="contained" size="small" disabled={isDisabled} {...props}>
       <span>
         {children}
         {remainingSeconds > 0 && ` in ${Math.floor(remainingSeconds)}s`}

src/components/sidebar/NewTxButton/index.tsx

@@ -15,7 +15,7 @@ const NewTxButton = (): ReactElement => {
   }
 
   return (
-    <CheckWallet allowSpendingLimit noTooltip>
+    <CheckWallet allowSpendingLimit allowGnosisPayOwner noTooltip>
       {(isOk) =>
         isOk ? (
           <Button

src/components/tx-flow/SafeTxProvider.tsx

@@ -8,7 +8,7 @@ import type { EIP712TypedData } from '@safe-global/safe-gateway-typescript-sdk'
 
 export const SafeTxContext = createContext<{
   safeTx?: SafeTransaction
-  setSafeTx: Dispatch<SetStateAction<SafeTransaction | undefined>>
+  setSafeTx: (tx: SafeTransaction | undefined) => void
 
   safeMessage?: EIP712TypedData
   setSafeMessage: Dispatch<SetStateAction<EIP712TypedData | undefined>>

src/components/tx/SignOrExecuteForm/index.tsx

@@ -27,6 +27,8 @@ import { TX_EVENTS } from '@/services/analytics/events/transactions'
 import { trackEvent } from '@/services/analytics'
 import useChainId from '@/hooks/useChainId'
 import PermissionsCheck from './PermissionsCheck'
+import { useIsGnosisPayOwner } from '@/features/gnosispay/hooks/useIsGnosisPayOwner'
+import GnosisPayExecutionForm from '@/features/gnosispay/GnosisPayExecutionForm'
 
 export type SubmitCallback = (txId: string, isExecuted?: boolean) => void
 
@@ -78,6 +80,8 @@ export const SignOrExecuteForm = ({
   const { safe } = useSafeInfo()
   const isCounterfactualSafe = !safe.deployed
 
+  const [isGnosisPayOwner] = useIsGnosisPayOwner()
+
   // If checkbox is checked and the transaction is executable, execute it, otherwise sign it
   const canExecute = isCorrectNonce && (props.isExecutable || isNewExecutableTx)
   const willExecute = (props.onlyExecute || shouldExecute) && canExecute
@@ -138,15 +142,19 @@ export const SignOrExecuteForm = ({
           </ErrorMessage>
         )}
 
-        {canExecute && !props.onlyExecute && !isCounterfactualSafe && <ExecuteCheckbox onChange={setShouldExecute} />}
+        {canExecute && !props.onlyExecute && !isCounterfactualSafe && !isGnosisPayOwner && (
+          <ExecuteCheckbox onChange={setShouldExecute} />
+        )}
 
         <WrongChainWarning />
 
         <UnknownContractError />
 
         <RiskConfirmationError />
 
-        {isCounterfactualSafe ? (
+        {isGnosisPayOwner ? (
+          <GnosisPayExecutionForm {...props} safeTx={safeTx} onSubmit={onFormSubmit} />
+        ) : isCounterfactualSafe ? (
           <CounterfactualForm {...props} safeTx={safeTx} isCreation={isCreation} onSubmit={onFormSubmit} onlyExecute />
         ) : willExecute ? (
           <ExecuteForm {...props} safeTx={safeTx} isCreation={isCreation} onSubmit={onFormSubmit} />

src/features/gnosispay/ExecuteGnosisPayTx.tsx

@@ -0,0 +1,51 @@
+import TxCard from '@/components/tx-flow/common/TxCard'
+import TxLayout from '@/components/tx-flow/common/TxLayout'
+import GnosisPayExecutionForm from './GnosisPayExecutionForm'
+import { type GnosisPayTxItem } from '@/store/gnosisPayTxsSlice'
+import useAsync from '@/hooks/useAsync'
+import { useContext, useEffect } from 'react'
+import { SafeTxContext } from '@/components/tx-flow/SafeTxProvider'
+import useDecodeTx from '@/hooks/useDecodeTx'
+import DecodedTx from '@/components/tx/DecodedTx'
+import { RedefineBalanceChanges } from '@/components/tx/security/redefine/RedefineBalanceChange'
+import { createTx } from '@/services/tx/tx-sender'
+
+const ExecuteGnosisPayModal = ({ gnosisPayTx }: { gnosisPayTx: GnosisPayTxItem }) => {
+  const { safeTx, setSafeTx } = useContext(SafeTxContext)
+
+  const [fakeSafeTx] = useAsync(() => {
+    return createTx(gnosisPayTx.safeTxData)
+  }, [gnosisPayTx])
+
+  useEffect(() => {
+    if (fakeSafeTx) {
+      setSafeTx(fakeSafeTx)
+    }
+  }, [fakeSafeTx, setSafeTx])
+
+  const [decodedData, decodedDataError, decodedDataLoading] = useDecodeTx(safeTx)
+  return (
+    <TxCard>
+      <DecodedTx
+        tx={safeTx}
+        decodedData={decodedData}
+        decodedDataError={decodedDataError}
+        decodedDataLoading={decodedDataLoading}
+      />
+
+      <RedefineBalanceChanges />
+
+      <GnosisPayExecutionForm queuedGnosisPayTx={gnosisPayTx} isExecutable onlyExecute />
+    </TxCard>
+  )
+}
+
+const ExecuteGnosisPayTx = ({ gnosisPayTx }: { gnosisPayTx: GnosisPayTxItem }) => {
+  return (
+    <TxLayout title="Execute Gnosis Pay transaction" step={0}>
+      <ExecuteGnosisPayModal gnosisPayTx={gnosisPayTx} />
+    </TxLayout>
+  )
+}
+
+export default ExecuteGnosisPayTx