Skip to content

Commit 9a446ec

Browse files
kirillzyuskokirillzyusko
committed
feat: migrate Button component (predict scope)
1 parent d6fd3c4 commit 9a446ec

File tree

15 files changed

+242
-262
lines changed

15 files changed

+242
-262
lines changed

‎app/components/UI/Predict/components/PredictBalance/PredictBalance.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {
33
BoxAlignItems,
44
BoxFlexDirection,
55
BoxJustifyContent,
6+
Button,
7+
ButtonVariant,
68
Text,
79
TextColor,
810
} from '@metamask/design-system-react-native';
@@ -28,9 +30,6 @@ import Badge, {
2830
import BadgeWrapper, {
2931
BadgePosition,
3032
} from '../../../../../component-library/components/Badges/BadgeWrapper';
31-
import Button, {
32-
ButtonVariants,
33-
} from '../../../../../component-library/components/Buttons/Button';
3433
import Skeleton from '../../../../../component-library/components/Skeleton/Skeleton';
3534
import { USDC_SYMBOL, USDC_TOKEN_ICON_URL } from '@metamask/perps-controller';
3635
import { usePredictBalance } from '../../hooks/usePredictBalance';
@@ -190,19 +189,21 @@ const PredictBalance: React.FC<PredictBalanceProps> = ({ onLayout }) => {
190189
<Box flexDirection={BoxFlexDirection.Row} twClassName="gap-3">
191190
<Button
192191
variant={
193-
hasBalance ? ButtonVariants.Secondary : ButtonVariants.Primary
192+
hasBalance ? ButtonVariant.Secondary : ButtonVariant.Primary
194193
}
195194
style={tw.style('flex-1')}
196-
label={strings('predict.deposit.add_funds')}
197195
onPress={handleAddFunds}
198-
/>
196+
>
197+
{strings('predict.deposit.add_funds')}
198+
</Button>
199199
{hasBalance && (
200200
<Button
201-
variant={ButtonVariants.Secondary}
201+
variant={ButtonVariant.Secondary}
202202
style={tw.style('flex-1')}
203-
label={strings('predict.deposit.withdraw')}
204203
onPress={handleWithdraw}
205-
/>
204+
>
205+
{strings('predict.deposit.withdraw')}
206+
</Button>
206207
)}
207208
</Box>
208209
</Box>

‎app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx‎

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import Animated, {
88
} from 'react-native-reanimated';
99
import { SafeAreaView } from 'react-native-safe-area-context';
1010
import { strings } from '../../../../../../locales/i18n';
11-
import ButtonBase from '../../../../../component-library/components/Buttons/Button/foundation/ButtonBase';
12-
import Button, {
11+
import {
12+
Button,
13+
ButtonBase,
1314
ButtonSize,
14-
ButtonVariants,
15-
ButtonWidthTypes,
16-
} from '../../../../../component-library/components/Buttons/Button';
15+
ButtonVariant,
16+
} from '@metamask/design-system-react-native';
1717
import Text, {
1818
TextVariant,
1919
} from '../../../../../component-library/components/Texts/Text';
@@ -137,35 +137,31 @@ const PredictGTMModal = () => {
137137
onPress={() => handleGetStarted()}
138138
testID={PREDICT_GTM_MODAL_TEST_IDS.GET_STARTED_BUTTON}
139139
size={ButtonSize.Lg}
140-
width={ButtonWidthTypes.Full}
140+
isFullWidth
141141
style={styles.getStartedButton}
142-
activeOpacity={0.6}
143-
label={
144-
<Text
145-
variant={TextVariant.BodyMDMedium}
146-
style={styles.getStartedButtonText}
147-
>
148-
{strings('predict.gtm_content.get_started')}
149-
</Text>
150-
}
151-
/>
142+
>
143+
<Text
144+
variant={TextVariant.BodyMDMedium}
145+
style={styles.getStartedButtonText}
146+
>
147+
{strings('predict.gtm_content.get_started')}
148+
</Text>
149+
</ButtonBase>
152150
<Button
153-
variant={ButtonVariants.Secondary}
151+
variant={ButtonVariant.Secondary}
154152
onPress={() => handleClose()}
155153
testID={PREDICT_GTM_MODAL_TEST_IDS.NOT_NOW_BUTTON}
156-
width={ButtonWidthTypes.Full}
154+
isFullWidth
157155
size={ButtonSize.Lg}
158156
style={styles.notNowButton}
159-
activeOpacity={0.6}
160-
label={
161-
<Text
162-
variant={TextVariant.BodyMDMedium}
163-
style={styles.notNowButtonText}
164-
>
165-
{strings('predict.gtm_content.not_now')}
166-
</Text>
167-
}
168-
/>
157+
>
158+
<Text
159+
variant={TextVariant.BodyMDMedium}
160+
style={styles.notNowButtonText}
161+
>
162+
{strings('predict.gtm_content.not_now')}
163+
</Text>
164+
</Button>
169165
</View>
170166
</SafeAreaView>
171167
</Animated.View>

‎app/components/UI/Predict/components/PredictKeypad/PredictKeypad.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { useTailwind } from '@metamask/design-system-twrnc-preset';
22
import React, { forwardRef, useCallback, useImperativeHandle } from 'react';
33
import { View } from 'react-native';
4-
import Button, {
4+
import {
5+
Button,
56
ButtonSize,
6-
ButtonVariants,
7-
} from '../../../../../component-library/components/Buttons/Button';
7+
ButtonVariant,
8+
} from '@metamask/design-system-react-native';
89
import Keypad from '../../../../Base/Keypad';
910

1011
interface PredictKeypadProps {
@@ -141,33 +142,37 @@ const PredictKeypad = forwardRef<PredictKeypadHandles, PredictKeypadProps>(
141142
<View style={tw.style('px-4 mb-3')}>
142143
<View style={tw.style('flex-row space-between gap-2')}>
143144
<Button
144-
variant={ButtonVariants.Secondary}
145+
variant={ButtonVariant.Secondary}
145146
size={ButtonSize.Md}
146-
label="$20"
147147
onPress={() => handleKeypadAmountPress(20)}
148148
style={tw.style('flex-1 h-12')}
149-
/>
149+
>
150+
$20
151+
</Button>
150152
<Button
151-
variant={ButtonVariants.Secondary}
153+
variant={ButtonVariant.Secondary}
152154
size={ButtonSize.Md}
153-
label="$50"
154155
onPress={() => handleKeypadAmountPress(50)}
155156
style={tw.style('flex-1 h-12')}
156-
/>
157+
>
158+
$50
159+
</Button>
157160
<Button
158-
variant={ButtonVariants.Secondary}
161+
variant={ButtonVariant.Secondary}
159162
size={ButtonSize.Md}
160-
label="$100"
161163
onPress={() => handleKeypadAmountPress(100)}
162164
style={tw.style('flex-1 h-12')}
163-
/>
165+
>
166+
$100
167+
</Button>
164168
<Button
165-
variant={ButtonVariants.Primary}
169+
variant={ButtonVariant.Primary}
166170
size={ButtonSize.Md}
167-
label="Done"
168171
onPress={handleDonePress}
169172
style={tw.style('flex-1 h-12')}
170-
/>
173+
>
174+
Done
175+
</Button>
171176
</View>
172177
</View>
173178
<Keypad

‎app/components/UI/Predict/components/PredictMarketMultiple/PredictMarketMultiple.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { fireEvent } from '@testing-library/react-native';
22
import React from 'react';
33
import PredictMarketMultiple from '.';
4-
import Button from '../../../../../component-library/components/Buttons/Button';
4+
import { Button } from '@metamask/design-system-react-native';
55
import { backgroundState } from '../../../../../util/test/initial-root-state';
66
import renderWithProvider from '../../../../../util/test/renderWithProvider';
77
import { PredictMarket, Recurrence } from '../../types';

‎app/components/UI/Predict/components/PredictMarketMultiple/PredictMarketMultiple.tsx‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import {
33
BoxAlignItems,
44
BoxFlexDirection,
55
BoxJustifyContent,
6+
Button,
7+
ButtonSize,
8+
ButtonVariant,
69
Text,
710
TextColor,
811
TextVariant,
@@ -14,11 +17,6 @@ import { Image, TouchableOpacity, View } from 'react-native';
1417
import { strings } from '../../../../../../locales/i18n';
1518
import DevLogger from '../../../../../core/SDKConnect/utils/DevLogger';
1619
import Logger from '../../../../../util/Logger';
17-
import Button, {
18-
ButtonSize,
19-
ButtonVariants,
20-
ButtonWidthTypes,
21-
} from '../../../../../component-library/components/Buttons/Button';
2220
import Icon, {
2321
IconColor,
2422
IconName,
@@ -253,44 +251,42 @@ const PredictMarketMultiple: React.FC<PredictMarketMultipleProps> = ({
253251
twClassName={isCarousel ? 'gap-1' : 'gap-2'}
254252
>
255253
<Button
256-
variant={ButtonVariants.Secondary}
254+
variant={ButtonVariant.Secondary}
257255
size={ButtonSize.Sm}
258-
label={
259-
<Text
260-
variant={
261-
isCarousel ? TextVariant.BodyXs : TextVariant.BodyMd
262-
}
263-
style={tw.style('font-medium')}
264-
color={TextColor.SuccessDefault}
265-
numberOfLines={1}
266-
ellipsizeMode="clip"
267-
>
268-
{truncateLabel(outcomeLabels[0])}
269-
</Text>
270-
}
271256
onPress={() => handleBuy(outcome, outcome.tokens[0])}
272257
style={styles.buttonYes}
273-
/>
258+
>
259+
<Text
260+
variant={
261+
isCarousel ? TextVariant.BodyXs : TextVariant.BodyMd
262+
}
263+
style={tw.style('font-medium')}
264+
color={TextColor.SuccessDefault}
265+
numberOfLines={1}
266+
ellipsizeMode="clip"
267+
>
268+
{truncateLabel(outcomeLabels[0])}
269+
</Text>
270+
</Button>
274271
<Button
275-
variant={ButtonVariants.Secondary}
272+
variant={ButtonVariant.Secondary}
276273
size={ButtonSize.Sm}
277-
width={ButtonWidthTypes.Full}
278-
label={
279-
<Text
280-
variant={
281-
isCarousel ? TextVariant.BodyXs : TextVariant.BodyMd
282-
}
283-
style={tw.style('font-medium')}
284-
color={TextColor.ErrorDefault}
285-
numberOfLines={1}
286-
ellipsizeMode="clip"
287-
>
288-
{truncateLabel(outcomeLabels[1])}
289-
</Text>
290-
}
274+
isFullWidth
291275
onPress={() => handleBuy(outcome, outcome.tokens[1])}
292276
style={styles.buttonNo}
293-
/>
277+
>
278+
<Text
279+
variant={
280+
isCarousel ? TextVariant.BodyXs : TextVariant.BodyMd
281+
}
282+
style={tw.style('font-medium')}
283+
color={TextColor.ErrorDefault}
284+
numberOfLines={1}
285+
ellipsizeMode="clip"
286+
>
287+
{truncateLabel(outcomeLabels[1])}
288+
</Text>
289+
</Button>
294290
</Box>
295291
</Box>
296292
);

‎app/components/UI/Predict/components/PredictMarketOutcome/PredictMarketOutcome.tsx‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import {
22
Box,
33
BoxAlignItems,
44
BoxFlexDirection,
5+
Button,
6+
ButtonSize,
7+
ButtonVariant,
58
Text,
69
TextColor,
710
TextVariant,
@@ -11,11 +14,6 @@ import { NavigationProp, useNavigation } from '@react-navigation/native';
1114
import React from 'react';
1215
import { Image, View } from 'react-native';
1316
import { strings } from '../../../../../../locales/i18n';
14-
import Button, {
15-
ButtonSize,
16-
ButtonVariants,
17-
ButtonWidthTypes,
18-
} from '../../../../../component-library/components/Buttons/Button';
1917
import Icon, {
2018
IconName,
2119
IconSize,
@@ -188,39 +186,37 @@ const PredictMarketOutcome: React.FC<PredictMarketOutcomeProps> = ({
188186
{!isClosed && (
189187
<View style={styles.buttonContainer}>
190188
<Button
191-
variant={ButtonVariants.Secondary}
189+
variant={ButtonVariant.Secondary}
192190
size={ButtonSize.Md}
193-
width={ButtonWidthTypes.Full}
194-
label={
195-
<Text
196-
style={tw.style('font-medium text-center')}
197-
color={TextColor.SuccessDefault}
198-
>
199-
{outcome.tokens[0].title}
200-
{isBiggerLabel ? '\n' : ' • '}
201-
{formatCents(outcome.tokens[0].price)}
202-
</Text>
203-
}
191+
isFullWidth
204192
onPress={() => handleBuy(outcome.tokens[0])}
205193
style={[styles.buttonYes, isBiggerLabel && tw.style('h-full py-2')]}
206-
/>
194+
>
195+
<Text
196+
style={tw.style('font-medium text-center')}
197+
color={TextColor.SuccessDefault}
198+
>
199+
{outcome.tokens[0].title}
200+
{isBiggerLabel ? '\n' : ' • '}
201+
{formatCents(outcome.tokens[0].price)}
202+
</Text>
203+
</Button>
207204
<Button
208-
variant={ButtonVariants.Secondary}
205+
variant={ButtonVariant.Secondary}
209206
size={ButtonSize.Md}
210-
width={ButtonWidthTypes.Full}
211-
label={
212-
<Text
213-
style={tw.style('font-medium text-center')}
214-
color={TextColor.ErrorDefault}
215-
>
216-
{outcome.tokens[1].title}
217-
{isBiggerLabel ? '\n' : ' • '}
218-
{formatCents(outcome.tokens[1].price)}
219-
</Text>
220-
}
207+
isFullWidth
221208
onPress={() => handleBuy(outcome.tokens[1])}
222209
style={[styles.buttonNo, isBiggerLabel && tw.style('h-full py-2')]}
223-
/>
210+
>
211+
<Text
212+
style={tw.style('font-medium text-center')}
213+
color={TextColor.ErrorDefault}
214+
>
215+
{outcome.tokens[1].title}
216+
{isBiggerLabel ? '\n' : ' • '}
217+
{formatCents(outcome.tokens[1].price)}
218+
</Text>
219+
</Button>
224220
</View>
225221
)}
226222
</View>

0 commit comments

Comments
 (0)