Supply vaults

packages/ui/app/_components/dialogs/manage/Amount.tsx → packages/ui/app/_components/Amount.tsx

@@ -10,7 +10,8 @@ import {
 import { cn } from '@ui/lib/utils';
 import type { MarketData } from '@ui/types/TokensDataMap';
 
-import ResultHandler from '../../ResultHandler';
+import ResultHandler from './ResultHandler';
+import AmountInput from './AmountInput';
 
 interface IAmount {
   amount?: string;
@@ -27,62 +28,6 @@ interface IAmount {
   handleUtilization?: (val: number) => void;
 }
 
-const AmountInput = ({
-  mainText,
-  handleInput,
-  readonly,
-  amount,
-  max,
-  isLoading
-}: {
-  mainText?: string;
-  handleInput: (val?: string) => void;
-  readonly?: boolean;
-  amount?: string;
-  max?: string;
-  isLoading?: boolean;
-}) => {
-  const isDisabled = readonly || max === '0' || isLoading;
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    if (value === '') {
-      handleInput(undefined);
-      return;
-    }
-
-    const numValue = parseFloat(value);
-    const maxValue = parseFloat(max || '0');
-
-    if (numValue > maxValue) {
-      handleInput(max);
-      return;
-    }
-
-    handleInput(value);
-  };
-
-  return (
-    <div className="w-32">
-      <div className="text-xs text-white/50 mb-1">{mainText}</div>
-      <input
-        className={cn(
-          'w-full bg-transparent text-md border border-white/10 rounded px-2 py-1 focus:outline-none focus:border-white/20',
-          isDisabled && 'opacity-50 cursor-not-allowed'
-        )}
-        onChange={handleChange}
-        placeholder="0,00"
-        readOnly={isDisabled}
-        disabled={isDisabled}
-        type="number"
-        value={amount}
-        min="0"
-        max={max}
-      />
-    </div>
-  );
-};
-
 const AssetSelector = ({
   symbol,
   availableAssets,
@@ -231,7 +176,7 @@ const Amount = ({
       <div className="flex md:hidden flex-col w-full gap-4">
         <div className="flex justify-between items-end w-full">
           <AmountInput
-            mainText={mainText}
+            headerText={mainText}
             handleInput={handleInput}
             readonly={readonly}
             amount={amount}
@@ -258,7 +203,7 @@ const Amount = ({
       {/* Desktop Layout */}
       <div className="hidden md:flex items-center gap-8">
         <AmountInput
-          mainText={mainText}
+          headerText={mainText}
           handleInput={handleInput}
           readonly={readonly}
           amount={amount}

packages/ui/app/_components/AmountInput.tsx

@@ -0,0 +1,61 @@
+import { cn } from '@ui/lib/utils';
+
+const AmountInput = ({
+  headerText,
+  handleInput,
+  readonly,
+  amount,
+  max,
+  isLoading
+}: {
+  headerText?: string;
+  handleInput?: (val?: string) => void;
+  readonly?: boolean;
+  amount?: string;
+  max?: string;
+  isLoading?: boolean;
+}) => {
+  const isDisabled = readonly || max === '0' || isLoading || !handleInput;
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (!handleInput) return;
+
+    const value = e.target.value;
+    if (value === '') {
+      handleInput(undefined);
+      return;
+    }
+
+    const numValue = parseFloat(value);
+    const maxValue = max ? parseFloat(max) : 0;
+
+    if (numValue > maxValue) {
+      handleInput(max);
+      return;
+    }
+
+    handleInput(value);
+  }
+
+  return (
+    <div className="w-32">
+      <div className="text-xs text-white/50 mb-1">{headerText}</div>
+      <input
+        className={cn(
+          'w-full bg-transparent text-md border border-white/10 rounded px-2 py-1 focus:outline-none focus:border-white/20',
+          isDisabled && 'opacity-50 cursor-not-allowed'
+        )}
+        onChange={handleChange}
+        placeholder="0.0"
+        readOnly={isDisabled}
+        disabled={isDisabled}
+        type="number"
+        value={amount}
+        min="0"
+        max={max}
+      />
+    </div>
+  );
+};
+
+export default AmountInput;

packages/ui/app/_components/CommonTable.tsx

@@ -46,6 +46,11 @@ export const sortingFunctions = {
 
 type SortingType = keyof typeof sortingFunctions;
 
+export interface MarketCellProps {
+  row: Row<any>;
+  getValue: () => any;
+}
+
 export type EnhancedColumnDef<T> = Omit<
   ColumnDef<T, unknown>,
   'header' | 'sortingFn'