refactor: Started extracting wallets - storage (#2631)

apps/wallet-mobile/package.json

@@ -38,6 +38,9 @@
     "release:ios:nightly": "bundle exec fastlane ios release --env nightly",
     "prerelease:ios:production": "bundle install && ./scripts/update-commit.sh && npx pod-install",
     "release:ios:production": "bundle exec fastlane ios release --env production",
+    "reset:android": "cd android && ./gradlew clean && cd ..",
+    "reset:ios": "yarn pod-install",
+    "reset": "yarn reset:android && yarn reset:ios",
     "run:android:dev:debug": "ENVFILE=.env react-native run-android --mode=devDebug --appIdSuffix=dev --verbose",
     "run:android:nightly:debug": "ENVFILE=.env.nightly react-native run-android --mode=nightlyDebug --appIdSuffix=nightly --verbose",
     "run:android:nightly:release": "ENVFILE=.env.nightly react-native run-android --mode=nightlyRelease --appIdSuffix=nightly --verbose",
@@ -123,6 +126,7 @@
     "@shopify/flash-list": "^1.4.1",
     "@unstoppabledomains/resolution": "6.0.3",
     "@yoroi/swap": "1.0.0",
+    "@yoroi/wallets": "1.0.0",
     "add": "2.0.6",
     "assert": "^2.0.0",
     "base-64": "^1.0.0",
@@ -180,7 +184,7 @@
     "util": "0.12.4",
     "uuid": "^3.3.2",
     "vm-browserify": "1.1.2",
-    "zod": "^3.21.4"
+    "zod": "^3.22.1"
   },
   "devDependencies": {
     "@amplitude/ampli": "^1.32.0",
@@ -264,6 +268,7 @@
     "lint-staged": "^13.2.2",
     "metro-react-native-babel-preset": "0.73.9",
     "node-fetch": "<3",
+    "pod-install": "^0.1.38",
     "prettier": "^2.4.1",
     "prettier-plugin-packagejson": "^2.2.11",
     "prettylint": "^1.0.0",

apps/wallet-mobile/src/AppNavigator.tsx

@@ -1,5 +1,6 @@
 import {NavigationContainer, NavigationContainerRef} from '@react-navigation/native'
 import {createStackNavigator} from '@react-navigation/stack'
+import {isString} from '@yoroi/wallets'
 import * as React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {Alert, AppState, AppStateStatus, InteractionManager, Platform} from 'react-native'
@@ -19,7 +20,6 @@ import {SearchProvider} from './Search/SearchContext'
 import {WalletInitNavigator} from './WalletInit/WalletInitNavigator'
 import {WalletNavigator} from './WalletNavigator'
 import {AuthSetting, useAuthOsEnabled, useAuthSetting, useAuthWithOs} from './yoroi-wallets/auth'
-import {isString} from './yoroi-wallets/utils'
 
 const Stack = createStackNavigator<AppRoutes>()
 const navRef = React.createRef<NavigationContainerRef<ReactNavigation.RootParamList>>()

apps/wallet-mobile/src/InitApp.tsx

@@ -1,3 +1,5 @@
+import {App} from '@yoroi/types'
+import {isString, useStorage} from '@yoroi/wallets'
 import React, {useEffect, useRef} from 'react'
 import {Platform, UIManager} from 'react-native'
 import {enableScreens} from 'react-native-screens'
@@ -7,8 +9,6 @@ import uuid from 'uuid'
 import {AppNavigator} from './AppNavigator'
 import {CONFIG, isProduction} from './legacy/config'
 import {useCrashReportsEnabled} from './yoroi-wallets/hooks'
-import {useStorage, YoroiStorage} from './yoroi-wallets/storage'
-import {isString} from './yoroi-wallets/utils'
 import {walletManager} from './yoroi-wallets/walletManager'
 
 enableScreens()
@@ -45,15 +45,15 @@ const useInitApp = () => {
   return loaded
 }
 
-const initInstallationId = async (storage: YoroiStorage) => {
+const initInstallationId = async (storage: App.Storage) => {
   const installationId = await storage.join('appSettings/').getItem('installationId', (data) => data) // LEGACY: installationId is not serialized
   if (installationId != null) return installationId
 
   const newInstallationId = uuid.v4()
   await storage.setItem('appSettings/installationId', newInstallationId, () => newInstallationId) // LEGACY: installationId is not serialized
 }
 
-export const initApp = async (storage: YoroiStorage) => {
+export const initApp = async (storage: App.Storage) => {
   await initInstallationId(storage)
   await walletManager.initialize()
 }

apps/wallet-mobile/src/NftDetails/NftDetails.tsx

@@ -1,5 +1,6 @@
 import {RouteProp, useRoute} from '@react-navigation/native'
 import {Balance} from '@yoroi/types'
+import {isRecord, isString} from '@yoroi/wallets'
 import React, {ReactNode, useState} from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {Dimensions, Linking, StyleSheet, TouchableOpacity, View} from 'react-native'
@@ -17,7 +18,6 @@ import {useSelectedWallet} from '../SelectedWallet'
 import {COLORS} from '../theme'
 import {getNetworkConfigById} from '../yoroi-wallets/cardano/networks'
 import {useNft} from '../yoroi-wallets/hooks'
-import {isRecord, isString} from '../yoroi-wallets/utils'
 
 export const NftDetails = () => {
   const {id} = useRoute<RouteProp<NftRoutes, 'nft-details'>>().params

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

@@ -1,10 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {storiesOf} from '@storybook/react-native'
+import {rootStorage, StorageProvider} from '@yoroi/wallets'
 import React from 'react'
 
 import {QueryProvider, RouteProvider} from '../../../.storybook/decorators'
 import {SelectedWalletProvider} from '../../SelectedWallet'
 import {mocks} from '../../yoroi-wallets/mocks'
-import {storage, StorageProvider} from '../../yoroi-wallets/storage'
 import {TxDetails} from './TxDetails'
 
 storiesOf('TxDetails', module)
@@ -49,16 +50,16 @@ storiesOf('TxDetails', module)
         <SelectedWalletProvider wallet={mocks.wallet}>
           <StorageProvider
             storage={{
-              ...storage,
+              ...rootStorage,
               join: (key: string) => {
                 if (key === 'appSettings/') {
-                  const appSettings = storage.join(key)
+                  const appSettings = rootStorage.join(key)
                   return {
                     ...appSettings,
-                    getItem: async (key) => (key === 'privacyMode' ? 'HIDDEN' : appSettings.getItem(key)),
+                    getItem: async (key): Promise<any> => (key === 'privacyMode' ? 'HIDDEN' : appSettings.getItem(key)),
                   }
                 }
-                return storage
+                return rootStorage
               },
             }}
           >

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

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {useNavigation, useRoute} from '@react-navigation/native'
+import {isNonNullable} from '@yoroi/wallets'
 import {BigNumber} from 'bignumber.js'
 import {fromPairs} from 'lodash'
 import React, {useEffect, useState} from 'react'
@@ -20,7 +21,7 @@ import {getNetworkConfigById} from '../../yoroi-wallets/cardano/networks'
 import {CardanoTypes, YoroiWallet} from '../../yoroi-wallets/cardano/types'
 import {useTipStatus, useTransactionInfos} from '../../yoroi-wallets/hooks'
 import {NetworkId, TransactionInfo} from '../../yoroi-wallets/types'
-import {asQuantity, isNonNullable} from '../../yoroi-wallets/utils'
+import {asQuantity} from '../../yoroi-wallets/utils'
 import {AssetList} from './AssetList'
 import assetListStyle from './AssetListTransaction.style'
 

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

@@ -1,4 +1,5 @@
 import {useNavigation} from '@react-navigation/native'
+import {isString} from '@yoroi/wallets'
 import _ from 'lodash'
 import React from 'react'
 import {useIntl} from 'react-intl'
@@ -11,7 +12,6 @@ import {formatDateRelative} from '../../legacy/format'
 import {useSelectedWallet} from '../../SelectedWallet'
 import {useTransactionInfos} from '../../yoroi-wallets/hooks'
 import {TransactionInfo} from '../../yoroi-wallets/types'
-import {isString} from '../../yoroi-wallets/utils'
 import {ActionsBanner} from './ActionsBanner'
 import {EmptyHistory} from './EmptyHistory'
 import {TxHistoryListItem} from './TxHistoryListItem'

apps/wallet-mobile/src/TxHistory/TxHistoryList/TxHistoryListItem.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {useNavigation} from '@react-navigation/native'
+import {isNonNullable} from '@yoroi/wallets'
 import {BigNumber} from 'bignumber.js'
 import _, {fromPairs} from 'lodash'
 import React from 'react'
@@ -18,7 +19,7 @@ import {isEmptyString} from '../../utils/utils'
 import {MultiToken} from '../../yoroi-wallets/cardano/MultiToken'
 import {YoroiWallet} from '../../yoroi-wallets/cardano/types'
 import {IOData, TransactionAssurance, TransactionDirection, TransactionInfo} from '../../yoroi-wallets/types'
-import {asQuantity, isNonNullable} from '../../yoroi-wallets/utils'
+import {asQuantity} from '../../yoroi-wallets/utils'
 
 type Props = {
   transaction: TransactionInfo

apps/wallet-mobile/src/YoroiApp.tsx

@@ -1,3 +1,4 @@
+import {rootStorage, StorageProvider} from '@yoroi/wallets'
 import React from 'react'
 import {LogBox, Platform, StyleSheet, UIManager} from 'react-native'
 import Config from 'react-native-config'
@@ -19,7 +20,6 @@ import {SelectedWalletMetaProvider, SelectedWalletProvider} from './SelectedWall
 import {ThemeProvider} from './theme'
 import {WalletManagerProvider} from './WalletManager'
 import {useMigrations} from './yoroi-wallets/migrations'
-import {storage, StorageProvider} from './yoroi-wallets/storage'
 import {walletManager} from './yoroi-wallets/walletManager'
 
 enableScreens()
@@ -40,7 +40,7 @@ const queryClient = new QueryClient()
 const metricsManager = makeMetricsManager()
 
 export const YoroiApp = () => {
-  const migrated = useMigrations(storage)
+  const migrated = useMigrations(rootStorage)
 
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
   return migrated ? (

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

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

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

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

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

@@ -1,14 +1,14 @@
 import {action} from '@storybook/addon-actions'
 import {storiesOf} from '@storybook/react-native'
+import {rootStorage, StorageProvider} from '@yoroi/wallets'
 import React from 'react'
 
-import {storage, StorageProvider} from '../../yoroi-wallets/storage'
 import {CreatePinInput} from './CreatePinInput'
 
 storiesOf('CreatePinInput', module).add('Default', () => (
   <StorageProvider
     storage={{
-      ...storage,
+      ...rootStorage,
       setItem: (key: string, data: unknown) => {
         action('setItem')(key, data)
         return Promise.resolve()

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

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

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

@@ -1,14 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {storiesOf} from '@storybook/react-native'
+import {rootStorage, StorageProvider} from '@yoroi/wallets'
 import React from 'react'
 
-import {storage, StorageProvider} from '../../yoroi-wallets/storage'
 import {PinLoginScreen} from './PinLoginScreen'
 
 storiesOf('PinLoginScreen', module).add('Default', () => (
   <StorageProvider
     storage={{
-      ...storage,
-      getItem: async () => {
+      ...rootStorage,
+      getItem: async (): Promise<any> => {
         return encryptedKeyHash
       },
     }}

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

@@ -1,34 +1,33 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
+import {parseSafe, rootStorage} from '@yoroi/wallets'
 
 import {disableAllEasyConfirmation, enableAuthWithOs} from '../yoroi-wallets/auth'
-import {storage} from '../yoroi-wallets/storage'
-import {parseSafe} from '../yoroi-wallets/utils/parsing'
 import {WalletMeta} from '../yoroi-wallets/walletManager'
 
 describe('enableAuthWithOs', () => {
   beforeEach(() => AsyncStorage.clear())
 
   it('empty', async () => {
-    await enableAuthWithOs(storage)
+    await enableAuthWithOs(rootStorage)
     expect(await storageSnapshot()).toEqual({
       '/appSettings/auth': 'os',
     })
   })
 
   it('existing value', async () => {
-    storage.join('appSettings/').setItem('auth', 'pin')
+    rootStorage.join('appSettings/').setItem('auth', 'pin')
 
-    await enableAuthWithOs(storage)
+    await enableAuthWithOs(rootStorage)
     expect(await storageSnapshot()).toEqual({
       '/appSettings/auth': 'os',
     })
   })
 
   it('remove pin', async () => {
-    storage.join('appSettings/').setItem('auth', 'pin')
-    storage.join('appSettings/').setItem('customPinHash', '123456789')
+    rootStorage.join('appSettings/').setItem('auth', 'pin')
+    rootStorage.join('appSettings/').setItem('customPinHash', '123456789')
 
-    await enableAuthWithOs(storage)
+    await enableAuthWithOs(rootStorage)
     expect(await storageSnapshot()).toEqual({
       '/appSettings/auth': 'os',
     })
@@ -39,25 +38,25 @@ describe('disableAllEasyConfirmations', () => {
   beforeEach(() => AsyncStorage.clear())
 
   it('works', async () => {
-    await storage.join('wallet/').setItem('1', {
+    await rootStorage.join('wallet/').setItem('1', {
       ...mockWalletMeta,
       isEasyConfirmationEnabled: true,
     } as WalletMeta)
-    await storage
+    await rootStorage
       .join('wallet/')
       .join('1/')
       .setItem('data', {...mockWalletJSON, isEasyConfirmationEnabled: true})
 
-    await storage.join('wallet/').setItem('2', {
+    await rootStorage.join('wallet/').setItem('2', {
       ...mockWalletMeta,
       isEasyConfirmationEnabled: true,
     } as WalletMeta)
-    await storage
+    await rootStorage
       .join('wallet/')
       .join('2/')
       .setItem('data', {...mockWalletJSON, isEasyConfirmationEnabled: true})
 
-    await disableAllEasyConfirmation(storage)
+    await disableAllEasyConfirmation(rootStorage)
     expect(await storageSnapshot()).toEqual({
       '/wallet/1': {
         checksum: {

apps/wallet-mobile/src/components/NftPreview/NftPreview.tsx

@@ -1,4 +1,5 @@
 import {Balance} from '@yoroi/types'
+import {isString} from '@yoroi/wallets'
 import React, {useEffect, useState} from 'react'
 import {ErrorBoundary} from 'react-error-boundary'
 import {Image, ImageResizeMode, ImageStyle, StyleProp, View} from 'react-native'
@@ -7,7 +8,6 @@ import {SvgUri} from 'react-native-svg'
 
 import placeholder from '../../assets/img/nft-placeholder.png'
 import {getNftFilenameMediaType, getNftMainImageMediaType, isSvgMediaType} from '../../yoroi-wallets/cardano/nfts'
-import {isString} from '../../yoroi-wallets/utils'
 
 export const NftPreview = ({
   nft,

apps/wallet-mobile/src/components/TokenIcon/TokenIcon.tsx

@@ -1,11 +1,11 @@
+import {isString} from '@yoroi/wallets'
 import React from 'react'
 import {Image, StyleSheet, View} from 'react-native'
 
 import {features} from '../../features'
 import {COLORS} from '../../theme'
 import {YoroiWallet} from '../../yoroi-wallets/cardano/types'
 import {useNft, useNftImageModerated, useTokenInfo} from '../../yoroi-wallets/hooks'
-import {isString} from '../../yoroi-wallets/utils'
 import {Boundary} from '../Boundary'
 import {Icon} from '../Icon'
 import {ModeratedNftIcon} from './ModeratedNftIcon'