add test coverage and refactor hooks

src/internal/svg/errorSvg.tsx

@@ -5,6 +5,7 @@ export const errorSvg = (
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    data-testid="ockErrorSvg"
   >
     <title>Error SVG</title>
     <path

src/internal/svg/successSvg.tsx

@@ -5,6 +5,7 @@ export const successSvg = (
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    data-testid="ockSuccessSvg"
   >
     <title>Success SVG</title>
     <path

src/transaction/components/TransactionStatusAction.test.tsx

@@ -1,15 +1,15 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { useGetTransactionStatus } from '../hooks/useGetTransactionStatus';
+import { useGetTransactionAction } from '../hooks/useGetTransactionAction';
 import { TransactionStatusAction } from './TransactionStatusAction';
 
-vi.mock('../hooks/useGetTransactionStatus', () => ({
-  useGetTransactionStatus: vi.fn(),
+vi.mock('../hooks/useGetTransactionAction', () => ({
+  useGetTransactionAction: vi.fn(),
 }));
 
 describe('TransactionStatusAction', () => {
   it('renders transaction status action', () => {
-    (useGetTransactionStatus as vi.Mock).mockReturnValue({
+    (useGetTransactionAction as vi.Mock).mockReturnValue({
       actionElement: <button type="button">Try again</button>,
     });
 

src/transaction/components/TransactionStatusAction.tsx

@@ -1,11 +1,11 @@
 import { cn, text } from '../../styles/theme';
-import { useGetTransactionStatus } from '../hooks/useGetTransactionStatus';
+import { useGetTransactionAction } from '../hooks/useGetTransactionAction';
 import type { TransactionStatusActionReact } from '../types';
 
 export function TransactionStatusAction({
   className,
 }: TransactionStatusActionReact) {
-  const { actionElement } = useGetTransactionStatus();
+  const { actionElement } = useGetTransactionAction({ context: 'status' });
 
   return (
     <div className={cn(text.label2, 'min-w-[70px]', className)}>

src/transaction/components/TransactionStatusLabel.test.tsx

@@ -1,15 +1,15 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { useGetTransactionStatus } from '../hooks/useGetTransactionStatus';
+import { useGetTransactionLabel } from '../hooks/useGetTransactionLabel';
 import { TransactionStatusLabel } from './TransactionStatusLabel';
 
-vi.mock('../hooks/useGetTransactionStatus', () => ({
-  useGetTransactionStatus: vi.fn(),
+vi.mock('../hooks/useGetTransactionLabel', () => ({
+  useGetTransactionLabel: vi.fn(),
 }));
 
 describe('TransactionStatusLabel', () => {
   it('renders transaction status label', () => {
-    (useGetTransactionStatus as vi.Mock).mockReturnValue({
+    (useGetTransactionLabel as vi.Mock).mockReturnValue({
       label: 'Successful!',
       labelClassName: 'text-ock-foreground-muted',
     });

src/transaction/components/TransactionStatusLabel.tsx

@@ -1,11 +1,13 @@
 import { cn, text } from '../../styles/theme';
-import { useGetTransactionStatus } from '../hooks/useGetTransactionStatus';
+import { useGetTransactionLabel } from '../hooks/useGetTransactionLabel';
 import type { TransactionStatusLabelReact } from '../types';
 
 export function TransactionStatusLabel({
   className,
 }: TransactionStatusLabelReact) {
-  const { label, labelClassName } = useGetTransactionStatus();
+  const { label, labelClassName } = useGetTransactionLabel({
+    context: 'status',
+  });
 
   return (
     <div className={cn(text.label2, className)}>

src/transaction/components/TransactionToastAction.test.tsx

@@ -1,15 +1,15 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { useGetTransactionToast } from '../hooks/useGetTransactionToast';
+import { useGetTransactionAction } from '../hooks/useGetTransactionAction';
 import { TransactionToastAction } from './TransactionToastAction';
 
-vi.mock('../hooks/useGetTransactionToast', () => ({
-  useGetTransactionToast: vi.fn(),
+vi.mock('../hooks/useGetTransactionAction', () => ({
+  useGetTransactionAction: vi.fn(),
 }));
 
 describe('TransactionToastAction', () => {
   it('renders transaction status action', () => {
-    (useGetTransactionToast as vi.Mock).mockReturnValue({
+    (useGetTransactionAction as vi.Mock).mockReturnValue({
       actionElement: <button type="button">Try again</button>,
     });
 

src/transaction/components/TransactionToastAction.tsx

@@ -1,11 +1,11 @@
 import { cn, text } from '../../styles/theme';
-import { useGetTransactionToast } from '../hooks/useGetTransactionToast';
+import { useGetTransactionAction } from '../hooks/useGetTransactionAction';
 import type { TransactionToastActionReact } from '../types';
 
 export function TransactionToastAction({
   className,
 }: TransactionToastActionReact) {
-  const { actionElement } = useGetTransactionToast();
+  const { actionElement } = useGetTransactionAction({ context: 'toast' });
 
   return (
     <div className={cn(text.label1, 'text-nowrap', className)}>

src/transaction/components/TransactionToastIcon.test.tsx

@@ -1,21 +1,41 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { useGetTransactionToast } from '../hooks/useGetTransactionToast';
+import { useTransactionContext } from '../components/TransactionProvider';
 import { TransactionToastIcon } from './TransactionToastIcon';
 
-vi.mock('../hooks/useGetTransactionToast', () => ({
-  useGetTransactionToast: vi.fn(),
+vi.mock('../components/TransactionProvider', () => ({
+  useTransactionContext: vi.fn(),
 }));
 
 describe('TransactionToastIcon', () => {
-  it('renders transaction toast icon', () => {
-    (useGetTransactionToast as vi.Mock).mockReturnValue({
-      icon: <div>icon</div>,
+  it('renders transaction toast icon when receipt exists', () => {
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      receipt: '123',
     });
 
     render(<TransactionToastIcon className="custom-class" />);
 
-    const iconElement = screen.getByText('icon');
+    const iconElement = screen.getByTestId('ockSuccessSvg');
+    expect(iconElement).toBeInTheDocument();
+  });
+  it('renders transaction toast icon when receipt exists', () => {
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      errorMessage: 'error',
+    });
+
+    render(<TransactionToastIcon className="custom-class" />);
+
+    const iconElement = screen.getByTestId('ockErrorSvg');
+    expect(iconElement).toBeInTheDocument();
+  });
+  it('renders transaction toast icon when txn is in progress', () => {
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      isLoading: true,
+    });
+
+    render(<TransactionToastIcon className="custom-class" />);
+
+    const iconElement = screen.getByTestId('ockSpinner');
     expect(iconElement).toBeInTheDocument();
   });
 });

src/transaction/components/TransactionToastIcon.tsx

@@ -1,8 +1,27 @@
+import { useMemo } from 'react';
 import { cn, text } from '../../styles/theme';
-import { useGetTransactionToast } from '../hooks/useGetTransactionToast';
 import type { TransactionToastIconReact } from '../types';
+import { useTransactionContext } from './TransactionProvider';
+import { Spinner } from '../../internal/components/Spinner';
+import { successSvg } from '../../internal/svg/successSvg';
+import { errorSvg } from '../../internal/svg/errorSvg';
 
 export function TransactionToastIcon({ className }: TransactionToastIconReact) {
-  const { icon } = useGetTransactionToast();
+  const { errorMessage, isLoading, receipt, transactionHash, transactionId } =
+    useTransactionContext();
+  const isInProgress = isLoading || !!transactionId || !!transactionHash;
+
+  const icon = useMemo(() => {
+    if (receipt) {
+      return successSvg;
+    }
+    if (errorMessage) {
+      return errorSvg;
+    }
+    if (isInProgress) {
+      return <Spinner className="px-1.5 py-1.5" />;
+    }
+    return null;
+  }, [isInProgress, errorMessage, receipt]);
   return <div className={cn(text.label2, className)}>{icon}</div>;
 }

src/transaction/components/TransactionToastLabel.test.tsx

@@ -1,15 +1,15 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { useGetTransactionToast } from '../hooks/useGetTransactionToast';
+import { useGetTransactionLabel } from '../hooks/useGetTransactionLabel';
 import { TransactionToastLabel } from './TransactionToastLabel';
 
-vi.mock('../hooks/useGetTransactionToast', () => ({
-  useGetTransactionToast: vi.fn(),
+vi.mock('../hooks/useGetTransactionLabel', () => ({
+  useGetTransactionLabel: vi.fn(),
 }));
 
 describe('TransactionToastLabel', () => {
   it('renders transaction status action', () => {
-    (useGetTransactionToast as vi.Mock).mockReturnValue({
+    (useGetTransactionLabel as vi.Mock).mockReturnValue({
       label: 'Successful',
     });
 

src/transaction/components/TransactionToastLabel.tsx

@@ -1,11 +1,11 @@
 import { cn, color, text } from '../../styles/theme';
-import { useGetTransactionToast } from '../hooks/useGetTransactionToast';
+import { useGetTransactionLabel } from '../hooks/useGetTransactionLabel';
 import type { TransactionToastLabelReact } from '../types';
 
 export function TransactionToastLabel({
   className,
 }: TransactionToastLabelReact) {
-  const { label } = useGetTransactionToast();
+  const { label } = useGetTransactionLabel({ context: 'toast' });
   return (
     <div className={cn(text.label1, 'text-nowrap', className)}>
       <p className={color.foreground}>{label}</p>