feat: added email and name sharing with url injection in profile

Author: Bob-six

src/app/routes/_app.subject.$id/route.tsx

@@ -43,6 +43,8 @@ import { ActivityListSearch } from './components/activity-list-search';
 import { EvidenceListSearch } from './components/evidence-list-search';
 import SubjectProfileHeader from './components/header';
 import ProfileTabs from './components/profile-tabs';
+import { useGetGravatarProfileByHashedEmailQuery } from '@/store/api/profile';
+import { skipToken } from '@reduxjs/toolkit/query';
 
 const connectionLevelPriority: {
   [key in ConnectionLevel | 'aura only']: number;
@@ -72,6 +74,12 @@ export const SubjectProfileBody = ({ subjectId }: { subjectId: string }) => {
   const [credibilityDetailsProps, setCredibilityDetailsProps] =
     useState<CredibilityDetailsProps | null>(null);
 
+  const name = useMemo(() => query.get('name'), [query]);
+
+  const profilePhotoFetch = useGetGravatarProfileByHashedEmailQuery(
+    query.has('gravatar') ? query.get('gravatar')! : skipToken,
+  );
+
   const {
     currentViewMode,
     currentEvaluationCategory,
@@ -217,6 +225,8 @@ export const SubjectProfileBody = ({ subjectId }: { subjectId: string }) => {
         subjectId={subjectId}
         setShowEvaluationFlow={setShowEvaluationFlow}
         setSelectedTab={setSelectedTab}
+        injectedProfileImage={profilePhotoFetch.data?.avatar_url}
+        injectedProfileName={name}
       />
 
       <Modal

src/components/GravatarPoriflePicture.tsx

@@ -0,0 +1,39 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card';
+
+const GravatarProfilePicture = ({
+  image,
+  withoutHover = false,
+  ...props
+}: React.HTMLAttributes<HTMLImageElement> & {
+  image: string | undefined;
+  withoutHover?: boolean;
+}) => {
+  if (withoutHover)
+    return (
+      <img
+        {...props}
+        className={`${props.className ?? ''} object-cover`}
+        src={image || '/placeholder.svg'}
+      />
+    );
+
+  return (
+    <HoverCard openDelay={100}>
+      <HoverCardTrigger asChild>
+        <img
+          {...props}
+          className={`${props.className ?? ''} object-cover transition-transform duration-200 hover:scale-105`}
+          src={image || '/placeholder.svg'}
+        />
+      </HoverCardTrigger>
+      <HoverCardContent className="w-auto p-1">
+        <img
+          src={image}
+          className="h-auto max-h-[300px] w-auto max-w-[300px] rounded-md object-cover"
+        />
+      </HoverCardContent>
+    </HoverCard>
+  );
+};
+
+export default GravatarProfilePicture;

src/components/Shared/ProfileInfo/index.tsx

@@ -9,7 +9,7 @@ import { useSubjectName } from 'hooks/useSubjectName';
 import { useSubjectVerifications } from 'hooks/useSubjectVerifications';
 import useViewMode from 'hooks/useViewMode';
 import moment from 'moment';
-import { useContext, useMemo } from 'react';
+import { FC, useContext, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { selectAuthData } from 'store/profile/selectors';
 import { EvaluationCategory, ProfileTab } from 'types/dashboard';
@@ -21,17 +21,24 @@ import BrightIdProfilePicture from '../../BrightIdProfilePicture';
 import { YourEvaluationInfo } from '../EvaluationInfo/YourEvaluationInfo';
 import { HorizontalProgressBar } from '../HorizontalProgressBar';
 import NewEvaluationCard from '@/app/routes/_app.subject.$id/components/new-evaluation-card';
+import GravatarProfilePicture from '@/components/GravatarPoriflePicture';
 
-export const ProfileInfo = ({
-  isPerformance = false,
-  subjectId,
-  setShowEvaluationFlow,
-  setSelectedTab,
-}: {
+export interface ProfileInfoProps {
+  injectedProfileImage?: string;
   isPerformance?: boolean;
   subjectId: string;
   setShowEvaluationFlow: (value: boolean) => void;
   setSelectedTab?: (value: ProfileTab) => void;
+  injectedProfileName?: string | null;
+}
+
+export const ProfileInfo: FC<ProfileInfoProps> = ({
+  isPerformance = false,
+  subjectId,
+  setShowEvaluationFlow,
+  setSelectedTab,
+  injectedProfileImage,
+  injectedProfileName,
 }) => {
   const { currentViewMode, currentEvaluationCategory, updateViewAs } =
     useViewMode();
@@ -87,15 +94,33 @@ export const ProfileInfo = ({
     <div className="card flex flex-col gap-3 border dark:bg-dark-primary">
       <div className="card--header flex w-full items-center justify-between">
         <div className="card--header__left flex gap-4">
-          <BrightIdProfilePicture
-            key={subjectId}
-            className={`card--header__left__avatar rounded-full border-[3px] ${getViewModeSubjectBorderColorClass(
-              currentViewMode,
-            )} h-[51px] w-[51px]`}
-            subjectId={subjectId}
-          />
+          {injectedProfileImage ? (
+            <GravatarProfilePicture
+              key={injectedProfileImage}
+              image={injectedProfileImage}
+              className={`card--header__left__avatar rounded-full border-[3px] ${getViewModeSubjectBorderColorClass(
+                currentViewMode,
+              )} h-[51px] w-[51px]`}
+            />
+          ) : (
+            <BrightIdProfilePicture
+              key={subjectId}
+              className={`card--header__left__avatar rounded-full border-[3px] ${getViewModeSubjectBorderColorClass(
+                currentViewMode,
+              )} h-[51px] w-[51px]`}
+              subjectId={subjectId}
+            />
+          )}
           <div className="card--header__left__info flex flex-col justify-center">
-            <h3 className="truncate text-lg font-medium leading-5">{name}</h3>
+            <h3 className="truncate text-lg font-medium leading-5">
+              {injectedProfileName ? (
+                <span>
+                  {injectedProfileName} <small>({name})</small>
+                </span>
+              ) : (
+                name
+              )}
+            </h3>
             <div className="flex gap-1">
               <span className="text-sm">
                 Level: <strong>{auraLevel}</strong>

src/store/api/profile.ts

@@ -11,7 +11,19 @@ export const profileApi = apiSlice.injectEndpoints({
       providesTags: (res) =>
         res?.id ? [{ type: 'BrightID' as const, id: res.id }] : [],
     }),
-
+    getGravatarProfileByHashedEmail: build.query<
+      {
+        display_name: string;
+        profile_url: string;
+        avatar_url: string;
+      },
+      string
+    >({
+      query: (hashedEmail) => ({
+        url: `https://api.gravatar.com/v3/profiles/${hashedEmail}`,
+        method: 'GET',
+      }),
+    }),
     getConnections: build.query<
       ConnectionInfo[],
       { id: string; direction: 'inbound' | 'outbound' }
@@ -29,4 +41,5 @@ export const {
   useGetConnectionsQuery,
   useGetBrightIDProfileQuery,
   useLazyGetBrightIDProfileQuery,
+  useGetGravatarProfileByHashedEmailQuery,
 } = profileApi;