Add some logs

src/App.native.tsx

@@ -12,19 +12,15 @@ import {
 import * as SplashScreen from 'expo-splash-screen'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {init as initPersistedState} from '#/state/persisted'
 import * as persisted from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {useIntentHandler} from 'lib/hooks/useIntentHandler'
-import * as notifications from 'lib/notifications/notifications'
-import {
-  asyncStoragePersister,
-  dehydrateOptions,
-  queryClient,
-} from 'lib/react-query'
+import {useNotificationsListener} from 'lib/notifications/notifications'
+import {QueryProvider} from 'lib/react-query'
 import {s} from 'lib/styles'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {Provider as DialogStateProvider} from 'state/dialogs'
@@ -59,11 +55,11 @@ function InnerApp() {
   const {resumeSession} = useSessionApi()
   const theme = useColorModeTheme()
   const {_} = useLingui()
+
   useIntentHandler()
 
   // init
   useEffect(() => {
-    notifications.init(queryClient)
     listenSessionDropped(() => {
       Toast.show(_(msg`Sorry! Your session expired. Please log in again.`))
     })
@@ -79,25 +75,29 @@ function InnerApp() {
           <React.Fragment
             // Resets the entire tree below when it changes:
             key={currentAccount?.did}>
-            <StatsigProvider>
-              <LabelDefsProvider>
-                <LoggedOutViewProvider>
-                  <SelectedFeedProvider>
-                    <UnreadNotifsProvider>
-                      <ThemeProvider theme={theme}>
-                        {/* All components should be within this provider */}
-                        <RootSiblingParent>
-                          <GestureHandlerRootView style={s.h100pct}>
-                            <TestCtrls />
-                            <Shell />
-                          </GestureHandlerRootView>
-                        </RootSiblingParent>
-                      </ThemeProvider>
-                    </UnreadNotifsProvider>
-                  </SelectedFeedProvider>
-                </LoggedOutViewProvider>
-              </LabelDefsProvider>
-            </StatsigProvider>
+            <QueryProvider currentDid={currentAccount?.did}>
+              <PushNotificationsListener>
+                <StatsigProvider>
+                  <LabelDefsProvider>
+                    <LoggedOutViewProvider>
+                      <SelectedFeedProvider>
+                        <UnreadNotifsProvider>
+                          <ThemeProvider theme={theme}>
+                            {/* All components should be within this provider */}
+                            <RootSiblingParent>
+                              <GestureHandlerRootView style={s.h100pct}>
+                                <TestCtrls />
+                                <Shell />
+                              </GestureHandlerRootView>
+                            </RootSiblingParent>
+                          </ThemeProvider>
+                        </UnreadNotifsProvider>
+                      </SelectedFeedProvider>
+                    </LoggedOutViewProvider>
+                  </LabelDefsProvider>
+                </StatsigProvider>
+              </PushNotificationsListener>
+            </QueryProvider>
           </React.Fragment>
         </Splash>
       </Alf>
@@ -105,6 +105,12 @@ function InnerApp() {
   )
 }
 
+function PushNotificationsListener({children}: {children: React.ReactNode}) {
+  const queryClient = useQueryClient()
+  useNotificationsListener(queryClient)
+  return children
+}
+
 function App() {
   const [isReady, setReady] = useState(false)
 
@@ -121,31 +127,27 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <PersistQueryClientProvider
-      client={queryClient}
-      persistOptions={{persister: asyncStoragePersister, dehydrateOptions}}>
-      <SessionProvider>
-        <ShellStateProvider>
-          <PrefsStateProvider>
-            <MutedThreadsProvider>
-              <InvitesStateProvider>
-                <ModalStateProvider>
-                  <DialogStateProvider>
-                    <LightboxStateProvider>
-                      <I18nProvider>
-                        <PortalProvider>
-                          <InnerApp />
-                        </PortalProvider>
-                      </I18nProvider>
-                    </LightboxStateProvider>
-                  </DialogStateProvider>
-                </ModalStateProvider>
-              </InvitesStateProvider>
-            </MutedThreadsProvider>
-          </PrefsStateProvider>
-        </ShellStateProvider>
-      </SessionProvider>
-    </PersistQueryClientProvider>
+    <SessionProvider>
+      <ShellStateProvider>
+        <PrefsStateProvider>
+          <MutedThreadsProvider>
+            <InvitesStateProvider>
+              <ModalStateProvider>
+                <DialogStateProvider>
+                  <LightboxStateProvider>
+                    <I18nProvider>
+                      <PortalProvider>
+                        <InnerApp />
+                      </PortalProvider>
+                    </I18nProvider>
+                  </LightboxStateProvider>
+                </DialogStateProvider>
+              </ModalStateProvider>
+            </InvitesStateProvider>
+          </MutedThreadsProvider>
+        </PrefsStateProvider>
+      </ShellStateProvider>
+    </SessionProvider>
   )
 }
 

src/App.web.tsx

@@ -1,44 +1,38 @@
 import 'lib/sentry' // must be near top
-
-import React, {useState, useEffect} from 'react'
-import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
-import {SafeAreaProvider} from 'react-native-safe-area-context'
-import {RootSiblingParent} from 'react-native-root-siblings'
-
 import 'view/icons'
 
-import {ThemeProvider as Alf} from '#/alf'
-import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
+import React, {useEffect, useState} from 'react'
+import {RootSiblingParent} from 'react-native-root-siblings'
+import {SafeAreaProvider} from 'react-native-safe-area-context'
+
+import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {init as initPersistedState} from '#/state/persisted'
-import {Shell} from 'view/shell/index'
-import {ToastContainer} from 'view/com/util/Toast.web'
-import {ThemeProvider} from 'lib/ThemeContext'
-import {
-  queryClient,
-  asyncStoragePersister,
-  dehydrateOptions,
-} from 'lib/react-query'
-import {Provider as ShellStateProvider} from 'state/shell'
-import {Provider as ModalStateProvider} from 'state/modals'
-import {Provider as DialogStateProvider} from 'state/dialogs'
-import {Provider as LightboxStateProvider} from 'state/lightbox'
-import {Provider as MutedThreadsProvider} from 'state/muted-threads'
-import {Provider as InvitesStateProvider} from 'state/invites'
-import {Provider as PrefsStateProvider} from 'state/preferences'
-import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
-import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
+import * as persisted from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
-import I18nProvider from './locale/i18nProvider'
+import {useIntentHandler} from 'lib/hooks/useIntentHandler'
+import {QueryProvider} from 'lib/react-query'
+import {ThemeProvider} from 'lib/ThemeContext'
+import {Provider as DialogStateProvider} from 'state/dialogs'
+import {Provider as InvitesStateProvider} from 'state/invites'
+import {Provider as LightboxStateProvider} from 'state/lightbox'
+import {Provider as ModalStateProvider} from 'state/modals'
+import {Provider as MutedThreadsProvider} from 'state/muted-threads'
+import {Provider as PrefsStateProvider} from 'state/preferences'
+import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import {
   Provider as SessionProvider,
   useSession,
   useSessionApi,
 } from 'state/session'
-import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
-import * as persisted from '#/state/persisted'
+import {Provider as ShellStateProvider} from 'state/shell'
+import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
+import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
+import {ToastContainer} from 'view/com/util/Toast.web'
+import {Shell} from 'view/shell/index'
+import {ThemeProvider as Alf} from '#/alf'
+import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Provider as PortalProvider} from '#/components/Portal'
-import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
-import {useIntentHandler} from 'lib/hooks/useIntentHandler'
+import I18nProvider from './locale/i18nProvider'
 
 function InnerApp() {
   const {isInitialLoad, currentAccount} = useSession()
@@ -60,25 +54,27 @@ function InnerApp() {
       <React.Fragment
         // Resets the entire tree below when it changes:
         key={currentAccount?.did}>
-        <StatsigProvider>
-          <LabelDefsProvider>
-            <LoggedOutViewProvider>
-              <SelectedFeedProvider>
-                <UnreadNotifsProvider>
-                  <ThemeProvider theme={theme}>
-                    {/* All components should be within this provider */}
-                    <RootSiblingParent>
-                      <SafeAreaProvider>
-                        <Shell />
-                      </SafeAreaProvider>
-                    </RootSiblingParent>
-                    <ToastContainer />
-                  </ThemeProvider>
-                </UnreadNotifsProvider>
-              </SelectedFeedProvider>
-            </LoggedOutViewProvider>
-          </LabelDefsProvider>
-        </StatsigProvider>
+        <QueryProvider currentDid={currentAccount?.did}>
+          <StatsigProvider>
+            <LabelDefsProvider>
+              <LoggedOutViewProvider>
+                <SelectedFeedProvider>
+                  <UnreadNotifsProvider>
+                    <ThemeProvider theme={theme}>
+                      {/* All components should be within this provider */}
+                      <RootSiblingParent>
+                        <SafeAreaProvider>
+                          <Shell />
+                        </SafeAreaProvider>
+                      </RootSiblingParent>
+                      <ToastContainer />
+                    </ThemeProvider>
+                  </UnreadNotifsProvider>
+                </SelectedFeedProvider>
+              </LoggedOutViewProvider>
+            </LabelDefsProvider>
+          </StatsigProvider>
+        </QueryProvider>
       </React.Fragment>
     </Alf>
   )
@@ -100,31 +96,27 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <PersistQueryClientProvider
-      client={queryClient}
-      persistOptions={{persister: asyncStoragePersister, dehydrateOptions}}>
-      <SessionProvider>
-        <ShellStateProvider>
-          <PrefsStateProvider>
-            <MutedThreadsProvider>
-              <InvitesStateProvider>
-                <ModalStateProvider>
-                  <DialogStateProvider>
-                    <LightboxStateProvider>
-                      <I18nProvider>
-                        <PortalProvider>
-                          <InnerApp />
-                        </PortalProvider>
-                      </I18nProvider>
-                    </LightboxStateProvider>
-                  </DialogStateProvider>
-                </ModalStateProvider>
-              </InvitesStateProvider>
-            </MutedThreadsProvider>
-          </PrefsStateProvider>
-        </ShellStateProvider>
-      </SessionProvider>
-    </PersistQueryClientProvider>
+    <SessionProvider>
+      <ShellStateProvider>
+        <PrefsStateProvider>
+          <MutedThreadsProvider>
+            <InvitesStateProvider>
+              <ModalStateProvider>
+                <DialogStateProvider>
+                  <LightboxStateProvider>
+                    <I18nProvider>
+                      <PortalProvider>
+                        <InnerApp />
+                      </PortalProvider>
+                    </I18nProvider>
+                  </LightboxStateProvider>
+                </DialogStateProvider>
+              </ModalStateProvider>
+            </InvitesStateProvider>
+          </MutedThreadsProvider>
+        </PrefsStateProvider>
+      </ShellStateProvider>
+    </SessionProvider>
   )
 }
 

src/components/Button.tsx

@@ -1,21 +1,19 @@
 import React from 'react'
 import {
-  AccessibilityProps,
   Pressable,
-  PressableProps,
-  StyleProp,
-  StyleSheet,
   Text,
+  PressableProps,
   TextProps,
-  TextStyle,
-  View,
   ViewStyle,
+  AccessibilityProps,
+  View,
+  TextStyle,
+  StyleSheet,
+  StyleProp,
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
-import {Trans} from '@lingui/macro'
 
-import {logger} from '#/logger'
-import {android, atoms as a, flatten, tokens, useTheme} from '#/alf'
+import {useTheme, atoms as a, tokens, android, flatten} from '#/alf'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {normalizeTextStyles} from '#/components/Typography'
 
@@ -405,51 +403,18 @@ export function Button({
         </View>
       )}
       <Context.Provider value={context}>
-        <ButtonTextErrorBoundary>
-          {/* @ts-ignore */}
-          {typeof children === 'string' || children?.type === Trans ? (
-            /* @ts-ignore */
-            <ButtonText>{children}</ButtonText>
-          ) : typeof children === 'function' ? (
-            children(context)
-          ) : (
-            children
-          )}
-        </ButtonTextErrorBoundary>
+        {typeof children === 'string' ? (
+          <ButtonText>{children}</ButtonText>
+        ) : typeof children === 'function' ? (
+          children(context)
+        ) : (
+          children
+        )}
       </Context.Provider>
     </Pressable>
   )
 }
 
-export class ButtonTextErrorBoundary extends React.Component<
-  React.PropsWithChildren<{}>,
-  {hasError: boolean; error: Error | undefined}
-> {
-  public state = {
-    hasError: false,
-    error: undefined,
-  }
-
-  public static getDerivedStateFromError(error: Error) {
-    return {hasError: true, error}
-  }
-
-  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    logger.error('ButtonTextErrorBoundary caught an error', {
-      message: error.message,
-      errorInfo,
-    })
-  }
-
-  public render() {
-    if (this.state.hasError) {
-      return <ButtonText>ERROR</ButtonText>
-    }
-
-    return this.props.children
-  }
-}
-
 export function useSharedButtonTextStyles() {
   const t = useTheme()
   const {color, variant, disabled, size} = useButtonContext()

src/lib/notifications/notifications.ts

@@ -1,12 +1,14 @@
+import {useEffect} from 'react'
 import * as Notifications from 'expo-notifications'
 import {QueryClient} from '@tanstack/react-query'
-import {resetToTab} from '../../Navigation'
-import {devicePlatform, isIOS} from 'platform/detection'
-import {track} from 'lib/analytics/analytics'
+
 import {logger} from '#/logger'
 import {RQKEY as RQKEY_NOTIFS} from '#/state/queries/notifications/feed'
 import {truncateAndInvalidate} from '#/state/queries/util'
-import {SessionAccount, getAgent} from '#/state/session'
+import {getAgent, SessionAccount} from '#/state/session'
+import {track} from 'lib/analytics/analytics'
+import {devicePlatform, isIOS} from 'platform/detection'
+import {resetToTab} from '../../Navigation'
 import {logEvent} from '../statsig/statsig'
 
 const SERVICE_DID = (serviceUrl?: string) =>
@@ -80,53 +82,63 @@ export function registerTokenChangeHandler(
   }
 }
 
-export function init(queryClient: QueryClient) {
-  // handle notifications that are received, both in the foreground or background
-  // NOTE: currently just here for debug logging
-  Notifications.addNotificationReceivedListener(event => {
-    logger.debug(
-      'Notifications: received',
-      {event},
-      logger.DebugContext.notifications,
-    )
-    if (event.request.trigger.type === 'push') {
-      // handle payload-based deeplinks
-      let payload
-      if (isIOS) {
-        payload = event.request.trigger.payload
-      } else {
-        // TODO: handle android payload deeplink
-      }
-      if (payload) {
-        logger.debug(
-          'Notifications: received payload',
-          payload,
-          logger.DebugContext.notifications,
-        )
-        // TODO: deeplink notif here
-      }
-    }
-  })
-
-  // handle notifications that are tapped on
-  Notifications.addNotificationResponseReceivedListener(response => {
-    logger.debug(
-      'Notifications: response received',
-      {
-        actionIdentifier: response.actionIdentifier,
-      },
-      logger.DebugContext.notifications,
-    )
-    if (response.actionIdentifier === Notifications.DEFAULT_ACTION_IDENTIFIER) {
+export function useNotificationsListener(queryClient: QueryClient) {
+  useEffect(() => {
+    // handle notifications that are received, both in the foreground or background
+    // NOTE: currently just here for debug logging
+    const sub1 = Notifications.addNotificationReceivedListener(event => {
       logger.debug(
-        'User pressed a notification, opening notifications tab',
-        {},
+        'Notifications: received',
+        {event},
         logger.DebugContext.notifications,
       )
-      track('Notificatons:OpenApp')
-      logEvent('notifications:openApp', {})
-      truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
-      resetToTab('NotificationsTab') // open notifications tab
+      if (event.request.trigger.type === 'push') {
+        // handle payload-based deeplinks
+        let payload
+        if (isIOS) {
+          payload = event.request.trigger.payload
+        } else {
+          // TODO: handle android payload deeplink
+        }
+        if (payload) {
+          logger.debug(
+            'Notifications: received payload',
+            payload,
+            logger.DebugContext.notifications,
+          )
+          // TODO: deeplink notif here
+        }
+      }
+    })
+
+    // handle notifications that are tapped on
+    const sub2 = Notifications.addNotificationResponseReceivedListener(
+      response => {
+        logger.debug(
+          'Notifications: response received',
+          {
+            actionIdentifier: response.actionIdentifier,
+          },
+          logger.DebugContext.notifications,
+        )
+        if (
+          response.actionIdentifier === Notifications.DEFAULT_ACTION_IDENTIFIER
+        ) {
+          logger.debug(
+            'User pressed a notification, opening notifications tab',
+            {},
+            logger.DebugContext.notifications,
+          )
+          track('Notificatons:OpenApp')
+          logEvent('notifications:openApp', {})
+          truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
+          resetToTab('NotificationsTab') // open notifications tab
+        }
+      },
+    )
+    return () => {
+      sub1.remove()
+      sub2.remove()
     }
-  })
+  }, [queryClient])
 }

src/lib/react-query.ts

@@ -1,70 +0,0 @@
-import {AppState, AppStateStatus} from 'react-native'
-import {QueryClient, focusManager} from '@tanstack/react-query'
-import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister'
-import AsyncStorage from '@react-native-async-storage/async-storage'
-import {PersistQueryClientProviderProps} from '@tanstack/react-query-persist-client'
-
-import {isNative} from '#/platform/detection'
-
-// any query keys in this array will be persisted to AsyncStorage
-const STORED_CACHE_QUERY_KEYS = ['labelers-detailed-info']
-
-focusManager.setEventListener(onFocus => {
-  if (isNative) {
-    const subscription = AppState.addEventListener(
-      'change',
-      (status: AppStateStatus) => {
-        focusManager.setFocused(status === 'active')
-      },
-    )
-
-    return () => subscription.remove()
-  } else if (typeof window !== 'undefined' && window.addEventListener) {
-    // these handlers are a bit redundant but focus catches when the browser window
-    // is blurred/focused while visibilitychange seems to only handle when the
-    // window minimizes (both of them catch tab changes)
-    // there's no harm to redundant fires because refetchOnWindowFocus is only
-    // used with queries that employ stale data times
-    const handler = () => onFocus()
-    window.addEventListener('focus', handler, false)
-    window.addEventListener('visibilitychange', handler, false)
-    return () => {
-      window.removeEventListener('visibilitychange', handler)
-      window.removeEventListener('focus', handler)
-    }
-  }
-})
-
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      // NOTE
-      // refetchOnWindowFocus breaks some UIs (like feeds)
-      // so we only selectively want to enable this
-      // -prf
-      refetchOnWindowFocus: false,
-      // Structural sharing between responses makes it impossible to rely on
-      // "first seen" timestamps on objects to determine if they're fresh.
-      // Disable this optimization so that we can rely on "first seen" timestamps.
-      structuralSharing: false,
-      // We don't want to retry queries by default, because in most cases we
-      // want to fail early and show a response to the user. There are
-      // exceptions, and those can be made on a per-query basis. For others, we
-      // should give users controls to retry.
-      retry: false,
-    },
-  },
-})
-
-export const asyncStoragePersister = createAsyncStoragePersister({
-  storage: AsyncStorage,
-  key: 'queryCache',
-})
-
-export const dehydrateOptions: PersistQueryClientProviderProps['persistOptions']['dehydrateOptions'] =
-  {
-    shouldDehydrateMutation: (_: any) => false,
-    shouldDehydrateQuery: query => {
-      return STORED_CACHE_QUERY_KEYS.includes(String(query.queryKey[0]))
-    },
-  }

src/lib/react-query.tsx

@@ -0,0 +1,124 @@
+import React, {useRef, useState} from 'react'
+import {AppState, AppStateStatus} from 'react-native'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister'
+import {focusManager, QueryClient} from '@tanstack/react-query'
+import {
+  PersistQueryClientProvider,
+  PersistQueryClientProviderProps,
+} from '@tanstack/react-query-persist-client'
+
+import {isNative} from '#/platform/detection'
+
+// any query keys in this array will be persisted to AsyncStorage
+const STORED_CACHE_QUERY_KEYS = ['labelers-detailed-info']
+
+focusManager.setEventListener(onFocus => {
+  if (isNative) {
+    const subscription = AppState.addEventListener(
+      'change',
+      (status: AppStateStatus) => {
+        focusManager.setFocused(status === 'active')
+      },
+    )
+
+    return () => subscription.remove()
+  } else if (typeof window !== 'undefined' && window.addEventListener) {
+    // these handlers are a bit redundant but focus catches when the browser window
+    // is blurred/focused while visibilitychange seems to only handle when the
+    // window minimizes (both of them catch tab changes)
+    // there's no harm to redundant fires because refetchOnWindowFocus is only
+    // used with queries that employ stale data times
+    const handler = () => onFocus()
+    window.addEventListener('focus', handler, false)
+    window.addEventListener('visibilitychange', handler, false)
+    return () => {
+      window.removeEventListener('visibilitychange', handler)
+      window.removeEventListener('focus', handler)
+    }
+  }
+})
+
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        // NOTE
+        // refetchOnWindowFocus breaks some UIs (like feeds)
+        // so we only selectively want to enable this
+        // -prf
+        refetchOnWindowFocus: false,
+        // Structural sharing between responses makes it impossible to rely on
+        // "first seen" timestamps on objects to determine if they're fresh.
+        // Disable this optimization so that we can rely on "first seen" timestamps.
+        structuralSharing: false,
+        // We don't want to retry queries by default, because in most cases we
+        // want to fail early and show a response to the user. There are
+        // exceptions, and those can be made on a per-query basis. For others, we
+        // should give users controls to retry.
+        retry: false,
+      },
+    },
+  })
+
+const dehydrateOptions: PersistQueryClientProviderProps['persistOptions']['dehydrateOptions'] =
+  {
+    shouldDehydrateMutation: (_: any) => false,
+    shouldDehydrateQuery: query => {
+      return STORED_CACHE_QUERY_KEYS.includes(String(query.queryKey[0]))
+    },
+  }
+
+export function QueryProvider({
+  children,
+  currentDid,
+}: {
+  children: React.ReactNode
+  currentDid: string | undefined
+}) {
+  return (
+    <QueryProviderInner
+      // Enforce we never reuse cache between users.
+      // These two props MUST stay in sync.
+      key={currentDid}
+      currentDid={currentDid}>
+      {children}
+    </QueryProviderInner>
+  )
+}
+
+function QueryProviderInner({
+  children,
+  currentDid,
+}: {
+  children: React.ReactNode
+  currentDid: string | undefined
+}) {
+  const initialDid = useRef(currentDid)
+  if (currentDid !== initialDid.current) {
+    throw Error(
+      'Something is very wrong. Expected did to be stable due to key above.',
+    )
+  }
+  // We create the query client here so that it's scoped to a specific DID.
+  // Do not move the query client creation outside of this component.
+  const [queryClient, _setQueryClient] = useState(() => createQueryClient())
+  const [persistOptions, _setPersistOptions] = useState(() => {
+    const asyncPersister = createAsyncStoragePersister({
+      storage: AsyncStorage,
+      key: 'queryClient-' + (currentDid ?? 'logged-out'),
+    })
+    return {
+      persister: asyncPersister,
+      dehydrateOptions,
+    }
+  })
+  console.log('QUERY', currentDid)
+  return (
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={persistOptions}>
+      {children}
+    </PersistQueryClientProvider>
+  )
+}

src/lib/statsig/statsig.tsx

@@ -8,7 +8,6 @@ import {
   useGate as useStatsigGate,
 } from 'statsig-react-native-expo'
 
-import {logger} from '#/logger'
 import {useSession} from '../../state/session'
 import {LogEvents} from './events'
 
@@ -57,7 +56,10 @@ export function logEvent<E extends keyof LogEvents>(
     }
   } catch (e) {
     // A log should never interrupt the calling code, whatever happens.
-    logger.error('Failed to log an event', {message: e})
+    // Rethrow on a clean stack.
+    setTimeout(() => {
+      throw e
+    })
   }
 }
 

src/screens/Login/FormContainer.tsx

@@ -1,6 +1,13 @@
 import React from 'react'
-import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {
+  ScrollView,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native'
 
+import {isWeb} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
@@ -9,24 +16,38 @@ export function FormContainer({
   title,
   children,
   style,
+  contentContainerStyle,
 }: {
   testID?: string
   title?: React.ReactNode
   children: React.ReactNode
   style?: StyleProp<ViewStyle>
+  contentContainerStyle?: StyleProp<ViewStyle>
 }) {
   const {gtMobile} = useBreakpoints()
   const t = useTheme()
   return (
-    <View
+    <ScrollView
       testID={testID}
-      style={[a.gap_md, a.flex_1, !gtMobile && [a.px_lg, a.py_md], style]}>
-      {title && !gtMobile && (
-        <Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}>
-          {title}
-        </Text>
-      )}
-      {children}
-    </View>
+      style={[styles.maxHeight, contentContainerStyle]}
+      keyboardShouldPersistTaps="handled">
+      <View
+        style={[a.gap_md, a.flex_1, !gtMobile && [a.px_lg, a.pt_md], style]}>
+        {title && !gtMobile && (
+          <Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}>
+            {title}
+          </Text>
+        )}
+        {children}
+      </View>
+    </ScrollView>
   )
 }
+
+const styles = StyleSheet.create({
+  maxHeight: {
+    // @ts-ignore web only -prf
+    maxHeight: isWeb ? '100vh' : undefined,
+    height: !isWeb ? '100%' : undefined,
+  },
+})

src/screens/Login/index.tsx

@@ -164,11 +164,7 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
 
   return (
     <KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}>
-      <LoggedOutLayout
-        leadin=""
-        title={title}
-        description={description}
-        scrollable>
+      <LoggedOutLayout leadin="" title={title} description={description}>
         <LayoutAnimationConfig skipEntering skipExiting>
           <ScreenTransition key={currentForm}>{content}</ScreenTransition>
         </LayoutAnimationConfig>

src/screens/Signup/StepCaptcha/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import {ActivityIndicator, View} from 'react-native'
+import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {nanoid} from 'nanoid/non-secure'
 
 import {createFullHandle} from '#/lib/strings/handles'
+import {isWeb} from '#/platform/detection'
 import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useSignupContext, useSubmitSignup} from '#/screens/Signup/state'
 import {CaptchaWebView} from '#/screens/Signup/StepCaptcha/CaptchaWebView'
@@ -53,14 +54,7 @@ export function StepCaptcha() {
   return (
     <ScreenTransition>
       <View style={[a.gap_lg]}>
-        <View
-          style={[
-            a.w_full,
-            a.pb_xl,
-            a.overflow_hidden,
-            {minHeight: 500},
-            completed && [a.align_center, a.justify_center],
-          ]}>
+        <View style={[styles.container, completed && styles.center]}>
           {!completed ? (
             <CaptchaWebView
               url={url}
@@ -78,3 +72,24 @@ export function StepCaptcha() {
     </ScreenTransition>
   )
 }
+
+const styles = StyleSheet.create({
+  error: {
+    borderRadius: 6,
+    marginTop: 10,
+  },
+  // @ts-expect-error: Suppressing error due to incomplete `ViewStyle` type definition in react-native-web, missing `cursor` prop as discussed in https://github.com/necolas/react-native-web/issues/832.
+  touchable: {
+    ...(isWeb && {cursor: 'pointer'}),
+  },
+  container: {
+    minHeight: 500,
+    width: '100%',
+    paddingBottom: 20,
+    overflow: 'hidden',
+  },
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

src/screens/Signup/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import {View} from 'react-native'
-import {LayoutAnimationConfig} from 'react-native-reanimated'
+import {ScrollView, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -21,7 +20,7 @@ import {
 import {StepCaptcha} from '#/screens/Signup/StepCaptcha'
 import {StepHandle} from '#/screens/Signup/StepHandle'
 import {StepInfo} from '#/screens/Signup/StepInfo'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import {InlineLink} from '#/components/Link'
@@ -33,7 +32,6 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
   const {screen} = useAnalytics()
   const [state, dispatch] = React.useReducer(reducer, initialState)
   const submit = useSubmitSignup({state, dispatch})
-  const {gtMobile} = useBreakpoints()
 
   const {
     data: serviceInfo,
@@ -127,16 +125,13 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
       <LoggedOutLayout
         leadin=""
         title={_(msg`Create Account`)}
-        description={_(msg`We're so excited to have you join us!`)}
-        scrollable>
-        <View testID="createAccount" style={a.flex_1}>
-          <View
-            style={[
-              a.flex_1,
-              a.px_xl,
-              a.pt_2xl,
-              !gtMobile && {paddingBottom: 100},
-            ]}>
+        description={_(msg`We're so excited to have you join us!`)}>
+        <ScrollView
+          testID="createAccount"
+          keyboardShouldPersistTaps="handled"
+          style={a.h_full}
+          keyboardDismissMode="on-drag">
+          <View style={[a.flex_1, a.px_xl, a.pt_2xl, {paddingBottom: 100}]}>
             <View style={[a.gap_sm, a.pb_3xl]}>
               <Text style={[a.font_semibold, t.atoms.text_contrast_medium]}>
                 <Trans>Step</Trans> {state.activeStep + 1} <Trans>of</Trans>{' '}
@@ -157,15 +152,13 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
             </View>
 
             <View style={[a.pb_3xl]}>
-              <LayoutAnimationConfig skipEntering skipExiting>
-                {state.activeStep === SignupStep.INFO ? (
-                  <StepInfo />
-                ) : state.activeStep === SignupStep.HANDLE ? (
-                  <StepHandle />
-                ) : (
-                  <StepCaptcha />
-                )}
-              </LayoutAnimationConfig>
+              {state.activeStep === SignupStep.INFO ? (
+                <StepInfo />
+              ) : state.activeStep === SignupStep.HANDLE ? (
+                <StepHandle />
+              ) : (
+                <StepCaptcha />
+              )}
             </View>
 
             <View style={[a.flex_row, a.justify_between, a.pb_lg]}>
@@ -215,7 +208,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
               </Text>
             </View>
           </View>
-        </View>
+        </ScrollView>
       </LoggedOutLayout>
     </SignupContext.Provider>
   )

src/state/cache/post-shadow.ts

@@ -1,13 +1,14 @@
-import {useEffect, useState, useMemo} from 'react'
-import EventEmitter from 'eventemitter3'
+import {useEffect, useMemo, useState} from 'react'
 import {AppBskyFeedDefs} from '@atproto/api'
+import {QueryClient} from '@tanstack/react-query'
+import EventEmitter from 'eventemitter3'
+
 import {batchedUpdates} from '#/lib/batchedUpdates'
-import {Shadow, castAsShadow} from './types'
 import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from '../queries/notifications/feed'
 import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from '../queries/post-feed'
 import {findAllPostsInQueryData as findAllPostsInThreadQueryData} from '../queries/post-thread'
 import {findAllPostsInQueryData as findAllPostsInSearchQueryData} from '../queries/search-posts'
-import {queryClient} from 'lib/react-query'
+import {castAsShadow, Shadow} from './types'
 export type {Shadow} from './types'
 
 export interface PostShadow {
@@ -93,8 +94,12 @@ function mergeShadow(
   })
 }
 
-export function updatePostShadow(uri: string, value: Partial<PostShadow>) {
-  const cachedPosts = findPostsInCache(uri)
+export function updatePostShadow(
+  queryClient: QueryClient,
+  uri: string,
+  value: Partial<PostShadow>,
+) {
+  const cachedPosts = findPostsInCache(queryClient, uri)
   for (let post of cachedPosts) {
     shadows.set(post, {...shadows.get(post), ...value})
   }
@@ -104,6 +109,7 @@ export function updatePostShadow(uri: string, value: Partial<PostShadow>) {
 }
 
 function* findPostsInCache(
+  queryClient: QueryClient,
   uri: string,
 ): Generator<AppBskyFeedDefs.PostView, void> {
   for (let post of findAllPostsInFeedQueryData(queryClient, uri)) {

src/state/cache/profile-shadow.ts

@@ -1,7 +1,10 @@
-import {useEffect, useState, useMemo} from 'react'
-import EventEmitter from 'eventemitter3'
+import {useEffect, useMemo, useState} from 'react'
 import {AppBskyActorDefs} from '@atproto/api'
+import {QueryClient} from '@tanstack/react-query'
+import EventEmitter from 'eventemitter3'
+
 import {batchedUpdates} from '#/lib/batchedUpdates'
+import {findAllProfilesInQueryData as findAllProfilesInActorSearchQueryData} from '../queries/actor-search'
 import {findAllProfilesInQueryData as findAllProfilesInListMembersQueryData} from '../queries/list-members'
 import {findAllProfilesInQueryData as findAllProfilesInMyBlockedAccountsQueryData} from '../queries/my-blocked-accounts'
 import {findAllProfilesInQueryData as findAllProfilesInMyMutedAccountsQueryData} from '../queries/my-muted-accounts'
@@ -11,9 +14,7 @@ import {findAllProfilesInQueryData as findAllProfilesInProfileQueryData} from '.
 import {findAllProfilesInQueryData as findAllProfilesInProfileFollowersQueryData} from '../queries/profile-followers'
 import {findAllProfilesInQueryData as findAllProfilesInProfileFollowsQueryData} from '../queries/profile-follows'
 import {findAllProfilesInQueryData as findAllProfilesInSuggestedFollowsQueryData} from '../queries/suggested-follows'
-import {findAllProfilesInQueryData as findAllProfilesInActorSearchQueryData} from '../queries/actor-search'
-import {Shadow, castAsShadow} from './types'
-import {queryClient} from 'lib/react-query'
+import {castAsShadow, Shadow} from './types'
 export type {Shadow} from './types'
 
 export interface ProfileShadow {
@@ -58,10 +59,11 @@ export function useProfileShadow<
 }
 
 export function updateProfileShadow(
+  queryClient: QueryClient,
   did: string,
   value: Partial<ProfileShadow>,
 ) {
-  const cachedProfiles = findProfilesInCache(did)
+  const cachedProfiles = findProfilesInCache(queryClient, did)
   for (let post of cachedProfiles) {
     shadows.set(post, {...shadows.get(post), ...value})
   }
@@ -90,6 +92,7 @@ function mergeShadow<TProfileView extends AppBskyActorDefs.ProfileView>(
 }
 
 function* findProfilesInCache(
+  queryClient: QueryClient,
   did: string,
 ): Generator<AppBskyActorDefs.ProfileView, void> {
   yield* findAllProfilesInListMembersQueryData(queryClient, did)

src/state/queries/post-feed.ts

@@ -3,37 +3,37 @@ import {AppState} from 'react-native'
 import {
   AppBskyFeedDefs,
   AppBskyFeedPost,
-  ModerationDecision,
   AtUri,
+  ModerationDecision,
 } from '@atproto/api'
 import {
-  useInfiniteQuery,
   InfiniteData,
-  QueryKey,
   QueryClient,
+  QueryKey,
+  useInfiniteQuery,
   useQueryClient,
 } from '@tanstack/react-query'
-import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped'
-import {useFeedTuners} from '../preferences/feed-tuners'
-import {FeedTuner, FeedTunerFn, NoopFeedTuner} from 'lib/api/feed-manip'
-import {FeedAPI, ReasonFeedSource} from 'lib/api/feed/types'
-import {FollowingFeedAPI} from 'lib/api/feed/following'
-import {AuthorFeedAPI} from 'lib/api/feed/author'
-import {LikesFeedAPI} from 'lib/api/feed/likes'
-import {CustomFeedAPI} from 'lib/api/feed/custom'
-import {ListFeedAPI} from 'lib/api/feed/list'
-import {MergeFeedAPI} from 'lib/api/feed/merge'
+
 import {HomeFeedAPI} from '#/lib/api/feed/home'
+import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped'
 import {logger} from '#/logger'
 import {STALE} from '#/state/queries'
-import {precacheFeedPostProfiles} from './profile'
-import {getAgent} from '#/state/session'
 import {DEFAULT_LOGGED_OUT_PREFERENCES} from '#/state/queries/preferences/const'
-import {KnownError} from '#/view/com/posts/FeedErrorMessage'
-import {embedViewRecordToPostView, getEmbeddedPost} from './util'
-import {useModerationOpts} from './preferences'
-import {queryClient} from 'lib/react-query'
+import {getAgent} from '#/state/session'
+import {AuthorFeedAPI} from 'lib/api/feed/author'
+import {CustomFeedAPI} from 'lib/api/feed/custom'
+import {FollowingFeedAPI} from 'lib/api/feed/following'
+import {LikesFeedAPI} from 'lib/api/feed/likes'
+import {ListFeedAPI} from 'lib/api/feed/list'
+import {MergeFeedAPI} from 'lib/api/feed/merge'
+import {FeedAPI, ReasonFeedSource} from 'lib/api/feed/types'
+import {FeedTuner, FeedTunerFn, NoopFeedTuner} from 'lib/api/feed-manip'
 import {BSKY_FEED_OWNER_DIDS} from 'lib/constants'
+import {KnownError} from '#/view/com/posts/FeedErrorMessage'
+import {useFeedTuners} from '../preferences/feed-tuners'
+import {useModerationOpts} from './preferences'
+import {precacheFeedPostProfiles} from './profile'
+import {embedViewRecordToPostView, getEmbeddedPost} from './util'
 
 type ActorDid = string
 type AuthorFilter =
@@ -458,7 +458,11 @@ function assertSomePostsPassModeration(feed: AppBskyFeedDefs.FeedViewPost[]) {
   }
 }
 
-export function resetProfilePostsQueries(did: string, timeout = 0) {
+export function resetProfilePostsQueries(
+  queryClient: QueryClient,
+  did: string,
+  timeout = 0,
+) {
   setTimeout(() => {
     queryClient.resetQueries({
       predicate: query =>

src/state/queries/post.ts

@@ -1,12 +1,13 @@
 import {useCallback} from 'react'
 import {AppBskyFeedDefs, AtUri} from '@atproto/api'
-import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query'
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
+
+import {track} from '#/lib/analytics/analytics'
+import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
+import {logEvent, LogEvents} from '#/lib/statsig/statsig'
+import {updatePostShadow} from '#/state/cache/post-shadow'
 import {Shadow} from '#/state/cache/types'
 import {getAgent} from '#/state/session'
-import {updatePostShadow} from '#/state/cache/post-shadow'
-import {track} from '#/lib/analytics/analytics'
-import {logEvent, LogEvents} from '#/lib/statsig/statsig'
-import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
 
 export const RQKEY = (postUri: string) => ['post', postUri]
 
@@ -62,6 +63,7 @@ export function usePostLikeMutationQueue(
   logContext: LogEvents['post:like']['logContext'] &
     LogEvents['post:unlike']['logContext'],
 ) {
+  const queryClient = useQueryClient()
   const postUri = post.uri
   const postCid = post.cid
   const initialLikeUri = post.viewer?.like
@@ -89,7 +91,7 @@ export function usePostLikeMutationQueue(
     },
     onSuccess(finalLikeUri) {
       // finalize
-      updatePostShadow(postUri, {
+      updatePostShadow(queryClient, postUri, {
         likeUri: finalLikeUri,
       })
     },
@@ -97,19 +99,19 @@ export function usePostLikeMutationQueue(
 
   const queueLike = useCallback(() => {
     // optimistically update
-    updatePostShadow(postUri, {
+    updatePostShadow(queryClient, postUri, {
       likeUri: 'pending',
     })
     return queueToggle(true)
-  }, [postUri, queueToggle])
+  }, [queryClient, postUri, queueToggle])
 
   const queueUnlike = useCallback(() => {
     // optimistically update
-    updatePostShadow(postUri, {
+    updatePostShadow(queryClient, postUri, {
       likeUri: undefined,
     })
     return queueToggle(false)
-  }, [postUri, queueToggle])
+  }, [queryClient, postUri, queueToggle])
 
   return [queueLike, queueUnlike]
 }
@@ -149,6 +151,7 @@ export function usePostRepostMutationQueue(
   logContext: LogEvents['post:repost']['logContext'] &
     LogEvents['post:unrepost']['logContext'],
 ) {
+  const queryClient = useQueryClient()
   const postUri = post.uri
   const postCid = post.cid
   const initialRepostUri = post.viewer?.repost
@@ -176,7 +179,7 @@ export function usePostRepostMutationQueue(
     },
     onSuccess(finalRepostUri) {
       // finalize
-      updatePostShadow(postUri, {
+      updatePostShadow(queryClient, postUri, {
         repostUri: finalRepostUri,
       })
     },
@@ -184,19 +187,19 @@ export function usePostRepostMutationQueue(
 
   const queueRepost = useCallback(() => {
     // optimistically update
-    updatePostShadow(postUri, {
+    updatePostShadow(queryClient, postUri, {
       repostUri: 'pending',
     })
     return queueToggle(true)
-  }, [postUri, queueToggle])
+  }, [queryClient, postUri, queueToggle])
 
   const queueUnrepost = useCallback(() => {
     // optimistically update
-    updatePostShadow(postUri, {
+    updatePostShadow(queryClient, postUri, {
       repostUri: undefined,
     })
     return queueToggle(false)
-  }, [postUri, queueToggle])
+  }, [queryClient, postUri, queueToggle])
 
   return [queueRepost, queueUnrepost]
 }
@@ -234,12 +237,13 @@ function usePostUnrepostMutation(
 }
 
 export function usePostDeleteMutation() {
+  const queryClient = useQueryClient()
   return useMutation<void, Error, {uri: string}>({
     mutationFn: async ({uri}) => {
       await getAgent().deletePost(uri)
     },
     onSuccess(data, variables) {
-      updatePostShadow(variables.uri, {isDeleted: true})
+      updatePostShadow(queryClient, variables.uri, {isDeleted: true})
       track('Post:Delete')
     },
   })

src/state/queries/preferences/index.ts

@@ -1,33 +1,33 @@
-import {useMemo, createContext, useContext} from 'react'
-import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query'
+import {createContext, useContext, useMemo} from 'react'
 import {
-  LabelPreference,
-  BskyFeedViewPreference,
-  ModerationOpts,
   AppBskyActorDefs,
   BSKY_LABELER_DID,
+  BskyFeedViewPreference,
+  LabelPreference,
+  ModerationOpts,
 } from '@atproto/api'
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {track} from '#/lib/analytics/analytics'
 import {getAge} from '#/lib/strings/time'
-import {getAgent, useSession} from '#/state/session'
-import {
-  UsePreferencesQueryResponse,
-  ThreadViewPreferences,
-} from '#/state/queries/preferences/types'
+import {useHiddenPosts, useLabelDefinitions} from '#/state/preferences'
+import {STALE} from '#/state/queries'
 import {
   DEFAULT_HOME_FEED_PREFS,
-  DEFAULT_THREAD_VIEW_PREFS,
   DEFAULT_LOGGED_OUT_PREFERENCES,
+  DEFAULT_THREAD_VIEW_PREFS,
 } from '#/state/queries/preferences/const'
 import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation'
-import {STALE} from '#/state/queries'
-import {useHiddenPosts, useLabelDefinitions} from '#/state/preferences'
+import {
+  ThreadViewPreferences,
+  UsePreferencesQueryResponse,
+} from '#/state/queries/preferences/types'
+import {getAgent, useSession} from '#/state/session'
 import {saveLabelers} from '#/state/session/agent-config'
 
-export * from '#/state/queries/preferences/types'
-export * from '#/state/queries/preferences/moderation'
 export * from '#/state/queries/preferences/const'
+export * from '#/state/queries/preferences/moderation'
+export * from '#/state/queries/preferences/types'
 
 export const preferencesQueryKey = ['getPreferences']
 
@@ -40,6 +40,8 @@ export function usePreferencesQuery() {
     queryFn: async () => {
       const agent = getAgent()
 
+      console.log('GET PREFERENCES', agent.session?.did)
+
       if (agent.session?.did === undefined) {
         return DEFAULT_LOGGED_OUT_PREFERENCES
       } else {

src/state/queries/profile.ts

@@ -1,32 +1,33 @@
 import {useCallback} from 'react'
+import {Image as RNImage} from 'react-native-image-crop-picker'
 import {
-  AtUri,
   AppBskyActorDefs,
-  AppBskyActorProfile,
   AppBskyActorGetProfile,
-  AppBskyFeedDefs,
+  AppBskyActorProfile,
   AppBskyEmbedRecord,
   AppBskyEmbedRecordWithMedia,
+  AppBskyFeedDefs,
+  AtUri,
 } from '@atproto/api'
 import {
+  QueryClient,
+  useMutation,
   useQuery,
   useQueryClient,
-  useMutation,
-  QueryClient,
 } from '@tanstack/react-query'
-import {Image as RNImage} from 'react-native-image-crop-picker'
-import {useSession, getAgent} from '../session'
-import {updateProfileShadow} from '../cache/profile-shadow'
+
+import {track} from '#/lib/analytics/analytics'
 import {uploadBlob} from '#/lib/api'
 import {until} from '#/lib/async/until'
-import {Shadow} from '#/state/cache/types'
-import {resetProfilePostsQueries} from '#/state/queries/post-feed'
 import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
-import {RQKEY as RQKEY_MY_MUTED} from './my-muted-accounts'
-import {RQKEY as RQKEY_MY_BLOCKED} from './my-blocked-accounts'
-import {STALE} from '#/state/queries'
-import {track} from '#/lib/analytics/analytics'
 import {logEvent, LogEvents} from '#/lib/statsig/statsig'
+import {Shadow} from '#/state/cache/types'
+import {STALE} from '#/state/queries'
+import {resetProfilePostsQueries} from '#/state/queries/post-feed'
+import {updateProfileShadow} from '../cache/profile-shadow'
+import {getAgent, useSession} from '../session'
+import {RQKEY as RQKEY_MY_BLOCKED} from './my-blocked-accounts'
+import {RQKEY as RQKEY_MY_MUTED} from './my-muted-accounts'
 import {ThreadNode} from './post-thread'
 
 export const RQKEY = (did: string) => ['profile', did]
@@ -190,6 +191,7 @@ export function useProfileFollowMutationQueue(
   logContext: LogEvents['profile:follow']['logContext'] &
     LogEvents['profile:unfollow']['logContext'],
 ) {
+  const queryClient = useQueryClient()
   const did = profile.did
   const initialFollowingUri = profile.viewer?.following
   const followMutation = useProfileFollowMutation(logContext)
@@ -215,7 +217,7 @@ export function useProfileFollowMutationQueue(
     },
     onSuccess(finalFollowingUri) {
       // finalize
-      updateProfileShadow(did, {
+      updateProfileShadow(queryClient, did, {
         followingUri: finalFollowingUri,
       })
     },
@@ -223,19 +225,19 @@ export function useProfileFollowMutationQueue(
 
   const queueFollow = useCallback(() => {
     // optimistically update
-    updateProfileShadow(did, {
+    updateProfileShadow(queryClient, did, {
       followingUri: 'pending',
     })
     return queueToggle(true)
-  }, [did, queueToggle])
+  }, [queryClient, did, queueToggle])
 
   const queueUnfollow = useCallback(() => {
     // optimistically update
-    updateProfileShadow(did, {
+    updateProfileShadow(queryClient, did, {
       followingUri: undefined,
     })
     return queueToggle(false)
-  }, [did, queueToggle])
+  }, [queryClient, did, queueToggle])
 
   return [queueFollow, queueUnfollow]
 }
@@ -269,6 +271,7 @@ function useProfileUnfollowMutation(
 export function useProfileMuteMutationQueue(
   profile: Shadow<AppBskyActorDefs.ProfileViewDetailed>,
 ) {
+  const queryClient = useQueryClient()
   const did = profile.did
   const initialMuted = profile.viewer?.muted
   const muteMutation = useProfileMuteMutation()
@@ -291,25 +294,25 @@ export function useProfileMuteMutationQueue(
     },
     onSuccess(finalMuted) {
       // finalize
-      updateProfileShadow(did, {muted: finalMuted})
+      updateProfileShadow(queryClient, did, {muted: finalMuted})
     },
   })
 
   const queueMute = useCallback(() => {
     // optimistically update
-    updateProfileShadow(did, {
+    updateProfileShadow(queryClient, did, {
       muted: true,
     })
     return queueToggle(true)
-  }, [did, queueToggle])
+  }, [queryClient, did, queueToggle])
 
   const queueUnmute = useCallback(() => {
     // optimistically update
-    updateProfileShadow(did, {
+    updateProfileShadow(queryClient, did, {
       muted: false,
     })
     return queueToggle(false)
-  }, [did, queueToggle])
+  }, [queryClient, did, queueToggle])
 
   return [queueMute, queueUnmute]
 }
@@ -341,6 +344,7 @@ function useProfileUnmuteMutation() {
 export function useProfileBlockMutationQueue(
   profile: Shadow<AppBskyActorDefs.ProfileViewDetailed>,
 ) {
+  const queryClient = useQueryClient()
   const did = profile.did
   const initialBlockingUri = profile.viewer?.blocking
   const blockMutation = useProfileBlockMutation()
@@ -366,7 +370,7 @@ export function useProfileBlockMutationQueue(
     },
     onSuccess(finalBlockingUri) {
       // finalize
-      updateProfileShadow(did, {
+      updateProfileShadow(queryClient, did, {
         blockingUri: finalBlockingUri,
       })
     },
@@ -374,19 +378,19 @@ export function useProfileBlockMutationQueue(
 
   const queueBlock = useCallback(() => {
     // optimistically update
-    updateProfileShadow(did, {
+    updateProfileShadow(queryClient, did, {
       blockingUri: 'pending',
     })
     return queueToggle(true)
-  }, [did, queueToggle])
+  }, [queryClient, did, queueToggle])
 
   const queueUnblock = useCallback(() => {
     // optimistically update
-    updateProfileShadow(did, {
+    updateProfileShadow(queryClient, did, {
       blockingUri: undefined,
     })
     return queueToggle(false)
-  }, [did, queueToggle])
+  }, [queryClient, did, queueToggle])
 
   return [queueBlock, queueUnblock]
 }
@@ -406,13 +410,14 @@ function useProfileBlockMutation() {
     },
     onSuccess(_, {did}) {
       queryClient.invalidateQueries({queryKey: RQKEY_MY_BLOCKED()})
-      resetProfilePostsQueries(did, 1000)
+      resetProfilePostsQueries(queryClient, did, 1000)
     },
   })
 }
 
 function useProfileUnblockMutation() {
   const {currentAccount} = useSession()
+  const queryClient = useQueryClient()
   return useMutation<void, Error, {did: string; blockUri: string}>({
     mutationFn: async ({blockUri}) => {
       if (!currentAccount) {
@@ -425,7 +430,7 @@ function useProfileUnblockMutation() {
       })
     },
     onSuccess(_, {did}) {
-      resetProfilePostsQueries(did, 1000)
+      resetProfilePostsQueries(queryClient, did, 1000)
     },
   })
 }

src/state/session/index.tsx

@@ -4,7 +4,6 @@ import {
   BSKY_LABELER_DID,
   BskyAgent,
 } from '@atproto/api'
-import {useQueryClient} from '@tanstack/react-query'
 import {jwtDecode} from 'jwt-decode'
 
 import {track} from '#/lib/analytics/analytics'
@@ -178,7 +177,6 @@ function createPersistSessionHandler(
 }
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const queryClient = useQueryClient()
   const isDirty = React.useRef(false)
   const [state, setState] = React.useState<SessionState>({
     isInitialLoad: true,
@@ -211,12 +209,11 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const clearCurrentAccount = React.useCallback(() => {
     logger.warn(`session: clear current account`)
     __globalAgent = PUBLIC_BSKY_AGENT
-    queryClient.clear()
     setStateAndPersist(s => ({
       ...s,
       currentAccount: undefined,
     }))
-  }, [setStateAndPersist, queryClient])
+  }, [setStateAndPersist])
 
   const createAccount = React.useCallback<ApiContext['createAccount']>(
     async ({
@@ -286,14 +283,13 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       )
 
       __globalAgent = agent
-      queryClient.clear()
       upsertAccount(account)
 
       logger.debug(`session: created account`, {}, logger.DebugContext.session)
       track('Create Account')
       logEvent('account:create:success', {})
     },
-    [upsertAccount, queryClient, clearCurrentAccount],
+    [upsertAccount, clearCurrentAccount],
   )
 
   const login = React.useCallback<ApiContext['login']>(
@@ -334,7 +330,6 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       __globalAgent = agent
       // @ts-ignore
       if (IS_DEV && isWeb) window.agent = agent
-      queryClient.clear()
       upsertAccount(account)
 
       logger.debug(`session: logged in`, {}, logger.DebugContext.session)
@@ -342,7 +337,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       track('Sign In', {resumedSession: false})
       logEvent('account:loggedIn', {logContext, withPassword: true})
     },
-    [upsertAccount, queryClient, clearCurrentAccount],
+    [upsertAccount, clearCurrentAccount],
   )
 
   const logout = React.useCallback<ApiContext['logout']>(
@@ -373,6 +368,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
         persistSession: createPersistSessionHandler(
           account,
           ({expired, refreshedAccount}) => {
+            console.log('PERSIST CALLBACK', refreshedAccount.did)
             upsertAccount(refreshedAccount, expired)
           },
           {networkErrorCallback: clearCurrentAccount},
@@ -411,7 +407,6 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 
         agent.session = prevSession
         __globalAgent = agent
-        queryClient.clear()
         upsertAccount(account)
 
         if (prevSession.deactivated) {
@@ -447,8 +442,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 
         try {
           const freshAccount = await resumeSessionWithFreshAccount()
+          console.log('RESUMED SESSION', freshAccount.did)
           __globalAgent = agent
-          queryClient.clear()
           upsertAccount(freshAccount)
         } catch (e) {
           /*
@@ -489,7 +484,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
         }
       }
     },
-    [upsertAccount, queryClient, clearCurrentAccount],
+    [upsertAccount, clearCurrentAccount],
   )
 
   const resumeSession = React.useCallback<ApiContext['resumeSession']>(

src/view/com/auth/HomeLoggedOutCTA.tsx

@@ -1,15 +1,14 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {colors, s} from '#/lib/styles'
-import {useLoggedOutViewControls} from '#/state/shell/logged-out'
-import {TextLink} from '../util/Link'
-import {Text} from '../util/text/Text'
+import {Trans, msg} from '@lingui/macro'
 import {ScrollView} from '../util/Views'
+import {Text} from '../util/text/Text'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {colors, s} from '#/lib/styles'
+import {TextLink} from '../util/Link'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 
 export function HomeLoggedOutCTA() {
   const pal = usePalette('default')
@@ -80,7 +79,7 @@ export function HomeLoggedOutCTA() {
               styles.btnLabel,
               isMobile && styles.btnLabelMobile,
             ]}>
-            <Trans>Sign in</Trans>
+            <Trans>Sign In</Trans>
           </Text>
         </TouchableOpacity>
       </View>

src/view/com/auth/SplashScreen.tsx

@@ -87,7 +87,7 @@ export const SplashScreen = ({
             variant="solid"
             color="secondary">
             <ButtonText>
-              <Trans>Sign in</Trans>
+              <Trans>Sign In</Trans>
             </ButtonText>
           </Button>
         </View>

src/view/com/auth/SplashScreen.web.tsx

@@ -116,7 +116,7 @@ export const SplashScreen = ({
                 variant="solid"
                 color="secondary">
                 <ButtonText>
-                  <Trans>Sign in</Trans>
+                  <Trans>Sign In</Trans>
                 </ButtonText>
               </Button>
             </View>

src/view/com/composer/Composer.tsx

@@ -1,4 +1,5 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
   BackHandler,
@@ -11,62 +12,60 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {RichText} from '@atproto/api'
+import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {observer} from 'mobx-react-lite'
-
-import {logEvent} from '#/lib/statsig/statsig'
-import {logger} from '#/logger'
-import {emitPostCreated} from '#/state/events'
-import {useModals} from '#/state/modals'
-import {useRequireAltTextEnabled} from '#/state/preferences'
-import {
-  toPostLanguages,
-  useLanguagePrefs,
-  useLanguagePrefsApi,
-} from '#/state/preferences/languages'
-import {useProfileQuery} from '#/state/queries/profile'
-import {ThreadgateSetting} from '#/state/queries/threadgate'
-import {getAgent, useSession} from '#/state/session'
-import {useComposerControls} from '#/state/shell/composer'
+import {RichText} from '@atproto/api'
 import {useAnalytics} from 'lib/analytics/analytics'
-import * as apilib from 'lib/api/index'
-import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
 import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {cleanError} from 'lib/strings/errors'
-import {insertMentionAt} from 'lib/strings/mention-manip'
-import {shortenLinks} from 'lib/strings/rich-text-manip'
-import {toShortUrl} from 'lib/strings/url-helpers'
-import {colors, gradients, s} from 'lib/styles'
-import {isAndroid, isIOS, isNative, isWeb} from 'platform/detection'
-import {useDialogStateControlContext} from 'state/dialogs'
-import {GalleryModel} from 'state/models/media/gallery'
-import {ComposerOpts} from 'state/shell/composer'
-import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo'
-import * as Prompt from '#/components/Prompt'
-import {QuoteEmbed} from '../util/post-embeds/QuoteEmbed'
+import {ExternalEmbed} from './ExternalEmbed'
 import {Text} from '../util/text/Text'
 import * as Toast from '../util/Toast'
-import {UserAvatar} from '../util/UserAvatar'
-import {CharProgress} from './char-progress/CharProgress'
-import {ExternalEmbed} from './ExternalEmbed'
-import {LabelsBtn} from './labels/LabelsBtn'
-import {Gallery} from './photos/Gallery'
-import {OpenCameraBtn} from './photos/OpenCameraBtn'
-import {SelectPhotoBtn} from './photos/SelectPhotoBtn'
-import {SelectLangBtn} from './select-language/SelectLangBtn'
-import {SuggestedLanguage} from './select-language/SuggestedLanguage'
 // TODO: Prevent naming components that coincide with RN primitives
 // due to linting false positives
 import {TextInput, TextInputRef} from './text-input/TextInput'
+import {CharProgress} from './char-progress/CharProgress'
+import {UserAvatar} from '../util/UserAvatar'
+import * as apilib from 'lib/api/index'
+import {ComposerOpts} from 'state/shell/composer'
+import {s, colors, gradients} from 'lib/styles'
+import {cleanError} from 'lib/strings/errors'
+import {shortenLinks} from 'lib/strings/rich-text-manip'
+import {toShortUrl} from 'lib/strings/url-helpers'
+import {SelectPhotoBtn} from './photos/SelectPhotoBtn'
+import {OpenCameraBtn} from './photos/OpenCameraBtn'
 import {ThreadgateBtn} from './threadgate/ThreadgateBtn'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {useExternalLinkFetch} from './useExternalLinkFetch'
+import {isWeb, isNative, isAndroid, isIOS} from 'platform/detection'
+import {QuoteEmbed} from '../util/post-embeds/QuoteEmbed'
+import {GalleryModel} from 'state/models/media/gallery'
+import {Gallery} from './photos/Gallery'
+import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
+import {LabelsBtn} from './labels/LabelsBtn'
+import {SelectLangBtn} from './select-language/SelectLangBtn'
+import {SuggestedLanguage} from './select-language/SuggestedLanguage'
+import {insertMentionAt} from 'lib/strings/mention-manip'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useModals} from '#/state/modals'
+import {useRequireAltTextEnabled} from '#/state/preferences'
+import {
+  useLanguagePrefs,
+  useLanguagePrefsApi,
+  toPostLanguages,
+} from '#/state/preferences/languages'
+import {useSession, getAgent} from '#/state/session'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useComposerControls} from '#/state/shell/composer'
+import {emitPostCreated} from '#/state/events'
+import {ThreadgateSetting} from '#/state/queries/threadgate'
+import {logger} from '#/logger'
+import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo'
+import * as Prompt from '#/components/Prompt'
+import {useDialogStateControlContext} from 'state/dialogs'
+import {logEvent} from '#/lib/statsig/statsig'
 
 type Props = ComposerOpts
 export const ComposePost = observer(function ComposePost({
@@ -507,9 +506,7 @@ export const ComposePost = observer(function ComposePost({
         control={discardPromptControl}
         title={_(msg`Discard draft?`)}
         description={_(msg`Are you sure you'd like to discard this draft?`)}
-        onConfirm={() => {
-          discardPromptControl.close(onClose)
-        }}
+        onConfirm={onClose}
         confirmButtonCta={_(msg`Discard`)}
         confirmButtonColor="negative"
       />

src/view/com/util/layouts/LoggedOutLayout.tsx

@@ -1,24 +1,19 @@
 import React from 'react'
-import {ScrollView, StyleSheet, View} from 'react-native'
-
-import {isWeb} from '#/platform/detection'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
+import {StyleSheet, View} from 'react-native'
+import {Text} from '../text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {atoms as a} from '#/alf'
-import {Text} from '../text/Text'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 
 export const LoggedOutLayout = ({
   leadin,
   title,
   description,
   children,
-  scrollable,
 }: React.PropsWithChildren<{
   leadin: string
   title: string
   description: string
-  scrollable?: boolean
 }>) => {
   const {isMobile, isTabletOrMobile} = useWebMediaQueries()
   const pal = usePalette('default')
@@ -30,18 +25,7 @@ export const LoggedOutLayout = ({
   })
 
   if (isMobile) {
-    if (scrollable) {
-      return (
-        <ScrollView
-          style={styles.scrollview}
-          keyboardShouldPersistTaps="handled"
-          keyboardDismissMode="on-drag">
-          <View style={a.pt_md}>{children}</View>
-        </ScrollView>
-      )
-    } else {
-      return <View style={a.pt_md}>{children}</View>
-    }
+    return <View style={{paddingTop: 10}}>{children}</View>
   }
   return (
     <View style={styles.container}>
@@ -66,23 +50,9 @@ export const LoggedOutLayout = ({
           {description}
         </Text>
       </View>
-      {scrollable ? (
-        <View style={[styles.scrollableContent, contentBg]}>
-          <ScrollView
-            style={styles.scrollview}
-            contentContainerStyle={styles.scrollViewContentContainer}
-            keyboardShouldPersistTaps="handled"
-            keyboardDismissMode="on-drag">
-            <View style={[styles.contentWrapper, isWeb && a.my_auto]}>
-              {children}
-            </View>
-          </ScrollView>
-        </View>
-      ) : (
-        <View style={[styles.content, contentBg]}>
-          <View style={styles.contentWrapper}>{children}</View>
-        </View>
-      )}
+      <View style={[styles.content, contentBg]}>
+        <View style={styles.contentWrapper}>{children}</View>
+      </View>
     </View>
   )
 }
@@ -104,16 +74,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 40,
     justifyContent: 'center',
   },
-  scrollableContent: {
-    flex: 2,
-  },
-  scrollview: {
-    flex: 1,
-  },
-  scrollViewContentContainer: {
-    flex: 1,
-    paddingHorizontal: 40,
-  },
+
   leadinText: {
     fontSize: 36,
     fontWeight: '800',

src/view/screens/Profile.tsx

@@ -1,6 +1,5 @@
 import React, {useMemo} from 'react'
 import {StyleSheet} from 'react-native'
-import {useFocusEffect} from '@react-navigation/native'
 import {
   AppBskyActorDefs,
   moderateProfile,
@@ -9,36 +8,38 @@ import {
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
-import {CenteredView} from '../com/util/Views'
-import {ListRef} from '../com/util/List'
-import {ScreenHider} from '#/components/moderation/ScreenHider'
-import {ProfileLists} from '../com/lists/ProfileLists'
-import {ProfileFeedgens} from '../com/feeds/ProfileFeedgens'
-import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
-import {ErrorScreen} from '../com/util/error/ErrorScreen'
-import {FAB} from '../com/util/fab/FAB'
-import {s, colors} from 'lib/styles'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {ComposeIcon2} from 'lib/icons'
-import {useSetTitle} from 'lib/hooks/useSetTitle'
-import {combinedDisplayName} from 'lib/strings/display-names'
-import {resetProfilePostsQueries} from '#/state/queries/post-feed'
-import {useResolveDidQuery} from '#/state/queries/resolve-uri'
-import {useProfileQuery} from '#/state/queries/profile'
-import {useProfileShadow} from '#/state/cache/profile-shadow'
-import {useSession, getAgent} from '#/state/session'
-import {useModerationOpts} from '#/state/queries/preferences'
-import {useLabelerInfoQuery} from '#/state/queries/labeler'
-import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
-import {cleanError} from '#/lib/strings/errors'
-import {useComposerControls} from '#/state/shell/composer'
-import {listenSoftReset} from '#/state/events'
-import {isInvalidHandle} from '#/lib/strings/handles'
+import {useFocusEffect} from '@react-navigation/native'
+import {useQueryClient} from '@tanstack/react-query'
 
+import {cleanError} from '#/lib/strings/errors'
+import {isInvalidHandle} from '#/lib/strings/handles'
+import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {listenSoftReset} from '#/state/events'
+import {useLabelerInfoQuery} from '#/state/queries/labeler'
+import {resetProfilePostsQueries} from '#/state/queries/post-feed'
+import {useModerationOpts} from '#/state/queries/preferences'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useResolveDidQuery} from '#/state/queries/resolve-uri'
+import {getAgent, useSession} from '#/state/session'
+import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
+import {useComposerControls} from '#/state/shell/composer'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {useSetTitle} from 'lib/hooks/useSetTitle'
+import {ComposeIcon2} from 'lib/icons'
+import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
+import {combinedDisplayName} from 'lib/strings/display-names'
+import {colors, s} from 'lib/styles'
+import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
+import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header'
 import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed'
 import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels'
-import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header'
+import {ScreenHider} from '#/components/moderation/ScreenHider'
+import {ProfileFeedgens} from '../com/feeds/ProfileFeedgens'
+import {ProfileLists} from '../com/lists/ProfileLists'
+import {ErrorScreen} from '../com/util/error/ErrorScreen'
+import {FAB} from '../com/util/fab/FAB'
+import {ListRef} from '../com/util/List'
+import {CenteredView} from '../com/util/Views'
 
 interface SectionRef {
   scrollToTop: () => void
@@ -48,6 +49,7 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
 export function ProfileScreen({route}: Props) {
   const {_} = useLingui()
   const {currentAccount} = useSession()
+  const queryClient = useQueryClient()
   const name =
     route.params.name === 'me' ? currentAccount?.did : route.params.name
   const moderationOpts = useModerationOpts()
@@ -78,9 +80,9 @@ export function ProfileScreen({route}: Props) {
   // When we open the profile, we want to reset the posts query if we are blocked.
   React.useEffect(() => {
     if (resolvedDid && profile?.viewer?.blockedBy) {
-      resetProfilePostsQueries(resolvedDid)
+      resetProfilePostsQueries(queryClient, resolvedDid)
     }
-  }, [profile?.viewer?.blockedBy, resolvedDid])
+  }, [queryClient, profile?.viewer?.blockedBy, resolvedDid])
 
   // Most pushes will happen here, since we will have only placeholder data
   if (isLoadingDid || isLoadingProfile) {