({
+ useWalletAdvancedContext: vi.fn(),
+}));
+
+vi.mock('./SendProvider', () => ({
+ useSendContext: vi.fn(),
+}));
+
+vi.mock('@/internal/components/PressableIcon', () => ({
+ PressableIcon: vi.fn(({ children, onClick, className }) => (
+
+ )),
+}));
+
+vi.mock('@/internal/svg/backArrowSvg', () => ({
+ backArrowSvg:
Back Arrow
,
+}));
+
+vi.mock('@/internal/svg/closeSvg', () => ({
+ CloseSvg: () =>
Close
,
+}));
+
+describe('SendHeader', () => {
+ const mockUseWalletAdvancedContext = useWalletAdvancedContext as ReturnType<
+ typeof vi.fn
+ >;
+ const mockUseSendContext = useSendContext as ReturnType
;
+
+ const mockWalletAdvancedContext = {
+ setActiveFeature: vi.fn(),
+ };
+
+ const mockSendContext = {
+ selectedRecipientAddress: { value: null, display: null },
+ selectedToken: null,
+ handleResetTokenSelection: vi.fn(),
+ handleRecipientInputChange: vi.fn(),
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockUseWalletAdvancedContext.mockReturnValue(mockWalletAdvancedContext);
+ mockUseSendContext.mockReturnValue(mockSendContext);
+ });
+
+ it('renders with default label', () => {
+ render();
+
+ expect(screen.getByText('Send')).toBeInTheDocument();
+ expect(screen.getByTestId('mock-close-svg')).toBeInTheDocument();
+ expect(screen.queryByTestId('mock-back-arrow')).not.toBeInTheDocument();
+ });
+
+ it('renders with custom label', () => {
+ render();
+
+ expect(screen.getByText('Custom Send')).toBeInTheDocument();
+ });
+
+ it('applies custom classNames', () => {
+ const customClassNames = {
+ container: 'custom-container',
+ label: 'custom-label',
+ close: 'custom-close',
+ back: 'custom-back',
+ };
+
+ mockUseSendContext.mockReturnValue({
+ ...mockSendContext,
+ selectedRecipientAddress: { value: '0x123', display: 'user.eth' },
+ });
+
+ render();
+
+ const container = screen.queryByTestId('ockSendHeader');
+ expect(container).toHaveClass('custom-container');
+
+ const label = screen.queryByTestId('ockSendHeader_label');
+ expect(label).toHaveClass('custom-label');
+
+ const backButton = screen.queryByTestId('ockSendHeader_back');
+ expect(backButton?.firstElementChild).toHaveClass('custom-back');
+
+ const closeButton = screen.queryByTestId('ockSendHeader_close');
+ expect(closeButton?.firstElementChild).toHaveClass('custom-close');
+ });
+
+ it('shows back button when recipient address is selected', () => {
+ mockUseSendContext.mockReturnValue({
+ ...mockSendContext,
+ selectedRecipientAddress: {
+ value: '0x1234567890123456789012345678901234567890',
+ display: 'user.eth',
+ },
+ });
+
+ render();
+
+ expect(screen.getByTestId('mock-back-arrow')).toBeInTheDocument();
+ });
+
+ it('calls handleClose when close button is clicked', () => {
+ render();
+
+ const closeButton = screen.getByTestId('mock-pressable-icon');
+ fireEvent.click(closeButton);
+
+ expect(mockWalletAdvancedContext.setActiveFeature).toHaveBeenCalledWith(
+ null,
+ );
+ });
+
+ it('calls handleResetTokenSelection when back button is clicked and token is selected', () => {
+ mockUseSendContext.mockReturnValue({
+ ...mockSendContext,
+ selectedRecipientAddress: { value: '0x123', display: 'user.eth' },
+ selectedToken: { symbol: 'ETH' },
+ });
+
+ render();
+
+ const backButton = screen.getByTestId('mock-back-arrow');
+ fireEvent.click(backButton);
+
+ expect(mockSendContext.handleResetTokenSelection).toHaveBeenCalled();
+ expect(mockSendContext.handleRecipientInputChange).not.toHaveBeenCalled();
+ });
+
+ it('calls handleRecipientInputChange when back button is clicked and no token is selected', () => {
+ mockUseSendContext.mockReturnValue({
+ ...mockSendContext,
+ selectedRecipientAddress: { value: '0x123', display: 'user.eth' },
+ selectedToken: null,
+ });
+
+ render();
+
+ const backButton = screen.getByTestId('mock-back-arrow');
+ fireEvent.click(backButton);
+
+ expect(mockSendContext.handleRecipientInputChange).toHaveBeenCalled();
+ expect(mockSendContext.handleResetTokenSelection).not.toHaveBeenCalled();
+ });
+});
diff --git a/src/wallet/components/wallet-advanced-send/components/SendHeader.tsx b/src/wallet/components/wallet-advanced-send/components/SendHeader.tsx
new file mode 100644
index 0000000000..bdf92ec66e
--- /dev/null
+++ b/src/wallet/components/wallet-advanced-send/components/SendHeader.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import { PressableIcon } from '@/internal/components/PressableIcon';
+import { backArrowSvg } from '@/internal/svg/backArrowSvg';
+import { CloseSvg } from '@/internal/svg/closeSvg';
+import { cn, text } from '@/styles/theme';
+import { useCallback } from 'react';
+import { useWalletAdvancedContext } from '../../WalletAdvancedProvider';
+import { useSendContext } from './SendProvider';
+
+type SendHeaderProps = {
+ label?: string;
+ classNames?: {
+ container?: string;
+ label?: string;
+ close?: string;
+ back?: string;
+ };
+};
+
+export function SendHeader({ label = 'Send', classNames }: SendHeaderProps) {
+ const { setActiveFeature } = useWalletAdvancedContext();
+
+ const {
+ selectedRecipientAddress,
+ selectedToken,
+ handleResetTokenSelection,
+ handleRecipientInputChange,
+ } = useSendContext();
+
+ const handleBack = useCallback(() => {
+ if (selectedToken) {
+ handleResetTokenSelection();
+ } else if (selectedRecipientAddress.value) {
+ handleRecipientInputChange();
+ }
+ }, [
+ selectedRecipientAddress,
+ selectedToken,
+ handleResetTokenSelection,
+ handleRecipientInputChange,
+ ]);
+
+ const handleClose = useCallback(() => {
+ setActiveFeature(null);
+ }, [setActiveFeature]);
+
+ return (
+
+
+ {selectedRecipientAddress.value && (
+
+ {backArrowSvg}
+
+ )}
+
+
+ {label}
+
+
+