Pass balance through TokenField props

balancer · Aug 7, 2024 · 191399f · 191399f
1 parent bf4cfa7
commit 191399f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git a/packages/nextjs/app/cow/_components/PoolConfiguration.tsx b/packages/nextjs/app/cow/_components/PoolConfiguration.tsx
@@ -65,7 +65,6 @@ export const PoolConfiguration = () => {
   // If token has less than 18 decmials, 1e6 is the min amount allowed
   const sufficientAmount1 = token1?.decimals && token1.decimals < 18 ? token1RawAmount >= COW_MIN_AMOUNT : true;
   const sufficientAmount2 = token2?.decimals && token2.decimals < 18 ? token2RawAmount >= COW_MIN_AMOUNT : true;
-
   const sufficientBalances = balance1 > token1RawAmount && balance2 > token2RawAmount;
 
   const canProceedToCreate =
@@ -91,6 +90,7 @@ export const PoolConfiguration = () => {
             <div className="w-full flex flex-col gap-3">
               <TokenField
                 value={token1Amount}
+                balance={balance1}
                 sufficientAmount={sufficientAmount1}
                 selectedToken={token1}
                 setToken={selectedToken => {
@@ -105,6 +105,7 @@ export const PoolConfiguration = () => {
               />
               <TokenField
                 value={token2Amount}
+                balance={balance2}
                 sufficientAmount={sufficientAmount2}
                 selectedToken={token2}
                 setToken={selectedToken => {

diff --git a/packages/nextjs/components/common/TokenField.tsx b/packages/nextjs/components/common/TokenField.tsx
@@ -6,37 +6,40 @@ import { ChevronDownIcon, ExclamationTriangleIcon } from "@heroicons/react/24/ou
 import { WalletIcon } from "@heroicons/react/24/outline";
 import { TokenImage, TokenSelectModal } from "~~/components/common";
 import { type Token } from "~~/hooks/token";
-import { useFetchTokenPrices, useReadToken } from "~~/hooks/token";
+import { useFetchTokenPrices } from "~~/hooks/token";
 import { COW_MIN_AMOUNT, formatToHuman } from "~~/utils";
 
-export const TokenField = ({
-  value,
-  tokenOptions,
-  setToken,
-  selectedToken,
-  handleAmountChange,
-  isDisabled,
-  sufficientAmount,
-}: {
+interface TokenFieldProps {
+  value: string;
+  balance?: bigint;
+  selectedToken: Token | null;
   sufficientAmount?: boolean;
   isDisabled?: boolean;
-  value: string;
-  tokenOptions?: Token[] | undefined;
+  tokenOptions?: Token[];
   setToken?: (token: Token) => void;
-  selectedToken: Token | null;
   handleAmountChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const TokenField: React.FC<TokenFieldProps> = ({
+  value,
+  balance,
+  selectedToken,
+  sufficientAmount,
+  isDisabled,
+  tokenOptions,
+  setToken,
+  handleAmountChange,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { data: tokenPrices, isLoading, isError } = useFetchTokenPrices();
-  const { balance } = useReadToken(selectedToken?.address);
 
   let price = 0;
   if (tokenPrices && selectedToken?.address) {
     price = tokenPrices.find(token => token.address.toLowerCase() === selectedToken?.address.toLowerCase())?.price ?? 0;
   }
   if (price > 0) price = price * Number(value);
 
-  const amountGreaterThanBalance = parseUnits(value, selectedToken?.decimals || 0) > balance;
+  const amountGreaterThanBalance = balance !== undefined && parseUnits(value, selectedToken?.decimals || 0) > balance;
 
   return (
     <>
@@ -62,7 +65,7 @@ export const TokenField = ({
               {!isDisabled && <ChevronDownIcon className="w-4 h-4 mt-0.5" />}
             </button>
 
-            {selectedToken && (
+            {selectedToken && balance !== undefined && (
               <div className={`flex items-center gap-2 text-neutral-400`}>
                 <div className="flex items-center gap-1">
                   <WalletIcon className="h-4 w-4 mt-0.5" /> {formatToHuman(balance, selectedToken?.decimals || 0)}