Merge pull request #1860 from bluesky-social/eric/startup

Web login/signup and shell
2023-11-10 11:31:36 -06:00 · 2023-11-10 11:31:36 -06:00 · 6513055d02
commit 6513055d02
parent 8d7475c130 436a14eabb
31 changed files with 695 additions and 916 deletions
--- a/src/view/com/auth/LoggedOut.tsx
+++ b/src/view/com/auth/LoggedOut.tsx
@ -6,7 +6,6 @@ import {CreateAccount} from 'view/com/auth/create/CreateAccount'
 import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useStores} from 'state/index'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {SplashScreen} from './SplashScreen'
 import {useSetMinimalShellMode} from '#/state/shell/minimal-mode'
@ -19,7 +18,6 @@ enum ScreenState {

 export const LoggedOut = observer(function LoggedOutImpl() {
  const pal = usePalette('default')
-  const store = useStores()
  const setMinimalShellMode = useSetMinimalShellMode()
  const {screen} = useAnalytics()
  const [screenState, setScreenState] = React.useState<ScreenState>(
@ -31,10 +29,7 @@ export const LoggedOut = observer(function LoggedOutImpl() {
    setMinimalShellMode(true)
  }, [screen, setMinimalShellMode])

-  if (
-    store.session.isResumingSession ||
-    screenState === ScreenState.S_LoginOrCreateAccount
-  ) {
+  if (screenState === ScreenState.S_LoginOrCreateAccount) {
    return (
      <SplashScreen
        onPressSignin={() => setScreenState(ScreenState.S_Login)}
--- a/src/view/com/auth/create/CreateAccount.tsx
+++ b/src/view/com/auth/create/CreateAccount.tsx
@ -18,6 +18,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useOnboardingDispatch} from '#/state/shell'
+import {useSessionApi} from '#/state/session'

 import {Step1} from './Step1'
 import {Step2} from './Step2'
@ -34,6 +35,7 @@ export const CreateAccount = observer(function CreateAccountImpl({
  const model = React.useMemo(() => new CreateAccountModel(store), [store])
  const {_} = useLingui()
  const onboardingDispatch = useOnboardingDispatch()
+  const {createAccount} = useSessionApi()

  React.useEffect(() => {
    screen('CreateAccount')
@ -64,14 +66,17 @@ export const CreateAccount = observer(function CreateAccountImpl({
      model.next()
    } else {
      try {
-        await model.submit(onboardingDispatch)
+        await model.submit({
+          onboardingDispatch,
+          createAccount,
+        })
      } catch {
        // dont need to handle here
      } finally {
        track('Try Create Account')
      }
    }
-  }, [model, track, onboardingDispatch])
+  }, [model, track, onboardingDispatch, createAccount])

  return (
    <LoggedOutLayout
--- a/src/view/com/auth/login/ChooseAccountForm.tsx
+++ b/src/view/com/auth/login/ChooseAccountForm.tsx
@ -1,52 +1,90 @@
 import React from 'react'
-import {
-  ActivityIndicator,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from 'react-native'
+import {ScrollView, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {Text} from '../../util/text/Text'
 import {UserAvatar} from '../../util/UserAvatar'
 import {s} from 'lib/styles'
-import {RootStoreModel} from 'state/index'
-import {AccountData} from 'state/models/session'
 import {usePalette} from 'lib/hooks/usePalette'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {styles} from './styles'
+import {useSession, useSessionApi, SessionAccount} from '#/state/session'
+import {useProfileQuery} from '#/state/queries/profile'

+function AccountItem({
+  account,
+  onSelect,
+}: {
+  account: SessionAccount
+  onSelect: (account: SessionAccount) => void
+}) {
+  const pal = usePalette('default')
+  const {_} = useLingui()
+  const {data: profile} = useProfileQuery({did: account.did})
+
+  const onPress = React.useCallback(() => {
+    onSelect(account)
+  }, [account, onSelect])
+
+  return (
+    <TouchableOpacity
+      testID={`chooseAccountBtn-${account.handle}`}
+      key={account.did}
+      style={[pal.view, pal.border, styles.account]}
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={_(msg`Sign in as ${account.handle}`)}
+      accessibilityHint="Double tap to sign in">
+      <View style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}>
+        <View style={s.p10}>
+          <UserAvatar avatar={profile?.avatar} size={30} />
+        </View>
+        <Text style={styles.accountText}>
+          <Text type="lg-bold" style={pal.text}>
+            {profile?.displayName || account.handle}{' '}
+          </Text>
+          <Text type="lg" style={[pal.textLight]}>
+            {account.handle}
+          </Text>
+        </Text>
+        <FontAwesomeIcon
+          icon="angle-right"
+          size={16}
+          style={[pal.text, s.mr10]}
+        />
+      </View>
+    </TouchableOpacity>
+  )
+}
 export const ChooseAccountForm = ({
-  store,
  onSelectAccount,
  onPressBack,
 }: {
-  store: RootStoreModel
-  onSelectAccount: (account?: AccountData) => void
+  onSelectAccount: (account?: SessionAccount) => void
  onPressBack: () => void
 }) => {
  const {track, screen} = useAnalytics()
  const pal = usePalette('default')
-  const [isProcessing, setIsProcessing] = React.useState(false)
  const {_} = useLingui()
+  const {accounts} = useSession()
+  const {initSession} = useSessionApi()

  React.useEffect(() => {
    screen('Choose Account')
  }, [screen])

-  const onTryAccount = async (account: AccountData) => {
-    if (account.accessJwt && account.refreshJwt) {
-      setIsProcessing(true)
-      if (await store.session.resumeSession(account)) {
+  const onSelect = React.useCallback(
+    async (account: SessionAccount) => {
+      if (account.accessJwt) {
+        await initSession(account)
        track('Sign In', {resumedSession: true})
-        setIsProcessing(false)
-        return
+      } else {
+        onSelectAccount(account)
      }
-      setIsProcessing(false)
-    }
-    onSelectAccount(account)
-  }
+    },
+    [track, initSession, onSelectAccount],
+  )

  return (
    <ScrollView testID="chooseAccountForm" style={styles.maxHeight}>
@ -55,35 +93,8 @@ export const ChooseAccountForm = ({
        style={[pal.text, styles.groupLabel, s.mt5, s.mb10]}>
        <Trans>Sign in as...</Trans>
      </Text>
-      {store.session.accounts.map(account => (
-        <TouchableOpacity
-          testID={`chooseAccountBtn-${account.handle}`}
-          key={account.did}
-          style={[pal.view, pal.border, styles.account]}
-          onPress={() => onTryAccount(account)}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Sign in as ${account.handle}`)}
-          accessibilityHint="Double tap to sign in">
-          <View
-            style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}>
-            <View style={s.p10}>
-              <UserAvatar avatar={account.aviUrl} size={30} />
-            </View>
-            <Text style={styles.accountText}>
-              <Text type="lg-bold" style={pal.text}>
-                {account.displayName || account.handle}{' '}
-              </Text>
-              <Text type="lg" style={[pal.textLight]}>
-                {account.handle}
-              </Text>
-            </Text>
-            <FontAwesomeIcon
-              icon="angle-right"
-              size={16}
-              style={[pal.text, s.mr10]}
-            />
-          </View>
-        </TouchableOpacity>
+      {accounts.map(account => (
+        <AccountItem key={account.did} account={account} onSelect={onSelect} />
      ))}
      <TouchableOpacity
        testID="chooseNewAccountBtn"
@ -112,7 +123,6 @@ export const ChooseAccountForm = ({
          </Text>
        </TouchableOpacity>
        <View style={s.flex1} />
-        {isProcessing && <ActivityIndicator />}
      </View>
    </ScrollView>
  )
--- a/src/view/com/auth/login/ForgotPasswordForm.tsx
+++ b/src/view/com/auth/login/ForgotPasswordForm.tsx
@ -15,7 +15,6 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {Text} from '../../util/text/Text'
 import {s} from 'lib/styles'
 import {toNiceDomain} from 'lib/strings/url-helpers'
-import {RootStoreModel} from 'state/index'
 import {ServiceDescription} from 'state/models/session'
 import {isNetworkError} from 'lib/strings/errors'
 import {usePalette} from 'lib/hooks/usePalette'
@ -36,7 +35,6 @@ export const ForgotPasswordForm = ({
  onPressBack,
  onEmailSent,
 }: {
-  store: RootStoreModel
  error: string
  serviceUrl: string
  serviceDescription: ServiceDescription | undefined
--- a/src/view/com/auth/login/Login.tsx
+++ b/src/view/com/auth/login/Login.tsx
@ -4,7 +4,6 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout'
 import {useStores, DEFAULT_SERVICE} from 'state/index'
 import {ServiceDescription} from 'state/models/session'
-import {AccountData} from 'state/models/session'
 import {usePalette} from 'lib/hooks/usePalette'
 import {logger} from '#/logger'
 import {ChooseAccountForm} from './ChooseAccountForm'
@ -14,6 +13,7 @@ import {SetNewPasswordForm} from './SetNewPasswordForm'
 import {PasswordUpdatedForm} from './PasswordUpdatedForm'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {useSession, SessionAccount} from '#/state/session'

 enum Forms {
  Login,
@ -26,6 +26,7 @@ enum Forms {
 export const Login = ({onPressBack}: {onPressBack: () => void}) => {
  const pal = usePalette('default')
  const store = useStores()
+  const {accounts} = useSession()
  const {track} = useAnalytics()
  const {_} = useLingui()
  const [error, setError] = useState<string>('')
@ -36,10 +37,10 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
  >(undefined)
  const [initialHandle, setInitialHandle] = useState<string>('')
  const [currentForm, setCurrentForm] = useState<Forms>(
-    store.session.hasAccounts ? Forms.ChooseAccount : Forms.Login,
+    accounts.length ? Forms.ChooseAccount : Forms.Login,
  )

-  const onSelectAccount = (account?: AccountData) => {
+  const onSelectAccount = (account?: SessionAccount) => {
    if (account?.service) {
      setServiceUrl(account.service)
    }
@ -95,7 +96,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
          title={_(msg`Sign in`)}
          description={_(msg`Enter your username and password`)}>
          <LoginForm
-            store={store}
            error={error}
            serviceUrl={serviceUrl}
            serviceDescription={serviceDescription}
@ -114,7 +114,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
          title={_(msg`Sign in as...`)}
          description={_(msg`Select from an existing account`)}>
          <ChooseAccountForm
-            store={store}
            onSelectAccount={onSelectAccount}
            onPressBack={onPressBack}
          />
@ -126,7 +125,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
          title={_(msg`Forgot Password`)}
          description={_(msg`Let's get your password reset!`)}>
          <ForgotPasswordForm
-            store={store}
            error={error}
            serviceUrl={serviceUrl}
            serviceDescription={serviceDescription}
@ -143,7 +141,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
          title={_(msg`Forgot Password`)}
          description={_(msg`Let's get your password reset!`)}>
          <SetNewPasswordForm
-            store={store}
            error={error}
            serviceUrl={serviceUrl}
            setError={setError}
--- a/src/view/com/auth/login/LoginForm.tsx
+++ b/src/view/com/auth/login/LoginForm.tsx
@ -15,7 +15,6 @@ import {Text} from '../../util/text/Text'
 import {s} from 'lib/styles'
 import {createFullHandle} from 'lib/strings/handles'
 import {toNiceDomain} from 'lib/strings/url-helpers'
-import {RootStoreModel} from 'state/index'
 import {ServiceDescription} from 'state/models/session'
 import {isNetworkError} from 'lib/strings/errors'
 import {usePalette} from 'lib/hooks/usePalette'
@ -29,7 +28,6 @@ import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'

 export const LoginForm = ({
-  store,
  error,
  serviceUrl,
  serviceDescription,
@ -40,7 +38,6 @@ export const LoginForm = ({
  onPressBack,
  onPressForgotPassword,
 }: {
-  store: RootStoreModel
  error: string
  serviceUrl: string
  serviceDescription: ServiceDescription | undefined
@ -106,11 +103,6 @@ export const LoginForm = ({
        identifier: fullIdent,
        password,
      })
-      await store.session.login({
-        service: serviceUrl,
-        identifier: fullIdent,
-        password,
-      })
    } catch (e: any) {
      const errMsg = e.toString()
      logger.warn('Failed to login', {error: e})
--- a/src/view/com/auth/login/SetNewPasswordForm.tsx
+++ b/src/view/com/auth/login/SetNewPasswordForm.tsx
@ -10,7 +10,6 @@ import {BskyAgent} from '@atproto/api'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {Text} from '../../util/text/Text'
 import {s} from 'lib/styles'
-import {RootStoreModel} from 'state/index'
 import {isNetworkError} from 'lib/strings/errors'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
@ -27,7 +26,6 @@ export const SetNewPasswordForm = ({
  onPressBack,
  onPasswordSet,
 }: {
-  store: RootStoreModel
  error: string
  serviceUrl: string
  setError: (v: string) => void
--- a/src/view/com/auth/withAuthRequired.tsx
+++ b/src/view/com/auth/withAuthRequired.tsx
@ -6,7 +6,6 @@ import {
  TouchableOpacity,
 } from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {useStores} from 'state/index'
 import {CenteredView} from '../util/Views'
 import {LoggedOut} from './LoggedOut'
 import {Onboarding} from './Onboarding'
@ -14,17 +13,18 @@ import {Text} from '../util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {STATUS_PAGE_URL} from 'lib/constants'
 import {useOnboardingState} from '#/state/shell'
+import {useSession} from '#/state/session'

 export const withAuthRequired = <P extends object>(
  Component: React.ComponentType<P>,
 ): React.FC<P> =>
  observer(function AuthRequired(props: P) {
-    const store = useStores()
+    const {isInitialLoad, hasSession} = useSession()
    const onboardingState = useOnboardingState()
-    if (store.session.isResumingSession) {
+    if (isInitialLoad) {
      return <Loading />
    }
-    if (!store.session.hasSession) {
+    if (!hasSession) {
      return <LoggedOut />
    }
    if (onboardingState.isActive) {
--- a/src/view/com/feeds/FeedPage.tsx
+++ b/src/view/com/feeds/FeedPage.tsx
@ -23,6 +23,7 @@ import useAppState from 'react-native-appstate-hook'
 import {logger} from '#/logger'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useSession} from '#/state/session'

 export const FeedPage = observer(function FeedPageImpl({
  testID,
@ -38,6 +39,7 @@ export const FeedPage = observer(function FeedPageImpl({
  renderEndOfFeed?: () => JSX.Element
 }) {
  const store = useStores()
+  const {isSandbox} = useSession()
  const pal = usePalette('default')
  const {_} = useLingui()
  const {isDesktop} = useWebMediaQueries()
@ -140,7 +142,7 @@ export const FeedPage = observer(function FeedPageImpl({
            style={[pal.text, {fontWeight: 'bold'}]}
            text={
              <>
-                {store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
+                {isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
                {hasNew && (
                  <View
                    style={{
@ -173,7 +175,16 @@ export const FeedPage = observer(function FeedPageImpl({
      )
    }
    return <></>
-  }, [isDesktop, pal.view, pal.text, pal.textLight, store, hasNew, _])
+  }, [
+    isDesktop,
+    pal.view,
+    pal.text,
+    pal.textLight,
+    store,
+    hasNew,
+    _,
+    isSandbox,
+  ])

  return (
    <View testID={testID} style={s.h100pct}>
--- a/src/view/com/modals/ChangeEmail.tsx
+++ b/src/view/com/modals/ChangeEmail.tsx
@ -6,7 +6,6 @@ import {Text} from '../util/text/Text'
 import {Button} from '../util/forms/Button'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import * as Toast from '../util/Toast'
-import {useStores} from 'state/index'
 import {s, colors} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isWeb} from 'platform/detection'
@ -15,6 +14,7 @@ import {cleanError} from 'lib/strings/errors'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'
+import {useSession, useSessionApi} from '#/state/session'

 enum Stages {
  InputEmail,
@ -26,12 +26,11 @@ export const snapPoints = ['90%']

 export const Component = observer(function Component({}: {}) {
  const pal = usePalette('default')
-  const store = useStores()
+  const {agent, currentAccount} = useSession()
+  const {updateCurrentAccount} = useSessionApi()
  const {_} = useLingui()
  const [stage, setStage] = useState<Stages>(Stages.InputEmail)
-  const [email, setEmail] = useState<string>(
-    store.session.currentSession?.email || '',
-  )
+  const [email, setEmail] = useState<string>(currentAccount?.email || '')
  const [confirmationCode, setConfirmationCode] = useState<string>('')
  const [isProcessing, setIsProcessing] = useState<boolean>(false)
  const [error, setError] = useState<string>('')
@ -39,19 +38,19 @@ export const Component = observer(function Component({}: {}) {
  const {openModal, closeModal} = useModalControls()

  const onRequestChange = async () => {
-    if (email === store.session.currentSession?.email) {
+    if (email === currentAccount?.email) {
      setError('Enter your new email above')
      return
    }
    setError('')
    setIsProcessing(true)
    try {
-      const res = await store.agent.com.atproto.server.requestEmailUpdate()
+      const res = await agent.com.atproto.server.requestEmailUpdate()
      if (res.data.tokenRequired) {
        setStage(Stages.ConfirmCode)
      } else {
-        await store.agent.com.atproto.server.updateEmail({email: email.trim()})
-        store.session.updateLocalAccountData({
+        await agent.com.atproto.server.updateEmail({email: email.trim()})
+        updateCurrentAccount({
          email: email.trim(),
          emailConfirmed: false,
        })
@ -79,11 +78,11 @@ export const Component = observer(function Component({}: {}) {
    setError('')
    setIsProcessing(true)
    try {
-      await store.agent.com.atproto.server.updateEmail({
+      await agent.com.atproto.server.updateEmail({
        email: email.trim(),
        token: confirmationCode.trim(),
      })
-      store.session.updateLocalAccountData({
+      updateCurrentAccount({
        email: email.trim(),
        emailConfirmed: false,
      })
@ -120,8 +119,8 @@ export const Component = observer(function Component({}: {}) {
          ) : stage === Stages.ConfirmCode ? (
            <Trans>
              An email has been sent to your previous address,{' '}
-              {store.session.currentSession?.email || ''}. It includes a
-              confirmation code which you can enter below.
+              {currentAccount?.email || ''}. It includes a confirmation code
+              which you can enter below.
            </Trans>
          ) : (
            <Trans>
--- a/src/view/com/modals/SwitchAccount.tsx
+++ b/src/view/com/modals/SwitchAccount.tsx
@ -6,7 +6,6 @@ import {
  View,
 } from 'react-native'
 import {Text} from '../util/text/Text'
-import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics/analytics'
@ -19,26 +18,91 @@ import {BottomSheetScrollView} from '@gorhom/bottom-sheet'
 import {Haptics} from 'lib/haptics'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useSession, useSessionApi, SessionAccount} from '#/state/session'
+import {useProfileQuery} from '#/state/queries/profile'

 export const snapPoints = ['40%', '90%']

+function SwitchAccountCard({account}: {account: SessionAccount}) {
+  const pal = usePalette('default')
+  const {_} = useLingui()
+  const {track} = useAnalytics()
+  const {isSwitchingAccounts, currentAccount} = useSession()
+  const {logout} = useSessionApi()
+  const {data: profile} = useProfileQuery({did: account.did})
+  const isCurrentAccount = account.did === currentAccount?.did
+  const {onPressSwitchAccount} = useAccountSwitcher()
+
+  const onPressSignout = React.useCallback(() => {
+    track('Settings:SignOutButtonClicked')
+    logout()
+  }, [track, logout])
+
+  const contents = (
+    <View style={[pal.view, styles.linkCard]}>
+      <View style={styles.avi}>
+        <UserAvatar size={40} avatar={profile?.avatar} />
+      </View>
+      <View style={[s.flex1]}>
+        <Text type="md-bold" style={pal.text} numberOfLines={1}>
+          {profile?.displayName || currentAccount?.handle}
+        </Text>
+        <Text type="sm" style={pal.textLight} numberOfLines={1}>
+          {currentAccount?.handle}
+        </Text>
+      </View>
+
+      {isCurrentAccount ? (
+        <TouchableOpacity
+          testID="signOutBtn"
+          onPress={isSwitchingAccounts ? undefined : onPressSignout}
+          accessibilityRole="button"
+          accessibilityLabel={_(msg`Sign out`)}
+          accessibilityHint={`Signs ${profile?.displayName} out of Bluesky`}>
+          <Text type="lg" style={pal.link}>
+            <Trans>Sign out</Trans>
+          </Text>
+        </TouchableOpacity>
+      ) : (
+        <AccountDropdownBtn account={account} />
+      )}
+    </View>
+  )
+
+  return isCurrentAccount ? (
+    <Link
+      href={makeProfileLink({
+        did: currentAccount.did,
+        handle: currentAccount.handle,
+      })}
+      title="Your profile"
+      noFeedback>
+      {contents}
+    </Link>
+  ) : (
+    <TouchableOpacity
+      testID={`switchToAccountBtn-${account.handle}`}
+      key={account.did}
+      style={[isSwitchingAccounts && styles.dimmed]}
+      onPress={
+        isSwitchingAccounts ? undefined : () => onPressSwitchAccount(account)
+      }
+      accessibilityRole="button"
+      accessibilityLabel={`Switch to ${account.handle}`}
+      accessibilityHint="Switches the account you are logged in to">
+      {contents}
+    </TouchableOpacity>
+  )
+}
+
 export function Component({}: {}) {
  const pal = usePalette('default')
-  const {track} = useAnalytics()
-  const {_: _lingui} = useLingui()
-
-  const store = useStores()
-  const [isSwitching, _, onPressSwitchAccount] = useAccountSwitcher()
+  const {isSwitchingAccounts, currentAccount, accounts} = useSession()

  React.useEffect(() => {
    Haptics.default()
  })

-  const onPressSignout = React.useCallback(() => {
-    track('Settings:SignOutButtonClicked')
-    store.session.logout()
-  }, [track, store])
-
  return (
    <BottomSheetScrollView
      style={[styles.container, pal.view]}
@ -46,62 +110,20 @@ export function Component({}: {}) {
      <Text type="title-xl" style={[styles.title, pal.text]}>
        <Trans>Switch Account</Trans>
      </Text>
-      {isSwitching ? (
+
+      {isSwitchingAccounts || !currentAccount ? (
        <View style={[pal.view, styles.linkCard]}>
          <ActivityIndicator />
        </View>
      ) : (
-        <Link href={makeProfileLink(store.me)} title="Your profile" noFeedback>
-          <View style={[pal.view, styles.linkCard]}>
-            <View style={styles.avi}>
-              <UserAvatar size={40} avatar={store.me.avatar} />
-            </View>
-            <View style={[s.flex1]}>
-              <Text type="md-bold" style={pal.text} numberOfLines={1}>
-                {store.me.displayName || store.me.handle}
-              </Text>
-              <Text type="sm" style={pal.textLight} numberOfLines={1}>
-                {store.me.handle}
-              </Text>
-            </View>
-            <TouchableOpacity
-              testID="signOutBtn"
-              onPress={isSwitching ? undefined : onPressSignout}
-              accessibilityRole="button"
-              accessibilityLabel={_lingui(msg`Sign out`)}
-              accessibilityHint={`Signs ${store.me.displayName} out of Bluesky`}>
-              <Text type="lg" style={pal.link}>
-                <Trans>Sign out</Trans>
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </Link>
+        <SwitchAccountCard account={currentAccount} />
      )}
-      {store.session.switchableAccounts.map(account => (
-        <TouchableOpacity
-          testID={`switchToAccountBtn-${account.handle}`}
-          key={account.did}
-          style={[pal.view, styles.linkCard, isSwitching && styles.dimmed]}
-          onPress={
-            isSwitching ? undefined : () => onPressSwitchAccount(account)
-          }
-          accessibilityRole="button"
-          accessibilityLabel={`Switch to ${account.handle}`}
-          accessibilityHint="Switches the account you are logged in to">
-          <View style={styles.avi}>
-            <UserAvatar size={40} avatar={account.aviUrl} />
-          </View>
-          <View style={[s.flex1]}>
-            <Text type="md-bold" style={pal.text}>
-              {account.displayName || account.handle}
-            </Text>
-            <Text type="sm" style={pal.textLight}>
-              {account.handle}
-            </Text>
-          </View>
-          <AccountDropdownBtn handle={account.handle} />
-        </TouchableOpacity>
-      ))}
+
+      {accounts
+        .filter(a => a.did !== currentAccount?.did)
+        .map(account => (
+          <SwitchAccountCard key={account.did} account={account} />
+        ))}
    </BottomSheetScrollView>
  )
 }
--- a/src/view/com/modals/VerifyEmail.tsx
+++ b/src/view/com/modals/VerifyEmail.tsx
@ -14,7 +14,6 @@ import {Text} from '../util/text/Text'
 import {Button} from '../util/forms/Button'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import * as Toast from '../util/Toast'
-import {useStores} from 'state/index'
 import {s, colors} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isWeb} from 'platform/detection'
@ -23,6 +22,7 @@ import {cleanError} from 'lib/strings/errors'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'
+import {useSession, useSessionApi} from '#/state/session'

 export const snapPoints = ['90%']

@ -38,7 +38,8 @@ export const Component = observer(function Component({
  showReminder?: boolean
 }) {
  const pal = usePalette('default')
-  const store = useStores()
+  const {agent, currentAccount} = useSession()
+  const {updateCurrentAccount} = useSessionApi()
  const {_} = useLingui()
  const [stage, setStage] = useState<Stages>(
    showReminder ? Stages.Reminder : Stages.Email,
@ -53,7 +54,7 @@ export const Component = observer(function Component({
    setError('')
    setIsProcessing(true)
    try {
-      await store.agent.com.atproto.server.requestEmailConfirmation()
+      await agent.com.atproto.server.requestEmailConfirmation()
      setStage(Stages.ConfirmCode)
    } catch (e) {
      setError(cleanError(String(e)))
@ -66,11 +67,11 @@ export const Component = observer(function Component({
    setError('')
    setIsProcessing(true)
    try {
-      await store.agent.com.atproto.server.confirmEmail({
-        email: (store.session.currentSession?.email || '').trim(),
+      await agent.com.atproto.server.confirmEmail({
+        email: (currentAccount?.email || '').trim(),
        token: confirmationCode.trim(),
      })
-      store.session.updateLocalAccountData({emailConfirmed: true})
+      updateCurrentAccount({emailConfirmed: true})
      Toast.show('Email verified')
      closeModal()
    } catch (e) {
@ -112,9 +113,8 @@ export const Component = observer(function Component({
            </Trans>
          ) : stage === Stages.ConfirmCode ? (
            <Trans>
-              An email has been sent to{' '}
-              {store.session.currentSession?.email || ''}. It includes a
-              confirmation code which you can enter below.
+              An email has been sent to {currentAccount?.email || ''}. It
+              includes a confirmation code which you can enter below.
            </Trans>
          ) : (
            ''
@ -130,7 +130,7 @@ export const Component = observer(function Component({
                size={16}
              />
              <Text type="xl-medium" style={[pal.text, s.flex1, {minWidth: 0}]}>
-                {store.session.currentSession?.email || ''}
+                {currentAccount?.email || ''}
              </Text>
            </View>
            <Pressable
--- a/src/view/com/pager/FeedsTabBarMobile.tsx
+++ b/src/view/com/pager/FeedsTabBarMobile.tsx
@ -19,12 +19,14 @@ import {useLingui} from '@lingui/react'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useSetDrawerOpen} from '#/state/shell/drawer-open'
 import {useShellLayout} from '#/state/shell/shell-layout'
+import {useSession} from '#/state/session'

 export const FeedsTabBar = observer(function FeedsTabBarImpl(
  props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
 ) {
  const pal = usePalette('default')
  const store = useStores()
+  const {isSandbox} = useSession()
  const {_} = useLingui()
  const setDrawerOpen = useSetDrawerOpen()
  const items = useHomeTabs(store.preferences.pinnedFeeds)
@ -59,7 +61,7 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
          </TouchableOpacity>
        </View>
        <Text style={[brandBlue, s.bold, styles.title]}>
-          {store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}
+          {isSandbox ? 'SANDBOX' : 'Bluesky'}
        </Text>
        <View style={[pal.view]}>
          <Link
--- a/src/view/com/testing/TestCtrls.e2e.tsx
+++ b/src/view/com/testing/TestCtrls.e2e.tsx
@ -3,6 +3,7 @@ import {Pressable, View} from 'react-native'
 import {useStores} from 'state/index'
 import {navigate} from '../../../Navigation'
 import {useModalControls} from '#/state/modals'
+import {useSessionApi} from '#/state/session'

 /**
 * This utility component is only included in the test simulator
@ -14,16 +15,17 @@ const BTN = {height: 1, width: 1, backgroundColor: 'red'}

 export function TestCtrls() {
  const store = useStores()
+  const {logout, login} = useSessionApi()
  const {openModal} = useModalControls()
  const onPressSignInAlice = async () => {
-    await store.session.login({
+    await login({
      service: 'http://localhost:3000',
      identifier: 'alice.test',
      password: 'hunter2',
    })
  }
  const onPressSignInBob = async () => {
-    await store.session.login({
+    await login({
      service: 'http://localhost:3000',
      identifier: 'bob.test',
      password: 'hunter2',
@ -45,7 +47,7 @@ export function TestCtrls() {
      />
      <Pressable
        testID="e2eSignOut"
-        onPress={() => store.session.logout()}
+        onPress={() => logout()}
        accessibilityRole="button"
        style={BTN}
      />
--- a/src/view/com/util/AccountDropdownBtn.tsx
+++ b/src/view/com/util/AccountDropdownBtn.tsx
@ -8,11 +8,11 @@ import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {DropdownItem, NativeDropdown} from './forms/NativeDropdown'
 import * as Toast from '../../com/util/Toast'
-import {useSessionApi} from '#/state/session'
+import {useSessionApi, SessionAccount} from '#/state/session'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'

-export function AccountDropdownBtn({handle}: {handle: string}) {
+export function AccountDropdownBtn({account}: {account: SessionAccount}) {
  const pal = usePalette('default')
  const {removeAccount} = useSessionApi()
  const {_} = useLingui()
@ -21,7 +21,7 @@ export function AccountDropdownBtn({handle}: {handle: string}) {
    {
      label: 'Remove account',
      onPress: () => {
-        removeAccount({handle})
+        removeAccount(account)
        Toast.show('Account removed from quick access')
      },
      icon: {
--- a/src/view/com/util/PostSandboxWarning.tsx
+++ b/src/view/com/util/PostSandboxWarning.tsx
@ -1,13 +1,13 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {Text} from './text/Text'
-import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useSession} from '#/state/session'

 export function PostSandboxWarning() {
-  const store = useStores()
+  const {isSandbox} = useSession()
  const pal = usePalette('default')
-  if (store.session.isSandbox) {
+  if (isSandbox) {
    return (
      <View style={styles.container}>
        <Text
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@ -57,7 +57,8 @@ import {
  useRequireAltTextEnabled,
  useSetRequireAltTextEnabled,
 } from '#/state/preferences'
-import {useSession, useSessionApi} from '#/state/session'
+import {useSession, useSessionApi, SessionAccount} from '#/state/session'
+import {useProfileQuery} from '#/state/queries/profile'

 // TEMPORARY (APP-700)
 // remove after backend testing finishes
@ -67,6 +68,70 @@ import {STATUS_PAGE_URL} from 'lib/constants'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+function SettingsAccountCard({account}: {account: SessionAccount}) {
+  const pal = usePalette('default')
+  const {isSwitchingAccounts, currentAccount} = useSession()
+  const {logout} = useSessionApi()
+  const {data: profile} = useProfileQuery({did: account.did})
+  const isCurrentAccount = account.did === currentAccount?.did
+  const {onPressSwitchAccount} = useAccountSwitcher()
+
+  const contents = (
+    <View style={[pal.view, styles.linkCard]}>
+      <View style={styles.avi}>
+        <UserAvatar size={40} avatar={profile?.avatar} />
+      </View>
+      <View style={[s.flex1]}>
+        <Text type="md-bold" style={pal.text}>
+          {profile?.displayName || account.handle}
+        </Text>
+        <Text type="sm" style={pal.textLight}>
+          {account.handle}
+        </Text>
+      </View>
+
+      {isCurrentAccount ? (
+        <TouchableOpacity
+          testID="signOutBtn"
+          onPress={logout}
+          accessibilityRole="button"
+          accessibilityLabel="Sign out"
+          accessibilityHint={`Signs ${profile?.displayName} out of Bluesky`}>
+          <Text type="lg" style={pal.link}>
+            Sign out
+          </Text>
+        </TouchableOpacity>
+      ) : (
+        <AccountDropdownBtn account={account} />
+      )}
+    </View>
+  )
+
+  return isCurrentAccount ? (
+    <Link
+      href={makeProfileLink({
+        did: currentAccount?.did,
+        handle: currentAccount?.handle,
+      })}
+      title="Your profile"
+      noFeedback>
+      {contents}
+    </Link>
+  ) : (
+    <TouchableOpacity
+      testID={`switchToAccountBtn-${account.handle}`}
+      key={account.did}
+      onPress={
+        isSwitchingAccounts ? undefined : () => onPressSwitchAccount(account)
+      }
+      accessibilityRole="button"
+      accessibilityLabel={`Switch to ${account.handle}`}
+      accessibilityHint="Switches the account you are logged in to">
+      {contents}
+    </TouchableOpacity>
+  )
+}
+
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
 export const SettingsScreen = withAuthRequired(
  observer(function Settings({}: Props) {
@ -82,14 +147,12 @@ export const SettingsScreen = withAuthRequired(
    const navigation = useNavigation<NavigationProp>()
    const {isMobile} = useWebMediaQueries()
    const {screen, track} = useAnalytics()
-    const [isSwitching, setIsSwitching, onPressSwitchAccount] =
-      useAccountSwitcher()
    const [debugHeaderEnabled, toggleDebugHeader] = useDebugHeaderSetting(
      store.agent,
    )
    const {openModal} = useModalControls()
-    const {logout} = useSessionApi()
-    const {accounts} = useSession()
+    const {isSwitchingAccounts, accounts, currentAccount} = useSession()
+    const {clearCurrentAccount} = useSessionApi()

    const primaryBg = useCustomPalette<ViewStyle>({
      light: {backgroundColor: colors.blue0},
@ -120,30 +183,27 @@ export const SettingsScreen = withAuthRequired(
      track('Settings:AddAccountButtonClicked')
      navigation.navigate('HomeTab')
      navigation.dispatch(StackActions.popToTop())
-      store.session.clear()
-    }, [track, navigation, store])
+      clearCurrentAccount()
+    }, [track, navigation, clearCurrentAccount])

    const onPressChangeHandle = React.useCallback(() => {
      track('Settings:ChangeHandleButtonClicked')
      openModal({
        name: 'change-handle',
        onChanged() {
-          setIsSwitching(true)
          store.session.reloadFromServer().then(
            () => {
-              setIsSwitching(false)
              Toast.show('Your handle has been updated')
            },
            err => {
              logger.error('Failed to reload from server after handle update', {
                error: err,
              })
-              setIsSwitching(false)
            },
          )
        },
      })
-    }, [track, store, openModal, setIsSwitching])
+    }, [track, store, openModal])

    const onPressInviteCodes = React.useCallback(() => {
      track('Settings:InvitecodesButtonClicked')
@ -154,12 +214,6 @@ export const SettingsScreen = withAuthRequired(
      navigation.navigate('LanguageSettings')
    }, [navigation])

-    const onPressSignout = React.useCallback(() => {
-      track('Settings:SignOutButtonClicked')
-      logout()
-      store.session.logout()
-    }, [track, store, logout])
-
    const onPressDeleteAccount = React.useCallback(() => {
      openModal({name: 'delete-account'})
    }, [openModal])
@ -217,7 +271,7 @@ export const SettingsScreen = withAuthRequired(
          contentContainerStyle={isMobile && pal.viewLight}
          scrollIndicatorInsets={{right: 1}}>
          <View style={styles.spacer20} />
-          {store.session.currentSession !== undefined ? (
+          {currentAccount ? (
            <>
              <Text type="xl-bold" style={[pal.text, styles.heading]}>
                <Trans>Account</Trans>
@ -226,7 +280,7 @@ export const SettingsScreen = withAuthRequired(
                <Text type="lg-medium" style={pal.text}>
                  Email:{' '}
                </Text>
-                {!store.session.emailNeedsConfirmation && (
+                {currentAccount.emailConfirmed && (
                  <>
                    <FontAwesomeIcon
                      icon="check"
@ -236,7 +290,7 @@ export const SettingsScreen = withAuthRequired(
                  </>
                )}
                <Text type="lg" style={pal.text}>
-                  {store.session.currentSession?.email}{' '}
+                  {currentAccount.email}{' '}
                </Text>
                <Link onPress={() => openModal({name: 'change-email'})}>
                  <Text type="lg" style={pal.link}>
@ -255,7 +309,8 @@ export const SettingsScreen = withAuthRequired(
                </Link>
              </View>
              <View style={styles.spacer20} />
-              <EmailConfirmationNotice />
+
+              {!currentAccount.emailConfirmed && <EmailConfirmationNotice />}
            </>
          ) : null}
          <View style={[s.flexRow, styles.heading]}>
@ -264,70 +319,29 @@ export const SettingsScreen = withAuthRequired(
            </Text>
            <View style={s.flex1} />
          </View>
-          {isSwitching ? (
+
+          {isSwitchingAccounts ? (
            <View style={[pal.view, styles.linkCard]}>
              <ActivityIndicator />
            </View>
          ) : (
-            <Link
-              href={makeProfileLink(store.me)}
-              title="Your profile"
-              noFeedback>
-              <View style={[pal.view, styles.linkCard]}>
-                <View style={styles.avi}>
-                  <UserAvatar size={40} avatar={store.me.avatar} />
-                </View>
-                <View style={[s.flex1]}>
-                  <Text type="md-bold" style={pal.text} numberOfLines={1}>
-                    {store.me.displayName || store.me.handle}
-                  </Text>
-                  <Text type="sm" style={pal.textLight} numberOfLines={1}>
-                    {store.me.handle}
-                  </Text>
-                </View>
-                <TouchableOpacity
-                  testID="signOutBtn"
-                  onPress={isSwitching ? undefined : onPressSignout}
-                  accessibilityRole="button"
-                  accessibilityLabel={_(msg`Sign out`)}
-                  accessibilityHint={`Signs ${store.me.displayName} out of Bluesky`}>
-                  <Text type="lg" style={pal.link}>
-                    <Trans>Sign out</Trans>
-                  </Text>
-                </TouchableOpacity>
-              </View>
-            </Link>
+            <SettingsAccountCard account={currentAccount!} />
          )}
-          {accounts.map(account => (
-            <TouchableOpacity
-              testID={`switchToAccountBtn-${account.handle}`}
-              key={account.did}
-              style={[pal.view, styles.linkCard, isSwitching && styles.dimmed]}
-              onPress={
-                isSwitching ? undefined : () => onPressSwitchAccount(account)
-              }
-              accessibilityRole="button"
-              accessibilityLabel={`Switch to ${account.handle}`}
-              accessibilityHint="Switches the account you are logged in to">
-              <View style={styles.avi}>
-                {/*<UserAvatar size={40} avatar={account.aviUrl} />*/}
-              </View>
-              <View style={[s.flex1]}>
-                <Text type="md-bold" style={pal.text}>
-                  {/* @ts-ignore */}
-                  {account.displayName || account.handle}
-                </Text>
-                <Text type="sm" style={pal.textLight}>
-                  {account.handle}
-                </Text>
-              </View>
-              <AccountDropdownBtn handle={account.handle} />
-            </TouchableOpacity>
-          ))}
+
+          {accounts
+            .filter(a => a.did !== currentAccount?.did)
+            .map(account => (
+              <SettingsAccountCard key={account.did} account={account} />
+            ))}
+
          <TouchableOpacity
            testID="switchToNewAccountBtn"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-            onPress={isSwitching ? undefined : onPressAddAccount}
+            style={[
+              styles.linkCard,
+              pal.view,
+              isSwitchingAccounts && styles.dimmed,
+            ]}
+            onPress={isSwitchingAccounts ? undefined : onPressAddAccount}
            accessibilityRole="button"
            accessibilityLabel={_(msg`Add account`)}
            accessibilityHint="Create a new Bluesky account">
@ -349,8 +363,12 @@ export const SettingsScreen = withAuthRequired(
          </Text>
          <TouchableOpacity
            testID="inviteFriendBtn"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-            onPress={isSwitching ? undefined : onPressInviteCodes}
+            style={[
+              styles.linkCard,
+              pal.view,
+              isSwitchingAccounts && styles.dimmed,
+            ]}
+            onPress={isSwitchingAccounts ? undefined : onPressInviteCodes}
            accessibilityRole="button"
            accessibilityLabel={_(msg`Invite`)}
            accessibilityHint="Opens invite code list">
@ -427,7 +445,11 @@ export const SettingsScreen = withAuthRequired(
          </Text>
          <TouchableOpacity
            testID="preferencesHomeFeedButton"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+            style={[
+              styles.linkCard,
+              pal.view,
+              isSwitchingAccounts && styles.dimmed,
+            ]}
            onPress={openHomeFeedPreferences}
            accessibilityRole="button"
            accessibilityHint=""
@ -444,7 +466,11 @@ export const SettingsScreen = withAuthRequired(
          </TouchableOpacity>
          <TouchableOpacity
            testID="preferencesThreadsButton"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+            style={[
+              styles.linkCard,
+              pal.view,
+              isSwitchingAccounts && styles.dimmed,
+            ]}
            onPress={openThreadsPreferences}
            accessibilityRole="button"
            accessibilityHint=""
@ -462,7 +488,11 @@ export const SettingsScreen = withAuthRequired(
          </TouchableOpacity>
          <TouchableOpacity
            testID="savedFeedsBtn"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+            style={[
+              styles.linkCard,
+              pal.view,
+              isSwitchingAccounts && styles.dimmed,
+            ]}
            accessibilityHint="My Saved Feeds"
            accessibilityLabel={_(msg`Opens screen with all saved feeds`)}
            onPress={onPressSavedFeeds}>
@ -475,8 +505,12 @@ export const SettingsScreen = withAuthRequired(
          </TouchableOpacity>
          <TouchableOpacity
            testID="languageSettingsBtn"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-            onPress={isSwitching ? undefined : onPressLanguageSettings}
+            style={[
+              styles.linkCard,
+              pal.view,
+              isSwitchingAccounts && styles.dimmed,
+            ]}
+            onPress={isSwitchingAccounts ? undefined : onPressLanguageSettings}
            accessibilityRole="button"
            accessibilityHint="Language settings"
            accessibilityLabel={_(msg`Opens configurable language settings`)}>
@ -492,9 +526,15 @@ export const SettingsScreen = withAuthRequired(
          </TouchableOpacity>
          <TouchableOpacity
            testID="moderationBtn"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+            style={[
+              styles.linkCard,
+              pal.view,
+              isSwitchingAccounts && styles.dimmed,
+            ]}
            onPress={
-              isSwitching ? undefined : () => navigation.navigate('Moderation')
+              isSwitchingAccounts
+                ? undefined
+                : () => navigation.navigate('Moderation')
            }
            accessibilityRole="button"
            accessibilityHint=""
@ -513,7 +553,11 @@ export const SettingsScreen = withAuthRequired(
          </Text>
          <TouchableOpacity
            testID="appPasswordBtn"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+            style={[
+              styles.linkCard,
+              pal.view,
+              isSwitchingAccounts && styles.dimmed,
+            ]}
            onPress={onPressAppPasswords}
            accessibilityRole="button"
            accessibilityHint="Open app password settings"
@ -530,8 +574,12 @@ export const SettingsScreen = withAuthRequired(
          </TouchableOpacity>
          <TouchableOpacity
            testID="changeHandleBtn"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-            onPress={isSwitching ? undefined : onPressChangeHandle}
+            style={[
+              styles.linkCard,
+              pal.view,
+              isSwitchingAccounts && styles.dimmed,
+            ]}
+            onPress={isSwitchingAccounts ? undefined : onPressChangeHandle}
            accessibilityRole="button"
            accessibilityLabel={_(msg`Change handle`)}
            accessibilityHint="Choose a new Bluesky username or create">
@ -655,15 +703,10 @@ const EmailConfirmationNotice = observer(
  function EmailConfirmationNoticeImpl() {
    const pal = usePalette('default')
    const palInverted = usePalette('inverted')
-    const store = useStores()
    const {_} = useLingui()
    const {isMobile} = useWebMediaQueries()
    const {openModal} = useModalControls()

-    if (!store.session.emailNeedsConfirmation) {
-      return null
-    }
-
    return (
      <View style={{marginBottom: 20}}>
        <Text type="xl-bold" style={[pal.text, styles.heading]}>
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@ -47,6 +47,57 @@ import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useSetDrawerOpen} from '#/state/shell'
 import {useModalControls} from '#/state/modals'
+import {useSession, SessionAccount} from '#/state/session'
+import {useProfileQuery} from '#/state/queries/profile'
+
+export function DrawerProfileCard({
+  account,
+  onPressProfile,
+}: {
+  account: SessionAccount
+  onPressProfile: () => void
+}) {
+  const {_} = useLingui()
+  const pal = usePalette('default')
+  const {data: profile} = useProfileQuery({did: account.did})
+
+  return (
+    <TouchableOpacity
+      testID="profileCardButton"
+      accessibilityLabel={_(msg`Profile`)}
+      accessibilityHint="Navigates to your profile"
+      onPress={onPressProfile}>
+      <UserAvatar
+        size={80}
+        avatar={profile?.avatar}
+        // See https://github.com/bluesky-social/social-app/pull/1801:
+        usePlainRNImage={true}
+      />
+      <Text
+        type="title-lg"
+        style={[pal.text, s.bold, styles.profileCardDisplayName]}
+        numberOfLines={1}>
+        {profile?.displayName || account.handle}
+      </Text>
+      <Text
+        type="2xl"
+        style={[pal.textLight, styles.profileCardHandle]}
+        numberOfLines={1}>
+        @{account.handle}
+      </Text>
+      <Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
+        <Text type="xl-medium" style={pal.text}>
+          {formatCountShortOnly(profile?.followersCount ?? 0)}
+        </Text>{' '}
+        {pluralize(profile?.followersCount || 0, 'follower')} &middot;{' '}
+        <Text type="xl-medium" style={pal.text}>
+          {formatCountShortOnly(profile?.followsCount ?? 0)}
+        </Text>{' '}
+        following
+      </Text>
+    </TouchableOpacity>
+  )
+}

 export const DrawerContent = observer(function DrawerContentImpl() {
  const theme = useTheme()
@ -58,6 +109,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
  const {track} = useAnalytics()
  const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
    useNavigationTabState()
+  const {currentAccount} = useSession()

  const {notifications} = store.me

@ -135,11 +187,11 @@ export const DrawerContent = observer(function DrawerContentImpl() {
    track('Menu:FeedbackClicked')
    Linking.openURL(
      FEEDBACK_FORM_URL({
-        email: store.session.currentSession?.email,
-        handle: store.session.currentSession?.handle,
+        email: currentAccount?.email,
+        handle: currentAccount?.handle,
      }),
    )
-  }, [track, store.session.currentSession])
+  }, [track, currentAccount])

  const onPressHelp = React.useCallback(() => {
    track('Menu:HelpClicked')
@ -159,42 +211,12 @@ export const DrawerContent = observer(function DrawerContentImpl() {
      <SafeAreaView style={s.flex1}>
        <ScrollView style={styles.main}>
          <View style={{}}>
-            <TouchableOpacity
-              testID="profileCardButton"
-              accessibilityLabel={_(msg`Profile`)}
-              accessibilityHint="Navigates to your profile"
-              onPress={onPressProfile}>
-              <UserAvatar
-                size={80}
-                avatar={store.me.avatar}
-                // See https://github.com/bluesky-social/social-app/pull/1801:
-                usePlainRNImage={true}
+            {currentAccount && (
+              <DrawerProfileCard
+                account={currentAccount}
+                onPressProfile={onPressProfile}
              />
-              <Text
-                type="title-lg"
-                style={[pal.text, s.bold, styles.profileCardDisplayName]}
-                numberOfLines={1}>
-                {store.me.displayName || store.me.handle}
-              </Text>
-              <Text
-                type="2xl"
-                style={[pal.textLight, styles.profileCardHandle]}
-                numberOfLines={1}>
-                @{store.me.handle}
-              </Text>
-              <Text
-                type="xl"
-                style={[pal.textLight, styles.profileCardFollowers]}>
-                <Text type="xl-medium" style={pal.text}>
-                  {formatCountShortOnly(store.me.followersCount ?? 0)}
-                </Text>{' '}
-                {pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
-                <Text type="xl-medium" style={pal.text}>
-                  {formatCountShortOnly(store.me.followsCount ?? 0)}
-                </Text>{' '}
-                following
-              </Text>
-            </TouchableOpacity>
+            )}
          </View>

          <InviteCodes style={{paddingLeft: 0}} />
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@ -41,18 +41,25 @@ import {router} from '../../../routes'
 import {makeProfileLink} from 'lib/routes/links'
 import {useLingui} from '@lingui/react'
 import {Trans, msg} from '@lingui/macro'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useSession} from '#/state/session'

 const ProfileCard = observer(function ProfileCardImpl() {
-  const store = useStores()
+  const {currentAccount} = useSession()
+  const {isLoading, data: profile} = useProfileQuery({did: currentAccount!.did})
  const {isDesktop} = useWebMediaQueries()
  const size = 48
-  return store.me.handle ? (
+
+  return !isLoading && profile ? (
    <Link
-      href={makeProfileLink(store.me)}
+      href={makeProfileLink({
+        did: currentAccount!.did,
+        handle: currentAccount!.handle,
+      })}
      style={[styles.profileCard, !isDesktop && styles.profileCardTablet]}
      title="My Profile"
      asAnchor>
-      <UserAvatar avatar={store.me.avatar} size={size} />
+      <UserAvatar avatar={profile.avatar} size={size} />
    </Link>
  ) : (
    <View style={[styles.profileCard, !isDesktop && styles.profileCardTablet]}>
@ -255,7 +262,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
        pal.view,
        pal.border,
      ]}>
-      {store.session.hasSession && <ProfileCard />}
+      <ProfileCard />
      <BackBtn />
      <NavItem
        href="/"
@ -360,26 +367,24 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
        }
        label="Moderation"
      />
-      {store.session.hasSession && (
-        <NavItem
-          href={makeProfileLink(store.me)}
-          icon={
-            <UserIcon
-              strokeWidth={1.75}
-              size={isDesktop ? 28 : 30}
-              style={pal.text}
-            />
-          }
-          iconFilled={
-            <UserIconSolid
-              strokeWidth={1.75}
-              size={isDesktop ? 28 : 30}
-              style={pal.text}
-            />
-          }
-          label="Profile"
-        />
-      )}
+      <NavItem
+        href={makeProfileLink(store.me)}
+        icon={
+          <UserIcon
+            strokeWidth={1.75}
+            size={isDesktop ? 28 : 30}
+            style={pal.text}
+          />
+        }
+        iconFilled={
+          <UserIconSolid
+            strokeWidth={1.75}
+            size={isDesktop ? 28 : 30}
+            style={pal.text}
+          />
+        }
+        label="Profile"
+      />
      <NavItem
        href="/settings"
        icon={
@ -398,7 +403,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
        }
        label="Settings"
      />
-      {store.session.hasSession && <ComposeBtn />}
+      <ComposeBtn />
    </View>
  )
 })
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@ -14,11 +14,12 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {pluralize} from 'lib/strings/helpers'
 import {formatCount} from 'view/com/util/numeric/format'
 import {useModalControls} from '#/state/modals'
+import {useSession} from '#/state/session'

 export const DesktopRightNav = observer(function DesktopRightNavImpl() {
-  const store = useStores()
  const pal = usePalette('default')
  const palError = usePalette('error')
+  const {isSandbox, hasSession, currentAccount} = useSession()

  const {isTablet} = useWebMediaQueries()
  if (isTablet) {
@ -27,10 +28,10 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {

  return (
    <View style={[styles.rightNav, pal.view]}>
-      {store.session.hasSession && <DesktopSearch />}
-      {store.session.hasSession && <DesktopFeeds />}
+      {hasSession && <DesktopSearch />}
+      {hasSession && <DesktopFeeds />}
      <View style={styles.message}>
-        {store.session.isSandbox ? (
+        {isSandbox ? (
          <View style={[palError.view, styles.messageLine, s.p10]}>
            <Text type="md" style={[palError.text, s.bold]}>
              SANDBOX. Posts and accounts are not permanent.
@ -42,8 +43,8 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {
            type="md"
            style={pal.link}
            href={FEEDBACK_FORM_URL({
-              email: store.session.currentSession?.email,
-              handle: store.session.currentSession?.handle,
+              email: currentAccount!.email,
+              handle: currentAccount!.handle,
            })}
            text="Send feedback"
          />
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@ -33,6 +33,7 @@ import {
 } from '#/state/shell'
 import {isAndroid} from 'platform/detection'
 import {useModalControls} from '#/state/modals'
+import {useSession} from '#/state/session'

 const ShellInner = observer(function ShellInnerImpl() {
  const store = useStores()
@ -57,6 +58,8 @@ const ShellInner = observer(function ShellInnerImpl() {
    [setIsDrawerOpen],
  )
  const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
+  const {hasSession} = useSession()
+
  React.useEffect(() => {
    let listener = {remove() {}}
    if (isAndroid) {
@ -81,9 +84,7 @@ const ShellInner = observer(function ShellInnerImpl() {
            onOpen={onOpenDrawer}
            onClose={onCloseDrawer}
            swipeEdgeWidth={winDim.width / 2}
-            swipeEnabled={
-              !canGoBack && store.session.hasSession && !isDrawerSwipeDisabled
-            }>
+            swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
            <TabsNavigator />
          </Drawer>
        </ErrorBoundary>
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@ -24,6 +24,7 @@ import {
  useOnboardingState,
 } from '#/state/shell'
 import {useModalControls} from '#/state/modals'
+import {useSession} from '#/state/session'

 const ShellInner = observer(function ShellInnerImpl() {
  const store = useStores()
@ -33,6 +34,8 @@ const ShellInner = observer(function ShellInnerImpl() {
  const onboardingState = useOnboardingState()
  const {isDesktop, isMobile} = useWebMediaQueries()
  const navigator = useNavigation<NavigationProp>()
+  const {hasSession} = useSession()
+
  useAuxClick()

  useEffect(() => {
@ -44,8 +47,7 @@ const ShellInner = observer(function ShellInnerImpl() {
  }, [navigator, store.shell, setDrawerOpen, closeModal])

  const showBottomBar = isMobile && !onboardingState.isActive
-  const showSideNavs =
-    !isMobile && store.session.hasSession && !onboardingState.isActive
+  const showSideNavs = !isMobile && hasSession && !onboardingState.isActive
  return (
    <View style={[s.hContentRegion, {overflow: 'hidden'}]}>
      <View style={s.hContentRegion}>