Merge pull request #66 from input-output-hk/feat/lw-11733-support-tok…

…en-amount-details-tooltip

feat: support TokenAmount details tooltip [LW-11733]

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,21 +14,27 @@ interface Props {
   details: string;
   detailsColor?: TypographyVariants['color'];
   detailsWeight?: FontWeights;
+  detailsTooltip?: string;
 }
 
 export const TokenAmount = ({
   amount,
   details,
   detailsColor = 'secondary',
   detailsWeight = '$regular',
+  detailsTooltip,
 }: Readonly<Props>): JSX.Element => {
   return (
     <Flex flexDirection="column" alignItems="flex-end" className={cx.container}>
       <Text.Body.Large weight="$semibold" data-testid="token-amount">
         {amount}
       </Text.Body.Large>
       <Text.Body.Normal color={detailsColor} weight={detailsWeight}>
-        {details}
+        {detailsTooltip ? (
+          <Tooltip label={detailsTooltip}>{details}</Tooltip>
+        ) : (
+          details
+        )}
       </Text.Body.Normal>
     </Flex>
   );

src/design-system/assets-table/assets-table.stories.tsx

@@ -68,6 +68,7 @@ const PendingAssetInfo = ({ id }: Readonly<AssetInfoProps>): 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."
     />
   </AssetsTable>
 );