chore: Storages update (#3077)

apps/wallet-mobile/ios/Podfile.lock

@@ -109,6 +109,9 @@ PODS:
     - hermes-engine/Pre-built (= 0.71.14)
   - hermes-engine/Pre-built (0.71.14)
   - libevent (2.1.12)
+  - MMKV (1.3.3):
+    - MMKVCore (~> 1.3.3)
+  - MMKVCore (1.3.3)
   - MultiplatformBleAdapter (0.1.9)
   - OpenSSL-Universal (1.1.1100)
   - Permission-BluetoothPeripheral (3.8.4):
@@ -385,6 +388,9 @@ PODS:
     - React-Core
   - react-native-haskell-shelley (6.0.0-alpha.2):
     - React
+  - react-native-mmkv (2.11.0):
+    - MMKV (>= 1.2.13)
+    - React-Core
   - react-native-pager-view (6.2.0):
     - React-Core
   - react-native-quick-base64 (2.0.6):
@@ -624,6 +630,7 @@ DEPENDENCIES:
   - react-native-ble-plx (from `../../../node_modules/react-native-ble-plx`)
   - react-native-config (from `../../../node_modules/react-native-config`)
   - "react-native-haskell-shelley (from `../../../node_modules/@emurgo/csl-mobile-bridge`)"
+  - react-native-mmkv (from `../../../node_modules/react-native-mmkv`)
   - react-native-pager-view (from `../../../node_modules/react-native-pager-view`)
   - react-native-quick-base64 (from `../../../node_modules/react-native-quick-base64`)
   - react-native-randombytes (from `../../../node_modules/react-native-randombytes`)
@@ -675,6 +682,8 @@ SPEC REPOS:
     - FlipperKit
     - fmt
     - libevent
+    - MMKV
+    - MMKVCore
     - MultiplatformBleAdapter
     - OpenSSL-Universal
     - Sentry
@@ -770,6 +779,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-config"
   react-native-haskell-shelley:
     :path: "../../../node_modules/@emurgo/csl-mobile-bridge"
+  react-native-mmkv:
+    :path: "../../../node_modules/react-native-mmkv"
   react-native-pager-view:
     :path: "../../../node_modules/react-native-pager-view"
   react-native-quick-base64:
@@ -875,6 +886,8 @@ SPEC CHECKSUMS:
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: d7cc127932c89c53374452d6f93473f1970d8e88
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
+  MMKV: f902fb6719da13c2ab0965233d8963a59416f911
+  MMKVCore: d26e4d3edd5cb8588c2569222cbd8be4231374e9
   MultiplatformBleAdapter: 5a6a897b006764392f9cef785e4360f54fb9477d
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   Permission-BluetoothPeripheral: 2b88a131074edafd8a46a5cda4ba610ec986d2fb
@@ -901,6 +914,7 @@ SPEC CHECKSUMS:
   react-native-ble-plx: f10240444452dfb2d2a13a0e4f58d7783e92d76e
   react-native-config: 86038147314e2e6d10ea9972022aa171e6b1d4d8
   react-native-haskell-shelley: c01783e1181b8fc1fea715a288801056d70afc07
+  react-native-mmkv: e97c0c79403fb94577e5d902ab1ebd42b0715b43
   react-native-pager-view: 0ccb8bf60e2ebd38b1f3669fa3650ecce81db2df
   react-native-quick-base64: 62290829c619fbabca4c41cfec75ae759d08fc1c
   react-native-randombytes: b6677f7d495c27e9ee0dbd77ebc97b3c59173729

apps/wallet-mobile/package.json

@@ -151,7 +151,7 @@
     "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-error-boundary": "^3.1.4",
-    "react-intl": "^6.4.1",
+    "react-intl": "^6.6.2",
     "react-native": "~0.71.0",
     "react-native-background-timer": "2.4.1",
     "react-native-ble-plx": "^2.0.3",
@@ -165,6 +165,7 @@
     "react-native-linear-gradient": "2.5.6",
     "react-native-localize": "^3.0.2",
     "react-native-markdown-display": "^7.0.0-alpha.2",
+    "react-native-mmkv": "^2.11.0",
     "react-native-pager-view": "^6.2.0",
     "react-native-paper": "^4.12.0",
     "react-native-permissions": "^3.8.0",
@@ -225,17 +226,15 @@
     "@storybook/theming": "<7.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^9.0.0",
-    "@tsconfig/react-native": "^2.0.2",
+    "@tsconfig/react-native": "^3.0.3",
     "@types/bs58": "^4.0.4",
     "@types/chai": "^4.3.4",
-    "@types/jest": "^29.2.1",
+    "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.175",
     "@types/mocha": "^10.0.0",
     "@types/node": "^16.18.27",
-    "@types/react": "18.2.0",
-    "@types/react-native": "0.71.6",
     "@types/react-native-background-timer": "^2.0.0",
-    "@types/react-test-renderer": "^18.0.0",
+    "@types/react-test-renderer": "^18.0.7",
     "@types/tinycolor2": "^1.4.6",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
@@ -278,7 +277,7 @@
     "ts-jest": "^29.1.0",
     "ts-node": "^10.7.0",
     "ts-sinon": "^2.0.2",
-    "typescript": "4.8.4",
+    "typescript": "^5.3.3",
     "typescript-coverage-report": "^0.6.4",
     "yargs": "^17.7.2"
   },

apps/wallet-mobile/src/HW/LedgerConnect/LedgerConnect.tsx

@@ -3,9 +3,9 @@
 // @ts-ignore
 import TransportHID from '@emurgo/react-native-hid'
 import TransportBLE from '@ledgerhq/react-native-hw-transport-ble'
-import React from 'react'
+import * as React from 'react'
 import type {IntlShape} from 'react-intl'
-import {defineMessages, injectIntl} from 'react-intl'
+import {defineMessages, useIntl} from 'react-intl'
 import {ActivityIndicator, Alert, FlatList, Image, RefreshControl, ScrollView, StyleSheet, View} from 'react-native'
 
 import bleImage from '../../assets/img/bluetooth.png'
@@ -305,7 +305,11 @@ class _LedgerConnect extends React.Component<Props, State> {
   }
 }
 
-export const LedgerConnect = injectIntl(_LedgerConnect)
+export const LedgerConnect = (props: Omit<Props, 'intl'>) => {
+  const intl = useIntl()
+
+  return <_LedgerConnect {...props} intl={intl} />
+}
 
 const messages = defineMessages({
   caption: {

apps/wallet-mobile/src/InitApp.tsx

@@ -1,4 +1,4 @@
-import {isString, useStorage} from '@yoroi/common'
+import {isString, useAsyncStorage} from '@yoroi/common'
 import {App} from '@yoroi/types'
 import React, {useEffect, useRef} from 'react'
 import {Platform, UIManager} from 'react-native'
@@ -29,7 +29,7 @@ export const InitApp = () => {
 
 const useInitApp = () => {
   const [loaded, setLoaded] = React.useState(false)
-  const storage = useStorage()
+  const storage = useAsyncStorage()
   const crashReportsEnabled = useCrashReportsEnabled()
 
   const {initialised: screenShareInitialized} = useInitScreenShare()

apps/wallet-mobile/src/TxHistory/TxDetails/TxDetails.stories.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {storiesOf} from '@storybook/react-native'
-import {rootStorage, StorageProvider} from '@yoroi/common'
+import {AsyncStorageProvider} from '@yoroi/common'
 import React from 'react'
 
 import {QueryProvider, RouteProvider} from '../../../.storybook/decorators'
 import {SelectedWalletProvider} from '../../SelectedWallet'
 import {mocks} from '../../yoroi-wallets/mocks'
+import {rootStorage} from '../../yoroi-wallets/storage/rootStorage'
 import {TxDetails} from './TxDetails'
 
 storiesOf('TxDetails', module)
@@ -48,7 +49,7 @@ storiesOf('TxDetails', module)
     <QueryProvider>
       <RouteProvider params={{id: mockTransaction.id}}>
         <SelectedWalletProvider wallet={mocks.wallet}>
-          <StorageProvider
+          <AsyncStorageProvider
             storage={{
               ...rootStorage,
               join: (key: string) => {
@@ -64,7 +65,7 @@ storiesOf('TxDetails', module)
             }}
           >
             <TxDetails />
-          </StorageProvider>
+          </AsyncStorageProvider>
         </SelectedWalletProvider>
       </RouteProvider>
     </QueryProvider>

apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx

@@ -1,7 +1,7 @@
 import {init} from '@emurgo/cross-csl-mobile'
 import {useNavigation} from '@react-navigation/native'
 import {createStackNavigator} from '@react-navigation/stack'
-import {useStorage} from '@yoroi/common'
+import {useAsyncStorage} from '@yoroi/common'
 import {resolverApiMaker, resolverManagerMaker, ResolverProvider, resolverStorageMaker} from '@yoroi/resolver'
 import {
   milkTokenId,
@@ -68,7 +68,7 @@ export const TxHistoryNavigator = () => {
   const strings = useStrings()
   const wallet = useSelectedWallet()
   const walletName = useWalletName(wallet)
-  const storage = useStorage()
+  const storage = useAsyncStorage()
   const {theme} = useTheme()
 
   // modal

apps/wallet-mobile/src/YoroiApp.tsx

@@ -1,4 +1,4 @@
-import {rootStorage, StorageProvider} from '@yoroi/common'
+import {AsyncStorageProvider} from '@yoroi/common'
 import {ThemeProvider} from '@yoroi/theme'
 import React from 'react'
 import {LogBox, Platform, StyleSheet, UIManager} from 'react-native'
@@ -20,6 +20,7 @@ import {makeMetricsManager, MetricsProvider} from './metrics/metricsManager'
 import {SelectedWalletMetaProvider, SelectedWalletProvider} from './SelectedWallet/Context'
 import {WalletManagerProvider} from './WalletManager'
 import {useMigrations} from './yoroi-wallets/migrations'
+import {rootStorage} from './yoroi-wallets/storage/rootStorage'
 import {walletManager} from './yoroi-wallets/walletManager'
 
 enableScreens()
@@ -43,7 +44,7 @@ export const YoroiApp = () => {
   const migrated = useMigrations(rootStorage)
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
   return migrated ? (
-    <StorageProvider>
+    <AsyncStorageProvider storage={rootStorage}>
       <MetricsProvider metricsManager={metricsManager}>
         <WalletManagerProvider walletManager={walletManager}>
           <ErrorBoundary>
@@ -71,6 +72,6 @@ export const YoroiApp = () => {
           </ErrorBoundary>
         </WalletManagerProvider>
       </MetricsProvider>
-    </StorageProvider>
+    </AsyncStorageProvider>
   ) : null
 }

apps/wallet-mobile/src/auth/ChangePinScreen/ChangePinScreen.stories.tsx

@@ -1,14 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {action} from '@storybook/addon-actions'
 import {storiesOf} from '@storybook/react-native'
-import {rootStorage, StorageProvider} from '@yoroi/common'
+import {AsyncStorageProvider} from '@yoroi/common'
 import React from 'react'
 
+import {rootStorage} from '../../yoroi-wallets/storage/rootStorage'
 import {ChangePinScreen} from './ChangePinScreen'
 
 storiesOf('ChangePinScreen', module).add('Default', () => {
   return (
-    <StorageProvider
+    <AsyncStorageProvider
       storage={{
         ...rootStorage,
         getItem: async (key): Promise<any> => {
@@ -21,7 +22,7 @@ storiesOf('ChangePinScreen', module).add('Default', () => {
       }}
     >
       <ChangePinScreen onDone={action('onDone')} />
-    </StorageProvider>
+    </AsyncStorageProvider>
   )
 })
 

apps/wallet-mobile/src/auth/CheckPinInput/CheckPinInput.stories.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {action} from '@storybook/addon-actions'
 import {storiesOf} from '@storybook/react-native'
-import {rootStorage, StorageProvider} from '@yoroi/common'
+import {AsyncStorageProvider} from '@yoroi/common'
 import React from 'react'
 
+import {rootStorage} from '../../yoroi-wallets/storage/rootStorage'
 import {CheckPinInput} from './CheckPinInput'
 
 storiesOf('CheckPinInput', module).add('Default', () => (
-  <StorageProvider
+  <AsyncStorageProvider
     storage={{
       ...rootStorage,
       getItem: async (key) => {
@@ -17,7 +18,7 @@ storiesOf('CheckPinInput', module).add('Default', () => (
     }}
   >
     <CheckPinInput onValid={action('onValid')} />
-  </StorageProvider>
+  </AsyncStorageProvider>
 ))
 
 // PIN = 111111

apps/wallet-mobile/src/auth/CreatePinInput/CreatePinInput.stories.tsx

@@ -1,12 +1,13 @@
 import {action} from '@storybook/addon-actions'
 import {storiesOf} from '@storybook/react-native'
-import {rootStorage, StorageProvider} from '@yoroi/common'
+import {AsyncStorageProvider} from '@yoroi/common'
 import React from 'react'
 
+import {rootStorage} from '../../yoroi-wallets/storage/rootStorage'
 import {CreatePinInput} from './CreatePinInput'
 
 storiesOf('CreatePinInput', module).add('Default', () => (
-  <StorageProvider
+  <AsyncStorageProvider
     storage={{
       ...rootStorage,
       setItem: (key: string, data: unknown) => {
@@ -16,5 +17,5 @@ storiesOf('CreatePinInput', module).add('Default', () => (
     }}
   >
     <CreatePinInput onDone={action('onDone')} />
-  </StorageProvider>
+  </AsyncStorageProvider>
 ))

apps/wallet-mobile/src/auth/CreatePinScreen/CreatePinScreen.stories.tsx

@@ -1,18 +1,19 @@
 import {action} from '@storybook/addon-actions'
 import {storiesOf} from '@storybook/react-native'
-import {rootStorage, StorageProvider} from '@yoroi/common'
+import {AsyncStorageProvider} from '@yoroi/common'
 import React from 'react'
 
+import {rootStorage} from '../../yoroi-wallets/storage/rootStorage'
 import {CreatePinScreen} from './CreatePinScreen'
 
 storiesOf('CreatePinScreen', module).add('Default', () => {
   return (
-    <StorageProvider
+    <AsyncStorageProvider
       storage={{
         ...rootStorage,
       }}
     >
       <CreatePinScreen onDone={() => action('onDone')} />
-    </StorageProvider>
+    </AsyncStorageProvider>
   )
 })

apps/wallet-mobile/src/auth/PinLoginScreen/PinLoginScreen.stories.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {storiesOf} from '@storybook/react-native'
-import {rootStorage, StorageProvider} from '@yoroi/common'
+import {AsyncStorageProvider} from '@yoroi/common'
 import React from 'react'
 
+import {rootStorage} from '../../yoroi-wallets/storage/rootStorage'
 import {PinLoginScreen} from './PinLoginScreen'
 
 storiesOf('PinLoginScreen', module).add('Default', () => (
-  <StorageProvider
+  <AsyncStorageProvider
     storage={{
       ...rootStorage,
       getItem: async (): Promise<any> => {
@@ -15,7 +16,7 @@ storiesOf('PinLoginScreen', module).add('Default', () => (
     }}
   >
     <PinLoginScreen />
-  </StorageProvider>
+  </AsyncStorageProvider>
 ))
 
 // PIN = 111111

apps/wallet-mobile/src/auth/hooks.test.ts

@@ -1,7 +1,8 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
-import {parseSafe, rootStorage} from '@yoroi/common'
+import {parseSafe} from '@yoroi/common'
 
 import {disableAllEasyConfirmation, enableAuthWithOs} from '../yoroi-wallets/auth'
+import {rootStorage} from '../yoroi-wallets/storage/rootStorage'
 import {WalletMeta} from '../yoroi-wallets/walletManager'
 
 describe('enableAuthWithOs', () => {