Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .storybook/storybook.requires.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

53 changes: 0 additions & 53 deletions app/actions/sendFlow/index.test.ts

This file was deleted.

11 changes: 0 additions & 11 deletions app/actions/sendFlow/index.ts

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,17 @@ const createMockAccountGroup = (
} as AccountGroupObject);

const mockAccountGroup1 = createMockAccountGroup(
'test-group1',
'wallet-1/group-1',
'Test Group 1',
['account-id-1'],
);
const mockAccountGroup2 = createMockAccountGroup(
'test-group2',
'wallet-1/group-2',
'Test Group 2',
['account-id-2'],
);
const mockAccountGroup3 = createMockAccountGroup(
'test-group3',
'wallet-2/group-3',
'Test Group 3',
['account-id-3'],
);
Expand All @@ -51,18 +51,19 @@ const mockStore = configureStore({
id: 'wallet-1',
metadata: { name: 'MetaMask Wallet' },
groups: {
'group-1': mockAccountGroup1,
'group-2': mockAccountGroup2,
'wallet-1/group-1': mockAccountGroup1,
'wallet-1/group-2': mockAccountGroup2,
},
},
'wallet-2': {
id: 'wallet-2',
metadata: { name: 'Hardware Wallet' },
groups: {
'group-3': mockAccountGroup3,
'wallet-2/group-3': mockAccountGroup3,
},
},
},
selectedAccountGroup: 'wallet-1/group-1',
},
},
AccountsController: {
Expand Down Expand Up @@ -140,9 +141,9 @@ const MultichainAccountSelectorListMeta = {
],
argTypes: {
onSelectAccount: { action: 'account selected' },
selectedAccountGroup: {
selectedAccountGroups: {
control: { type: 'object' },
defaultValue: mockAccountGroup1,
defaultValue: [mockAccountGroup1],
},
testID: {
control: { type: 'text' },
Expand All @@ -163,7 +164,25 @@ export default MultichainAccountSelectorListMeta;

export const Default = {
args: {
selectedAccountGroup: mockAccountGroup1,
privacyMode: false,
selectedAccountGroups: [mockAccountGroup1],
},
};

export const MultipleSelected = {
args: {
selectedAccountGroups: [mockAccountGroup1, mockAccountGroup2],
},
};

export const NoSelection = {
args: {
selectedAccountGroups: [],
},
};

export const WithCustomTestID = {
args: {
selectedAccountGroups: [mockAccountGroup1],
testID: 'custom-multichain-account-selector',
},
};
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,14 @@ describe('MultichainAccountSelectorList', () => {
const renderComponentWithMockState = (
wallets: AccountWalletObject[],
internalAccounts: Record<string, InternalAccount>,
selectedAccountGroup: AccountGroupObject,
selectedAccountGroups: AccountGroupObject[],
) => {
const mockState = createMockState(wallets, internalAccounts);

return renderWithProvider(
<MultichainAccountSelectorList
onSelectAccount={mockOnSelectAccount}
selectedAccountGroup={selectedAccountGroup}
selectedAccountGroups={selectedAccountGroups}
/>,
{ state: mockState },
);
Expand All @@ -89,7 +89,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByText } = renderComponentWithMockState(
[wallet1, wallet2],
internalAccounts,
account1,
[account1],
);

expect(getByText('Wallet 1')).toBeTruthy();
Expand All @@ -111,7 +111,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByText } = renderComponentWithMockState(
[srpWallet, snapWallet],
internalAccounts,
srpAccount,
[srpAccount],
);

expect(getByText('Wallet 1')).toBeTruthy();
Expand All @@ -136,7 +136,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByText } = renderComponentWithMockState(
[srpWallet, ledgerWallet],
internalAccounts,
srpAccount,
[srpAccount],
);

expect(getByText('Wallet 1')).toBeTruthy();
Expand All @@ -158,7 +158,7 @@ describe('MultichainAccountSelectorList', () => {
const { getAllByTestId } = renderComponentWithMockState(
[wallet1],
internalAccounts,
account2,
[account2],
);

const accountCells = getAllByTestId('multichain-account-cell-container');
Expand Down Expand Up @@ -192,7 +192,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByTestId, queryByText } = renderComponentWithMockState(
[wallet1],
internalAccounts,
account1,
[account1],
);

// Initially all accounts should be visible
Expand Down Expand Up @@ -229,7 +229,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByTestId, queryByText } = renderComponentWithMockState(
[wallet1],
internalAccounts,
account1,
[account1],
);

// Initially all accounts should be visible
Expand Down Expand Up @@ -284,7 +284,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByTestId, queryByText } = renderComponentWithMockState(
[wallet1],
internalAccounts,
account1,
[account1],
);

// Initially all accounts should be visible
Expand Down Expand Up @@ -329,7 +329,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByTestId, queryByText } = renderComponentWithMockState(
[wallet1],
internalAccounts,
account1,
[account1],
);

// Initially all groups should be visible
Expand Down Expand Up @@ -370,7 +370,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByTestId, queryByText } = renderComponentWithMockState(
[wallet1, wallet2],
internalAccounts,
account1,
[account1],
);

// Initially all accounts should be visible
Expand Down Expand Up @@ -403,7 +403,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByTestId, getByText } = renderComponentWithMockState(
[wallet1],
internalAccounts,
account1,
[account1],
);

// Search for non-existent term
Expand Down Expand Up @@ -441,7 +441,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByTestId, queryByText } = renderComponentWithMockState(
[wallet1],
internalAccounts,
account1,
[account1],
);

// Search with different cases
Expand Down Expand Up @@ -485,7 +485,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByTestId, queryByText } = renderComponentWithMockState(
[wallet1],
internalAccounts,
account1,
[account1],
);

const searchInput = getByTestId(
Expand Down Expand Up @@ -532,7 +532,7 @@ describe('MultichainAccountSelectorList', () => {
const { getByTestId, queryByText } = renderComponentWithMockState(
[wallet1],
internalAccounts,
account1,
[account1],
);

const searchInput = getByTestId(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { strings } from '../../../../../locales/i18n';

const MultichainAccountSelectorList = ({
onSelectAccount,
selectedAccountGroup,
selectedAccountGroups,
testID = MULTICHAIN_ACCOUNT_SELECTOR_LIST_TESTID,
listRef,
...props
Expand All @@ -44,6 +44,11 @@ const MultichainAccountSelectorList = ({
const [searchText, setSearchText] = useState('');
const [debouncedSearchText, setDebouncedSearchText] = useState('');

const selectedIdSet = useMemo(
() => new Set(selectedAccountGroups.map((g) => g.id)),
[selectedAccountGroups],
);

// Debounce search text with 200ms delay
useEffect(() => {
const timer = setTimeout(() => {
Expand Down Expand Up @@ -137,11 +142,10 @@ const MultichainAccountSelectorList = ({
// Handle account selection with debouncing to prevent rapid successive calls
const handleSelectAccount = useCallback(
(accountGroup: AccountGroupObject) => {
// Prevent multiple rapid calls for the same account
if (selectedAccountGroup.id === accountGroup.id) return;
if (selectedIdSet.has(accountGroup.id)) return;
onSelectAccount?.(accountGroup);
},
[onSelectAccount, selectedAccountGroup.id],
[onSelectAccount, selectedIdSet],
);

const renderItem: ListRenderItem<FlattenedMultichainAccountListItem> =
Expand All @@ -153,7 +157,7 @@ const MultichainAccountSelectorList = ({
}

case 'cell': {
const isSelected = item.data.id === selectedAccountGroup.id;
const isSelected = selectedIdSet.has(item.data.id);
return (
<AccountListCell
accountGroup={item.data}
Expand All @@ -171,7 +175,7 @@ const MultichainAccountSelectorList = ({
return null;
}
},
[selectedAccountGroup.id, handleSelectAccount],
[selectedIdSet, handleSelectAccount],
);

const keyExtractor = useCallback(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export interface MultichainAccountSelectorListProps
/**
* Selected account group
*/
selectedAccountGroup: AccountGroupObject;
selectedAccountGroups: AccountGroupObject[];
/**
* Test ID for the component
*/
Expand Down
Loading
Loading