2 files changed, 14 insertions, 15 deletions
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index c5dcb150c..1ee359be0 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -17,7 +17,6 @@ import {
 } from '@fortawesome/react-native-fontawesome'
 import {s, colors} from 'lib/styles'
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
-import {useStores} from 'state/index'
 import {
   HomeIcon,
   HomeIconSolid,
@@ -51,6 +50,7 @@ import {useSession, SessionAccount} from '#/state/session'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {emitSoftReset} from '#/state/events'
+import {useInviteCodesQuery} from '#/state/queries/invites'
 
 export function DrawerProfileCard({
   account,
@@ -464,10 +464,10 @@ const InviteCodes = observer(function InviteCodesImpl({
   style?: StyleProp<ViewStyle>
 }) {
   const {track} = useAnalytics()
-  const store = useStores()
   const setDrawerOpen = useSetDrawerOpen()
   const pal = usePalette('default')
-  const {invitesAvailable} = store.me
+  const {data: invites} = useInviteCodesQuery()
+  const invitesAvailable = invites?.available?.length ?? 0
   const {openModal} = useModalControls()
   const onPress = React.useCallback(() => {
     track('Menu:ItemClicked', {url: '#invite-codes'})
@@ -490,15 +490,15 @@ const InviteCodes = observer(function InviteCodesImpl({
         icon="ticket"
         style={[
           styles.inviteCodesIcon,
-          store.me.invitesAvailable > 0 ? pal.link : pal.textLight,
+          invitesAvailable > 0 ? pal.link : pal.textLight,
         ]}
         size={18}
       />
       <Text
         type="lg-medium"
-        style={store.me.invitesAvailable > 0 ? pal.link : pal.textLight}>
-        {formatCount(store.me.invitesAvailable)} invite{' '}
-        {pluralize(store.me.invitesAvailable, 'code')}
+        style={invitesAvailable > 0 ? pal.link : pal.textLight}>
+        {formatCount(invitesAvailable)} invite{' '}
+        {pluralize(invitesAvailable, 'code')}
       </Text>
     </TouchableOpacity>
   )
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index 98f54c7ed..9e17cdcd9 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@@ -9,12 +9,12 @@ import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
 import {s} from 'lib/styles'
-import {useStores} from 'state/index'
 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'
+import {useInviteCodesQuery} from '#/state/queries/invites'
 
 export const DesktopRightNav = observer(function DesktopRightNavImpl() {
   const pal = usePalette('default')
@@ -83,11 +83,10 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {
 })
 
 const InviteCodes = observer(function InviteCodesImpl() {
-  const store = useStores()
   const pal = usePalette('default')
   const {openModal} = useModalControls()
-
-  const {invitesAvailable} = store.me
+  const {data: invites} = useInviteCodesQuery()
+  const invitesAvailable = invites?.available?.length ?? 0
 
   const onPress = React.useCallback(() => {
     openModal({name: 'invite-codes'})
@@ -107,15 +106,15 @@ const InviteCodes = observer(function InviteCodesImpl() {
         icon="ticket"
         style={[
           styles.inviteCodesIcon,
-          store.me.invitesAvailable > 0 ? pal.link : pal.textLight,
+          invitesAvailable > 0 ? pal.link : pal.textLight,
         ]}
         size={16}
       />
       <Text
         type="md-medium"
-        style={store.me.invitesAvailable > 0 ? pal.link : pal.textLight}>
-        {formatCount(store.me.invitesAvailable)} invite{' '}
-        {pluralize(store.me.invitesAvailable, 'code')} available
+        style={invitesAvailable > 0 ? pal.link : pal.textLight}>
+        {formatCount(invitesAvailable)} invite{' '}
+        {pluralize(invitesAvailable, 'code')} available
       </Text>
     </TouchableOpacity>
   )