Skip to content

Commit 1364451

Browse files
infiniteflowerinfiniteflower
committed
fix: header being off screen
1 parent 219c754 commit 1364451

3 files changed

Lines changed: 137 additions & 137 deletions

File tree

‎app/components/UI/Bridge/Views/BatchSellReview/BatchSellReview.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
ButtonSize,
1616
ButtonVariant,
1717
FontWeight,
18+
HeaderStandard,
1819
Icon,
1920
IconColor,
2021
IconName,
@@ -26,7 +27,6 @@ import {
2627

2728
import { strings } from '../../../../../../locales/i18n';
2829
import Routes from '../../../../../constants/navigation/Routes';
29-
import { getHeaderCompactStandardNavbarOptions } from '../../../../../component-library/components-temp/HeaderCompactStandard';
3030
import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
3131
import {
3232
selectBatchSellDestToken,
@@ -59,16 +59,6 @@ export function BatchSellReview() {
5959
Record<string, number>
6060
>({});
6161

62-
useEffect(() => {
63-
navigation.setOptions(
64-
getHeaderCompactStandardNavbarOptions({
65-
title: '',
66-
onBack: () => navigation.goBack(),
67-
includesTopInset: true,
68-
}),
69-
);
70-
}, [navigation]);
71-
7262
// Seed the selected destination token on entry so the pill always reads from Redux.
7363
useEffect(() => {
7464
if (destinationTokens[0] && !selectedDestinationToken) {
@@ -97,18 +87,26 @@ export function BatchSellReview() {
9787
[],
9888
);
9989

90+
const handleBackPress = useCallback(() => {
91+
navigation.goBack();
92+
}, [navigation]);
93+
10094
const handleOpenDestinationTokenSelector = useCallback(() => {
10195
navigation.navigate(Routes.BRIDGE.MODALS.ROOT, {
10296
screen: Routes.BRIDGE.MODALS.BATCH_SELL_DESTINATION_TOKEN_SELECTOR_MODAL,
10397
});
10498
}, [navigation]);
10599

106100
return (
107-
<SafeAreaView style={tw.style('flex-1 bg-default')} edges={['bottom']}>
101+
<SafeAreaView
102+
style={tw.style('flex-1 bg-default')}
103+
edges={['bottom', 'left', 'right']}
104+
>
108105
<Box
109106
testID={BatchSellReviewSelectorsIDs.CONTAINER}
110107
twClassName="flex-1 bg-default"
111108
>
109+
<HeaderStandard title="" onBack={handleBackPress} includesTopInset />
112110
<Box twClassName="px-4 pb-6">
113111
<Box
114112
flexDirection={BoxFlexDirection.Row}

‎app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellEmptyState.tsx‎

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import { Image } from 'react-native';
3-
import { SafeAreaView } from 'react-native-safe-area-context';
43
import { useTailwind } from '@metamask/design-system-twrnc-preset';
54
import {
65
Box,
@@ -27,38 +26,36 @@ export function BatchSellEmptyState({
2726
const tw = useTailwind();
2827

2928
return (
30-
<SafeAreaView style={tw.style('flex-1 bg-default')} edges={['bottom']}>
31-
<Box
32-
testID={BatchSellTokenSelectSelectorsIDs.EMPTY_STATE}
33-
alignItems={BoxAlignItems.Center}
34-
justifyContent={BoxJustifyContent.Center}
35-
gap={3}
36-
twClassName="flex-1 px-4 py-4"
37-
>
38-
<Image
39-
source={emptyStateDefiLight}
40-
resizeMode="contain"
41-
style={tw.style('h-[72px] w-[72px]')}
42-
/>
43-
<Box alignItems={BoxAlignItems.Center} gap={3} twClassName="px-4">
44-
<Text
45-
variant={TextVariant.BodyMd}
46-
color={TextColor.TextAlternative}
47-
twClassName="w-[240px] text-center"
48-
>
49-
{strings('bridge.batch_sell_empty_state_description')}
50-
</Text>
51-
<Button
52-
variant={ButtonVariant.Secondary}
53-
size={ButtonSize.Lg}
54-
onPress={onExploreTokensPress}
55-
twClassName="self-center"
56-
testID={BatchSellTokenSelectSelectorsIDs.EXPLORE_TOKENS_BUTTON}
57-
>
58-
{strings('bridge.explore_tokens')}
59-
</Button>
60-
</Box>
29+
<Box
30+
testID={BatchSellTokenSelectSelectorsIDs.EMPTY_STATE}
31+
alignItems={BoxAlignItems.Center}
32+
justifyContent={BoxJustifyContent.Center}
33+
gap={3}
34+
twClassName="flex-1 px-4 py-4"
35+
>
36+
<Image
37+
source={emptyStateDefiLight}
38+
resizeMode="contain"
39+
style={tw.style('h-[72px] w-[72px]')}
40+
/>
41+
<Box alignItems={BoxAlignItems.Center} gap={3} twClassName="px-4">
42+
<Text
43+
variant={TextVariant.BodyMd}
44+
color={TextColor.TextAlternative}
45+
twClassName="w-[240px] text-center"
46+
>
47+
{strings('bridge.batch_sell_empty_state_description')}
48+
</Text>
49+
<Button
50+
variant={ButtonVariant.Secondary}
51+
size={ButtonSize.Lg}
52+
onPress={onExploreTokensPress}
53+
twClassName="self-center"
54+
testID={BatchSellTokenSelectSelectorsIDs.EXPLORE_TOKENS_BUTTON}
55+
>
56+
{strings('bridge.explore_tokens')}
57+
</Button>
6158
</Box>
62-
</SafeAreaView>
59+
</Box>
6360
);
6461
}

‎app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.tsx‎

Lines changed: 97 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
ButtonSize,
1717
ButtonVariant,
1818
FontWeight,
19+
HeaderStandard,
1920
Icon,
2021
IconColor,
2122
IconName,
@@ -27,7 +28,6 @@ import {
2728
import { formatChainIdToCaip } from '@metamask/bridge-controller';
2829
import { CaipChainId } from '@metamask/utils';
2930

30-
import { getHeaderCompactStandardNavbarOptions } from '../../../../../component-library/components-temp/HeaderCompactStandard';
3131
import { strings } from '../../../../../../locales/i18n';
3232
import Routes from '../../../../../constants/navigation/Routes';
3333
import {
@@ -75,16 +75,6 @@ export function BatchSellTokenSelect() {
7575
>(() => sortedEligibleChains[0]?.chainId);
7676
const [selectedTokens, setSelectedTokens] = useState<BridgeToken[]>([]);
7777

78-
useEffect(() => {
79-
navigation.setOptions(
80-
getHeaderCompactStandardNavbarOptions({
81-
title: '',
82-
onBack: () => navigation.goBack(),
83-
includesTopInset: true,
84-
}),
85-
);
86-
}, [navigation]);
87-
8878
// Start each Batch Sell flow from a clean Redux handoff state.
8979
useEffect(() => {
9080
dispatch(setBatchSellSourceTokens([]));
@@ -160,6 +150,10 @@ export function BatchSellTokenSelect() {
160150
return strings('bridge.next');
161151
}, [selectedTokenCount]);
162152

153+
const handleBackPress = useCallback(() => {
154+
navigation.goBack();
155+
}, [navigation]);
156+
163157
const handleChainSelect = useCallback(
164158
(chainId?: CaipChainId) => {
165159
if (chainId !== selectedChainId) {
@@ -311,95 +305,106 @@ export function BatchSellTokenSelect() {
311305
[handleTokenPress, selectedTokenKeys, sortedEligibleChains],
312306
);
313307

314-
if (sortedEligibleChains.length === 0) {
315-
return (
316-
<BatchSellEmptyState onExploreTokensPress={handleExploreTokensPress} />
317-
);
318-
}
319-
320308
return (
321-
<SafeAreaView style={tw.style('flex-1 bg-default')} edges={['bottom']}>
309+
<SafeAreaView
310+
style={tw.style('flex-1 bg-default')}
311+
edges={['bottom', 'left', 'right']}
312+
>
322313
<Box twClassName="flex-1">
323-
<Box twClassName="px-4 pt-2">
324-
<Text variant={TextVariant.HeadingLg} color={TextColor.TextDefault}>
325-
{strings('bridge.batch_sell_select_title')}
326-
</Text>
327-
<Text
328-
variant={TextVariant.BodyMd}
329-
color={TextColor.TextAlternative}
330-
twClassName="mt-1"
331-
>
332-
{strings('bridge.batch_sell_select_subtitle')}
333-
</Text>
334-
</Box>
335-
<Box twClassName="pt-4 pl-4">
336-
<ScrollView
337-
horizontal
338-
showsHorizontalScrollIndicator={false}
339-
contentContainerStyle={tw.style('flex-row items-center gap-2 pr-4')}
340-
>
341-
{sortedEligibleChains.map((network) =>
342-
renderNetworkPill(
343-
network.chainId,
344-
network.name,
345-
activeChainId === network.chainId,
346-
),
347-
)}
348-
</ScrollView>
349-
</Box>
350-
<Box
351-
flexDirection={BoxFlexDirection.Row}
352-
alignItems={BoxAlignItems.Center}
353-
twClassName="px-4 py-4"
354-
>
355-
<Pressable
356-
accessibilityRole="button"
357-
onPress={handleTokenSortToggle}
358-
testID={BatchSellTokenSelectSelectorsIDs.BALANCE_SORT_BUTTON}
359-
>
360-
<Box
361-
flexDirection={BoxFlexDirection.Row}
362-
alignItems={BoxAlignItems.Center}
363-
gap={1}
364-
>
314+
<HeaderStandard title="" onBack={handleBackPress} includesTopInset />
315+
{sortedEligibleChains.length === 0 ? (
316+
<BatchSellEmptyState
317+
onExploreTokensPress={handleExploreTokensPress}
318+
/>
319+
) : (
320+
<>
321+
<Box twClassName="px-4 pt-2">
322+
<Text
323+
variant={TextVariant.HeadingLg}
324+
color={TextColor.TextDefault}
325+
>
326+
{strings('bridge.batch_sell_select_title')}
327+
</Text>
365328
<Text
366329
variant={TextVariant.BodyMd}
367330
color={TextColor.TextAlternative}
331+
twClassName="mt-1"
368332
>
369-
{strings('bridge.sort_balance')}
333+
{strings('bridge.batch_sell_select_subtitle')}
370334
</Text>
371-
<Icon
372-
name={
373-
tokenSortDirection === 'desc'
374-
? IconName.Arrow2Down
375-
: IconName.Arrow2Up
376-
}
377-
size={IconSize.Sm}
378-
color={IconColor.IconAlternative}
379-
/>
380335
</Box>
381-
</Pressable>
382-
</Box>
383-
<FlatList
384-
testID={BatchSellTokenSelectSelectorsIDs.TOKEN_LIST}
385-
data={selectedChainTokens}
386-
renderItem={renderToken}
387-
keyExtractor={getTokenKey}
388-
showsVerticalScrollIndicator={false}
389-
contentContainerStyle={tw.style('pb-4')}
390-
/>
391-
<Box twClassName="border-t border-muted px-4 pb-4 pt-3">
392-
<Button
393-
variant={ButtonVariant.Primary}
394-
size={ButtonSize.Lg}
395-
isFullWidth
396-
isDisabled={isPrimaryButtonDisabled}
397-
onPress={handleNextPress}
398-
testID={BatchSellTokenSelectSelectorsIDs.NEXT_BUTTON}
399-
>
400-
{primaryButtonLabel}
401-
</Button>
402-
</Box>
336+
<Box twClassName="pt-4 pl-4">
337+
<ScrollView
338+
horizontal
339+
showsHorizontalScrollIndicator={false}
340+
contentContainerStyle={tw.style(
341+
'flex-row items-center gap-2 pr-4',
342+
)}
343+
>
344+
{sortedEligibleChains.map((network) =>
345+
renderNetworkPill(
346+
network.chainId,
347+
network.name,
348+
activeChainId === network.chainId,
349+
),
350+
)}
351+
</ScrollView>
352+
</Box>
353+
<Box
354+
flexDirection={BoxFlexDirection.Row}
355+
alignItems={BoxAlignItems.Center}
356+
twClassName="px-4 py-4"
357+
>
358+
<Pressable
359+
accessibilityRole="button"
360+
onPress={handleTokenSortToggle}
361+
testID={BatchSellTokenSelectSelectorsIDs.BALANCE_SORT_BUTTON}
362+
>
363+
<Box
364+
flexDirection={BoxFlexDirection.Row}
365+
alignItems={BoxAlignItems.Center}
366+
gap={1}
367+
>
368+
<Text
369+
variant={TextVariant.BodyMd}
370+
color={TextColor.TextAlternative}
371+
>
372+
{strings('bridge.sort_balance')}
373+
</Text>
374+
<Icon
375+
name={
376+
tokenSortDirection === 'desc'
377+
? IconName.Arrow2Down
378+
: IconName.Arrow2Up
379+
}
380+
size={IconSize.Sm}
381+
color={IconColor.IconAlternative}
382+
/>
383+
</Box>
384+
</Pressable>
385+
</Box>
386+
<FlatList
387+
testID={BatchSellTokenSelectSelectorsIDs.TOKEN_LIST}
388+
data={selectedChainTokens}
389+
renderItem={renderToken}
390+
keyExtractor={getTokenKey}
391+
showsVerticalScrollIndicator={false}
392+
contentContainerStyle={tw.style('pb-4')}
393+
/>
394+
<Box twClassName="border-t border-muted px-4 pb-4 pt-3">
395+
<Button
396+
variant={ButtonVariant.Primary}
397+
size={ButtonSize.Lg}
398+
isFullWidth
399+
isDisabled={isPrimaryButtonDisabled}
400+
onPress={handleNextPress}
401+
testID={BatchSellTokenSelectSelectorsIDs.NEXT_BUTTON}
402+
>
403+
{primaryButtonLabel}
404+
</Button>
405+
</Box>
406+
</>
407+
)}
403408
</Box>
404409
</SafeAreaView>
405410
);

0 commit comments

Comments
 (0)