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

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

Author: vetalcore

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

@@ -1,9 +1,11 @@
+import React from 'react';
+
 export interface Asset {
   id: string;
   ticker: string;
   balance: string;
   amount: string;
-  icon?: string;
+  icon?: string | React.ReactNode;
 }
 
 export interface AssetWithFiat extends Asset {

src/design-system/asset-input/asset-input.fixtures.ts renamed to src/design-system/asset-input/asset-input.fixtures.tsx

@@ -1,4 +1,7 @@
+import React from 'react';
+
 import cardanoImage from '../../assets/images/cardano-blue-bg.png';
+import { Image } from '../profile-picture';
 
 import type { AssetWithFiat, AssetState } from './asset-input.data';
 
@@ -7,7 +10,7 @@ export const asset: AssetWithFiat = {
   amount: '',
   id: '',
   ticker: 'Token',
-  icon: cardanoImage,
+  icon: <Image imageSrc={cardanoImage} />,
   fiat: {
     value: '0',
     ticker: 'USD',

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

@@ -11,7 +11,7 @@ import * as cx from './ticker-button.css';
 interface Props {
   name: string;
   id: string;
-  icon?: string;
+  icon?: string | React.ReactNode;
   onClick?: () => void;
 }
 
@@ -20,20 +20,24 @@ export const TickerButton = ({
   id,
   icon,
   onClick,
-}: Readonly<Props>): JSX.Element => (
-  <button
-    className={cx.button}
-    onClick={onClick}
-    data-testid={`asset-input-ticker-button-${id}`}
-  >
-    <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>
-);
+}: Readonly<Props>): JSX.Element => {
+  const isIconString = typeof icon === 'string';
+
+  return (
+    <button
+      className={cx.button}
+      onClick={onClick}
+      data-testid={`asset-input-ticker-button-${id}`}
+    >
+      <Flex alignItems="center" gap="$16">
+        {isIconString ? <Image imageSrc={icon} alt="Token" /> : icon}
+        <Text.SubHeading weight="$bold">
+          <Flex justifyContent="center" alignItems="center">
+            <span>{name}</span>
+            <ChevronRight className={cx.chevronIcon} />
+          </Flex>
+        </Text.SubHeading>
+      </Flex>
+    </button>
+  );
+};