Skip to content

Commit ece36e1

Browse files
gantunesrgantunesr
committed
refactor: migrate multichain account components to DS
1 parent 4dd4b2d commit ece36e1

17 files changed

Lines changed: 227 additions & 108 deletions

‎app/component-library/components-temp/MultichainAccounts/AccountCell/AccountCell.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { configureStore } from '@reduxjs/toolkit';
66
import { Box } from '@metamask/design-system-react-native';
77
import AccountCell from '.';
88
import initialBackgroundState from '../../../../util/test/initial-background-state.json';
9-
import { AvatarAccountType } from '../../../components/Avatars/Avatar/variants/AvatarAccount';
9+
import { AvatarAccountType } from '../avatarAccountVariant';
1010

1111
interface StoryArgs {
1212
accountGroup: AccountGroupObject;

‎app/component-library/components-temp/MultichainAccounts/AccountCell/AccountCell.test.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@ import {
99
createMockState,
1010
createMockWallet,
1111
} from '../test-utils';
12-
import { AvatarAccountType } from '../../../components/Avatars/Avatar';
13-
import { Maskicon } from '@metamask/design-system-react-native';
14-
import JazzIcon from 'react-native-jazzicon';
15-
import { Image as RNImage } from 'react-native';
12+
import {
13+
Blockies,
14+
Jazzicon,
15+
Maskicon,
16+
} from '@metamask/design-system-react-native';
1617
import { AccountCellIds } from './AccountCell.testIds';
1718
import { backgroundState } from '../../../../util/test/initial-root-state';
19+
import { AvatarAccountType } from '../avatarAccountVariant';
1820

1921
// Configurable mock balance for selector
2022
const mockBalance: { value: number; currency: string } = {
@@ -159,18 +161,18 @@ describe('AccountCell', () => {
159161
expect(UNSAFE_getByType(Maskicon)).toBeTruthy();
160162
});
161163

162-
it('renders JazzIcon AvatarAccount when avatarAccountType is JazzIcon', () => {
164+
it('renders Jazzicon AvatarAccount when avatarAccountType is JazzIcon', () => {
163165
const { UNSAFE_getByType } = renderAccountCell({
164166
avatarAccountType: AvatarAccountType.JazzIcon,
165167
});
166-
expect(UNSAFE_getByType(JazzIcon)).toBeTruthy();
168+
expect(UNSAFE_getByType(Jazzicon)).toBeTruthy();
167169
});
168170

169171
it('renders Blockies AvatarAccount when avatarAccountType is Blockies', () => {
170172
const { UNSAFE_getByType } = renderAccountCell({
171173
avatarAccountType: AvatarAccountType.Blockies,
172174
});
173-
expect(UNSAFE_getByType(RNImage)).toBeTruthy();
175+
expect(UNSAFE_getByType(Blockies)).toBeTruthy();
174176
});
175177

176178
it('calls onSelectAccount when account name is pressed', () => {

‎app/component-library/components-temp/MultichainAccounts/AccountCell/AccountCell.tsx‎

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
11
import { AccountGroupObject } from '@metamask/account-tree-controller';
22
import React, { useCallback, useMemo } from 'react';
3-
import { type ImageSourcePropType, TouchableOpacity, View } from 'react-native';
3+
import { TouchableOpacity, View } from 'react-native';
44
import { useSelector } from 'react-redux';
55
import { useNavigation } from '@react-navigation/native';
6+
import {
7+
AvatarAccount,
8+
AvatarAccountSize,
9+
AvatarNetwork,
10+
AvatarNetworkSize,
11+
FontWeight,
12+
Icon,
13+
IconColor,
14+
IconName,
15+
IconSize,
16+
SensitiveText,
17+
SensitiveTextLength,
18+
Text,
19+
TextColor,
20+
TextVariant,
21+
} from '@metamask/design-system-react-native';
622
import { useStyles } from '../../../hooks';
723
import styleSheet from './AccountCell.styles';
8-
import Text, { TextColor, TextVariant } from '../../../components/Texts/Text';
9-
import SensitiveText, {
10-
SensitiveTextLength,
11-
} from '../../../components/Texts/SensitiveText';
1224
import { Box } from '../../../../components/UI/Box/Box';
1325
import {
1426
AlignItems,
1527
FlexDirection,
1628
JustifyContent,
1729
} from '../../../../components/UI/Box/box.types';
18-
import Icon, { IconName, IconSize } from '../../../components/Icons/Icon';
1930
import { AccountCellIds } from './AccountCell.testIds';
2031
import { selectBalanceByAccountGroup } from '../../../../selectors/assets/balances';
2132
import { formatWithThreshold } from '../../../../util/assets';
2233
import I18n from '../../../../../locales/i18n';
23-
import AvatarAccount, {
24-
AvatarAccountType,
25-
} from '../../../components/Avatars/Avatar/variants/AvatarAccount';
26-
import Avatar, { AvatarVariant } from '../../../components/Avatars/Avatar';
27-
import { AvatarSize } from '../../../components/Avatars/Avatar/Avatar.types';
2834
import {
2935
selectIconSeedAddressByAccountGroupId,
3036
selectInternalAccountByAccountGroupAndScope,
@@ -34,10 +40,14 @@ import { createAccountGroupDetailsNavigationDetails } from '../../../../componen
3440
import { getNetworkImageSource } from '../../../../util/networks';
3541
import { formatChainIdToCaip } from '@metamask/bridge-controller';
3642
import { renderShortAddress } from '../../../../util/address';
43+
import {
44+
type AccountAvatarVariant,
45+
getAvatarAccountVariant,
46+
} from '../avatarAccountVariant';
3747

3848
interface AccountCellProps {
3949
accountGroup: AccountGroupObject;
40-
avatarAccountType: AvatarAccountType;
50+
avatarAccountType: AccountAvatarVariant;
4151
hideMenu?: boolean;
4252
startAccessory?: React.ReactNode;
4353
endContainer?: React.ReactNode;
@@ -49,7 +59,7 @@ type BalanceEndContainerProps = Pick<
4959
AccountCellProps,
5060
'accountGroup' | 'hideMenu' | 'onSelectAccount'
5161
> & {
52-
networkImageSource?: ImageSourcePropType;
62+
networkImageSource?: React.ComponentProps<typeof AvatarNetwork>['src'];
5363
};
5464

5565
const BalanceEndContainer = ({
@@ -89,8 +99,9 @@ const BalanceEndContainer = ({
8999
<TouchableOpacity onPress={onSelectAccount}>
90100
<View style={styles.balanceContainer}>
91101
<SensitiveText
92-
variant={TextVariant.BodyMDMedium}
93-
color={TextColor.Default}
102+
variant={TextVariant.BodyMd}
103+
color={TextColor.TextDefault}
104+
fontWeight={FontWeight.Medium}
94105
length={SensitiveTextLength.Long}
95106
isHidden={
96107
privacyMode && Boolean(displayBalance) && Boolean(totalBalance)
@@ -100,11 +111,10 @@ const BalanceEndContainer = ({
100111
{totalBalance ? displayBalance : null}
101112
</SensitiveText>
102113
{networkImageSource && (
103-
<Avatar
104-
variant={AvatarVariant.Network}
105-
size={AvatarSize.Xs}
114+
<AvatarNetwork
115+
size={AvatarNetworkSize.Xs}
106116
style={styles.networkBadge}
107-
imageSource={networkImageSource}
117+
src={networkImageSource}
108118
/>
109119
)}
110120
</View>
@@ -118,7 +128,7 @@ const BalanceEndContainer = ({
118128
<Icon
119129
name={IconName.MoreVertical}
120130
size={IconSize.Md}
121-
color={TextColor.Alternative}
131+
color={IconColor.IconAlternative}
122132
/>
123133
</TouchableOpacity>
124134
)}
@@ -136,6 +146,7 @@ const AccountCell = ({
136146
onSelectAccount,
137147
}: AccountCellProps) => {
138148
const { styles } = useStyles(styleSheet, {});
149+
const avatarAccountVariant = getAvatarAccountVariant(avatarAccountType);
139150

140151
const selectEvmAddress = useMemo(
141152
() => selectIconSeedAddressByAccountGroupId(accountGroup.id),
@@ -170,16 +181,17 @@ const AccountCell = ({
170181
<TouchableOpacity onPress={onSelectAccount} style={styles.mainTouchable}>
171182
{startAccessory}
172183
<AvatarAccount
173-
accountAddress={evmAddress}
174-
type={avatarAccountType}
175-
size={AvatarSize.Md}
184+
address={evmAddress ?? ''}
185+
variant={avatarAccountVariant}
186+
size={AvatarAccountSize.Md}
176187
testID={AccountCellIds.AVATAR}
177188
/>
178189
<View style={styles.accountName}>
179190
<View style={styles.accountNameRow}>
180191
<Text
181-
variant={TextVariant.BodyMDMedium}
182-
color={TextColor.Default}
192+
variant={TextVariant.BodyMd}
193+
color={TextColor.TextDefault}
194+
fontWeight={FontWeight.Medium}
183195
numberOfLines={1}
184196
style={styles.accountNameText}
185197
testID={AccountCellIds.ADDRESS}
@@ -190,8 +202,8 @@ const AccountCell = ({
190202
{networkAccountAddress && (
191203
<View style={styles.accountSubRow}>
192204
<Text
193-
variant={TextVariant.BodySM}
194-
color={TextColor.Alternative}
205+
variant={TextVariant.BodySm}
206+
color={TextColor.TextAlternative}
195207
numberOfLines={1}
196208
style={styles.accountSubText}
197209
>

‎app/component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList/AccountListCell/AccountListCell.test.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import {
88
createMockState,
99
createMockWallet,
1010
} from '../../test-utils';
11-
import { AvatarAccountType } from '../../../../components/Avatars/Avatar';
11+
import { AvatarAccountType } from '../../avatarAccountVariant';
1212
import { RootState } from '../../../../../reducers';
13-
import { CHECKBOX_ICON_TESTID } from '../../../../components/Checkbox/Checkbox.constants';
13+
import { ACCOUNT_LIST_CELL_CHECKBOX_ICON_TEST_ID } from './AccountListCell.testIds';
1414

1515
const mockNavigate = jest.fn();
1616

@@ -169,7 +169,7 @@ describe('AccountListCell', () => {
169169
expect(
170170
getByTestId(`account-list-cell-checkbox-${mockAccountGroup.id}`),
171171
).toBeTruthy();
172-
expect(getByTestId(CHECKBOX_ICON_TESTID)).toBeTruthy();
172+
expect(getByTestId(ACCOUNT_LIST_CELL_CHECKBOX_ICON_TEST_ID)).toBeTruthy();
173173
});
174174

175175
it('renders unchecked checkbox when isSelected is false', () => {
@@ -188,7 +188,9 @@ describe('AccountListCell', () => {
188188
expect(
189189
getByTestId(`account-list-cell-checkbox-${mockAccountGroup.id}`),
190190
).toBeTruthy();
191-
expect(queryByTestId(CHECKBOX_ICON_TESTID)).toBeFalsy();
191+
expect(
192+
queryByTestId(ACCOUNT_LIST_CELL_CHECKBOX_ICON_TEST_ID),
193+
).toBeFalsy();
192194
});
193195

194196
it('calls onSelectAccount when checkbox is pressed', () => {
@@ -246,7 +248,7 @@ describe('AccountListCell', () => {
246248
expect(
247249
getByTestId(`account-list-cell-checkbox-${mockAccountGroup.id}`),
248250
).toBeTruthy();
249-
expect(getByTestId(CHECKBOX_ICON_TESTID)).toBeTruthy();
251+
expect(getByTestId(ACCOUNT_LIST_CELL_CHECKBOX_ICON_TEST_ID)).toBeTruthy();
250252
expect(getByText('Test Account')).toBeTruthy();
251253
});
252254
});

‎app/component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList/AccountListCell/AccountListCell.testIds.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
export const ACCOUNT_LIST_CELL_TEST_IDS = {
22
ACCOUNT_LIST_CELL: 'account-list-cell-checkbox-',
33
} as const;
4+
5+
export const ACCOUNT_LIST_CELL_CHECKBOX_ICON_TEST_ID =
6+
'account-list-cell-checkbox-icon';

‎app/component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList/AccountListCell/AccountListCell.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import React, { memo, useCallback } from 'react';
22
import { View } from 'react-native';
3+
import { Checkbox } from '@metamask/design-system-react-native';
34

45
import { useStyles } from '../../../../hooks';
56
import AccountCell from '../../AccountCell';
67
import createStyles from '../MultichainAccountSelectorList.styles';
78
import { AccountListCellProps } from './AccountListCell.types';
8-
import Checkbox from '../../../../components/Checkbox';
9-
import { ACCOUNT_LIST_CELL_TEST_IDS } from './AccountListCell.testIds';
9+
import {
10+
ACCOUNT_LIST_CELL_CHECKBOX_ICON_TEST_ID,
11+
ACCOUNT_LIST_CELL_TEST_IDS,
12+
} from './AccountListCell.testIds';
1013

1114
const AccountListCell = memo(
1215
({
@@ -32,10 +35,17 @@ const AccountListCell = memo(
3235
<AccountCell
3336
startAccessory={
3437
showCheckbox ? (
35-
<View
36-
testID={`${ACCOUNT_LIST_CELL_TEST_IDS.ACCOUNT_LIST_CELL}${accountGroup.id}`}
37-
>
38-
<Checkbox isChecked={isSelected} onPress={handlePress} />
38+
<View>
39+
<Checkbox
40+
testID={`${ACCOUNT_LIST_CELL_TEST_IDS.ACCOUNT_LIST_CELL}${accountGroup.id}`}
41+
isSelected={isSelected}
42+
onChange={handlePress}
43+
checkedIconProps={
44+
isSelected
45+
? { testID: ACCOUNT_LIST_CELL_CHECKBOX_ICON_TEST_ID }
46+
: undefined
47+
}
48+
/>
3949
</View>
4050
) : undefined
4151
}

‎app/component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList/AccountListCell/AccountListCell.types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { AccountGroupObject } from '@metamask/account-tree-controller';
2-
import { AvatarAccountType } from '../../../../components/Avatars/Avatar/variants/AvatarAccount';
2+
import type { AccountAvatarVariant } from '../../avatarAccountVariant';
33

44
export interface AccountListCellProps {
55
accountGroup: AccountGroupObject;
6-
avatarAccountType: AvatarAccountType;
6+
avatarAccountType: AccountAvatarVariant;
77
isSelected: boolean;
88
onSelectAccount: (accountGroup: AccountGroupObject) => void;
99
showCheckbox?: boolean;

‎app/component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList/AccountListHeader/AccountListHeader.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React, { memo } from 'react';
22
import { View } from 'react-native';
3-
4-
import { useStyles } from '../../../../hooks';
5-
import Text, {
3+
import {
4+
FontWeight,
5+
Text,
66
TextColor,
77
TextVariant,
8-
} from '../../../../components/Texts/Text';
8+
} from '@metamask/design-system-react-native';
9+
10+
import { useStyles } from '../../../../hooks';
911
import createStyles from '../MultichainAccountSelectorList.styles';
1012
import { AccountListHeaderProps } from './AccountListHeader.types';
1113

@@ -16,8 +18,9 @@ const AccountListHeader = memo(
1618
return (
1719
<View style={[styles.sectionHeader, containerStyle]}>
1820
<Text
19-
variant={TextVariant.BodyMDMedium}
20-
color={TextColor.Alternative}
21+
variant={TextVariant.BodyMd}
22+
color={TextColor.TextAlternative}
23+
fontWeight={FontWeight.Medium}
2124
style={styles.sectionHeaderText}
2225
>
2326
{title}

‎app/component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList/ExternalAccountCell/ExternalAccountCell.test.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { fireEvent } from '@testing-library/react-native';
33
import ExternalAccountCell from './ExternalAccountCell';
44
import renderWithProvider from '../../../../../util/test/renderWithProvider';
55
import { strings } from '../../../../../../locales/i18n';
6+
import { EXTERNAL_ACCOUNT_CELL_TEST_IDS } from './ExternalAccountCell.testIds';
67

78
// Mock the settings selector
89
jest.mock('../../../../../selectors/settings', () => ({
@@ -75,7 +76,9 @@ describe('ExternalAccountCell', () => {
7576
);
7677

7778
// Network avatar should not be rendered
78-
expect(queryByTestId('network-avatar-image')).toBeFalsy();
79+
expect(
80+
queryByTestId(EXTERNAL_ACCOUNT_CELL_TEST_IDS.NETWORK_AVATAR),
81+
).toBeFalsy();
7982
});
8083

8184
it('renders with network avatar when chainId is provided', () => {
@@ -88,7 +91,9 @@ describe('ExternalAccountCell', () => {
8891
);
8992

9093
// Network avatar should be rendered
91-
expect(getByTestId('network-avatar-image')).toBeTruthy();
94+
expect(
95+
getByTestId(EXTERNAL_ACCOUNT_CELL_TEST_IDS.NETWORK_AVATAR),
96+
).toBeTruthy();
9297
});
9398

9499
it('renders account avatar', () => {
@@ -205,7 +210,9 @@ describe('ExternalAccountCell', () => {
205210
/>,
206211
);
207212

208-
expect(getByTestId('network-avatar-image')).toBeTruthy();
213+
expect(
214+
getByTestId(EXTERNAL_ACCOUNT_CELL_TEST_IDS.NETWORK_AVATAR),
215+
).toBeTruthy();
209216
});
210217

211218
it('renders correctly with Polygon chain ID', () => {
@@ -217,7 +224,9 @@ describe('ExternalAccountCell', () => {
217224
/>,
218225
);
219226

220-
expect(getByTestId('network-avatar-image')).toBeTruthy();
227+
expect(
228+
getByTestId(EXTERNAL_ACCOUNT_CELL_TEST_IDS.NETWORK_AVATAR),
229+
).toBeTruthy();
221230
});
222231

223232
it('renders correctly with Optimism chain ID', () => {
@@ -229,7 +238,9 @@ describe('ExternalAccountCell', () => {
229238
/>,
230239
);
231240

232-
expect(getByTestId('network-avatar-image')).toBeTruthy();
241+
expect(
242+
getByTestId(EXTERNAL_ACCOUNT_CELL_TEST_IDS.NETWORK_AVATAR),
243+
).toBeTruthy();
233244
});
234245
});
235246

‎app/component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList/ExternalAccountCell/ExternalAccountCell.testIds.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export const EXTERNAL_ACCOUNT_CELL_TEST_IDS = {
22
CONTAINER: 'external-account-cell-touchable',
3+
NETWORK_AVATAR: 'network-avatar-image',
34
} as const;

0 commit comments

Comments
 (0)