diff --git a/src/design-system/assets-table/assets-table-token-amount.component.tsx b/src/design-system/assets-table/assets-table-token-amount.component.tsx index 3610053..999def6 100644 --- a/src/design-system/assets-table/assets-table-token-amount.component.tsx +++ b/src/design-system/assets-table/assets-table-token-amount.component.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { ReactNode } 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: ReactNode; detailsColor?: TypographyVariants['color']; detailsWeight?: FontWeights; detailsTooltip?: string; diff --git a/src/design-system/assets-table/assets-table-token-profile.component.tsx b/src/design-system/assets-table/assets-table-token-profile.component.tsx index 8a0146d..83e47b7 100644 --- a/src/design-system/assets-table/assets-table-token-profile.component.tsx +++ b/src/design-system/assets-table/assets-table-token-profile.component.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { ReactElement, ReactNode } from 'react'; import { Box } from '../box'; import { Grid, Cell } from '../grid'; @@ -7,26 +7,42 @@ 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: ReactNode }) => { + if (alt) return alt; + return typeof name === 'string' ? name : undefined; +}; + +type TokenProfileProps = { + alt?: string; + image: ReactNode; + name: ReactNode; + description: ReactNode; testId?: string; -} +}; export const TokenProfile = ({ - imageSrc, + alt, + image, name, description, testId = 'token-profile', -}: Readonly): JSX.Element => { +}: Readonly): ReactElement => { + const imageNode = + typeof image === 'string' ? ( + {getImageAlt({ + ) : ( + image + ); + return (
- - {name} - + {imageNode} diff --git a/src/design-system/assets-table/assets-table.stories.tsx b/src/design-system/assets-table/assets-table.stories.tsx index 87ff876..037aede 100644 --- a/src/design-system/assets-table/assets-table.stories.tsx +++ b/src/design-system/assets-table/assets-table.stories.tsx @@ -49,7 +49,7 @@ interface AssetInfoProps { const SimpleAssetInfo = ({ id }: Readonly): JSX.Element => ( @@ -60,7 +60,7 @@ const SimpleAssetInfo = ({ id }: Readonly): JSX.Element => ( const PendingAssetInfo = ({ id }: Readonly): JSX.Element => ( @@ -79,7 +79,7 @@ const DetailedAssetInfo = ({ }: Readonly): JSX.Element => ( @@ -200,7 +200,7 @@ export const Controls: Controls = ({