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 85bc1fa..3610053 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 @@ -3,6 +3,7 @@ import React from 'react'; import { Flex } from '../flex'; import { Text } from '../text'; import { FontWeights } from '../text/create-text.util'; +import { Tooltip } from '../tooltip'; import * as cx from './assets-table-token-amount.css'; @@ -13,6 +14,7 @@ interface Props { details: string; detailsColor?: TypographyVariants['color']; detailsWeight?: FontWeights; + detailsTooltip?: string; } export const TokenAmount = ({ @@ -20,6 +22,7 @@ export const TokenAmount = ({ details, detailsColor = 'secondary', detailsWeight = '$regular', + detailsTooltip, }: Readonly): JSX.Element => { return ( @@ -27,7 +30,11 @@ export const TokenAmount = ({ {amount} - {details} + {detailsTooltip ? ( + {details} + ) : ( + details + )} ); diff --git a/src/design-system/assets-table/assets-table.stories.tsx b/src/design-system/assets-table/assets-table.stories.tsx index 652f40f..87ff876 100644 --- a/src/design-system/assets-table/assets-table.stories.tsx +++ b/src/design-system/assets-table/assets-table.stories.tsx @@ -68,6 +68,7 @@ const PendingAssetInfo = ({ id }: Readonly): JSX.Element => ( amount="21,584.48" details="+ 5 pending" detailsColor="success" + detailsTooltip="Pending coins represent tokens that the wallet recognizes but are not yet finalized by the network. These coins are currently unspendable until confirmed." /> );