feat: Add AddressInput component (#14571)

## **Description**

Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change? Porting `AddressInput` component
from the extension.

## **Related issues**

Fixes: #14329

## **Manual testing steps**

1. Pull down the branch and run in the simulator 
2. Navigate to the test-snaps page and trigger the custom UI from the
send flow snap
3. Observe the results.

## **Screenshots/Recordings**

### **After**

**Normal scenario**


https://github.com/user-attachments/assets/ac2199af-41c7-4a51-9e2e-66866252041c

**Matched, Disabled & Error**


https://github.com/user-attachments/assets/45ba0394-ddae-4c60-9d11-9a066de0f971

**Matched, Disabled**


https://github.com/user-attachments/assets/ed9e30ba-3767-4049-88e1-2c701d16d74f


## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: hmalik88

app/components/Snaps/SnapUIAddressInput/SnapUIAddressInput.test.tsx

@@ -0,0 +1,257 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { SnapUIAddressInput } from './SnapUIAddressInput';
+import { useSnapInterfaceContext } from '../SnapInterfaceContext';
+import { useDisplayName } from '../SnapUIAddress/useDisplayName';
+import { INPUT_TEST_ID } from '../../../component-library/components/Form/TextField/foundation/Input/Input.constants';
+import renderWithProvider from '../../../util/test/renderWithProvider';
+
+const mockInitialState = {
+  settings: {
+    useBlockieIcon: false,
+  },
+};
+
+jest.mock('../SnapInterfaceContext');
+jest.mock('../SnapUIAddress/useDisplayName');
+
+describe('SnapUIAddressInput', () => {
+  const mockHandleInputChange = jest.fn();
+  const mockSetCurrentFocusedInput = jest.fn();
+  const mockGetValue = jest.fn();
+
+  // Define a valid Ethereum chain ID for testing
+  const testChainId = `eip155:0`;
+  const testAddress = '0xabcd5d886577d5081b0c52e242ef29e70be3e7bc';
+
+  beforeEach(() => {
+    (useSnapInterfaceContext as jest.Mock).mockReturnValue({
+      handleInputChange: mockHandleInputChange,
+      getValue: mockGetValue,
+      setCurrentFocusedInput: mockSetCurrentFocusedInput,
+      focusedInput: null,
+    });
+
+    (useDisplayName as jest.Mock).mockReturnValue(undefined);
+
+    jest.clearAllMocks();
+  });
+
+  it('will render', () => {
+    const { getByTestId } = render(
+      <SnapUIAddressInput name="testAddress" chainId={testChainId} />,
+    );
+
+    expect(getByTestId(INPUT_TEST_ID)).toBeTruthy();
+  });
+
+  it('supports existing state', () => {
+    mockGetValue.mockReturnValue(`${testChainId}:${testAddress}`);
+
+    const { getByDisplayValue } = renderWithProvider(
+      <SnapUIAddressInput name="testAddress" chainId={testChainId} />,
+      { state: mockInitialState },
+    );
+
+    expect(getByDisplayValue(testAddress)).toBeTruthy();
+  });
+
+  it('can accept input', () => {
+    const { getByTestId } = renderWithProvider(
+      <SnapUIAddressInput name="testAddress" chainId={testChainId} />,
+      { state: mockInitialState },
+    );
+
+    const textfield = getByTestId(INPUT_TEST_ID);
+    fireEvent.changeText(textfield, '0x');
+    expect(mockHandleInputChange).toHaveBeenCalledWith(
+      'testAddress',
+      `${testChainId}:0x`,
+      undefined,
+    );
+  });
+
+  it('supports a placeholder', () => {
+    const placeholder = 'Enter ETH address';
+    const { getByTestId } = renderWithProvider(
+      <SnapUIAddressInput
+        name="testAddress"
+        chainId={testChainId}
+        placeholder={placeholder}
+      />,
+      { state: mockInitialState },
+    );
+
+    const textfield = getByTestId(INPUT_TEST_ID);
+    expect(textfield.props.placeholder).toBe(placeholder);
+  });
+
+  it('supports the disabled prop', () => {
+    const { getByTestId } = renderWithProvider(
+      <SnapUIAddressInput
+        name="testAddress"
+        chainId={testChainId}
+        disabled
+      />,
+      { state: mockInitialState },
+    );
+
+    const textfield = getByTestId(INPUT_TEST_ID);
+    expect(textfield.props.editable).toBe(false);
+  });
+
+  it('will render within a field', () => {
+    const label = 'Address Field';
+    const { getByText } = renderWithProvider(
+      <SnapUIAddressInput
+        name="testAddress"
+        chainId={testChainId}
+        label={label}
+      />,
+      { state: mockInitialState },
+    );
+
+    expect(getByText(label)).toBeTruthy();
+  });
+
+  it('will render a matched address name', () => {
+    mockGetValue.mockReturnValue(`${testChainId}:${testAddress}`);
+    const displayName = 'Vitalik.eth';
+    (useDisplayName as jest.Mock).mockReturnValue(displayName);
+
+    const { getByText } = renderWithProvider(
+      <SnapUIAddressInput name="testAddress" chainId={testChainId} />,
+      { state: mockInitialState },
+    );
+
+    expect(getByText(displayName)).toBeTruthy();
+    expect(getByText(testAddress)).toBeTruthy();
+  });
+
+  it('will render avatar when displayAvatar is true', () => {
+    mockGetValue.mockReturnValue(`${testChainId}:${testAddress}`);
+    const displayName = 'Vitalik.eth';
+    (useDisplayName as jest.Mock).mockReturnValue(displayName);
+
+    const { toJSON } = renderWithProvider(
+      <SnapUIAddressInput
+        name="testAddress"
+        chainId={testChainId}
+        displayAvatar
+      />,
+      { state: mockInitialState },
+    );
+
+
+    const tree = JSON.stringify(toJSON());
+    expect(tree.includes('RNSVGSvgView')).toBe(true);
+  });
+
+  it('will not render avatar when displayAvatar is false', () => {
+    mockGetValue.mockReturnValue(`${testChainId}:${testAddress}`);
+    const displayName = 'Vitalik.eth';
+    (useDisplayName as jest.Mock).mockReturnValue(displayName);
+
+    const { toJSON } = renderWithProvider(
+      <SnapUIAddressInput
+        name="testAddress"
+        chainId={testChainId}
+        displayAvatar={false}
+      />,
+      { state: mockInitialState },
+    );
+
+    const tree = JSON.stringify(toJSON());
+    expect(tree.includes('RNSVGSvgView')).toBe(false);
+  });
+
+  it('renders with an invalid CAIP Account ID', () => {
+    mockGetValue.mockReturnValue('eip155:0:https://foobar.baz/foobar');
+
+    const { toJSON } = renderWithProvider(<SnapUIAddressInput name="input" chainId="eip155:0" displayAvatar={false} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders the matched address info in a disabled state', () => {
+    mockGetValue.mockReturnValue(`${testChainId}:${testAddress}`);
+    const displayName = 'Vitalik.eth';
+    (useDisplayName as jest.Mock).mockReturnValue(displayName);
+
+    const { getByText, toJSON, getByTestId } = renderWithProvider(
+      <SnapUIAddressInput name="testAddress" chainId={testChainId} disabled />,
+      { state: mockInitialState },
+    );
+
+    expect(getByText(displayName)).toBeTruthy();
+    expect(getByText(testAddress)).toBeTruthy();
+    const closeButton = getByTestId('snap-ui-address-input__clear-button');
+    expect(closeButton).toBeTruthy();
+
+    const tree = JSON.stringify(toJSON());
+
+    expect(tree).toContain('"opacity":0.5');
+    expect(tree).toContain('"disabled":true');
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('does not render the matched address info if there is an error', () => {
+    mockGetValue.mockReturnValue(`${testChainId}:${testAddress}`);
+    const displayName = 'Vitalik.eth';
+    (useDisplayName as jest.Mock).mockReturnValue(displayName);
+
+    const { queryByText, queryByTestId, getByText, toJSON } = renderWithProvider(
+      <SnapUIAddressInput name="testAddress" chainId={testChainId} error="Error" />,
+      { state: mockInitialState },
+    );
+
+    expect(queryByText(displayName)).toBeFalsy();
+
+    const input = queryByTestId(INPUT_TEST_ID);
+
+    expect(input.props.value).toBe(testAddress);
+    expect(getByText('Error')).toBeTruthy();
+
+    const tree = JSON.stringify(toJSON());
+
+    expect(tree.includes('RNSVGSvgView')).toBe(true);
+  });
+
+  it('disables clear button for the input when disabled', () => {
+    mockGetValue.mockReturnValue(`${testChainId}:${testAddress}`);
+
+    const { getByTestId, toJSON } = renderWithProvider(
+      <SnapUIAddressInput name="testAddress" chainId={testChainId} disabled />,
+    );
+
+    const input = getByTestId(INPUT_TEST_ID);
+    expect(input.props.editable).toBe(false);
+    expect(input.props.value).toBe(testAddress);
+
+    const closeButton = getByTestId('snap-ui-address-input__clear-button');
+    expect(closeButton).toBeTruthy();
+
+    const tree = JSON.stringify(toJSON());
+    expect(tree).toContain('"disabled":true');
+  });
+
+  it('disables clear button for the matched address info when disabled', () => {
+    mockGetValue.mockReturnValue(`${testChainId}:${testAddress}`);
+    const displayName = 'Vitalik.eth';
+    (useDisplayName as jest.Mock).mockReturnValue(displayName);
+
+    const { getByText, getByTestId, toJSON } = renderWithProvider(
+      <SnapUIAddressInput name="testAddress" chainId={testChainId} disabled />,
+      { state: mockInitialState },
+    );
+
+    expect(getByText(displayName)).toBeTruthy();
+    expect(getByText(testAddress)).toBeTruthy();
+
+    const closeButton = getByTestId('snap-ui-address-input__clear-button');
+    expect(closeButton).toBeTruthy();
+
+    const tree = JSON.stringify(toJSON());
+    expect(tree).toContain('"disabled":true');
+  });
+});