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 && }