feat: allow custom components as profile dropdown profile image

Author: tomislavhoracek

src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx

@@ -24,6 +24,7 @@ export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
     alt?: string;
     delayMs?: number;
   };
+  customProfileComponent?: React.ReactNode;
   type: WalletType;
 };
 
@@ -42,6 +43,7 @@ export const Trigger = ({
   subtitle,
   profile,
   type,
+  customProfileComponent,
   ...props
 }: Readonly<Props>): JSX.Element => {
   return (
@@ -55,6 +57,7 @@ export const Trigger = ({
       <Flex alignItems="center">
         <WalletCard
           profile={profile}
+          customProfileComponent={customProfileComponent}
           title={{ text: title, type: 'button' }}
           subtitle={subtitle}
           type={type}

src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx

@@ -24,6 +24,7 @@ export interface Props {
     alt?: string;
     delayMs?: number;
   };
+  customProfileComponent?: React.ReactNode;
   type: WalletType;
   testId?: string;
 }
@@ -38,21 +39,27 @@ export const WalletCard = ({
   profile,
   type,
   testId = '',
+  customProfileComponent,
 }: Readonly<Props>): JSX.Element => {
   const Title = title.type === 'button' ? Text.Label : Text.Address;
 
+  const getProfileImage = (): React.ReactNode => {
+    return customProfileComponent ? (
+      customProfileComponent
+    ) : profile ? (
+      <UserProfile
+        {...profile}
+        radius="rounded"
+        testId={makeTestId(testId, '-icon')}
+      />
+    ) : (
+      <WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
+    );
+  };
+
   return (
     <Flex>
-      {profile === undefined ? (
-        <WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
-      ) : (
-        <UserProfile
-          {...profile}
-          radius="rounded"
-          testId={makeTestId(testId, '-icon')}
-        />
-      )}
-
+      {getProfileImage()}
       {subtitle ? (
         <Flex flexDirection="column" ml="$10" h="$32" alignItems="flex-start">
           <Title color="secondary" data-testid={makeTestId(testId, '-title')}>

src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx

@@ -24,6 +24,7 @@ export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
     delayMs?: number;
   };
   type: WalletType;
+  customProfileComponent?: React.ReactNode;
   onOpenAccountsMenu?: () => void;
 };
 
@@ -36,6 +37,7 @@ export const WalletOption = ({
   profile,
   type,
   onOpenAccountsMenu,
+  customProfileComponent,
   ...props
 }: Readonly<Props>): JSX.Element => {
   return (
@@ -56,6 +58,7 @@ export const WalletOption = ({
           subtitle={subtitle}
           type={type}
           testId="wallet-option"
+          customProfileComponent={customProfileComponent}
         />
         {type !== 'shared' && onOpenAccountsMenu && (
           <Box ml="$10">