Check for Trans component

Move scrollview to `LoggedOutLayout` to fix scrolling on web

src/App.native.tsx

@@ -12,15 +12,19 @@ import {
 import * as SplashScreen from 'expo-splash-screen'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useQueryClient} from '@tanstack/react-query'
+import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
 
 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 {useNotificationsListener} from 'lib/notifications/notifications'
-import {QueryProvider} from 'lib/react-query'
+import * as notifications from 'lib/notifications/notifications'
+import {
+  asyncStoragePersister,
+  dehydrateOptions,
+  queryClient,
+} from 'lib/react-query'
 import {s} from 'lib/styles'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {Provider as DialogStateProvider} from 'state/dialogs'
@@ -55,11 +59,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.`))
     })
@@ -75,29 +79,25 @@ function InnerApp() {
           <React.Fragment
             // Resets the entire tree below when it changes:
             key={currentAccount?.did}>
-            <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>
+            <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>
           </React.Fragment>
         </Splash>
       </Alf>
@@ -105,12 +105,6 @@ function InnerApp() {
   )
 }
 
-function PushNotificationsListener({children}: {children: React.ReactNode}) {
-  const queryClient = useQueryClient()
-  useNotificationsListener(queryClient)
-  return children
-}
-
 function App() {
   const [isReady, setReady] = useState(false)
 
@@ -127,27 +121,31 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <SessionProvider>
-      <ShellStateProvider>
-        <PrefsStateProvider>
-          <MutedThreadsProvider>
-            <InvitesStateProvider>
-              <ModalStateProvider>
-                <DialogStateProvider>
-                  <LightboxStateProvider>
-                    <I18nProvider>
-                      <PortalProvider>
-                        <InnerApp />
-                      </PortalProvider>
-                    </I18nProvider>
-                  </LightboxStateProvider>
-                </DialogStateProvider>
-              </ModalStateProvider>
-            </InvitesStateProvider>
-          </MutedThreadsProvider>
-        </PrefsStateProvider>
-      </ShellStateProvider>
-    </SessionProvider>
+    <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>
   )
 }
 

src/App.web.tsx

@@ -1,38 +1,44 @@
 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 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 {ThemeProvider as Alf} from '#/alf'
+import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 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 {QueryProvider} from 'lib/react-query'
+import {Shell} from 'view/shell/index'
+import {ToastContainer} from 'view/com/util/Toast.web'
 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 {
+  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 UnreadNotifsProvider} from 'state/queries/notifications/unread'
+import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
+import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
+import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
+import I18nProvider from './locale/i18nProvider'
 import {
   Provider as SessionProvider,
   useSession,
   useSessionApi,
 } from 'state/session'
-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 UnreadNotifsProvider} from 'state/queries/notifications/unread'
+import * as persisted from '#/state/persisted'
 import {Provider as PortalProvider} from '#/components/Portal'
-import I18nProvider from './locale/i18nProvider'
+import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
+import {useIntentHandler} from 'lib/hooks/useIntentHandler'
 
 function InnerApp() {
   const {isInitialLoad, currentAccount} = useSession()
@@ -54,27 +60,25 @@ function InnerApp() {
       <React.Fragment
         // Resets the entire tree below when it changes:
         key={currentAccount?.did}>
-        <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>
+        <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>
       </React.Fragment>
     </Alf>
   )
@@ -96,27 +100,31 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <SessionProvider>
-      <ShellStateProvider>
-        <PrefsStateProvider>
-          <MutedThreadsProvider>
-            <InvitesStateProvider>
-              <ModalStateProvider>
-                <DialogStateProvider>
-                  <LightboxStateProvider>
-                    <I18nProvider>
-                      <PortalProvider>
-                        <InnerApp />
-                      </PortalProvider>
-                    </I18nProvider>
-                  </LightboxStateProvider>
-                </DialogStateProvider>
-              </ModalStateProvider>
-            </InvitesStateProvider>
-          </MutedThreadsProvider>
-        </PrefsStateProvider>
-      </ShellStateProvider>
-    </SessionProvider>
+    <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>
   )
 }
 

src/components/Button.tsx

@@ -1,19 +1,21 @@
 import React from 'react'
 import {
-  Pressable,
-  Text,
-  PressableProps,
-  TextProps,
-  ViewStyle,
   AccessibilityProps,
-  View,
-  TextStyle,
-  StyleSheet,
+  Pressable,
+  PressableProps,
   StyleProp,
+  StyleSheet,
+  Text,
+  TextProps,
+  TextStyle,
+  View,
+  ViewStyle,
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
+import {Trans} from '@lingui/macro'
 
-import {useTheme, atoms as a, tokens, android, flatten} from '#/alf'
+import {logger} from '#/logger'
+import {android, atoms as a, flatten, tokens, useTheme} from '#/alf'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {normalizeTextStyles} from '#/components/Typography'
 
@@ -403,18 +405,51 @@ export function Button({
         </View>
       )}
       <Context.Provider value={context}>
-        {typeof children === 'string' ? (
-          <ButtonText>{children}</ButtonText>
-        ) : typeof children === 'function' ? (
-          children(context)
-        ) : (
-          children
-        )}
+        <ButtonTextErrorBoundary>
+          {/* @ts-ignore */}
+          {typeof children === 'string' || children?.type === Trans ? (
+            /* @ts-ignore */
+            <ButtonText>{children}</ButtonText>
+          ) : typeof children === 'function' ? (
+            children(context)
+          ) : (
+            children
+          )}
+        </ButtonTextErrorBoundary>
       </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,14 +1,12 @@
-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 {getAgent, SessionAccount} from '#/state/session'
-import {track} from 'lib/analytics/analytics'
-import {devicePlatform, isIOS} from 'platform/detection'
-import {resetToTab} from '../../Navigation'
+import {SessionAccount, getAgent} from '#/state/session'
 import {logEvent} from '../statsig/statsig'
 
 const SERVICE_DID = (serviceUrl?: string) =>
@@ -82,63 +80,53 @@ export function registerTokenChangeHandler(
   }
 }
 
-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(
-        '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
-        }
+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
       }
-    })
-
-    // handle notifications that are tapped on
-    const sub2 = Notifications.addNotificationResponseReceivedListener(
-      response => {
+      if (payload) {
         logger.debug(
-          'Notifications: response received',
-          {
-            actionIdentifier: response.actionIdentifier,
-          },
+          'Notifications: received payload',
+          payload,
           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()
+        // TODO: deeplink notif here
+      }
     }
-  }, [queryClient])
+  })
+
+  // 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) {
+      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
+    }
+  })
 }

src/lib/react-query.ts

@@ -0,0 +1,70 @@
+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

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

src/screens/Login/FormContainer.tsx

@@ -1,13 +1,6 @@
 import React from 'react'
-import {
-  ScrollView,
-  type StyleProp,
-  StyleSheet,
-  View,
-  type ViewStyle,
-} from 'react-native'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
 
-import {isWeb} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
@@ -16,38 +9,24 @@ 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 (
-    <ScrollView
+    <View
       testID={testID}
-      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>
+      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>
   )
 }
-
-const styles = StyleSheet.create({
-  maxHeight: {
-    // @ts-ignore web only -prf
-    maxHeight: isWeb ? '100vh' : undefined,
-    height: !isWeb ? '100%' : undefined,
-  },
-})

src/screens/Login/index.tsx

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

src/screens/Signup/StepCaptcha/index.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, 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'
@@ -54,7 +53,14 @@ export function StepCaptcha() {
   return (
     <ScreenTransition>
       <View style={[a.gap_lg]}>
-        <View style={[styles.container, completed && styles.center]}>
+        <View
+          style={[
+            a.w_full,
+            a.pb_xl,
+            a.overflow_hidden,
+            {minHeight: 500},
+            completed && [a.align_center, a.justify_center],
+          ]}>
           {!completed ? (
             <CaptchaWebView
               url={url}
@@ -72,24 +78,3 @@ 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,5 +1,6 @@
 import React from 'react'
-import {ScrollView, View} from 'react-native'
+import {View} from 'react-native'
+import {LayoutAnimationConfig} from 'react-native-reanimated'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -20,7 +21,7 @@ import {
 import {StepCaptcha} from '#/screens/Signup/StepCaptcha'
 import {StepHandle} from '#/screens/Signup/StepHandle'
 import {StepInfo} from '#/screens/Signup/StepInfo'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import {InlineLink} from '#/components/Link'
@@ -32,6 +33,7 @@ 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,
@@ -125,13 +127,16 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
       <LoggedOutLayout
         leadin=""
         title={_(msg`Create Account`)}
-        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}]}>
+        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},
+            ]}>
             <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>{' '}
@@ -152,13 +157,15 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
             </View>
 
             <View style={[a.pb_3xl]}>
-              {state.activeStep === SignupStep.INFO ? (
-                <StepInfo />
-              ) : state.activeStep === SignupStep.HANDLE ? (
-                <StepHandle />
-              ) : (
-                <StepCaptcha />
-              )}
+              <LayoutAnimationConfig skipEntering skipExiting>
+                {state.activeStep === SignupStep.INFO ? (
+                  <StepInfo />
+                ) : state.activeStep === SignupStep.HANDLE ? (
+                  <StepHandle />
+                ) : (
+                  <StepCaptcha />
+                )}
+              </LayoutAnimationConfig>
             </View>
 
             <View style={[a.flex_row, a.justify_between, a.pb_lg]}>
@@ -208,7 +215,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
               </Text>
             </View>
           </View>
-        </ScrollView>
+        </View>
       </LoggedOutLayout>
     </SignupContext.Provider>
   )

src/state/cache/post-shadow.ts

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

src/state/cache/profile-shadow.ts

@@ -1,10 +1,7 @@
-import {useEffect, useMemo, useState} from 'react'
-import {AppBskyActorDefs} from '@atproto/api'
-import {QueryClient} from '@tanstack/react-query'
+import {useEffect, useState, useMemo} from 'react'
 import EventEmitter from 'eventemitter3'
-
+import {AppBskyActorDefs} from '@atproto/api'
 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'
@@ -14,7 +11,9 @@ 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 {castAsShadow, Shadow} from './types'
+import {findAllProfilesInQueryData as findAllProfilesInActorSearchQueryData} from '../queries/actor-search'
+import {Shadow, castAsShadow} from './types'
+import {queryClient} from 'lib/react-query'
 export type {Shadow} from './types'
 
 export interface ProfileShadow {
@@ -59,11 +58,10 @@ export function useProfileShadow<
 }
 
 export function updateProfileShadow(
-  queryClient: QueryClient,
   did: string,
   value: Partial<ProfileShadow>,
 ) {
-  const cachedProfiles = findProfilesInCache(queryClient, did)
+  const cachedProfiles = findProfilesInCache(did)
   for (let post of cachedProfiles) {
     shadows.set(post, {...shadows.get(post), ...value})
   }
@@ -92,7 +90,6 @@ 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,
-  AtUri,
   ModerationDecision,
+  AtUri,
 } from '@atproto/api'
 import {
-  InfiniteData,
-  QueryClient,
-  QueryKey,
   useInfiniteQuery,
+  InfiniteData,
+  QueryKey,
+  QueryClient,
   useQueryClient,
 } from '@tanstack/react-query'
-
-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 {DEFAULT_LOGGED_OUT_PREFERENCES} from '#/state/queries/preferences/const'
-import {getAgent} from '#/state/session'
-import {AuthorFeedAPI} from 'lib/api/feed/author'
-import {CustomFeedAPI} from 'lib/api/feed/custom'
+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 {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 {HomeFeedAPI} from '#/lib/api/feed/home'
+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 {BSKY_FEED_OWNER_DIDS} from 'lib/constants'
 
 type ActorDid = string
 type AuthorFilter =
@@ -458,11 +458,7 @@ function assertSomePostsPassModeration(feed: AppBskyFeedDefs.FeedViewPost[]) {
   }
 }
 
-export function resetProfilePostsQueries(
-  queryClient: QueryClient,
-  did: string,
-  timeout = 0,
-) {
+export function resetProfilePostsQueries(did: string, timeout = 0) {
   setTimeout(() => {
     queryClient.resetQueries({
       predicate: query =>

src/state/queries/post.ts

@@ -1,13 +1,12 @@
 import {useCallback} from 'react'
 import {AppBskyFeedDefs, AtUri} from '@atproto/api'
-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 {useQuery, useMutation, useQueryClient} from '@tanstack/react-query'
 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]
 
@@ -63,7 +62,6 @@ 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
@@ -91,7 +89,7 @@ export function usePostLikeMutationQueue(
     },
     onSuccess(finalLikeUri) {
       // finalize
-      updatePostShadow(queryClient, postUri, {
+      updatePostShadow(postUri, {
         likeUri: finalLikeUri,
       })
     },
@@ -99,19 +97,19 @@ export function usePostLikeMutationQueue(
 
   const queueLike = useCallback(() => {
     // optimistically update
-    updatePostShadow(queryClient, postUri, {
+    updatePostShadow(postUri, {
       likeUri: 'pending',
     })
     return queueToggle(true)
-  }, [queryClient, postUri, queueToggle])
+  }, [postUri, queueToggle])
 
   const queueUnlike = useCallback(() => {
     // optimistically update
-    updatePostShadow(queryClient, postUri, {
+    updatePostShadow(postUri, {
       likeUri: undefined,
     })
     return queueToggle(false)
-  }, [queryClient, postUri, queueToggle])
+  }, [postUri, queueToggle])
 
   return [queueLike, queueUnlike]
 }
@@ -151,7 +149,6 @@ 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
@@ -179,7 +176,7 @@ export function usePostRepostMutationQueue(
     },
     onSuccess(finalRepostUri) {
       // finalize
-      updatePostShadow(queryClient, postUri, {
+      updatePostShadow(postUri, {
         repostUri: finalRepostUri,
       })
     },
@@ -187,19 +184,19 @@ export function usePostRepostMutationQueue(
 
   const queueRepost = useCallback(() => {
     // optimistically update
-    updatePostShadow(queryClient, postUri, {
+    updatePostShadow(postUri, {
       repostUri: 'pending',
     })
     return queueToggle(true)
-  }, [queryClient, postUri, queueToggle])
+  }, [postUri, queueToggle])
 
   const queueUnrepost = useCallback(() => {
     // optimistically update
-    updatePostShadow(queryClient, postUri, {
+    updatePostShadow(postUri, {
       repostUri: undefined,
     })
     return queueToggle(false)
-  }, [queryClient, postUri, queueToggle])
+  }, [postUri, queueToggle])
 
   return [queueRepost, queueUnrepost]
 }
@@ -237,13 +234,12 @@ 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(queryClient, variables.uri, {isDeleted: true})
+      updatePostShadow(variables.uri, {isDeleted: true})
       track('Post:Delete')
     },
   })

src/state/queries/preferences/index.ts

@@ -1,33 +1,33 @@
-import {createContext, useContext, useMemo} from 'react'
+import {useMemo, createContext, useContext} from 'react'
+import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query'
 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 {useHiddenPosts, useLabelDefinitions} from '#/state/preferences'
-import {STALE} from '#/state/queries'
+import {getAgent, useSession} from '#/state/session'
+import {
+  UsePreferencesQueryResponse,
+  ThreadViewPreferences,
+} from '#/state/queries/preferences/types'
 import {
   DEFAULT_HOME_FEED_PREFS,
-  DEFAULT_LOGGED_OUT_PREFERENCES,
   DEFAULT_THREAD_VIEW_PREFS,
+  DEFAULT_LOGGED_OUT_PREFERENCES,
 } from '#/state/queries/preferences/const'
 import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation'
-import {
-  ThreadViewPreferences,
-  UsePreferencesQueryResponse,
-} from '#/state/queries/preferences/types'
-import {getAgent, useSession} from '#/state/session'
+import {STALE} from '#/state/queries'
+import {useHiddenPosts, useLabelDefinitions} from '#/state/preferences'
 import {saveLabelers} from '#/state/session/agent-config'
 
-export * from '#/state/queries/preferences/const'
-export * from '#/state/queries/preferences/moderation'
 export * from '#/state/queries/preferences/types'
+export * from '#/state/queries/preferences/moderation'
+export * from '#/state/queries/preferences/const'
 
 export const preferencesQueryKey = ['getPreferences']
 
@@ -40,8 +40,6 @@ 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,33 +1,32 @@
 import {useCallback} from 'react'
-import {Image as RNImage} from 'react-native-image-crop-picker'
 import {
+  AtUri,
   AppBskyActorDefs,
-  AppBskyActorGetProfile,
   AppBskyActorProfile,
+  AppBskyActorGetProfile,
+  AppBskyFeedDefs,
   AppBskyEmbedRecord,
   AppBskyEmbedRecordWithMedia,
-  AppBskyFeedDefs,
-  AtUri,
 } from '@atproto/api'
 import {
-  QueryClient,
-  useMutation,
   useQuery,
   useQueryClient,
+  useMutation,
+  QueryClient,
 } from '@tanstack/react-query'
-
-import {track} from '#/lib/analytics/analytics'
+import {Image as RNImage} from 'react-native-image-crop-picker'
+import {useSession, getAgent} from '../session'
+import {updateProfileShadow} from '../cache/profile-shadow'
 import {uploadBlob} from '#/lib/api'
 import {until} from '#/lib/async/until'
-import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
-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 {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 {ThreadNode} from './post-thread'
 
 export const RQKEY = (did: string) => ['profile', did]
@@ -191,7 +190,6 @@ 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)
@@ -217,7 +215,7 @@ export function useProfileFollowMutationQueue(
     },
     onSuccess(finalFollowingUri) {
       // finalize
-      updateProfileShadow(queryClient, did, {
+      updateProfileShadow(did, {
         followingUri: finalFollowingUri,
       })
     },
@@ -225,19 +223,19 @@ export function useProfileFollowMutationQueue(
 
   const queueFollow = useCallback(() => {
     // optimistically update
-    updateProfileShadow(queryClient, did, {
+    updateProfileShadow(did, {
       followingUri: 'pending',
     })
     return queueToggle(true)
-  }, [queryClient, did, queueToggle])
+  }, [did, queueToggle])
 
   const queueUnfollow = useCallback(() => {
     // optimistically update
-    updateProfileShadow(queryClient, did, {
+    updateProfileShadow(did, {
       followingUri: undefined,
     })
     return queueToggle(false)
-  }, [queryClient, did, queueToggle])
+  }, [did, queueToggle])
 
   return [queueFollow, queueUnfollow]
 }
@@ -271,7 +269,6 @@ function useProfileUnfollowMutation(
 export function useProfileMuteMutationQueue(
   profile: Shadow<AppBskyActorDefs.ProfileViewDetailed>,
 ) {
-  const queryClient = useQueryClient()
   const did = profile.did
   const initialMuted = profile.viewer?.muted
   const muteMutation = useProfileMuteMutation()
@@ -294,25 +291,25 @@ export function useProfileMuteMutationQueue(
     },
     onSuccess(finalMuted) {
       // finalize
-      updateProfileShadow(queryClient, did, {muted: finalMuted})
+      updateProfileShadow(did, {muted: finalMuted})
     },
   })
 
   const queueMute = useCallback(() => {
     // optimistically update
-    updateProfileShadow(queryClient, did, {
+    updateProfileShadow(did, {
       muted: true,
     })
     return queueToggle(true)
-  }, [queryClient, did, queueToggle])
+  }, [did, queueToggle])
 
   const queueUnmute = useCallback(() => {
     // optimistically update
-    updateProfileShadow(queryClient, did, {
+    updateProfileShadow(did, {
       muted: false,
     })
     return queueToggle(false)
-  }, [queryClient, did, queueToggle])
+  }, [did, queueToggle])
 
   return [queueMute, queueUnmute]
 }
@@ -344,7 +341,6 @@ function useProfileUnmuteMutation() {
 export function useProfileBlockMutationQueue(
   profile: Shadow<AppBskyActorDefs.ProfileViewDetailed>,
 ) {
-  const queryClient = useQueryClient()
   const did = profile.did
   const initialBlockingUri = profile.viewer?.blocking
   const blockMutation = useProfileBlockMutation()
@@ -370,7 +366,7 @@ export function useProfileBlockMutationQueue(
     },
     onSuccess(finalBlockingUri) {
       // finalize
-      updateProfileShadow(queryClient, did, {
+      updateProfileShadow(did, {
         blockingUri: finalBlockingUri,
       })
     },
@@ -378,19 +374,19 @@ export function useProfileBlockMutationQueue(
 
   const queueBlock = useCallback(() => {
     // optimistically update
-    updateProfileShadow(queryClient, did, {
+    updateProfileShadow(did, {
       blockingUri: 'pending',
     })
     return queueToggle(true)
-  }, [queryClient, did, queueToggle])
+  }, [did, queueToggle])
 
   const queueUnblock = useCallback(() => {
     // optimistically update
-    updateProfileShadow(queryClient, did, {
+    updateProfileShadow(did, {
       blockingUri: undefined,
     })
     return queueToggle(false)
-  }, [queryClient, did, queueToggle])
+  }, [did, queueToggle])
 
   return [queueBlock, queueUnblock]
 }
@@ -410,14 +406,13 @@ function useProfileBlockMutation() {
     },
     onSuccess(_, {did}) {
       queryClient.invalidateQueries({queryKey: RQKEY_MY_BLOCKED()})
-      resetProfilePostsQueries(queryClient, did, 1000)
+      resetProfilePostsQueries(did, 1000)
     },
   })
 }
 
 function useProfileUnblockMutation() {
   const {currentAccount} = useSession()
-  const queryClient = useQueryClient()
   return useMutation<void, Error, {did: string; blockUri: string}>({
     mutationFn: async ({blockUri}) => {
       if (!currentAccount) {
@@ -430,7 +425,7 @@ function useProfileUnblockMutation() {
       })
     },
     onSuccess(_, {did}) {
-      resetProfilePostsQueries(queryClient, did, 1000)
+      resetProfilePostsQueries(did, 1000)
     },
   })
 }

src/state/session/index.tsx

@@ -4,6 +4,7 @@ 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'
@@ -177,6 +178,7 @@ function createPersistSessionHandler(
 }
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
+  const queryClient = useQueryClient()
   const isDirty = React.useRef(false)
   const [state, setState] = React.useState<SessionState>({
     isInitialLoad: true,
@@ -209,11 +211,12 @@ 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])
+  }, [setStateAndPersist, queryClient])
 
   const createAccount = React.useCallback<ApiContext['createAccount']>(
     async ({
@@ -283,13 +286,14 @@ 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, clearCurrentAccount],
+    [upsertAccount, queryClient, clearCurrentAccount],
   )
 
   const login = React.useCallback<ApiContext['login']>(
@@ -330,6 +334,7 @@ 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)
@@ -337,7 +342,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       track('Sign In', {resumedSession: false})
       logEvent('account:loggedIn', {logContext, withPassword: true})
     },
-    [upsertAccount, clearCurrentAccount],
+    [upsertAccount, queryClient, clearCurrentAccount],
   )
 
   const logout = React.useCallback<ApiContext['logout']>(
@@ -368,7 +373,6 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
         persistSession: createPersistSessionHandler(
           account,
           ({expired, refreshedAccount}) => {
-            console.log('PERSIST CALLBACK', refreshedAccount.did)
             upsertAccount(refreshedAccount, expired)
           },
           {networkErrorCallback: clearCurrentAccount},
@@ -407,6 +411,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 
         agent.session = prevSession
         __globalAgent = agent
+        queryClient.clear()
         upsertAccount(account)
 
         if (prevSession.deactivated) {
@@ -442,8 +447,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) {
           /*
@@ -484,7 +489,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
         }
       }
     },
-    [upsertAccount, clearCurrentAccount],
+    [upsertAccount, queryClient, clearCurrentAccount],
   )
 
   const resumeSession = React.useCallback<ApiContext['resumeSession']>(

src/view/com/auth/HomeLoggedOutCTA.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-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 {colors, s} from '#/lib/styles'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {TextLink} from '../util/Link'
+import {Text} from '../util/text/Text'
+import {ScrollView} from '../util/Views'
 
 export function HomeLoggedOutCTA() {
   const pal = usePalette('default')
@@ -79,7 +80,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,5 +1,4 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
   BackHandler,
@@ -12,60 +11,62 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import LinearGradient from 'react-native-linear-gradient'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {RichText} from '@atproto/api'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
-import {ExternalEmbed} from './ExternalEmbed'
-import {Text} from '../util/text/Text'
-import * as Toast from '../util/Toast'
-// 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 {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,
-  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 {getAgent, useSession} from '#/state/session'
+import {useComposerControls} from '#/state/shell/composer'
+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 {useDialogStateControlContext} from 'state/dialogs'
-import {logEvent} from '#/lib/statsig/statsig'
+import {QuoteEmbed} from '../util/post-embeds/QuoteEmbed'
+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 {ThreadgateBtn} from './threadgate/ThreadgateBtn'
+import {useExternalLinkFetch} from './useExternalLinkFetch'
 
 type Props = ComposerOpts
 export const ComposePost = observer(function ComposePost({
@@ -506,7 +507,9 @@ 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={onClose}
+        onConfirm={() => {
+          discardPromptControl.close(onClose)
+        }}
         confirmButtonCta={_(msg`Discard`)}
         confirmButtonColor="negative"
       />

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

@@ -1,19 +1,24 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {Text} from '../text/Text'
+import {ScrollView, StyleSheet, View} from 'react-native'
+
+import {isWeb} from '#/platform/detection'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
+import {atoms as a} from '#/alf'
+import {Text} from '../text/Text'
 
 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')
@@ -25,7 +30,18 @@ export const LoggedOutLayout = ({
   })
 
   if (isMobile) {
-    return <View style={{paddingTop: 10}}>{children}</View>
+    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={styles.container}>
@@ -50,9 +66,23 @@ export const LoggedOutLayout = ({
           {description}
         </Text>
       </View>
-      <View style={[styles.content, contentBg]}>
-        <View style={styles.contentWrapper}>{children}</View>
-      </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>
   )
 }
@@ -74,7 +104,16 @@ 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,5 +1,6 @@
 import React, {useMemo} from 'react'
 import {StyleSheet} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
 import {
   AppBskyActorDefs,
   moderateProfile,
@@ -8,38 +9,36 @@ import {
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-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 {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 {ProfileFeedgens} from '../com/feeds/ProfileFeedgens'
 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 {ListRef} from '../com/util/List'
-import {CenteredView} from '../com/util/Views'
+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 {ProfileFeedSection} from '#/screens/Profile/Sections/Feed'
+import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels'
+import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header'
 
 interface SectionRef {
   scrollToTop: () => void
@@ -49,7 +48,6 @@ 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()
@@ -80,9 +78,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(queryClient, resolvedDid)
+      resetProfilePostsQueries(resolvedDid)
     }
-  }, [queryClient, profile?.viewer?.blockedBy, resolvedDid])
+  }, [profile?.viewer?.blockedBy, resolvedDid])
 
   // Most pushes will happen here, since we will have only placeholder data
   if (isLoadingDid || isLoadingProfile) {