feat: make token amount details configurable [LW-11733]

Author: DominikGuzei

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

@@ -5,22 +5,26 @@ import { Text } from '../text';
 
 import * as cx from './assets-table-token-amount.css';
 
+import type { TypographyVariants } from '../text/text.css';
+
 interface Props {
   amount: string;
-  fiatPrice: string;
+  details: string;
+  detailsColor?: TypographyVariants['color'];
 }
 
 export const TokenAmount = ({
   amount,
-  fiatPrice,
+  details,
+  detailsColor = 'secondary',
 }: 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="secondary" weight="$semibold">
-        {fiatPrice}
+      <Text.Body.Normal color={detailsColor} weight="$regular">
+        {details}
       </Text.Body.Normal>
     </Flex>
   );

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

@@ -53,7 +53,22 @@ const SimpleAssetInfo = ({ id }: Readonly<AssetInfoProps>): JSX.Element => (
       name="Token name"
       description="Subtitle"
     />
-    <TokenAmount amount="23,584.48" fiatPrice="24,568.54 USD" />
+    <TokenAmount amount="23,584.48" details="24,568.54 USD" />
+  </AssetsTable>
+);
+
+const PendingAssetInfo = ({ id }: Readonly<AssetInfoProps>): JSX.Element => (
+  <AssetsTable id={id}>
+    <TokenProfile
+      imageSrc={cardanoImage}
+      name="Token with pending amount"
+      description="description"
+    />
+    <TokenAmount
+      amount="21,584.48"
+      details="+ 5 pending"
+      detailsColor="success"
+    />
   </AssetsTable>
 );
 
@@ -72,7 +87,7 @@ const DetailedAssetInfo = ({
       priceChange="+3.21"
       priceTrend={priceTrend}
     />
-    <TokenAmount amount="23,584.48" fiatPrice="24,568.54 USD" />
+    <TokenAmount amount="23,584.48" details="24,568.54 USD" />
   </AssetsTable>
 );
 
@@ -126,6 +141,11 @@ export const Overview = (): JSX.Element => (
               <DetailedAssetInfo />
             </Variants.Cell>
           </Variants.Row>
+          <Variants.Row>
+            <Variants.Cell>
+              <PendingAssetInfo />
+            </Variants.Cell>
+          </Variants.Row>
         </Variants.Table>
       </Section>
 
@@ -188,7 +208,7 @@ export const Controls: Controls = ({
               priceChange={priceChange}
               priceTrend={priceTrend}
             />
-            <TokenAmount amount={tokenAmount} fiatPrice={fiatPrice} />
+            <TokenAmount amount={tokenAmount} details={fiatPrice} />
           </AssetsTable>
         </Flex>
       </Section>