refactor: migrate Transaction component

package.json

@@ -182,10 +182,10 @@
       "default": "./esm/token/index.js"
     },
     "./transaction": {
-      "types": "./esm/transaction/index.d.ts",
-      "module": "./esm/transaction/index.js",
-      "import": "./esm/transaction/index.js",
-      "default": "./esm/transaction/index.js"
+      "types": "./esm/ui/react/transaction/index.d.ts",
+      "module": "./esm/ui/react/transaction/index.js",
+      "import": "./esm/ui/react/transaction/index.js",
+      "default": "./esm/ui/react/transaction/index.js"
     },
     "./wallet": {
       "types": "./esm/wallet/index.d.ts",

src/buy/components/BuyProvider.tsx

@@ -1,3 +1,5 @@
+import { GENERIC_ERROR_MESSAGE } from '@/core/transaction/constants';
+import { isUserRejectedRequestError } from '@/core/transaction/utils/isUserRejectedRequestError';
 import {
   createContext,
   useCallback,
@@ -19,8 +21,6 @@ import { useLifecycleStatus } from '../../swap/hooks/useLifecycleStatus';
 import type { SwapUnit } from '../../swap/types';
 import { isSwapError } from '../../swap/utils/isSwapError';
 import { processSwapTransaction } from '../../swap/utils/processSwapTransaction';
-import { GENERIC_ERROR_MESSAGE } from '../../transaction/constants';
-import { isUserRejectedRequestError } from '../../transaction/utils/isUserRejectedRequestError';
 import { useBuyTokens } from '../hooks/useBuyTokens';
 import { useOnrampEventListeners } from '../hooks/useOnrampEventListeners';
 import { usePopupMonitor } from '../hooks/usePopupMonitor';

src/checkout/components/CheckoutProvider.tsx

@@ -17,7 +17,7 @@ import { useWriteContracts } from 'wagmi/experimental';
 import { useCallsStatus } from 'wagmi/experimental';
 import { useValue } from '../../core-react/internal/hooks/useValue';
 import { useOnchainKit } from '../../core-react/useOnchainKit';
-import { isUserRejectedRequestError } from '../../transaction/utils/isUserRejectedRequestError';
+import { isUserRejectedRequestError } from '../../core/transaction/utils/isUserRejectedRequestError';
 import { useIsWalletACoinbaseSmartWallet } from '../../wallet/hooks/useIsWalletACoinbaseSmartWallet';
 import {
   GENERIC_ERROR_MESSAGE,

src/checkout/types.ts

@@ -2,7 +2,7 @@ import type { ContractFunctionParameters, TransactionReceipt } from 'viem';
 import type { Address } from 'viem';
 import type { Config } from 'wagmi';
 import type { PayTransaction } from '../core/api/types';
-import type { TransactionError } from '../transaction';
+import type { TransactionError } from '../ui/react/transaction';
 
 /**
  * List of Pay lifecycle statuses.

src/core-react/nft/types.ts

@@ -1,7 +1,7 @@
 import type { ContractType, NFTError, NFTPrice } from '@/core/api/types';
 import type { ReactNode } from 'react';
 import type { Address, Hex, TransactionReceipt } from 'viem';
-import type { Call } from '../../transaction/types';
+import type { Call } from '../transaction/types';
 
 export enum MediaType {
   Image = 'image',

src/transaction/hooks/useGetTransactionStatusLabel.test.tsx → src/core-react/transaction/hooks/useGetTransactionStatusLabel.test.ts

@@ -1,12 +1,12 @@
+import { getChainExplorer } from '@/core/network/getChainExplorer';
 import { renderHook } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useChainId } from 'wagmi';
 import { useShowCallsStatus } from 'wagmi/experimental';
-import { getChainExplorer } from '../../core/network/getChainExplorer';
-import { useTransactionContext } from '../components/TransactionProvider';
+import { useTransactionContext } from '../providers/TransactionProvider';
 import { useGetTransactionStatusLabel } from './useGetTransactionStatusLabel';
 
-vi.mock('../components/TransactionProvider', () => ({
+vi.mock('../providers/TransactionProvider', () => ({
   useTransactionContext: vi.fn(),
 }));
 
@@ -18,7 +18,7 @@ vi.mock('wagmi/experimental', () => ({
   useShowCallsStatus: vi.fn(),
 }));
 
-vi.mock('../../core/network/getChainExplorer', () => ({
+vi.mock('@/core/network/getChainExplorer', () => ({
   getChainExplorer: vi.fn(),
 }));
 

src/transaction/hooks/useGetTransactionStatusLabel.tsx → src/core-react/transaction/hooks/useGetTransactionStatusLabel.ts

@@ -1,6 +1,6 @@
+import { color } from '@/styles/theme';
 import { useMemo } from 'react';
-import { color } from '../../styles/theme';
-import { useTransactionContext } from '../components/TransactionProvider';
+import { useTransactionContext } from '../providers/TransactionProvider';
 
 export function useGetTransactionStatusLabel() {
   const {

src/transaction/hooks/useGetTransactionToastLabel.test.tsx → src/core-react/transaction/hooks/useGetTransactionToastLabel.test.ts

@@ -1,12 +1,12 @@
+import { getChainExplorer } from '@/core/network/getChainExplorer';
 import { renderHook } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useChainId } from 'wagmi';
 import { useShowCallsStatus } from 'wagmi/experimental';
-import { getChainExplorer } from '../../core/network/getChainExplorer';
-import { useTransactionContext } from '../components/TransactionProvider';
+import { useTransactionContext } from '../providers/TransactionProvider';
 import { useGetTransactionToastLabel } from './useGetTransactionToastLabel';
 
-vi.mock('../components/TransactionProvider', () => ({
+vi.mock('../providers/TransactionProvider', () => ({
   useTransactionContext: vi.fn(),
 }));
 
@@ -18,7 +18,7 @@ vi.mock('wagmi/experimental', () => ({
   useShowCallsStatus: vi.fn(),
 }));
 
-vi.mock('../../core/network/getChainExplorer', () => ({
+vi.mock('@/core/network/getChainExplorer', () => ({
   getChainExplorer: vi.fn(),
 }));
 

src/transaction/hooks/useGetTransactionToastLabel.tsx → src/core-react/transaction/hooks/useGetTransactionToastLabel.ts

@@ -1,6 +1,6 @@
+import { color } from '@/styles/theme';
 import { useMemo } from 'react';
-import { color } from '../../styles/theme';
-import { useTransactionContext } from '../components/TransactionProvider';
+import { useTransactionContext } from '../providers/TransactionProvider';
 
 export function useGetTransactionToastLabel() {
   const {

src/transaction/hooks/useSendCall.test.ts → src/core-react/transaction/hooks/useSendCall.test.ts

@@ -1,15 +1,15 @@
+import { GENERIC_ERROR_MESSAGE } from '@/core/transaction/constants';
+import { isUserRejectedRequestError } from '@/core/transaction/utils/isUserRejectedRequestError';
 import { renderHook } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useSendTransaction as useSendCallWagmi } from 'wagmi';
-import { GENERIC_ERROR_MESSAGE } from '../constants';
-import { isUserRejectedRequestError } from '../utils/isUserRejectedRequestError';
 import { useSendCall } from './useSendCall';
 
 vi.mock('wagmi', () => ({
   useSendTransaction: vi.fn(),
 }));
 
-vi.mock('../utils/isUserRejectedRequestError', () => ({
+vi.mock('@/core/transaction/utils/isUserRejectedRequestError', () => ({
   isUserRejectedRequestError: vi.fn(),
 }));
 

src/transaction/hooks/useSendCall.ts → src/core-react/transaction/hooks/useSendCall.ts

@@ -1,8 +1,8 @@
+import { GENERIC_ERROR_MESSAGE } from '@/core/transaction/constants';
+import { isUserRejectedRequestError } from '@/core/transaction/utils/isUserRejectedRequestError';
 import type { Address } from 'viem';
 import { useSendTransaction as useSendCallWagmi } from 'wagmi';
-import { GENERIC_ERROR_MESSAGE } from '../constants';
 import type { UseSendCallParams } from '../types';
-import { isUserRejectedRequestError } from '../utils/isUserRejectedRequestError';
 
 /**
  * Wagmi hook for single transactions with calldata.

src/transaction/hooks/useSendCalls.test.ts → src/core-react/transaction/hooks/useSendCalls.test.ts

@@ -1,16 +1,16 @@
+import { GENERIC_ERROR_MESSAGE } from '@/core/transaction/constants';
+import { isUserRejectedRequestError } from '@/core/transaction/utils/isUserRejectedRequestError';
 import { renderHook } from '@testing-library/react';
 import type { TransactionExecutionError } from 'viem';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useSendCalls as useSendCallsWagmi } from 'wagmi/experimental';
-import { GENERIC_ERROR_MESSAGE } from '../constants';
-import { isUserRejectedRequestError } from '../utils/isUserRejectedRequestError';
 import { useSendCalls } from './useSendCalls';
 
 vi.mock('wagmi/experimental', () => ({
   useSendCalls: vi.fn(),
 }));
 
-vi.mock('../utils/isUserRejectedRequestError', () => ({
+vi.mock('@/core/transaction/utils/isUserRejectedRequestError', () => ({
   isUserRejectedRequestError: vi.fn(),
 }));
 

src/transaction/hooks/useSendCalls.ts → src/core-react/transaction/hooks/useSendCalls.ts

@@ -1,7 +1,7 @@
+import { GENERIC_ERROR_MESSAGE } from '@/core/transaction/constants';
+import { isUserRejectedRequestError } from '@/core/transaction/utils/isUserRejectedRequestError';
 import { useSendCalls as useSendCallsWagmi } from 'wagmi/experimental';
-import { GENERIC_ERROR_MESSAGE } from '../constants';
 import type { UseSendCallsParams } from '../types';
-import { isUserRejectedRequestError } from '../utils/isUserRejectedRequestError';
 
 /**
  * useSendCalls: Experimental Wagmi hook for batching transactions with calldata.

src/transaction/hooks/useSendWalletTransactions.test.tsx → src/core-react/transaction/hooks/useSendWalletTransactions.test.ts

@@ -1,13 +1,13 @@
-import type { Call } from '@/transaction/types';
+import type { Call } from '@/core-react/transaction/types';
+import { sendBatchedTransactions } from '@/core/transaction/utils/sendBatchedTransactions';
+import { sendSingleTransactions } from '@/core/transaction/utils/sendSingleTransactions';
 import { renderHook } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { sendBatchedTransactions } from '../utils/sendBatchedTransactions';
-import { sendSingleTransactions } from '../utils/sendSingleTransactions';
 import { useSendWalletTransactions } from './useSendWalletTransactions';
 
 // Mock the utility functions
-vi.mock('../utils/sendBatchedTransactions');
-vi.mock('../utils/sendSingleTransactions');
+vi.mock('@/core/transaction/utils/sendBatchedTransactions');
+vi.mock('@/core/transaction/utils/sendSingleTransactions');
 
 describe('useSendWalletTransactions', () => {
   beforeEach(() => {

src/transaction/hooks/useSendWalletTransactions.tsx → src/core-react/transaction/hooks/useSendWalletTransactions.ts

@@ -1,9 +1,9 @@
+import { Capabilities } from '@/core/constants';
+import { sendBatchedTransactions } from '@/core/transaction/utils/sendBatchedTransactions';
+import { sendSingleTransactions } from '@/core/transaction/utils/sendSingleTransactions';
 import { useCallback } from 'react';
 import type { ContractFunctionParameters } from 'viem';
-import { Capabilities } from '../../core/constants';
 import type { Call, UseSendWalletTransactionsParams } from '../types';
-import { sendBatchedTransactions } from '../utils/sendBatchedTransactions';
-import { sendSingleTransactions } from '../utils/sendSingleTransactions';
 
 // Sends transactions to the wallet using the appropriate hook based on Transaction props and wallet capabilities
 export const useSendWalletTransactions = ({

src/transaction/hooks/useWriteContract.test.ts → src/core-react/transaction/hooks/useWriteContract.test.ts

@@ -1,14 +1,14 @@
+import { isUserRejectedRequestError } from '@/core/transaction/utils/isUserRejectedRequestError';
 import { renderHook } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useWriteContract as useWriteContractWagmi } from 'wagmi';
-import { isUserRejectedRequestError } from '../utils/isUserRejectedRequestError';
 import { useWriteContract } from './useWriteContract';
 
 vi.mock('wagmi', () => ({
   useWriteContract: vi.fn(),
 }));
 
-vi.mock('../utils/isUserRejectedRequestError', () => ({
+vi.mock('@/core/transaction/utils/isUserRejectedRequestError', () => ({
   isUserRejectedRequestError: vi.fn(),
 }));
 

src/transaction/hooks/useWriteContract.ts → src/core-react/transaction/hooks/useWriteContract.ts

@@ -1,8 +1,8 @@
+import { GENERIC_ERROR_MESSAGE } from '@/core/transaction/constants';
+import { isUserRejectedRequestError } from '@/core/transaction/utils/isUserRejectedRequestError';
 import type { Address } from 'viem';
 import { useWriteContract as useWriteContractWagmi } from 'wagmi';
-import { GENERIC_ERROR_MESSAGE } from '../constants';
 import type { UseWriteContractParams } from '../types';
-import { isUserRejectedRequestError } from '../utils/isUserRejectedRequestError';
 
 /**
  * Wagmi hook for single contract transactions.

src/transaction/hooks/useWriteContracts.test.ts → src/core-react/transaction/hooks/useWriteContracts.test.ts

@@ -1,3 +1,4 @@
+// TODO: fix wagmi types
 // @ts-nocheck - investigate wagmi types
 import { renderHook } from '@testing-library/react';
 import type { TransactionExecutionError } from 'viem';

src/transaction/hooks/useWriteContracts.ts → src/core-react/transaction/hooks/useWriteContracts.ts

@@ -2,9 +2,9 @@ import { useWriteContracts as useWriteContractsWagmi } from 'wagmi/experimental'
 import {
   GENERIC_ERROR_MESSAGE,
   METHOD_NOT_SUPPORTED_ERROR_SUBSTRING,
-} from '../constants';
+} from '../../../core/transaction/constants';
+import { isUserRejectedRequestError } from '../../../core/transaction/utils/isUserRejectedRequestError';
 import type { UseWriteContractsParams } from '../types';
-import { isUserRejectedRequestError } from '../utils/isUserRejectedRequestError';
 
 /**
  * useWriteContracts: Experimental Wagmi hook for batching transactions.

src/transaction/components/TransactionProvider.test.tsx → src/core-react/transaction/providers/TransactionProvider.test.tsx

@@ -1,4 +1,10 @@
 // @ts-nocheck -- made simple fixes for now, will fix rest later
+import { useCapabilitiesSafe } from '@/core-react/internal/hooks/useCapabilitiesSafe';
+import { useCallsStatus } from '@/core-react/transaction/hooks/useCallsStatus';
+import { useSendCall } from '@/core-react/transaction/hooks/useSendCall';
+import { useSendCalls } from '@/core-react/transaction/hooks/useSendCalls';
+import { useSendWalletTransactions } from '@/core-react/transaction/hooks/useSendWalletTransactions';
+import { useOnchainKit } from '@/core-react/useOnchainKit';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { base } from 'viem/chains';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -8,12 +14,6 @@ import {
   useWaitForTransactionReceipt,
 } from 'wagmi';
 import { waitForTransactionReceipt } from 'wagmi/actions';
-import { useCapabilitiesSafe } from '../../core-react/internal/hooks/useCapabilitiesSafe';
-import { useOnchainKit } from '../../core-react/useOnchainKit';
-import { useCallsStatus } from '../hooks/useCallsStatus';
-import { useSendCall } from '../hooks/useSendCall';
-import { useSendCalls } from '../hooks/useSendCalls';
-import { useSendWalletTransactions } from '../hooks/useSendWalletTransactions';
 import {
   TransactionProvider,
   useTransactionContext,
@@ -31,27 +31,27 @@ vi.mock('wagmi/actions', () => ({
   waitForTransactionReceipt: vi.fn(),
 }));
 
-vi.mock('../hooks/useCallsStatus', () => ({
+vi.mock('@/core-react/transaction/hooks/useCallsStatus', () => ({
   useCallsStatus: vi.fn(),
 }));
 
-vi.mock('../hooks/useSendCall', () => ({
+vi.mock('@/core-react/transaction/hooks/useSendCall', () => ({
   useSendCall: vi.fn(),
 }));
 
-vi.mock('../hooks/useSendCalls', () => ({
+vi.mock('@/core-react/transaction/hooks/useSendCalls', () => ({
   useSendCalls: vi.fn(),
 }));
 
-vi.mock('../hooks/useSendWalletTransactions', () => ({
+vi.mock('@/core-react/transaction/hooks/useSendWalletTransactions', () => ({
   useSendWalletTransactions: vi.fn(),
 }));
 
-vi.mock('../../core-react/internal/hooks/useCapabilitiesSafe', () => ({
+vi.mock('@/core-react/internal/hooks/useCapabilitiesSafe', () => ({
   useCapabilitiesSafe: vi.fn(),
 }));
 
-vi.mock('../../core-react/useOnchainKit', () => ({
+vi.mock('@/core-react/useOnchainKit', () => ({
   useOnchainKit: vi.fn(),
 }));
 

src/transaction/components/TransactionProvider.tsx → src/core-react/transaction/providers/TransactionProvider.tsx

@@ -1,3 +1,19 @@
+import { useCapabilitiesSafe } from '@/core-react/internal/hooks/useCapabilitiesSafe';
+import { useValue } from '@/core-react/internal/hooks/useValue';
+import { useCallsStatus } from '@/core-react/transaction/hooks/useCallsStatus';
+import { useSendCall } from '@/core-react/transaction/hooks/useSendCall';
+import { useSendCalls } from '@/core-react/transaction/hooks/useSendCalls';
+import { useSendWalletTransactions } from '@/core-react/transaction/hooks/useSendWalletTransactions';
+import type {
+  LifecycleStatus,
+  TransactionContextType,
+  TransactionProviderReact,
+} from '@/core-react/transaction/types';
+import { useOnchainKit } from '@/core-react/useOnchainKit';
+import { Capabilities } from '@/core/constants';
+import { GENERIC_ERROR_MESSAGE } from '@/core/transaction/constants';
+import { getPaymasterUrl } from '@/core/transaction/utils/getPaymasterUrl';
+import { isUserRejectedRequestError } from '@/core/transaction/utils/isUserRejectedRequestError';
 import {
   createContext,
   useCallback,
@@ -14,22 +30,6 @@ import {
   useWaitForTransactionReceipt,
 } from 'wagmi';
 import { waitForTransactionReceipt } from 'wagmi/actions';
-import { useCapabilitiesSafe } from '../../core-react/internal/hooks/useCapabilitiesSafe';
-import { useValue } from '../../core-react/internal/hooks/useValue';
-import { useOnchainKit } from '../../core-react/useOnchainKit';
-import { Capabilities } from '../../core/constants';
-import { GENERIC_ERROR_MESSAGE } from '../constants';
-import { useCallsStatus } from '../hooks/useCallsStatus';
-import { useSendCall } from '../hooks/useSendCall';
-import { useSendCalls } from '../hooks/useSendCalls';
-import { useSendWalletTransactions } from '../hooks/useSendWalletTransactions';
-import type {
-  LifecycleStatus,
-  TransactionContextType,
-  TransactionProviderReact,
-} from '../types';
-import { getPaymasterUrl } from '../utils/getPaymasterUrl';
-import { isUserRejectedRequestError } from '../utils/isUserRejectedRequestError';
 
 const emptyContext = {} as TransactionContextType;
 export const TransactionContext =

src/core/nft/utils/buildMintTransactionData.ts

@@ -1,5 +1,5 @@
 import type { Address } from 'viem';
-import type { Call } from '../../../transaction/types';
+import type { Call } from '../../../core-react/transaction/types';
 import { buildMintTransaction as buildMintTransactionApi } from '../../api/buildMintTransaction';
 import type { BuildMintTransactionParams } from '../../api/types';
 

src/transaction/utils/isContract.ts → src/core/transaction/utils/isContract.ts

@@ -1,5 +1,5 @@
 import type { ContractFunctionParameters } from 'viem';
-import type { Call } from '../types';
+import type { Call } from '../../../core-react/transaction/types';
 
 export function isContract(
   transaction: Call | ContractFunctionParameters,

src/transaction/utils/isSpinnerDisplayed.ts → src/core/transaction/utils/isSpinnerDisplayed.ts

@@ -1,4 +1,4 @@
-import type { IsSpinnerDisplayedProps } from '../types';
+import type { IsSpinnerDisplayedProps } from '../../../core-react/transaction/types';
 
 export function isSpinnerDisplayed({
   errorMessage,

src/transaction/utils/sendBatchedTransactions.test.ts → src/core/transaction/utils/sendBatchedTransactions.test.ts

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { sendBatchedTransactions } from './sendBatchedTransactions';
 
-import type { SendBatchedTransactionsParams } from '@/transaction/types';
+import type { SendBatchedTransactionsParams } from '@/core-react/transaction/types';
 import { erc20Abi } from 'viem';
 
 describe('sendBatchedTransactions', () => {

src/transaction/utils/sendBatchedTransactions.ts → src/core/transaction/utils/sendBatchedTransactions.ts

@@ -1,4 +1,4 @@
-import type { SendBatchedTransactionsParams } from '../types';
+import type { SendBatchedTransactionsParams } from '../../../core-react/transaction/types';
 import { isContract } from './isContract';
 
 export const sendBatchedTransactions = async ({