diff --git a/src/transaction/components/Transaction.tsx b/src/transaction/components/Transaction.tsx index 5993b7d5035..d2cac1cb0f2 100644 --- a/src/transaction/components/Transaction.tsx +++ b/src/transaction/components/Transaction.tsx @@ -10,7 +10,7 @@ export function Transaction({ children, contracts, onError, - onState, + onStatus, onSuccess, }: TransactionReact) { return ( @@ -20,7 +20,7 @@ export function Transaction({ chainId={chainId} contracts={contracts} onError={onError} - onState={onState} + onStatus={onStatus} onSuccess={onSuccess} >
diff --git a/src/transaction/components/TransactionProvider.tsx b/src/transaction/components/TransactionProvider.tsx index 2d38322880e..03f9998c913 100644 --- a/src/transaction/components/TransactionProvider.tsx +++ b/src/transaction/components/TransactionProvider.tsx @@ -26,7 +26,7 @@ import { useCallsStatus } from '../hooks/useCallsStatus'; import { useWriteContract } from '../hooks/useWriteContract'; import { useWriteContracts } from '../hooks/useWriteContracts'; import type { - LifeCycleState, + LifeCycleStatus, TransactionContextType, TransactionProviderReact, } from '../types'; @@ -52,7 +52,7 @@ export function TransactionProvider({ children, contracts, onError, - onState, + onStatus, onSuccess, }: TransactionProviderReact) { // Core Hooks @@ -60,9 +60,9 @@ export function TransactionProvider({ const config = useConfig(); const [errorMessage, setErrorMessage] = useState(''); const [isToastVisible, setIsToastVisible] = useState(false); - const [lifeCycleState, setLifeCycleState] = useState({ - stateName: 'init', - stateData: null, + const [lifeCycleStatus, setLifeCycleStatus] = useState({ + statusName: 'init', + statusData: null, }); // Component lifecycle const [receiptArray, setReceiptArray] = useState([]); const [transactionId, setTransactionId] = useState(''); @@ -75,7 +75,7 @@ export function TransactionProvider({ const { status: statusWriteContracts, writeContractsAsync } = useWriteContracts({ setErrorMessage, - setLifeCycleState, + setLifeCycleStatus, setTransactionId, }); const { @@ -84,12 +84,12 @@ export function TransactionProvider({ data: writeContractTransactionHash, } = useWriteContract({ setErrorMessage, - setLifeCycleState, + setLifeCycleStatus, setTransactionHashArray, transactionHashArray, }); const { transactionHash, status: callStatus } = useCallsStatus({ - setLifeCycleState, + setLifeCycleStatus, transactionId, }); const { data: receipt } = useWaitForTransactionReceipt({ @@ -99,17 +99,17 @@ export function TransactionProvider({ // Component lifecycle emitters useEffect(() => { // Emit Error - if (lifeCycleState.stateName === 'error') { - onError?.(lifeCycleState.stateData); + if (lifeCycleStatus.statusName === 'error') { + onError?.(lifeCycleStatus.statusData); } // Emit State - onState?.(lifeCycleState); + onStatus?.(lifeCycleStatus); }, [ onError, - onState, - lifeCycleState, - lifeCycleState.stateData, // Keep stateData, so that the effect runs when it changes - lifeCycleState.stateName, // Keep stateName, so that the effect runs when it changes + onStatus, + lifeCycleStatus, + lifeCycleStatus.statusData, // Keep statusData, so that the effect runs when it changes + lifeCycleStatus.statusName, // Keep statusName, so that the effect runs when it changes ]); const getTransactionReceipts = useCallback(async () => { diff --git a/src/transaction/hooks/useCallsStatus.test.ts b/src/transaction/hooks/useCallsStatus.test.ts index a2cacef298a..b1674958d94 100644 --- a/src/transaction/hooks/useCallsStatus.test.ts +++ b/src/transaction/hooks/useCallsStatus.test.ts @@ -24,22 +24,22 @@ describe('useCallsStatus', () => { }); it('should handle errors and call onError callback', () => { - const mockSetLifeCycleState = vi.fn(); + const mockSetLifeCycleStatus = vi.fn(); const mockError = new Error('Test error'); (useCallsStatusWagmi as ReturnType).mockImplementation(() => { throw mockError; }); const { result } = renderHook(() => useCallsStatus({ - setLifeCycleState: mockSetLifeCycleState, + setLifeCycleStatus: mockSetLifeCycleStatus, transactionId, }), ); expect(result.current.status).toBe('error'); expect(result.current.transactionHash).toBeUndefined(); - expect(mockSetLifeCycleState).toHaveBeenCalledWith({ - stateName: 'error', - stateData: { + expect(mockSetLifeCycleStatus).toHaveBeenCalledWith({ + statusName: 'error', + statusData: { code: 'UNCAUGHT_CALL_STATUS_ERROR', error: JSON.stringify(mockError), }, diff --git a/src/transaction/hooks/useCallsStatus.ts b/src/transaction/hooks/useCallsStatus.ts index 147b14b6b51..27185b901ee 100644 --- a/src/transaction/hooks/useCallsStatus.ts +++ b/src/transaction/hooks/useCallsStatus.ts @@ -4,7 +4,7 @@ import type { UseCallsStatusParams } from '../types'; const uncaughtErrorCode = 'UNCAUGHT_CALL_STATUS_ERROR'; export function useCallsStatus({ - setLifeCycleState, + setLifeCycleStatus, transactionId, }: UseCallsStatusParams) { try { @@ -20,9 +20,9 @@ export function useCallsStatus({ const transactionHash = data?.receipts?.[0]?.transactionHash; return { status: data?.status, transactionHash }; } catch (err) { - setLifeCycleState({ - stateName: 'error', - stateData: { code: uncaughtErrorCode, error: JSON.stringify(err) }, + setLifeCycleStatus({ + statusName: 'error', + statusData: { code: uncaughtErrorCode, error: JSON.stringify(err) }, }); return { status: 'error', transactionHash: undefined }; } diff --git a/src/transaction/hooks/useWriteContract.test.ts b/src/transaction/hooks/useWriteContract.test.ts index f7816ec86f8..4d1f549bbf8 100644 --- a/src/transaction/hooks/useWriteContract.test.ts +++ b/src/transaction/hooks/useWriteContract.test.ts @@ -22,7 +22,7 @@ type MockUseWriteContractReturn = { describe('useWriteContract', () => { const mockSetErrorMessage = vi.fn(); - const mockSetLifeCycleState = vi.fn(); + const mockSetLifeCycleStatus = vi.fn(); const mockSetTransactionHashArray = vi.fn(); beforeEach(() => { @@ -40,7 +40,7 @@ describe('useWriteContract', () => { const { result } = renderHook(() => useWriteContract({ setErrorMessage: mockSetErrorMessage, - setLifeCycleState: mockSetLifeCycleState, + setLifeCycleStatus: mockSetLifeCycleStatus, setTransactionHashArray: mockSetTransactionHashArray, }), ); @@ -65,7 +65,7 @@ describe('useWriteContract', () => { renderHook(() => useWriteContract({ setErrorMessage: mockSetErrorMessage, - setLifeCycleState: mockSetLifeCycleState, + setLifeCycleStatus: mockSetLifeCycleStatus, setTransactionHashArray: mockSetTransactionHashArray, }), ); @@ -76,9 +76,9 @@ describe('useWriteContract', () => { expect(mockSetErrorMessage).toHaveBeenCalledWith( 'Something went wrong. Please try again.', ); - expect(mockSetLifeCycleState).toHaveBeenCalledWith({ - stateName: 'error', - stateData: { + expect(mockSetLifeCycleStatus).toHaveBeenCalledWith({ + statusName: 'error', + statusData: { code: 'WRITE_CONTRACT_ERROR', error: 'Something went wrong. Please try again.', }, @@ -101,7 +101,7 @@ describe('useWriteContract', () => { renderHook(() => useWriteContract({ setErrorMessage: mockSetErrorMessage, - setLifeCycleState: mockSetLifeCycleState, + setLifeCycleStatus: mockSetLifeCycleStatus, setTransactionHashArray: mockSetTransactionHashArray, }), ); @@ -120,7 +120,7 @@ describe('useWriteContract', () => { const { result } = renderHook(() => useWriteContract({ setErrorMessage: mockSetErrorMessage, - setLifeCycleState: mockSetLifeCycleState, + setLifeCycleStatus: mockSetLifeCycleStatus, setTransactionHashArray: mockSetTransactionHashArray, }), ); @@ -129,9 +129,9 @@ describe('useWriteContract', () => { expect(mockSetErrorMessage).toHaveBeenCalledWith( 'Something went wrong. Please try again.', ); - expect(mockSetLifeCycleState).toHaveBeenCalledWith({ - stateName: 'error', - stateData: { + expect(mockSetLifeCycleStatus).toHaveBeenCalledWith({ + statusName: 'error', + statusData: { code: 'UNCAUGHT_WRITE_CONTRACT_ERROR', error: JSON.stringify(uncaughtError), }, diff --git a/src/transaction/hooks/useWriteContract.ts b/src/transaction/hooks/useWriteContract.ts index ff1bf1f7562..3bb051f6d61 100644 --- a/src/transaction/hooks/useWriteContract.ts +++ b/src/transaction/hooks/useWriteContract.ts @@ -14,7 +14,7 @@ import type { UseWriteContractParams } from '../types'; */ export function useWriteContract({ setErrorMessage, - setLifeCycleState, + setLifeCycleStatus, setTransactionHashArray, transactionHashArray, }: UseWriteContractParams) { @@ -30,9 +30,9 @@ export function useWriteContract({ } else { setErrorMessage(GENERIC_ERROR_MESSAGE); } - setLifeCycleState({ - stateName: 'error', - stateData: { code: WRITE_CONTRACT_ERROR_CODE, error: e.message }, + setLifeCycleStatus({ + statusName: 'error', + statusData: { code: WRITE_CONTRACT_ERROR_CODE, error: e.message }, }); }, onSuccess: (hash: Address) => { @@ -44,9 +44,9 @@ export function useWriteContract({ }); return { status, writeContractAsync, data }; } catch (err) { - setLifeCycleState({ - stateName: 'error', - stateData: { + setLifeCycleStatus({ + statusName: 'error', + statusData: { code: UNCAUGHT_WRITE_CONTRACT_ERROR_CODE, error: JSON.stringify(err), }, diff --git a/src/transaction/hooks/useWriteContracts.test.ts b/src/transaction/hooks/useWriteContracts.test.ts index 3c4609a3e90..d441f379c56 100644 --- a/src/transaction/hooks/useWriteContracts.test.ts +++ b/src/transaction/hooks/useWriteContracts.test.ts @@ -9,7 +9,7 @@ vi.mock('wagmi/experimental', () => ({ describe('useWriteContracts', () => { const mockSetErrorMessage = vi.fn(); - const mockSetLifeCycleState = vi.fn(); + const mockSetLifeCycleStatus = vi.fn(); const mockSetTransactionId = vi.fn(); beforeEach(() => { @@ -31,7 +31,7 @@ describe('useWriteContracts', () => { renderHook(() => useWriteContracts({ setErrorMessage: mockSetErrorMessage, - setLifeCycleState: mockSetLifeCycleState, + setLifeCycleStatus: mockSetLifeCycleStatus, setTransactionId: mockSetTransactionId, }), ); @@ -40,9 +40,9 @@ describe('useWriteContracts', () => { expect(mockSetErrorMessage).toHaveBeenCalledWith( 'Something went wrong. Please try again.', ); - expect(mockSetLifeCycleState).toHaveBeenCalledWith({ - stateName: 'error', - stateData: { + expect(mockSetLifeCycleStatus).toHaveBeenCalledWith({ + statusName: 'error', + statusData: { code: 'WRITE_CONTRACTS_ERROR', error: 'Something went wrong. Please try again.', }, @@ -64,7 +64,7 @@ describe('useWriteContracts', () => { renderHook(() => useWriteContracts({ setErrorMessage: mockSetErrorMessage, - setLifeCycleState: mockSetLifeCycleState, + setLifeCycleStatus: mockSetLifeCycleStatus, setTransactionId: mockSetTransactionId, }), ); @@ -83,7 +83,7 @@ describe('useWriteContracts', () => { const { result } = renderHook(() => useWriteContracts({ setErrorMessage: mockSetErrorMessage, - setLifeCycleState: mockSetLifeCycleState, + setLifeCycleStatus: mockSetLifeCycleStatus, setTransactionId: mockSetTransactionId, }), ); @@ -92,9 +92,9 @@ describe('useWriteContracts', () => { expect(mockSetErrorMessage).toHaveBeenCalledWith( 'Something went wrong. Please try again.', ); - expect(mockSetLifeCycleState).toHaveBeenCalledWith({ - stateName: 'error', - stateData: { + expect(mockSetLifeCycleStatus).toHaveBeenCalledWith({ + statusName: 'error', + statusData: { code: 'UNCAUGHT_WRITE_WRITE_CONTRACTS_ERROR', error: JSON.stringify(uncaughtError), }, diff --git a/src/transaction/hooks/useWriteContracts.ts b/src/transaction/hooks/useWriteContracts.ts index 8c8c243e85a..ac256a1ab55 100644 --- a/src/transaction/hooks/useWriteContracts.ts +++ b/src/transaction/hooks/useWriteContracts.ts @@ -16,7 +16,7 @@ import type { UseWriteContractsParams } from '../types'; */ export function useWriteContracts({ setErrorMessage, - setLifeCycleState, + setLifeCycleStatus, setTransactionId, }: UseWriteContractsParams) { try { @@ -39,9 +39,9 @@ export function useWriteContracts({ } else { setErrorMessage(GENERIC_ERROR_MESSAGE); } - setLifeCycleState({ - stateName: 'error', - stateData: { code: WRITE_CONTRACTS_ERROR_CODE, error: e.message }, + setLifeCycleStatus({ + statusName: 'error', + statusData: { code: WRITE_CONTRACTS_ERROR_CODE, error: e.message }, }); }, onSuccess: (id) => { @@ -51,9 +51,9 @@ export function useWriteContracts({ }); return { status, writeContractsAsync }; } catch (err) { - setLifeCycleState({ - stateName: 'error', - stateData: { + setLifeCycleStatus({ + statusName: 'error', + statusData: { code: UNCAUGHT_WRITE_CONTRACTS_ERROR_CODE, error: JSON.stringify(err), }, diff --git a/src/transaction/index.ts b/src/transaction/index.ts index 3c445ca49ff..84a31c0e4ad 100644 --- a/src/transaction/index.ts +++ b/src/transaction/index.ts @@ -10,7 +10,7 @@ export { TransactionToastIcon } from './components/TransactionToastIcon'; export { TransactionToastAction } from './components/TransactionToastAction'; export { TransactionToastLabel } from './components/TransactionToastLabel'; export type { - LifeCycleState, + LifeCycleStatus, TransactionButtonReact, TransactionError, TransactionReact, diff --git a/src/transaction/types.ts b/src/transaction/types.ts index 817d5b8ec03..5e523bbcec8 100644 --- a/src/transaction/types.ts +++ b/src/transaction/types.ts @@ -9,14 +9,14 @@ import type { /** * Note: exported as public Type */ -export type LifeCycleState = +export type LifeCycleStatus = | { - stateName: 'init'; - stateData: null; + statusName: 'init'; + statusData: null; } | { - stateName: 'error'; - stateData: TransactionError; + statusName: 'error'; + statusData: TransactionError; }; export type IsSpinnerDisplayedProps = { @@ -79,7 +79,7 @@ export type TransactionProviderReact = { children: ReactNode; // The child components to be rendered within the provider component. contracts: ContractFunctionParameters[]; // An array of contract function parameters provided to the child components. onError?: (e: TransactionError) => void; // An optional callback function that handles errors within the provider. - onState?: (lifeCycleState: LifeCycleState) => void; // An optional callback function that exposes the component lifecycle state + onStatus?: (lifeCycleStatus: LifeCycleStatus) => void; // An optional callback function that exposes the component lifecycle state onSuccess?: (response: TransactionResponse) => void; // An optional callback function that exposes the transaction receipts }; @@ -94,7 +94,7 @@ export type TransactionReact = { className?: string; // An optional CSS class name for styling the component. contracts: ContractFunctionParameters[]; // An array of contract function parameters for the transaction. onError?: (e: TransactionError) => void; // An optional callback function that handles transaction errors. - onState?: (lifeCycleState: LifeCycleState) => void; // An optional callback function that exposes the component lifecycle state + onStatus?: (lifeCycleStatus: LifeCycleStatus) => void; // An optional callback function that exposes the component lifecycle state onSuccess?: (response: TransactionResponse) => void; // An optional callback function that exposes the transaction receipts }; @@ -166,20 +166,20 @@ export type TransactionToastLabelReact = { }; export type UseCallsStatusParams = { - setLifeCycleState: (state: LifeCycleState) => void; + setLifeCycleStatus: (state: LifeCycleStatus) => void; transactionId: string; }; export type UseWriteContractParams = { setErrorMessage: (error: string) => void; - setLifeCycleState: (state: LifeCycleState) => void; + setLifeCycleStatus: (state: LifeCycleStatus) => void; setTransactionHashArray: (ids: Address[]) => void; transactionHashArray?: Address[]; }; export type UseWriteContractsParams = { setErrorMessage: (error: string) => void; - setLifeCycleState: (state: LifeCycleState) => void; + setLifeCycleStatus: (state: LifeCycleStatus) => void; setTransactionId: (id: string) => void; };