From f1d220020b92666c071210a7f84fd5537798db4e Mon Sep 17 00:00:00 2001
From: Adam Horodyski <ad.horodyski@gmail.com>
Date: Tue, 30 Jul 2024 14:52:57 +0200
Subject: [PATCH 01/42] fix: improve perf of isActionOfType by limiting calls
 to the includes

---
 src/libs/ReportActionsUtils.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index 8e9926648c2c..10b6de73b136 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -189,7 +189,14 @@ function isActionOfType<T extends ReportActionName[]>(
 ): action is {
     [K in keyof T]: ReportAction<T[K]>;
 }[number] {
-    return actionNames.includes(action?.actionName as T[number]);
+    const actionName = action?.actionName as T[number];
+
+    // This is purely a performance optimization to limit the 'includes()' calls on Hermes
+    if (actionNames.length === 1) {
+        return actionNames[0] === actionName;
+    }
+
+    return actionNames.includes(actionName);
 }
 
 function getOriginalMessage<T extends ReportActionName>(reportAction: OnyxInputOrEntry<ReportAction<T>>): OriginalMessage<T> | undefined {

From 6381821f5f11920a4904669d13f6b4b92807cc19 Mon Sep 17 00:00:00 2001
From: Adam Horodyski <ad.horodyski@gmail.com>
Date: Mon, 5 Aug 2024 11:48:28 +0200
Subject: [PATCH 02/42] feat(wip): draft the import-onyx-state perf debug
 functionality

---
 src/Expensify.tsx                             |  6 ++
 src/languages/en.ts                           |  1 +
 src/languages/es.ts                           |  1 +
 .../Troubleshoot/TroubleshootPage.tsx         | 84 +++++++++++++++++++
 4 files changed, 92 insertions(+)

diff --git a/src/Expensify.tsx b/src/Expensify.tsx
index f9fd379d94ce..df77595b4322 100644
--- a/src/Expensify.tsx
+++ b/src/Expensify.tsx
@@ -15,6 +15,7 @@ import SplashScreenHider from './components/SplashScreenHider';
 import UpdateAppModal from './components/UpdateAppModal';
 import CONST from './CONST';
 import useLocalize from './hooks/useLocalize';
+import * as App from './libs/actions/App';
 import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
 import * as Report from './libs/actions/Report';
 import * as User from './libs/actions/User';
@@ -52,6 +53,11 @@ Onyx.registerLogger(({level, message}) => {
     }
 });
 
+// This is supposed to restart to the initial state
+Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
+    App.openApp();
+});
+
 type ExpensifyOnyxProps = {
     /** Whether the app is waiting for the server's response to determine if a room is public */
     isCheckingPublicRoom: OnyxEntry<boolean>;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 32b9a9eff2b6..5cb41871dc45 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1007,6 +1007,7 @@ export default {
             destroy: 'Destroy',
             maskExportOnyxStateData: 'Mask fragile user data while exporting Onyx state',
             exportOnyxState: 'Export Onyx state',
+            importOnyxState: 'Import Onyx state',
         },
         debugConsole: {
             saveLog: 'Save log',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 1636512a6fa4..2bf825970e47 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1014,6 +1014,7 @@ export default {
             destroy: 'Destruir',
             maskExportOnyxStateData: 'Enmascare los datos frágiles del usuario mientras exporta el estado Onyx',
             exportOnyxState: 'Exportar estado Onyx',
+            importOnyxState: 'Importar estado Onyx',
         },
         debugConsole: {
             saveLog: 'Guardar registro',
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index 2ec8ac1e54a0..e8b0e49d9367 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -1,8 +1,11 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
+import RNFS from 'react-native-fs';
 import Onyx, {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {SvgProps} from 'react-native-svg';
+import AttachmentPicker from '@components/AttachmentPicker';
+import Button from '@components/Button';
 import ClientSideLoggingToolMenu from '@components/ClientSideLoggingToolMenu';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -25,14 +28,45 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import {setShouldMaskOnyxState} from '@libs/actions/MaskOnyx';
 import ExportOnyxState from '@libs/ExportOnyxState';
+import localFileDownload from '@libs/localFileDownload';
 import Navigation from '@libs/Navigation/Navigation';
 import * as App from '@userActions/App';
+import * as Network from '@userActions/Network';
 import * as Report from '@userActions/Report';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import getLightbulbIllustrationStyle from './getLightbulbIllustrationStyle';
 
+// List of Onyx keys from the .txt file we want to keep for the local override
+const keysToInclude = [
+    ONYXKEYS.COLLECTION.REPORT,
+    ONYXKEYS.COLLECTION.REPORT_METADATA,
+    ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS,
+    ONYXKEYS.COLLECTION.REPORT_VIOLATIONS,
+    ONYXKEYS.COLLECTION.REPORT_ACTIONS,
+    ONYXKEYS.COLLECTION.REPORT_ACTIONS_PAGES,
+    ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS,
+    ONYXKEYS.COLLECTION.TRANSACTION,
+    ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
+    ONYXKEYS.COLLECTION.POLICY,
+    ONYXKEYS.COLLECTION.POLICY_CATEGORIES,
+    ONYXKEYS.COLLECTION.POLICY_TAGS,
+    ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS,
+    ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES,
+    ONYXKEYS.PERSONAL_DETAILS_LIST,
+    ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
+    ONYXKEYS.ACCOUNT,
+    ONYXKEYS.SESSION,
+    ONYXKEYS.WALLET_TRANSFER,
+    ONYXKEYS.LOGIN_LIST,
+    ONYXKEYS.USER,
+    ONYXKEYS.USER_WALLET,
+    ONYXKEYS.USER_METADATA,
+    ONYXKEYS.IS_LOADING_REPORT_DATA,
+    'nvp_',
+];
+
 type BaseMenuItem = {
     translationKey: TranslationPaths;
     icon: React.FC<SvgProps>;
@@ -46,6 +80,8 @@ type TroubleshootPageOnyxProps = {
 
 type TroubleshootPageProps = TroubleshootPageOnyxProps;
 
+Network.setShouldForceOffline(false);
+
 function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
@@ -137,6 +173,54 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
                         )}
                     >
                         <View style={[styles.flex1, styles.mt5]}>
+                            <View>
+                                <AttachmentPicker>
+                                    {({openPicker}) => {
+                                        return (
+                                            <Button
+                                                text={translate('initialSettingsPage.troubleshoot.importOnyxState')}
+                                                onPress={() => {
+                                                    // TODO should directly use 'react-native-document-picker'
+                                                    openPicker({
+                                                        onPicked: (file) => {
+                                                            if (!file.uri) {
+                                                                return;
+                                                            }
+
+                                                            RNFS.readFile(file.uri).then((fileContent) => {
+                                                                const importedState = JSON.parse(fileContent);
+                                                                // this needs to be exactly the same as we get from running the App.openApp command
+                                                                const parsedState = Object.assign({}, importedState);
+
+                                                                Object.keys(parsedState).forEach((key) => {
+                                                                    const shouldStay = keysToInclude.some((onyxKey) => key.startsWith(onyxKey));
+
+                                                                    if (shouldStay) {
+                                                                        return;
+                                                                    }
+
+                                                                    delete parsedState[key];
+                                                                });
+
+                                                                // App.openApp();
+
+                                                                Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
+                                                                    // Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
+                                                                    Onyx.multiSet(parsedState).then(() => {
+                                                                        console.log('Applied imported state.');
+                                                                        Navigation.navigate(ROUTES.HOME);
+                                                                    });
+                                                                    // });
+                                                                });
+                                                            });
+                                                        },
+                                                    });
+                                                }}
+                                            />
+                                        );
+                                    }}
+                                </AttachmentPicker>
+                            </View>
                             <View>
                                 <ClientSideLoggingToolMenu />
                                 <TestToolRow title={translate('initialSettingsPage.troubleshoot.maskExportOnyxStateData')}>

From f8e758b82386f3a9a8a7e4c035f9cdb5a4424efb Mon Sep 17 00:00:00 2001
From: Adam Horodyski <ad.horodyski@gmail.com>
Date: Mon, 5 Aug 2024 12:08:35 +0200
Subject: [PATCH 03/42] chore: add comments describing the whole workflow in
 steps

---
 src/pages/settings/Troubleshoot/TroubleshootPage.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index e8b0e49d9367..1ca36bbfdd07 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -187,11 +187,13 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
                                                                 return;
                                                             }
 
+                                                            // 1. Read the file content
                                                             RNFS.readFile(file.uri).then((fileContent) => {
                                                                 const importedState = JSON.parse(fileContent);
-                                                                // this needs to be exactly the same as we get from running the App.openApp command
+                                                                // TODO: this needs to be exactly the same as we get from running the App.openApp command?
                                                                 const parsedState = Object.assign({}, importedState);
 
+                                                                // 2. Only keep the keys that we're interested in
                                                                 Object.keys(parsedState).forEach((key) => {
                                                                     const shouldStay = keysToInclude.some((onyxKey) => key.startsWith(onyxKey));
 
@@ -204,8 +206,11 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
 
                                                                 // App.openApp();
 
+                                                                // 3. Go offline
                                                                 Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
                                                                     // Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
+
+                                                                    // 4. Apply the new state from the file
                                                                     Onyx.multiSet(parsedState).then(() => {
                                                                         console.log('Applied imported state.');
                                                                         Navigation.navigate(ROUTES.HOME);

From 3b33ef267a525c3981c00a8d101e5bce8cb626b6 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 8 Aug 2024 09:29:18 +0200
Subject: [PATCH 04/42] fix: not iterable items from onyx in persisted
 requests, added web support, changed the way for selecting onyx keys, instead
 for including used omitting

---
 .../OnyxStateImport/index.native.tsx          | 95 +++++++++++++++++++
 src/components/OnyxStateImport/index.tsx      | 92 ++++++++++++++++++
 src/libs/actions/PersistedRequests.ts         | 11 ++-
 .../Troubleshoot/TroubleshootPage.tsx         | 85 +----------------
 4 files changed, 202 insertions(+), 81 deletions(-)
 create mode 100644 src/components/OnyxStateImport/index.native.tsx
 create mode 100644 src/components/OnyxStateImport/index.tsx

diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
new file mode 100644
index 000000000000..5b668fedb702
--- /dev/null
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import RNFS from 'react-native-fs';
+import Onyx from 'react-native-onyx';
+import AttachmentPicker from '@components/AttachmentPicker';
+import Button from '@components/Button';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+// List of Onyx keys from the .txt file we want to omit for the local override
+const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK];
+
+function transformNumericKeysToArray(obj) {
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+
+    // Check if all keys are numeric and sequential starting from 0
+    const keys = Object.keys(obj);
+    const allKeysAreNumeric = keys.every((key) => !isNaN(key));
+    const keysAreSequential = keys.every((key, index) => parseInt(key) === index);
+
+    if (allKeysAreNumeric && keysAreSequential) {
+        // Convert object to array
+        return keys.map((key) => transformNumericKeysToArray(obj[key]));
+    }
+
+    // Recursively apply transformation to each property
+    for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            obj[key] = transformNumericKeysToArray(obj[key]);
+        }
+    }
+
+    return obj;
+}
+export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
+    const {translate} = useLocalize();
+    return (
+        <AttachmentPicker>
+            {({openPicker}) => {
+                return (
+                    <Button
+                        text={translate('initialSettingsPage.troubleshoot.importOnyxState')}
+                        onPress={() => {
+                            // TODO should directly use 'react-native-document-picker'
+                            openPicker({
+                                onPicked: (file) => {
+                                    if (!file.uri) {
+                                        return;
+                                    }
+
+                                    // 1. Read the file content
+                                    RNFS.readFile(file.uri).then((fileContent) => {
+                                        setIsLoading(true);
+                                        const importedState = JSON.parse(fileContent);
+                                        // TODO: this needs to be exactly the same as we get from running the App.openApp command?
+                                        const parsedState = {...importedState};
+
+                                        // 2. Only keep the keys that we're interested in
+                                        Object.keys(parsedState).forEach((key) => {
+                                            const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
+
+                                            if (shouldOmit) {
+                                                delete parsedState[key];
+                                            }
+                                        });
+
+                                        const t = transformNumericKeysToArray(parsedState);
+                                        // 3. Go offline
+                                        Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
+                                            // Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
+
+                                            // 4. Apply the new state from the file
+                                            Onyx.multiSet(t)
+                                                .then(() => {
+                                                    console.log('Applied imported state.');
+                                                    Navigation.navigate(ROUTES.HOME);
+                                                })
+                                                .finally(() => {
+                                                    setIsLoading(false);
+                                                });
+                                            // });
+                                        });
+                                    });
+                                },
+                            });
+                        }}
+                    />
+                );
+            }}
+        </AttachmentPicker>
+    );
+}
diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
new file mode 100644
index 000000000000..637e6acd2ca7
--- /dev/null
+++ b/src/components/OnyxStateImport/index.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import Onyx from 'react-native-onyx';
+import AttachmentPicker from '@components/AttachmentPicker';
+import Button from '@components/Button';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+// List of Onyx keys from the .txt file we want to keep for the local override
+const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK];
+
+function transformNumericKeysToArray(obj) {
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+
+    // Check if all keys are numeric and sequential starting from 0
+    const keys = Object.keys(obj);
+    const allKeysAreNumeric = keys.every((key) => !isNaN(key));
+    const keysAreSequential = keys.every((key, index) => parseInt(key) === index);
+
+    if (allKeysAreNumeric && keysAreSequential) {
+        // Convert object to array
+        return keys.map((key) => transformNumericKeysToArray(obj[key]));
+    }
+
+    // Recursively apply transformation to each property
+    for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            obj[key] = transformNumericKeysToArray(obj[key]);
+        }
+    }
+
+    return obj;
+}
+
+export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
+    const {translate} = useLocalize();
+    return (
+        <AttachmentPicker>
+            {({openPicker}) => {
+                return (
+                    <Button
+                        text={translate('initialSettingsPage.troubleshoot.importOnyxState')}
+                        onPress={() => {
+                            // TODO should directly use 'react-native-document-picker'
+                            openPicker({
+                                onPicked: (file) => {
+                                    if (!file.uri) {
+                                        return;
+                                    }
+                                    console.log('file web', file);
+                                    const reader = new FileReader();
+                                    reader.onload = (e) => {
+                                        setIsLoading(true);
+                                        const fileContent = e.target?.result;
+                                        const importedState = JSON.parse(fileContent);
+                                        const parsedState = {...importedState};
+
+                                        Object.keys(parsedState).forEach((key) => {
+                                            const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
+
+                                            if (shouldOmit) {
+                                                delete parsedState[key];
+                                            }
+                                        });
+
+                                        const t = transformNumericKeysToArray(parsedState);
+
+                                        Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
+                                            Onyx.multiSet(t)
+                                                .then(() => {
+                                                    console.log('Applied imported state.');
+                                                    Navigation.navigate(ROUTES.HOME);
+                                                })
+                                                .finally(() => {
+                                                    setIsLoading(false);
+                                                });
+                                        });
+                                    };
+
+                                    reader.readAsText(file);
+                                },
+                            });
+                        }}
+                    />
+                );
+            }}
+        </AttachmentPicker>
+    );
+}
diff --git a/src/libs/actions/PersistedRequests.ts b/src/libs/actions/PersistedRequests.ts
index 851e53876508..677926d73e01 100644
--- a/src/libs/actions/PersistedRequests.ts
+++ b/src/libs/actions/PersistedRequests.ts
@@ -11,6 +11,9 @@ Onyx.connect({
     callback: (val) => (persistedRequests = val ?? []),
 });
 
+function isIterable(obj: any): boolean {
+    return obj != null && typeof obj[Symbol.iterator] === 'function';
+}
 /**
  * This promise is only used by tests. DO NOT USE THIS PROMISE IN THE APPLICATION CODE
  */
@@ -23,7 +26,13 @@ function getLength(): number {
 }
 
 function save(requestToPersist: Request) {
-    const requests = [...persistedRequests, requestToPersist];
+    let requests: Request[] = [];
+    if (isIterable(persistedRequests)) {
+        requests = [...persistedRequests, requestToPersist];
+    } else {
+        requests = [requestToPersist];
+    }
+
     persistedRequests = requests;
     Onyx.set(ONYXKEYS.PERSISTED_REQUESTS, requests).then(() => {
         Log.info(`[SequentialQueue] '${requestToPersist.command}' command queued. Queue length is ${getLength()}`);
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index 1ca36bbfdd07..76a531ad19b6 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -8,11 +8,13 @@ import AttachmentPicker from '@components/AttachmentPicker';
 import Button from '@components/Button';
 import ClientSideLoggingToolMenu from '@components/ClientSideLoggingToolMenu';
 import ConfirmModal from '@components/ConfirmModal';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
+import OnyxStateImport from '@components/OnyxStateImport';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Section from '@components/Section';
@@ -38,35 +40,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import getLightbulbIllustrationStyle from './getLightbulbIllustrationStyle';
 
-// List of Onyx keys from the .txt file we want to keep for the local override
-const keysToInclude = [
-    ONYXKEYS.COLLECTION.REPORT,
-    ONYXKEYS.COLLECTION.REPORT_METADATA,
-    ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS,
-    ONYXKEYS.COLLECTION.REPORT_VIOLATIONS,
-    ONYXKEYS.COLLECTION.REPORT_ACTIONS,
-    ONYXKEYS.COLLECTION.REPORT_ACTIONS_PAGES,
-    ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS,
-    ONYXKEYS.COLLECTION.TRANSACTION,
-    ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
-    ONYXKEYS.COLLECTION.POLICY,
-    ONYXKEYS.COLLECTION.POLICY_CATEGORIES,
-    ONYXKEYS.COLLECTION.POLICY_TAGS,
-    ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS,
-    ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES,
-    ONYXKEYS.PERSONAL_DETAILS_LIST,
-    ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
-    ONYXKEYS.ACCOUNT,
-    ONYXKEYS.SESSION,
-    ONYXKEYS.WALLET_TRANSFER,
-    ONYXKEYS.LOGIN_LIST,
-    ONYXKEYS.USER,
-    ONYXKEYS.USER_WALLET,
-    ONYXKEYS.USER_METADATA,
-    ONYXKEYS.IS_LOADING_REPORT_DATA,
-    'nvp_',
-];
-
 type BaseMenuItem = {
     translationKey: TranslationPaths;
     icon: React.FC<SvgProps>;
@@ -90,6 +63,7 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
     const waitForNavigate = useWaitForNavigation();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const illustrationStyle = getLightbulbIllustrationStyle();
+    const [isLoading, setIsLoading] = useState(false);
 
     const exportOnyxState = useCallback(() => {
         ExportOnyxState.readFromOnyxDatabase().then((value: Record<string, unknown>) => {
@@ -149,6 +123,7 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
                 icon={Illustrations.Lightbulb}
             />
+            {isLoading && <FullScreenLoadingIndicator />}
             <ScrollView contentContainerStyle={styles.pt3}>
                 <View style={[styles.flex1, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     <Section
@@ -174,57 +149,7 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
                     >
                         <View style={[styles.flex1, styles.mt5]}>
                             <View>
-                                <AttachmentPicker>
-                                    {({openPicker}) => {
-                                        return (
-                                            <Button
-                                                text={translate('initialSettingsPage.troubleshoot.importOnyxState')}
-                                                onPress={() => {
-                                                    // TODO should directly use 'react-native-document-picker'
-                                                    openPicker({
-                                                        onPicked: (file) => {
-                                                            if (!file.uri) {
-                                                                return;
-                                                            }
-
-                                                            // 1. Read the file content
-                                                            RNFS.readFile(file.uri).then((fileContent) => {
-                                                                const importedState = JSON.parse(fileContent);
-                                                                // TODO: this needs to be exactly the same as we get from running the App.openApp command?
-                                                                const parsedState = Object.assign({}, importedState);
-
-                                                                // 2. Only keep the keys that we're interested in
-                                                                Object.keys(parsedState).forEach((key) => {
-                                                                    const shouldStay = keysToInclude.some((onyxKey) => key.startsWith(onyxKey));
-
-                                                                    if (shouldStay) {
-                                                                        return;
-                                                                    }
-
-                                                                    delete parsedState[key];
-                                                                });
-
-                                                                // App.openApp();
-
-                                                                // 3. Go offline
-                                                                Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
-                                                                    // Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
-
-                                                                    // 4. Apply the new state from the file
-                                                                    Onyx.multiSet(parsedState).then(() => {
-                                                                        console.log('Applied imported state.');
-                                                                        Navigation.navigate(ROUTES.HOME);
-                                                                    });
-                                                                    // });
-                                                                });
-                                                            });
-                                                        },
-                                                    });
-                                                }}
-                                            />
-                                        );
-                                    }}
-                                </AttachmentPicker>
+                                <OnyxStateImport setIsLoading={setIsLoading} />
                             </View>
                             <View>
                                 <ClientSideLoggingToolMenu />

From caa2573c0f0a7bd09568c43676b1df6f20867395 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 9 Aug 2024 14:48:27 +0200
Subject: [PATCH 05/42] fix: make the android component more performant to not
 crash the app when importing state

---
 .../OnyxStateImport/index.native.tsx          | 160 +++++++++++++-----
 1 file changed, 116 insertions(+), 44 deletions(-)

diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
index 5b668fedb702..c387616f0161 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import RNFS from 'react-native-fs';
 import Onyx from 'react-native-onyx';
 import AttachmentPicker from '@components/AttachmentPicker';
@@ -16,27 +16,131 @@ function transformNumericKeysToArray(obj) {
         return obj;
     }
 
-    // Check if all keys are numeric and sequential starting from 0
+    if (Array.isArray(obj)) {
+        return obj.map(transformNumericKeysToArray);
+    }
+
     const keys = Object.keys(obj);
-    const allKeysAreNumeric = keys.every((key) => !isNaN(key));
-    const keysAreSequential = keys.every((key, index) => parseInt(key) === index);
+    const length = keys.length;
+    let allKeysAreNumericAndSequential = true;
+
+    for (let i = 0; i < length; i++) {
+        const key = keys[i];
+        if (parseInt(key, 10) !== i) {
+            allKeysAreNumericAndSequential = false;
+            break;
+        }
+    }
 
-    if (allKeysAreNumeric && keysAreSequential) {
-        // Convert object to array
+    if (allKeysAreNumericAndSequential) {
         return keys.map((key) => transformNumericKeysToArray(obj[key]));
     }
 
-    // Recursively apply transformation to each property
-    for (const key in obj) {
-        if (obj.hasOwnProperty(key)) {
-            obj[key] = transformNumericKeysToArray(obj[key]);
-        }
+    for (const key of keys) {
+        obj[key] = transformNumericKeysToArray(obj[key]);
     }
 
     return obj;
 }
+
+function readFileInChunks(fileUri, chunkSize = 1024 * 1024) {
+    console.log('File URI:', fileUri); // Log the file URI
+    const filePath = decodeURIComponent(fileUri.replace('file://', ''));
+    // Check if the file exists
+    return RNFS.exists(filePath)
+        .then((exists) => {
+            if (!exists) {
+                throw new Error('File does not exist');
+            }
+            console.log('File exists:', exists);
+            return RNFS.stat(filePath);
+        })
+        .then((fileStats) => {
+            console.log('File stats:', fileStats);
+            const fileSize = fileStats.size;
+            let fileContent = '';
+            const promises = [];
+
+            console.log('Start chunking');
+            for (let i = 0; i < fileSize; i += chunkSize) {
+                promises.push(
+                    RNFS.read(filePath, chunkSize, i, 'utf8').then((chunk) => {
+                        fileContent += chunk;
+                    }),
+                );
+            }
+            console.log('end chunking');
+
+            return Promise.all(promises).then(() => fileContent);
+        })
+        .catch((error) => {
+            console.error('Error reading file:', error);
+            throw error;
+        });
+}
+
+const CHUNK_SIZE = 100; // Adjust the chunk size based on your needs
+
+function chunkArray(array, size) {
+    const result = [];
+    for (let i = 0; i < array.length; i += size) {
+        result.push(array.slice(i, i + size));
+    }
+    return result;
+}
+
+function applyStateInChunks(state) {
+    const entries = Object.entries(state);
+    const chunks = chunkArray(entries, CHUNK_SIZE);
+
+    let promise = Promise.resolve();
+    chunks.forEach((chunk) => {
+        promise = promise.then(() => Onyx.multiSet(Object.fromEntries(chunk)));
+    });
+
+    return promise;
+}
+
 export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
     const {translate} = useLocalize();
+    const [error, setError] = useState(null);
+
+    const handleFileRead = (fileUri) => {
+        console.log('File URI:', fileUri); // Log the file URI
+        setIsLoading(true);
+        readFileInChunks(fileUri)
+            .then((fileContent) => {
+                const importedState = JSON.parse(fileContent);
+                console.log('Parse imported state');
+                const transformedState = transformNumericKeysToArray(importedState);
+                console.log('Transformed state:');
+                // Only keep the keys that we're interested in
+                Object.keys(transformedState).forEach((key) => {
+                    const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
+                    if (shouldOmit) {
+                        delete transformedState[key];
+                    }
+                });
+                console.log('Omitted keys');
+
+                Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
+                    // Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
+
+                    // 4. Apply the new state from the file
+                    applyStateInChunks(transformedState).then(() => {
+                        console.log('Applied imported state.');
+                        Navigation.navigate(ROUTES.HOME);
+                    });
+                });
+                // Handle the transformed state as needed
+                setIsLoading(false);
+            })
+            .catch((err) => {
+                setError(err.message);
+                setIsLoading(false);
+            });
+    };
+
     return (
         <AttachmentPicker>
             {({openPicker}) => {
@@ -51,39 +155,7 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                                         return;
                                     }
 
-                                    // 1. Read the file content
-                                    RNFS.readFile(file.uri).then((fileContent) => {
-                                        setIsLoading(true);
-                                        const importedState = JSON.parse(fileContent);
-                                        // TODO: this needs to be exactly the same as we get from running the App.openApp command?
-                                        const parsedState = {...importedState};
-
-                                        // 2. Only keep the keys that we're interested in
-                                        Object.keys(parsedState).forEach((key) => {
-                                            const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
-
-                                            if (shouldOmit) {
-                                                delete parsedState[key];
-                                            }
-                                        });
-
-                                        const t = transformNumericKeysToArray(parsedState);
-                                        // 3. Go offline
-                                        Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
-                                            // Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
-
-                                            // 4. Apply the new state from the file
-                                            Onyx.multiSet(t)
-                                                .then(() => {
-                                                    console.log('Applied imported state.');
-                                                    Navigation.navigate(ROUTES.HOME);
-                                                })
-                                                .finally(() => {
-                                                    setIsLoading(false);
-                                                });
-                                            // });
-                                        });
-                                    });
+                                    handleFileRead(file.uri);
                                 },
                             });
                         }}

From 5c4d6ab7e6094c46b5b376b27a5fc38f23630504 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 14 Aug 2024 10:18:11 +0200
Subject: [PATCH 06/42] feat: add returning to original state

---
 src/components/OnyxStateImport/index.native.tsx  | 16 ++++++++--------
 src/components/OnyxStateImport/index.tsx         |  4 ++--
 src/languages/en.ts                              |  1 +
 src/languages/es.ts                              |  1 +
 .../settings/Troubleshoot/TroubleshootPage.tsx   | 14 ++++++++++++++
 5 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
index c387616f0161..9cc0154fca50 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -9,9 +9,9 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 // List of Onyx keys from the .txt file we want to omit for the local override
-const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK];
+const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
 
-function transformNumericKeysToArray(obj) {
+function transformNumericKeysToArray(obj: unknown): unknown {
     if (typeof obj !== 'object' || obj === null) {
         return obj;
     }
@@ -43,7 +43,7 @@ function transformNumericKeysToArray(obj) {
     return obj;
 }
 
-function readFileInChunks(fileUri, chunkSize = 1024 * 1024) {
+function readFileInChunks(fileUri: string, chunkSize = 1024 * 1024) {
     console.log('File URI:', fileUri); // Log the file URI
     const filePath = decodeURIComponent(fileUri.replace('file://', ''));
     // Check if the file exists
@@ -81,7 +81,7 @@ function readFileInChunks(fileUri, chunkSize = 1024 * 1024) {
 
 const CHUNK_SIZE = 100; // Adjust the chunk size based on your needs
 
-function chunkArray(array, size) {
+function chunkArray<T>(array: T[], size: number): T[][] {
     const result = [];
     for (let i = 0; i < array.length; i += size) {
         result.push(array.slice(i, i + size));
@@ -89,7 +89,7 @@ function chunkArray(array, size) {
     return result;
 }
 
-function applyStateInChunks(state) {
+function applyStateInChunks(state: Record<string, unknown>) {
     const entries = Object.entries(state);
     const chunks = chunkArray(entries, CHUNK_SIZE);
 
@@ -103,9 +103,9 @@ function applyStateInChunks(state) {
 
 export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
     const {translate} = useLocalize();
-    const [error, setError] = useState(null);
+    const [, setError] = useState(null);
 
-    const handleFileRead = (fileUri) => {
+    const handleFileRead = (fileUri: string) => {
         console.log('File URI:', fileUri); // Log the file URI
         setIsLoading(true);
         readFileInChunks(fileUri)
@@ -121,7 +121,7 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                         delete transformedState[key];
                     }
                 });
-                console.log('Omitted keys');
+                console.log('Omgitted keys');
 
                 Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
                     // Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
index 637e6acd2ca7..7dab5eca74a2 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/OnyxStateImport/index.tsx
@@ -8,7 +8,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 // List of Onyx keys from the .txt file we want to keep for the local override
-const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK];
+const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
 
 function transformNumericKeysToArray(obj) {
     if (typeof obj !== 'object' || obj === null) {
@@ -17,7 +17,7 @@ function transformNumericKeysToArray(obj) {
 
     // Check if all keys are numeric and sequential starting from 0
     const keys = Object.keys(obj);
-    const allKeysAreNumeric = keys.every((key) => !isNaN(key));
+    const allKeysAreNumeric = keys.every((key) => !Number.isNaN(key));
     const keysAreSequential = keys.every((key, index) => parseInt(key) === index);
 
     if (allKeysAreNumeric && keysAreSequential) {
diff --git a/src/languages/en.ts b/src/languages/en.ts
index a5d0aa1ce399..584e7dc47da2 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1026,6 +1026,7 @@ export default {
             exportOnyxState: 'Export Onyx state',
             importOnyxState: 'Import Onyx state',
             testCrash: 'Test crash',
+            resetToOriginalState: 'Reset to original state',
         },
         debugConsole: {
             saveLog: 'Save log',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index bbc07a96a19b..a6b16f77096f 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1033,6 +1033,7 @@ export default {
             exportOnyxState: 'Exportar estado Onyx',
             importOnyxState: 'Importar estado Onyx',
             testCrash: 'Prueba de fallo',
+            resetToOriginalState: 'Restablecer al estado original',
         },
         debugConsole: {
             saveLog: 'Guardar registro',
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index 6cc377ff46a5..f085b454ed81 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -111,6 +111,14 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
             .reverse();
     }, [waitForNavigate, exportOnyxState, shouldStoreLogs, translate, styles.sectionMenuItemTopDescription]);
 
+    const resetToOriginalState = () => {
+        Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: false}).then(() => {
+            Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
+                App.openApp();
+            });
+        });
+    };
+
     return (
         <ScreenWrapper
             shouldEnablePickerAvoiding={false}
@@ -151,6 +159,12 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
                             <View>
                                 <OnyxStateImport setIsLoading={setIsLoading} />
                             </View>
+                            <View style={styles.mt5}>
+                                <Button
+                                    text={translate('initialSettingsPage.troubleshoot.resetToOriginalState')}
+                                    onPress={resetToOriginalState}
+                                />
+                            </View>
                             <View>
                                 <ClientSideLoggingToolMenu />
                                 <TestToolRow title={translate('initialSettingsPage.troubleshoot.maskExportOnyxStateData')}>

From 0fe5895f18f972a327188728a77db1d9f0953cf4 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 16 Aug 2024 14:46:07 +0200
Subject: [PATCH 07/42] fix: clear onyx state before applying imported one

---
 .../OnyxStateImport/index.native.tsx          | 16 +++++++--------
 src/components/OnyxStateImport/index.tsx      | 20 +++++++++++--------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
index 9cc0154fca50..6a2c5e704889 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -4,6 +4,7 @@ import Onyx from 'react-native-onyx';
 import AttachmentPicker from '@components/AttachmentPicker';
 import Button from '@components/Button';
 import useLocalize from '@hooks/useLocalize';
+import {KEYS_TO_PRESERVE} from '@libs/actions/App';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -124,16 +125,15 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                 console.log('Omgitted keys');
 
                 Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
-                    // Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
-
-                    // 4. Apply the new state from the file
-                    applyStateInChunks(transformedState).then(() => {
-                        console.log('Applied imported state.');
-                        Navigation.navigate(ROUTES.HOME);
+                    Onyx.clear(KEYS_TO_PRESERVE).then(() => {
+                        // 4. Apply the new state from the file
+                        applyStateInChunks(transformedState).then(() => {
+                            setIsLoading(false);
+                            console.log('Applied imported state.');
+                            Navigation.navigate(ROUTES.HOME);
+                        });
                     });
                 });
-                // Handle the transformed state as needed
-                setIsLoading(false);
             })
             .catch((err) => {
                 setError(err.message);
diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
index 7dab5eca74a2..9728e1b0a98f 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/OnyxStateImport/index.tsx
@@ -3,7 +3,9 @@ import Onyx from 'react-native-onyx';
 import AttachmentPicker from '@components/AttachmentPicker';
 import Button from '@components/Button';
 import useLocalize from '@hooks/useLocalize';
+import {KEYS_TO_PRESERVE} from '@libs/actions/App';
 import Navigation from '@libs/Navigation/Navigation';
+import App from '@src/App';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
@@ -69,14 +71,16 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                                         const t = transformNumericKeysToArray(parsedState);
 
                                         Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
-                                            Onyx.multiSet(t)
-                                                .then(() => {
-                                                    console.log('Applied imported state.');
-                                                    Navigation.navigate(ROUTES.HOME);
-                                                })
-                                                .finally(() => {
-                                                    setIsLoading(false);
-                                                });
+                                            Onyx.clear(KEYS_TO_PRESERVE).then(() => {
+                                                Onyx.multiSet(t)
+                                                    .then(() => {
+                                                        console.log('Applied imported state.');
+                                                        Navigation.navigate(ROUTES.HOME);
+                                                    })
+                                                    .finally(() => {
+                                                        setIsLoading(false);
+                                                    });
+                                            });
                                         });
                                     };
 

From 47926c0a0207eed9aa054e6c79f29e0722532cd7 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Mon, 19 Aug 2024 16:26:44 +0200
Subject: [PATCH 08/42] fix: exporting onyx state on native

---
 src/components/OnyxStateImport/index.tsx | 3 ---
 src/libs/ExportOnyxState/index.native.ts | 7 ++++++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
index 9728e1b0a98f..b6afb19c7bfa 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/OnyxStateImport/index.tsx
@@ -17,17 +17,14 @@ function transformNumericKeysToArray(obj) {
         return obj;
     }
 
-    // Check if all keys are numeric and sequential starting from 0
     const keys = Object.keys(obj);
     const allKeysAreNumeric = keys.every((key) => !Number.isNaN(key));
     const keysAreSequential = keys.every((key, index) => parseInt(key) === index);
 
     if (allKeysAreNumeric && keysAreSequential) {
-        // Convert object to array
         return keys.map((key) => transformNumericKeysToArray(obj[key]));
     }
 
-    // Recursively apply transformation to each property
     for (const key in obj) {
         if (obj.hasOwnProperty(key)) {
             obj[key] = transformNumericKeysToArray(obj[key]);
diff --git a/src/libs/ExportOnyxState/index.native.ts b/src/libs/ExportOnyxState/index.native.ts
index bc32b29bc2ab..8defb3be6934 100644
--- a/src/libs/ExportOnyxState/index.native.ts
+++ b/src/libs/ExportOnyxState/index.native.ts
@@ -12,8 +12,13 @@ const readFromOnyxDatabase = () =>
         db.executeAsync(query, []).then(({rows}) => {
             // eslint-disable-next-line no-underscore-dangle, @typescript-eslint/no-unsafe-member-access
             const result = rows?._array.map((row) => ({[row?.record_key]: JSON.parse(row?.valueJSON as string) as unknown}));
+            const resultObject = result?.reduce((acc: Record<string, unknown>, item: Record<string, unknown>) => {
+                const key = Object.keys(item)[0];
+                acc[key] = item[key];
+                return acc;
+            }, {} as Record<string, unknown>);
 
-            resolve(result);
+            resolve(resultObject);
         });
     });
 

From 024b4a268b3869d11d484f7d993c837285caf7da Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 21 Aug 2024 10:36:36 +0200
Subject: [PATCH 09/42] fix: refreshing page

---
 src/Expensify.tsx                                    | 5 -----
 src/pages/settings/Troubleshoot/TroubleshootPage.tsx | 2 --
 2 files changed, 7 deletions(-)

diff --git a/src/Expensify.tsx b/src/Expensify.tsx
index a512cf5e2eda..04aa52106eb5 100644
--- a/src/Expensify.tsx
+++ b/src/Expensify.tsx
@@ -55,11 +55,6 @@ Onyx.registerLogger(({level, message}) => {
     }
 });
 
-// This is supposed to restart to the initial state
-Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
-    App.openApp();
-});
-
 type ExpensifyOnyxProps = {
     /** Whether the app is waiting for the server's response to determine if a room is public */
     isCheckingPublicRoom: OnyxEntry<boolean>;
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index f085b454ed81..2cf7e0705809 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -53,8 +53,6 @@ type TroubleshootPageOnyxProps = {
 
 type TroubleshootPageProps = TroubleshootPageOnyxProps;
 
-Network.setShouldForceOffline(false);
-
 function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();

From df69d08e8ec44eae86ed9f8a1d6a584ed26d4190 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 2 Sep 2024 15:21:29 +0200
Subject: [PATCH 10/42] align import button on web to be a menu item

---
 src/components/OnyxStateImport/index.tsx      | 13 ++++++++----
 .../Troubleshoot/TroubleshootPage.tsx         | 21 +------------------
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
index b6afb19c7bfa..8bc1b941e5e2 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/OnyxStateImport/index.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import Onyx from 'react-native-onyx';
 import AttachmentPicker from '@components/AttachmentPicker';
-import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {KEYS_TO_PRESERVE} from '@libs/actions/App';
 import Navigation from '@libs/Navigation/Navigation';
-import App from '@src/App';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
@@ -36,12 +37,16 @@ function transformNumericKeysToArray(obj) {
 
 export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
     return (
         <AttachmentPicker>
             {({openPicker}) => {
                 return (
-                    <Button
-                        text={translate('initialSettingsPage.troubleshoot.importOnyxState')}
+                    <MenuItem
+                        icon={Expensicons.Upload}
+                        title={translate('initialSettingsPage.troubleshoot.importOnyxState')}
+                        wrapperStyle={[styles.sectionMenuItemTopDescription]}
                         onPress={() => {
                             // TODO should directly use 'react-native-document-picker'
                             openPicker({
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index c97b5b086a2f..00f7cf6e2f34 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -1,11 +1,8 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
-import RNFS from 'react-native-fs';
 import Onyx, {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {SvgProps} from 'react-native-svg';
-import AttachmentPicker from '@components/AttachmentPicker';
-import Button from '@components/Button';
 import ClientSideLoggingToolMenu from '@components/ClientSideLoggingToolMenu';
 import ConfirmModal from '@components/ConfirmModal';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
@@ -105,14 +102,6 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
             .reverse();
     }, [waitForNavigate, exportOnyxState, shouldStoreLogs, translate, styles.sectionMenuItemTopDescription]);
 
-    const resetToOriginalState = () => {
-        Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: false}).then(() => {
-            Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
-                App.openApp();
-            });
-        });
-    };
-
     return (
         <ScreenWrapper
             shouldEnablePickerAvoiding={false}
@@ -150,15 +139,6 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
                         )}
                     >
                         <View style={[styles.flex1, styles.mt5]}>
-                            <View>
-                                <OnyxStateImport setIsLoading={setIsLoading} />
-                            </View>
-                            <View style={styles.mt5}>
-                                <Button
-                                    text={translate('initialSettingsPage.troubleshoot.resetToOriginalState')}
-                                    onPress={resetToOriginalState}
-                                />
-                            </View>
                             <View>
                                 <ClientSideLoggingToolMenu />
                                 <TestToolRow title={translate('initialSettingsPage.troubleshoot.maskExportOnyxStateData')}>
@@ -169,6 +149,7 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
                                     />
                                 </TestToolRow>
                             </View>
+                            <OnyxStateImport setIsLoading={setIsLoading} />
                             <MenuItemList
                                 menuItems={menuItems}
                                 shouldUseSingleExecution

From cc26c1344855929720b99e1de1eb9e62bdaeb628 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 2 Sep 2024 15:37:24 +0200
Subject: [PATCH 11/42] align import onyx state button on mobile as menu item

---
 src/components/OnyxStateImport/index.native.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
index 6a2c5e704889..8183f4cd7f44 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -2,8 +2,10 @@ import React, {useState} from 'react';
 import RNFS from 'react-native-fs';
 import Onyx from 'react-native-onyx';
 import AttachmentPicker from '@components/AttachmentPicker';
-import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {KEYS_TO_PRESERVE} from '@libs/actions/App';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -104,6 +106,7 @@ function applyStateInChunks(state: Record<string, unknown>) {
 
 export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
     const [, setError] = useState(null);
 
     const handleFileRead = (fileUri: string) => {
@@ -145,8 +148,10 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
         <AttachmentPicker>
             {({openPicker}) => {
                 return (
-                    <Button
-                        text={translate('initialSettingsPage.troubleshoot.importOnyxState')}
+                    <MenuItem
+                        icon={Expensicons.Upload}
+                        title={translate('initialSettingsPage.troubleshoot.importOnyxState')}
+                        wrapperStyle={[styles.sectionMenuItemTopDescription]}
                         onPress={() => {
                             // TODO should directly use 'react-native-document-picker'
                             openPicker({

From f2c80c8fa881eb497f0016fc2b0f5df906a6ef08 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 9 Sep 2024 11:57:39 +0200
Subject: [PATCH 12/42] adjust transformNumericKeysToArray function usage

---
 .../OnyxStateImport/index.native.tsx          | 33 +------
 src/components/OnyxStateImport/index.tsx      | 96 ++++++++-----------
 src/components/OnyxStateImport/utils.ts       | 37 +++++++
 .../Troubleshoot/TroubleshootPage.tsx         |  2 -
 4 files changed, 76 insertions(+), 92 deletions(-)
 create mode 100644 src/components/OnyxStateImport/utils.ts

diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
index 8183f4cd7f44..521fd9985e54 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -10,42 +10,11 @@ import {KEYS_TO_PRESERVE} from '@libs/actions/App';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import transformNumericKeysToArray from './utils';
 
 // List of Onyx keys from the .txt file we want to omit for the local override
 const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
 
-function transformNumericKeysToArray(obj: unknown): unknown {
-    if (typeof obj !== 'object' || obj === null) {
-        return obj;
-    }
-
-    if (Array.isArray(obj)) {
-        return obj.map(transformNumericKeysToArray);
-    }
-
-    const keys = Object.keys(obj);
-    const length = keys.length;
-    let allKeysAreNumericAndSequential = true;
-
-    for (let i = 0; i < length; i++) {
-        const key = keys[i];
-        if (parseInt(key, 10) !== i) {
-            allKeysAreNumericAndSequential = false;
-            break;
-        }
-    }
-
-    if (allKeysAreNumericAndSequential) {
-        return keys.map((key) => transformNumericKeysToArray(obj[key]));
-    }
-
-    for (const key of keys) {
-        obj[key] = transformNumericKeysToArray(obj[key]);
-    }
-
-    return obj;
-}
-
 function readFileInChunks(fileUri: string, chunkSize = 1024 * 1024) {
     console.log('File URI:', fileUri); // Log the file URI
     const filePath = decodeURIComponent(fileUri.replace('file://', ''));
diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
index 8bc1b941e5e2..02b125659b38 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/OnyxStateImport/index.tsx
@@ -1,43 +1,60 @@
 import React from 'react';
 import Onyx from 'react-native-onyx';
+import type {FileObject} from '@components/AttachmentModal';
 import AttachmentPicker from '@components/AttachmentPicker';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {KEYS_TO_PRESERVE} from '@libs/actions/App';
+import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import transformNumericKeysToArray from './utils';
 
 // List of Onyx keys from the .txt file we want to keep for the local override
 const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
 
-function transformNumericKeysToArray(obj) {
-    if (typeof obj !== 'object' || obj === null) {
-        return obj;
-    }
+export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
 
-    const keys = Object.keys(obj);
-    const allKeysAreNumeric = keys.every((key) => !Number.isNaN(key));
-    const keysAreSequential = keys.every((key, index) => parseInt(key) === index);
+    const onExportFilePicked = (file: FileObject) => {
+        if (!file.uri) {
+            return;
+        }
 
-    if (allKeysAreNumeric && keysAreSequential) {
-        return keys.map((key) => transformNumericKeysToArray(obj[key]));
-    }
+        const reader = new FileReader();
 
-    for (const key in obj) {
-        if (obj.hasOwnProperty(key)) {
-            obj[key] = transformNumericKeysToArray(obj[key]);
-        }
-    }
+        reader.readAsText(file);
 
-    return obj;
-}
+        reader.onload = (e) => {
+            setIsLoading(true);
+            const fileContent = e.target?.result as string;
+            const importedState = JSON.parse(fileContent) as Record<string, unknown>;
+            const parsedState = {...importedState};
 
-export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
+            Object.keys(parsedState).forEach((key) => {
+                const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
+
+                if (shouldOmit) {
+                    delete parsedState[key];
+                }
+            });
+            const cleanState = transformNumericKeysToArray(parsedState);
+            setShouldForceOffline(true);
+            Onyx.clear(KEYS_TO_PRESERVE).then(() => {
+                Onyx.multiSet(cleanState)
+                    .then(() => {
+                        Navigation.navigate(ROUTES.HOME);
+                    })
+                    .finally(() => {
+                        setIsLoading(false);
+                    });
+            });
+        };
+    };
 
     return (
         <AttachmentPicker>
@@ -50,44 +67,7 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                         onPress={() => {
                             // TODO should directly use 'react-native-document-picker'
                             openPicker({
-                                onPicked: (file) => {
-                                    if (!file.uri) {
-                                        return;
-                                    }
-                                    console.log('file web', file);
-                                    const reader = new FileReader();
-                                    reader.onload = (e) => {
-                                        setIsLoading(true);
-                                        const fileContent = e.target?.result;
-                                        const importedState = JSON.parse(fileContent);
-                                        const parsedState = {...importedState};
-
-                                        Object.keys(parsedState).forEach((key) => {
-                                            const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
-
-                                            if (shouldOmit) {
-                                                delete parsedState[key];
-                                            }
-                                        });
-
-                                        const t = transformNumericKeysToArray(parsedState);
-
-                                        Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
-                                            Onyx.clear(KEYS_TO_PRESERVE).then(() => {
-                                                Onyx.multiSet(t)
-                                                    .then(() => {
-                                                        console.log('Applied imported state.');
-                                                        Navigation.navigate(ROUTES.HOME);
-                                                    })
-                                                    .finally(() => {
-                                                        setIsLoading(false);
-                                                    });
-                                            });
-                                        });
-                                    };
-
-                                    reader.readAsText(file);
-                                },
+                                onPicked: onExportFilePicked,
                             });
                         }}
                     />
diff --git a/src/components/OnyxStateImport/utils.ts b/src/components/OnyxStateImport/utils.ts
new file mode 100644
index 000000000000..67f7265195a0
--- /dev/null
+++ b/src/components/OnyxStateImport/utils.ts
@@ -0,0 +1,37 @@
+type UnknownRecord = Record<string, unknown> | unknown[];
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && !Array.isArray(value) && value !== null;
+}
+
+function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord {
+    const dataCopy = data;
+    if (typeof dataCopy !== 'object' || dataCopy === null) {
+        return dataCopy;
+    }
+
+    const keys = Object.keys(dataCopy);
+    const allKeysAreNumeric = keys.every((key) => !Number.isNaN(key));
+    const keysAreSequential = keys.every((key, index) => parseInt(key, 10) === index);
+
+    if (allKeysAreNumeric && keysAreSequential) {
+        return keys.map((key) => {
+            if (isRecord(dataCopy)) {
+                return transformNumericKeysToArray(dataCopy[key] as UnknownRecord);
+            }
+            return dataCopy;
+        });
+    }
+
+    if (isRecord(dataCopy)) {
+        for (const key in dataCopy) {
+            if (key in dataCopy) {
+                dataCopy[key] = transformNumericKeysToArray(dataCopy[key] as UnknownRecord);
+            }
+        }
+    }
+
+    return dataCopy;
+}
+
+export default transformNumericKeysToArray;
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index 00f7cf6e2f34..030ee77dfb6a 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -27,10 +27,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import {setShouldMaskOnyxState} from '@libs/actions/MaskOnyx';
 import ExportOnyxState from '@libs/ExportOnyxState';
-import localFileDownload from '@libs/localFileDownload';
 import Navigation from '@libs/Navigation/Navigation';
 import * as App from '@userActions/App';
-import * as Network from '@userActions/Network';
 import * as Report from '@userActions/Report';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';

From 158834062d3a74f81c5bf3c4ea8d4db903983f85 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 9 Sep 2024 12:44:33 +0200
Subject: [PATCH 13/42] adjust web implementation

---
 src/components/OnyxStateImport/index.tsx | 20 ++++++++------------
 src/components/OnyxStateImport/utils.ts  |  7 ++++++-
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
index 02b125659b38..38bf1b94e37d 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/OnyxStateImport/index.tsx
@@ -9,12 +9,9 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {KEYS_TO_PRESERVE} from '@libs/actions/App';
 import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
-import ONYXKEYS from '@src/ONYXKEYS';
+import type {OnyxValues} from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import transformNumericKeysToArray from './utils';
-
-// List of Onyx keys from the .txt file we want to keep for the local override
-const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
+import {keysToOmit, transformNumericKeysToArray} from './utils';
 
 export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
     const {translate} = useLocalize();
@@ -25,13 +22,12 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
             return;
         }
 
-        const reader = new FileReader();
-
-        reader.readAsText(file);
+        const blob = new Blob([file as BlobPart]);
+        const response = new Response(blob);
 
-        reader.onload = (e) => {
+        response.text().then((text) => {
             setIsLoading(true);
-            const fileContent = e.target?.result as string;
+            const fileContent = text;
             const importedState = JSON.parse(fileContent) as Record<string, unknown>;
             const parsedState = {...importedState};
 
@@ -42,7 +38,7 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                     delete parsedState[key];
                 }
             });
-            const cleanState = transformNumericKeysToArray(parsedState);
+            const cleanState = transformNumericKeysToArray(parsedState) as OnyxValues;
             setShouldForceOffline(true);
             Onyx.clear(KEYS_TO_PRESERVE).then(() => {
                 Onyx.multiSet(cleanState)
@@ -53,7 +49,7 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                         setIsLoading(false);
                     });
             });
-        };
+        });
     };
 
     return (
diff --git a/src/components/OnyxStateImport/utils.ts b/src/components/OnyxStateImport/utils.ts
index 67f7265195a0..a402b301e15e 100644
--- a/src/components/OnyxStateImport/utils.ts
+++ b/src/components/OnyxStateImport/utils.ts
@@ -1,9 +1,14 @@
+import ONYXKEYS from '@src/ONYXKEYS';
+
 type UnknownRecord = Record<string, unknown> | unknown[];
 
 function isRecord(value: unknown): value is Record<string, unknown> {
     return typeof value === 'object' && !Array.isArray(value) && value !== null;
 }
 
+// List of Onyx keys from the .txt file we want to keep for the local override
+const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
+
 function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord {
     const dataCopy = data;
     if (typeof dataCopy !== 'object' || dataCopy === null) {
@@ -34,4 +39,4 @@ function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord {
     return dataCopy;
 }
 
-export default transformNumericKeysToArray;
+export {keysToOmit, transformNumericKeysToArray};

From fb3666b9a6b74585229d1b14b5acef07afb40cac Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 9 Sep 2024 14:21:52 +0200
Subject: [PATCH 14/42] adjust mobile import, cleanup mobile implementation

---
 .../OnyxStateImport/index.native.tsx          | 88 ++++++++-----------
 src/components/OnyxStateImport/index.tsx      |  1 -
 src/components/OnyxStateImport/utils.ts       |  5 +-
 3 files changed, 38 insertions(+), 56 deletions(-)

diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
index 521fd9985e54..a49a5f042f17 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -1,6 +1,8 @@
-import React, {useState} from 'react';
+import React from 'react';
 import RNFS from 'react-native-fs';
 import Onyx from 'react-native-onyx';
+import type {UnknownRecord} from 'type-fest';
+import type {FileObject} from '@components/AttachmentModal';
 import AttachmentPicker from '@components/AttachmentPicker';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
@@ -8,51 +10,44 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {KEYS_TO_PRESERVE} from '@libs/actions/App';
 import Navigation from '@libs/Navigation/Navigation';
-import ONYXKEYS from '@src/ONYXKEYS';
+import type {OnyxValues} from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import transformNumericKeysToArray from './utils';
+import {keysToOmit, transformNumericKeysToArray} from './utils';
 
-// List of Onyx keys from the .txt file we want to omit for the local override
-const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
+const CHUNK_SIZE = 100;
 
 function readFileInChunks(fileUri: string, chunkSize = 1024 * 1024) {
-    console.log('File URI:', fileUri); // Log the file URI
     const filePath = decodeURIComponent(fileUri.replace('file://', ''));
-    // Check if the file exists
+
     return RNFS.exists(filePath)
         .then((exists) => {
             if (!exists) {
                 throw new Error('File does not exist');
             }
-            console.log('File exists:', exists);
             return RNFS.stat(filePath);
         })
         .then((fileStats) => {
-            console.log('File stats:', fileStats);
             const fileSize = fileStats.size;
             let fileContent = '';
             const promises = [];
 
-            console.log('Start chunking');
+            // Chunk the file into smaller parts to avoid memory issues
             for (let i = 0; i < fileSize; i += chunkSize) {
-                promises.push(
-                    RNFS.read(filePath, chunkSize, i, 'utf8').then((chunk) => {
-                        fileContent += chunk;
-                    }),
-                );
+                promises.push(RNFS.read(filePath, chunkSize, i, 'utf8').then((chunk) => chunk));
             }
-            console.log('end chunking');
 
-            return Promise.all(promises).then(() => fileContent);
+            // After all chunks have been read, join them together
+            return Promise.all(promises).then((chunks) => {
+                fileContent = chunks.join('');
+
+                return fileContent;
+            });
         })
         .catch((error) => {
-            console.error('Error reading file:', error);
             throw error;
         });
 }
 
-const CHUNK_SIZE = 100; // Adjust the chunk size based on your needs
-
 function chunkArray<T>(array: T[], size: number): T[][] {
     const result = [];
     for (let i = 0; i < array.length; i += size) {
@@ -61,13 +56,14 @@ function chunkArray<T>(array: T[], size: number): T[][] {
     return result;
 }
 
-function applyStateInChunks(state: Record<string, unknown>) {
+function applyStateInChunks(state: OnyxValues) {
     const entries = Object.entries(state);
     const chunks = chunkArray(entries, CHUNK_SIZE);
 
     let promise = Promise.resolve();
     chunks.forEach((chunk) => {
-        promise = promise.then(() => Onyx.multiSet(Object.fromEntries(chunk)));
+        const partialOnyxState = Object.fromEntries(chunk) as Partial<OnyxValues>;
+        promise = promise.then(() => Onyx.multiSet(partialOnyxState));
     });
 
     return promise;
@@ -76,39 +72,34 @@ function applyStateInChunks(state: Record<string, unknown>) {
 export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const [, setError] = useState(null);
 
-    const handleFileRead = (fileUri: string) => {
-        console.log('File URI:', fileUri); // Log the file URI
+    const handleFileRead = (file: FileObject) => {
+        if (!file.uri) {
+            return;
+        }
+
         setIsLoading(true);
-        readFileInChunks(fileUri)
+        readFileInChunks(file.uri)
             .then((fileContent) => {
-                const importedState = JSON.parse(fileContent);
-                console.log('Parse imported state');
-                const transformedState = transformNumericKeysToArray(importedState);
-                console.log('Transformed state:');
-                // Only keep the keys that we're interested in
+                const importedState = JSON.parse(fileContent) as UnknownRecord;
+                const transformedState = transformNumericKeysToArray(importedState) as OnyxValues;
+
                 Object.keys(transformedState).forEach((key) => {
                     const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
+
                     if (shouldOmit) {
-                        delete transformedState[key];
+                        delete transformedState[key as keyof OnyxValues];
                     }
                 });
-                console.log('Omgitted keys');
-
-                Onyx.merge(ONYXKEYS.NETWORK, {shouldForceOffline: true}).then(() => {
-                    Onyx.clear(KEYS_TO_PRESERVE).then(() => {
-                        // 4. Apply the new state from the file
-                        applyStateInChunks(transformedState).then(() => {
-                            setIsLoading(false);
-                            console.log('Applied imported state.');
-                            Navigation.navigate(ROUTES.HOME);
-                        });
+
+                Onyx.clear(KEYS_TO_PRESERVE).then(() => {
+                    applyStateInChunks(transformedState).then(() => {
+                        setIsLoading(false);
+                        Navigation.navigate(ROUTES.HOME);
                     });
                 });
             })
-            .catch((err) => {
-                setError(err.message);
+            .finally(() => {
                 setIsLoading(false);
             });
     };
@@ -122,15 +113,8 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                         title={translate('initialSettingsPage.troubleshoot.importOnyxState')}
                         wrapperStyle={[styles.sectionMenuItemTopDescription]}
                         onPress={() => {
-                            // TODO should directly use 'react-native-document-picker'
                             openPicker({
-                                onPicked: (file) => {
-                                    if (!file.uri) {
-                                        return;
-                                    }
-
-                                    handleFileRead(file.uri);
-                                },
+                                onPicked: handleFileRead,
                             });
                         }}
                     />
diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
index 38bf1b94e37d..0d97b2f8452c 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/OnyxStateImport/index.tsx
@@ -61,7 +61,6 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                         title={translate('initialSettingsPage.troubleshoot.importOnyxState')}
                         wrapperStyle={[styles.sectionMenuItemTopDescription]}
                         onPress={() => {
-                            // TODO should directly use 'react-native-document-picker'
                             openPicker({
                                 onPicked: onExportFilePicked,
                             });
diff --git a/src/components/OnyxStateImport/utils.ts b/src/components/OnyxStateImport/utils.ts
index a402b301e15e..e4f5c440afdb 100644
--- a/src/components/OnyxStateImport/utils.ts
+++ b/src/components/OnyxStateImport/utils.ts
@@ -1,7 +1,6 @@
+import type {UnknownRecord} from 'type-fest';
 import ONYXKEYS from '@src/ONYXKEYS';
 
-type UnknownRecord = Record<string, unknown> | unknown[];
-
 function isRecord(value: unknown): value is Record<string, unknown> {
     return typeof value === 'object' && !Array.isArray(value) && value !== null;
 }
@@ -9,7 +8,7 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 // List of Onyx keys from the .txt file we want to keep for the local override
 const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
 
-function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord {
+function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord | unknown[] {
     const dataCopy = data;
     if (typeof dataCopy !== 'object' || dataCopy === null) {
         return dataCopy;

From 291402a4435e7ec172dba8182b4b1ce805a729c4 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Tue, 10 Sep 2024 10:29:33 +0200
Subject: [PATCH 15/42] display only file upload on native

---
 .../AttachmentPicker/index.native.tsx         | 22 ++++++++-----------
 src/components/AttachmentPicker/types.ts      |  3 +++
 .../OnyxStateImport/index.native.tsx          |  6 ++++-
 src/components/OnyxStateImport/index.tsx      |  2 +-
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx
index 366366423324..df84f79d118a 100644
--- a/src/components/AttachmentPicker/index.native.tsx
+++ b/src/components/AttachmentPicker/index.native.tsx
@@ -22,12 +22,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type IconAsset from '@src/types/utils/IconAsset';
 import launchCamera from './launchCamera/launchCamera';
-import type BaseAttachmentPickerProps from './types';
-
-type AttachmentPickerProps = BaseAttachmentPickerProps & {
-    /** If this value is true, then we exclude Camera option. */
-    shouldHideCameraOption?: boolean;
-};
+import type AttachmentPickerProps from './types';
 
 type Item = {
     /** The icon associated with the item. */
@@ -112,7 +107,7 @@ const getDataForUpload = (fileData: FileResponse): Promise<FileObject> => {
  * a callback. This is the ios/android implementation
  * opening a modal with attachment options
  */
-function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, shouldHideCameraOption = false}: AttachmentPickerProps) {
+function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, shouldHideCameraOption = false, shouldHideGalleryOption = false}: AttachmentPickerProps) {
     const styles = useThemeStyles();
     const [isVisible, setIsVisible] = useState(false);
 
@@ -123,7 +118,6 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s
 
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
-
     /**
      * A generic handling when we don't know the exact reason for an error
      */
@@ -218,17 +212,19 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s
 
     const menuItemData: Item[] = useMemo(() => {
         const data: Item[] = [
-            {
-                icon: Expensicons.Gallery,
-                textTranslationKey: 'attachmentPicker.chooseFromGallery',
-                pickAttachment: () => showImagePicker(launchImageLibrary),
-            },
             {
                 icon: Expensicons.Paperclip,
                 textTranslationKey: 'attachmentPicker.chooseDocument',
                 pickAttachment: showDocumentPicker,
             },
         ];
+        if (!shouldHideGalleryOption) {
+            data.unshift({
+                icon: Expensicons.Gallery,
+                textTranslationKey: 'attachmentPicker.chooseFromGallery',
+                pickAttachment: () => showImagePicker(launchImageLibrary),
+            });
+        }
         if (!shouldHideCameraOption) {
             data.unshift({
                 icon: Expensicons.Camera,
diff --git a/src/components/AttachmentPicker/types.ts b/src/components/AttachmentPicker/types.ts
index 057ec72de27e..9dbd52d0d3f9 100644
--- a/src/components/AttachmentPicker/types.ts
+++ b/src/components/AttachmentPicker/types.ts
@@ -42,6 +42,9 @@ type AttachmentPickerProps = {
     type?: ValueOf<typeof CONST.ATTACHMENT_PICKER_TYPE>;
 
     acceptedFileTypes?: Array<ValueOf<typeof CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS>>;
+
+    shouldHideCameraOption?: boolean;
+    shouldHideGalleryOption?: boolean;
 };
 
 export default AttachmentPickerProps;
diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
index a49a5f042f17..32481adbbb5f 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -105,7 +105,11 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
     };
 
     return (
-        <AttachmentPicker>
+        <AttachmentPicker
+            acceptedFileTypes={['text']}
+            shouldHideCameraOption
+            shouldHideGalleryOption
+        >
             {({openPicker}) => {
                 return (
                     <MenuItem
diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
index 0d97b2f8452c..589840bb620a 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/OnyxStateImport/index.tsx
@@ -53,7 +53,7 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
     };
 
     return (
-        <AttachmentPicker>
+        <AttachmentPicker acceptedFileTypes={['text']}>
             {({openPicker}) => {
                 return (
                     <MenuItem

From 077432c4d41f8b73a16b152a6c3fc8e22e117fd3 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 11 Sep 2024 10:20:40 +0200
Subject: [PATCH 16/42] force offline when importing on mobile

---
 src/components/AttachmentPicker/index.native.tsx | 2 +-
 src/components/OnyxStateImport/index.native.tsx  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx
index df84f79d118a..9886af22f3cc 100644
--- a/src/components/AttachmentPicker/index.native.tsx
+++ b/src/components/AttachmentPicker/index.native.tsx
@@ -234,7 +234,7 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s
         }
 
         return data;
-    }, [showDocumentPicker, showImagePicker, shouldHideCameraOption]);
+    }, [showDocumentPicker, shouldHideGalleryOption, shouldHideCameraOption, showImagePicker]);
 
     const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: menuItemData.length - 1, isActive: isVisible});
 
diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
index 32481adbbb5f..d9c15a634697 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -9,6 +9,7 @@ import MenuItem from '@components/MenuItem';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {KEYS_TO_PRESERVE} from '@libs/actions/App';
+import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -91,7 +92,7 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                         delete transformedState[key as keyof OnyxValues];
                     }
                 });
-
+                setShouldForceOffline(true);
                 Onyx.clear(KEYS_TO_PRESERVE).then(() => {
                     applyStateInChunks(transformedState).then(() => {
                         setIsLoading(false);

From 65983c05b4c537a8cba65e5eb6095f48a7dfcc60 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 11 Sep 2024 11:05:13 +0200
Subject: [PATCH 17/42] reduce diff across platforms

---
 .../OnyxStateImport/index.native.tsx          | 15 ++----------
 src/components/OnyxStateImport/index.tsx      | 20 ++++------------
 src/components/OnyxStateImport/utils.ts       | 24 +++++++++++++++----
 3 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
index d9c15a634697..18f2ed9e9e6f 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import RNFS from 'react-native-fs';
 import Onyx from 'react-native-onyx';
-import type {UnknownRecord} from 'type-fest';
 import type {FileObject} from '@components/AttachmentModal';
 import AttachmentPicker from '@components/AttachmentPicker';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -13,7 +12,7 @@ import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {keysToOmit, transformNumericKeysToArray} from './utils';
+import {cleanAndTransformState} from './utils';
 
 const CHUNK_SIZE = 100;
 
@@ -82,20 +81,10 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
         setIsLoading(true);
         readFileInChunks(file.uri)
             .then((fileContent) => {
-                const importedState = JSON.parse(fileContent) as UnknownRecord;
-                const transformedState = transformNumericKeysToArray(importedState) as OnyxValues;
-
-                Object.keys(transformedState).forEach((key) => {
-                    const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
-
-                    if (shouldOmit) {
-                        delete transformedState[key as keyof OnyxValues];
-                    }
-                });
+                const transformedState = cleanAndTransformState<OnyxValues>(fileContent);
                 setShouldForceOffline(true);
                 Onyx.clear(KEYS_TO_PRESERVE).then(() => {
                     applyStateInChunks(transformedState).then(() => {
-                        setIsLoading(false);
                         Navigation.navigate(ROUTES.HOME);
                     });
                 });
diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
index 589840bb620a..2ae5ca7729cf 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/OnyxStateImport/index.tsx
@@ -11,13 +11,13 @@ import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {keysToOmit, transformNumericKeysToArray} from './utils';
+import {cleanAndTransformState} from './utils';
 
 export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
-    const onExportFilePicked = (file: FileObject) => {
+    const handleFileRead = (file: FileObject) => {
         if (!file.uri) {
             return;
         }
@@ -28,20 +28,10 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
         response.text().then((text) => {
             setIsLoading(true);
             const fileContent = text;
-            const importedState = JSON.parse(fileContent) as Record<string, unknown>;
-            const parsedState = {...importedState};
-
-            Object.keys(parsedState).forEach((key) => {
-                const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
-
-                if (shouldOmit) {
-                    delete parsedState[key];
-                }
-            });
-            const cleanState = transformNumericKeysToArray(parsedState) as OnyxValues;
+            const transformedState = cleanAndTransformState<OnyxValues>(fileContent);
             setShouldForceOffline(true);
             Onyx.clear(KEYS_TO_PRESERVE).then(() => {
-                Onyx.multiSet(cleanState)
+                Onyx.multiSet(transformedState)
                     .then(() => {
                         Navigation.navigate(ROUTES.HOME);
                     })
@@ -62,7 +52,7 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                         wrapperStyle={[styles.sectionMenuItemTopDescription]}
                         onPress={() => {
                             openPicker({
-                                onPicked: onExportFilePicked,
+                                onPicked: handleFileRead,
                             });
                         }}
                     />
diff --git a/src/components/OnyxStateImport/utils.ts b/src/components/OnyxStateImport/utils.ts
index e4f5c440afdb..c1fbcc4d508e 100644
--- a/src/components/OnyxStateImport/utils.ts
+++ b/src/components/OnyxStateImport/utils.ts
@@ -1,13 +1,13 @@
 import type {UnknownRecord} from 'type-fest';
 import ONYXKEYS from '@src/ONYXKEYS';
 
+// List of Onyx keys from the .txt file we want to keep for the local override
+const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
+
 function isRecord(value: unknown): value is Record<string, unknown> {
     return typeof value === 'object' && !Array.isArray(value) && value !== null;
 }
 
-// List of Onyx keys from the .txt file we want to keep for the local override
-const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
-
 function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord | unknown[] {
     const dataCopy = data;
     if (typeof dataCopy !== 'object' || dataCopy === null) {
@@ -38,4 +38,20 @@ function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord | unkno
     return dataCopy;
 }
 
-export {keysToOmit, transformNumericKeysToArray};
+function cleanAndTransformState<T>(state: string): T {
+    const parsedState = JSON.parse(state) as UnknownRecord;
+
+    Object.keys(parsedState).forEach((key) => {
+        const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
+
+        if (shouldOmit) {
+            delete parsedState[key];
+        }
+    });
+
+    const transformedState = transformNumericKeysToArray(parsedState) as T;
+
+    return transformedState;
+}
+
+export {transformNumericKeysToArray, cleanAndTransformState};

From 33975264a664f0dda5ce7ce50f4ec869d4c83ed8 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 11 Sep 2024 12:24:50 +0200
Subject: [PATCH 18/42] add onyx key to watch if state is imported

---
 src/ONYXKEYS.ts                                      |  4 ++++
 src/components/OnyxStateImport/index.native.tsx      |  3 ++-
 src/components/OnyxStateImport/index.tsx             |  3 ++-
 src/libs/actions/App.ts                              |  5 +++++
 src/pages/settings/Troubleshoot/TroubleshootPage.tsx | 11 ++++++++++-
 5 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 707c66b89c8c..15ebe289e6a7 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -416,6 +416,9 @@ const ONYXKEYS = {
     /** Stores the route to open after changing app permission from settings */
     LAST_ROUTE: 'lastRoute',
 
+    /** Stores the information if user loaded the Onyx state through Import feature  */
+    IS_USING_IMPORTED_STATE: 'isUsingImportedState',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -953,6 +956,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.APPROVAL_WORKFLOW]: OnyxTypes.ApprovalWorkflowOnyx;
     [ONYXKEYS.IMPORTED_SPREADSHEET]: OnyxTypes.ImportedSpreadsheet;
     [ONYXKEYS.LAST_ROUTE]: string;
+    [ONYXKEYS.IS_USING_IMPORTED_STATE]: boolean;
 };
 
 type OnyxValues = OnyxValuesMapping & OnyxCollectionValuesMapping & OnyxFormValuesMapping & OnyxFormDraftValuesMapping;
diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
index 18f2ed9e9e6f..5b71c40b6c46 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -7,7 +7,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {KEYS_TO_PRESERVE} from '@libs/actions/App';
+import {KEYS_TO_PRESERVE, setIsUsingImportedState} from '@libs/actions/App';
 import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
 import type {OnyxValues} from '@src/ONYXKEYS';
@@ -85,6 +85,7 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                 setShouldForceOffline(true);
                 Onyx.clear(KEYS_TO_PRESERVE).then(() => {
                     applyStateInChunks(transformedState).then(() => {
+                        setIsUsingImportedState(true);
                         Navigation.navigate(ROUTES.HOME);
                     });
                 });
diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
index 2ae5ca7729cf..754a04c3bc12 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/OnyxStateImport/index.tsx
@@ -6,7 +6,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {KEYS_TO_PRESERVE} from '@libs/actions/App';
+import {KEYS_TO_PRESERVE, setIsUsingImportedState} from '@libs/actions/App';
 import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
 import type {OnyxValues} from '@src/ONYXKEYS';
@@ -33,6 +33,7 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
             Onyx.clear(KEYS_TO_PRESERVE).then(() => {
                 Onyx.multiSet(transformedState)
                     .then(() => {
+                        setIsUsingImportedState(true);
                         Navigation.navigate(ROUTES.HOME);
                     })
                     .finally(() => {
diff --git a/src/libs/actions/App.ts b/src/libs/actions/App.ts
index a0f60752913e..8fa138e2c967 100644
--- a/src/libs/actions/App.ts
+++ b/src/libs/actions/App.ts
@@ -501,6 +501,10 @@ function updateLastRoute(screen: string) {
     Onyx.set(ONYXKEYS.LAST_ROUTE, screen);
 }
 
+function setIsUsingImportedState(isUsingImportedState: boolean) {
+    Onyx.set(ONYXKEYS.IS_USING_IMPORTED_STATE, isUsingImportedState);
+}
+
 export {
     setLocale,
     setLocaleAndNavigate,
@@ -519,5 +523,6 @@ export {
     createWorkspaceWithPolicyDraftAndNavigateToIt,
     updateLastVisitedPath,
     updateLastRoute,
+    setIsUsingImportedState,
     KEYS_TO_PRESERVE,
 };
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index 030ee77dfb6a..6af174e8b357 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -26,6 +26,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import {setShouldMaskOnyxState} from '@libs/actions/MaskOnyx';
+import {setShouldForceOffline} from '@libs/actions/Network';
 import ExportOnyxState from '@libs/ExportOnyxState';
 import Navigation from '@libs/Navigation/Navigation';
 import * as App from '@userActions/App';
@@ -44,11 +45,12 @@ type BaseMenuItem = {
 type TroubleshootPageOnyxProps = {
     shouldStoreLogs: OnyxEntry<boolean>;
     shouldMaskOnyxState: boolean;
+    isUsingImportedState: OnyxEntry<boolean>;
 };
 
 type TroubleshootPageProps = TroubleshootPageOnyxProps;
 
-function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPageProps) {
+function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState, isUsingImportedState}: TroubleshootPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {isProduction} = useEnvironment();
@@ -163,6 +165,10 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
                                 onConfirm={() => {
                                     setIsConfirmationModalVisible(false);
                                     Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
+                                        // If using imported state, we should stop forcing offline mode so that the app can re-fetch the network
+                                        if (isUsingImportedState) {
+                                            setShouldForceOffline(false);
+                                        }
                                         App.openApp();
                                     });
                                 }}
@@ -189,4 +195,7 @@ export default withOnyx<TroubleshootPageProps, TroubleshootPageOnyxProps>({
         key: ONYXKEYS.SHOULD_MASK_ONYX_STATE,
         selector: (shouldMaskOnyxState) => shouldMaskOnyxState ?? true,
     },
+    isUsingImportedState: {
+        key: ONYXKEYS.IS_USING_IMPORTED_STATE,
+    },
 })(TroubleshootPage);

From 21205ae9512e55701e028f298ed6f93314a695ff Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 11 Sep 2024 14:32:20 +0200
Subject: [PATCH 19/42] make sure loader is hidden

---
 src/components/OnyxStateImport/index.native.tsx      | 6 +++++-
 src/components/OnyxStateImport/index.tsx             | 8 ++++++--
 src/pages/settings/Troubleshoot/TroubleshootPage.tsx | 5 ++++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/OnyxStateImport/index.native.tsx
index 5b71c40b6c46..a3665153551a 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/OnyxStateImport/index.native.tsx
@@ -69,7 +69,7 @@ function applyStateInChunks(state: OnyxValues) {
     return promise;
 }
 
-export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
+export default function OnyxStateImport({setIsLoading, isLoading}: {setIsLoading: (isLoading: boolean) => void; isLoading: boolean}) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
@@ -93,6 +93,10 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
             .finally(() => {
                 setIsLoading(false);
             });
+
+        if (isLoading) {
+            setIsLoading(false);
+        }
     };
 
     return (
diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/OnyxStateImport/index.tsx
index 754a04c3bc12..bc0782a5980d 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/OnyxStateImport/index.tsx
@@ -13,7 +13,7 @@ import type {OnyxValues} from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {cleanAndTransformState} from './utils';
 
-export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoading: boolean) => void}) {
+export default function OnyxStateImport({setIsLoading, isLoading}: {setIsLoading: (isLoading: boolean) => void; isLoading: boolean}) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
@@ -22,11 +22,11 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
             return;
         }
 
+        setIsLoading(true);
         const blob = new Blob([file as BlobPart]);
         const response = new Response(blob);
 
         response.text().then((text) => {
-            setIsLoading(true);
             const fileContent = text;
             const transformedState = cleanAndTransformState<OnyxValues>(fileContent);
             setShouldForceOffline(true);
@@ -41,6 +41,10 @@ export default function OnyxStateImport({setIsLoading}: {setIsLoading: (isLoadin
                     });
             });
         });
+
+        if (isLoading) {
+            setIsLoading(false);
+        }
     };
 
     return (
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index 6af174e8b357..b29897e0f1e8 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -149,7 +149,10 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState, isUsingImported
                                     />
                                 </TestToolRow>
                             </View>
-                            <OnyxStateImport setIsLoading={setIsLoading} />
+                            <OnyxStateImport
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                            />
                             <MenuItemList
                                 menuItems={menuItems}
                                 shouldUseSingleExecution

From ce1ae7e6dd485257f3038ee532b9ef2f51f2e488 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 11 Sep 2024 14:58:24 +0200
Subject: [PATCH 20/42] code cleanup

---
 src/components/AttachmentPicker/index.native.tsx      |  1 +
 src/components/AttachmentPicker/types.ts              |  1 +
 .../index.native.tsx                                  |  3 ++-
 .../{OnyxStateImport => ImportOnyxState}/index.tsx    |  3 ++-
 src/components/ImportOnyxState/types.ts               |  6 ++++++
 .../{OnyxStateImport => ImportOnyxState}/utils.ts     |  0
 src/libs/actions/PersistedRequests.ts                 | 11 +----------
 src/pages/settings/Troubleshoot/TroubleshootPage.tsx  |  4 ++--
 8 files changed, 15 insertions(+), 14 deletions(-)
 rename src/components/{OnyxStateImport => ImportOnyxState}/index.native.tsx (96%)
 rename src/components/{OnyxStateImport => ImportOnyxState}/index.tsx (94%)
 create mode 100644 src/components/ImportOnyxState/types.ts
 rename src/components/{OnyxStateImport => ImportOnyxState}/utils.ts (100%)

diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx
index 9886af22f3cc..17aa4ad16903 100644
--- a/src/components/AttachmentPicker/index.native.tsx
+++ b/src/components/AttachmentPicker/index.native.tsx
@@ -118,6 +118,7 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s
 
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+
     /**
      * A generic handling when we don't know the exact reason for an error
      */
diff --git a/src/components/AttachmentPicker/types.ts b/src/components/AttachmentPicker/types.ts
index 9dbd52d0d3f9..55882eee93b4 100644
--- a/src/components/AttachmentPicker/types.ts
+++ b/src/components/AttachmentPicker/types.ts
@@ -44,6 +44,7 @@ type AttachmentPickerProps = {
     acceptedFileTypes?: Array<ValueOf<typeof CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS>>;
 
     shouldHideCameraOption?: boolean;
+
     shouldHideGalleryOption?: boolean;
 };
 
diff --git a/src/components/OnyxStateImport/index.native.tsx b/src/components/ImportOnyxState/index.native.tsx
similarity index 96%
rename from src/components/OnyxStateImport/index.native.tsx
rename to src/components/ImportOnyxState/index.native.tsx
index a3665153551a..d1b0d1492e94 100644
--- a/src/components/OnyxStateImport/index.native.tsx
+++ b/src/components/ImportOnyxState/index.native.tsx
@@ -12,6 +12,7 @@ import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type ImportOnyxStateProps from './types';
 import {cleanAndTransformState} from './utils';
 
 const CHUNK_SIZE = 100;
@@ -69,7 +70,7 @@ function applyStateInChunks(state: OnyxValues) {
     return promise;
 }
 
-export default function OnyxStateImport({setIsLoading, isLoading}: {setIsLoading: (isLoading: boolean) => void; isLoading: boolean}) {
+export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxStateProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
diff --git a/src/components/OnyxStateImport/index.tsx b/src/components/ImportOnyxState/index.tsx
similarity index 94%
rename from src/components/OnyxStateImport/index.tsx
rename to src/components/ImportOnyxState/index.tsx
index bc0782a5980d..b3f889d32ea4 100644
--- a/src/components/OnyxStateImport/index.tsx
+++ b/src/components/ImportOnyxState/index.tsx
@@ -11,9 +11,10 @@ import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type ImportOnyxStateProps from './types';
 import {cleanAndTransformState} from './utils';
 
-export default function OnyxStateImport({setIsLoading, isLoading}: {setIsLoading: (isLoading: boolean) => void; isLoading: boolean}) {
+export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxStateProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
diff --git a/src/components/ImportOnyxState/types.ts b/src/components/ImportOnyxState/types.ts
new file mode 100644
index 000000000000..8e504c493529
--- /dev/null
+++ b/src/components/ImportOnyxState/types.ts
@@ -0,0 +1,6 @@
+type ImportOnyxStateProps = {
+    isLoading: boolean;
+    setIsLoading: (isLoading: boolean) => void;
+};
+
+export default ImportOnyxStateProps;
diff --git a/src/components/OnyxStateImport/utils.ts b/src/components/ImportOnyxState/utils.ts
similarity index 100%
rename from src/components/OnyxStateImport/utils.ts
rename to src/components/ImportOnyxState/utils.ts
diff --git a/src/libs/actions/PersistedRequests.ts b/src/libs/actions/PersistedRequests.ts
index 677926d73e01..851e53876508 100644
--- a/src/libs/actions/PersistedRequests.ts
+++ b/src/libs/actions/PersistedRequests.ts
@@ -11,9 +11,6 @@ Onyx.connect({
     callback: (val) => (persistedRequests = val ?? []),
 });
 
-function isIterable(obj: any): boolean {
-    return obj != null && typeof obj[Symbol.iterator] === 'function';
-}
 /**
  * This promise is only used by tests. DO NOT USE THIS PROMISE IN THE APPLICATION CODE
  */
@@ -26,13 +23,7 @@ function getLength(): number {
 }
 
 function save(requestToPersist: Request) {
-    let requests: Request[] = [];
-    if (isIterable(persistedRequests)) {
-        requests = [...persistedRequests, requestToPersist];
-    } else {
-        requests = [requestToPersist];
-    }
-
+    const requests = [...persistedRequests, requestToPersist];
     persistedRequests = requests;
     Onyx.set(ONYXKEYS.PERSISTED_REQUESTS, requests).then(() => {
         Log.info(`[SequentialQueue] '${requestToPersist.command}' command queued. Queue length is ${getLength()}`);
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index b29897e0f1e8..b96e927ed2f4 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -9,9 +9,9 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
+import ImportOnyxState from '@components/ImportOnyxState';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
-import OnyxStateImport from '@components/OnyxStateImport';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Section from '@components/Section';
@@ -149,7 +149,7 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState, isUsingImported
                                     />
                                 </TestToolRow>
                             </View>
-                            <OnyxStateImport
+                            <ImportOnyxState
                                 setIsLoading={setIsLoading}
                                 isLoading={isLoading}
                             />

From dbc414a0be19b1d652d9932fc49eab0a112faebb Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 16 Sep 2024 10:41:01 +0200
Subject: [PATCH 21/42] add imported state button for resetting onyx state

---
 src/components/ImportedStateIndicator.tsx     | 34 +++++++++++++++++++
 src/components/ScreenWrapper.tsx              | 21 +++++++++---
 src/languages/en.ts                           |  1 +
 src/languages/es.ts                           |  1 +
 src/libs/actions/App.ts                       | 26 ++++++++++++--
 src/pages/NewChatPage.tsx                     |  8 ++++-
 .../ReportActionCompose.tsx                   | 13 +++++++
 .../Troubleshoot/TroubleshootPage.tsx         |  9 ++---
 src/pages/workspace/WorkspaceNewRoomPage.tsx  | 15 ++++++--
 9 files changed, 111 insertions(+), 17 deletions(-)
 create mode 100644 src/components/ImportedStateIndicator.tsx

diff --git a/src/components/ImportedStateIndicator.tsx b/src/components/ImportedStateIndicator.tsx
new file mode 100644
index 000000000000..f3028f28d62e
--- /dev/null
+++ b/src/components/ImportedStateIndicator.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {clearOnyxAndResetApp} from '@libs/actions/App';
+import ONYXKEYS from '@src/ONYXKEYS';
+import Button from './Button';
+
+function ImportedStateIndicator() {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [isUsingImportedState] = useOnyx(ONYXKEYS.IS_USING_IMPORTED_STATE);
+
+    if (!isUsingImportedState) {
+        return null;
+    }
+
+    return (
+        <View style={[styles.buttonDanger]}>
+            <Button
+                danger
+                small
+                shouldRemoveLeftBorderRadius
+                shouldRemoveRightBorderRadius
+                text={translate('initialSettingsPage.troubleshoot.usingImportedState')}
+                onPress={clearOnyxAndResetApp}
+                textStyles={[styles.fontWeightNormal]}
+            />
+        </View>
+    );
+}
+
+export default ImportedStateIndicator;
diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index 37e2842c0671..9a85e1d3af24 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -22,6 +22,7 @@ import CustomDevMenu from './CustomDevMenu';
 import FocusTrapForScreens from './FocusTrap/FocusTrapForScreen';
 import type FocusTrapForScreenProps from './FocusTrap/FocusTrapForScreen/FocusTrapProps';
 import HeaderGap from './HeaderGap';
+import ImportedStateIndicator from './ImportedStateIndicator';
 import KeyboardAvoidingView from './KeyboardAvoidingView';
 import OfflineIndicator from './OfflineIndicator';
 import SafeAreaConsumer from './SafeAreaConsumer';
@@ -285,12 +286,22 @@ function ScreenWrapper(
                                                       })
                                                     : children
                                             }
-                                            {isSmallScreenWidth && shouldShowOfflineIndicator && <OfflineIndicator style={offlineIndicatorStyle} />}
+                                            {isSmallScreenWidth && shouldShowOfflineIndicator && (
+                                                <>
+                                                    <OfflineIndicator style={offlineIndicatorStyle} />
+                                                    {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
+                                                    <ImportedStateIndicator />
+                                                </>
+                                            )}
                                             {!shouldUseNarrowLayout && shouldShowOfflineIndicatorInWideScreen && (
-                                                <OfflineIndicator
-                                                    containerStyles={[]}
-                                                    style={[styles.pl5, styles.offlineIndicatorRow, offlineIndicatorStyle]}
-                                                />
+                                                <>
+                                                    <OfflineIndicator
+                                                        containerStyles={[]}
+                                                        style={[styles.pl5, styles.offlineIndicatorRow, offlineIndicatorStyle]}
+                                                    />
+                                                    {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
+                                                    <ImportedStateIndicator />
+                                                </>
                                             )}
                                         </ScreenWrapperStatusContext.Provider>
                                     </PickerAvoidingView>
diff --git a/src/languages/en.ts b/src/languages/en.ts
index a7226b9bc324..b43082ac3bf9 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1096,6 +1096,7 @@ export default {
             importOnyxState: 'Import Onyx state',
             testCrash: 'Test crash',
             resetToOriginalState: 'Reset to original state',
+            usingImportedState: 'You are using imported state. Press here to clear it.',
         },
         debugConsole: {
             saveLog: 'Save log',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 964640da7117..8ec6409afe68 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1100,6 +1100,7 @@ export default {
             importOnyxState: 'Importar estado Onyx',
             testCrash: 'Prueba de fallo',
             resetToOriginalState: 'Restablecer al estado original',
+            usingImportedState: 'Estás utilizando el estado importado. Pulsa aquí para borrarlo.',
         },
         debugConsole: {
             saveLog: 'Guardar registro',
diff --git a/src/libs/actions/App.ts b/src/libs/actions/App.ts
index 8fa138e2c967..cebf6d33e3d8 100644
--- a/src/libs/actions/App.ts
+++ b/src/libs/actions/App.ts
@@ -24,6 +24,7 @@ import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {OnyxData} from '@src/types/onyx/Request';
+import {setShouldForceOffline} from './Network';
 import * as Policy from './Policy/Policy';
 import * as Session from './Session';
 import Timing from './Timing';
@@ -77,6 +78,14 @@ Onyx.connect({
     },
 });
 
+let isUsingImportedState: boolean | undefined;
+Onyx.connect({
+    key: ONYXKEYS.IS_USING_IMPORTED_STATE,
+    callback: (value) => {
+        isUsingImportedState = value ?? false;
+    },
+});
+
 const KEYS_TO_PRESERVE: OnyxKey[] = [
     ONYXKEYS.ACCOUNT,
     ONYXKEYS.IS_CHECKING_PUBLIC_ROOM,
@@ -501,8 +510,20 @@ function updateLastRoute(screen: string) {
     Onyx.set(ONYXKEYS.LAST_ROUTE, screen);
 }
 
-function setIsUsingImportedState(isUsingImportedState: boolean) {
-    Onyx.set(ONYXKEYS.IS_USING_IMPORTED_STATE, isUsingImportedState);
+function setIsUsingImportedState(usingImportedState: boolean) {
+    Onyx.set(ONYXKEYS.IS_USING_IMPORTED_STATE, usingImportedState);
+}
+
+function clearOnyxAndResetApp() {
+    // The value of isUsingImportedState will be lost once Onyx is cleared, so we need to store it
+    const isStateImported = isUsingImportedState;
+    Onyx.clear(KEYS_TO_PRESERVE).then(() => {
+        // Network key is preserved, so when using imported state, we should stop forcing offline mode so that the app can re-fetch the network
+        if (isStateImported) {
+            setShouldForceOffline(false);
+        }
+        openApp();
+    });
 }
 
 export {
@@ -524,5 +545,6 @@ export {
     updateLastVisitedPath,
     updateLastRoute,
     setIsUsingImportedState,
+    clearOnyxAndResetApp,
     KEYS_TO_PRESERVE,
 };
diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx
index 15263441220e..6a0f77dab646 100755
--- a/src/pages/NewChatPage.tsx
+++ b/src/pages/NewChatPage.tsx
@@ -3,6 +3,7 @@ import reject from 'lodash/reject';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
+import ImportedStateIndicator from '@components/ImportedStateIndicator';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
 import {useOptionsList} from '@components/OptionListContextProvider';
@@ -348,7 +349,12 @@ function NewChatPage({isGroupChat}: NewChatPageProps) {
                     initiallyFocusedOptionKey={firstKeyForList}
                     shouldTextInputInterceptSwipe
                 />
-                {isSmallScreenWidth && <OfflineIndicator />}
+                {isSmallScreenWidth && (
+                    <>
+                        <OfflineIndicator />
+                        <ImportedStateIndicator />
+                    </>
+                )}
             </KeyboardAvoidingView>
         </ScreenWrapper>
     );
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
index 70fc44afa3a3..23dc7750f06c 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -13,6 +13,7 @@ import EmojiPickerButton from '@components/EmojiPicker/EmojiPickerButton';
 import ExceededCommentLength from '@components/ExceededCommentLength';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import ImportedStateIndicator from '@components/ImportedStateIndicator';
 import type {Mention} from '@components/MentionSuggestions';
 import OfflineIndicator from '@components/OfflineIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -82,6 +83,9 @@ type ReportActionComposeOnyxProps = {
 
     /** Whether the composer input should be shown */
     shouldShowComposeInput: OnyxEntry<boolean>;
+
+    /** Whether user is currently using the imported state */
+    isUsingImportedState: OnyxEntry<boolean>;
 };
 
 type ReportActionComposeProps = ReportActionComposeOnyxProps &
@@ -137,6 +141,7 @@ function ReportActionCompose({
     shouldShowEducationalTooltip,
     onComposerFocus,
     onComposerBlur,
+    isUsingImportedState,
 }: ReportActionComposeProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -577,6 +582,11 @@ function ReportActionCompose({
                         {hasExceededMaxCommentLength && <ExceededCommentLength />}
                     </View>
                 </OfflineWithFeedback>
+                {isUsingImportedState && !isSmallScreenWidth && (
+                    <View style={[styles.mln5, styles.mrn5]}>
+                        <ImportedStateIndicator />
+                    </View>
+                )}
             </View>
         </View>
     );
@@ -592,6 +602,9 @@ export default withCurrentUserPersonalDetails(
         shouldShowComposeInput: {
             key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT,
         },
+        isUsingImportedState: {
+            key: ONYXKEYS.IS_USING_IMPORTED_STATE,
+        },
     })(memo(ReportActionCompose)),
 );
 export {onSubmitAction};
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index b96e927ed2f4..737e2b80bb79 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -30,6 +30,7 @@ import {setShouldForceOffline} from '@libs/actions/Network';
 import ExportOnyxState from '@libs/ExportOnyxState';
 import Navigation from '@libs/Navigation/Navigation';
 import * as App from '@userActions/App';
+import {clearOnyxAndResetApp} from '@userActions/App';
 import * as Report from '@userActions/Report';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -167,13 +168,7 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState, isUsingImported
                                 isVisible={isConfirmationModalVisible}
                                 onConfirm={() => {
                                     setIsConfirmationModalVisible(false);
-                                    Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
-                                        // If using imported state, we should stop forcing offline mode so that the app can re-fetch the network
-                                        if (isUsingImportedState) {
-                                            setShouldForceOffline(false);
-                                        }
-                                        App.openApp();
-                                    });
+                                    clearOnyxAndResetApp();
                                 }}
                                 onCancel={() => setIsConfirmationModalVisible(false)}
                                 prompt={translate('initialSettingsPage.troubleshoot.confirmResetDescription')}
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx
index c0e953a6a350..9e1c38c903ae 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.tsx
+++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx
@@ -10,6 +10,7 @@ import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormOnyxValues} from '@components/Form/types';
 import * as Illustrations from '@components/Icon/Illustrations';
+import ImportedStateIndicator from '@components/ImportedStateIndicator';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
 import RoomNameInput from '@components/RoomNameInput';
@@ -242,7 +243,12 @@ function WorkspaceNewRoomPage({policies, reports, formState, session, activePoli
                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                 style={[styles.mh5, styles.mb5]}
             />
-            {isSmallScreenWidth && <OfflineIndicator />}
+            {isSmallScreenWidth && (
+                <>
+                    <OfflineIndicator />
+                    <ImportedStateIndicator />
+                </>
+            )}
         </>
     );
 
@@ -336,7 +342,12 @@ function WorkspaceNewRoomPage({policies, reports, formState, session, activePoli
                                 />
                             </View>
                         </FormProvider>
-                        {isSmallScreenWidth && <OfflineIndicator />}
+                        {isSmallScreenWidth && (
+                            <>
+                                <OfflineIndicator />
+                                <ImportedStateIndicator />
+                            </>
+                        )}
                     </KeyboardAvoidingView>
                 )
             }

From d8102f9215deb58e3767d0a88c8b39399ab1b41b Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 16 Sep 2024 11:58:09 +0200
Subject: [PATCH 22/42] fix crash when reportID is empty after clearing state

---
 src/pages/home/report/ReportActionItem.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 3d69f029b8bd..eec4a1fa341f 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -1,3 +1,4 @@
+import isEmpty from 'lodash/isEmpty';
 import lodashIsEqual from 'lodash/isEqual';
 import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, TextInput} from 'react-native';
@@ -188,7 +189,7 @@ function ReportActionItem({
     });
     const theme = useTheme();
     const styles = useThemeStyles();
-    const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`);
+    const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${!isEmpty(report?.reportID) ? report?.reportID : -1}`);
     const StyleUtils = useStyleUtils();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const [isContextMenuActive, setIsContextMenuActive] = useState(() => ReportActionContextMenu.isActiveReportAction(action.reportActionID));

From 2dd1e915711960addb30f4639e9aa311d439aee8 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 16 Sep 2024 12:55:50 +0200
Subject: [PATCH 23/42] fix lint

---
 src/pages/settings/Troubleshoot/TroubleshootPage.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index 737e2b80bb79..9a473fe5fead 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
-import Onyx, {withOnyx} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {SvgProps} from 'react-native-svg';
 import ClientSideLoggingToolMenu from '@components/ClientSideLoggingToolMenu';
@@ -26,10 +26,8 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import {setShouldMaskOnyxState} from '@libs/actions/MaskOnyx';
-import {setShouldForceOffline} from '@libs/actions/Network';
 import ExportOnyxState from '@libs/ExportOnyxState';
 import Navigation from '@libs/Navigation/Navigation';
-import * as App from '@userActions/App';
 import {clearOnyxAndResetApp} from '@userActions/App';
 import * as Report from '@userActions/Report';
 import type {TranslationPaths} from '@src/languages/types';
@@ -46,12 +44,11 @@ type BaseMenuItem = {
 type TroubleshootPageOnyxProps = {
     shouldStoreLogs: OnyxEntry<boolean>;
     shouldMaskOnyxState: boolean;
-    isUsingImportedState: OnyxEntry<boolean>;
 };
 
 type TroubleshootPageProps = TroubleshootPageOnyxProps;
 
-function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState, isUsingImportedState}: TroubleshootPageProps) {
+function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {isProduction} = useEnvironment();
@@ -193,7 +190,4 @@ export default withOnyx<TroubleshootPageProps, TroubleshootPageOnyxProps>({
         key: ONYXKEYS.SHOULD_MASK_ONYX_STATE,
         selector: (shouldMaskOnyxState) => shouldMaskOnyxState ?? true,
     },
-    isUsingImportedState: {
-        key: ONYXKEYS.IS_USING_IMPORTED_STATE,
-    },
 })(TroubleshootPage);

From e756a8bc274564f075ee83616d8d5d7d38ba8107 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 16 Sep 2024 16:11:45 +0200
Subject: [PATCH 24/42] code review updates

---
 src/components/ImportOnyxState/index.native.tsx | 3 ---
 src/components/ImportOnyxState/utils.ts         | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/ImportOnyxState/index.native.tsx b/src/components/ImportOnyxState/index.native.tsx
index d1b0d1492e94..126ea641078f 100644
--- a/src/components/ImportOnyxState/index.native.tsx
+++ b/src/components/ImportOnyxState/index.native.tsx
@@ -43,9 +43,6 @@ function readFileInChunks(fileUri: string, chunkSize = 1024 * 1024) {
 
                 return fileContent;
             });
-        })
-        .catch((error) => {
-            throw error;
         });
 }
 
diff --git a/src/components/ImportOnyxState/utils.ts b/src/components/ImportOnyxState/utils.ts
index c1fbcc4d508e..d3535b3d009f 100644
--- a/src/components/ImportOnyxState/utils.ts
+++ b/src/components/ImportOnyxState/utils.ts
@@ -9,7 +9,7 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 }
 
 function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord | unknown[] {
-    const dataCopy = data;
+    const dataCopy = {...data};
     if (typeof dataCopy !== 'object' || dataCopy === null) {
         return dataCopy;
     }

From 9a7a330e5d3937d379109fc4d74d56b34d61b6e2 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 20 Sep 2024 11:12:26 +0200
Subject: [PATCH 25/42] fix error when importing the file

---
 src/components/ImportOnyxState/utils.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ImportOnyxState/utils.ts b/src/components/ImportOnyxState/utils.ts
index d3535b3d009f..be464fc1fb82 100644
--- a/src/components/ImportOnyxState/utils.ts
+++ b/src/components/ImportOnyxState/utils.ts
@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash/cloneDeep';
 import type {UnknownRecord} from 'type-fest';
 import ONYXKEYS from '@src/ONYXKEYS';
 
@@ -9,7 +10,7 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 }
 
 function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord | unknown[] {
-    const dataCopy = {...data};
+    const dataCopy = cloneDeep(data);
     if (typeof dataCopy !== 'object' || dataCopy === null) {
         return dataCopy;
     }

From 35fd5f1571f1cd793f02a72da68a20ad320cea0a Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 20 Sep 2024 12:23:42 +0200
Subject: [PATCH 26/42] migrate from withOnyx to useOnyx

---
 .../ReportActionCompose.tsx                   |  36 +----
 src/pages/home/report/ReportActionItem.tsx    | 123 +++++++-----------
 .../Troubleshoot/TroubleshootPage.tsx         |  24 +---
 src/pages/workspace/WorkspaceNewRoomPage.tsx  |  50 ++-----
 4 files changed, 64 insertions(+), 169 deletions(-)

diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
index 5be8c693ab55..f2eb97a2cde8 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -4,7 +4,7 @@ import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 're
 import type {MeasureInWindowOnSuccessCallback, NativeSyntheticEvent, TextInputFocusEventData, TextInputSelectionChangeEventData} from 'react-native';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import {runOnUI, useSharedValue} from 'react-native-reanimated';
 import type {Emoji} from '@assets/emojis/types';
 import type {FileObject} from '@components/AttachmentModal';
@@ -64,19 +64,7 @@ type SuggestionsRef = {
     getIsSuggestionsMenuVisible: () => boolean;
 };
 
-type ReportActionComposeOnyxProps = {
-    /** The NVP describing a user's block status */
-    blockedFromConcierge: OnyxEntry<OnyxTypes.BlockedFromConcierge>;
-
-    /** Whether the composer input should be shown */
-    shouldShowComposeInput: OnyxEntry<boolean>;
-
-    /** Whether user is currently using the imported state */
-    isUsingImportedState: OnyxEntry<boolean>;
-};
-
-type ReportActionComposeProps = ReportActionComposeOnyxProps &
-    WithCurrentUserPersonalDetailsProps &
+type ReportActionComposeProps = WithCurrentUserPersonalDetailsProps &
     Pick<ComposerWithSuggestionsProps, 'reportID' | 'isEmptyChat' | 'isComposerFullSize' | 'lastReportAction'> & {
         /** A method to call when the form is submitted */
         onSubmit: (newComment: string) => void;
@@ -113,7 +101,6 @@ const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc();
 let onSubmitAction = noop;
 
 function ReportActionCompose({
-    blockedFromConcierge,
     currentUserPersonalDetails,
     disabled = false,
     isComposerFullSize = false,
@@ -121,14 +108,12 @@ function ReportActionCompose({
     pendingAction,
     report,
     reportID,
-    shouldShowComposeInput = true,
     isReportReadyForDisplay = true,
     isEmptyChat,
     lastReportAction,
     shouldShowEducationalTooltip,
     onComposerFocus,
     onComposerBlur,
-    isUsingImportedState,
 }: ReportActionComposeProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -138,6 +123,9 @@ function ReportActionCompose({
     const actionButtonRef = useRef<View | HTMLDivElement | null>(null);
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const navigation = useNavigation();
+    const [blockedFromConcierge] = useOnyx(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE);
+    const [shouldShowComposeInput] = useOnyx(ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT, {initialValue: true});
+    const [isUsingImportedState] = useOnyx(ONYXKEYS.IS_USING_IMPORTED_STATE);
 
     /**
      * Updates the Highlight state of the composer
@@ -581,18 +569,6 @@ function ReportActionCompose({
 
 ReportActionCompose.displayName = 'ReportActionCompose';
 
-export default withCurrentUserPersonalDetails(
-    withOnyx<ReportActionComposeProps, ReportActionComposeOnyxProps>({
-        blockedFromConcierge: {
-            key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE,
-        },
-        shouldShowComposeInput: {
-            key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT,
-        },
-        isUsingImportedState: {
-            key: ONYXKEYS.IS_USING_IMPORTED_STATE,
-        },
-    })(memo(ReportActionCompose)),
-);
+export default withCurrentUserPersonalDetails(memo(ReportActionCompose));
 export {onSubmitAction};
 export type {SuggestionsRef, ComposerRef};
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index aaa02de1e247..f5aa400974a3 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -4,7 +4,7 @@ import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useSta
 import type {GestureResponderEvent, TextInput} from 'react-native';
 import {InteractionManager, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import {useOnyx, withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {Emoji} from '@assets/emojis/types';
 import {AttachmentContext} from '@components/AttachmentContext';
 import Button from '@components/Button';
@@ -65,7 +65,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
-import type {Errors} from '@src/types/onyx/OnyxCommon';
 import type {JoinWorkspaceResolution} from '@src/types/onyx/OriginalMessage';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import {RestrictedReadOnlyContextMenuActions} from './ContextMenu/ContextMenuActions';
@@ -83,19 +82,6 @@ import ReportActionItemSingle from './ReportActionItemSingle';
 import ReportActionItemThread from './ReportActionItemThread';
 import ReportAttachmentsContext from './ReportAttachmentsContext';
 
-type ReportActionItemOnyxProps = {
-    /** IOU report for this action, if any */
-    iouReport: OnyxEntry<OnyxTypes.Report>;
-
-    emojiReactions: OnyxEntry<OnyxTypes.ReportActionReactions>;
-
-    /** The user's wallet account */
-    userWallet: OnyxEntry<OnyxTypes.UserWallet>;
-
-    /** The transaction (linked with the report action) route error */
-    linkedTransactionRouteError: NonNullable<OnyxEntry<Errors>> | null;
-};
-
 type ReportActionItemProps = {
     /** Report for this action */
     report: OnyxTypes.Report;
@@ -151,7 +137,7 @@ type ReportActionItemProps = {
 
     /** Whether context menu should be displayed */
     shouldDisplayContextMenu?: boolean;
-} & ReportActionItemOnyxProps;
+};
 
 function ReportActionItem({
     action,
@@ -159,23 +145,29 @@ function ReportActionItem({
     transactionThreadReport,
     linkedReportActionID,
     displayAsGroup,
-    emojiReactions,
     index,
-    iouReport,
     isMostRecentIOUReportAction,
     parentReportAction,
     shouldDisplayNewMarker,
-    userWallet,
     shouldHideThreadDividerLine = false,
     shouldShowSubscriptAvatar = false,
     onPress = undefined,
     isFirstVisibleReportAction = false,
     shouldUseThreadDividerLine = false,
-    linkedTransactionRouteError,
     hideThreadReplies = false,
     shouldDisplayContextMenu = true,
     parentReportActionForTransactionThread,
 }: ReportActionItemProps) {
+    const iouReportId = ReportActionsUtils.getIOUReportIDFromReportActionPreview(action);
+    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportId ?? -1}`, {initialValue: {} as OnyxTypes.Report});
+    const [emojiReactions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action.reportActionID}`, {initialValue: {}});
+    const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET);
+    const [linkedTransactionRouteError] = useOnyx(
+        `${ONYXKEYS.COLLECTION.TRANSACTION}${ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID ?? -1 : -1}`,
+        {
+            selector: (transaction: OnyxEntry<OnyxTypes.Transaction>) => transaction?.errorFields?.route ?? null,
+        },
+    );
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const blockedFromConcierge = useBlockedFromConcierge();
@@ -998,61 +990,36 @@ function ReportActionItem({
     );
 }
 
-export default withOnyx<ReportActionItemProps, ReportActionItemOnyxProps>({
-    iouReport: {
-        key: ({action}) => {
-            const iouReportID = ReportActionsUtils.getIOUReportIDFromReportActionPreview(action);
-            return `${ONYXKEYS.COLLECTION.REPORT}${iouReportID ?? -1}`;
-        },
-        initialValue: {} as OnyxTypes.Report,
-    },
-    emojiReactions: {
-        key: ({action}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action.reportActionID}`,
-        initialValue: {},
-    },
-    userWallet: {
-        key: ONYXKEYS.USER_WALLET,
-    },
-    linkedTransactionRouteError: {
-        key: ({action}) =>
-            `${ONYXKEYS.COLLECTION.TRANSACTION}${ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID ?? -1 : -1}`,
-        selector: (transaction: OnyxEntry<OnyxTypes.Transaction>) => transaction?.errorFields?.route ?? null,
-    },
-})(
-    memo(ReportActionItem, (prevProps, nextProps) => {
-        const prevParentReportAction = prevProps.parentReportAction;
-        const nextParentReportAction = nextProps.parentReportAction;
-        return (
-            prevProps.displayAsGroup === nextProps.displayAsGroup &&
-            prevProps.isMostRecentIOUReportAction === nextProps.isMostRecentIOUReportAction &&
-            prevProps.shouldDisplayNewMarker === nextProps.shouldDisplayNewMarker &&
-            lodashIsEqual(prevProps.emojiReactions, nextProps.emojiReactions) &&
-            lodashIsEqual(prevProps.action, nextProps.action) &&
-            lodashIsEqual(prevProps.iouReport, nextProps.iouReport) &&
-            lodashIsEqual(prevProps.report.pendingFields, nextProps.report.pendingFields) &&
-            lodashIsEqual(prevProps.report.isDeletedParentAction, nextProps.report.isDeletedParentAction) &&
-            lodashIsEqual(prevProps.report.errorFields, nextProps.report.errorFields) &&
-            prevProps.report?.statusNum === nextProps.report?.statusNum &&
-            prevProps.report?.stateNum === nextProps.report?.stateNum &&
-            prevProps.report?.parentReportID === nextProps.report?.parentReportID &&
-            prevProps.report?.parentReportActionID === nextProps.report?.parentReportActionID &&
-            // TaskReport's created actions render the TaskView, which updates depending on certain fields in the TaskReport
-            ReportUtils.isTaskReport(prevProps.report) === ReportUtils.isTaskReport(nextProps.report) &&
-            prevProps.action.actionName === nextProps.action.actionName &&
-            prevProps.report.reportName === nextProps.report.reportName &&
-            prevProps.report.description === nextProps.report.description &&
-            ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report) &&
-            prevProps.report.managerID === nextProps.report.managerID &&
-            prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine &&
-            prevProps.report?.total === nextProps.report?.total &&
-            prevProps.report?.nonReimbursableTotal === nextProps.report?.nonReimbursableTotal &&
-            prevProps.report?.policyAvatar === nextProps.report?.policyAvatar &&
-            prevProps.linkedReportActionID === nextProps.linkedReportActionID &&
-            lodashIsEqual(prevProps.report.fieldList, nextProps.report.fieldList) &&
-            lodashIsEqual(prevProps.transactionThreadReport, nextProps.transactionThreadReport) &&
-            lodashIsEqual(prevProps.reportActions, nextProps.reportActions) &&
-            lodashIsEqual(prevProps.linkedTransactionRouteError, nextProps.linkedTransactionRouteError) &&
-            lodashIsEqual(prevParentReportAction, nextParentReportAction)
-        );
-    }),
-);
+export default memo(ReportActionItem, (prevProps, nextProps) => {
+    const prevParentReportAction = prevProps.parentReportAction;
+    const nextParentReportAction = nextProps.parentReportAction;
+    return (
+        prevProps.displayAsGroup === nextProps.displayAsGroup &&
+        prevProps.isMostRecentIOUReportAction === nextProps.isMostRecentIOUReportAction &&
+        prevProps.shouldDisplayNewMarker === nextProps.shouldDisplayNewMarker &&
+        lodashIsEqual(prevProps.action, nextProps.action) &&
+        lodashIsEqual(prevProps.report.pendingFields, nextProps.report.pendingFields) &&
+        lodashIsEqual(prevProps.report.isDeletedParentAction, nextProps.report.isDeletedParentAction) &&
+        lodashIsEqual(prevProps.report.errorFields, nextProps.report.errorFields) &&
+        prevProps.report?.statusNum === nextProps.report?.statusNum &&
+        prevProps.report?.stateNum === nextProps.report?.stateNum &&
+        prevProps.report?.parentReportID === nextProps.report?.parentReportID &&
+        prevProps.report?.parentReportActionID === nextProps.report?.parentReportActionID &&
+        // TaskReport's created actions render the TaskView, which updates depending on certain fields in the TaskReport
+        ReportUtils.isTaskReport(prevProps.report) === ReportUtils.isTaskReport(nextProps.report) &&
+        prevProps.action.actionName === nextProps.action.actionName &&
+        prevProps.report.reportName === nextProps.report.reportName &&
+        prevProps.report.description === nextProps.report.description &&
+        ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report) &&
+        prevProps.report.managerID === nextProps.report.managerID &&
+        prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine &&
+        prevProps.report?.total === nextProps.report?.total &&
+        prevProps.report?.nonReimbursableTotal === nextProps.report?.nonReimbursableTotal &&
+        prevProps.report?.policyAvatar === nextProps.report?.policyAvatar &&
+        prevProps.linkedReportActionID === nextProps.linkedReportActionID &&
+        lodashIsEqual(prevProps.report.fieldList, nextProps.report.fieldList) &&
+        lodashIsEqual(prevProps.transactionThreadReport, nextProps.transactionThreadReport) &&
+        lodashIsEqual(prevProps.reportActions, nextProps.reportActions) &&
+        lodashIsEqual(prevParentReportAction, nextParentReportAction)
+    );
+});
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index 9a473fe5fead..f33f70ee1f92 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -1,7 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {SvgProps} from 'react-native-svg';
 import ClientSideLoggingToolMenu from '@components/ClientSideLoggingToolMenu';
 import ConfirmModal from '@components/ConfirmModal';
@@ -41,14 +40,7 @@ type BaseMenuItem = {
     action: () => void | Promise<void>;
 };
 
-type TroubleshootPageOnyxProps = {
-    shouldStoreLogs: OnyxEntry<boolean>;
-    shouldMaskOnyxState: boolean;
-};
-
-type TroubleshootPageProps = TroubleshootPageOnyxProps;
-
-function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPageProps) {
+function TroubleshootPage() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {isProduction} = useEnvironment();
@@ -57,6 +49,8 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const illustrationStyle = getLightbulbIllustrationStyle();
     const [isLoading, setIsLoading] = useState(false);
+    const [shouldStoreLogs] = useOnyx(ONYXKEYS.SHOULD_STORE_LOGS);
+    const [shouldMaskOnyxState] = useOnyx(ONYXKEYS.SHOULD_MASK_ONYX_STATE, {selector: (value) => value ?? true});
 
     const exportOnyxState = useCallback(() => {
         ExportOnyxState.readFromOnyxDatabase().then((value: Record<string, unknown>) => {
@@ -182,12 +176,4 @@ function TroubleshootPage({shouldStoreLogs, shouldMaskOnyxState}: TroubleshootPa
 
 TroubleshootPage.displayName = 'TroubleshootPage';
 
-export default withOnyx<TroubleshootPageProps, TroubleshootPageOnyxProps>({
-    shouldStoreLogs: {
-        key: ONYXKEYS.SHOULD_STORE_LOGS,
-    },
-    shouldMaskOnyxState: {
-        key: ONYXKEYS.SHOULD_MASK_ONYX_STATE,
-        selector: (shouldMaskOnyxState) => shouldMaskOnyxState ?? true,
-    },
-})(TroubleshootPage);
+export default TroubleshootPage;
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx
index 9e1c38c903ae..481fc6c41402 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.tsx
+++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx
@@ -1,8 +1,7 @@
 import {useIsFocused} from '@react-navigation/core';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Button from '@components/Button';
@@ -35,36 +34,20 @@ import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {NewRoomForm} from '@src/types/form/NewRoomForm';
 import INPUT_IDS from '@src/types/form/NewRoomForm';
-import type {Policy, Report as ReportType, Session} from '@src/types/onyx';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-type WorkspaceNewRoomPageOnyxProps = {
-    /** The list of policies the user has access to. */
-    policies: OnyxCollection<Policy>;
-
-    /** All reports shared with the user */
-    reports: OnyxCollection<ReportType>;
-
-    /** Form state for NEW_ROOM_FORM */
-    formState: OnyxEntry<NewRoomForm>;
-
-    /** Session details for the user */
-    session: OnyxEntry<Session>;
-
-    /** policyID for main workspace */
-    activePolicyID: OnyxEntry<Required<string>>;
-};
-
-type WorkspaceNewRoomPageProps = WorkspaceNewRoomPageOnyxProps;
-
-function WorkspaceNewRoomPage({policies, reports, formState, session, activePolicyID}: WorkspaceNewRoomPageProps) {
+function WorkspaceNewRoomPage() {
     const styles = useThemeStyles();
     const isFocused = useIsFocused();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const [formState] = useOnyx(ONYXKEYS.FORMS.NEW_ROOM_FORM, {initWithStoredValues: false});
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to show offline indicator on small screen only
     const {isSmallScreenWidth} = useResponsiveLayout();
     const [visibility, setVisibility] = useState<ValueOf<typeof CONST.REPORT.VISIBILITY>>(CONST.REPORT.VISIBILITY.RESTRICTED);
@@ -357,21 +340,4 @@ function WorkspaceNewRoomPage({policies, reports, formState, session, activePoli
 
 WorkspaceNewRoomPage.displayName = 'WorkspaceNewRoomPage';
 
-export default withOnyx<WorkspaceNewRoomPageProps, WorkspaceNewRoomPageOnyxProps>({
-    policies: {
-        key: ONYXKEYS.COLLECTION.POLICY,
-    },
-    reports: {
-        key: ONYXKEYS.COLLECTION.REPORT,
-    },
-    formState: {
-        key: ONYXKEYS.FORMS.NEW_ROOM_FORM,
-        initWithStoredValues: false,
-    },
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-    activePolicyID: {
-        key: ONYXKEYS.NVP_ACTIVE_POLICY_ID,
-    },
-})(WorkspaceNewRoomPage);
+export default WorkspaceNewRoomPage;

From 072afdd63cd2a8a0a2ac55b25be8472098d1cdb1 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 20 Sep 2024 12:31:38 +0200
Subject: [PATCH 27/42] fix typecheck

---
 src/pages/settings/Troubleshoot/TroubleshootPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index f33f70ee1f92..0831fffde1d0 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -50,7 +50,7 @@ function TroubleshootPage() {
     const illustrationStyle = getLightbulbIllustrationStyle();
     const [isLoading, setIsLoading] = useState(false);
     const [shouldStoreLogs] = useOnyx(ONYXKEYS.SHOULD_STORE_LOGS);
-    const [shouldMaskOnyxState] = useOnyx(ONYXKEYS.SHOULD_MASK_ONYX_STATE, {selector: (value) => value ?? true});
+    const [shouldMaskOnyxState] = useOnyx(ONYXKEYS.SHOULD_MASK_ONYX_STATE);
 
     const exportOnyxState = useCallback(() => {
         ExportOnyxState.readFromOnyxDatabase().then((value: Record<string, unknown>) => {
@@ -136,7 +136,7 @@ function TroubleshootPage() {
                                 <TestToolRow title={translate('initialSettingsPage.troubleshoot.maskExportOnyxStateData')}>
                                     <Switch
                                         accessibilityLabel={translate('initialSettingsPage.troubleshoot.maskExportOnyxStateData')}
-                                        isOn={shouldMaskOnyxState}
+                                        isOn={shouldMaskOnyxState ?? true}
                                         onToggle={setShouldMaskOnyxState}
                                     />
                                 </TestToolRow>

From 778934ad9aa452bec04b5dde1be8de8a11de776e Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Tue, 24 Sep 2024 11:33:06 +0200
Subject: [PATCH 28/42] fix lint

---
 src/pages/settings/Troubleshoot/TroubleshootPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index 7bf834fa29e2..69293fe894d4 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
-import Onyx, {useOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {SvgProps} from 'react-native-svg';
 import ClientSideLoggingToolMenu from '@components/ClientSideLoggingToolMenu';
 import ConfirmModal from '@components/ConfirmModal';

From c3853c529d2510059fbe4c675e58f327f4f5ec2e Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Tue, 24 Sep 2024 14:37:41 +0200
Subject: [PATCH 29/42] fix displaying messages and composer

---
 src/components/ImportOnyxState/utils.ts | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/components/ImportOnyxState/utils.ts b/src/components/ImportOnyxState/utils.ts
index be464fc1fb82..8be773e4a8b6 100644
--- a/src/components/ImportOnyxState/utils.ts
+++ b/src/components/ImportOnyxState/utils.ts
@@ -11,28 +11,21 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 
 function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord | unknown[] {
     const dataCopy = cloneDeep(data);
-    if (typeof dataCopy !== 'object' || dataCopy === null) {
-        return dataCopy;
+    if (!isRecord(dataCopy)) {
+        return Array.isArray(dataCopy) ? (dataCopy as UnknownRecord[]).map(transformNumericKeysToArray) : (dataCopy as UnknownRecord);
     }
 
     const keys = Object.keys(dataCopy);
-    const allKeysAreNumeric = keys.every((key) => !Number.isNaN(key));
+    const allKeysAreNumeric = keys.every((key) => !Number.isNaN(Number(key)));
     const keysAreSequential = keys.every((key, index) => parseInt(key, 10) === index);
 
     if (allKeysAreNumeric && keysAreSequential) {
-        return keys.map((key) => {
-            if (isRecord(dataCopy)) {
-                return transformNumericKeysToArray(dataCopy[key] as UnknownRecord);
-            }
-            return dataCopy;
-        });
+        return keys.map((key) => transformNumericKeysToArray(dataCopy[key] as UnknownRecord));
     }
 
-    if (isRecord(dataCopy)) {
-        for (const key in dataCopy) {
-            if (key in dataCopy) {
-                dataCopy[key] = transformNumericKeysToArray(dataCopy[key] as UnknownRecord);
-            }
+    for (const key in dataCopy) {
+        if (key in dataCopy) {
+            dataCopy[key] = transformNumericKeysToArray(dataCopy[key] as UnknownRecord);
         }
     }
 

From 8d91eb8767fc76574b557d668ad1e87b81fb6f3c Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 25 Sep 2024 09:22:16 +0200
Subject: [PATCH 30/42] update App actions

---
 src/libs/actions/App.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/libs/actions/App.ts b/src/libs/actions/App.ts
index d2a0b856c234..b4f28c4d327c 100644
--- a/src/libs/actions/App.ts
+++ b/src/libs/actions/App.ts
@@ -25,6 +25,7 @@ import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {OnyxData} from '@src/types/onyx/Request';
 import {setShouldForceOffline} from './Network';
+import * as PersistedRequests from './PersistedRequests';
 import * as Policy from './Policy/Policy';
 import * as Session from './Session';
 import Timing from './Timing';
@@ -516,12 +517,24 @@ function setIsUsingImportedState(usingImportedState: boolean) {
 function clearOnyxAndResetApp() {
     // The value of isUsingImportedState will be lost once Onyx is cleared, so we need to store it
     const isStateImported = isUsingImportedState;
+    const sequentialQueue = PersistedRequests.getAll();
     Onyx.clear(KEYS_TO_PRESERVE).then(() => {
         // Network key is preserved, so when using imported state, we should stop forcing offline mode so that the app can re-fetch the network
         if (isStateImported) {
             setShouldForceOffline(false);
         }
-        openApp();
+        // Requests in a sequential queue should be called even if the Onyx state is reset, so we do not lose any pending data.
+        // However, the OpenApp request must be called before any other request in a queue to ensure data consistency.
+        // To do that, sequential queue is cleared together with other keys, and then it's restored once the OpenApp request is resolved.
+        openApp().then(() => {
+            if (!sequentialQueue) {
+                return;
+            }
+
+            sequentialQueue.forEach((request) => {
+                PersistedRequests.save(request);
+            });
+        });
     });
 }
 

From 10bbee3a26186ee79b5cc2588858f4c3227d9597 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 25 Sep 2024 11:15:13 +0200
Subject: [PATCH 31/42] fix onyx set error

---
 src/components/ImportOnyxState/utils.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ImportOnyxState/utils.ts b/src/components/ImportOnyxState/utils.ts
index 8be773e4a8b6..c352ecc6fe5d 100644
--- a/src/components/ImportOnyxState/utils.ts
+++ b/src/components/ImportOnyxState/utils.ts
@@ -16,9 +16,12 @@ function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord | unkno
     }
 
     const keys = Object.keys(dataCopy);
+
+    if (keys.length === 0) {
+        return dataCopy;
+    }
     const allKeysAreNumeric = keys.every((key) => !Number.isNaN(Number(key)));
     const keysAreSequential = keys.every((key, index) => parseInt(key, 10) === index);
-
     if (allKeysAreNumeric && keysAreSequential) {
         return keys.map((key) => transformNumericKeysToArray(dataCopy[key] as UnknownRecord));
     }
@@ -44,7 +47,6 @@ function cleanAndTransformState<T>(state: string): T {
     });
 
     const transformedState = transformNumericKeysToArray(parsedState) as T;
-
     return transformedState;
 }
 

From 80d11b362ca710d48c3a66e05d2a80a8a4e0c2eb Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 25 Sep 2024 11:18:45 +0200
Subject: [PATCH 32/42] don't restore sequential queue when going back from
 imported state

---
 src/libs/actions/App.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/App.ts b/src/libs/actions/App.ts
index b4f28c4d327c..e2db63a9a480 100644
--- a/src/libs/actions/App.ts
+++ b/src/libs/actions/App.ts
@@ -527,7 +527,7 @@ function clearOnyxAndResetApp() {
         // However, the OpenApp request must be called before any other request in a queue to ensure data consistency.
         // To do that, sequential queue is cleared together with other keys, and then it's restored once the OpenApp request is resolved.
         openApp().then(() => {
-            if (!sequentialQueue) {
+            if (!sequentialQueue || isStateImported) {
                 return;
             }
 

From aeb02c3ae8cee69bd6eb05e847b53dc8b526b3ce Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 27 Sep 2024 09:52:09 +0200
Subject: [PATCH 33/42] properly get reportNameValuePairs

---
 src/pages/home/report/ReportActionItem.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 564f7dbe7aa5..7bac3c46aed4 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -179,7 +179,8 @@ function ReportActionItem({
     );
     const theme = useTheme();
     const styles = useThemeStyles();
-    const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${!isEmpty(report?.reportID) ? report?.reportID : -1}`);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- This is needed to prevent the app from crashing when the app is using imported state.
+    const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID || -1}`);
     const StyleUtils = useStyleUtils();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const [isContextMenuActive, setIsContextMenuActive] = useState(() => ReportActionContextMenu.isActiveReportAction(action.reportActionID));

From 601085ba219c9ba679bd0a79e837b8eb48c61eb0 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 27 Sep 2024 10:23:49 +0200
Subject: [PATCH 34/42] remove unnecessary rendering condition

---
 .../home/report/ReportActionCompose/ReportActionCompose.tsx     | 2 +-
 src/pages/home/report/ReportActionItem.tsx                      | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
index 43d334b7b6ad..ecfde0da611b 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -557,7 +557,7 @@ function ReportActionCompose({
                         {hasExceededMaxCommentLength && <ExceededCommentLength />}
                     </View>
                 </OfflineWithFeedback>
-                {isUsingImportedState && !isSmallScreenWidth && (
+                {!isSmallScreenWidth && (
                     <View style={[styles.mln5, styles.mrn5]}>
                         <ImportedStateIndicator />
                     </View>
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 7bac3c46aed4..db528add3936 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -1,4 +1,3 @@
-import isEmpty from 'lodash/isEmpty';
 import lodashIsEqual from 'lodash/isEqual';
 import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, TextInput} from 'react-native';

From 8ed35d94d14f39b3fb18dd8f4ede56ccd57c870e Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 27 Sep 2024 11:01:15 +0200
Subject: [PATCH 35/42] create base component and display modal when file is
 invalid

---
 .../ImportOnyxState/BaseImportOnyxState.tsx   | 59 +++++++++++++++++
 .../ImportOnyxState/index.native.tsx          | 39 ++++-------
 src/components/ImportOnyxState/index.tsx      | 66 ++++++++-----------
 src/languages/en.ts                           |  2 +
 src/languages/es.ts                           |  2 +
 5 files changed, 102 insertions(+), 66 deletions(-)
 create mode 100644 src/components/ImportOnyxState/BaseImportOnyxState.tsx

diff --git a/src/components/ImportOnyxState/BaseImportOnyxState.tsx b/src/components/ImportOnyxState/BaseImportOnyxState.tsx
new file mode 100644
index 000000000000..216a6ddf76e4
--- /dev/null
+++ b/src/components/ImportOnyxState/BaseImportOnyxState.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import type {FileObject} from '@components/AttachmentModal';
+import AttachmentPicker from '@components/AttachmentPicker';
+import DecisionModal from '@components/DecisionModal';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function BaseImportOnyxState({
+    onFileRead,
+    isErrorModalVisible,
+    setIsErrorModalVisible,
+}: {
+    onFileRead: (file: FileObject) => void;
+    isErrorModalVisible: boolean;
+    setIsErrorModalVisible: (value: boolean) => void;
+}) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {isSmallScreenWidth} = useResponsiveLayout();
+
+    return (
+        <>
+            <AttachmentPicker
+                acceptedFileTypes={['text']}
+                shouldHideCameraOption
+                shouldHideGalleryOption
+            >
+                {({openPicker}) => {
+                    return (
+                        <MenuItem
+                            icon={Expensicons.Upload}
+                            title={translate('initialSettingsPage.troubleshoot.importOnyxState')}
+                            wrapperStyle={[styles.sectionMenuItemTopDescription]}
+                            onPress={() => {
+                                openPicker({
+                                    onPicked: onFileRead,
+                                });
+                            }}
+                        />
+                    );
+                }}
+            </AttachmentPicker>
+            <DecisionModal
+                title={translate('initialSettingsPage.troubleshoot.invalidFile')}
+                prompt={translate('initialSettingsPage.troubleshoot.invalidFileDescription')}
+                isSmallScreenWidth={isSmallScreenWidth}
+                onSecondOptionSubmit={() => setIsErrorModalVisible(false)}
+                secondOptionText={translate('common.ok')}
+                isVisible={isErrorModalVisible}
+                onClose={() => setIsErrorModalVisible(false)}
+            />
+        </>
+    );
+}
+
+export default BaseImportOnyxState;
diff --git a/src/components/ImportOnyxState/index.native.tsx b/src/components/ImportOnyxState/index.native.tsx
index 126ea641078f..b07f47d3a5de 100644
--- a/src/components/ImportOnyxState/index.native.tsx
+++ b/src/components/ImportOnyxState/index.native.tsx
@@ -1,17 +1,13 @@
-import React from 'react';
+import React, {useState} from 'react';
 import RNFS from 'react-native-fs';
 import Onyx from 'react-native-onyx';
 import type {FileObject} from '@components/AttachmentModal';
-import AttachmentPicker from '@components/AttachmentPicker';
-import * as Expensicons from '@components/Icon/Expensicons';
-import MenuItem from '@components/MenuItem';
-import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
 import {KEYS_TO_PRESERVE, setIsUsingImportedState} from '@libs/actions/App';
 import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import BaseImportOnyxState from './BaseImportOnyxState';
 import type ImportOnyxStateProps from './types';
 import {cleanAndTransformState} from './utils';
 
@@ -68,8 +64,7 @@ function applyStateInChunks(state: OnyxValues) {
 }
 
 export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxStateProps) {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
+    const [isErrorModalVisible, setIsErrorModalVisible] = useState(false);
 
     const handleFileRead = (file: FileObject) => {
         if (!file.uri) {
@@ -88,6 +83,9 @@ export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxSta
                     });
                 });
             })
+            .catch(() => {
+                setIsErrorModalVisible(true);
+            })
             .finally(() => {
                 setIsLoading(false);
             });
@@ -98,25 +96,10 @@ export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxSta
     };
 
     return (
-        <AttachmentPicker
-            acceptedFileTypes={['text']}
-            shouldHideCameraOption
-            shouldHideGalleryOption
-        >
-            {({openPicker}) => {
-                return (
-                    <MenuItem
-                        icon={Expensicons.Upload}
-                        title={translate('initialSettingsPage.troubleshoot.importOnyxState')}
-                        wrapperStyle={[styles.sectionMenuItemTopDescription]}
-                        onPress={() => {
-                            openPicker({
-                                onPicked: handleFileRead,
-                            });
-                        }}
-                    />
-                );
-            }}
-        </AttachmentPicker>
+        <BaseImportOnyxState
+            onFileRead={handleFileRead}
+            isErrorModalVisible={isErrorModalVisible}
+            setIsErrorModalVisible={setIsErrorModalVisible}
+        />
     );
 }
diff --git a/src/components/ImportOnyxState/index.tsx b/src/components/ImportOnyxState/index.tsx
index b3f889d32ea4..8add2d9172fd 100644
--- a/src/components/ImportOnyxState/index.tsx
+++ b/src/components/ImportOnyxState/index.tsx
@@ -1,22 +1,17 @@
-import React from 'react';
+import React, {useState} from 'react';
 import Onyx from 'react-native-onyx';
 import type {FileObject} from '@components/AttachmentModal';
-import AttachmentPicker from '@components/AttachmentPicker';
-import * as Expensicons from '@components/Icon/Expensicons';
-import MenuItem from '@components/MenuItem';
-import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
 import {KEYS_TO_PRESERVE, setIsUsingImportedState} from '@libs/actions/App';
 import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import BaseImportOnyxState from './BaseImportOnyxState';
 import type ImportOnyxStateProps from './types';
 import {cleanAndTransformState} from './utils';
 
 export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxStateProps) {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
+    const [isErrorModalVisible, setIsErrorModalVisible] = useState(false);
 
     const handleFileRead = (file: FileObject) => {
         if (!file.uri) {
@@ -27,21 +22,27 @@ export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxSta
         const blob = new Blob([file as BlobPart]);
         const response = new Response(blob);
 
-        response.text().then((text) => {
-            const fileContent = text;
-            const transformedState = cleanAndTransformState<OnyxValues>(fileContent);
-            setShouldForceOffline(true);
-            Onyx.clear(KEYS_TO_PRESERVE).then(() => {
-                Onyx.multiSet(transformedState)
-                    .then(() => {
-                        setIsUsingImportedState(true);
-                        Navigation.navigate(ROUTES.HOME);
-                    })
-                    .finally(() => {
-                        setIsLoading(false);
-                    });
+        response
+            .text()
+            .then((text) => {
+                const fileContent = text;
+                const transformedState = cleanAndTransformState<OnyxValues>(fileContent);
+                setShouldForceOffline(true);
+                Onyx.clear(KEYS_TO_PRESERVE).then(() => {
+                    Onyx.multiSet(transformedState)
+                        .then(() => {
+                            setIsUsingImportedState(true);
+                            Navigation.navigate(ROUTES.HOME);
+                        })
+                        .finally(() => {
+                            setIsLoading(false);
+                        });
+                });
+            })
+            .catch(() => {
+                setIsErrorModalVisible(true);
+                setIsLoading(false);
             });
-        });
 
         if (isLoading) {
             setIsLoading(false);
@@ -49,21 +50,10 @@ export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxSta
     };
 
     return (
-        <AttachmentPicker acceptedFileTypes={['text']}>
-            {({openPicker}) => {
-                return (
-                    <MenuItem
-                        icon={Expensicons.Upload}
-                        title={translate('initialSettingsPage.troubleshoot.importOnyxState')}
-                        wrapperStyle={[styles.sectionMenuItemTopDescription]}
-                        onPress={() => {
-                            openPicker({
-                                onPicked: handleFileRead,
-                            });
-                        }}
-                    />
-                );
-            }}
-        </AttachmentPicker>
+        <BaseImportOnyxState
+            onFileRead={handleFileRead}
+            isErrorModalVisible={isErrorModalVisible}
+            setIsErrorModalVisible={setIsErrorModalVisible}
+        />
     );
 }
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 8f4f7ee6e2d9..b8112ae6145b 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1182,6 +1182,8 @@ const translations = {
             resetToOriginalState: 'Reset to original state',
             usingImportedState: 'You are using imported state. Press here to clear it.',
             debugMode: 'Debug mode',
+            invalidFile: 'Invalid file',
+            invalidFileDescription: 'The file you are trying to import is not valid. Please try again.',
         },
         debugConsole: {
             saveLog: 'Save log',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 3134ed933cf3..ab1718a7d74d 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1186,6 +1186,8 @@ const translations = {
             resetToOriginalState: 'Restablecer al estado original',
             usingImportedState: 'Estás utilizando el estado importado. Pulsa aquí para borrarlo.',
             debugMode: 'Modo depuración',
+            invalidFile: 'Archivo inválido',
+            invalidFileDescription: 'El archivo que estás intentando importar no es válido. Por favor, inténtalo de nuevo.',
         },
         debugConsole: {
             saveLog: 'Guardar registro',

From ca55510da880b910c4ce220a7e38283d85d32c93 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 27 Sep 2024 12:00:02 +0200
Subject: [PATCH 36/42] navigate to home on clear, do not import preferred
 theme

---
 src/components/ImportOnyxState/utils.ts   | 2 +-
 src/components/ImportedStateIndicator.tsx | 2 +-
 src/libs/actions/App.ts                   | 7 ++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ImportOnyxState/utils.ts b/src/components/ImportOnyxState/utils.ts
index c352ecc6fe5d..45b70837082b 100644
--- a/src/components/ImportOnyxState/utils.ts
+++ b/src/components/ImportOnyxState/utils.ts
@@ -3,7 +3,7 @@ import type {UnknownRecord} from 'type-fest';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 // List of Onyx keys from the .txt file we want to keep for the local override
-const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
+const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION, ONYXKEYS.PREFERRED_THEME];
 
 function isRecord(value: unknown): value is Record<string, unknown> {
     return typeof value === 'object' && !Array.isArray(value) && value !== null;
diff --git a/src/components/ImportedStateIndicator.tsx b/src/components/ImportedStateIndicator.tsx
index f3028f28d62e..029c0f51cd33 100644
--- a/src/components/ImportedStateIndicator.tsx
+++ b/src/components/ImportedStateIndicator.tsx
@@ -24,7 +24,7 @@ function ImportedStateIndicator() {
                 shouldRemoveLeftBorderRadius
                 shouldRemoveRightBorderRadius
                 text={translate('initialSettingsPage.troubleshoot.usingImportedState')}
-                onPress={clearOnyxAndResetApp}
+                onPress={() => clearOnyxAndResetApp(true)}
                 textStyles={[styles.fontWeightNormal]}
             />
         </View>
diff --git a/src/libs/actions/App.ts b/src/libs/actions/App.ts
index e2db63a9a480..370ddc8185a5 100644
--- a/src/libs/actions/App.ts
+++ b/src/libs/actions/App.ts
@@ -514,7 +514,7 @@ function setIsUsingImportedState(usingImportedState: boolean) {
     Onyx.set(ONYXKEYS.IS_USING_IMPORTED_STATE, usingImportedState);
 }
 
-function clearOnyxAndResetApp() {
+function clearOnyxAndResetApp(shouldNavigateToHomepage?: boolean) {
     // The value of isUsingImportedState will be lost once Onyx is cleared, so we need to store it
     const isStateImported = isUsingImportedState;
     const sequentialQueue = PersistedRequests.getAll();
@@ -523,6 +523,11 @@ function clearOnyxAndResetApp() {
         if (isStateImported) {
             setShouldForceOffline(false);
         }
+
+        if (shouldNavigateToHomepage) {
+            Navigation.navigate(ROUTES.HOME);
+        }
+
         // Requests in a sequential queue should be called even if the Onyx state is reset, so we do not lose any pending data.
         // However, the OpenApp request must be called before any other request in a queue to ensure data consistency.
         // To do that, sequential queue is cleared together with other keys, and then it's restored once the OpenApp request is resolved.

From 619414de9b32c7f007dbe9c2bf3aa0f64081cecf Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 30 Sep 2024 08:41:29 +0200
Subject: [PATCH 37/42] default reportID as string

---
 src/pages/home/report/ReportActionItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index db528add3936..3bcb5c2f186a 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -179,7 +179,7 @@ function ReportActionItem({
     const theme = useTheme();
     const styles = useThemeStyles();
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- This is needed to prevent the app from crashing when the app is using imported state.
-    const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID || -1}`);
+    const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID || '-1'}`);
     const StyleUtils = useStyleUtils();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const [isContextMenuActive, setIsContextMenuActive] = useState(() => ReportActionContextMenu.isActiveReportAction(action.reportActionID));

From 7265c2374f2fa4412288955dc95bc3f6dca064fe Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 30 Sep 2024 08:43:50 +0200
Subject: [PATCH 38/42] fix linter

---
 .../home/report/ReportActionCompose/ReportActionCompose.tsx      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
index ecfde0da611b..a1283dd74966 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -125,7 +125,6 @@ function ReportActionCompose({
     const navigation = useNavigation();
     const [blockedFromConcierge] = useOnyx(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE);
     const [shouldShowComposeInput = true] = useOnyx(ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT);
-    const [isUsingImportedState] = useOnyx(ONYXKEYS.IS_USING_IMPORTED_STATE);
 
     /**
      * Updates the Highlight state of the composer

From c6ff8e3b7948573af25dc8d0386b6a7561286b59 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 2 Oct 2024 08:54:47 +0200
Subject: [PATCH 39/42] disable force offline when in import mode

---
 src/components/TestToolMenu.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx
index 115ce3bfc152..e81405d026b4 100644
--- a/src/components/TestToolMenu.tsx
+++ b/src/components/TestToolMenu.tsx
@@ -32,6 +32,7 @@ const USER_DEFAULT: UserOnyx = {
 
 function TestToolMenu({network}: TestToolMenuProps) {
     const [user = USER_DEFAULT] = useOnyx(ONYXKEYS.USER);
+    const [isUsingImportedState] = useOnyx(ONYXKEYS.IS_USING_IMPORTED_STATE);
     const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi();
     const isDebugModeEnabled = !!user?.isDebugModeEnabled;
     const styles = useThemeStyles();
@@ -73,6 +74,7 @@ function TestToolMenu({network}: TestToolMenuProps) {
                     accessibilityLabel="Force offline"
                     isOn={!!network?.shouldForceOffline}
                     onToggle={() => Network.setShouldForceOffline(!network?.shouldForceOffline)}
+                    disabled={isUsingImportedState}
                 />
             </TestToolRow>
 

From 6bdc95f9805eefdae3f0577aa77ef5fbbbeae56b Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 2 Oct 2024 09:05:23 +0200
Subject: [PATCH 40/42] remove betas from omitted keys

---
 src/components/ImportOnyxState/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ImportOnyxState/utils.ts b/src/components/ImportOnyxState/utils.ts
index 45b70837082b..a5f24fa80714 100644
--- a/src/components/ImportOnyxState/utils.ts
+++ b/src/components/ImportOnyxState/utils.ts
@@ -3,7 +3,7 @@ import type {UnknownRecord} from 'type-fest';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 // List of Onyx keys from the .txt file we want to keep for the local override
-const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION, ONYXKEYS.PREFERRED_THEME];
+const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION, ONYXKEYS.PREFERRED_THEME];
 
 function isRecord(value: unknown): value is Record<string, unknown> {
     return typeof value === 'object' && !Array.isArray(value) && value !== null;

From 3e305c360254b849962917a2be19a07c99424145 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 2 Oct 2024 09:16:27 +0200
Subject: [PATCH 41/42] fix data transformation in export

---
 src/libs/ExportOnyxState/common.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/libs/ExportOnyxState/common.ts b/src/libs/ExportOnyxState/common.ts
index 564db322930c..46bc425f22e2 100644
--- a/src/libs/ExportOnyxState/common.ts
+++ b/src/libs/ExportOnyxState/common.ts
@@ -22,13 +22,13 @@ const maskSessionDetails = (data: Record<string, unknown>): Record<string, unkno
     };
 };
 
-const maskFragileData = (data: Record<string, unknown>, parentKey?: string): Record<string, unknown> => {
-    const maskedData: Record<string, unknown> = {};
-
-    if (!data) {
-        return maskedData;
+const maskFragileData = (data: Record<string, unknown> | unknown[], parentKey?: string): Record<string, unknown> | unknown[] => {
+    if (Array.isArray(data)) {
+        return data.map((item): unknown => (typeof item === 'object' ? maskFragileData(item as Record<string, unknown>, parentKey) : item));
     }
 
+    const maskedData: Record<string, unknown> = {};
+
     Object.keys(data).forEach((key) => {
         if (!Object.prototype.hasOwnProperty.call(data, key)) {
             return;
@@ -56,7 +56,7 @@ const maskOnyxState = (data: Record<string, unknown>, isMaskingFragileDataEnable
     onyxState = maskSessionDetails(onyxState);
     // Mask fragile data other than session details if the user has enabled the option
     if (isMaskingFragileDataEnabled) {
-        onyxState = maskFragileData(onyxState);
+        onyxState = maskFragileData(onyxState) as Record<string, unknown>;
     }
 
     return onyxState;

From 2790ba4f1069d7be2fd400d98336f5dd89d8e16b Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Thu, 3 Oct 2024 08:43:34 +0200
Subject: [PATCH 42/42] handle null value when masking data

---
 src/libs/ExportOnyxState/common.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/libs/ExportOnyxState/common.ts b/src/libs/ExportOnyxState/common.ts
index 46bc425f22e2..46a47528f1fe 100644
--- a/src/libs/ExportOnyxState/common.ts
+++ b/src/libs/ExportOnyxState/common.ts
@@ -22,7 +22,11 @@ const maskSessionDetails = (data: Record<string, unknown>): Record<string, unkno
     };
 };
 
-const maskFragileData = (data: Record<string, unknown> | unknown[], parentKey?: string): Record<string, unknown> | unknown[] => {
+const maskFragileData = (data: Record<string, unknown> | unknown[] | null, parentKey?: string): Record<string, unknown> | unknown[] | null => {
+    if (data === null) {
+        return data;
+    }
+
     if (Array.isArray(data)) {
         return data.map((item): unknown => (typeof item === 'object' ? maskFragileData(item as Record<string, unknown>, parentKey) : item));
     }