Merge pull request #108 from input-output-hk/feat/lw-12215-selected-tocket-icon

feat: [lw-12215] add asset icon into asset input

Author: vetalcore

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

@@ -28,6 +28,7 @@ export const AssetInput = ({
     <Box className={cx.assetNameBox}>
       <TickerButton
         id={state.asset.id}
+        icon={state.asset.icon}
         name={state.asset.ticker}
         onClick={(): void => {
           onTickerClick?.(state.asset);

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

@@ -3,6 +3,7 @@ export interface Asset {
   ticker: string;
   balance: string;
   amount: string;
+  icon?: string;
 }
 
 export interface AssetWithFiat extends Asset {

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

@@ -1,10 +1,13 @@
+import cardanoImage from '../../assets/images/cardano-blue-bg.png';
+
 import type { AssetWithFiat, AssetState } from './asset-input.data';
 
 export const asset: AssetWithFiat = {
   balance: String(10_000_000),
   amount: '',
   id: '',
   ticker: 'Token',
+  icon: cardanoImage,
   fiat: {
     value: '0',
     ticker: 'USD',

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

@@ -3,31 +3,37 @@ import React from 'react';
 import ChevronRight from '@icons/ChevronRightComponent';
 
 import { Flex } from '../flex';
+import { Image } from '../profile-picture';
 import { Text } from '../text';
 
 import * as cx from './ticker-button.css';
 
 interface Props {
   name: string;
   id: string;
+  icon?: string;
   onClick?: () => void;
 }
 
 export const TickerButton = ({
   name,
   id,
+  icon,
   onClick,
 }: Readonly<Props>): JSX.Element => (
   <button
     className={cx.button}
     onClick={onClick}
     data-testid={`asset-input-ticker-button-${id}`}
   >
-    <Text.SubHeading weight="$bold">
-      <Flex justifyContent="center" alignItems="center">
-        {name}
-        <ChevronRight className={cx.chevronIcon} />
-      </Flex>
-    </Text.SubHeading>
+    <Flex alignItems="center" gap="$16">
+      {icon && <Image imageSrc={icon} alt="Token" />}
+      <Text.SubHeading weight="$bold">
+        <Flex justifyContent="center" alignItems="center">
+          <span>{name}</span>
+          <ChevronRight className={cx.chevronIcon} />
+        </Flex>
+      </Text.SubHeading>
+    </Flex>
   </button>
 );

src/design-system/asset-input/ticker-button.css.ts

@@ -9,7 +9,7 @@ export const button = style({
 });
 
 export const chevronIcon = sx({
-  w: '$16',
-  h: '$16',
+  w: '$auto',
+  h: '$auto',
   marginLeft: '$8',
 });