Fix account switcher toggle

packages/common/src/api/account.ts

@@ -1,16 +1,14 @@
-import { useMemo } from 'react'
-
 import { Id } from '@audius/sdk'
 import dayjs from 'dayjs'
+import { useSelector } from 'react-redux'
 
 import { managedUserListFromSDK, userManagerListFromSDK } from '~/adapters/user'
 import { createApi } from '~/audius-query'
-import { ID, User, UserMetadata } from '~/models'
+import { AccountUserMetadata, ID, User, UserMetadata } from '~/models'
+import { getWalletAddresses } from '~/store/account/selectors'
 
-import {
-  CurrentUserWalletType,
-  useCurrentAccount
-} from './tan-query/users/account/useCurrentAccount'
+import { SelectableQueryOptions } from './tan-query/types'
+import { useWalletAccount } from './tan-query/users/account/useWalletUser'
 
 type ResetPasswordArgs = {
   email: string
@@ -228,30 +226,47 @@ const accountApi = createApi({
   }
 })
 
-// TODO: this is temporary jank to scope down changes - this will go soon when removing this whole file
-export const useGetCurrentUser = (_args?: any, options?: any) => {
-  return {
-    data: useCurrentAccount(CurrentUserWalletType.currentUser, options)?.data
-      ?.user
-  }
+export const useGetCurrentUser = <TResult = UserMetadata | undefined>(
+  options?: SelectableQueryOptions<
+    AccountUserMetadata | null | undefined,
+    TResult
+  >
+) => {
+  const { currentUser } = useSelector(getWalletAddresses)
+
+  return useWalletAccount<TResult>(currentUser, {
+    select: (data: AccountUserMetadata | null | undefined): TResult =>
+      data?.user as TResult,
+    ...options
+  })
 }
 
-// TODO: this is temporary jank to scope down changes - this will go soon when removing this whole file
-export const useGetCurrentWeb3User = (_args?: any, options?: any) => {
-  return {
-    data: useCurrentAccount(CurrentUserWalletType.web3User, options)?.data?.user
-  }
+export const useGetCurrentWeb3User = <TResult = UserMetadata | undefined>(
+  options?: SelectableQueryOptions<
+    AccountUserMetadata | null | undefined,
+    TResult
+  >
+) => {
+  const { web3User } = useSelector(getWalletAddresses)
+
+  return useWalletAccount<TResult>(web3User, {
+    select: (data: AccountUserMetadata | null | undefined): TResult =>
+      data?.user as TResult,
+    ...options
+  })
 }
 
-// TODO: this is temporary jank to scope down changes - this will go soon when removing this whole file
-export const useGetCurrentUserId = (_args?: any, options?: any) => {
-  const result = useGetCurrentUser(_args, options)
-  return useMemo(() => {
-    return {
-      ...result,
-      data: result.data ? result.data.user_id : null
-    }
-  }, [result])
+export const useGetCurrentUserId = <TResult = number | undefined>(
+  options?: SelectableQueryOptions<
+    AccountUserMetadata | null | undefined,
+    TResult
+  >
+) => {
+  return useGetCurrentUser<TResult>({
+    select: (accountData: AccountUserMetadata | null | undefined): TResult =>
+      accountData?.user.user_id as TResult,
+    ...options
+  })
 }
 
 export const {

packages/common/src/api/tan-query/comments/useGetTrackCommentNotificationSetting.ts

@@ -17,7 +17,7 @@ export const getTrackCommentNotificationSettingQueryKey = (trackId: ID) => {
 
 export const useGetTrackCommentNotificationSetting = (
   trackId: ID,
-  currentUserId: Nullable<ID>
+  currentUserId: Nullable<ID> | undefined
 ) => {
   const { audiusSdk } = useAudiusQueryContext()
 

packages/common/src/api/tan-query/users/account/useWalletUser.ts

@@ -1,11 +1,9 @@
 import { AudiusSdk } from '@audius/sdk'
 import { useQuery } from '@tanstack/react-query'
-import { useSelector } from 'react-redux'
 
 import { accountFromSDK } from '~/adapters/user'
 import { useAudiusQueryContext } from '~/audius-query'
-import { AccountUserMetadata, ID } from '~/models'
-import { getWalletAddresses } from '~/store/account/selectors'
+import { AccountUserMetadata } from '~/models'
 
 import { QUERY_KEYS } from '../../queryKeys'
 import { QueryKey, SelectableQueryOptions } from '../../types'
@@ -16,9 +14,6 @@ export const getWalletAccountQueryKey = (wallet: string | null | undefined) =>
     wallet
   ] as unknown as QueryKey<AccountUserMetadata | null>
 
-export const getWalletUserQueryKey = (wallet: string | null | undefined) =>
-  [QUERY_KEYS.walletUser, wallet] as unknown as QueryKey<ID | null>
-
 // This queryFn is separate in order to be used in sagas
 export const getWalletAccountQueryFn = async (
   wallet: string,
@@ -40,20 +35,24 @@ export const getWalletAccountQueryFn = async (
 /**
  * Hook to get the currently logged in user's data
  */
-export const useWalletUser = <TResult = ID | null | undefined>(
-  options?: SelectableQueryOptions<ID | null | undefined, TResult>
+export const useWalletAccount = <
+  TResult = AccountUserMetadata | null | undefined
+>(
+  wallet: string | null | undefined,
+  options?: SelectableQueryOptions<
+    AccountUserMetadata | null | undefined,
+    TResult
+  >
 ) => {
   const { audiusSdk } = useAudiusQueryContext()
-  const { currentUser: currentUserWallet } = useSelector(getWalletAddresses)
 
   return useQuery({
-    queryKey: getWalletUserQueryKey(currentUserWallet),
+    queryKey: getWalletAccountQueryKey(wallet),
     queryFn: async () => {
       const sdk = await audiusSdk()
-      return (await getWalletAccountQueryFn(currentUserWallet!, sdk))?.user
-        ?.user_id
+      return await getWalletAccountQueryFn(wallet!, sdk)
     },
     ...options,
-    enabled: options?.enabled !== false && !!currentUserWallet
+    enabled: options?.enabled !== false && !!wallet
   })
 }

packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcher.tsx

@@ -18,14 +18,12 @@ export const AccountSwitcher = () => {
   const isAccountComplete = useSelector(accountSelectors.getIsAccountComplete)
   const [checkedAccess, setCheckedAccess] = useState(false)
 
-  const { data: currentWeb3User } = useGetCurrentWeb3User(
-    {},
-    { enabled: !isAccountComplete }
-  )
-  const { data: currentUserId } = useGetCurrentUserId(
-    {},
-    { enabled: !isAccountComplete }
-  )
+  const { data: currentWeb3User } = useGetCurrentWeb3User({
+    enabled: isAccountComplete
+  })
+  const { data: currentUserId } = useGetCurrentUserId({
+    enabled: isAccountComplete && !!currentWeb3User
+  })
 
   const { switchAccount, switchToWeb3User } = useAccountSwitcher()