<0.000001
@@ -26,6 +27,7 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
>
<0.000001
diff --git a/ui/components/app/name/name-details/__snapshots__/name-details.test.tsx.snap b/ui/components/app/name/name-details/__snapshots__/name-details.test.tsx.snap
index a6d0df79843d..da6f598dfa5e 100644
--- a/ui/components/app/name/name-details/__snapshots__/name-details.test.tsx.snap
+++ b/ui/components/app/name/name-details/__snapshots__/name-details.test.tsx.snap
@@ -707,13 +707,48 @@ exports[`NameDetails renders with recognized name 1`] = `
class="name name__recognized_unsaved"
>
-
+
({
@@ -23,6 +26,7 @@ jest.mock('../../../../store/actions', () => ({
jest.mock('react-redux', () => ({
...jest.requireActual('react-redux'),
useDispatch: jest.fn(),
+ useSelector: jest.fn(),
}));
jest.useFakeTimers();
@@ -37,11 +41,11 @@ const SOURCE_ID_MOCK = 'ens';
const SOURCE_ID_2_MOCK = 'some_snap';
const PROPOSED_NAME_MOCK = 'TestProposedName';
const PROPOSED_NAME_2_MOCK = 'TestProposedName2';
+const VARIATION_MOCK = CHAIN_ID_MOCK;
const STATE_MOCK = {
metamask: {
...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
-
nameSources: {
[SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' },
},
@@ -85,13 +89,17 @@ const STATE_MOCK = {
},
},
useTokenDetection: true,
- tokenList: {
- '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d': {
- address: '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d',
- symbol: 'IUSD',
- name: 'iZUMi Bond USD',
- iconUrl:
- 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d.png',
+ tokensChainsCache: {
+ [VARIATION_MOCK]: {
+ data: {
+ '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d': {
+ address: '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d',
+ symbol: 'IUSD',
+ name: 'iZUMi Bond USD',
+ iconUrl:
+ 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d.png',
+ },
+ },
},
},
},
@@ -146,10 +154,74 @@ describe('NameDetails', () => {
const setNameMock = jest.mocked(setName);
const updateProposedNamesMock = jest.mocked(updateProposedNames);
const useDispatchMock = jest.mocked(useDispatch);
+ const useSelectorMock = jest.mocked(useSelector);
beforeEach(() => {
jest.resetAllMocks();
useDispatchMock.mockReturnValue(jest.fn());
+
+ useSelectorMock.mockImplementation((selector) => {
+ if (selector === getNames) {
+ return {
+ [NameType.ETHEREUM_ADDRESS]: {
+ [ADDRESS_SAVED_NAME_MOCK]: {
+ [VARIATION_MOCK]: {
+ name: SAVED_NAME_MOCK,
+ proposedNames: {
+ [SOURCE_ID_MOCK]: {
+ proposedNames: [PROPOSED_NAME_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ [SOURCE_ID_2_MOCK]: {
+ proposedNames: [PROPOSED_NAME_2_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ },
+ },
+ },
+ [ADDRESS_NO_NAME_MOCK]: {
+ [VARIATION_MOCK]: {
+ name: SAVED_NAME_MOCK,
+ proposedNames: {
+ [SOURCE_ID_MOCK]: {
+ proposedNames: [PROPOSED_NAME_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ [SOURCE_ID_2_MOCK]: {
+ proposedNames: [PROPOSED_NAME_2_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ },
+ },
+ },
+ },
+ };
+ } else if (selector === getNftContractsByAddressByChain) {
+ return {
+ [VARIATION_MOCK]: {
+ [ADDRESS_RECOGNIZED_MOCK]: {
+ name: 'iZUMi Bond USD',
+ },
+ },
+ };
+ } else if (selector === getDomainResolutions) {
+ return [
+ {
+ resolvedAddress: ADDRESS_SAVED_NAME_MOCK,
+ domainName: 'Domain name',
+ },
+ ];
+ } else if (selector === getNameSources) {
+ return {
+ [SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' },
+ };
+ }
+ return undefined;
+ });
});
it('renders when no address value is passed', () => {
@@ -157,6 +229,7 @@ describe('NameDetails', () => {
undefined}
/>,
store,
@@ -166,10 +239,38 @@ describe('NameDetails', () => {
});
it('renders with no saved name', () => {
+ useSelectorMock.mockImplementation((selector) => {
+ if (selector === getNames) {
+ return {
+ [NameType.ETHEREUM_ADDRESS]: {},
+ };
+ } else if (selector === getNftContractsByAddressByChain) {
+ return {
+ [VARIATION_MOCK]: {
+ [ADDRESS_RECOGNIZED_MOCK]: {
+ name: 'iZUMi Bond USD',
+ },
+ },
+ };
+ } else if (selector === getDomainResolutions) {
+ return [
+ {
+ resolvedAddress: ADDRESS_SAVED_NAME_MOCK,
+ },
+ ];
+ } else if (selector === getNameSources) {
+ return {
+ [SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' },
+ };
+ }
+ return undefined;
+ });
+
const { baseElement } = renderWithProvider(
undefined}
/>,
store,
@@ -183,6 +284,7 @@ describe('NameDetails', () => {
undefined}
/>,
store,
@@ -196,6 +298,7 @@ describe('NameDetails', () => {
undefined}
/>,
store,
@@ -209,6 +312,7 @@ describe('NameDetails', () => {
undefined}
/>,
store,
@@ -229,6 +333,7 @@ describe('NameDetails', () => {
undefined}
/>,
store,
@@ -251,6 +356,7 @@ describe('NameDetails', () => {
undefined}
/>,
store,
@@ -273,6 +379,7 @@ describe('NameDetails', () => {
undefined}
/>,
store,
@@ -295,6 +402,7 @@ describe('NameDetails', () => {
undefined}
/>,
store,
@@ -317,6 +425,7 @@ describe('NameDetails', () => {
undefined}
/>,
store,
@@ -336,6 +445,7 @@ describe('NameDetails', () => {
undefined}
/>,
store,
@@ -373,6 +483,7 @@ describe('NameDetails', () => {
undefined}
/>
,
@@ -392,6 +503,50 @@ describe('NameDetails', () => {
});
it('sends created event', async () => {
+ useSelectorMock.mockImplementation((selector) => {
+ if (selector === getNames) {
+ return {
+ [NameType.ETHEREUM_ADDRESS]: {
+ [ADDRESS_NO_NAME_MOCK]: {
+ [VARIATION_MOCK]: {
+ proposedNames: {
+ [SOURCE_ID_MOCK]: {
+ proposedNames: [PROPOSED_NAME_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ [SOURCE_ID_2_MOCK]: {
+ proposedNames: [PROPOSED_NAME_2_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ },
+ },
+ },
+ },
+ };
+ } else if (selector === getNftContractsByAddressByChain) {
+ return {
+ [VARIATION_MOCK]: {
+ [ADDRESS_RECOGNIZED_MOCK]: {
+ name: 'iZUMi Bond USD',
+ },
+ },
+ };
+ } else if (selector === getDomainResolutions) {
+ return [
+ {
+ resolvedAddress: ADDRESS_SAVED_NAME_MOCK,
+ },
+ ];
+ } else if (selector === getNameSources) {
+ return {
+ [SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' },
+ };
+ }
+ return undefined;
+ });
+
const trackEventMock = jest.fn();
const component = renderWithProvider(
@@ -399,6 +554,7 @@ describe('NameDetails', () => {
undefined}
/>
,
@@ -407,7 +563,7 @@ describe('NameDetails', () => {
await saveNameUsingDropdown(component, PROPOSED_NAME_MOCK);
- expect(trackEventMock).toHaveBeenCalledWith({
+ expect(trackEventMock).toHaveBeenNthCalledWith(2, {
event: MetaMetricsEventName.PetnameCreated,
category: MetaMetricsEventCategory.Petnames,
properties: {
@@ -419,6 +575,69 @@ describe('NameDetails', () => {
});
it('sends updated event', async () => {
+ useSelectorMock.mockImplementation((selector) => {
+ if (selector === getNames) {
+ return {
+ [NameType.ETHEREUM_ADDRESS]: {
+ [ADDRESS_SAVED_NAME_MOCK]: {
+ [CHAIN_ID_MOCK]: {
+ proposedNames: {
+ [SOURCE_ID_MOCK]: {
+ proposedNames: [PROPOSED_NAME_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ [SOURCE_ID_2_MOCK]: {
+ proposedNames: [PROPOSED_NAME_2_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ },
+ name: SAVED_NAME_MOCK,
+ sourceId: SOURCE_ID_MOCK,
+ },
+ },
+ [ADDRESS_NO_NAME_MOCK]: {
+ [CHAIN_ID_MOCK]: {
+ proposedNames: {
+ [SOURCE_ID_MOCK]: {
+ proposedNames: [PROPOSED_NAME_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ [SOURCE_ID_2_MOCK]: {
+ proposedNames: [PROPOSED_NAME_2_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ },
+ name: null,
+ },
+ },
+ },
+ };
+ } else if (selector === getNftContractsByAddressByChain) {
+ return {
+ [VARIATION_MOCK]: {
+ [ADDRESS_RECOGNIZED_MOCK]: {
+ name: 'iZUMi Bond USD',
+ },
+ },
+ };
+ } else if (selector === getDomainResolutions) {
+ return [
+ {
+ resolvedAddress: ADDRESS_SAVED_NAME_MOCK,
+ },
+ ];
+ } else if (selector === getNameSources) {
+ return {
+ [SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' },
+ };
+ }
+ return undefined;
+ });
+
const trackEventMock = jest.fn();
const component = renderWithProvider(
@@ -426,6 +645,7 @@ describe('NameDetails', () => {
undefined}
/>
,
@@ -434,7 +654,7 @@ describe('NameDetails', () => {
await saveNameUsingDropdown(component, PROPOSED_NAME_2_MOCK);
- expect(trackEventMock).toHaveBeenCalledWith({
+ expect(trackEventMock).toHaveBeenNthCalledWith(2, {
event: MetaMetricsEventName.PetnameUpdated,
category: MetaMetricsEventCategory.Petnames,
properties: {
@@ -447,6 +667,69 @@ describe('NameDetails', () => {
});
it('sends deleted event', async () => {
+ useSelectorMock.mockImplementation((selector) => {
+ if (selector === getNames) {
+ return {
+ [NameType.ETHEREUM_ADDRESS]: {
+ [ADDRESS_SAVED_NAME_MOCK]: {
+ [CHAIN_ID_MOCK]: {
+ proposedNames: {
+ [SOURCE_ID_MOCK]: {
+ proposedNames: [PROPOSED_NAME_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ [SOURCE_ID_2_MOCK]: {
+ proposedNames: [PROPOSED_NAME_2_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ },
+ name: SAVED_NAME_MOCK,
+ sourceId: SOURCE_ID_MOCK,
+ },
+ },
+ [ADDRESS_NO_NAME_MOCK]: {
+ [CHAIN_ID_MOCK]: {
+ proposedNames: {
+ [SOURCE_ID_MOCK]: {
+ proposedNames: [PROPOSED_NAME_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ [SOURCE_ID_2_MOCK]: {
+ proposedNames: [PROPOSED_NAME_2_MOCK],
+ lastRequestTime: null,
+ retryDelay: null,
+ },
+ },
+ name: null,
+ },
+ },
+ },
+ };
+ } else if (selector === getNftContractsByAddressByChain) {
+ return {
+ [VARIATION_MOCK]: {
+ [ADDRESS_RECOGNIZED_MOCK]: {
+ name: 'iZUMi Bond USD',
+ },
+ },
+ };
+ } else if (selector === getDomainResolutions) {
+ return [
+ {
+ resolvedAddress: ADDRESS_SAVED_NAME_MOCK,
+ },
+ ];
+ } else if (selector === getNameSources) {
+ return {
+ [SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' },
+ };
+ }
+ return undefined;
+ });
+
const trackEventMock = jest.fn();
const component = renderWithProvider(
@@ -454,6 +737,7 @@ describe('NameDetails', () => {
undefined}
/>
,
@@ -462,7 +746,7 @@ describe('NameDetails', () => {
await saveNameUsingTextField(component, '');
- expect(trackEventMock).toHaveBeenCalledWith({
+ expect(trackEventMock).toHaveBeenNthCalledWith(2, {
event: MetaMetricsEventName.PetnameDeleted,
category: MetaMetricsEventCategory.Petnames,
properties: {
diff --git a/ui/components/app/name/name-details/name-details.tsx b/ui/components/app/name/name-details/name-details.tsx
index 22b0445a0ad5..1bb2b1f1e478 100644
--- a/ui/components/app/name/name-details/name-details.tsx
+++ b/ui/components/app/name/name-details/name-details.tsx
@@ -46,7 +46,7 @@ import Name from '../name';
import FormComboField, {
FormComboFieldOption,
} from '../../../ui/form-combo-field/form-combo-field';
-import { getCurrentChainId, getNameSources } from '../../../../selectors';
+import { getNameSources } from '../../../../selectors';
import {
setName as saveName,
updateProposedNames,
@@ -64,6 +64,7 @@ export type NameDetailsProps = {
sourcePriority?: string[];
type: NameType;
value: string;
+ variation: string;
};
type ProposedNameOption = Required & {
@@ -157,12 +158,14 @@ function getInitialSources(
return [...resultSources, ...stateSources].sort();
}
-function useProposedNames(value: string, type: NameType, chainId: string) {
+function useProposedNames(value: string, type: NameType, variation: string) {
const dispatch = useDispatch();
- const { proposedNames } = useName(value, type);
+ const { proposedNames } = useName(value, type, variation);
+
// TODO: Replace `any` with type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const updateInterval = useRef();
+
const [initialSources, setInitialSources] = useState();
useEffect(() => {
@@ -178,7 +181,7 @@ function useProposedNames(value: string, type: NameType, chainId: string) {
value,
type,
onlyUpdateAfterDelay: true,
- variation: chainId,
+ variation,
}),
// TODO: Replace `any` with type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -196,7 +199,7 @@ function useProposedNames(value: string, type: NameType, chainId: string) {
updateInterval.current = setInterval(update, UPDATE_DELAY);
return reset;
- }, [value, type, chainId, dispatch, initialSources, setInitialSources]);
+ }, [value, type, variation, dispatch, initialSources, setInitialSources]);
return { proposedNames, initialSources };
}
@@ -205,13 +208,20 @@ export default function NameDetails({
onClose,
type,
value,
+ variation,
}: NameDetailsProps) {
- const chainId = useSelector(getCurrentChainId);
- const { name: savedPetname, sourceId: savedSourceId } = useName(value, type);
- const { name: displayName, hasPetname: hasSavedPetname } = useDisplayName(
+ const { name: savedPetname, sourceId: savedSourceId } = useName(
value,
type,
+ variation,
);
+
+ const { name: displayName, hasPetname: hasSavedPetname } = useDisplayName({
+ value,
+ type,
+ variation,
+ });
+
const nameSources = useSelector(getNameSources, isEqual);
const [name, setName] = useState('');
const [openMetricSent, setOpenMetricSent] = useState(false);
@@ -226,7 +236,7 @@ export default function NameDetails({
const { proposedNames, initialSources } = useProposedNames(
value,
type,
- chainId,
+ variation,
);
const [copiedAddress, handleCopyAddress] = useCopyToClipboard() as [
@@ -275,12 +285,12 @@ export default function NameDetails({
type,
name: name?.length ? name : null,
sourceId: selectedSourceId,
- variation: chainId,
+ variation,
}),
);
onClose();
- }, [name, selectedSourceId, onClose, trackPetnamesSaveEvent, chainId]);
+ }, [name, selectedSourceId, onClose, trackPetnamesSaveEvent, variation]);
const handleClose = useCallback(() => {
onClose();
@@ -333,6 +343,7 @@ export default function NameDetails({
diff --git a/ui/components/app/name/name.stories.tsx b/ui/components/app/name/name.stories.tsx
index fb23334a8776..732c9059b530 100644
--- a/ui/components/app/name/name.stories.tsx
+++ b/ui/components/app/name/name.stories.tsx
@@ -3,108 +3,75 @@ import React from 'react';
import { NameType } from '@metamask/name-controller';
import { Provider } from 'react-redux';
import configureStore from '../../../store/store';
-import Name from './name';
-import { mockNetworkState } from '../../../../test/stub/networks';
+import Name, { NameProps } from './name';
+import mockState from '../../../../test/data/mock-state.json';
+import {
+ EXPERIENCES_TYPE,
+ FIRST_PARTY_CONTRACT_NAMES,
+} from '../../../../shared/constants/first-party-contracts';
+import { cloneDeep } from 'lodash';
-const addressNoSavedNameMock = '0xc0ffee254729296a45a3885639ac7e10f9d54978';
-const addressSavedNameMock = '0xc0ffee254729296a45a3885639ac7e10f9d54977';
-const addressSavedTokenMock = '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d';
-const addressUnsavedTokenMock = '0x0a5e677a6a24b2f1a2bf4f3bffc443231d2fdec8';
-const chainIdMock = '0x1';
+const ADDRESS_MOCK = '0xc0ffee254729296a45a3885639ac7e10f9d54978';
+const ADDRESS_NFT_MOCK = '0xc0ffee254729296a45a3885639ac7e10f9d54979';
+const VARIATION_MOCK = '0x1';
+const NAME_MOCK = 'Saved Name';
-const storeMock = configureStore({
+const ADDRESS_FIRST_PARTY_MOCK =
+ FIRST_PARTY_CONTRACT_NAMES[EXPERIENCES_TYPE.METAMASK_BRIDGE][
+ VARIATION_MOCK
+ ].toLowerCase();
+
+const PROPOSED_NAMES_MOCK = {
+ ens: {
+ proposedNames: ['test.eth'],
+ lastRequestTime: 123,
+ retryDelay: null,
+ },
+ etherscan: {
+ proposedNames: ['TestContract'],
+ lastRequestTime: 123,
+ retryDelay: null,
+ },
+ token: {
+ proposedNames: ['Test Token'],
+ lastRequestTime: 123,
+ retryDelay: null,
+ },
+ lens: {
+ proposedNames: ['test.lens'],
+ lastRequestTime: 123,
+ retryDelay: null,
+ },
+};
+
+const STATE_MOCK = {
+ ...mockState,
metamask: {
- ...mockNetworkState({chainId: chainIdMock}),
+ ...mockState.metamask,
useTokenDetection: true,
- tokenList: {
- '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d': {
- address: '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d',
- symbol: 'IUSD',
- name: 'iZUMi Bond USD',
- iconUrl:
- 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d.png',
- },
- '0x0a5e677a6a24b2f1a2bf4f3bffc443231d2fdec8': {
- address: '0x0a5e677a6a24b2f1a2bf4f3bffc443231d2fdec8',
- symbol: 'USX',
- name: 'dForce USD',
- iconUrl:
- 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x0a5e677a6a24b2f1a2bf4f3bffc443231d2fdec8.png',
- },
- },
+ tokensChainsCache: {},
names: {
[NameType.ETHEREUM_ADDRESS]: {
- [addressNoSavedNameMock]: {
- [chainIdMock]: {
- proposedNames: {
- ens: {
- proposedNames: ['test.eth'],
- lastRequestTime: 123,
- retryDelay: null,
- },
- etherscan: {
- proposedNames: ['TestContract'],
- lastRequestTime: 123,
- retryDelay: null,
- },
- token: {
- proposedNames: ['Test Token'],
- lastRequestTime: 123,
- retryDelay: null,
- },
- lens: {
- proposedNames: ['test.lens'],
- lastRequestTime: 123,
- retryDelay: null,
- },
- },
+ [ADDRESS_MOCK]: {
+ [VARIATION_MOCK]: {
+ proposedNames: PROPOSED_NAMES_MOCK,
},
},
- [addressSavedNameMock]: {
- [chainIdMock]: {
- proposedNames: {
- ens: {
- proposedNames: ['test.eth'],
- lastRequestTime: 123,
- retryDelay: null,
- },
- etherscan: {
- proposedNames: ['TestContract'],
- lastRequestTime: 123,
- retryDelay: null,
- },
- token: {
- proposedNames: ['Test Token'],
- lastRequestTime: 123,
- retryDelay: null,
- },
- lens: {
- proposedNames: ['test.lens'],
- lastRequestTime: 123,
- retryDelay: null,
- },
- },
- name: 'Test Token',
- sourceId: 'token',
+ [ADDRESS_NFT_MOCK]: {
+ [VARIATION_MOCK]: {
+ proposedNames: PROPOSED_NAMES_MOCK,
},
},
- [addressSavedTokenMock]: {
- [chainIdMock]: {
- proposedNames: {},
- name: 'Saved Token Name',
- sourceId: 'token',
+ [ADDRESS_FIRST_PARTY_MOCK]: {
+ [VARIATION_MOCK]: {
+ proposedNames: PROPOSED_NAMES_MOCK,
},
},
},
},
- nameSources: {
- ens: { label: 'Ethereum Name Service (ENS)' },
- etherscan: { label: 'Etherscan (Verified Contract Name)' },
- token: { label: 'Blockchain (Token Name)' },
- lens: { label: 'Lens Protocol' },
- },
+ nameSources: {},
},
-});
+};
/**
* Displays the saved name for a raw value such as an Ethereum address.
@@ -125,6 +92,10 @@ export default {
description: `The type of value.
Limited to the values in the \`NameType\` enum.`,
},
+ variation: {
+ control: 'text',
+ description: `The variation of the value.
For example, the chain ID if the type is Ethereum address.`,
+ },
disableEdit: {
control: 'boolean',
description: `Whether to prevent the modal from opening when the component is clicked.`,
@@ -134,68 +105,141 @@ export default {
},
},
args: {
- value: addressNoSavedNameMock,
+ value: ADDRESS_MOCK,
type: NameType.ETHEREUM_ADDRESS,
+ variation: VARIATION_MOCK,
disableEdit: false,
},
- decorators: [(story) => {story()}],
+ render: ({ state, ...args }) => {
+ const finalState = cloneDeep(STATE_MOCK);
+ state?.(finalState);
+
+ return (
+
+
+
+ );
+ },
};
-// eslint-disable-next-line jsdoc/require-param
/**
* No name has been saved for the value and type.
*/
-export const DefaultStory = (args) => {
- return ;
+export const NoSavedName = {
+ name: 'No Saved Name',
+ args: {
+ value: ADDRESS_MOCK,
+ type: NameType.ETHEREUM_ADDRESS,
+ variation: VARIATION_MOCK,
+ },
};
-DefaultStory.storyName = 'No Saved Name';
-
/**
* A name was previously saved for this value and type.
* The component will still display a modal when clicked to edit the name.
*/
-export const SavedNameStory = () => {
- return ;
+export const SavedNameStory = {
+ name: 'Saved Name',
+ args: {
+ value: ADDRESS_MOCK,
+ type: NameType.ETHEREUM_ADDRESS,
+ variation: VARIATION_MOCK,
+ state: (state) => {
+ state.metamask.names[NameType.ETHEREUM_ADDRESS][ADDRESS_MOCK][
+ VARIATION_MOCK
+ ].name = NAME_MOCK;
+ },
+ },
};
-SavedNameStory.storyName = 'Saved Name';
-
/**
* No name was previously saved for this recognized token.
* The component will still display a modal when clicked to edit the name.
*/
-export const UnsavedTokenNameStory = () => {
- return (
-
- );
+export const DefaultTokenNameStory = {
+ name: 'Default ERC-20 Token Name',
+ args: {
+ value: ADDRESS_MOCK,
+ type: NameType.ETHEREUM_ADDRESS,
+ variation: VARIATION_MOCK,
+ state: (state) => {
+ state.metamask.tokensChainsCache = {
+ [VARIATION_MOCK]: {
+ data: {
+ [ADDRESS_MOCK]: {
+ address: ADDRESS_MOCK,
+ symbol: 'IUSD',
+ name: 'iZUMi Bond USD',
+ iconUrl:
+ 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d.png',
+ },
+ },
+ },
+ };
+ },
+ },
};
-UnsavedTokenNameStory.storyName = 'Unsaved Token Name';
+/**
+ * No name was previously saved for this watched NFT.
+ * The component will still display a modal when clicked to edit the name.
+ */
+export const DefaultWatchedNFTNameStory = {
+ name: 'Default Watched NFT Name',
+ args: {
+ value: ADDRESS_MOCK,
+ type: NameType.ETHEREUM_ADDRESS,
+ variation: VARIATION_MOCK,
+ state: (state) => {
+ state.metamask.allNftContracts = {
+ '0x123': {
+ [VARIATION_MOCK]: [
+ {
+ address: ADDRESS_MOCK,
+ name: 'Everything I Own',
+ },
+ ],
+ },
+ };
+ },
+ },
+};
/**
- * A name was previously saved for this recognized token.
+ * No name was previously saved for this recognized NFT.
* The component will still display a modal when clicked to edit the name.
*/
-export const SavedTokenNameStory = () => {
- return (
-
- );
+export const DefaultNFTNameStory = {
+ name: 'Default NFT Name',
+ args: {
+ value: ADDRESS_NFT_MOCK,
+ type: NameType.ETHEREUM_ADDRESS,
+ variation: VARIATION_MOCK,
+ },
};
-SavedTokenNameStory.storyName = 'Saved Token Name';
+/**
+ * No name was previously saved for this first-party contract.
+ * The component will still display a modal when clicked to edit the name.
+ */
+export const DefaultFirstPartyNameStory = {
+ name: 'Default First-Party Name',
+ args: {
+ value: ADDRESS_FIRST_PARTY_MOCK,
+ type: NameType.ETHEREUM_ADDRESS,
+ variation: VARIATION_MOCK,
+ },
+};
/**
* Clicking the component will not display a modal to edit the name.
*/
-export const EditDisabledStory = () => {
- return (
-
- );
+export const EditDisabledStory = {
+ name: 'Edit Disabled',
+ args: {
+ value: ADDRESS_MOCK,
+ type: NameType.ETHEREUM_ADDRESS,
+ variation: VARIATION_MOCK,
+ disableEdit: true,
+ },
};
-
-EditDisabledStory.storyName = 'Edit Disabled';
diff --git a/ui/components/app/name/name.test.tsx b/ui/components/app/name/name.test.tsx
index 061d39e670de..33648e98e38c 100644
--- a/ui/components/app/name/name.test.tsx
+++ b/ui/components/app/name/name.test.tsx
@@ -22,6 +22,7 @@ jest.mock('react-redux', () => ({
const ADDRESS_NO_SAVED_NAME_MOCK = '0xc0ffee254729296a45a3885639ac7e10f9d54977';
const ADDRESS_SAVED_NAME_MOCK = '0xc0ffee254729296a45a3885639ac7e10f9d54979';
const SAVED_NAME_MOCK = 'TestName';
+const VARIATION_MOCK = 'testVariation';
const STATE_MOCK = {
metamask: {
@@ -44,7 +45,11 @@ describe('Name', () => {
});
const { container } = renderWithProvider(
- ,
+ ,
store,
);
@@ -61,6 +66,7 @@ describe('Name', () => {
,
store,
);
@@ -75,7 +81,11 @@ describe('Name', () => {
});
const { container } = renderWithProvider(
- ,
+ ,
store,
);
@@ -90,7 +100,11 @@ describe('Name', () => {
});
const { container } = renderWithProvider(
- ,
+ ,
store,
);
@@ -114,7 +128,11 @@ describe('Name', () => {
renderWithProvider(
-
+
,
store,
);
diff --git a/ui/components/app/name/name.tsx b/ui/components/app/name/name.tsx
index 5af2851c8885..2097d21faf07 100644
--- a/ui/components/app/name/name.tsx
+++ b/ui/components/app/name/name.tsx
@@ -38,6 +38,12 @@ export type NameProps = {
/** The raw value to display the name of. */
value: string;
+
+ /**
+ * The variation of the value.
+ * Such as the chain ID if the `type` is an Ethereum address.
+ */
+ variation: string;
};
function formatValue(value: string, type: NameType): string {
@@ -61,15 +67,17 @@ const Name = memo(
disableEdit,
internal,
preferContractSymbol = false,
+ variation,
}: NameProps) => {
const [modalOpen, setModalOpen] = useState(false);
const trackEvent = useContext(MetaMetricsContext);
- const { name, hasPetname, image } = useDisplayName(
+ const { name, hasPetname, image } = useDisplayName({
value,
type,
preferContractSymbol,
- );
+ variation,
+ });
useEffect(() => {
if (internal) {
@@ -100,7 +108,12 @@ const Name = memo(
return (
{!disableEdit && modalOpen && (
-
+
)}
{
const tooltipTitle = await waitFor(() =>
container.querySelector(
- '[data-original-title="This account is not set up for use with goerli"]',
+ '[data-original-title="This account is not set up for use with Goerli"]',
),
);
diff --git a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap
index d29236409dbc..deb95bd48555 100644
--- a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap
+++ b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap
@@ -3,7 +3,7 @@
exports[`SnapUIAddress renders Bitcoin address 1`] = `
128Lkh3...Mp8p6
@@ -56,7 +57,7 @@ exports[`SnapUIAddress renders Bitcoin address 1`] = `
exports[`SnapUIAddress renders Bitcoin address with blockie 1`] = `
128Lkh3...Mp8p6
@@ -77,7 +79,7 @@ exports[`SnapUIAddress renders Bitcoin address with blockie 1`] = `
exports[`SnapUIAddress renders Cosmos address 1`] = `
cosmos1...6hdc0
@@ -130,7 +133,7 @@ exports[`SnapUIAddress renders Cosmos address 1`] = `
exports[`SnapUIAddress renders Cosmos address with blockie 1`] = `
cosmos1...6hdc0
@@ -151,7 +155,7 @@ exports[`SnapUIAddress renders Cosmos address with blockie 1`] = `
exports[`SnapUIAddress renders Ethereum address 1`] = `
0xab16a...Bfcdb
@@ -204,7 +209,7 @@ exports[`SnapUIAddress renders Ethereum address 1`] = `
exports[`SnapUIAddress renders Ethereum address with blockie 1`] = `
0xab16a...Bfcdb
@@ -225,7 +231,7 @@ exports[`SnapUIAddress renders Ethereum address with blockie 1`] = `
exports[`SnapUIAddress renders Hedera address 1`] = `
0.0.123...zbhlt
@@ -278,7 +285,7 @@ exports[`SnapUIAddress renders Hedera address 1`] = `
exports[`SnapUIAddress renders Hedera address with blockie 1`] = `
0.0.123...zbhlt
@@ -299,7 +307,7 @@ exports[`SnapUIAddress renders Hedera address with blockie 1`] = `
exports[`SnapUIAddress renders Polkadot address 1`] = `