Skip to content

Commit bab8d1a

Browse files
pwltrpwltr
committed
refactor(ui): pass params to sheets
1 parent 75c5045 commit bab8d1a

36 files changed

+571
-589
lines changed

‎src/components/BottomSheet.tsx

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,30 @@ import {
55
BottomSheetModal,
66
BottomSheetView,
77
} from '@gorhom/bottom-sheet';
8-
import React, { ReactNode, useCallback, useEffect, useMemo } from 'react';
8+
import React, { ReactNode, useCallback, useMemo } from 'react';
99
import { StyleSheet } from 'react-native';
1010
import { useReducedMotion } from 'react-native-reanimated';
1111

1212
import { __E2E__ } from '../constants/env';
1313
import { useSnapPoints } from '../hooks/bottomSheet';
1414
import useColors from '../hooks/colors';
15-
import { useAppDispatch, useAppSelector } from '../hooks/redux';
1615
import { useSheetRef } from '../navigation/bottom-sheet/SheetRefsProvider';
17-
import { sheetSelector } from '../store/reselect/ui';
18-
import { resetSheet } from '../store/slices/ui';
1916
import { SheetId } from '../store/types/ui';
2017
import BottomSheetBackground from './BottomSheetBackground';
2118

2219
type SheetProps = {
2320
id: SheetId;
21+
children: ((data: any) => ReactNode) | ReactNode;
2422
size?: 'small' | 'medium' | 'large' | 'calendar';
25-
children: ReactNode;
2623
testID?: string;
2724
onOpen?: () => void;
2825
onClose?: () => void;
2926
};
3027

3128
const Sheet = ({
3229
id,
33-
size = 'large',
3430
children,
31+
size = 'large',
3532
testID,
3633
onOpen,
3734
onClose,
@@ -40,8 +37,6 @@ const Sheet = ({
4037
const sheetRef = useSheetRef(id);
4138
const isReducedMotion = useReducedMotion();
4239
const snapPoints = useSnapPoints(size);
43-
const dispatch = useAppDispatch();
44-
const data = useAppSelector((state) => sheetSelector(state, id));
4540

4641
// https://github.com/gorhom/react-native-bottom-sheet/issues/770#issuecomment-1072113936
4742
// do not activate BottomSheet if swipe horizontally, this allows using Swiper inside of it
@@ -66,27 +61,15 @@ const Sheet = ({
6661
[],
6762
);
6863

69-
// biome-ignore lint/correctness/useExhaustiveDependencies: sheetRef doesn't change
70-
useEffect(() => {
71-
if (data.isOpen) {
72-
sheetRef.current?.present();
73-
} else {
74-
sheetRef.current?.close();
75-
}
76-
// setTimeout(() => setMounted(true), 500);
77-
}, [data.isOpen]);
78-
7964
const onChange = useCallback(
8065
(index: number) => {
8166
if (index === -1) {
8267
onClose?.();
83-
// clear sheet params
84-
dispatch(resetSheet(id));
8568
} else if (index >= 0) {
8669
onOpen?.();
8770
}
8871
},
89-
[onOpen, onClose, dispatch, id],
72+
[onOpen, onClose],
9073
);
9174

9275
return (
@@ -107,9 +90,13 @@ const Sheet = ({
10790
// @ts-ignore
10891
activeOffsetY={activeOffsetY}
10992
onChange={onChange}>
110-
<BottomSheetView style={styles.container} testID={testID}>
111-
{children}
112-
</BottomSheetView>
93+
{(data) => {
94+
return (
95+
<BottomSheetView style={styles.container} testID={testID}>
96+
{typeof children === 'function' ? children(data) : children}
97+
</BottomSheetView>
98+
);
99+
}}
113100
</BottomSheetModal>
114101
);
115102
};

‎src/components/TabBar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,16 @@ const TabBar = (): ReactElement => {
2828
const insets = useSafeAreaInsets();
2929
const { t } = useTranslation('wallet');
3030
const navigation = useNavigation<RootNavigationProp>();
31-
const sendSheetRef = useSheetRef('sendNavigation');
32-
const receiveSheetRef = useSheetRef('receiveNavigation');
31+
const sendSheetRef = useSheetRef('send');
32+
const receiveSheetRef = useSheetRef('receive');
3333
const isSpendingOnboarding = useAppSelector(spendingOnboardingSelector);
3434

3535
const onReceivePress = (): void => {
3636
const currentRoute = rootNavigation.getCurrentRoute();
3737

3838
// if we are on the spending screen and the user has not yet received funds
3939
if (currentRoute === 'ActivitySpending' && isSpendingOnboarding) {
40-
showSheet('receiveNavigation', { receiveScreen: 'ReceiveAmount' });
40+
showSheet('receive', { screen: 'ReceiveAmount' });
4141
} else {
4242
receiveSheetRef.current?.present();
4343
}

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import React, { JSX, memo } from 'react';
2-
// import { useAppSelector } from '../../hooks/redux';
3-
// import { sheetsSelector } from '../../store/reselect/ui';
4-
// import TransferFailed from '../bottom-sheet/TransferFailed';
52

3+
// import TransferFailed from '../bottom-sheet/TransferFailed';
64
import BoostPrompt from '../../screens/Wallets/BoostPrompt';
75
import NewTxPrompt from '../../screens/Wallets/NewTxPrompt';
86
import BackupNavigation from './BackupNavigation';
@@ -16,8 +14,6 @@ import ReceiveNavigation from './ReceiveNavigation';
1614
import SendNavigation from './SendNavigation';
1715

1816
const BottomSheets = (): JSX.Element => {
19-
// const views = useAppSelector(sheetsSelector);
20-
2117
return (
2218
<>
2319
<BackupNavigation />

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

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,9 @@ import React, { ReactElement, memo } from 'react';
99

1010
import BottomSheet from '../../components/BottomSheet';
1111
import { __E2E__ } from '../../constants/env';
12-
import { useAppSelector } from '../../hooks/redux';
1312
import Amount from '../../screens/Wallets/LNURLWithdraw/Amount';
1413
import Confirm from '../../screens/Wallets/LNURLWithdraw/Confirm';
15-
import { sheetSelector } from '../../store/reselect/ui';
14+
import { SheetsParamList } from '../../store/types/ui';
1615
import BottomSheetNavigationContainer from './BottomSheetNavigationContainer';
1716

1817
export type LNURLWithdrawNavigationProp =
@@ -31,38 +30,37 @@ const screenOptions: NativeStackNavigationOptions = {
3130
};
3231

3332
const LNURLWithdrawNavigation = (): ReactElement => {
34-
const { isOpen, wParams } = useAppSelector((state) => {
35-
return sheetSelector(state, 'lnurlWithdraw');
36-
});
37-
38-
if (!wParams) {
39-
return <></>;
40-
}
41-
42-
// if max === min withdrawable amount, skip the Amount screen
43-
const initialRouteName =
44-
wParams.minWithdrawable === wParams.maxWithdrawable ? 'Confirm' : 'Amount';
45-
4633
return (
4734
<BottomSheet id="lnurlWithdraw" size="large">
48-
<NavigationIndependentTree>
49-
<BottomSheetNavigationContainer key={isOpen.toString()}>
50-
<Stack.Navigator
51-
screenOptions={screenOptions}
52-
initialRouteName={initialRouteName}>
53-
<Stack.Screen
54-
name="Amount"
55-
component={Amount}
56-
initialParams={{ wParams }}
57-
/>
58-
<Stack.Screen
59-
name="Confirm"
60-
component={Confirm}
61-
initialParams={{ wParams, amount: wParams.minWithdrawable }}
62-
/>
63-
</Stack.Navigator>
64-
</BottomSheetNavigationContainer>
65-
</NavigationIndependentTree>
35+
{({ data }: { data: SheetsParamList['lnurlWithdraw'] }) => {
36+
// if max === min withdrawable amount, skip the Amount screen
37+
const initialRouteName =
38+
data.minWithdrawable === data.maxWithdrawable ? 'Confirm' : 'Amount';
39+
40+
return (
41+
<NavigationIndependentTree>
42+
<BottomSheetNavigationContainer>
43+
<Stack.Navigator
44+
screenOptions={screenOptions}
45+
initialRouteName={initialRouteName}>
46+
<Stack.Screen
47+
name="Amount"
48+
component={Amount}
49+
initialParams={{ wParams: data }}
50+
/>
51+
<Stack.Screen
52+
name="Confirm"
53+
component={Confirm}
54+
initialParams={{
55+
wParams: data,
56+
amount: data.minWithdrawable,
57+
}}
58+
/>
59+
</Stack.Navigator>
60+
</BottomSheetNavigationContainer>
61+
</NavigationIndependentTree>
62+
);
63+
}}
6664
</BottomSheet>
6765
);
6866
};

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

Lines changed: 40 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { useAppSelector } from '../../hooks/redux';
1919
import ErrorScreen from '../../screens/OrangeTicket/Error';
2020
import Prize from '../../screens/OrangeTicket/Prize';
2121
import UsedCard from '../../screens/OrangeTicket/UsedCard';
22-
import { sheetSelector } from '../../store/reselect/ui';
22+
import { SheetsParamList } from '../../store/types/ui';
2323
import { getNodeId, waitForLdk } from '../../utils/lightning';
2424
import { showToast } from '../../utils/notifications';
2525
import BottomSheetNavigationContainer from './BottomSheetNavigationContainer';
@@ -40,16 +40,19 @@ const screenOptions: NativeStackNavigationOptions = {
4040
headerShown: false,
4141
};
4242

43-
const OrangeTicket = (): ReactElement => {
43+
const SheetContent = ({
44+
data,
45+
}: {
46+
data: SheetsParamList['orangeTicket'];
47+
}): ReactElement => {
4448
const [isLoading, setIsLoading] = useState(true);
4549
const [amount, setAmount] = useState<number>();
4650
const [errorCode, setErrorCode] = useState<number>();
4751
const orangeTickets = useAppSelector((state) => state.settings.orangeTickets);
4852
const [initialScreen, setInitialScreen] =
4953
useState<keyof OrangeTicketStackParamList>('Prize');
50-
const { isOpen, ticketId } = useAppSelector((state) => {
51-
return sheetSelector(state, 'orangeTicket');
52-
});
54+
55+
const { ticketId } = data;
5356

5457
// biome-ignore lint/correctness/useExhaustiveDependencies: only when ticketId changes
5558
const getPrize = useCallback(async (): Promise<void> => {
@@ -134,44 +137,46 @@ const OrangeTicket = (): ReactElement => {
134137
}, [ticketId]);
135138

136139
useEffect(() => {
137-
if (!isOpen) {
138-
setInitialScreen('Prize');
139-
setIsLoading(true);
140-
return;
141-
}
142-
143140
getPrize();
144-
}, [isOpen, getPrize]);
141+
}, [getPrize]);
145142

146143
if (isLoading) {
147144
return <></>;
148145
}
149146

147+
return (
148+
<NavigationIndependentTree>
149+
<BottomSheetNavigationContainer>
150+
<Stack.Navigator
151+
initialRouteName={initialScreen}
152+
screenOptions={screenOptions}>
153+
<Stack.Screen
154+
name="Prize"
155+
component={Prize}
156+
initialParams={{ ticketId, amount }}
157+
/>
158+
<Stack.Screen
159+
name="UsedCard"
160+
component={UsedCard}
161+
initialParams={{ amount }}
162+
/>
163+
<Stack.Screen
164+
name="Error"
165+
component={ErrorScreen}
166+
initialParams={{ errorCode }}
167+
/>
168+
</Stack.Navigator>
169+
</BottomSheetNavigationContainer>
170+
</NavigationIndependentTree>
171+
);
172+
};
173+
174+
const OrangeTicket = (): ReactElement => {
150175
return (
151176
<BottomSheet id="orangeTicket" size="large">
152-
<NavigationIndependentTree>
153-
<BottomSheetNavigationContainer key={isOpen.toString()}>
154-
<Stack.Navigator
155-
initialRouteName={initialScreen}
156-
screenOptions={screenOptions}>
157-
<Stack.Screen
158-
name="Prize"
159-
component={Prize}
160-
initialParams={{ ticketId, amount }}
161-
/>
162-
<Stack.Screen
163-
name="UsedCard"
164-
component={UsedCard}
165-
initialParams={{ amount }}
166-
/>
167-
<Stack.Screen
168-
name="Error"
169-
component={ErrorScreen}
170-
initialParams={{ errorCode }}
171-
/>
172-
</Stack.Navigator>
173-
</BottomSheetNavigationContainer>
174-
</NavigationIndependentTree>
177+
{({ data }: { data: SheetsParamList['orangeTicket'] }) => {
178+
return <SheetContent data={data} />;
179+
}}
175180
</BottomSheet>
176181
);
177182
};

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

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import AskForBiometrics from '../../screens/Settings/PIN/AskForBiometrics';
1313
import ChoosePIN from '../../screens/Settings/PIN/ChoosePIN';
1414
import PINPrompt from '../../screens/Settings/PIN/PINPrompt';
1515
import Result from '../../screens/Settings/PIN/Result';
16+
import { SheetsParamList } from '../../store/types/ui';
1617
import BottomSheetNavigationContainer from './BottomSheetNavigationContainer';
1718

1819
export type PinNavigationProp = NativeStackNavigationProp<PinStackParamList>;
@@ -34,19 +35,29 @@ const screenOptions: NativeStackNavigationOptions = {
3435
const PINNavigation = (): ReactElement => {
3536
return (
3637
<BottomSheet id="pinNavigation" size="medium">
37-
<NavigationIndependentTree>
38-
<BottomSheetNavigationContainer>
39-
<Stack.Navigator screenOptions={screenOptions}>
40-
<Stack.Screen name="PINPrompt" component={PINPrompt} />
41-
<Stack.Screen name="ChoosePIN" component={ChoosePIN} />
42-
<Stack.Screen
43-
name="AskForBiometrics"
44-
component={AskForBiometrics}
45-
/>
46-
<Stack.Screen name="Result" component={Result} />
47-
</Stack.Navigator>
48-
</BottomSheetNavigationContainer>
49-
</NavigationIndependentTree>
38+
{({ data }: { data: SheetsParamList['pinNavigation'] }) => {
39+
const showLaterButton = data?.showLaterButton ?? true;
40+
41+
return (
42+
<NavigationIndependentTree>
43+
<BottomSheetNavigationContainer>
44+
<Stack.Navigator screenOptions={screenOptions}>
45+
<Stack.Screen
46+
name="PINPrompt"
47+
component={PINPrompt}
48+
initialParams={{ showLaterButton }}
49+
/>
50+
<Stack.Screen name="ChoosePIN" component={ChoosePIN} />
51+
<Stack.Screen
52+
name="AskForBiometrics"
53+
component={AskForBiometrics}
54+
/>
55+
<Stack.Screen name="Result" component={Result} />
56+
</Stack.Navigator>
57+
</BottomSheetNavigationContainer>
58+
</NavigationIndependentTree>
59+
);
60+
}}
5061
</BottomSheet>
5162
);
5263
};

0 commit comments

Comments
 (0)