FIX: Update drawer view for nav 6 (#5843)

Navigation.js

@@ -352,16 +352,18 @@ const DrawerRoot = () => {
   const isLargeScreen = useMemo(() => {
     return Platform.OS === 'android' ? isTablet() : (dimensions.width >= Dimensions.get('screen').width / 2 && isTablet()) || isDesktop;
   }, [dimensions.width]);
-  const drawerStyle = useMemo(() => ({ width: isLargeScreen ? 320 : '0%' }), [isLargeScreen]);
+  const drawerStyle = useMemo(
-  const drawerContent = useCallback(props => (isLargeScreen ? <DrawerList {...props} /> : null), [isLargeScreen]);
+    () => ({
+      drawerPosition: I18nManager.isRTL ? 'right' : 'left',
+      drawerStyle: { width: isLargeScreen ? 320 : '0%' },
+      drawerType: isLargeScreen ? 'permanent' : 'back',
+    }),
+    [isLargeScreen],
+  );
+  const drawerContent = useCallback(props => <DrawerList {...props} />, []);
 
   return (
-    <Drawer.Navigator
+    <Drawer.Navigator screenOptions={drawerStyle} drawerContent={drawerContent}>
-      screenOptions={drawerStyle}
-      drawerType={isLargeScreen ? 'permanent' : null}
-      drawerContent={drawerContent}
-      drawerPosition={I18nManager.isRTL ? 'right' : 'left'}
-    >
       <Drawer.Screen name="Navigation" component={Navigation} options={{ headerShown: false, gestureEnabled: false }} />
     </Drawer.Navigator>
   );
@@ -509,13 +511,14 @@ const PaymentCodeStackRoot = () => {
 
 const RootStack = createNativeStackNavigator();
 const NavigationDefaultOptions = { headerShown: false, presentation: isDesktop ? 'containedModal' : 'modal' };
+const NavigationFormModalOptions = { headerShown: false, presentation: isDesktop ? 'containedModal' : 'formSheet' };
 const StatusBarLightOptions = { statusBarStyle: 'light' };
 const Navigation = () => {
   return (
     <RootStack.Navigator initialRouteName="UnlockWithScreenRoot" screenOptions={{ headerHideShadow: true, statusBarStyle: 'auto' }}>
       {/* stacks */}
       <RootStack.Screen name="WalletsRoot" component={WalletsRoot} options={{ headerShown: false, translucent: false }} />
-      <RootStack.Screen name="AddWalletRoot" component={AddWalletRoot} options={NavigationDefaultOptions} />
+      <RootStack.Screen name="AddWalletRoot" component={AddWalletRoot} options={NavigationFormModalOptions} />
       <RootStack.Screen name="SendDetailsRoot" component={SendDetailsRoot} options={NavigationDefaultOptions} />
       <RootStack.Screen name="LNDCreateInvoiceRoot" component={LNDCreateInvoiceRoot} options={NavigationDefaultOptions} />
       <RootStack.Screen name="ScanLndInvoiceRoot" component={ScanLndInvoiceRoot} options={NavigationDefaultOptions} />

blue_modules/storage-context.js

@@ -19,7 +19,7 @@ export const WalletTransactionsStatus = { NONE: false, ALL: true };
 export const BlueStorageContext = createContext();
 export const BlueStorageProvider = ({ children }) => {
   const [wallets, setWallets] = useState([]);
-  const [selectedWallet, setSelectedWallet] = useState('');
+  const [selectedWalletID, setSelectedWalletID] = useState('');
   const [walletTransactionUpdateStatus, setWalletTransactionUpdateStatus] = useState(WalletTransactionsStatus.NONE);
   const [walletsInitialized, setWalletsInitialized] = useState(false);
   const [preferredFiatCurrency, _setPreferredFiatCurrency] = useState(FiatUnit.USD);
@@ -241,8 +241,8 @@ export const BlueStorageProvider = ({ children }) => {
         txMetadata,
         saveToDisk,
         getTransactions,
-        selectedWallet,
+        selectedWalletID,
-        setSelectedWallet,
+        setSelectedWalletID,
         addWallet,
         deleteWallet,
         currentSharedCosigner,

components/WalletsCarousel.js

@@ -21,7 +21,7 @@ import { LightningCustodianWallet, LightningLdkWallet, MultisigHDWallet } from '
 import WalletGradient from '../class/wallet-gradient';
 import { BluePrivateBalance } from '../BlueComponents';
 import { BlueStorageContext } from '../blue_modules/storage-context';
-import { isHandset, isTablet, isDesktop } from '../blue_modules/environment';
+import { isTablet, isDesktop } from '../blue_modules/environment';
 import { useTheme } from './themes';
 
 const nStyles = StyleSheet.create({
@@ -137,7 +137,7 @@ const iStyles = StyleSheet.create({
   },
 });
 
-const WalletCarouselItem = ({ item, index, onPress, handleLongPress, isSelectedWallet }) => {
+const WalletCarouselItem = ({ item, _, onPress, handleLongPress, isSelectedWallet }) => {
   const scaleValue = new Animated.Value(1.0);
   const { colors } = useTheme();
   const { walletTransactionUpdateStatus } = useContext(BlueStorageContext);
@@ -239,7 +239,6 @@ const WalletCarouselItem = ({ item, index, onPress, handleLongPress, isSelectedW
 
 WalletCarouselItem.propTypes = {
   item: PropTypes.any,
-  index: PropTypes.number.isRequired,
   onPress: PropTypes.func.isRequired,
   handleLongPress: PropTypes.func.isRequired,
   isSelectedWallet: PropTypes.bool,
@@ -262,21 +261,22 @@ const ListHeaderComponent = () => <View style={cStyles.separatorStyle} />;
 
 const WalletsCarousel = forwardRef((props, ref) => {
   const { preferredFiatCurrency, language } = useContext(BlueStorageContext);
+  const { horizontal, data, handleLongPress, onPress, selectedWallet } = props;
   const renderItem = useCallback(
     ({ item, index }) =>
       item ? (
         <WalletCarouselItem
-          isSelectedWallet={!props.horizontal && props.selectedWallet ? props.selectedWallet === item.getID() : undefined}
+          isSelectedWallet={!horizontal && selectedWallet ? selectedWallet === item.getID() : undefined}
           item={item}
           index={index}
-          handleLongPress={props.handleLongPress}
+          handleLongPress={handleLongPress}
-          onPress={props.onPress}
+          onPress={onPress}
         />
       ) : (
-        <NewWalletPanel onPress={props.onPress} />
+        <NewWalletPanel onPress={onPress} />
       ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.horizontal, props.selectedWallet, props.handleLongPress, props.onPress, preferredFiatCurrency, language],
+    [horizontal, selectedWallet, handleLongPress, onPress, preferredFiatCurrency, language],
   );
   const flatListRef = useRef();
 
@@ -298,7 +298,7 @@ const WalletsCarousel = forwardRef((props, ref) => {
     console.log(error);
     flatListRef.current.scrollToOffset({ offset: error.averageItemLength * error.index, animated: true });
     setTimeout(() => {
-      if (props.data.length !== 0 && flatListRef.current !== null) {
+      if (data.length !== 0 && flatListRef.current !== null) {
         flatListRef.current.scrollToIndex({ index: error.index, animated: true });
       }
     }, 100);
@@ -307,40 +307,40 @@ const WalletsCarousel = forwardRef((props, ref) => {
   const { width } = useWindowDimensions();
   const sliderHeight = 195;
   const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82;
-  return isHandset ? (
+  return horizontal ? (
     <FlatList
       ref={flatListRef}
       renderItem={renderItem}
-      extraData={props.data}
+      extraData={data}
       keyExtractor={(_, index) => index.toString()}
       showsVerticalScrollIndicator={false}
       pagingEnabled
-      disableIntervalMomentum={isHandset}
+      disableIntervalMomentum={horizontal}
       snapToInterval={itemWidth} // Adjust to your content width
       decelerationRate="fast"
-      contentContainerStyle={props.horizontal ? cStyles.content : cStyles.contentLargeScreen}
+      contentContainerStyle={cStyles.content}
       directionalLockEnabled
       showsHorizontalScrollIndicator={false}
       initialNumToRender={10}
       ListHeaderComponent={ListHeaderComponent}
-      style={props.horizontal ? { minHeight: sliderHeight + 9 } : {}}
+      style={{ minHeight: sliderHeight + 9 }}
       onScrollToIndexFailed={onScrollToIndexFailed}
       {...props}
     />
   ) : (
     <View style={cStyles.contentLargeScreen}>
-      {props.data.map((item, index) =>
+      {data.map((item, index) =>
         item ? (
           <WalletCarouselItem
-            isSelectedWallet={!props.horizontal && props.selectedWallet ? props.selectedWallet === item.getID() : undefined}
+            isSelectedWallet={!horizontal && selectedWallet ? selectedWallet === item.getID() : undefined}
             item={item}
             index={index}
-            handleLongPress={props.handleLongPress}
+            handleLongPress={handleLongPress}
-            onPress={props.onPress}
+            onPress={onPress}
             key={index}
           />
         ) : (
-          <NewWalletPanel key={index} onPress={props.onPress} />
+          <NewWalletPanel key={index} onPress={onPress} />
         ),
       )}
     </View>

ios/BlueWallet.xcodeproj/project.pbxproj

@@ -817,7 +817,7 @@
 			);
 			mainGroup = 83CBB9F61A601CBA00E9B192;
 			packageReferences = (
-				6DFC806E24EA0B6C007B8700 /* XCRemoteSwiftPackageReference "EFQRCode" */,
+				6DFC806E24EA0B6C007B8700 /* XCRemoteSwiftPackageReference "EFQRCode.git" */,
 			);
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
 			projectDirPath = "";
@@ -1822,7 +1822,7 @@
 /* End XCConfigurationList section */
 
 /* Begin XCRemoteSwiftPackageReference section */
-		6DFC806E24EA0B6C007B8700 /* XCRemoteSwiftPackageReference "EFQRCode" */ = {
+		6DFC806E24EA0B6C007B8700 /* XCRemoteSwiftPackageReference "EFQRCode.git" */ = {
 			isa = XCRemoteSwiftPackageReference;
 			repositoryURL = "https://github.com/EFPrefix/EFQRCode.git";
 			requirement = {
@@ -1835,7 +1835,7 @@
 /* Begin XCSwiftPackageProductDependency section */
 		6DFC806F24EA0B6C007B8700 /* EFQRCode */ = {
 			isa = XCSwiftPackageProductDependency;
-			package = 6DFC806E24EA0B6C007B8700 /* XCRemoteSwiftPackageReference "EFQRCode" */;
+			package = 6DFC806E24EA0B6C007B8700 /* XCRemoteSwiftPackageReference "EFQRCode.git" */;
 			productName = EFQRCode;
 		};
 /* End XCSwiftPackageProductDependency section */

screen/lnd/lndCreateInvoice.js

@@ -36,7 +36,7 @@ const currency = require('../../blue_modules/currency');
 const torrific = isTorCapable ? require('../../blue_modules/torrific') : require('../../scripts/maccatalystpatches/torrific.js');
 
 const LNDCreateInvoice = () => {
-  const { wallets, saveToDisk, setSelectedWallet, isTorDisabled } = useContext(BlueStorageContext);
+  const { wallets, saveToDisk, setSelectedWalletID, isTorDisabled } = useContext(BlueStorageContext);
   const { walletID, uri } = useRoute().params;
   const wallet = useRef(wallets.find(item => item.getID() === walletID) || wallets.find(item => item.chain === Chain.OFFCHAIN));
   const { name } = useRoute();
@@ -106,7 +106,7 @@ const LNDCreateInvoice = () => {
       const newWallet = wallets.find(w => w.getID() === walletID);
       if (newWallet) {
         wallet.current = newWallet;
-        setSelectedWallet(newWallet.getID());
+        setSelectedWalletID(newWallet.getID());
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -115,7 +115,7 @@ const LNDCreateInvoice = () => {
   useFocusEffect(
     useCallback(() => {
       if (wallet.current) {
-        setSelectedWallet(walletID);
+        setSelectedWalletID(walletID);
         if (wallet.current.getUserHasSavedExport()) {
           renderReceiveDetails();
         } else {

screen/lnd/lndViewInvoice.js

@@ -17,7 +17,7 @@ import Button from '../../components/Button';
 
 const LNDViewInvoice = () => {
   const { invoice, walletID } = useRoute().params;
-  const { wallets, setSelectedWallet, fetchAndSaveWalletTransactions } = useContext(BlueStorageContext);
+  const { wallets, setSelectedWalletID, fetchAndSaveWalletTransactions } = useContext(BlueStorageContext);
   const wallet = wallets.find(w => w.getID() === walletID);
   const { colors, closeImage } = useTheme();
   const { goBack, navigate, setParams, setOptions, getParent } = useNavigation();
@@ -98,7 +98,7 @@ const LNDViewInvoice = () => {
   }, [colors, isModal]);
 
   useEffect(() => {
-    setSelectedWallet(walletID);
+    setSelectedWalletID(walletID);
     console.log('LNDViewInvoice - useEffect');
     if (!invoice.ispaid) {
       fetchInvoiceInterval.current = setInterval(async () => {

screen/send/details.js

@@ -49,7 +49,7 @@ const fs = require('../../blue_modules/fs');
 const btcAddressRx = /^[a-zA-Z0-9]{26,35}$/;
 
 const SendDetails = () => {
-  const { wallets, setSelectedWallet, sleep, txMetadata, saveToDisk } = useContext(BlueStorageContext);
+  const { wallets, setSelectedWalletID, sleep, txMetadata, saveToDisk } = useContext(BlueStorageContext);
   const navigation = useNavigation();
   const { name, params: routeParams } = useRoute();
   const scrollView = useRef();
@@ -230,7 +230,7 @@ const SendDetails = () => {
   // change header and reset state on wallet change
   useEffect(() => {
     if (!wallet) return;
-    setSelectedWallet(wallet.getID());
+    setSelectedWalletID(wallet.getID());
 
     // reset other values
     setUtxo(null);

screen/transactions/transactionStatus.js

@@ -25,7 +25,7 @@ const buttonStatus = Object.freeze({
 });
 
 const TransactionsStatus = () => {
-  const { setSelectedWallet, wallets, txMetadata, fetchAndSaveWalletTransactions } = useContext(BlueStorageContext);
+  const { setSelectedWalletID, wallets, txMetadata, fetchAndSaveWalletTransactions } = useContext(BlueStorageContext);
   const { hash, walletID } = useRoute().params;
   const { navigate, setOptions, goBack } = useNavigation();
   const { colors } = useTheme();
@@ -196,7 +196,7 @@ const TransactionsStatus = () => {
   useEffect(() => {
     const wID = wallet.current?.getID();
     if (wID) {
-      setSelectedWallet(wallet.current?.getID());
+      setSelectedWalletID(wallet.current?.getID());
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wallet.current]);

screen/wallets/details.js

@@ -119,7 +119,7 @@ const styles = StyleSheet.create({
 });
 
 const WalletDetails = () => {
-  const { saveToDisk, wallets, deleteWallet, setSelectedWallet, txMetadata } = useContext(BlueStorageContext);
+  const { saveToDisk, wallets, deleteWallet, setSelectedWalletID, txMetadata } = useContext(BlueStorageContext);
   const { walletID } = useRoute().params;
   const [isLoading, setIsLoading] = useState(false);
   const [backdoorPressed, setBackdoorPressed] = useState(0);
@@ -226,7 +226,7 @@ const WalletDetails = () => {
 
   useEffect(() => {
     if (wallets.some(w => w.getID() === walletID)) {
-      setSelectedWallet(walletID);
+      setSelectedWalletID(walletID);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [walletID]);

screen/wallets/drawerList.js

@@ -13,7 +13,7 @@ import { useTheme } from '../../components/themes';
 
 const DrawerList = props => {
   const walletsCarousel = useRef();
-  const { wallets, selectedWallet } = useContext(BlueStorageContext);
+  const { wallets, selectedWalletID, setSelectedWalletID } = useContext(BlueStorageContext);
   const { colors } = useTheme();
   const walletsCount = useRef(wallets.length);
   const isFocused = useIsFocused();
@@ -33,6 +33,7 @@ const DrawerList = props => {
   const handleClick = item => {
     if (item?.getID) {
       const walletID = item.getID();
+      setSelectedWalletID(walletID);
       props.navigation.navigate('WalletTransactions', {
         walletID: item.getID(),
         walletType: item.type,
@@ -72,7 +73,7 @@ const DrawerList = props => {
         handleLongPress={handleLongPress}
         ref={walletsCarousel}
         testID="WalletsList"
-        selectedWallet={selectedWallet}
+        selectedWallet={selectedWalletID}
         scrollEnabled={isFocused}
       />
     </DrawerContentScrollView>

screen/wallets/list.js

@@ -36,7 +36,7 @@ const WalletsListSections = { CAROUSEL: 'CAROUSEL', TRANSACTIONS: 'TRANSACTIONS'
 const WalletsList = () => {
   const walletsCarousel = useRef();
   const currentWalletIndex = useRef(0);
-  const { wallets, getTransactions, getBalance, refreshAllWalletTransactions, setSelectedWallet, isElectrumDisabled } =
+  const { wallets, getTransactions, getBalance, refreshAllWalletTransactions, setSelectedWalletID, isElectrumDisabled } =
     useContext(BlueStorageContext);
   const { width } = useWindowDimensions();
   const { colors, scanImage } = useTheme();
@@ -66,7 +66,7 @@ const WalletsList = () => {
   useFocusEffect(
     useCallback(() => {
       verifyBalance();
-      setSelectedWallet('');
+      setSelectedWalletID(undefined);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []),
   );

screen/wallets/transactions.js

@@ -45,7 +45,7 @@ const buttonFontSize =
     : PixelRatio.roundToNearestPixel(Dimensions.get('window').width / 26);
 
 const WalletTransactions = ({ navigation }) => {
-  const { wallets, saveToDisk, setSelectedWallet, walletTransactionUpdateStatus, isElectrumDisabled } = useContext(BlueStorageContext);
+  const { wallets, saveToDisk, setSelectedWalletID, walletTransactionUpdateStatus, isElectrumDisabled } = useContext(BlueStorageContext);
   const [isLoading, setIsLoading] = useState(false);
   const { walletID } = useRoute().params;
   const { name } = useRoute();
@@ -129,7 +129,7 @@ const WalletTransactions = ({ navigation }) => {
     setTimeElapsed(0);
     setItemPriceUnit(wallet.getPreferredBalanceUnit());
     setIsLoading(false);
-    setSelectedWallet(wallet.getID());
+    setSelectedWalletID(wallet.getID());
     setDataSource([...getTransactionsSliced(limit)]);
     setOptions({
       headerStyle: {
@@ -141,7 +141,7 @@ const WalletTransactions = ({ navigation }) => {
       },
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [walletID]);
+  }, [wallet]);
 
   useEffect(() => {
     const newWallet = wallets.find(w => w.getID() === walletID);