Skip to content

Commit 6cbb169

Browse files
kirillzyuskokirillzyusko
authored
feat: migrate Button (acc-eng scope) (#27549)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** Replaced `Button` in `acc-eng` scope. ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-445 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** https://github.com/user-attachments/assets/84260d66-993a-4172-8a1f-22cd5517399c ### **After** <!-- [screenshots/recordings] --> https://github.com/user-attachments/assets/64b16cd0-bc2e-40cd-98df-00fac4ec52f2 ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Swaps several Multichain Accounts/permissions screens to the design-system `Button` API (prop/variant/disabled semantics), which could subtly affect CTA styling or enabled/disabled behavior in connection and account-management flows. > > **Overview** > Migrates Multichain Accounts screens from the legacy component-library `Button` to `@metamask/design-system-react-native` `Button`, updating usage from `label` props to children, mapping variants/sizes (`ButtonVariant`, `ButtonBaseSize`), and switching width/disabled props to `isFullWidth`/`isDisabled`. > > Updates affected CTAs across remove account, intro/learn-more modals, connect multi-selector, permissions summary (including `startIconName` to design-system icon enum), private key list, and edit account name. Test assertions were adjusted to use `toBeDisabled()`/`toBeEnabled()` where button disabled state is checked. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit f5177dd. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent f7a914b commit 6cbb169

9 files changed

Lines changed: 96 additions & 90 deletions

File tree

‎app/components/Views/MultichainAccounts/AccountDetails/components/RemoveAccount/RemoveAccount.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import React, { useCallback } from 'react';
2-
import { TextVariant } from '../../../../../../component-library/components/Texts/Text';
32
import { useNavigation } from '@react-navigation/native';
43
import Routes from '../../../../../../constants/navigation/Routes';
54
import { InternalAccount } from '@metamask/keyring-internal-api';
65
import { strings } from '../../../../../../../locales/i18n';
76
import { useStyles } from '../../../../../hooks/useStyles';
87
import styleSheet from './RemoveAccount.styles';
9-
import Button, {
10-
ButtonVariants,
11-
} from '../../../../../../component-library/components/Buttons/Button';
8+
import { Button, ButtonVariant } from '@metamask/design-system-react-native';
129
import { AccountDetailsIds } from '../../../AccountDetails.testIds';
1310

1411
interface RemoveAccountProps {
@@ -31,10 +28,10 @@ export const RemoveAccount = ({ account }: RemoveAccountProps) => {
3128
testID={AccountDetailsIds.REMOVE_ACCOUNT_BUTTON}
3229
style={styles.button}
3330
isDanger
34-
variant={ButtonVariants.Secondary}
35-
labelTextVariant={TextVariant.BodyMDMedium}
31+
variant={ButtonVariant.Secondary}
3632
onPress={handleRemoveAccountClick}
37-
label={strings('multichain_accounts.delete_account.title')}
38-
/>
33+
>
34+
{strings('multichain_accounts.delete_account.title')}
35+
</Button>
3936
);
4037
};

‎app/components/Views/MultichainAccounts/IntroModal/LearnMoreBottomSheet.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -221,13 +221,13 @@ describe('LearnMoreBottomSheet', () => {
221221
);
222222

223223
// Initially checkbox should be unchecked and confirm button disabled
224-
expect(confirmButton).toHaveProp('disabled', true);
224+
expect(confirmButton).toBeDisabled();
225225

226226
// Press checkbox to check it
227227
fireEvent.press(checkbox);
228228

229229
// Confirm button should now be enabled
230-
expect(confirmButton).toHaveProp('disabled', false);
230+
expect(confirmButton).toBeEnabled();
231231
});
232232

233233
it('handles confirm button press when checkbox is checked', () => {

‎app/components/Views/MultichainAccounts/IntroModal/LearnMoreBottomSheet.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,10 @@ import {
66
TextVariant,
77
IconName,
88
TextColor,
9+
Button,
10+
ButtonVariant,
11+
ButtonBaseSize,
912
} from '@metamask/design-system-react-native';
10-
import Button, {
11-
ButtonVariants,
12-
ButtonWidthTypes,
13-
ButtonSize,
14-
} from '../../../../component-library/components/Buttons/Button';
1513
import Checkbox from '../../../../component-library/components/Checkbox';
1614
import BottomSheet, {
1715
BottomSheetRef,
@@ -111,14 +109,15 @@ const LearnMoreBottomSheet: React.FC<LearnMoreBottomSheetProps> = ({
111109

112110
<View style={styles.footer}>
113111
<Button
114-
variant={ButtonVariants.Primary}
115-
label={strings('multichain_accounts.learn_more.confirm_button')}
116-
size={ButtonSize.Lg}
117-
width={ButtonWidthTypes.Full}
112+
variant={ButtonVariant.Primary}
113+
size={ButtonBaseSize.Lg}
114+
isFullWidth
118115
onPress={handleConfirm}
119116
isDisabled={!isCheckboxChecked}
120117
testID={LEARN_MORE_BOTTOM_SHEET_TEST_IDS.CONFIRM_BUTTON}
121-
/>
118+
>
119+
{strings('multichain_accounts.learn_more.confirm_button')}
120+
</Button>
122121
</View>
123122
</View>
124123
</BottomSheet>

‎app/components/Views/MultichainAccounts/IntroModal/MultichainAccountsIntroModal.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,10 @@ import {
66
TextVariant,
77
IconName,
88
TextColor,
9+
Button,
10+
ButtonVariant,
11+
ButtonBaseSize,
912
} from '@metamask/design-system-react-native';
10-
import Button, {
11-
ButtonVariants,
12-
ButtonWidthTypes,
13-
ButtonSize,
14-
} from '../../../../component-library/components/Buttons/Button';
1513
import { useNavigation, useTheme } from '@react-navigation/native';
1614
import { useDispatch } from 'react-redux';
1715
import { createAccountSelectorNavDetails } from '../../AccountSelector';
@@ -201,24 +199,26 @@ const MultichainAccountsIntroModal = () => {
201199

202200
<View style={styles.buttonsContainer}>
203201
<Button
204-
variant={ButtonVariants.Primary}
205-
label={renderButtonLabel()}
206-
size={ButtonSize.Lg}
207-
width={ButtonWidthTypes.Full}
202+
variant={ButtonVariant.Primary}
203+
size={ButtonBaseSize.Lg}
204+
isFullWidth
208205
onPress={handleViewAccounts}
209206
isDisabled={isAligning}
210207
testID={
211208
MULTICHAIN_ACCOUNTS_INTRO_MODAL_TEST_IDS.VIEW_ACCOUNTS_BUTTON
212209
}
213-
/>
210+
>
211+
{renderButtonLabel()}
212+
</Button>
214213
<Button
215-
variant={ButtonVariants.Link}
216-
label={strings('multichain_accounts.intro.learn_more_button')}
217-
size={ButtonSize.Lg}
218-
width={ButtonWidthTypes.Full}
214+
variant={ButtonVariant.Tertiary}
215+
size={ButtonBaseSize.Lg}
216+
isFullWidth
219217
onPress={handleLearnMore}
220218
testID={MULTICHAIN_ACCOUNTS_INTRO_MODAL_TEST_IDS.LEARN_MORE_BUTTON}
221-
/>
219+
>
220+
{strings('multichain_accounts.intro.learn_more_button')}
221+
</Button>
222222
</View>
223223
</View>
224224
</View>

‎app/components/Views/MultichainAccounts/MultichainAccountConnect/MultichainAccountConnectMultiSelector/MultichainAccountConnectMultiSelector.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ describe('MultichainAccountConnectMultiSelector', () => {
306306
const updateButton = getByTestId(
307307
ConnectAccountBottomSheetSelectorsIDs.SELECT_MULTI_BUTTON,
308308
);
309-
expect(updateButton.props.disabled).toBe(true);
309+
expect(updateButton).toBeDisabled();
310310
});
311311
});
312312

‎app/components/Views/MultichainAccounts/MultichainAccountConnect/MultichainAccountConnectMultiSelector/MultichainAccountConnectMultiSelector.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { useSelector } from 'react-redux';
55

66
// External dependencies.
77
import { strings } from '../../../../../../locales/i18n';
8-
import Button, {
9-
ButtonSize,
10-
ButtonVariants,
11-
} from '../../../../../component-library/components/Buttons/Button';
8+
import {
9+
Button,
10+
ButtonVariant,
11+
ButtonBaseSize,
12+
} from '@metamask/design-system-react-native';
1213
import SheetHeader from '../../../../../component-library/components/Sheet/SheetHeader';
1314
import Text, {
1415
TextColor,
@@ -109,17 +110,18 @@ const MultichainAccountConnectMultiSelector = ({
109110
<View style={styles.connectOrUpdateButtonContainer}>
110111
{areAnyAccountsSelected && (
111112
<Button
112-
variant={ButtonVariants.Primary}
113-
label={strings('networks.update')}
113+
variant={ButtonVariant.Primary}
114114
onPress={handleSubmit}
115-
size={ButtonSize.Lg}
115+
size={ButtonBaseSize.Lg}
116116
style={{
117117
...styles.button,
118118
...(isLoading && styles.disabled),
119119
}}
120-
disabled={isLoading}
120+
isDisabled={isLoading}
121121
testID={ConnectAccountBottomSheetSelectorsIDs.SELECT_MULTI_BUTTON}
122-
/>
122+
>
123+
{strings('networks.update')}
124+
</Button>
123125
)}
124126
</View>
125127
{areNoAccountsSelected && showDisconnectAllButton && (
@@ -133,16 +135,17 @@ const MultichainAccountConnectMultiSelector = ({
133135
</View>
134136
<View style={styles.disconnectAllButtonContainer}>
135137
<Button
136-
variant={ButtonVariants.Primary}
137-
label={strings('accounts.disconnect')}
138+
variant={ButtonVariant.Primary}
138139
testID={ConnectedAccountsSelectorsIDs.DISCONNECT}
139140
onPress={handleDisconnect}
140141
isDanger
141-
size={ButtonSize.Lg}
142+
size={ButtonBaseSize.Lg}
142143
style={{
143144
...styles.button,
144145
}}
145-
/>
146+
>
147+
{strings('accounts.disconnect')}
148+
</Button>
146149
</View>
147150
</View>
148151
)}

‎app/components/Views/MultichainAccounts/MultichainPermissionsSummary/MultichainPermissionsSummary.tsx‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,12 @@ import TextComponent, {
2525
TextVariant,
2626
} from '../../../../component-library/components/Texts/Text';
2727
import AvatarGroup from '../../../../component-library/components/Avatars/AvatarGroup';
28-
import Button, {
29-
ButtonSize,
30-
ButtonVariants,
31-
} from '../../../../component-library/components/Buttons/Button';
28+
import {
29+
Button,
30+
ButtonVariant,
31+
ButtonBaseSize,
32+
IconName as DesignSystemIconName,
33+
} from '@metamask/design-system-react-native';
3234
import { getHost } from '../../../../util/browser';
3335
import WebsiteIcon from '../../../UI/WebsiteIcon';
3436
import styleSheet from './MultichainPermissionsSummary.styles';
@@ -623,19 +625,20 @@ const MultichainPermissionsSummary = ({
623625
{isAlreadyConnected && isDisconnectAllShown && (
624626
<View style={styles.disconnectAllContainer}>
625627
<Button
626-
variant={ButtonVariants.Secondary}
628+
variant={ButtonVariant.Secondary}
627629
testID={
628630
ConnectedAccountsSelectorsIDs.DISCONNECT_ALL_ACCOUNTS_NETWORKS
629631
}
630-
label={strings('accounts.disconnect_all')}
631632
onPress={toggleRevokeAllPermissionsModal}
632-
startIconName={IconName.Logout}
633+
startIconName={DesignSystemIconName.Logout}
633634
isDanger
634-
size={ButtonSize.Lg}
635+
size={ButtonBaseSize.Lg}
635636
style={{
636637
...styles.disconnectButton,
637638
}}
638-
/>
639+
>
640+
{strings('accounts.disconnect_all')}
641+
</Button>
639642
</View>
640643
)}
641644
{showActionButtons && !isNonDappNetworkSwitch && (
@@ -670,31 +673,33 @@ const MultichainPermissionsSummary = ({
670673
<View style={styles.nonDappNetworkSwitchButtons}>
671674
<View style={styles.actionButtonsContainer}>
672675
<Button
673-
variant={ButtonVariants.Primary}
674-
label={strings('permissions.add_this_network')}
676+
variant={ButtonVariant.Primary}
675677
testID={
676678
NetworkNonPemittedBottomSheetSelectorsIDs.ADD_THIS_NETWORK_BUTTON
677679
}
678680
onPress={onAddNetwork}
679-
size={ButtonSize.Lg}
681+
size={ButtonBaseSize.Lg}
680682
style={{
681683
...styles.disconnectButton,
682684
}}
683-
/>
685+
>
686+
{strings('permissions.add_this_network')}
687+
</Button>
684688
</View>
685689
<View style={styles.actionButtonsContainer}>
686690
<Button
687-
variant={ButtonVariants.Secondary}
688-
label={strings('permissions.choose_from_permitted_networks')}
691+
variant={ButtonVariant.Secondary}
689692
testID={
690693
NetworkNonPemittedBottomSheetSelectorsIDs.CHOOSE_FROM_PERMITTED_NETWORKS_BUTTON
691694
}
692695
onPress={onChooseFromPermittedNetworks}
693-
size={ButtonSize.Lg}
696+
size={ButtonBaseSize.Lg}
694697
style={{
695698
...styles.disconnectButton,
696699
}}
697-
/>
700+
>
701+
{strings('permissions.choose_from_permitted_networks')}
702+
</Button>
698703
</View>
699704
</View>
700705
)}

‎app/components/Views/MultichainAccounts/PrivateKeyList/PrivateKeyList.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,11 @@ import Text, {
3838
TextVariant,
3939
TextColor,
4040
} from '../../../../component-library/components/Texts/Text';
41-
import Button, {
42-
ButtonSize,
43-
ButtonVariants,
44-
} from '../../../../component-library/components/Buttons/Button';
41+
import {
42+
Button,
43+
ButtonVariant,
44+
ButtonBaseSize,
45+
} from '@metamask/design-system-react-native';
4546
import {
4647
useParams,
4748
createNavigationDetails,
@@ -233,21 +234,23 @@ export const PrivateKeyList = () => {
233234
</View>
234235
<View style={styles.buttons}>
235236
<Button
236-
label={strings('multichain_accounts.private_key_list.cancel')}
237-
size={ButtonSize.Lg}
238-
variant={ButtonVariants.Secondary}
237+
size={ButtonBaseSize.Lg}
238+
variant={ButtonVariant.Secondary}
239239
onPress={onCancel}
240240
style={styles.button}
241241
testID={PrivateKeyListIds.CANCEL_BUTTON}
242-
/>
242+
>
243+
{strings('multichain_accounts.private_key_list.cancel')}
244+
</Button>
243245
<Button
244-
label={strings('multichain_accounts.private_key_list.continue')}
245-
size={ButtonSize.Lg}
246-
variant={ButtonVariants.Primary}
246+
size={ButtonBaseSize.Lg}
247+
variant={ButtonVariant.Primary}
247248
onPress={() => verifyPasswordAndUnlockKeys()}
248249
style={styles.button}
249250
testID={PrivateKeyListIds.CONTINUE_BUTTON}
250-
/>
251+
>
252+
{strings('multichain_accounts.private_key_list.continue')}
253+
</Button>
251254
</View>
252255
</>
253256
),

‎app/components/Views/MultichainAccounts/sheets/EditMultichainAccountName/EditMultichainAccountName.tsx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ import Text, {
1313
TextVariant,
1414
} from '../../../../../component-library/components/Texts/Text';
1515
import { Box } from '../../../../UI/Box/Box';
16-
import Button, {
17-
ButtonSize,
18-
ButtonVariants,
19-
ButtonWidthTypes,
20-
} from '../../../../../component-library/components/Buttons/Button';
16+
import {
17+
Button,
18+
ButtonVariant,
19+
ButtonBaseSize,
20+
} from '@metamask/design-system-react-native';
2121
import styleSheet from './EditMultichainAccountName.styles';
2222
import { useStyles } from '../../../../hooks/useStyles';
2323
import { useTheme } from '../../../../../util/theme';
@@ -144,15 +144,14 @@ export const EditMultichainAccountName = () => {
144144
</Box>
145145
<Box style={styles.saveButtonContainer}>
146146
<Button
147-
width={ButtonWidthTypes.Full}
148-
variant={ButtonVariants.Primary}
149-
label={strings(
150-
'multichain_accounts.edit_account_name.confirm_button',
151-
)}
152-
size={ButtonSize.Lg}
147+
isFullWidth
148+
variant={ButtonVariant.Primary}
149+
size={ButtonBaseSize.Lg}
153150
onPress={handleAccountNameChange}
154151
testID={EditAccountNameIds.SAVE_BUTTON}
155-
/>
152+
>
153+
{strings('multichain_accounts.edit_account_name.confirm_button')}
154+
</Button>
156155
</Box>
157156
</KeyboardAvoidingView>
158157
</SafeAreaView>

0 commit comments

Comments
 (0)