From e424a0fb88a9fa1075bcf595a12b180ad03fca8a Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 10 Oct 2024 13:41:07 +0200
Subject: [PATCH] feat: improve simple asset input [LW-9231]

---
 .../asset-input/amount-input.component.tsx      |  4 +++-
 src/design-system/asset-input/index.ts          |  2 +-
 .../simple-asset-input.component.tsx            |  3 +++
 .../bundle-input/bundle-input.component.tsx     | 17 ++++++-----------
 src/design-system/index.ts                      |  2 +-
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/design-system/asset-input/amount-input.component.tsx b/src/design-system/asset-input/amount-input.component.tsx
index 3a898af..f0c5826 100644
--- a/src/design-system/asset-input/amount-input.component.tsx
+++ b/src/design-system/asset-input/amount-input.component.tsx
@@ -10,6 +10,7 @@ interface Props {
   onChange?: (value: string) => void;
   value?: string;
   id: string;
+  testId?: string;
 }
 
 export const AmountInput = ({
@@ -17,6 +18,7 @@ export const AmountInput = ({
   onChange,
   value,
   id,
+  testId,
 }: Readonly<Props>): JSX.Element => {
   return (
     <Box className={cx.amountInputSizer} data-value={value}>
@@ -26,7 +28,7 @@ export const AmountInput = ({
         size={1}
         onChange={({ target }): void => onChange?.(target.value)}
         placeholder="0.0"
-        data-testid={`asset-input-amount-input-${id}`}
+        data-testid={testId ?? `asset-input-amount-input-${id}`}
       />
     </Box>
   );
diff --git a/src/design-system/asset-input/index.ts b/src/design-system/asset-input/index.ts
index 6a30b10..280cba5 100644
--- a/src/design-system/asset-input/index.ts
+++ b/src/design-system/asset-input/index.ts
@@ -1,3 +1,3 @@
 export { AssetInput } from './asset-input.component';
 export { SimpleAssetInput } from './simple-asset-input.component';
-export * as Data from './asset-input.data';
+export * from './asset-input.data';
diff --git a/src/design-system/asset-input/simple-asset-input.component.tsx b/src/design-system/asset-input/simple-asset-input.component.tsx
index a39e80d..2bedfe3 100644
--- a/src/design-system/asset-input/simple-asset-input.component.tsx
+++ b/src/design-system/asset-input/simple-asset-input.component.tsx
@@ -12,12 +12,14 @@ interface Props {
   state: AssetState<Asset>;
   balanceLabel: string;
   onAmountChange?: (asset: Readonly<Asset>, amount: string) => void;
+  testId?: string;
 }
 
 export const SimpleAssetInput = ({
   state,
   balanceLabel,
   onAmountChange,
+  testId,
 }: Readonly<Props>): JSX.Element => (
   <div className={cx.root}>
     <Box className={cx.amountBox}>
@@ -28,6 +30,7 @@ export const SimpleAssetInput = ({
         onChange={(value): void => {
           onAmountChange?.(state.asset, value);
         }}
+        testId={testId}
       />
     </Box>
     <Box className={cx.balance}>
diff --git a/src/design-system/bundle-input/bundle-input.component.tsx b/src/design-system/bundle-input/bundle-input.component.tsx
index b694956..56220dd 100644
--- a/src/design-system/bundle-input/bundle-input.component.tsx
+++ b/src/design-system/bundle-input/bundle-input.component.tsx
@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
 
 import PlusSmall from '@icons/PlusSmallComponent';
 
-import { AssetInput } from '../asset-input';
+import { AssetInput, AssetState, AssetWithFiat } from '../asset-input';
 import { Box } from '../box';
 import * as ControlButtons from '../control-buttons';
 import { Divider } from '../divider';
@@ -11,18 +11,13 @@ import { Divider } from '../divider';
 import * as cx from './bundle-input.css';
 import { RemoveButton } from './remove-button.component';
 
-import type { Data } from '../asset-input';
-
 export type Props = PropsWithChildren<{
-  state?: Data.AssetState[];
+  state?: AssetState[];
   onAddAsset?: () => void;
-  onRemoveAsset?: (asset: Readonly<Data.AssetWithFiat>) => void;
-  onAmountChange?: (
-    asset: Readonly<Data.AssetWithFiat>,
-    amount: string,
-  ) => void;
-  onTickerClick?: (asset: Readonly<Data.AssetWithFiat>) => void;
-  onMaxClick?: (asset: Readonly<Data.AssetWithFiat>) => void;
+  onRemoveAsset?: (asset: Readonly<AssetWithFiat>) => void;
+  onAmountChange?: (asset: Readonly<AssetWithFiat>, amount: string) => void;
+  onTickerClick?: (asset: Readonly<AssetWithFiat>) => void;
+  onMaxClick?: (asset: Readonly<AssetWithFiat>) => void;
 }>;
 
 export const BundleInput = ({
diff --git a/src/design-system/index.ts b/src/design-system/index.ts
index 198ecd1..a2d0826 100644
--- a/src/design-system/index.ts
+++ b/src/design-system/index.ts
@@ -6,7 +6,7 @@ export { Divider } from './divider';
 export { Flex } from './flex';
 export { Grid, Cell } from './grid';
 export { Text } from './text';
-export { AssetInput, SimpleAssetInput } from './asset-input';
+export * from './asset-input';
 export { BundleInput } from './bundle-input';
 export * as SubNavigation from './sub-navigation';
 export * as NavigationButton from './navigation-buttons';