🐛 safe: properly wait for transactions

components/ActiveStream/index.tsx

@@ -20,7 +20,7 @@ import {
 } from '@mui/material';
 import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import { LoadingButton } from '@mui/lab';
 import Image from 'next/image';
 import formatNumber from 'utils/formatNumber';

components/Allowances/RevokeButton.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useState } from 'react';
 import { LoadingButton } from '@mui/lab';
 import { useNetwork, useSwitchNetwork } from 'wagmi';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import { useTranslation } from 'react-i18next';
 import { Allowance } from 'hooks/useAllowances';
 import { useWeb3 } from 'hooks/useWeb3';

components/StakingModal/index.tsx

@@ -36,7 +36,7 @@ import { MAX_UINT256, WEI_PER_ETHER } from 'utils/const';
 import { LoadingButton } from '@mui/lab';
 import { useWeb3 } from 'hooks/useWeb3';
 import { useNetwork, useSwitchNetwork, useSignTypedData, useWalletClient } from 'wagmi';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import { ModalBox, ModalBoxCell, ModalBoxRow } from 'components/common/modal/ModalBox';
 import SocketAssetSelector from 'components/SocketAssetSelector';
 import useSocketAssets from 'hooks/useSocketAssets';

components/VestingInput/index.tsx

@@ -17,7 +17,7 @@ import { TransitionProps } from '@mui/material/transitions';
 import dayjs from 'dayjs';
 import { splitSignature } from '@ethersproject/bytes';
 import { type Hex, formatEther, parseEther } from 'viem';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import { escrowedExaABI } from 'types/abi';
 import { AbiParametersToPrimitiveTypes, ExtractAbiFunction, ExtractAbiFunctionNames } from 'abitype';
 import Draggable from 'react-draggable';

components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/SwitchCollateral/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { CircularProgress, Tooltip, Typography } from '@mui/material';
 import { useNetwork } from 'wagmi';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 
 import StyledSwitch from 'components/Switch';
 import parseHealthFactor from 'utils/parseHealthFactor';

components/governance/Claimable/index.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useMemo } from 'react';
 import { Hex, formatEther, parseEther } from 'viem';
 import Image from 'next/image';
-import { useNetwork, useWaitForTransaction, useSwitchNetwork } from 'wagmi';
+import { useNetwork, useSwitchNetwork } from 'wagmi';
+import useWaitForTransaction from 'hooks/useWaitForTransaction';
 import { Box, Button, Divider, Skeleton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { LoadingButton } from '@mui/lab';

components/governance/Delegation/index.tsx

@@ -21,7 +21,8 @@ import { isAddress, zeroAddress } from 'viem';
 import { formatWallet } from 'utils/utils';
 import { useWeb3 } from 'hooks/useWeb3';
 import { useDelegateRegistryClearDelegate, useDelegateRegistrySetDelegate } from 'types/abi';
-import { mainnet, useEnsAvatar, useEnsName, useNetwork, useSwitchNetwork, useWaitForTransaction } from 'wagmi';
+import { mainnet, useEnsAvatar, useEnsName, useNetwork, useSwitchNetwork } from 'wagmi';
+import useWaitForTransaction from 'hooks/useWaitForTransaction';
 import * as blockies from 'blockies-ts';
 import { useDelegation, usePrepareClearDelegate, usePrepareDelegate } from 'hooks/useDelegateRegistry';
 import formatNumber from 'utils/formatNumber';

components/operations/Faucet/index.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { useAccount, useContractWrite, useWaitForTransaction } from 'wagmi';
+import { useAccount, useContractWrite } from 'wagmi';
+import useWaitForTransaction from 'hooks/useWaitForTransaction';
 import Image from 'next/image';
 import imageToBase64 from 'utils/imageToBase64';
 import { useTranslation } from 'react-i18next';

components/operations/Repay/index.tsx

@@ -27,7 +27,7 @@ import { ETH_ROUTER_SLIPPAGE, WEI_PER_ETHER } from 'utils/const';
 import { CustomError } from 'types/Error';
 import useEstimateGas from 'hooks/useEstimateGas';
 import { formatUnits, parseUnits } from 'viem';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import { gasLimit } from 'utils/gas';
 
 function Repay() {

components/operations/RepayAtMaturity/index.tsx

@@ -36,7 +36,7 @@ import { CustomError } from 'types/Error';
 import useEstimateGas from 'hooks/useEstimateGas';
 import { formatUnits, parseUnits, zeroAddress } from 'viem';
 import dayjs from 'dayjs';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import { gasLimit } from 'utils/gas';
 
 type RepayWithDiscount = {

components/operations/Withdraw/index.tsx

@@ -24,7 +24,7 @@ import { useTranslation } from 'react-i18next';
 import useTranslateOperation from 'hooks/useTranslateOperation';
 import useEstimateGas from 'hooks/useEstimateGas';
 import { formatUnits, parseUnits } from 'viem';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import { gasLimit } from 'utils/gas';
 
 const Withdraw: FC = () => {

components/operations/WithdrawAtMaturity/index.tsx

@@ -30,7 +30,7 @@ import useTranslateOperation from 'hooks/useTranslateOperation';
 import { WEI_PER_ETHER } from 'utils/const';
 import useEstimateGas from 'hooks/useEstimateGas';
 import { formatUnits, parseUnits, zeroAddress } from 'viem';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import { gasLimit } from 'utils/gas';
 
 const WithdrawAtMaturity: FC = () => {

contexts/DebtManagerContext.tsx

@@ -8,7 +8,7 @@ import React, {
   useReducer,
 } from 'react';
 import { useWalletClient } from 'wagmi';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 
 import type { ErrorData } from 'types/Error';
 import type { PopulatedTransaction, Transaction } from 'types/Transaction';

contexts/GetEXAContext.tsx

@@ -58,7 +58,7 @@ import useIsContract from 'hooks/useIsContract';
 import useIsPermit from 'hooks/useIsPermit';
 import usePermit2 from 'hooks/usePermit2';
 import { MAX_UINT256, WEI_PER_ETHER } from 'utils/const';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import dayjs from 'dayjs';
 import { splitSignature } from '@ethersproject/bytes';
 import useDelayedEffect from 'hooks/useDelayedEffect';

contexts/LeveragerContext.tsx

@@ -9,7 +9,7 @@ import React, {
   useMemo,
 } from 'react';
 import { useSignTypedData, usePublicClient } from 'wagmi';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import {
   formatEther,
   formatUnits,

hooks/useApprove.ts

@@ -5,7 +5,7 @@ import { useWeb3 } from './useWeb3';
 import { useOperationContext } from 'contexts/OperationContext';
 import useAccountData from './useAccountData';
 import handleOperationError from 'utils/handleOperationError';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import { useTranslation } from 'react-i18next';
 
 import { MAX_UINT256 } from 'utils/const';

hooks/useBorrow.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 
 import { useOperationContext } from 'contexts/OperationContext';
 import useAccountData from 'hooks/useAccountData';

hooks/useBorrowAtMaturity.ts

@@ -14,7 +14,7 @@ import useAnalytics from './useAnalytics';
 import { WEI_PER_ETHER } from 'utils/const';
 import useEstimateGas from './useEstimateGas';
 import { formatUnits, parseUnits } from 'viem';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import dayjs from 'dayjs';
 import { gasLimit } from 'utils/gas';
 

hooks/useDeposit.ts

@@ -11,7 +11,7 @@ import useAnalytics from './useAnalytics';
 import { CustomError } from 'types/Error';
 import useEstimateGas from './useEstimateGas';
 import { parseUnits } from 'viem';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import { gasLimit } from 'utils/gas';
 
 type Deposit = {

hooks/useDepositAtMaturity.ts

@@ -13,7 +13,7 @@ import { WEI_PER_ETHER } from 'utils/const';
 import { CustomError } from 'types/Error';
 import useEstimateGas from './useEstimateGas';
 import { parseUnits } from 'viem';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import dayjs from 'dayjs';
 import { gasLimit } from 'utils/gas';
 

hooks/useWaitForTransaction.ts

@@ -0,0 +1,65 @@
+// https://github.com/wagmi-dev/wagmi/blob/wagmi@1.4.5/packages/react/src/hooks/transactions/useWaitForTransaction.ts
+import type { WaitForTransactionArgs, WaitForTransactionResult } from '@wagmi/core';
+import type { QueryFunctionContext, UseQueryOptions } from '@tanstack/react-query';
+import { useChainId, useQuery } from 'wagmi';
+import waitForTransaction from 'utils/waitForTransaction';
+
+export type UseWaitForTransactionArgs = Partial<WaitForTransactionArgs>;
+export type UseWaitForTransactionConfig = QueryConfig<WaitForTransactionResult, Error>;
+
+type QueryKeyArgs = Partial<UseWaitForTransactionArgs>;
+type QueryKeyConfig = Pick<UseWaitForTransactionConfig, 'scopeKey'>;
+
+function queryKey({ confirmations, chainId, hash, scopeKey, timeout }: QueryKeyArgs & QueryKeyConfig) {
+  return [{ entity: 'waitForTransaction', confirmations, chainId, hash, scopeKey, timeout }] as const;
+}
+
+function queryFn({ onReplaced }: { onReplaced?: WaitForTransactionArgs['onReplaced'] }) {
+  return ({ queryKey: [{ chainId, confirmations, hash, timeout }] }: QueryFunctionArgs<typeof queryKey>) => {
+    if (!hash) throw new Error('hash is required');
+    return waitForTransaction({ chainId, confirmations, hash, onReplaced, timeout });
+  };
+}
+
+export default function useWaitForTransaction({
+  chainId: chainId_,
+  confirmations,
+  hash,
+  timeout,
+  cacheTime,
+  enabled = true,
+  scopeKey,
+  staleTime,
+  suspense,
+  onError,
+  onReplaced,
+  onSettled,
+  onSuccess,
+}: UseWaitForTransactionArgs & UseWaitForTransactionConfig = {}) {
+  const chainId = useChainId({ chainId: chainId_ });
+
+  return useQuery(queryKey({ chainId, confirmations, hash, scopeKey, timeout }), queryFn({ onReplaced }), {
+    cacheTime,
+    enabled: Boolean(enabled && hash),
+    staleTime,
+    suspense,
+    onError,
+    onSettled,
+    onSuccess,
+  });
+}
+
+type QueryFunctionArgs<T extends (...args: any) => any> = QueryFunctionContext<ReturnType<T>>; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+type QueryConfig<TData, TError, TSelectData = TData> = Pick<
+  UseQueryOptions<TData, TError, TSelectData>,
+  | 'cacheTime'
+  | 'enabled'
+  | 'isDataEqual'
+  | 'staleTime'
+  | 'structuralSharing'
+  | 'suspense'
+  | 'onError'
+  | 'onSettled'
+  | 'onSuccess'
+> & { scopeKey?: string };

pages/vesting.tsx

@@ -10,7 +10,7 @@ import { useUpdateStreams, useEscrowedEXA, useEscrowedEXAReserveRatio } from 'ho
 import { useWeb3 } from 'hooks/useWeb3';
 import { useNetwork, useSwitchNetwork } from 'wagmi';
 import { LoadingButton } from '@mui/lab';
-import { waitForTransaction } from '@wagmi/core';
+import waitForTransaction from 'utils/waitForTransaction';
 import useRewards from 'hooks/useRewards';
 import { useModal } from 'contexts/ModalContext';
 import formatNumber from 'utils/formatNumber';

utils/waitForTransaction.ts

@@ -0,0 +1,20 @@
+import SafeAppsSDK, { TransactionStatus } from '@safe-global/safe-apps-sdk';
+import { getConfig, waitForTransaction as wait, type WaitForTransactionArgs } from '@wagmi/core';
+import type { Hash } from 'viem';
+
+export default async function waitForTransaction(args: WaitForTransactionArgs) {
+  if (getConfig().connector?.id !== 'safe') return wait(args);
+
+  const { txs } = new SafeAppsSDK();
+  const hash = await new Promise<Hash>(function get(resolve, reject) {
+    txs
+      .getBySafeTxHash(args.hash)
+      .then(({ txStatus, txHash }) => {
+        if (txStatus === TransactionStatus.SUCCESS && txHash) resolve(txHash as Hash);
+        else if (txStatus === TransactionStatus.FAILED || txStatus === TransactionStatus.CANCELLED) reject(txStatus);
+        else setTimeout(() => get(resolve, reject), 3_333);
+      })
+      .catch(reject);
+  });
+  return wait({ ...args, hash });
+}