Check balance amount before swap (#116)

* fix: enable amount to be null on coininput

* chore: add value default to path

* fix: check balance before swap

client/src/components/CoinInput.tsx

@@ -62,9 +62,9 @@ const parseValueBigInt = (value: string) => {
 const formatValue = (amount: bigint | null | undefined) => {
   if (amount != null) {
     return formatUnits(amount, DECIMAL_UNITS);
-  } else if (!amount) {
-    return "";
   }
+  // If amount is null return empty string
+  return "";
 };
 
 export function useCoinInput({
@@ -82,7 +82,8 @@ export function useCoinInput({
   const coinBalance = balances?.find((item) => item.assetId === coin?.assetId);
 
   useEffect(() => {
-    if (initialAmount != null) setAmount(initialAmount);
+    // Enable value initialAmount to be null
+    if (initialAmount !== undefined) setAmount(initialAmount);
   }, [initialAmount]);
 
   // TODO: consider real gas fee, replacing GAS_FEE variable.
@@ -150,7 +151,8 @@ export const CoinInput = forwardRef<HTMLInputElement, CoinInputParameters>(
     const [value, setValue] = useState<string | undefined>(initialValue);
 
     useEffect(() => {
-      if (initialValue) {
+      // Enable to clean field using empty string
+      if (initialValue != null) {
         setValue(initialValue);
       }
     }, [initialValue]);

client/src/lib/utils.ts

@@ -8,4 +8,4 @@ export const objectId = (value: string) => ({
 
 export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-export const relativeUrl = (path: string) => urljoin(PUBLIC_URL, path);
+export const relativeUrl = (path: string) => urljoin(PUBLIC_URL || '/', path);

client/src/pages/SwapPage/index.tsx

@@ -13,14 +13,21 @@ import { sleep } from "src/lib/utils";
 
 import { queryPreviewAmount, swapTokens } from "./queries";
 import { SwapComponent } from "./SwapComponent";
-import { SwapState } from "./types";
+import { ActiveInput, SwapState } from "./types";
+import { useBalances } from "src/hooks/useBalances";
+import { CoinQuantity } from "fuels";
+
+const getBalanceAsset = (balances: CoinQuantity[] | undefined, assetId: string) => {
+  return balances?.find((item) => item.assetId === assetId);
+}
 
 export default function SwapPage() {
   const contract = useContract()!;
   const [previewAmount, setPreviewAmount] = useState<bigint | null>(null);
   const [swapState, setSwapState] = useState<SwapState | null>(null);
   const [hasLiquidity, setHasLiquidity] = useState(true);
   const debouncedState = useDebounce(swapState);
+  const { data: balances } = useBalances();
   const navigate = useNavigate();
 
   const { isLoading } = useQuery(
@@ -32,7 +39,7 @@ export default function SwapPage() {
       debouncedState?.to,
     ],
     async () => {
-      if (!debouncedState) return null;
+      if (!debouncedState?.amount) return null;
       return queryPreviewAmount(contract, debouncedState);
     },
     {
@@ -57,13 +64,17 @@ export default function SwapPage() {
     }
   );
 
+  const hasNotBalance = (
+    !swapState ||
+    !swapState.amount ||
+    !getBalanceAsset(balances, swapState.direction === ActiveInput.to ? swapState.to : swapState.from)
+  );
   const shouldDisableButton =
     isLoading ||
     isSwaping ||
-    !swapState ||
     !hasLiquidity ||
     !previewAmount ||
-    !swapState.amount;
+    hasNotBalance;
 
   const getButtonText = () => {
     if (!hasLiquidity) return "Insufficient liquidity";