chore: Migrate default preference to mmkv (#10373)

## **Description**

* Migration for migrate default preference data to mmkv 
* Refactor of the default preferences usage across the app

```
Before (Default Preferences)
{"@MetaMask:MetaMetricsId": "558de5e5-d382-4a9e-9f24-cce477116414", "@MetaMask:analyticsDataRecorded": "true", "@MetaMask:metricsOptIn": "agreed", "@MetaMask:onboardingWizard": "explored"}
```
```
After  (MMKV)
 MetaMetricsId 558de5e5-d382-4a9e-9f24-cce477116414
 analyticsDataRecorded true
 metricsOptIn agreed
 onboardingWizard explored
```
## **Related issues**

Fixes:

## **Manual testing steps**

1. install the app
2. login 
3. close onboarding flow
4. update the app with the code on this PR
5. the onboarding flow shouldn't appear

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

app/components/UI/OnboardingWizard/index.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
 import { View, StyleSheet, TextStyle } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
-import DefaultPreference from 'react-native-default-preference';
 import Modal from 'react-native-modal';
 import type { Theme } from '@metamask/design-tokens';
 import { DrawerContext } from '../../../components/Nav/Main/MainNavigator';
@@ -23,7 +22,7 @@ import {
 } from '../../../core/Analytics';
 import { useTheme } from '../../../util/theme';
 import Device from '../../../util/device';
-import AsyncStorageWrapper from '../../../store/async-storage-wrapper';
+import StorageWrapper from '../../../store/async-storage-wrapper';
 import { isTest } from '../../../util/test/utils';
 import { useMetrics } from '../../hooks/useMetrics';
 
@@ -103,7 +102,7 @@ const OnboardingWizard = ({
    * Close onboarding wizard setting step to 0 and closing drawer
    */
   const closeOnboardingWizard = async () => {
-    await DefaultPreference.set(ONBOARDING_WIZARD, EXPLORED);
+    await StorageWrapper.setItem(ONBOARDING_WIZARD, EXPLORED);
     dispatch(setOnboardingWizardStep(0));
     drawerRef?.current?.dismissDrawer?.();
     trackEvent(MetaMetricsEvents.ONBOARDING_TOUR_SKIPPED, {
@@ -118,7 +117,7 @@ const OnboardingWizard = ({
   // it indicates that it was provided by fixtures, triggering the call to closeOnboardingWizard().
   if (isTest && step === 1) {
     const inTestCloseOnboardingWizard = async () => {
-      const wizardStep = await AsyncStorageWrapper.getItem(ONBOARDING_WIZARD);
+      const wizardStep = await StorageWrapper.getItem(ONBOARDING_WIZARD);
       if (wizardStep === EXPLORED) {
         await closeOnboardingWizard();
       }

app/components/UI/OptinMetrics/index.js

@@ -25,7 +25,7 @@ import {
   MetaMetricsEvents,
   withMetricsAwareness,
 } from '../../hooks/useMetrics';
-import DefaultPreference from 'react-native-default-preference';
+import StorageWrapper from '../../../store/async-storage-wrapper';
 import { ThemeContext } from '../../../util/theme';
 import { MetaMetricsOptInSelectorsIDs } from '../../../../e2e/selectors/Onboarding/MetaMetricsOptIn.selectors';
 import Checkbox from '../../../component-library/components/Checkbox';
@@ -236,7 +236,7 @@ class OptinMetrics extends PureComponent {
     }
 
     // Get onboarding wizard state
-    const onboardingWizard = await DefaultPreference.get(ONBOARDING_WIZARD);
+    const onboardingWizard = await StorageWrapper.getItem(ONBOARDING_WIZARD);
     if (onboardingWizard) {
       this.props.navigation.reset({ routes: [{ name: 'HomeNav' }] });
     } else {

app/components/Views/AccountBackupStep1/index.js

@@ -27,7 +27,7 @@ import { connect } from 'react-redux';
 import setOnboardingWizardStep from '../../../actions/wizard';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 
-import DefaultPreference from 'react-native-default-preference';
+import StorageWrapper from '../../../store/async-storage-wrapper';
 import { useTheme } from '../../../util/theme';
 import { ManualBackUpStepsSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ManualBackUpSteps.selectors';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
@@ -192,7 +192,7 @@ const AccountBackupStep1 = (props) => {
     hideRemindLaterModal();
     track(MetaMetricsEvents.WALLET_SECURITY_SKIP_CONFIRMED);
     // Get onboarding wizard state
-    const onboardingWizard = await DefaultPreference.get(ONBOARDING_WIZARD);
+    const onboardingWizard = await StorageWrapper.getItem(ONBOARDING_WIZARD);
     !onboardingWizard && props.setOnboardingWizardStep(1);
     props.navigation.reset({
       index: 1,

app/components/Views/ImportFromSecretRecoveryPhrase/index.js

@@ -11,12 +11,11 @@ import {
   Platform,
 } from 'react-native';
 import { connect } from 'react-redux';
-import AsyncStorage from '../../../store/async-storage-wrapper';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import zxcvbn from 'zxcvbn';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import { OutlinedTextField } from 'react-native-material-textfield';
-import DefaultPreference from 'react-native-default-preference';
+import StorageWrapper from '../../../store/async-storage-wrapper';
 import Clipboard from '@react-native-clipboard/clipboard';
 import AppConstants from '../../../core/AppConstants';
 import Device from '../../../util/device';
@@ -117,10 +116,10 @@ const ImportFromSecretRecoveryPhrase = ({
 
     const setBiometricsOption = async () => {
       const authData = await Authentication.getType();
-      const previouslyDisabled = await AsyncStorage.getItem(
+      const previouslyDisabled = await StorageWrapper.getItem(
         BIOMETRY_CHOICE_DISABLED,
       );
-      const passcodePreviouslyDisabled = await AsyncStorage.getItem(
+      const passcodePreviouslyDisabled = await StorageWrapper.getItem(
         PASSCODE_DISABLED,
       );
       if (authData.currentAuthType === AUTHENTICATION_TYPE.PASSCODE) {
@@ -228,7 +227,9 @@ const ImportFromSecretRecoveryPhrase = ({
             await handleRejectedOsBiometricPrompt(parsedSeed);
         }
         // Get onboarding wizard state
-        const onboardingWizard = await DefaultPreference.get(ONBOARDING_WIZARD);
+        const onboardingWizard = await StorageWrapper.getItem(
+          ONBOARDING_WIZARD,
+        );
         setLoading(false);
         passwordSet();
         setLockTime(AppConstants.DEFAULT_LOCK_TIMEOUT);

app/components/Views/Login/index.js

@@ -16,7 +16,6 @@ import Text, {
   TextColor,
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
-import AsyncStorage from '../../../store/async-storage-wrapper';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import Button from '@metamask/react-native-button';
 import StyledButton from '../../UI/StyledButton';
@@ -44,7 +43,7 @@ import Routes from '../../../constants/navigation/Routes';
 import { passwordRequirementsMet } from '../../../util/password';
 import ErrorBoundary from '../ErrorBoundary';
 import { toLowerCaseEquals } from '../../../util/general';
-import DefaultPreference from 'react-native-default-preference';
+import StorageWrapper from '../../../store/async-storage-wrapper';
 import { Authentication } from '../../../core';
 import AUTHENTICATION_TYPE from '../../../constants/userProperties';
 import { ThemeContext, mockTheme } from '../../../util/theme';
@@ -251,10 +250,10 @@ class Login extends PureComponent {
     const authData = await Authentication.getType();
 
     //Setup UI to handle Biometric
-    const previouslyDisabled = await AsyncStorage.getItem(
+    const previouslyDisabled = await StorageWrapper.getItem(
       BIOMETRY_CHOICE_DISABLED,
     );
-    const passcodePreviouslyDisabled = await AsyncStorage.getItem(
+    const passcodePreviouslyDisabled = await StorageWrapper.getItem(
       PASSCODE_DISABLED,
     );
 
@@ -373,7 +372,7 @@ class Login extends PureComponent {
       Keyboard.dismiss();
 
       // Get onboarding wizard state
-      const onboardingWizard = await DefaultPreference.get(ONBOARDING_WIZARD);
+      const onboardingWizard = await StorageWrapper.getItem(ONBOARDING_WIZARD);
       if (onboardingWizard) {
         this.props.navigation.replace(Routes.ONBOARDING.HOME_NAV);
       } else {
@@ -434,7 +433,7 @@ class Login extends PureComponent {
     field?.blur();
     try {
       await Authentication.appTriggeredAuth();
-      const onboardingWizard = await DefaultPreference.get(ONBOARDING_WIZARD);
+      const onboardingWizard = await StorageWrapper.getItem(ONBOARDING_WIZARD);
       if (!onboardingWizard) this.props.setOnboardingWizardStep(1);
       this.props.navigation.replace(Routes.ONBOARDING.HOME_NAV);
       // Only way to land back on Login is to log out, which clears credentials (meaning we should not show biometric button)

app/components/Views/ManualBackupStep3/index.js

@@ -3,7 +3,6 @@ import { Alert, BackHandler, View, StyleSheet, Keyboard } from 'react-native';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { fontStyles } from '../../../styles/common';
-import AsyncStorage from '../../../store/async-storage-wrapper';
 import OnboardingProgress from '../../UI/OnboardingProgress';
 import { strings } from '../../../../locales/i18n';
 import { showAlert } from '../../../actions/alert';
@@ -18,7 +17,7 @@ import {
   SEED_PHRASE_HINTS,
 } from '../../../constants/storage';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import DefaultPreference from 'react-native-default-preference';
+import StorageWrapper from '../../../store/async-storage-wrapper';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 import OnboardingSuccess from '../OnboardingSuccess';
@@ -118,7 +117,7 @@ class ManualBackupStep3 extends PureComponent {
 
   componentDidMount = async () => {
     this.updateNavBar();
-    const currentSeedphraseHints = await AsyncStorage.getItem(
+    const currentSeedphraseHints = await StorageWrapper.getItem(
       SEED_PHRASE_HINTS,
     );
     const parsedHints =
@@ -165,19 +164,19 @@ class ManualBackupStep3 extends PureComponent {
       return;
     }
     this.toggleHint();
-    const currentSeedphraseHints = await AsyncStorage.getItem(
+    const currentSeedphraseHints = await StorageWrapper.getItem(
       SEED_PHRASE_HINTS,
     );
     const parsedHints = JSON.parse(currentSeedphraseHints);
-    await AsyncStorage.setItem(
+    await StorageWrapper.setItem(
       SEED_PHRASE_HINTS,
       JSON.stringify({ ...parsedHints, manualBackup: hintText }),
     );
     this.track(MetaMetricsEvents.WALLET_SECURITY_RECOVERY_HINT_SAVED);
   };
 
   done = async () => {
-    const onboardingWizard = await DefaultPreference.get(ONBOARDING_WIZARD);
+    const onboardingWizard = await StorageWrapper.getItem(ONBOARDING_WIZARD);
     if (onboardingWizard) {
       this.props.navigation.reset({ routes: [{ name: 'HomeNav' }] });
     } else {

app/components/hooks/DeleteWallet/useDeleteWallet.test.tsx

@@ -16,6 +16,11 @@ jest.mock('../../../core/Engine', () => ({
   },
 }));
 
+jest.mock('../../../store/async-storage-wrapper', () => ({
+  getItem: jest.fn(),
+  removeItem: jest.fn(),
+}));
+
 describe('useDeleteWallet', () => {
   test('it should provide two outputs of type function', () => {
     const { result } = renderHook(() => useDeleteWallet());