use hook for profile details

components/profile/EditNftProfilePic.tsx

@@ -8,6 +8,7 @@ import { bs58 } from '@project-serum/anchor/dist/cjs/utils/bytes'
 import { notify } from 'utils/notifications'
 import { MANGO_DATA_API_URL } from 'utils/constants'
 import { ImgWithLoader } from '@components/ImgWithLoader'
+import useProfileDetails from 'hooks/useProfileDetails'
 
 const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation(['common', 'profile'])
@@ -15,8 +16,8 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
   const nfts = mangoStore((s) => s.wallet.nfts.data)
   const nftsLoading = mangoStore((s) => s.wallet.nfts.loading)
   const [selectedProfile, setSelectedProfile] = useState<string>('')
-  const actions = mangoStore.getState().actions
+  const { refetch: refetchProfileDetails } = useProfileDetails()
-  const profile = mangoStore((s) => s.profile.details)
+  const { data: profile } = useProfileDetails()
 
   useEffect(() => {
     if (profile?.profile_image_url) {
@@ -54,7 +55,7 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
         requestOptions,
       )
       if (response.status === 200) {
-        await actions.fetchProfileDetails(publicKey.toString())
+        await refetchProfileDetails()
         notify({
           type: 'success',
           title: t('profile:profile-pic-success'),
@@ -100,7 +101,7 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
         requestOptions,
       )
       if (response.status === 200) {
-        await actions.fetchProfileDetails(publicKey.toString())
+        await refetchProfileDetails()
         notify({
           type: 'success',
           title: t('profile:profile-pic-remove-success'),

components/profile/EditProfileForm.tsx

@@ -10,13 +10,13 @@ import {
 } from '@heroicons/react/20/solid'
 import { bs58 } from '@project-serum/anchor/dist/cjs/utils/bytes'
 import { useWallet } from '@solana/wallet-adapter-react'
-import mangoStore from '@store/mangoStore'
 import startCase from 'lodash/startCase'
 import { useTranslation } from 'next-i18next'
 import { ChangeEvent, useState } from 'react'
 import { MANGO_DATA_API_URL } from 'utils/constants'
 import { notify } from 'utils/notifications'
 import ProfileImage from './ProfileImage'
+import useProfileDetails from 'hooks/useProfileDetails'
 
 const EditProfileForm = ({
   onFinish,
@@ -28,7 +28,7 @@ const EditProfileForm = ({
   onboarding?: boolean
 }) => {
   const { t } = useTranslation(['profile', 'onboarding'])
-  const profile = mangoStore((s) => s.profile.details)
+  const { data: profile, refetch: refetchProfileDetails } = useProfileDetails()
   const { publicKey, signMessage } = useWallet()
   const [profileName, setProfileName] = useState(
     startCase(profile?.profile_name) || '',
@@ -37,7 +37,6 @@ const EditProfileForm = ({
   const [loadUniquenessCheck, setLoadUniquenessCheck] = useState(false)
   const [loadUpdateProfile, setLoadUpdateProfile] = useState(false)
   const [updateError, setUpdateError] = useState('')
-  const actions = mangoStore.getState().actions
 
   const validateProfileNameUniqueness = async (name: string) => {
     try {
@@ -109,7 +108,7 @@ const EditProfileForm = ({
         )
         if (response.status === 200) {
           setLoadUpdateProfile(false)
-          await actions.fetchProfileDetails(publicKey.toString())
+          await refetchProfileDetails()
           onFinish()
           notify({
             type: 'success',

components/profile/ProfileImage.tsx

@@ -1,4 +1,4 @@
-import mangoStore from '../../store/mangoStore'
+import useProfileDetails from 'hooks/useProfileDetails'
 import ProfileIcon from '../icons/ProfileIcon'
 
 const ProfileImage = ({
@@ -12,7 +12,7 @@ const ProfileImage = ({
   imageUrl?: string | null
   isOwnerProfile?: boolean
 }) => {
-  const profile = mangoStore((s) => s.profile.details)
+  const { data: profile } = useProfileDetails()
 
   return imageUrl || (isOwnerProfile && profile?.profile_image_url) ? (
     <img

components/wallet/ConnectedMenu.tsx

@@ -18,6 +18,7 @@ import { TV_USER_ID_KEY } from 'utils/constants'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import Loading from '@components/shared/Loading'
 import SheenLoader from '@components/shared/SheenLoader'
+import useProfileDetails from 'hooks/useProfileDetails'
 
 const set = mangoStore.getState().set
 const actions = mangoStore.getState().actions
@@ -29,9 +30,11 @@ const ConnectedMenu = () => {
   const [tvUserId, setTvUserId] = useLocalStorageState(TV_USER_ID_KEY, '')
   const [showEditProfileModal, setShowEditProfileModal] = useState(false)
   const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false)
-
+  const {
-  const profileDetails = mangoStore((s) => s.profile.details)
+    data: profileDetails,
-  const loadProfileDetails = mangoStore((s) => s.profile.loadDetails)
+    isInitialLoading: loadProfileDetails,
+    refetch: refetchProfileDetails,
+  } = useProfileDetails()
   const groupLoaded = mangoStore((s) => s.groupLoaded)
   const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
 
@@ -54,7 +57,7 @@ const ConnectedMenu = () => {
     if (publicKey && wallet && groupLoaded) {
       actions.connectMangoClientWithWallet(wallet)
       actions.fetchMangoAccounts(publicKey)
-      actions.fetchProfileDetails(publicKey.toString())
+      refetchProfileDetails()
       actions.fetchWalletTokens(publicKey)
       if (!tvUserId) {
         setTvUserId(publicKey.toString())

hooks/useProfileDetails.ts

@@ -0,0 +1,31 @@
+import { useWallet } from '@solana/wallet-adapter-react'
+import { useQuery } from '@tanstack/react-query'
+import { MANGO_DATA_API_URL } from 'utils/constants'
+
+const fetchProfileDetails = async (walletPk: string | undefined) => {
+  try {
+    const response = await fetch(
+      `${MANGO_DATA_API_URL}/user-data/profile-details?wallet-pk=${walletPk}`,
+    )
+    const data = await response.json()
+    return data
+  } catch (e) {
+    console.error('failed to fetch profile details', e)
+  }
+}
+
+export default function useProfileDetails() {
+  const { publicKey } = useWallet()
+  const { data, isInitialLoading, refetch } = useQuery(
+    ['profile-details', publicKey],
+    () => fetchProfileDetails(publicKey?.toString()),
+    {
+      cacheTime: 1000 * 60 * 10,
+      staleTime: 1000 * 60,
+      retry: 3,
+      refetchOnWindowFocus: false,
+      enabled: !!publicKey,
+    },
+  )
+  return { data, isInitialLoading, refetch }
+}

store/mangoStore.ts

@@ -63,7 +63,6 @@ import {
   TokenStatsItem,
   NFT,
   TourSettings,
-  ProfileDetails,
   MangoTokenStatsItem,
   ThemeData,
   PositionStat,
@@ -87,7 +86,7 @@ import mapValues from 'lodash/mapValues'
 import groupBy from 'lodash/groupBy'
 import sampleSize from 'lodash/sampleSize'
 import { fetchTokenStatsData, processTokenStatsData } from 'apis/mngo'
-import { OrderTypes, TriggerOrderTypes } from 'utils/tradeForm'
+import { OrderTypes } from 'utils/tradeForm'
 
 const GROUP = new PublicKey('78b8f4cGCwmZ9ysPFMWLaLTkkaYnUjwMJYStWe5RTSSX')
 
@@ -199,10 +198,6 @@ export type MangoStore = {
     }
   }
   orderbookTooltip: OrderbookTooltip | undefined
-  profile: {
-    details: ProfileDetails | null
-    loadDetails: boolean
-  }
   prependedGlobalAdditionalInstructions: TransactionInstruction[]
   priorityFee: number
   selectedMarket: {
@@ -283,7 +278,6 @@ export type MangoStore = {
     fetchOpenOrders: (refetchMangoAccount?: boolean) => Promise<void>
     fetchPerpStats: () => void
     fetchPositionsStats: () => void
-    fetchProfileDetails: (walletPk: string) => void
     fetchSwapHistory: (
       mangoAccountPk: string,
       timeout?: number,
@@ -368,10 +362,6 @@ const mangoStore = create<MangoStore>()(
         },
       },
       orderbookTooltip: undefined,
-      profile: {
-        loadDetails: false,
-        details: { profile_name: '', trader_category: '', wallet_pk: '' },
-      },
       priorityFee: DEFAULT_PRIORITY_FEE,
       prependedGlobalAdditionalInstructions: [],
       selectedMarket: {
@@ -1006,27 +996,6 @@ const mangoStore = create<MangoStore>()(
             s.prependedGlobalAdditionalInstructions = instructions
           })
         },
-        async fetchProfileDetails(walletPk: string) {
-          const set = get().set
-          set((state) => {
-            state.profile.loadDetails = true
-          })
-          try {
-            const response = await fetch(
-              `${MANGO_DATA_API_URL}/user-data/profile-details?wallet-pk=${walletPk}`,
-            )
-            const data = await response.json()
-            set((state) => {
-              state.profile.details = data
-              state.profile.loadDetails = false
-            })
-          } catch (e) {
-            console.error(e)
-            set((state) => {
-              state.profile.loadDetails = false
-            })
-          }
-        },
         async fetchTourSettings(walletPk: string) {
           const set = get().set
           set((state) => {