Skip to content

Commit 23d49c4

Browse files
pwltrpwltr
committed
fix(ui): use imperative API for sheets
1 parent 85c9678 commit 23d49c4

18 files changed

+79
-75
lines changed

‎src/navigation/bottom-sheet/ConnectionClosed.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,18 @@ import BottomSheetWrapper from '../../components/BottomSheetWrapper';
77
import SafeAreaInset from '../../components/SafeAreaInset';
88
import Button from '../../components/buttons/Button';
99
import { useSnapPoints } from '../../hooks/bottomSheet';
10-
import { closeSheet } from '../../store/utils/ui';
1110
import { BodyM } from '../../styles/text';
11+
import { useSheetRef } from './SheetRefsProvider';
1212

1313
const imageSrc = require('../../assets/illustrations/switch.png');
1414

1515
const ConnectionClosed = (): ReactElement => {
1616
const { t } = useTranslation('lightning');
1717
const snapPoints = useSnapPoints('medium');
18+
const sheetRef = useSheetRef('connectionClosed');
1819

1920
const onContinue = (): void => {
20-
closeSheet('connectionClosed');
21+
sheetRef.current?.close();
2122
};
2223

2324
return (

‎src/navigation/bottom-sheet/ForceTransfer.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import { useSnapPoints } from '../../hooks/bottomSheet';
77
import { useAppDispatch, useAppSelector } from '../../hooks/redux';
88
import { startCoopCloseTimestampSelector } from '../../store/reselect/user';
99
import { clearCoopCloseTimer } from '../../store/slices/user';
10-
import { closeSheet, showBottomSheet } from '../../store/utils/ui';
1110
import { Display } from '../../styles/text';
1211
import { closeAllChannels } from '../../utils/lightning';
1312
import { showToast } from '../../utils/notifications';
13+
import { useSheetRef } from './SheetRefsProvider';
1414

1515
const imageSrc = require('../../assets/illustrations/exclamation-mark.png');
1616

@@ -21,10 +21,12 @@ const ForceTransfer = (): ReactElement => {
2121
const { t } = useTranslation('lightning');
2222
const snapPoints = useSnapPoints('large');
2323
const dispatch = useAppDispatch();
24+
const sheetRef = useSheetRef('forceTransfer');
2425
const startTime = useAppSelector(startCoopCloseTimestampSelector);
2526
const [isPending, setIsPending] = useState(false);
2627

2728
// try to cooperatively close the channel(s) for 30min
29+
// biome-ignore lint/correctness/useExhaustiveDependencies: sheetRef doesn't change
2830
useEffect(() => {
2931
// biome-ignore lint/style/useConst: false alarm
3032
let interval: NodeJS.Timer;
@@ -57,7 +59,7 @@ const ForceTransfer = (): ReactElement => {
5759
console.log('giving up on coop close.');
5860
dispatch(clearCoopCloseTimer());
5961
clearInterval(interval);
60-
showBottomSheet('forceTransfer');
62+
sheetRef.current?.present();
6163
return;
6264
}
6365

@@ -70,7 +72,7 @@ const ForceTransfer = (): ReactElement => {
7072
}, [startTime, dispatch]);
7173

7274
const onCancel = (): void => {
73-
closeSheet('forceTransfer');
75+
sheetRef.current?.close();
7476
};
7577

7678
const onContinue = async (): Promise<void> => {
@@ -96,7 +98,7 @@ const ForceTransfer = (): ReactElement => {
9698
title: t('force_init_title'),
9799
description: t('force_init_msg'),
98100
});
99-
closeSheet('forceTransfer');
101+
sheetRef.current?.close();
100102
} else {
101103
showToast({
102104
type: 'warning',

‎src/navigation/bottom-sheet/PubkyAuth.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ import Button from '../../components/buttons/Button';
1818
import { useSnapPoints } from '../../hooks/bottomSheet';
1919
import { useAppSelector } from '../../hooks/redux';
2020
import { viewControllerSelector } from '../../store/reselect/ui';
21-
import { closeSheet } from '../../store/utils/ui';
2221
import { CheckCircleIcon } from '../../styles/icons';
2322
import { BodyM, CaptionB, Text13UP, Title } from '../../styles/text';
2423
import { showToast } from '../../utils/notifications';
2524
import { getPubkySecretKey } from '../../utils/pubky';
25+
import { useSheetRef } from './SheetRefsProvider';
2626

2727
const defaultParsedUrl: PubkyAuthDetails = {
2828
relay: '',
@@ -81,6 +81,7 @@ const Permission = memo(
8181
const PubkyAuth = (): ReactElement => {
8282
const { t } = useTranslation('security');
8383
const snapPoints = useSnapPoints('medium');
84+
const sheetRef = useSheetRef('pubkyAuth');
8485
const { url = '' } = useAppSelector((state) => {
8586
return viewControllerSelector(state, 'pubkyAuth');
8687
});
@@ -144,14 +145,15 @@ const PubkyAuth = (): ReactElement => {
144145
[t, url],
145146
);
146147

148+
// biome-ignore lint/correctness/useExhaustiveDependencies: sheetRef doesn't change
147149
const Buttons = useCallback(() => {
148150
if (authSuccess) {
149151
return (
150152
<Button
151153
style={styles.authorizeButton}
152154
text={t('authorization.success')}
153155
size="large"
154-
onPress={() => closeSheet('pubkyAuth')}
156+
onPress={() => sheetRef.current?.close()}
155157
/>
156158
);
157159
}
@@ -161,7 +163,7 @@ const PubkyAuth = (): ReactElement => {
161163
style={styles.closeButton}
162164
text={t('authorization.deny')}
163165
size="large"
164-
onPress={() => closeSheet('pubkyAuth')}
166+
onPress={() => sheetRef.current?.close()}
165167
/>
166168
<Button
167169
loading={authorizing}

‎src/screens/Activity/ActivityFiltered.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import SafeAreaInset from '../../components/SafeAreaInset';
1313
import SearchInput from '../../components/SearchInput';
1414
import Tabs, { TTab } from '../../components/Tabs';
1515
import Tag from '../../components/Tag';
16-
import { closeSheet, showBottomSheet } from '../../store/utils/ui';
16+
import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
1717
import { ScrollView, View as ThemedView } from '../../styles/components';
1818
import { CalendarIcon, TagIcon } from '../../styles/icons';
1919
import ActivityList from './ActivityList';
@@ -47,6 +47,8 @@ const Glow = ({
4747
const ActivityFiltered = (): ReactElement => {
4848
const { t } = useTranslation('wallet');
4949
const size = useSharedValue({ width: 0, height: 0 });
50+
const tagsSheetRef = useSheetRef('tagsPrompt');
51+
const timeRangeSheetRef = useSheetRef('timeRangePrompt');
5052
const panGestureRef = useRef<GestureType>(Gesture.Pan());
5153
const [radiusContainerHeight, setRadiusContainerHeight] = useState(0);
5254
const [currentTab, setCurrentTab] = useState(0);
@@ -64,7 +66,7 @@ const ActivityFiltered = (): ReactElement => {
6466

6567
const addTag = (tag: string): void => {
6668
setTags((tg) => [...tg, tag]);
67-
closeSheet('tagsPrompt');
69+
tagsSheetRef.current?.close();
6870
};
6971

7072
const removeTag = (tag: string): void => {
@@ -126,7 +128,7 @@ const ActivityFiltered = (): ReactElement => {
126128
testID="TagsPrompt"
127129
onPress={(): void => {
128130
Keyboard.dismiss();
129-
showBottomSheet('tagsPrompt');
131+
tagsSheetRef.current?.present();
130132
}}>
131133
<TagIcon
132134
height={25}
@@ -140,7 +142,7 @@ const ActivityFiltered = (): ReactElement => {
140142
testID="TimeRangePrompt"
141143
onPress={(): void => {
142144
Keyboard.dismiss();
143-
showBottomSheet('timeRangePrompt');
145+
timeRangeSheetRef.current?.present();
144146
}}>
145147
<CalendarIcon
146148
height={25}

‎src/screens/Activity/TagsPrompt.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import SafeAreaInset from '../../components/SafeAreaInset';
77
import Tag from '../../components/Tag';
88
import { useSnapPoints } from '../../hooks/bottomSheet';
99
import { useAppSelector } from '../../hooks/redux';
10+
import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
1011
import { lastUsedTagsSelector } from '../../store/reselect/metadata';
11-
import { closeSheet } from '../../store/utils/ui';
1212
import { BodyS, Subtitle, Text13UP } from '../../styles/text';
1313

1414
const TagsPrompt = ({
@@ -19,12 +19,13 @@ const TagsPrompt = ({
1919
onAddTag: (tag: string) => void;
2020
}): ReactElement => {
2121
const { t } = useTranslation('wallet');
22-
const snapPoints = useSnapPoints('medium');
22+
const snapPoints = useSnapPoints('small');
23+
const sheetRef = useSheetRef('tagsPrompt');
2324
const lastUsed = useAppSelector(lastUsedTagsSelector);
2425
const suggestions = lastUsed.filter((tg) => !tags.includes(tg));
2526

2627
const handleClose = (): void => {
27-
closeSheet('tagsPrompt');
28+
sheetRef.current?.close();
2829
};
2930

3031
return (

‎src/screens/Activity/TimeRangePrompt.tsx

+5-10
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@ import SafeAreaInset from '../../components/SafeAreaInset';
77
import Button from '../../components/buttons/Button';
88
import { useSnapPoints } from '../../hooks/bottomSheet';
99
import { useAppSelector } from '../../hooks/redux';
10+
import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
1011
import { languageSelector, timeZoneSelector } from '../../store/reselect/ui';
11-
import { closeSheet } from '../../store/utils/ui';
1212
import { View as ThemedView } from '../../styles/components';
1313
import { LeftSign, RightSign } from '../../styles/icons';
1414
import { BodyMSB, Caption13Up, Subtitle } from '../../styles/text';
1515
import { generateCalendar } from '../../utils/helpers';
1616
import { i18nTime } from '../../utils/i18n';
1717

1818
const DAY_HEIGHT = 44;
19+
const sheetId = 'timeRangePrompt';
1920

2021
const Day = ({
2122
day,
@@ -96,6 +97,7 @@ const Calendar = ({
9697
}): ReactElement => {
9798
const { t } = useTranslation('wallet');
9899
const { t: tTime } = useTranslation('intl', { i18n: i18nTime });
100+
const sheetRef = useSheetRef(sheetId);
99101
const timeZone = useAppSelector(timeZoneSelector);
100102
const language = useAppSelector(languageSelector);
101103
const [monthDate, setMonthDate] = useState(() => {
@@ -158,7 +160,7 @@ const Calendar = ({
158160
const begin = range[0].getTime();
159161
const end = (range[1] ?? range[0]).getTime() + 1000 * 60 * 60 * 24; // 24 hours
160162
onChange([begin, end]);
161-
closeSheet('timeRangePrompt');
163+
sheetRef.current?.close();
162164
};
163165

164166
return (
@@ -306,15 +308,8 @@ const TimeRangePrompt = ({
306308
const { t } = useTranslation('wallet');
307309
const snapPoints = useSnapPoints('calendar');
308310

309-
const handleClose = (): void => {
310-
closeSheet('timeRangePrompt');
311-
};
312-
313311
return (
314-
<BottomSheetWrapper
315-
view="timeRangePrompt"
316-
snapPoints={snapPoints}
317-
onClose={handleClose}>
312+
<BottomSheetWrapper view={sheetId} snapPoints={snapPoints}>
318313
<View style={styles.root}>
319314
<Subtitle style={styles.title}>{t('filter_title')}</Subtitle>
320315

‎src/screens/OrangeTicket/Error.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import BottomSheetNavigationHeader from '../../components/BottomSheetNavigationH
55
import GradientView from '../../components/GradientView';
66
import SafeAreaInset from '../../components/SafeAreaInset';
77
import Button from '../../components/buttons/Button';
8+
import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
89
import type { OrangeTicketScreenProps } from '../../navigation/types';
9-
import { closeSheet } from '../../store/utils/ui';
1010
import { BodyM } from '../../styles/text';
1111

1212
const imageSrc = require('../../assets/illustrations/exclamation-mark.png');
@@ -36,9 +36,10 @@ const ErrorScreen = ({
3636
}: OrangeTicketScreenProps<'Error'>): ReactElement => {
3737
const { errorCode } = route.params;
3838
const { title, text } = getText(errorCode);
39+
const sheetRef = useSheetRef('orangeTicket');
3940

4041
const onContinue = (): void => {
41-
closeSheet('orangeTicket');
42+
sheetRef.current?.close();
4243
};
4344

4445
return (

‎src/screens/OrangeTicket/UsedCard.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import BottomSheetNavigationHeader from '../../components/BottomSheetNavigationH
66
import GradientView from '../../components/GradientView';
77
import SafeAreaInset from '../../components/SafeAreaInset';
88
import Button from '../../components/buttons/Button';
9+
import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
910
import type { OrangeTicketScreenProps } from '../../navigation/types';
10-
import { closeSheet } from '../../store/utils/ui';
1111
import { BodyM } from '../../styles/text';
1212

1313
const imageSrc = require('../../assets/illustrations/exclamation-mark.png');
@@ -16,9 +16,10 @@ const UsedCard = ({
1616
route,
1717
}: OrangeTicketScreenProps<'UsedCard'>): ReactElement => {
1818
const { amount } = route.params;
19+
const sheetRef = useSheetRef('orangeTicket');
1920

2021
const onContinue = (): void => {
21-
closeSheet('orangeTicket');
22+
sheetRef.current?.close();
2223
};
2324

2425
return (

‎src/screens/Settings/Backup/Metadata.tsx

+5-9
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import GradientView from '../../../components/GradientView';
77
import SafeAreaInset from '../../../components/SafeAreaInset';
88
import Button from '../../../components/buttons/Button';
99
import { useAppSelector } from '../../../hooks/redux';
10+
import { useSheetRef } from '../../../navigation/bottom-sheet/SheetRefsProvider';
1011
import { backupSelector } from '../../../store/reselect/backup';
1112
import { EBackupCategory } from '../../../store/types/backup';
12-
import { closeSheet } from '../../../store/utils/ui';
1313
import { BodyM, BodyS, BodySB } from '../../../styles/text';
1414
import { i18nTime } from '../../../utils/i18n';
1515

@@ -18,6 +18,7 @@ const imageSrc = require('../../../assets/illustrations/card.png');
1818
const Metadata = (): ReactElement => {
1919
const { t } = useTranslation('security');
2020
const { t: tTime } = useTranslation('intl', { i18n: i18nTime });
21+
const sheetRef = useSheetRef('backupNavigation');
2122
const backup = useAppSelector(backupSelector);
2223

2324
const max = Math.max(
@@ -26,8 +27,8 @@ const Metadata = (): ReactElement => {
2627
}),
2728
);
2829

29-
const handleButtonPress = (): void => {
30-
closeSheet('backupNavigation');
30+
const onContinue = (): void => {
31+
sheetRef.current?.close();
3132
};
3233

3334
return (
@@ -66,12 +67,7 @@ const Metadata = (): ReactElement => {
6667
/>
6768
</BodyS>
6869
)}
69-
<Button
70-
size="large"
71-
text={t('ok')}
72-
onPress={handleButtonPress}
73-
testID="OK"
74-
/>
70+
<Button size="large" text={t('ok')} testID="OK" onPress={onContinue} />
7571
</View>
7672
<SafeAreaInset type="bottom" minPadding={16} />
7773
</GradientView>

‎src/screens/Settings/PIN/ForgotPIN.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,34 @@ import BottomSheetWrapper from '../../../components/BottomSheetWrapper';
77
import SafeAreaInset from '../../../components/SafeAreaInset';
88
import Button from '../../../components/buttons/Button';
99
import { useSnapPoints } from '../../../hooks/bottomSheet';
10+
import { useSheetRef } from '../../../navigation/bottom-sheet/SheetRefsProvider';
1011
import { wipeApp } from '../../../store/utils/settings';
11-
import { closeSheet } from '../../../store/utils/ui';
1212
import { BodyM } from '../../../styles/text';
1313

1414
const imageSrc = require('../../../assets/illustrations/restore.png');
1515

16+
const sheetId = 'forgotPIN';
17+
1618
const ForgotPIN = (): ReactElement => {
1719
const { t } = useTranslation('security');
1820
const snapPoints = useSnapPoints('large');
21+
const sheetRef = useSheetRef(sheetId);
22+
1923
// const { isMounted } = useAppSelector((state) => {
2024
// return viewControllerSelector(state, 'forgotPIN');
2125
// });
2226

2327
const handlePress = (): void => {
2428
wipeApp();
25-
closeSheet('forgotPIN');
29+
sheetRef.current?.close();
2630
};
2731

2832
// if (!isMounted) {
2933
// return <></>;
3034
// }
3135

3236
return (
33-
<BottomSheetWrapper view="forgotPIN" snapPoints={snapPoints}>
37+
<BottomSheetWrapper view={sheetId} snapPoints={snapPoints}>
3438
<View style={styles.container}>
3539
<BottomSheetNavigationHeader
3640
title={t('pin_forgot_title')}

‎src/screens/Settings/PIN/PINPrompt.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { Trans, useTranslation } from 'react-i18next';
33

44
import BottomSheetScreen from '../../../components/BottomSheetScreen';
55
import { useAppSelector } from '../../../hooks/redux';
6+
import { useSheetRef } from '../../../navigation/bottom-sheet/SheetRefsProvider';
67
import { PinScreenProps } from '../../../navigation/types';
78
import { showLaterButtonSelector } from '../../../store/reselect/ui';
8-
import { closeSheet } from '../../../store/utils/ui';
99
import { Display } from '../../../styles/text';
1010

1111
const imageSrc = require('../../../assets/illustrations/shield.png');
@@ -15,13 +15,14 @@ const PINPrompt = ({
1515
}: PinScreenProps<'PINPrompt'>): ReactElement => {
1616
const { t } = useTranslation('security');
1717
const showLaterButton = useAppSelector(showLaterButtonSelector);
18+
const sheetRef = useSheetRef('PINNavigation');
1819

1920
const onContinue = (): void => {
2021
navigation.navigate('ChoosePIN');
2122
};
2223

2324
const onDismiss = (): void => {
24-
closeSheet('PINNavigation');
25+
sheetRef.current?.close();
2526
};
2627

2728
return (

0 commit comments

Comments
 (0)