feat: allow passing elements to asset table props

Author: szymonmaslowski

src/design-system/assets-table/assets-table-token-amount.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { Flex } from '../flex';
 import { Text } from '../text';
@@ -11,7 +11,7 @@ import type { TypographyVariants } from '../text/text.css';
 
 interface Props {
   amount: string;
-  details: string;
+  details: string | ReactElement;
   detailsColor?: TypographyVariants['color'];
   detailsWeight?: FontWeights;
   detailsTooltip?: string;

src/design-system/assets-table/assets-table-token-profile.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { Box } from '../box';
 import { Grid, Cell } from '../grid';
@@ -7,26 +7,48 @@ import { Text } from '../text';
 
 import * as cx from './assets-table-token-profile.css';
 
-interface Props {
-  imageSrc: string;
-  name: string;
-  description: string;
+const getImageAlt = ({
+  alt,
+  name,
+}: {
+  alt?: string;
+  name: string | ReactElement;
+}) => {
+  if (alt) return alt;
+  return typeof name === 'string' ? name : undefined;
+};
+
+type TokenProfileProps = {
+  alt?: string;
+  image: string | ReactElement;
+  name: string | ReactElement;
+  description: string | ReactElement;
   testId?: string;
-}
+};
 
 export const TokenProfile = ({
-  imageSrc,
+  alt,
+  image,
   name,
   description,
   testId = 'token-profile',
-}: Readonly<Props>): JSX.Element => {
+}: Readonly<TokenProfileProps>): ReactElement => {
+  const imageNode =
+    typeof image === 'string' ? (
+      <Image
+        imageSrc={image}
+        alt={getImageAlt({ alt, name })}
+        testId={`${testId}-icon`}
+      />
+    ) : (
+      image
+    );
+
   return (
     <div className={cx.container} data-testid={testId}>
       <Grid columns="$fitContent" gutters="$0">
         <Cell>
-          <Box mr="$24">
-            <Image imageSrc={imageSrc} alt={name} testId={`${testId}-icon`} />
-          </Box>
+          <Box mr="$24">{imageNode}</Box>
         </Cell>
         <Cell>
           <Text.Body.Large weight="$semibold" data-testid={`${testId}-name`}>