From b3705d80c0624299eebb1f32721745681ac42837 Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Fri, 26 Apr 2024 06:51:23 +0530
Subject: [PATCH] bug fix: pfp not working on mobile (#2443)

* base

* better
---
 .../ProfilePicture/ProfilePicture.tsx         | 43 +++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/apps/mobile/src/components/ProfilePicture/ProfilePicture.tsx b/apps/mobile/src/components/ProfilePicture/ProfilePicture.tsx
index b99e299771..094e2b4489 100644
--- a/apps/mobile/src/components/ProfilePicture/ProfilePicture.tsx
+++ b/apps/mobile/src/components/ProfilePicture/ProfilePicture.tsx
@@ -3,7 +3,9 @@ import { useFragment } from 'react-relay';
 import { graphql } from 'relay-runtime';
 
 import { ProfilePictureFragment$key } from '~/generated/ProfilePictureFragment.graphql';
+import { ProfilePictureValidFragment$key } from '~/generated/ProfilePictureValidFragment.graphql';
 import { ReportingErrorBoundary } from '~/shared/errors/ReportingErrorBoundary';
+import { useGetSinglePreviewImage } from '~/shared/relay/useGetPreviewImages';
 
 import { RawProfilePicture, RawProfilePictureProps } from './RawProfilePicture';
 
@@ -21,6 +23,7 @@ export function ProfilePicture({ userRef, style, ...rest }: ProfilePictureProps)
         profileImage {
           ... on TokenProfileImage {
             token {
+              ...ProfilePictureValidFragment
               definition {
                 media {
                   ... on Media {
@@ -48,7 +51,7 @@ export function ProfilePicture({ userRef, style, ...rest }: ProfilePictureProps)
   );
 
   const { token, profileImage: ensImage } = user?.profileImage ?? {};
-  const imageUrl = token?.definition?.media?.previewURLs?.small ?? ensImage?.previewURLs?.small;
+  const ensImageUrl = ensImage?.previewURLs?.small;
 
   const letter = user?.username?.[0]?.toUpperCase();
 
@@ -64,7 +67,7 @@ export function ProfilePicture({ userRef, style, ...rest }: ProfilePictureProps)
     />
   );
 
-  if (imageUrl) {
+  if (ensImageUrl) {
     return (
       <ReportingErrorBoundary fallback={fallbackProfilePicture}>
         <RawProfilePicture
@@ -72,7 +75,21 @@ export function ProfilePicture({ userRef, style, ...rest }: ProfilePictureProps)
           eventName="ProfilePicture pressed"
           // TODO analytics prop drill
           eventContext={null}
-          imageUrl={imageUrl}
+          imageUrl={ensImageUrl}
+          style={style}
+          {...rest}
+        />
+      </ReportingErrorBoundary>
+    );
+  } else if (token) {
+    return (
+      <ReportingErrorBoundary fallback={fallbackProfilePicture}>
+        <ValidProfilePicture
+          eventElementId="ProfilePicture"
+          eventName="ProfilePicture pressed"
+          // TODO analytics prop drill
+          eventContext={null}
+          tokenRef={token}
           style={style}
           {...rest}
         />
@@ -82,3 +99,23 @@ export function ProfilePicture({ userRef, style, ...rest }: ProfilePictureProps)
     return fallbackProfilePicture;
   }
 }
+
+type ValidProfilePictureProps = {
+  style?: ViewProps['style'];
+  tokenRef: ProfilePictureValidFragment$key;
+} & Omit<RawProfilePictureProps, 'imageUrl'>;
+
+function ValidProfilePicture({ tokenRef, style, ...rest }: ValidProfilePictureProps) {
+  const token = useFragment(
+    graphql`
+      fragment ProfilePictureValidFragment on Token {
+        ...useGetPreviewImagesSingleFragment
+      }
+    `,
+    tokenRef
+  );
+
+  const imageUrl = useGetSinglePreviewImage({ tokenRef: token, size: 'small' }) ?? '';
+
+  return <RawProfilePicture imageUrl={imageUrl} style={style} {...rest} />;
+}