Skip to content

Commit e64df81

Browse files
sahar-fehrisahar-fehri
authored
fix: trigger detectNfts on account switch (#31481)
## **Description** PR to trigger nft detection on account switch [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/31481?quickstart=1) ## **Related issues** Fixes: #28654 ## **Manual testing steps** 1. Click on account list menu 2. Switch to another account 3. You should see a call to detectNfts (nft-api) being triggered in networks tab when you are on ethereum or linea ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/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-extension/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.
1 parent 58752f1 commit e64df81

File tree

13 files changed

+90
-8
lines changed

13 files changed

+90
-8
lines changed

‎test/e2e/tests/account/add-account.spec.ts

+8
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import HeaderNavbar from '../../page-objects/pages/header-navbar';
1111
import HomePage from '../../page-objects/pages/home/homepage';
1212
import LoginPage from '../../page-objects/pages/login-page';
1313
import ResetPasswordPage from '../../page-objects/pages/reset-password-page';
14+
import { Mockttp } from 'mockttp';
15+
import { mockNftApiCall } from '../identity/mocks';
1416

1517
describe('Add account', function () {
1618
const localNodeOptions = {
@@ -22,6 +24,12 @@ describe('Add account', function () {
2224
fixtures: new FixtureBuilder({ onboarding: true }).build(),
2325
localNodeOptions,
2426
title: this.test?.fullTitle(),
27+
testSpecificMock: async (server: Mockttp) => {
28+
await mockNftApiCall(
29+
server,
30+
'0x5cfe73b6021e818b776b421b1c4db2474086a7e1',
31+
);
32+
},
2533
},
2634
async ({ driver, localNodes }) => {
2735
await completeImportSRPOnboardingFlow({ driver });

‎test/e2e/tests/identity/account-syncing/sync-with-account-balances.spec.ts

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Mockttp } from 'mockttp';
22
import { unlockWallet, withFixtures } from '../../../helpers';
33
import FixtureBuilder from '../../../fixture-builder';
4-
import { mockInfuraAndAccountSync } from '../mocks';
4+
import { mockInfuraAndAccountSync, mockNftApiCall } from '../mocks';
55
import {
66
IDENTITY_TEAM_PASSWORD,
77
IDENTITY_TEAM_SEED_PHRASE,
@@ -162,11 +162,17 @@ describe('Account syncing - User already has balances on multiple accounts', fun
162162
.build(),
163163
title: this.test?.fullTitle(),
164164
testSpecificMock: async (server: Mockttp) => {
165-
await mockInfuraAndAccountSync(
166-
server,
167-
userStorageMockttpController,
168-
{ accountsToMockBalances },
169-
);
165+
return [
166+
await mockInfuraAndAccountSync(
167+
server,
168+
userStorageMockttpController,
169+
{ accountsToMockBalances },
170+
),
171+
await mockNftApiCall(
172+
server,
173+
'0x0f205850eac507473aa0e47cc8eb528d875e7498',
174+
),
175+
];
170176
},
171177
},
172178
async ({ driver }) => {

‎test/e2e/tests/identity/mocks.ts

+28
Original file line numberDiff line numberDiff line change
@@ -136,3 +136,31 @@ export async function mockInfuraAndAccountSync(
136136

137137
mockIdentityServices(mockServer, userStorageMockttpController);
138138
}
139+
140+
/**
141+
* Sets up mock responses for NFT API calls
142+
*
143+
* @param mockServer - The Mockttp server instance
144+
* @param userAddress - The user address to mock the NFT API call for
145+
*/
146+
export async function mockNftApiCall(
147+
mockServer: Mockttp,
148+
userAddress: string,
149+
): Promise<void> {
150+
mockServer
151+
.forGet(`https://nft.api.cx.metamask.io/users/${userAddress}/tokens`)
152+
.withQuery({
153+
limit: 50,
154+
includeTopBid: 'true',
155+
chainIds: ['1', '59144'],
156+
continuation: '',
157+
})
158+
.thenCallback(() => {
159+
return {
160+
statusCode: 200,
161+
json: {
162+
tokens: [],
163+
},
164+
};
165+
});
166+
}

‎ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
44
<div>
55
<div
66
class="mm-box multichain-account-list-item multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
7+
data-testid="account-item"
78
>
89
<div
910
class="mm-box mm-box--display-flex mm-box--sm:display-none"
@@ -226,6 +227,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
226227
<div>
227228
<div
228229
class="mm-box multichain-account-list-item multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
230+
data-testid="account-item"
229231
>
230232
<div
231233
class="mm-box mm-box--display-flex mm-box--sm:display-none"

‎ui/components/multichain/account-list-item/account-list-item.js

+1
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,7 @@ const AccountListItem = ({
258258
'multichain-account-list-item--connected': Boolean(connectedAvatar),
259259
'multichain-account-list-item--clickable': Boolean(onClick),
260260
})}
261+
data-testid="account-item"
261262
ref={itemRef}
262263
onClick={() => {
263264
// Without this check, the account will be selected after

‎ui/components/multichain/account-list-menu/account-list-menu.test.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const mockGetEnvironmentType = jest.fn();
3131
const mockNextAccountName = jest.fn().mockReturnValue('Test Account 2');
3232
const mockBitcoinClientCreateAccount = jest.fn();
3333
const mockGenerateNewHdKeyring = jest.fn();
34+
const mockDetectNfts = jest.fn();
3435

3536
jest.mock('../../../../app/scripts/lib/util', () => ({
3637
...jest.requireActual('../../../../app/scripts/lib/util'),
@@ -43,6 +44,7 @@ jest.mock('../../../store/actions', () => {
4344
...jest.requireActual('../../../store/actions'),
4445
getNextAvailableAccountName: () => mockNextAccountName(),
4546
generateNewHdKeyring: () => mockGenerateNewHdKeyring(),
47+
detectNfts: () => mockDetectNfts,
4648
};
4749
});
4850

@@ -157,6 +159,7 @@ describe('AccountListMenu', () => {
157159
const listItems = document.querySelectorAll(
158160
'.multichain-account-list-item',
159161
);
162+
160163
expect(listItems).toHaveLength(6);
161164

162165
const searchBox = document.querySelector('input[type=search]') as Element;
@@ -469,6 +472,17 @@ describe('AccountListMenu', () => {
469472
expect(global.platform.openTab).toHaveBeenCalledTimes(1);
470473
});
471474
});
475+
476+
it('detects NFTs when an account is clicked', () => {
477+
const { getAllByTestId } = render();
478+
const listItems = document.querySelectorAll(
479+
'.multichain-account-list-item',
480+
);
481+
expect(listItems).toHaveLength(6);
482+
const button = getAllByTestId('account-item');
483+
button[0].click();
484+
expect(mockDetectNfts).toHaveBeenCalled();
485+
});
472486
///: END:ONLY_INCLUDE_IF
473487

474488
describe('BTC account creation', () => {

‎ui/components/multichain/account-list-menu/account-list-menu.tsx

+13-2
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,9 @@ import {
7474
///: END:ONLY_INCLUDE_IF
7575
getManageInstitutionalWallets,
7676
getHDEntropyIndex,
77+
getAllChainsToPoll,
7778
} from '../../../selectors';
78-
import { setSelectedAccount } from '../../../store/actions';
79+
import { detectNfts, setSelectedAccount } from '../../../store/actions';
7980
import {
8081
MetaMetricsEventAccountType,
8182
MetaMetricsEventCategory,
@@ -260,6 +261,7 @@ export const AccountListMenu = ({
260261
),
261262
[accounts, allowedAccountTypes],
262263
);
264+
const allChainIds = useSelector(getAllChainsToPoll);
263265
const selectedAccount = useSelector(getSelectedInternalAccount);
264266
const connectedSites = useSelector(
265267
getConnectedSubjectsForAllAddresses,
@@ -292,6 +294,7 @@ export const AccountListMenu = ({
292294
const isAddWatchEthereumAccountEnabled = useSelector(
293295
getIsWatchEthereumAccountEnabled,
294296
);
297+
295298
const handleAddWatchAccount = useCallback(async () => {
296299
await trackEvent({
297300
category: MetaMetricsEventCategory.Navigation,
@@ -420,8 +423,16 @@ export const AccountListMenu = ({
420423
],
421424
});
422425
dispatch(setSelectedAccount(account.address));
426+
dispatch(detectNfts(allChainIds));
423427
},
424-
[dispatch, onClose, trackEvent, defaultHomeActiveTabName, hdEntropyIndex],
428+
[
429+
dispatch,
430+
onClose,
431+
trackEvent,
432+
defaultHomeActiveTabName,
433+
hdEntropyIndex,
434+
allChainIds,
435+
],
425436
);
426437

427438
const accountListItems = useMemo(() => {

‎ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
104104
</div>
105105
<div
106106
class="mm-box multichain-account-list-item multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
107+
data-testid="account-item"
107108
>
108109
<div
109110
class="mm-box mm-box--margin-top-1 mm-box--margin-inline-end-2"

‎ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap

+1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ exports[`Connections Content should render correctly 1`] = `
5757
>
5858
<div
5959
class="mm-box multichain-account-list-item multichain-account-list-item--selected mm-box--padding-4 mm-box--display-flex mm-box--background-color-primary-muted"
60+
data-testid="account-item"
6061
>
6162
<div
6263
class="mm-box multichain-account-list-item__selected-indicator mm-box--background-color-primary-default mm-box--rounded-pill"

‎ui/components/multichain/pages/send/__snapshots__/send.test.js.snap

+1
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,7 @@ exports[`SendPage render and initialization should render correctly even when a
191191
>
192192
<div
193193
class="mm-box multichain-account-list-item multichain-account-list-item--selected multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-primary-muted"
194+
data-testid="account-item"
194195
>
195196
<div
196197
class="mm-box multichain-account-list-item__selected-indicator mm-box--background-color-primary-default mm-box--rounded-pill"

‎ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap

+6
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
77
>
88
<div
99
class="mm-box multichain-account-list-item multichain-account-list-item--selected multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-primary-muted"
10+
data-testid="account-item"
1011
>
1112
<div
1213
class="mm-box multichain-account-list-item__selected-indicator mm-box--background-color-primary-default mm-box--rounded-pill"
@@ -223,6 +224,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
223224
</div>
224225
<div
225226
class="mm-box multichain-account-list-item multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
227+
data-testid="account-item"
226228
>
227229
<div
228230
class="mm-box mm-box--display-flex mm-box--sm:display-none"
@@ -436,6 +438,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
436438
</div>
437439
<div
438440
class="mm-box multichain-account-list-item multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
441+
data-testid="account-item"
439442
>
440443
<div
441444
class="mm-box mm-box--display-flex mm-box--sm:display-none"
@@ -658,6 +661,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
658661
</div>
659662
<div
660663
class="mm-box multichain-account-list-item multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
664+
data-testid="account-item"
661665
>
662666
<div
663667
class="mm-box mm-box--display-flex mm-box--sm:display-none"
@@ -871,6 +875,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
871875
</div>
872876
<div
873877
class="mm-box multichain-account-list-item multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
878+
data-testid="account-item"
874879
>
875880
<div
876881
class="mm-box mm-box--display-flex mm-box--sm:display-none"
@@ -1084,6 +1089,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
10841089
</div>
10851090
<div
10861091
class="mm-box multichain-account-list-item multichain-account-list-item--clickable mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
1092+
data-testid="account-item"
10871093
>
10881094
<div
10891095
class="mm-box mm-box--display-flex mm-box--sm:display-none"

‎ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap

+1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
9393
>
9494
<div
9595
class="mm-box multichain-account-list-item multichain-account-list-item--selected mm-box--padding-4 mm-box--display-flex mm-box--background-color-primary-muted"
96+
data-testid="account-item"
9697
>
9798
<div
9899
class="mm-box multichain-account-list-item__selected-indicator mm-box--background-color-primary-default mm-box--rounded-pill"

‎ui/pages/permissions-connect/connect-page/__snapshots__/connect-page.test.tsx.snap

+2
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ exports[`ConnectPage should render correctly 1`] = `
112112
>
113113
<div
114114
class="mm-box multichain-account-list-item mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
115+
data-testid="account-item"
115116
>
116117
<div
117118
class="mm-box mm-box--display-flex mm-box--sm:display-none"
@@ -480,6 +481,7 @@ exports[`ConnectPage should render with defaults from the requested permissions
480481
>
481482
<div
482483
class="mm-box multichain-account-list-item mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
484+
data-testid="account-item"
483485
>
484486
<div
485487
class="mm-box mm-box--display-flex mm-box--sm:display-none"

0 commit comments

Comments
 (0)