ENG-4831 fix(portal): update image modal component to use graphql

apps/portal/app/components/profile/image-modal.tsx

@@ -8,22 +8,22 @@ import {
   IdentityTag,
   Trunctacular,
 } from '@0xintuition/1ui'
-import { IdentityPresenter } from '@0xintuition/api'
 
 export interface ImageModalProps {
-  identity: IdentityPresenter
+  displayName: string
+  imageSrc: string
+  isUser?: boolean
   open?: boolean
   onClose: () => void
 }
 
 export default function ImageModal({
-  identity,
+  displayName,
+  imageSrc,
+  isUser,
   open,
   onClose,
 }: ImageModalProps) {
-  const imageSrc = identity?.user?.image ?? identity?.image ?? ''
-  const isUser = !!identity?.user
-
   return (
     <Dialog
       open={open}
@@ -38,14 +38,7 @@ export default function ImageModal({
               imgSrc={imageSrc}
               variant={isUser ? 'user' : 'non-user'}
             >
-              <Trunctacular
-                value={
-                  identity?.user?.display_name ??
-                  identity?.display_name ??
-                  'Identity'
-                }
-                maxStringLength={42}
-              />
+              <Trunctacular value={displayName} maxStringLength={42} />
             </IdentityTag>
           </DialogTitle>
         </DialogHeader>

apps/portal/app/routes/app+/identity+/$id.tsx

@@ -536,7 +536,9 @@ export default function IdentityDetails() {
         </>
       )}
       <ImageModal
-        identity={identity}
+        displayName={atomResult?.atom?.value?.thing?.name ?? ''}
+        imageSrc={atomResult?.atom?.value?.thing?.image ?? ''}
+        isUser={atomResult?.atom?.type === ('Account' || 'Person' || 'Default')}
         open={imageModalActive.isOpen}
         onClose={() =>
           setImageModalActive({

apps/portal/app/routes/app+/list+/$id.tsx

@@ -185,7 +185,9 @@ export default function ListDetails() {
       />
       {claim.object && (
         <ImageModal
-          identity={claim.object}
+          displayName={claim.object?.display_name ?? ''}
+          imageSrc={claim.object?.image ?? ''}
+          isUser={claim.object?.is_user}
           open={imageModalActive.isOpen}
           onClose={() =>
             setImageModalActive({

apps/portal/app/routes/app+/profile+/$wallet.tsx

@@ -768,7 +768,11 @@ export default function Profile() {
         </>
       )}
       <ImageModal
-        identity={userIdentity}
+        displayName={accountResult?.account?.label ?? ''}
+        imageSrc={accountResult?.account?.image ?? ''}
+        isUser={
+          accountResult?.account?.type === ('Account' || 'Person' || 'Default')
+        }
         open={imageModalActive.isOpen}
         onClose={() =>
           setImageModalActive({

apps/portal/app/routes/app+/profile+/_index+/_layout.tsx

@@ -781,7 +781,11 @@ export default function Profile() {
         </>
       )}
       <ImageModal
-        identity={userIdentity}
+        displayName={accountResult?.account?.label ?? ''}
+        imageSrc={accountResult?.account?.image ?? ''}
+        isUser={
+          accountResult?.account?.type === ('Account' || 'Person' || 'Default')
+        }
         open={imageModalActive.isOpen}
         onClose={() =>
           setImageModalActive({

apps/portal/app/routes/readonly+/identity+/$id.tsx

@@ -236,7 +236,9 @@ export default function ReadOnlyIdentityDetails() {
   return (
     <TwoPanelLayout leftPanel={leftPanel} rightPanel={rightPanel}>
       <ImageModal
-        identity={identity}
+        displayName={identity?.display_name ?? ''}
+        imageSrc={identity?.image ?? ''}
+        isUser={identity?.is_user}
         open={imageModalActive.isOpen}
         onClose={() =>
           setImageModalActive({

apps/portal/app/routes/readonly+/list+/$id.tsx

@@ -169,7 +169,9 @@ export default function ReadOnlyListDetails() {
       <TwoPanelLayout leftPanel={leftPanel} rightPanel={<Outlet />} />
       {claim.object && (
         <ImageModal
-          identity={claim.object}
+          displayName={claim.object?.display_name ?? ''}
+          imageSrc={claim.object?.image ?? ''}
+          isUser={claim.object?.is_user}
           open={imageModalActive.isOpen}
           onClose={() =>
             setImageModalActive({

apps/portal/app/routes/readonly+/profile+/$wallet.tsx

@@ -324,7 +324,9 @@ export default function ReadOnlyProfile() {
         </>
       )}
       <ImageModal
-        identity={userIdentity}
+        displayName={userIdentity?.user?.display_name ?? ''}
+        imageSrc={userIdentity?.user?.image ?? ''}
+        isUser={true}
         open={imageModalActive.isOpen}
         onClose={() =>
           setImageModalActive({