From 8e3a7f4f95b1040be5816044a950a31dc4c5e809 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Mar 2026 21:52:33 +0000 Subject: [PATCH 01/11] Initial plan From 95375abd71a55b7f78a3a6e92c3595a9f447801e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Mar 2026 08:47:55 +0000 Subject: [PATCH 02/11] Initial plan From ba1ba1374b1b22f5bf590e974ad226c6e657ccfe Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Mar 2026 08:50:19 +0000 Subject: [PATCH 03/11] fix(zero-warnings): tackle easy lint warnings Co-authored-by: HowardBraham <539738+HowardBraham@users.noreply.github.com> --- ui/components/app/name/name.stories.tsx | 1 - ui/components/app/snaps/snap-home-page/snap-home-renderer.js | 4 ++-- ui/components/app/snaps/snap-home-page/useSnapHome.js | 2 +- .../app/snaps/snap-settings-page/snap-settings-renderer.tsx | 2 +- .../app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx | 4 ++-- .../component-library/sensitive-text/sensitive-text.tsx | 2 +- .../account-details-row/account-details-row.stories.tsx | 1 - ui/components/multichain/nft-item/nft-item.tsx | 1 - .../pages/review-permissions-page/review-permissions-page.tsx | 2 +- ui/hooks/snaps/useSnapSettings.ts | 2 +- 10 files changed, 9 insertions(+), 12 deletions(-) diff --git a/ui/components/app/name/name.stories.tsx b/ui/components/app/name/name.stories.tsx index c5615c9a65c5..ca97d910fc96 100644 --- a/ui/components/app/name/name.stories.tsx +++ b/ui/components/app/name/name.stories.tsx @@ -126,7 +126,6 @@ export default { * No name has been saved for the value and type. */ export const NoSavedName = { - name: 'No Saved Name', args: { value: ADDRESS_MOCK, type: NameType.ETHEREUM_ADDRESS, diff --git a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js index 150d6439385b..7d925d3c1691 100644 --- a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js +++ b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js @@ -46,7 +46,7 @@ export const SnapHomeRenderer = ({ snapId }) => { useEffect(() => { return () => interfaceId && dispatch(deleteInterface(interfaceId)); - }, [interfaceId]); + }, [interfaceId, dispatch]); useEffect(() => { // Snaps are allowed to redirect to their own pending confirmations (templated or not) @@ -62,7 +62,7 @@ export const SnapHomeRenderer = ({ snapId }) => { } else if (snapApproval) { navigate(`${CONFIRM_TRANSACTION_ROUTE}/${snapApproval.id}`); } - }, [unapprovedTemplatedConfirmations, unapprovedConfirmations, navigate]); + }, [unapprovedTemplatedConfirmations, unapprovedConfirmations, navigate, snapId]); if (error) { return ( diff --git a/ui/components/app/snaps/snap-home-page/useSnapHome.js b/ui/components/app/snaps/snap-home-page/useSnapHome.js index 8214e7f36c4f..57eb807939a6 100644 --- a/ui/components/app/snaps/snap-home-page/useSnapHome.js +++ b/ui/components/app/snaps/snap-home-page/useSnapHome.js @@ -43,7 +43,7 @@ export function useSnapHome({ snapId }) { } fetchPage(); return () => (cancelled = true); - }, [snapId]); + }, [snapId, dispatch]); return { data, error, loading }; } diff --git a/ui/components/app/snaps/snap-settings-page/snap-settings-renderer.tsx b/ui/components/app/snaps/snap-settings-page/snap-settings-renderer.tsx index 333505a18f9e..aaa4eb54ac38 100644 --- a/ui/components/app/snaps/snap-settings-page/snap-settings-renderer.tsx +++ b/ui/components/app/snaps/snap-settings-page/snap-settings-renderer.tsx @@ -45,7 +45,7 @@ export const SnapSettingsRenderer: FunctionComponent< return () => { interfaceId && dispatch(deleteInterface(interfaceId)); }; - }, [interfaceId]); + }, [interfaceId, dispatch]); if (!snapId) { return null; diff --git a/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx b/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx index 8f2e33514b2b..801775c667a2 100644 --- a/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx +++ b/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx @@ -48,7 +48,7 @@ export const SnapUIRadioGroup: FunctionComponent = ({ if (initialValue && value !== initialValue) { setValue(initialValue); } - }, [initialValue]); + }, [initialValue, value]); const handleChange = (newValue: string) => { setValue(newValue); @@ -58,7 +58,7 @@ export const SnapUIRadioGroup: FunctionComponent = ({ const displayRadioOptions = (options: SnapUIRadioOption[]) => { return options.map((option: SnapUIRadioOption) => { return ( - + '•'.repeat(getFallbackLength(adjustedLength)), - [length, getFallbackLength], + [adjustedLength, getFallbackLength], ); return ( diff --git a/ui/components/multichain-accounts/account-details-row/account-details-row.stories.tsx b/ui/components/multichain-accounts/account-details-row/account-details-row.stories.tsx index 4e25b41f69aa..b360a3cdf58e 100644 --- a/ui/components/multichain-accounts/account-details-row/account-details-row.stories.tsx +++ b/ui/components/multichain-accounts/account-details-row/account-details-row.stories.tsx @@ -49,7 +49,6 @@ const Template: StoryFn = (args) => ( ); export const Default = Template.bind({}); -Default.storyName = 'Default'; export const WithEditButton = Template.bind({}); WithEditButton.args = { diff --git a/ui/components/multichain/nft-item/nft-item.tsx b/ui/components/multichain/nft-item/nft-item.tsx index e2b2117eb0f2..4846997fb968 100644 --- a/ui/components/multichain/nft-item/nft-item.tsx +++ b/ui/components/multichain/nft-item/nft-item.tsx @@ -37,7 +37,6 @@ type NftItemProps = { alt: string; src: string | undefined; name?: string; - tokenId?: string; networkName: string; networkSrc?: string; onClick?: () => void; diff --git a/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx index e31fc4c185ac..811191bf3c2a 100644 --- a/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx +++ b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx @@ -85,7 +85,7 @@ export const ReviewPermissions = () => { setShowNetworkToast(showPermittedNetworkToastOpen); dispatch(hidePermittedNetworkToast()); } - }, [showPermittedNetworkToastOpen]); + }, [showPermittedNetworkToastOpen, dispatch]); const requestAccountsAndChainPermissions = async () => { const requestId = await dispatch( diff --git a/ui/hooks/snaps/useSnapSettings.ts b/ui/hooks/snaps/useSnapSettings.ts index 94485f328a4a..4b0a702c48ab 100644 --- a/ui/hooks/snaps/useSnapSettings.ts +++ b/ui/hooks/snaps/useSnapSettings.ts @@ -49,7 +49,7 @@ export function useSnapSettings({ snapId }: { snapId?: string }) { return () => { cancelled = true; }; - }, [snapId]); + }, [snapId, dispatch]); return { data, error, loading }; } From cd9111691d9819f2c60de3659bdf383746582ded Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Mar 2026 09:21:45 +0000 Subject: [PATCH 04/11] fix(zero-warnings): fix prettier formatting errors in snap-home-renderer and snap-ui-radio-group Co-authored-by: HowardBraham <539738+HowardBraham@users.noreply.github.com> --- .../app/snaps/snap-home-page/snap-home-renderer.js | 7 ++++++- .../app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx | 6 +++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js index 7d925d3c1691..5cce976ac8ff 100644 --- a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js +++ b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js @@ -62,7 +62,12 @@ export const SnapHomeRenderer = ({ snapId }) => { } else if (snapApproval) { navigate(`${CONFIRM_TRANSACTION_ROUTE}/${snapApproval.id}`); } - }, [unapprovedTemplatedConfirmations, unapprovedConfirmations, navigate, snapId]); + }, [ + unapprovedTemplatedConfirmations, + unapprovedConfirmations, + navigate, + snapId, + ]); if (error) { return ( diff --git a/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx b/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx index 801775c667a2..9f0db19e43c2 100644 --- a/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx +++ b/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx @@ -58,7 +58,11 @@ export const SnapUIRadioGroup: FunctionComponent = ({ const displayRadioOptions = (options: SnapUIRadioOption[]) => { return options.map((option: SnapUIRadioOption) => { return ( - + Date: Wed, 11 Mar 2026 09:48:53 +0000 Subject: [PATCH 05/11] fix(zero-warnings): remove tokenId prop from NftItem callers to fix TS2322 errors Co-authored-by: HowardBraham <539738+HowardBraham@users.noreply.github.com> --- ui/components/app/assets/nfts/nft-details/nft-full-image.tsx | 1 - .../notification-detail-nft/notification-detail-nft.tsx | 4 ---- .../confirm/info/shared/nft-send-heading/nft-send-heading.tsx | 3 --- 3 files changed, 8 deletions(-) diff --git a/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx b/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx index 3222da2a5047..aabd23226eec 100644 --- a/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx +++ b/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx @@ -133,7 +133,6 @@ export default function NftFullImage() { src={isImageHosted ? image || imageFromTokenURI : nftImageURL} alt={nftImageAlt} name={name ?? ''} - tokenId={tokenId} networkName={nftChainNetwork?.name ?? ''} networkSrc={nftChainImage} isIpfsURL={isIpfsURL} diff --git a/ui/components/multichain/notification-detail-nft/notification-detail-nft.tsx b/ui/components/multichain/notification-detail-nft/notification-detail-nft.tsx index 881deb00702e..66c20466d012 100644 --- a/ui/components/multichain/notification-detail-nft/notification-detail-nft.tsx +++ b/ui/components/multichain/notification-detail-nft/notification-detail-nft.tsx @@ -11,7 +11,6 @@ export type NotificationDetailNftProps = { networkName: string; networkSrc: string; tokenName: string; - tokenId: string; tokenSrc: string; }; @@ -20,7 +19,6 @@ export type NotificationDetailNftProps = { * * @param props - The component props. * @param props.networkSrc - The URL of the badge icon. - * @param props.tokenId - The ID of the NFT. * @param props.tokenName - The name of the NFT. * @param props.tokenSrc - The URL of the NFT icon. * @param props.networkName - The name of the network. @@ -28,7 +26,6 @@ export type NotificationDetailNftProps = { */ export const NotificationDetailNft: FC = ({ networkSrc, - tokenId, tokenName, tokenSrc, networkName, @@ -47,7 +44,6 @@ export const NotificationDetailNft: FC = ({ name={tokenName} alt={tokenName} networkName={networkName} - tokenId={tokenId} /> diff --git a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.tsx b/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.tsx index eb0b8920d7a6..9529049ebf6b 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.tsx @@ -82,9 +82,6 @@ const NFTSendHeading = () => { // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31880 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing name={assetName || nameFromTokenURI} - // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31880 - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - tokenId={assetTokenId || ''} networkName={currentChain.name ?? ''} networkSrc={ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[ From 3806089ab68c94180aa9965f04c795163e88bcbf Mon Sep 17 00:00:00 2001 From: Howard Braham Date: Wed, 11 Mar 2026 13:27:43 -0700 Subject: [PATCH 06/11] fix lint:tsc --- .../notification-detail-nft.stories.tsx | 9 ++++----- .../notification-detail-nft.test.tsx | 1 - .../erc1155-sent-received/erc1155-sent-received.tsx | 1 - .../erc721-sent-received/erc721-sent-received.tsx | 1 - 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/ui/components/multichain/notification-detail-nft/notification-detail-nft.stories.tsx b/ui/components/multichain/notification-detail-nft/notification-detail-nft.stories.tsx index 2ade81a7cb2f..83ea25dc626d 100644 --- a/ui/components/multichain/notification-detail-nft/notification-detail-nft.stories.tsx +++ b/ui/components/multichain/notification-detail-nft/notification-detail-nft.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Meta } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { NotificationDetailNft, NotificationDetailNftProps, @@ -11,9 +11,9 @@ export default { component: NotificationDetailNft, } as Meta; -const Template = (args: NotificationDetailNftProps) => ( - -); +const Template: StoryFn = ( + args: NotificationDetailNftProps, +) => ; export const DefaultStory = Template.bind({}); DefaultStory.args = { @@ -21,7 +21,6 @@ DefaultStory.args = { 'https://i.seadn.io/s/raw/files/a96f90ec8ebf55a2300c66a0c46d6a16.png?w=500&auto=format', networkSrc: 'https://token.api.cx.metamask.io/assets/nativeCurrencyLogos/ethereum.svg', - tokenId: 'NFT ID', tokenName: 'NFT Name', networkName: 'Ethereum', }; diff --git a/ui/components/multichain/notification-detail-nft/notification-detail-nft.test.tsx b/ui/components/multichain/notification-detail-nft/notification-detail-nft.test.tsx index d93e2509e673..da31bdb17305 100644 --- a/ui/components/multichain/notification-detail-nft/notification-detail-nft.test.tsx +++ b/ui/components/multichain/notification-detail-nft/notification-detail-nft.test.tsx @@ -11,7 +11,6 @@ describe('NotificationDetailNft', () => { 'https://i.seadn.io/s/raw/files/a96f90ec8ebf55a2300c66a0c46d6a16.png?w=500&auto=format', networkSrc: 'https://token.api.cx.metamask.io/assets/nativeCurrencyLogos/ethereum.svg', - tokenId: 'NFT ID', tokenName: 'NFT Name', networkName: 'Ethereum', }; diff --git a/ui/pages/notifications/notification-components/erc1155-sent-received/erc1155-sent-received.tsx b/ui/pages/notifications/notification-components/erc1155-sent-received/erc1155-sent-received.tsx index 490c6af14a89..b800d5bb913d 100644 --- a/ui/pages/notifications/notification-components/erc1155-sent-received/erc1155-sent-received.tsx +++ b/ui/pages/notifications/notification-components/erc1155-sent-received/erc1155-sent-received.tsx @@ -120,7 +120,6 @@ export const components: NotificationComponent = { return ( = { return ( Date: Wed, 11 Mar 2026 14:07:54 -0700 Subject: [PATCH 07/11] fixed the useEffect --- .../app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx b/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx index 9f0db19e43c2..6acb093d44dd 100644 --- a/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx +++ b/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx @@ -45,10 +45,12 @@ export const SnapUIRadioGroup: FunctionComponent = ({ const [value, setValue] = useState(initialValue ?? ''); useEffect(() => { - if (initialValue && value !== initialValue) { - setValue(initialValue); + if (initialValue) { + setValue((currentValue) => + currentValue === initialValue ? currentValue : initialValue, + ); } - }, [initialValue, value]); + }, [initialValue]); const handleChange = (newValue: string) => { setValue(newValue); From 398905c896cf651e01176cf9acfba5f162443954 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Mar 2026 09:26:07 +0000 Subject: [PATCH 08/11] Initial plan From 7901de7efa61895f2bb85bbfe4185a6ec8fddb80 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Mar 2026 09:39:26 +0000 Subject: [PATCH 09/11] fix(zero-warnings): tackle easy lint warnings #2 Co-authored-by: HowardBraham <539738+HowardBraham@users.noreply.github.com> --- .../app/rewards/onboarding/OnboardingStep4.tsx | 2 ++ .../snap-ui-selector/snap-ui-selector.stories.tsx | 10 ++++++---- .../banner-base/banner-base.stories.tsx | 2 +- .../component-library/container/container.stories.tsx | 6 +++--- .../sensitive-text/sensitive-text.stories.tsx | 10 +++++----- .../account-show-srp-row.stories.tsx | 1 - .../add-multichain-account.stories.tsx | 1 - .../multichain-account-cell.stories.tsx | 2 -- .../multichain-review-permissions-page.stories.tsx | 2 -- .../connect-accounts-modal-list.tsx | 2 +- 10 files changed, 18 insertions(+), 20 deletions(-) diff --git a/ui/components/app/rewards/onboarding/OnboardingStep4.tsx b/ui/components/app/rewards/onboarding/OnboardingStep4.tsx index b04e97477631..c0aca6a7b7ef 100644 --- a/ui/components/app/rewards/onboarding/OnboardingStep4.tsx +++ b/ui/components/app/rewards/onboarding/OnboardingStep4.tsx @@ -218,6 +218,7 @@ const OnboardingStep4: React.FC = ({ > {t('rewardsOnboardingStep4LegalDisclaimer', [ = ({ {t('rewardsOnboardingStep4LegalDisclaimerTermsLink')} , + Foo , - + Bar , ], @@ -58,7 +58,7 @@ AdvancedStory.storyName = 'Advanced'; AdvancedStory.args = { options: ['foo', 'bar'], optionComponents: [ - + Account 1 @@ -70,7 +70,7 @@ AdvancedStory.args = { 1 ETH , - + Account 2 @@ -93,6 +93,7 @@ CardStory.args = { options: ['foo', 'bar'], optionComponents: [ `} title="Title" description="Description" @@ -100,6 +101,7 @@ CardStory.args = { extra="Extra" />, `} title="Title" description="Description" diff --git a/ui/components/component-library/banner-base/banner-base.stories.tsx b/ui/components/component-library/banner-base/banner-base.stories.tsx index d967b40226fb..ffe976afda5a 100644 --- a/ui/components/component-library/banner-base/banner-base.stories.tsx +++ b/ui/components/component-library/banner-base/banner-base.stories.tsx @@ -88,7 +88,7 @@ Description.args = { export const Children: StoryFn = (args) => { return ( - Description shouldn't repeat title. 1-3 lines. Can contain a{' '} + Description shouldn't repeat title. 1-3 lines. Can contain a{' '} = (args) => { backgroundColor={BackgroundColor.primaryMuted} padding={4} > - Size "sm" container + Size "sm" container = (args) => { backgroundColor={BackgroundColor.successMuted} padding={4} > - Size "md" container + Size "md" container = (args) => { backgroundColor={BackgroundColor.warningMuted} padding={4} > - Size "lg" container + Size "lg" container ( - Length "short" (6 characters) + Length "short" (6 characters) - Length "medium" (9 characters) + Length "medium" (9 characters) - Length "long" (12 characters) + Length "long" (12 characters) - Length "extra long" (20 characters) + Length "extra long" (20 characters) - Length "15" (15 characters) + Length "15" (15 characters) ), diff --git a/ui/components/multichain-accounts/account-show-srp-row/account-show-srp-row.stories.tsx b/ui/components/multichain-accounts/account-show-srp-row/account-show-srp-row.stories.tsx index c162d8bc85f4..55a73514b84a 100644 --- a/ui/components/multichain-accounts/account-show-srp-row/account-show-srp-row.stories.tsx +++ b/ui/components/multichain-accounts/account-show-srp-row/account-show-srp-row.stories.tsx @@ -95,4 +95,3 @@ WithBackupReminder.decorators = [ ), ]; -WithBackupReminder.storyName = 'With Backup Reminder'; diff --git a/ui/components/multichain-accounts/add-multichain-account/add-multichain-account.stories.tsx b/ui/components/multichain-accounts/add-multichain-account/add-multichain-account.stories.tsx index ca581f31c2dd..d6d957228fd4 100644 --- a/ui/components/multichain-accounts/add-multichain-account/add-multichain-account.stories.tsx +++ b/ui/components/multichain-accounts/add-multichain-account/add-multichain-account.stories.tsx @@ -36,7 +36,6 @@ const Template: StoryFn = ( ); export const Default = Template.bind({}); -Default.storyName = 'Default'; Default.parameters = { docs: { description: { diff --git a/ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.stories.tsx b/ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.stories.tsx index 00c299f73581..41dc10aba09f 100644 --- a/ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.stories.tsx +++ b/ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.stories.tsx @@ -103,7 +103,6 @@ const Template: StoryFn = ( ); export const Default = Template.bind({}); -Default.storyName = 'Default'; export const Selected = Template.bind({}); Selected.args = { @@ -210,7 +209,6 @@ const HoverableAvatarWrapper = ({ }; export const WithAvatarWrapper = Template.bind({}); -WithAvatarWrapper.storyName = 'With Avatar Wrapper'; WithAvatarWrapper.args = { accountId: 'entropy:01JKAF3DSGM3AB87EM9N0K41AJ/0', accountName: 'Account with wrapped avatar', diff --git a/ui/components/multichain-accounts/permissions/permission-review-page/multichain-review-permissions-page.stories.tsx b/ui/components/multichain-accounts/permissions/permission-review-page/multichain-review-permissions-page.stories.tsx index 364ed3128260..2a6115bcfda3 100644 --- a/ui/components/multichain-accounts/permissions/permission-review-page/multichain-review-permissions-page.stories.tsx +++ b/ui/components/multichain-accounts/permissions/permission-review-page/multichain-review-permissions-page.stories.tsx @@ -102,7 +102,6 @@ DefaultStory.parameters = { }; export const WithOneConnectedAccount = Template.bind({}); -WithOneConnectedAccount.storyName = 'With One Connected Account'; WithOneConnectedAccount.args = { store: storeWithOneAccount, }; @@ -118,7 +117,6 @@ WithOneConnectedAccount.parameters = { }; export const NoConnectedAccounts = Template.bind({}); -NoConnectedAccounts.storyName = 'No Connected Accounts'; NoConnectedAccounts.args = { store: storeWithNoAccounts, }; diff --git a/ui/components/multichain/connect-accounts-modal/connect-accounts-modal-list.tsx b/ui/components/multichain/connect-accounts-modal/connect-accounts-modal-list.tsx index bda1a169250e..d1f6ad1af603 100644 --- a/ui/components/multichain/connect-accounts-modal/connect-accounts-modal-list.tsx +++ b/ui/components/multichain/connect-accounts-modal/connect-accounts-modal-list.tsx @@ -73,7 +73,7 @@ export const ConnectAccountsModalList: React.FC = ({ {getURLHost(activeTabOrigin)}, + {getURLHost(activeTabOrigin)}, ])} position="top" > From b58be6f0c3ae36f450a300025ed401d0be9c175a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Mar 2026 22:37:41 +0000 Subject: [PATCH 10/11] fix(zero-warnings): tackle easy lint warnings #3 Fix 20 ESLint warnings across 11 files: - Remove unused prop types (react/no-unused-prop-types) - Add missing key props (react/jsx-key) - Escape unescaped entities (react/no-unescaped-entities) - Clean up test types in with-router-hooks tests Co-authored-by: HowardBraham <539738+HowardBraham@users.noreply.github.com> --- .../with-router-hooks.test.tsx | 60 +++++++++---------- .../gas-fee-token-toast.tsx | 2 +- .../decoded-simulation/decoded-simulation.tsx | 1 + .../row/typed-sign-data/typedSignData.tsx | 1 - .../snaps/snaps-section/snap-insight.tsx | 1 + .../recipient-filter-input.tsx | 1 - .../connect-page/connect-page.stories.tsx | 1 - .../connect-page/connect-page.test.tsx | 8 --- .../connect-page/connect-page.tsx | 1 - .../permissions-connect.tsx | 2 - .../developer-options-tab/sentry-test.tsx | 2 +- 11 files changed, 32 insertions(+), 48 deletions(-) diff --git a/ui/helpers/higher-order-components/with-router-hooks/with-router-hooks.test.tsx b/ui/helpers/higher-order-components/with-router-hooks/with-router-hooks.test.tsx index b4d73cfb680e..33cf7e074d8d 100644 --- a/ui/helpers/higher-order-components/with-router-hooks/with-router-hooks.test.tsx +++ b/ui/helpers/higher-order-components/with-router-hooks/with-router-hooks.test.tsx @@ -25,13 +25,9 @@ jest.mock('react-router-dom', () => ({ useParams: () => getMockUseParams(), })); -type BaseTestComponentProps = { - testProp?: string; -}; +type TestComponentProps = RouterHooksProps; -type TestComponentProps = BaseTestComponentProps & RouterHooksProps; - -const TestComponent: React.FC = ({ +const TestComponent: React.FC = ({ navigate, location, params, @@ -83,7 +79,7 @@ describe('withRouterHooks HOC', () => { it('sets correct displayName for debugging', () => { const testComponentWithDisplayName: React.FC = ( props, - ) =>
{props.testProp}
; + ) =>
{props.navigate?.toString()}
; testComponentWithDisplayName.displayName = 'TestComponentWithDisplayName'; const WrappedComponent = withRouterHooks(testComponentWithDisplayName); expect(WrappedComponent.displayName).toBe( @@ -134,9 +130,9 @@ describe('withRouterHooks HOC', () => { // verifies that useShallowEqualityCheck stabilizes references when values match const paramsReferences: ReturnType[] = []; - const TestComponentForMemo: React.FC< - TestComponentProps & { renderCount?: number } - > = ({ params }) => { + const TestComponentForMemo: React.FC = ({ + params, + }) => { paramsReferences.push(params); return
Memoization test
; }; @@ -144,14 +140,14 @@ describe('withRouterHooks HOC', () => { const WrappedComponent = withRouterHooks(TestComponentForMemo); const { rerender } = render( - + , ); // Force re-render with different prop - getMockUseParams() returns new object rerender( - + , ); @@ -164,9 +160,9 @@ describe('withRouterHooks HOC', () => { // Complementary test: verify memoization correctly detects value changes const paramsReferences: ReturnType[] = []; - const TestComponentForMemo: React.FC< - TestComponentProps & { renderCount?: number } - > = ({ params }) => { + const TestComponentForMemo: React.FC = ({ + params, + }) => { paramsReferences.push(params); return
Memoization test
; }; @@ -174,7 +170,7 @@ describe('withRouterHooks HOC', () => { const WrappedComponent = withRouterHooks(TestComponentForMemo); const { rerender } = render( - + , ); @@ -183,7 +179,7 @@ describe('withRouterHooks HOC', () => { rerender( - + , ); @@ -197,9 +193,9 @@ describe('withRouterHooks HOC', () => { it('maintains stable location reference when values are unchanged', () => { const locationReferences: ReturnType[] = []; - const TestComponentForMemo: React.FC< - TestComponentProps & { renderCount?: number } - > = ({ location }) => { + const TestComponentForMemo: React.FC = ({ + location, + }) => { locationReferences.push(location); return
Memoization test
; }; @@ -207,14 +203,14 @@ describe('withRouterHooks HOC', () => { const WrappedComponent = withRouterHooks(TestComponentForMemo); const { rerender } = render( - + , ); // Force re-render with different prop rerender( - + , ); @@ -278,9 +274,9 @@ describe('withRouterHooks HOC', () => { // We change the mock values (not props) to exercise useShallowEqualityCheck. const paramsReceived: ReturnType[] = []; - const TestComponentForMemo: React.FC< - TestComponentProps & { renderCount?: number } - > = ({ params }) => { + const TestComponentForMemo: React.FC = ({ + params, + }) => { paramsReceived.push(params); return
Comma collision test
; }; @@ -291,7 +287,7 @@ describe('withRouterHooks HOC', () => { const WrappedComponent = withRouterHooks(TestComponentForMemo); const { rerender } = render( - + , ); @@ -300,7 +296,7 @@ describe('withRouterHooks HOC', () => { rerender( - + , ); @@ -316,9 +312,9 @@ describe('withRouterHooks HOC', () => { // React Router changes key on every navigation, even to the same path. const locationsReceived: ReturnType[] = []; - const TestComponentForMemo: React.FC< - TestComponentProps & { renderCount?: number } - > = ({ location }) => { + const TestComponentForMemo: React.FC = ({ + location, + }) => { locationsReceived.push(location); return
Location key test
; }; @@ -329,7 +325,7 @@ describe('withRouterHooks HOC', () => { const WrappedComponent = withRouterHooks(TestComponentForMemo); const { rerender } = render( - + , ); @@ -338,7 +334,7 @@ describe('withRouterHooks HOC', () => { rerender( - + , ); diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx index ce215eacfa8d..2b9601d52dbe 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx @@ -54,7 +54,7 @@ export function GasFeeTokenToast() { {selectedGasFeeToken?.symbol}, + {selectedGasFeeToken?.symbol}, ])} startAdornment={ <> diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.tsx index 2f5550ae6125..8df886dd1b60 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.tsx @@ -174,6 +174,7 @@ const DecodedSimulation: React.FC = () => { return Object.entries(stateChangesGrouped).flatMap(([_, changeList]) => changeList.map((change: DecodingDataStateChange, index: number) => ( { diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx b/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx index 3601a2a094a2..32780d931801 100644 --- a/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx +++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx @@ -35,6 +35,7 @@ export const SnapInsight: React.FunctionComponent = ({ {t('insightsFromSnap', [ void; - placeholder?: string; }; export const RecipientFilterInput = ({ diff --git a/ui/pages/permissions-connect/connect-page/connect-page.stories.tsx b/ui/pages/permissions-connect/connect-page/connect-page.stories.tsx index ff3cf314f3c3..d8096d569e4f 100644 --- a/ui/pages/permissions-connect/connect-page/connect-page.stories.tsx +++ b/ui/pages/permissions-connect/connect-page/connect-page.stories.tsx @@ -84,7 +84,6 @@ export const Default: Story = { approveConnection: (request) => { console.log('Approved connection:', request); }, - activeTabOrigin: 'https://metamask.github.io', targetSubjectMetadata: mockTargetSubjectMetadata, }, }; diff --git a/ui/pages/permissions-connect/connect-page/connect-page.test.tsx b/ui/pages/permissions-connect/connect-page/connect-page.test.tsx index fc6c607a576b..7cd3c5fb0ebc 100644 --- a/ui/pages/permissions-connect/connect-page/connect-page.test.tsx +++ b/ui/pages/permissions-connect/connect-page/connect-page.test.tsx @@ -64,7 +64,6 @@ const render = ( permissionsRequestId: '1', rejectPermissionsRequest: jest.fn(), approveConnection: jest.fn(), - activeTabOrigin: mockTestDappUrl, targetSubjectMetadata: mockTargetSubjectMetadata, }, state, @@ -116,7 +115,6 @@ describe('ConnectPage', () => { permissionsRequestId: '1', rejectPermissionsRequest: jest.fn(), approveConnection: jest.fn(), - activeTabOrigin: mockTestDappUrl, targetSubjectMetadata: { ...mockTargetSubjectMetadata, iconUrl: null, @@ -135,7 +133,6 @@ describe('ConnectPage', () => { permissionsRequestId: '1', rejectPermissionsRequest: jest.fn(), approveConnection: jest.fn(), - activeTabOrigin: mockTestDappUrl, targetSubjectMetadata: { ...mockTargetSubjectMetadata, iconUrl: null, @@ -266,7 +263,6 @@ describe('ConnectPage', () => { permissionsRequestId: '1', rejectPermissionsRequest: jest.fn(), approveConnection: jest.fn(), - activeTabOrigin: mockTestDappUrl, targetSubjectMetadata: mockTargetSubjectMetadata, }, }); @@ -311,7 +307,6 @@ describe('ConnectPage', () => { permissionsRequestId: '1', rejectPermissionsRequest: jest.fn(), approveConnection: jest.fn(), - activeTabOrigin: mockTestDappUrl, targetSubjectMetadata: mockTargetSubjectMetadata, }, }); @@ -352,7 +347,6 @@ describe('ConnectPage', () => { permissionsRequestId: '1', rejectPermissionsRequest: jest.fn(), approveConnection: jest.fn(), - activeTabOrigin: mockTestDappUrl, targetSubjectMetadata: mockTargetSubjectMetadata, }, }); @@ -393,7 +387,6 @@ describe('ConnectPage', () => { permissionsRequestId: '1', rejectPermissionsRequest: jest.fn(), approveConnection: jest.fn(), - activeTabOrigin: mockTestDappUrl, targetSubjectMetadata: mockTargetSubjectMetadata, }, }); @@ -438,7 +431,6 @@ describe('ConnectPage', () => { permissionsRequestId: '1', rejectPermissionsRequest: jest.fn(), approveConnection: jest.fn(), - activeTabOrigin: mockTestDappUrl, targetSubjectMetadata: mockTargetSubjectMetadata, }, }); diff --git a/ui/pages/permissions-connect/connect-page/connect-page.tsx b/ui/pages/permissions-connect/connect-page/connect-page.tsx index 7c6c38ee9b47..8ddecc3cb1bf 100644 --- a/ui/pages/permissions-connect/connect-page/connect-page.tsx +++ b/ui/pages/permissions-connect/connect-page/connect-page.tsx @@ -111,7 +111,6 @@ export type ConnectPageProps = { permissionsRequestId: string; rejectPermissionsRequest: (id: string) => void; approveConnection: (request: ConnectPageRequest) => void; - activeTabOrigin: string; targetSubjectMetadata: { extensionId: string | null; iconUrl: string | null; diff --git a/ui/pages/permissions-connect/permissions-connect.tsx b/ui/pages/permissions-connect/permissions-connect.tsx index 3d5c47433346..c7e985cd09a4 100644 --- a/ui/pages/permissions-connect/permissions-connect.tsx +++ b/ui/pages/permissions-connect/permissions-connect.tsx @@ -591,7 +591,6 @@ function PermissionsConnect() { const connectPageProps = { rejectPermissionsRequest: (requestId: string) => cancelPermissionsRequest(requestId), - activeTabOrigin: origin, request: permissionsRequest || {}, permissionsRequestId: permissionsRequestId || '', approveConnection, @@ -601,7 +600,6 @@ function PermissionsConnect() { return ; }, [ cancelPermissionsRequest, - origin, permissionsRequest, permissionsRequestId, approveConnection, diff --git a/ui/pages/settings/developer-options-tab/sentry-test.tsx b/ui/pages/settings/developer-options-tab/sentry-test.tsx index 092e493f7a1d..ee7682625ce8 100644 --- a/ui/pages/settings/developer-options-tab/sentry-test.tsx +++ b/ui/pages/settings/developer-options-tab/sentry-test.tsx @@ -204,7 +204,7 @@ function GeneratePageCrash({ currentLocale }: { currentLocale: string }) { description={ Trigger the crash on extension to send user feedback to sentry. You - can click "Try again" to reload extension + can click "Try again" to reload extension } onClick={handleClick} From aea11bacf64c8b0d870d60582923b7af3ec27f21 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Mar 2026 23:11:52 +0000 Subject: [PATCH 11/11] revert: remove files from merged branches that don't belong in this PR Co-authored-by: HowardBraham <539738+HowardBraham@users.noreply.github.com> --- .../app/assets/nfts/nft-details/nft-full-image.tsx | 1 + ui/components/app/name/name.stories.tsx | 1 + .../app/rewards/onboarding/OnboardingStep4.tsx | 2 -- .../app/snaps/snap-home-page/snap-home-renderer.js | 9 ++------- .../app/snaps/snap-home-page/useSnapHome.js | 2 +- .../snap-settings-page/snap-settings-renderer.tsx | 2 +- .../snap-ui-radio-group/snap-ui-radio-group.tsx | 12 +++--------- .../snap-ui-selector/snap-ui-selector.stories.tsx | 10 ++++------ .../banner-base/banner-base.stories.tsx | 2 +- .../container/container.stories.tsx | 6 +++--- .../sensitive-text/sensitive-text.stories.tsx | 10 +++++----- .../sensitive-text/sensitive-text.tsx | 2 +- .../account-details-row.stories.tsx | 1 + .../account-show-srp-row.stories.tsx | 1 + .../add-multichain-account.stories.tsx | 1 + .../multichain-account-cell.stories.tsx | 2 ++ .../multichain-review-permissions-page.stories.tsx | 2 ++ .../connect-accounts-modal-list.tsx | 2 +- ui/components/multichain/nft-item/nft-item.tsx | 1 + .../notification-detail-nft.stories.tsx | 9 +++++---- .../notification-detail-nft.test.tsx | 1 + .../notification-detail-nft.tsx | 4 ++++ .../review-permissions-page.tsx | 2 +- ui/hooks/snaps/useSnapSettings.ts | 2 +- .../shared/nft-send-heading/nft-send-heading.tsx | 3 +++ .../erc1155-sent-received/erc1155-sent-received.tsx | 1 + .../erc721-sent-received/erc721-sent-received.tsx | 1 + 27 files changed, 49 insertions(+), 43 deletions(-) diff --git a/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx b/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx index aabd23226eec..3222da2a5047 100644 --- a/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx +++ b/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx @@ -133,6 +133,7 @@ export default function NftFullImage() { src={isImageHosted ? image || imageFromTokenURI : nftImageURL} alt={nftImageAlt} name={name ?? ''} + tokenId={tokenId} networkName={nftChainNetwork?.name ?? ''} networkSrc={nftChainImage} isIpfsURL={isIpfsURL} diff --git a/ui/components/app/name/name.stories.tsx b/ui/components/app/name/name.stories.tsx index ca97d910fc96..c5615c9a65c5 100644 --- a/ui/components/app/name/name.stories.tsx +++ b/ui/components/app/name/name.stories.tsx @@ -126,6 +126,7 @@ export default { * No name has been saved for the value and type. */ export const NoSavedName = { + name: 'No Saved Name', args: { value: ADDRESS_MOCK, type: NameType.ETHEREUM_ADDRESS, diff --git a/ui/components/app/rewards/onboarding/OnboardingStep4.tsx b/ui/components/app/rewards/onboarding/OnboardingStep4.tsx index c0aca6a7b7ef..b04e97477631 100644 --- a/ui/components/app/rewards/onboarding/OnboardingStep4.tsx +++ b/ui/components/app/rewards/onboarding/OnboardingStep4.tsx @@ -218,7 +218,6 @@ const OnboardingStep4: React.FC = ({ > {t('rewardsOnboardingStep4LegalDisclaimer', [ = ({ {t('rewardsOnboardingStep4LegalDisclaimerTermsLink')} , { useEffect(() => { return () => interfaceId && dispatch(deleteInterface(interfaceId)); - }, [interfaceId, dispatch]); + }, [interfaceId]); useEffect(() => { // Snaps are allowed to redirect to their own pending confirmations (templated or not) @@ -62,12 +62,7 @@ export const SnapHomeRenderer = ({ snapId }) => { } else if (snapApproval) { navigate(`${CONFIRM_TRANSACTION_ROUTE}/${snapApproval.id}`); } - }, [ - unapprovedTemplatedConfirmations, - unapprovedConfirmations, - navigate, - snapId, - ]); + }, [unapprovedTemplatedConfirmations, unapprovedConfirmations, navigate]); if (error) { return ( diff --git a/ui/components/app/snaps/snap-home-page/useSnapHome.js b/ui/components/app/snaps/snap-home-page/useSnapHome.js index 57eb807939a6..8214e7f36c4f 100644 --- a/ui/components/app/snaps/snap-home-page/useSnapHome.js +++ b/ui/components/app/snaps/snap-home-page/useSnapHome.js @@ -43,7 +43,7 @@ export function useSnapHome({ snapId }) { } fetchPage(); return () => (cancelled = true); - }, [snapId, dispatch]); + }, [snapId]); return { data, error, loading }; } diff --git a/ui/components/app/snaps/snap-settings-page/snap-settings-renderer.tsx b/ui/components/app/snaps/snap-settings-page/snap-settings-renderer.tsx index aaa4eb54ac38..333505a18f9e 100644 --- a/ui/components/app/snaps/snap-settings-page/snap-settings-renderer.tsx +++ b/ui/components/app/snaps/snap-settings-page/snap-settings-renderer.tsx @@ -45,7 +45,7 @@ export const SnapSettingsRenderer: FunctionComponent< return () => { interfaceId && dispatch(deleteInterface(interfaceId)); }; - }, [interfaceId, dispatch]); + }, [interfaceId]); if (!snapId) { return null; diff --git a/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx b/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx index 6acb093d44dd..8f2e33514b2b 100644 --- a/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx +++ b/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx @@ -45,10 +45,8 @@ export const SnapUIRadioGroup: FunctionComponent = ({ const [value, setValue] = useState(initialValue ?? ''); useEffect(() => { - if (initialValue) { - setValue((currentValue) => - currentValue === initialValue ? currentValue : initialValue, - ); + if (initialValue && value !== initialValue) { + setValue(initialValue); } }, [initialValue]); @@ -60,11 +58,7 @@ export const SnapUIRadioGroup: FunctionComponent = ({ const displayRadioOptions = (options: SnapUIRadioOption[]) => { return options.map((option: SnapUIRadioOption) => { return ( - + + Foo , - + Bar , ], @@ -58,7 +58,7 @@ AdvancedStory.storyName = 'Advanced'; AdvancedStory.args = { options: ['foo', 'bar'], optionComponents: [ - + Account 1 @@ -70,7 +70,7 @@ AdvancedStory.args = { 1 ETH , - + Account 2 @@ -93,7 +93,6 @@ CardStory.args = { options: ['foo', 'bar'], optionComponents: [ `} title="Title" description="Description" @@ -101,7 +100,6 @@ CardStory.args = { extra="Extra" />, `} title="Title" description="Description" diff --git a/ui/components/component-library/banner-base/banner-base.stories.tsx b/ui/components/component-library/banner-base/banner-base.stories.tsx index ffe976afda5a..d967b40226fb 100644 --- a/ui/components/component-library/banner-base/banner-base.stories.tsx +++ b/ui/components/component-library/banner-base/banner-base.stories.tsx @@ -88,7 +88,7 @@ Description.args = { export const Children: StoryFn = (args) => { return ( - Description shouldn't repeat title. 1-3 lines. Can contain a{' '} + Description shouldn't repeat title. 1-3 lines. Can contain a{' '} = (args) => { backgroundColor={BackgroundColor.primaryMuted} padding={4} > - Size "sm" container + Size "sm" container = (args) => { backgroundColor={BackgroundColor.successMuted} padding={4} > - Size "md" container + Size "md" container = (args) => { backgroundColor={BackgroundColor.warningMuted} padding={4} > - Size "lg" container + Size "lg" container ( - Length "short" (6 characters) + Length "short" (6 characters) - Length "medium" (9 characters) + Length "medium" (9 characters) - Length "long" (12 characters) + Length "long" (12 characters) - Length "extra long" (20 characters) + Length "extra long" (20 characters) - Length "15" (15 characters) + Length "15" (15 characters) ), diff --git a/ui/components/component-library/sensitive-text/sensitive-text.tsx b/ui/components/component-library/sensitive-text/sensitive-text.tsx index 1a3f49589c7b..ddabda784fe1 100644 --- a/ui/components/component-library/sensitive-text/sensitive-text.tsx +++ b/ui/components/component-library/sensitive-text/sensitive-text.tsx @@ -37,7 +37,7 @@ export const SensitiveText = React.forwardRef< const fallback = useMemo( () => '•'.repeat(getFallbackLength(adjustedLength)), - [adjustedLength, getFallbackLength], + [length, getFallbackLength], ); return ( diff --git a/ui/components/multichain-accounts/account-details-row/account-details-row.stories.tsx b/ui/components/multichain-accounts/account-details-row/account-details-row.stories.tsx index b360a3cdf58e..4e25b41f69aa 100644 --- a/ui/components/multichain-accounts/account-details-row/account-details-row.stories.tsx +++ b/ui/components/multichain-accounts/account-details-row/account-details-row.stories.tsx @@ -49,6 +49,7 @@ const Template: StoryFn = (args) => ( ); export const Default = Template.bind({}); +Default.storyName = 'Default'; export const WithEditButton = Template.bind({}); WithEditButton.args = { diff --git a/ui/components/multichain-accounts/account-show-srp-row/account-show-srp-row.stories.tsx b/ui/components/multichain-accounts/account-show-srp-row/account-show-srp-row.stories.tsx index 55a73514b84a..c162d8bc85f4 100644 --- a/ui/components/multichain-accounts/account-show-srp-row/account-show-srp-row.stories.tsx +++ b/ui/components/multichain-accounts/account-show-srp-row/account-show-srp-row.stories.tsx @@ -95,3 +95,4 @@ WithBackupReminder.decorators = [ ), ]; +WithBackupReminder.storyName = 'With Backup Reminder'; diff --git a/ui/components/multichain-accounts/add-multichain-account/add-multichain-account.stories.tsx b/ui/components/multichain-accounts/add-multichain-account/add-multichain-account.stories.tsx index d6d957228fd4..ca581f31c2dd 100644 --- a/ui/components/multichain-accounts/add-multichain-account/add-multichain-account.stories.tsx +++ b/ui/components/multichain-accounts/add-multichain-account/add-multichain-account.stories.tsx @@ -36,6 +36,7 @@ const Template: StoryFn = ( ); export const Default = Template.bind({}); +Default.storyName = 'Default'; Default.parameters = { docs: { description: { diff --git a/ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.stories.tsx b/ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.stories.tsx index 41dc10aba09f..00c299f73581 100644 --- a/ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.stories.tsx +++ b/ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.stories.tsx @@ -103,6 +103,7 @@ const Template: StoryFn = ( ); export const Default = Template.bind({}); +Default.storyName = 'Default'; export const Selected = Template.bind({}); Selected.args = { @@ -209,6 +210,7 @@ const HoverableAvatarWrapper = ({ }; export const WithAvatarWrapper = Template.bind({}); +WithAvatarWrapper.storyName = 'With Avatar Wrapper'; WithAvatarWrapper.args = { accountId: 'entropy:01JKAF3DSGM3AB87EM9N0K41AJ/0', accountName: 'Account with wrapped avatar', diff --git a/ui/components/multichain-accounts/permissions/permission-review-page/multichain-review-permissions-page.stories.tsx b/ui/components/multichain-accounts/permissions/permission-review-page/multichain-review-permissions-page.stories.tsx index 2a6115bcfda3..364ed3128260 100644 --- a/ui/components/multichain-accounts/permissions/permission-review-page/multichain-review-permissions-page.stories.tsx +++ b/ui/components/multichain-accounts/permissions/permission-review-page/multichain-review-permissions-page.stories.tsx @@ -102,6 +102,7 @@ DefaultStory.parameters = { }; export const WithOneConnectedAccount = Template.bind({}); +WithOneConnectedAccount.storyName = 'With One Connected Account'; WithOneConnectedAccount.args = { store: storeWithOneAccount, }; @@ -117,6 +118,7 @@ WithOneConnectedAccount.parameters = { }; export const NoConnectedAccounts = Template.bind({}); +NoConnectedAccounts.storyName = 'No Connected Accounts'; NoConnectedAccounts.args = { store: storeWithNoAccounts, }; diff --git a/ui/components/multichain/connect-accounts-modal/connect-accounts-modal-list.tsx b/ui/components/multichain/connect-accounts-modal/connect-accounts-modal-list.tsx index d1f6ad1af603..bda1a169250e 100644 --- a/ui/components/multichain/connect-accounts-modal/connect-accounts-modal-list.tsx +++ b/ui/components/multichain/connect-accounts-modal/connect-accounts-modal-list.tsx @@ -73,7 +73,7 @@ export const ConnectAccountsModalList: React.FC = ({ {getURLHost(activeTabOrigin)}, + {getURLHost(activeTabOrigin)}, ])} position="top" > diff --git a/ui/components/multichain/nft-item/nft-item.tsx b/ui/components/multichain/nft-item/nft-item.tsx index 4846997fb968..e2b2117eb0f2 100644 --- a/ui/components/multichain/nft-item/nft-item.tsx +++ b/ui/components/multichain/nft-item/nft-item.tsx @@ -37,6 +37,7 @@ type NftItemProps = { alt: string; src: string | undefined; name?: string; + tokenId?: string; networkName: string; networkSrc?: string; onClick?: () => void; diff --git a/ui/components/multichain/notification-detail-nft/notification-detail-nft.stories.tsx b/ui/components/multichain/notification-detail-nft/notification-detail-nft.stories.tsx index 83ea25dc626d..2ade81a7cb2f 100644 --- a/ui/components/multichain/notification-detail-nft/notification-detail-nft.stories.tsx +++ b/ui/components/multichain/notification-detail-nft/notification-detail-nft.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Meta, StoryFn } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { NotificationDetailNft, NotificationDetailNftProps, @@ -11,9 +11,9 @@ export default { component: NotificationDetailNft, } as Meta; -const Template: StoryFn = ( - args: NotificationDetailNftProps, -) => ; +const Template = (args: NotificationDetailNftProps) => ( + +); export const DefaultStory = Template.bind({}); DefaultStory.args = { @@ -21,6 +21,7 @@ DefaultStory.args = { 'https://i.seadn.io/s/raw/files/a96f90ec8ebf55a2300c66a0c46d6a16.png?w=500&auto=format', networkSrc: 'https://token.api.cx.metamask.io/assets/nativeCurrencyLogos/ethereum.svg', + tokenId: 'NFT ID', tokenName: 'NFT Name', networkName: 'Ethereum', }; diff --git a/ui/components/multichain/notification-detail-nft/notification-detail-nft.test.tsx b/ui/components/multichain/notification-detail-nft/notification-detail-nft.test.tsx index da31bdb17305..d93e2509e673 100644 --- a/ui/components/multichain/notification-detail-nft/notification-detail-nft.test.tsx +++ b/ui/components/multichain/notification-detail-nft/notification-detail-nft.test.tsx @@ -11,6 +11,7 @@ describe('NotificationDetailNft', () => { 'https://i.seadn.io/s/raw/files/a96f90ec8ebf55a2300c66a0c46d6a16.png?w=500&auto=format', networkSrc: 'https://token.api.cx.metamask.io/assets/nativeCurrencyLogos/ethereum.svg', + tokenId: 'NFT ID', tokenName: 'NFT Name', networkName: 'Ethereum', }; diff --git a/ui/components/multichain/notification-detail-nft/notification-detail-nft.tsx b/ui/components/multichain/notification-detail-nft/notification-detail-nft.tsx index 66c20466d012..881deb00702e 100644 --- a/ui/components/multichain/notification-detail-nft/notification-detail-nft.tsx +++ b/ui/components/multichain/notification-detail-nft/notification-detail-nft.tsx @@ -11,6 +11,7 @@ export type NotificationDetailNftProps = { networkName: string; networkSrc: string; tokenName: string; + tokenId: string; tokenSrc: string; }; @@ -19,6 +20,7 @@ export type NotificationDetailNftProps = { * * @param props - The component props. * @param props.networkSrc - The URL of the badge icon. + * @param props.tokenId - The ID of the NFT. * @param props.tokenName - The name of the NFT. * @param props.tokenSrc - The URL of the NFT icon. * @param props.networkName - The name of the network. @@ -26,6 +28,7 @@ export type NotificationDetailNftProps = { */ export const NotificationDetailNft: FC = ({ networkSrc, + tokenId, tokenName, tokenSrc, networkName, @@ -44,6 +47,7 @@ export const NotificationDetailNft: FC = ({ name={tokenName} alt={tokenName} networkName={networkName} + tokenId={tokenId} /> diff --git a/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx index 811191bf3c2a..e31fc4c185ac 100644 --- a/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx +++ b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx @@ -85,7 +85,7 @@ export const ReviewPermissions = () => { setShowNetworkToast(showPermittedNetworkToastOpen); dispatch(hidePermittedNetworkToast()); } - }, [showPermittedNetworkToastOpen, dispatch]); + }, [showPermittedNetworkToastOpen]); const requestAccountsAndChainPermissions = async () => { const requestId = await dispatch( diff --git a/ui/hooks/snaps/useSnapSettings.ts b/ui/hooks/snaps/useSnapSettings.ts index 4b0a702c48ab..94485f328a4a 100644 --- a/ui/hooks/snaps/useSnapSettings.ts +++ b/ui/hooks/snaps/useSnapSettings.ts @@ -49,7 +49,7 @@ export function useSnapSettings({ snapId }: { snapId?: string }) { return () => { cancelled = true; }; - }, [snapId, dispatch]); + }, [snapId]); return { data, error, loading }; } diff --git a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.tsx b/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.tsx index 9529049ebf6b..eb0b8920d7a6 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.tsx @@ -82,6 +82,9 @@ const NFTSendHeading = () => { // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31880 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing name={assetName || nameFromTokenURI} + // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31880 + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + tokenId={assetTokenId || ''} networkName={currentChain.name ?? ''} networkSrc={ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[ diff --git a/ui/pages/notifications/notification-components/erc1155-sent-received/erc1155-sent-received.tsx b/ui/pages/notifications/notification-components/erc1155-sent-received/erc1155-sent-received.tsx index b800d5bb913d..490c6af14a89 100644 --- a/ui/pages/notifications/notification-components/erc1155-sent-received/erc1155-sent-received.tsx +++ b/ui/pages/notifications/notification-components/erc1155-sent-received/erc1155-sent-received.tsx @@ -120,6 +120,7 @@ export const components: NotificationComponent = { return ( = { return (