diff --git a/src/state/queries/handle.ts b/src/state/queries/handle.ts
new file mode 100644
index 00000000..97e9b210
--- /dev/null
+++ b/src/state/queries/handle.ts
@@ -0,0 +1,25 @@
+import React from 'react'
+import {useQueryClient} from '@tanstack/react-query'
+
+import {useSession} from '#/state/session'
+
+const fetchHandleQueryKey = (handleOrDid: string) => ['handle', handleOrDid]
+
+export function useFetchHandle() {
+ const {agent} = useSession()
+ const queryClient = useQueryClient()
+
+ return React.useCallback(
+ async (handleOrDid: string) => {
+ if (handleOrDid.startsWith('did:')) {
+ const res = await queryClient.fetchQuery({
+ queryKey: fetchHandleQueryKey(handleOrDid),
+ queryFn: () => agent.getProfile({actor: handleOrDid}),
+ })
+ return res.data.handle
+ }
+ return handleOrDid
+ },
+ [agent, queryClient],
+ )
+}
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 90cf144d..8bc1d49a 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -45,6 +45,7 @@ import {useProfileQuery} from '#/state/queries/profile'
import {useSession} from '#/state/session'
import {useUnreadNotifications} from '#/state/queries/notifications/unread'
import {useComposerControls} from '#/state/shell/composer'
+import {useFetchHandle} from '#/state/queries/handle'
const ProfileCard = observer(function ProfileCardImpl() {
const {currentAccount} = useSession()
@@ -124,6 +125,7 @@ const NavItem = observer(function NavItemImpl({
label,
}: NavItemProps) {
const pal = usePalette('default')
+ const {currentAccount} = useSession()
const store = useStores()
const {isDesktop, isTablet} = useWebMediaQueries()
const [pathName] = React.useMemo(() => router.matchPath(href), [href])
@@ -137,7 +139,7 @@ const NavItem = observer(function NavItemImpl({
currentRouteInfo.name === 'Profile'
? isTab(currentRouteInfo.name, pathName) &&
(currentRouteInfo.params as CommonNavigatorParams['Profile']).name ===
- store.me.handle
+ currentAccount?.handle
: isTab(currentRouteInfo.name, pathName)
const {onPress} = useLinkProps({to: href})
const onPressWrapped = React.useCallback(
@@ -194,11 +196,13 @@ const NavItem = observer(function NavItemImpl({
})
function ComposeBtn() {
- const store = useStores()
+ const {currentAccount} = useSession()
const {getState} = useNavigation()
const {openComposer} = useComposerControls()
const {_} = useLingui()
const {isTablet} = useWebMediaQueries()
+ const [isFetchingHandle, setIsFetchingHandle] = React.useState(false)
+ const fetchHandle = useFetchHandle()
const getProfileHandle = async () => {
const {routes} = getState()
@@ -210,13 +214,21 @@ function ComposeBtn() {
).name
if (handle.startsWith('did:')) {
- const cached = await store.profiles.cache.get(handle)
- const profile = cached ? cached.data : undefined
- // if we can't resolve handle, set to undefined
- handle = profile?.handle || undefined
+ try {
+ setIsFetchingHandle(true)
+ handle = await fetchHandle(handle)
+ } catch (e) {
+ handle = undefined
+ } finally {
+ setIsFetchingHandle(false)
+ }
}
- if (!handle || handle === store.me.handle || handle === 'handle.invalid')
+ if (
+ !handle ||
+ handle === currentAccount?.handle ||
+ handle === 'handle.invalid'
+ )
return undefined
return handle
@@ -233,6 +245,7 @@ function ComposeBtn() {
}
return (