diff --git a/src/modules/components/address/addressInput/addressInput.test.tsx b/src/modules/components/address/addressInput/addressInput.test.tsx
index eb713378b..363e1b305 100644
--- a/src/modules/components/address/addressInput/addressInput.test.tsx
+++ b/src/modules/components/address/addressInput/addressInput.test.tsx
@@ -1,16 +1,38 @@
import { act, render, screen, within } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
+import type { Address } from 'viem';
+import type { UseEnsAddressReturnType, UseEnsNameReturnType } from 'wagmi';
+import * as wagmi from 'wagmi';
import { IconType, clipboardUtils } from '../../../../core';
+import { addressUtils } from '../../../utils';
import { OdsModulesProvider } from '../../odsModulesProvider';
import { AddressInput, type IAddressInputProps } from './addressInput';
+jest.mock('../../member', () => ({
+ MemberAvatar: () =>
,
+}));
+
describe(' component', () => {
const pasteMock = jest.spyOn(clipboardUtils, 'paste');
const copyMock = jest.spyOn(clipboardUtils, 'copy');
+ const getChecksumMock = jest.spyOn(addressUtils, 'getChecksum');
+
+ const useEnsAddressMock = jest.spyOn(wagmi, 'useEnsAddress');
+ const useEnsNameMock = jest.spyOn(wagmi, 'useEnsName');
+
+ beforeEach(() => {
+ getChecksumMock.mockImplementation((value) => value as Address);
+ useEnsAddressMock.mockReturnValue({ data: undefined, isFetching: false } as UseEnsAddressReturnType);
+ useEnsNameMock.mockReturnValue({ data: undefined, isFetching: false } as UseEnsNameReturnType);
+ });
+
afterEach(() => {
pasteMock.mockReset();
copyMock.mockReset();
+
+ useEnsAddressMock.mockReset();
+ useEnsNameMock.mockReset();
});
const createTestComponent = (props?: Partial) => {
@@ -92,4 +114,15 @@ describe(' component', () => {
expect(linkButton).toBeInTheDocument();
expect(linkButton.href).toEqual(`https://etherscan.io/address/${value}`);
});
+
+ it('renders a loder as avatar when loading the user address', () => {
+ useEnsAddressMock.mockReturnValue({ isFetching: true } as UseEnsAddressReturnType);
+ render(createTestComponent());
+ expect(screen.getByRole('progressbar')).toBeInTheDocument();
+ });
+
+ it('renders the avatar for the current address', () => {
+ render(createTestComponent());
+ expect(screen.getByTestId('member-avatar-mock')).toBeInTheDocument();
+ });
});
diff --git a/src/modules/components/address/addressInput/addressInput.tsx b/src/modules/components/address/addressInput/addressInput.tsx
index fd4412570..dade58a6a 100644
--- a/src/modules/components/address/addressInput/addressInput.tsx
+++ b/src/modules/components/address/addressInput/addressInput.tsx
@@ -1,11 +1,10 @@
import { useQueryClient } from '@tanstack/react-query';
import classNames from 'classnames';
import { forwardRef, useEffect, useRef, useState, type ChangeEvent, type FocusEvent } from 'react';
-import { getAddress, type Address } from 'viem';
+import { type Address } from 'viem';
import { normalize } from 'viem/ens';
import { useConfig, useEnsAddress, useEnsName, type UseEnsAddressParameters, type UseEnsNameParameters } from 'wagmi';
import {
- Avatar,
Button,
IconType,
InputContainer,
@@ -18,6 +17,7 @@ import {
} from '../../../../core';
import type { IWeb3ComponentProps } from '../../../types';
import { addressUtils, ensUtils } from '../../../utils';
+import { MemberAvatar } from '../../member';
export interface IAddressInputResolvedValue {
/**
@@ -137,7 +137,7 @@ export const AddressInput = forwardRef(
onAccept?.({ address: ensAddress, name: normalizedEns });
} else if (addressUtils.isAddress(debouncedValue)) {
// User input is a valid address with or without a ENS name linked to it
- const checksumAddress = getAddress(debouncedValue);
+ const checksumAddress = addressUtils.getChecksum(debouncedValue);
onAccept?.({ address: checksumAddress, name: ensName ?? undefined });
} else {
// User input is not a valid address nor ENS name
@@ -180,6 +180,8 @@ export const AddressInput = forwardRef(
const displayTruncatedAddress = value != null && addressUtils.isAddress(value) && !isFocused;
const displayTruncatedEns = value != null && ensUtils.isEnsName(value) && !isFocused;
+ const addressValue = ensAddress ?? (addressUtils.isAddress(value) ? value : undefined);
+
const processedValue = displayTruncatedAddress
? addressUtils.truncateAddress(value)
: displayTruncatedEns
@@ -190,7 +192,7 @@ export const AddressInput = forwardRef(
{isLoading &&
}
- {!isLoading &&
}
+ {!isLoading &&
}