From e2e3e1e8c07fd8535dc5bf4fe3c0bd080ff672be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomislav=20Hora=C4=8Dek?= <tomislav@tt-media.hr>
Date: Thu, 22 Aug 2024 21:33:50 +0200
Subject: [PATCH] feat: allow custom components as profile dropdown profile
 image

---
 .../profile-dropdown-trigger.component.tsx    |  8 +---
 .../profile-dropdown-trigger.stories.tsx      | 20 ++++++++
 ...profile-dropdown-wallet-card.component.tsx | 47 +++++++++++++------
 ...ofile-dropdown-wallet-option.component.tsx |  8 +---
 4 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx b/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx
index d6fed63..a275f57 100644
--- a/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx
+++ b/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx
@@ -11,6 +11,7 @@ import { Flex } from '../flex';
 import * as cx from './profile-dropdown-trigger.css';
 import { WalletCard } from './profile-dropdown-wallet-card.component';
 
+import type { ProfileType } from './profile-dropdown-wallet-card.component';
 import type { WalletType } from './profile-dropdown.data';
 
 export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
@@ -18,12 +19,7 @@ export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
   active?: boolean;
   title: string;
   subtitle?: string;
-  profile?: {
-    imageSrc: string;
-    fallbackText: string;
-    alt?: string;
-    delayMs?: number;
-  };
+  profile?: ProfileType;
   type: WalletType;
 };
 
diff --git a/src/design-system/profile-dropdown/profile-dropdown-trigger.stories.tsx b/src/design-system/profile-dropdown/profile-dropdown-trigger.stories.tsx
index 024c204..a5e4200 100644
--- a/src/design-system/profile-dropdown/profile-dropdown-trigger.stories.tsx
+++ b/src/design-system/profile-dropdown/profile-dropdown-trigger.stories.tsx
@@ -8,6 +8,8 @@ import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
 
 import { Trigger } from './profile-dropdown-trigger.component';
+
+import type { ProfileType } from './profile-dropdown-wallet-card.component';
 const subtitle = `Reusable button component for use in a variety of controls containing only an icon for its content.`;
 
 export default {
@@ -24,11 +26,13 @@ const TriggerSample = ({
   id,
   active,
   hasSubtitle = true,
+  profile,
 }: Readonly<{
   disabled?: boolean;
   id?: string;
   active?: boolean;
   hasSubtitle?: boolean;
+  profile?: ProfileType;
 }>): JSX.Element => (
   <Trigger
     title="Alice's wallet"
@@ -37,6 +41,7 @@ const TriggerSample = ({
     id={id}
     active={active}
     type="hot"
+    profile={profile}
   />
 );
 
@@ -67,6 +72,21 @@ export const Overview = (): JSX.Element => (
         <Flex gap="$16" alignItems="center" w="$fill" justifyContent="center">
           <TriggerSample />
           <TriggerSample hasSubtitle={false} />
+          <TriggerSample
+            hasSubtitle={false}
+            profile={{
+              customProfileComponent: (
+                <Flex
+                  alignItems="center"
+                  w={'$32'}
+                  h={'$32'}
+                  justifyContent="center"
+                >
+                  TT
+                </Flex>
+              ),
+            }}
+          />
         </Flex>
       </Section>
 
diff --git a/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx b/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx
index 31ff972..04deb7d 100644
--- a/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx
+++ b/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx
@@ -12,18 +12,26 @@ import { WalletIcon } from './profile-dropdown-wallet-icon.component';
 
 import type { WalletType } from './profile-dropdown.data';
 
+type UserProfileComponentType = {
+  imageSrc: string;
+  fallbackText: string;
+  alt?: string;
+  delayMs?: number;
+};
+
+type CustomProfileComponentType = {
+  customProfileComponent: React.ReactNode;
+};
+
+export type ProfileType = UserProfileComponentType | CustomProfileComponentType;
+
 export interface Props {
   title: {
     text: string;
     type: 'button' | 'content';
   };
   subtitle?: string;
-  profile?: {
-    imageSrc: string;
-    fallbackText: string;
-    alt?: string;
-    delayMs?: number;
-  };
+  profile?: ProfileType;
   type: WalletType;
   testId?: string;
 }
@@ -32,6 +40,22 @@ const makeTestId = (namespace = '', path = ''): string => {
   return namespace === '' ? namespace : `${namespace}${path}`;
 };
 
+const getProfileImage = (
+  profile: ProfileType,
+  testId: string,
+): React.ReactNode => {
+  if ('customProfileComponent' in profile) {
+    return profile.customProfileComponent;
+  }
+  return (
+    <UserProfile
+      {...profile}
+      radius="rounded"
+      testId={makeTestId(testId, '-icon')}
+    />
+  );
+};
+
 export const WalletCard = ({
   title,
   subtitle,
@@ -43,16 +67,11 @@ export const WalletCard = ({
 
   return (
     <Flex>
-      {profile === undefined ? (
-        <WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
+      {profile ? (
+        getProfileImage(profile, testId)
       ) : (
-        <UserProfile
-          {...profile}
-          radius="rounded"
-          testId={makeTestId(testId, '-icon')}
-        />
+        <WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
       )}
-
       {subtitle ? (
         <Flex flexDirection="column" ml="$10" h="$32" alignItems="flex-start">
           <Title color="secondary" data-testid={makeTestId(testId, '-title')}>
diff --git a/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx b/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx
index 0d23f5b..2a0de96 100644
--- a/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx
+++ b/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx
@@ -11,18 +11,14 @@ import { Flex } from '../flex';
 import { WalletCard } from './profile-dropdown-wallet-card.component';
 import * as cx from './profile-dropdown-wallet-option.css';
 
+import type { ProfileType } from './profile-dropdown-wallet-card.component';
 import type { WalletType } from './profile-dropdown.data';
 
 export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
   disabled?: boolean;
   title: string;
   subtitle?: string;
-  profile?: {
-    imageSrc: string;
-    fallbackText: string;
-    alt?: string;
-    delayMs?: number;
-  };
+  profile?: ProfileType;
   type: WalletType;
   onOpenAccountsMenu?: () => void;
 };