Merge pull request #98 from input-output-hk/feat/lw-12217-optional-fiat-in-asset-input-and-badge-in-table

make fiat optional in asset input, add badge into asset table [lw-12577]

Author: vetalcore

src/design-system/asset-input/asset-input.component.tsx

@@ -36,13 +36,15 @@ export const AssetInput = ({
     </Box>
     <Box className={cx.amountBox}>
       <Flex alignItems="center" justifyContent="flex-end">
-        <MaxButton
-          label="MAX"
-          data-testid={`asset-input-max-button-${state.asset.id}`}
-          onClick={(): void => {
-            onMaxClick?.(state.asset);
-          }}
-        />
+        {!!onMaxClick && (
+          <MaxButton
+            label="MAX"
+            data-testid={`asset-input-max-button-${state.asset.id}`}
+            onClick={(): void => {
+              onMaxClick?.(state.asset);
+            }}
+          />
+        )}
         <Box ml="$8">
           <AmountInput
             id={state.asset.id}
@@ -65,9 +67,11 @@ export const AssetInput = ({
         alignItems="flex-end"
         justifyContent="flex-end"
       >
-        <Text.Body.Normal color="secondary">
-          ≈ {state.asset.fiat.value} {state.asset.fiat.ticker}
-        </Text.Body.Normal>
+        {!!state.asset.fiat && (
+          <Text.Body.Normal color="secondary">
+            ≈ {state.asset.fiat.value} {state.asset.fiat.ticker}
+          </Text.Body.Normal>
+        )}
         {state.type === 'invalid' && (
           <Text.Label
             color="error"

src/design-system/asset-input/asset-input.data.ts

@@ -6,7 +6,7 @@ export interface Asset {
 }
 
 export interface AssetWithFiat extends Asset {
-  fiat: {
+  fiat?: {
     value: string;
     ticker: string;
   };

src/design-system/asset-input/ticker-button.component.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import ChevronRight from '@icons/ChevronRightComponent';
 
+import { Flex } from '../flex';
 import { Text } from '../text';
 
 import * as cx from './ticker-button.css';
@@ -23,8 +24,10 @@ export const TickerButton = ({
     data-testid={`asset-input-ticker-button-${id}`}
   >
     <Text.SubHeading weight="$bold">
-      {name}
-      <ChevronRight className={cx.chevronIcon} />
+      <Flex justifyContent="center" alignItems="center">
+        {name}
+        <ChevronRight className={cx.chevronIcon} />
+      </Flex>
     </Text.SubHeading>
   </button>
 );

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

@@ -1,6 +1,7 @@
 import React, { ReactElement, ReactNode } from 'react';
 
 import { Box } from '../box';
+import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
 import { Image } from '../profile-picture';
 import { Text } from '../text';
@@ -16,6 +17,7 @@ type TokenProfileProps = {
   alt?: string;
   image: ReactNode;
   name: ReactNode;
+  badge?: string;
   description: ReactNode;
   testId?: string;
 };
@@ -24,6 +26,7 @@ export const TokenProfile = ({
   alt,
   image,
   name,
+  badge,
   description,
   testId = 'token-profile',
 }: Readonly<TokenProfileProps>): ReactElement => {
@@ -45,9 +48,20 @@ export const TokenProfile = ({
           <Box mr="$24">{imageNode}</Box>
         </Cell>
         <Cell>
-          <Text.Body.Large weight="$semibold" data-testid={`${testId}-name`}>
-            {name}
-          </Text.Body.Large>
+          <Flex alignItems="center" gap="$8">
+            <Text.Body.Large weight="$semibold" data-testid={`${testId}-name`}>
+              {name}
+            </Text.Body.Large>
+            {!!badge && (
+              <Text.Label
+                className={cx.badge}
+                weight="$medium"
+                data-testid={`${testId}-badge`}
+              >
+                {badge}
+              </Text.Label>
+            )}
+          </Flex>
           <Box>
             <Text.Body.Normal
               color="secondary"

src/design-system/assets-table/assets-table-token-profile.css.ts

@@ -1,5 +1,12 @@
-import { style } from '../../design-tokens';
+import { style, vars } from '../../design-tokens';
 
 export const container = style({
   gridArea: 'tokenProfile',
 });
+
+export const badge = style({
+  backgroundColor: vars.colors.$assets_table_badge_bgColor,
+  borderRadius: vars.radius.$medium,
+  padding: `0 ${vars.spacing.$4}`,
+  color: vars.colors.$assets_table_badge_textColor,
+});

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

@@ -203,6 +203,7 @@ export const Controls: Controls = ({
               image={cardanoImage}
               name={tokenName}
               description={tokenSubtitle}
+              badge="Badge"
             />
             <MarketPrice
               tokenPrice={tokenPrice}

src/design-tokens/colors.data.ts

@@ -109,6 +109,9 @@ export const colors = {
 
   $assets_table_container_bgColor_hover: '',
 
+  $assets_table_badge_bgColor: '',
+  $assets_table_badge_textColor: '',
+
   $dialog_container_bgColor: '',
   $dialog_description_color: '',
 

src/design-tokens/theme/dark-theme.css.ts

@@ -167,6 +167,9 @@ const colors: Colors = {
 
   $assets_table_container_bgColor_hover: darkColorScheme.$primary_mid_grey,
 
+  $assets_table_badge_bgColor: '#0000FE',
+  $assets_table_badge_textColor: lightColorScheme.$primary_white,
+
   $dialog_container_bgColor: darkColorScheme.$primary_light_black,
   $dialog_description_color: darkColorScheme.$primary_light_grey,
 

src/design-tokens/theme/light-theme.css.ts

@@ -180,6 +180,9 @@ const colors: Colors = {
 
   $assets_table_container_bgColor_hover: lightColorScheme.$primary_light_grey,
 
+  $assets_table_badge_bgColor: '#0000FE',
+  $assets_table_badge_textColor: lightColorScheme.$primary_white,
+
   $dialog_container_bgColor: lightColorScheme.$primary_white,
   $dialog_description_color: lightColorScheme.$primary_black,