Add modal state provider, replace usage except methods

src/App.native.tsx

@@ -22,6 +22,7 @@ import * as Toast from 'view/com/util/Toast'
 import {queryClient} from 'lib/react-query'
 import {TestCtrls} from 'view/com/testing/TestCtrls'
 import {Provider as ShellStateProvider} from 'state/shell'
+import {Provider as ModalStateProvider} from 'state/modals'
 import {Provider as MutedThreadsProvider} from 'state/muted-threads'
 import {Provider as InvitesStateProvider} from 'state/invites'
 import {Provider as PrefsStateProvider} from 'state/preferences'
@@ -84,7 +85,9 @@ function App() {
       <PrefsStateProvider>
         <MutedThreadsProvider>
           <InvitesStateProvider>
-            <InnerApp />
+            <ModalStateProvider>
+              <InnerApp />
+            </ModalStateProvider>
           </InvitesStateProvider>
         </MutedThreadsProvider>
       </PrefsStateProvider>

src/App.web.tsx

@@ -17,6 +17,7 @@ import {ToastContainer} from 'view/com/util/Toast.web'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {queryClient} from 'lib/react-query'
 import {Provider as ShellStateProvider} from 'state/shell'
+import {Provider as ModalStateProvider} from 'state/modals'
 import {Provider as MutedThreadsProvider} from 'state/muted-threads'
 import {Provider as InvitesStateProvider} from 'state/invites'
 import {Provider as PrefsStateProvider} from 'state/preferences'
@@ -74,7 +75,9 @@ function App() {
       <PrefsStateProvider>
         <MutedThreadsProvider>
           <InvitesStateProvider>
-            <InnerApp />
+            <ModalStateProvider>
+              <InnerApp />
+            </ModalStateProvider>
           </InvitesStateProvider>
         </MutedThreadsProvider>
       </PrefsStateProvider>

src/lib/hooks/useAccountSwitcher.ts

@@ -7,6 +7,7 @@ import {AccountData} from 'state/models/session'
 import {reset as resetNavigation} from '../../Navigation'
 import * as Toast from 'view/com/util/Toast'
 import {useSetDrawerOpen} from '#/state/shell/drawer-open'
+import {useModalControls} from '#/state/modals'
 
 export function useAccountSwitcher(): [
   boolean,
@@ -16,6 +17,7 @@ export function useAccountSwitcher(): [
   const {track} = useAnalytics()
   const store = useStores()
   const setDrawerOpen = useSetDrawerOpen()
+  const {closeModal} = useModalControls()
   const [isSwitching, setIsSwitching] = useState(false)
   const navigation = useNavigation<NavigationProp>()
 
@@ -25,6 +27,7 @@ export function useAccountSwitcher(): [
       setIsSwitching(true)
       const success = await store.session.resumeSession(acct)
       setDrawerOpen(false)
+      closeModal()
       store.shell.closeAllActiveElements()
       if (success) {
         resetNavigation()
@@ -36,7 +39,7 @@ export function useAccountSwitcher(): [
         store.session.clear()
       }
     },
-    [track, setIsSwitching, navigation, store, setDrawerOpen],
+    [track, setIsSwitching, navigation, store, setDrawerOpen, closeModal],
   )
 
   return [isSwitching, setIsSwitching, onPressSwitchAccount]

src/lib/hooks/useOTAUpdate.ts

@@ -1,15 +1,15 @@
 import * as Updates from 'expo-updates'
 import {useCallback, useEffect} from 'react'
 import {AppState} from 'react-native'
-import {useStores} from 'state/index'
 import {logger} from '#/logger'
+import {useModalControls} from '#/state/modals'
 
 export function useOTAUpdate() {
-  const store = useStores()
+  const {openModal} = useModalControls()
 
   // HELPER FUNCTIONS
   const showUpdatePopup = useCallback(() => {
-    store.shell.openModal({
+    openModal({
       name: 'confirm',
       title: 'Update Available',
       message:
@@ -20,7 +20,7 @@ export function useOTAUpdate() {
         })
       },
     })
-  }, [store.shell])
+  }, [openModal])
   const checkForUpdate = useCallback(async () => {
     logger.debug('useOTAUpdate: Checking for update...')
     try {

src/lib/media/picker.web.tsx

@@ -4,6 +4,7 @@ import {CameraOpts, CropperOptions} from './types'
 import {RootStoreModel} from 'state/index'
 import {Image as RNImage} from 'react-native-image-crop-picker'
 export {openPicker} from './picker.shared'
+import {unstable__openModal} from '#/state/modals'
 
 export async function openCamera(
   _store: RootStoreModel,
@@ -14,12 +15,12 @@ export async function openCamera(
 }
 
 export async function openCropper(
-  store: RootStoreModel,
+  _store: RootStoreModel,
   opts: CropperOptions,
 ): Promise<RNImage> {
   // TODO handle more opts
   return new Promise((resolve, reject) => {
-    store.shell.openModal({
+    unstable__openModal({
       name: 'crop-image',
       uri: opts.path,
       onSelect: (img?: RNImage) => {