handle if profile details api returns null

components/profile/EditNftProfilePic.tsx

@@ -36,14 +36,14 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
   }, [publicKey])
 
   useEffect(() => {
-    if (profile.profile_image_url) {
+    if (profile?.profile_image_url) {
       setSelectedProfile(profile.profile_image_url)
     }
   }, [profile])
 
   const saveProfileImage = async () => {
-    const name = profile.profile_name.toLowerCase()
-    const traderCategory = profile.trader_category
+    const name = profile?.profile_name.toLowerCase()
+    const traderCategory = profile?.trader_category
     try {
       if (!publicKey) throw new Error('Wallet not connected!')
       if (!signMessage)
@@ -88,8 +88,8 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
   }
 
   const removeProfileImage = async () => {
-    const name = profile.profile_name.toLowerCase()
-    const traderCategory = profile.trader_category
+    const name = profile?.profile_name.toLowerCase()
+    const traderCategory = profile?.trader_category
     try {
       if (!publicKey) throw new Error('Wallet not connected!')
       if (!signMessage)
@@ -147,7 +147,7 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
           <Button disabled={!selectedProfile} onClick={saveProfileImage}>
             {t('save')}
           </Button>
-          {profile.profile_image_url ? (
+          {profile?.profile_image_url ? (
             <LinkButton className="text-sm" onClick={removeProfileImage}>
               {t('profile:remove')}
             </LinkButton>

components/profile/ProfileImage.tsx

@@ -14,10 +14,10 @@ const ProfileImage = ({
 }) => {
   const profile = mangoStore((s) => s.profile.details)
 
-  return imageUrl || (isOwnerProfile && profile.profile_image_url) ? (
+  return imageUrl || (isOwnerProfile && profile?.profile_image_url) ? (
     <img
       alt=""
-      src={imageUrl ? imageUrl : profile.profile_image_url}
+      src={imageUrl ? imageUrl : profile?.profile_image_url}
       className={`default-transition rounded-full`}
       style={{ width: `${imageSize}px`, height: `${imageSize}px` }}
     />

components/wallet/ConnectedMenu.tsx

@@ -72,8 +72,6 @@ const ConnectedMenu = () => {
     }
   }, [publicKey, actions, wallet])
 
-  const { profile_name, wallet_pk } = profileDetails
-
   return (
     <>
       <Menu>
@@ -93,12 +91,14 @@ const ConnectedMenu = () => {
                 {!loadProfileDetails && !isMobile ? (
                   <div className="ml-2.5 overflow-hidden text-left">
                     <p className="font-mono text-xs text-th-fgd-3">
-                      {wallet_pk
-                        ? abbreviateAddress(new PublicKey(wallet_pk))
+                      {profileDetails?.wallet_pk
+                        ? abbreviateAddress(
+                            new PublicKey(profileDetails?.wallet_pk)
+                          )
                         : ''}
                     </p>
                     <p className="truncate pr-2 text-sm font-bold capitalize text-th-fgd-1">
-                      {profile_name}
+                      {profileDetails?.profile_name}
                     </p>
                   </div>
                 ) : null}

store/mangoStore.ts

@@ -226,7 +226,7 @@ export type MangoStore = {
   notifications: Array<Notification>
   perpMarkets: PerpMarket[]
   profile: {
-    details: ProfileDetails
+    details: ProfileDetails | null
     loadDetails: boolean
   }
   selectedMarket: {