feat: add user guided states on swap (#188)

* feat: add use guided states on swap

* fix: consider any false value and no amount

* fix: has balance check

packages/app/package.json

@@ -34,7 +34,6 @@
     "@tailwindcss/typography": "^0.5.2",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",
-    "decimal.js": "^10.3.1",
     "ethers": "^5.6.5",
     "fuels": "0.0.0-master-d5e02003",
     "graphql-request": "^4.2.0",

packages/app/src/config.ts

@@ -19,3 +19,5 @@ export const SLIPPAGE_TOLERANCE = 0.005;
 // Max value supported
 // eslint-disable-next-line @typescript-eslint/no-loss-of-precision
 export const MAX_U64_VALUE = 0xffff_ffff_ffff_ffff;
+// Max value from Sway Contract
+export const MAX_U64_STRING = '18446744073709551615';

packages/app/src/lib/utils.ts

@@ -1,5 +1,8 @@
+import type { BigNumberish } from 'fuels';
 import urljoin from 'url-join';
 
+import { MAX_U64_STRING } from '~/config';
+
 const { PUBLIC_URL } = process.env;
 
 export const objectId = (value: string) => ({
@@ -10,3 +13,5 @@ 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 isSwayInfinity = (value: BigNumberish | null) => value?.toString() === MAX_U64_STRING;

packages/app/src/pages/SwapPage/PricePerToken.tsx

@@ -1,4 +1,5 @@
-import { Decimal } from "decimal.js";
+import { BigNumber } from "ethers";
+import { formatUnits } from "ethers/lib/utils";
 import { useAtomValue } from "jotai";
 import { useState } from "react";
 import { BiRefresh } from "react-icons/bi";
@@ -7,26 +8,24 @@ import { swapIsTypingAtom } from "./jotai";
 import { ActiveInput } from "./types";
 
 import { Button } from "~/components/Button";
+import { DECIMAL_UNITS, ONE_ASSET } from "~/config";
 
 const style = {
   wrapper: `flex items-center gap-3 my-4 px-2 text-sm text-gray-400`,
 };
 
 function getPricePerToken(
-  direction: ActiveInput,
+  direction?: ActiveInput,
   fromAmount?: bigint | null,
   toAmount?: bigint | null
 ) {
-  // TODO: remove decimal.js and use fuels instead
-  // we decided to use decimal.js because of we're getting some issus
-  // when trying to divide between bigints
-  if (fromAmount && toAmount) {
-    const from = new Decimal(fromAmount.toString());
-    const to = new Decimal(toAmount.toString());
-    const price = direction === ActiveInput.from ? from.div(to) : to.div(from);
-    return price.toFixed(6);
-  }
-  return "";
+  if (!toAmount || !fromAmount) return "";
+  const ratio =
+    direction === ActiveInput.from
+      ? BigNumber.from(fromAmount || 0).div(toAmount || 0)
+      : BigNumber.from(toAmount || 0).div(fromAmount || 0);
+  const price = ratio.mul(ONE_ASSET);
+  return formatUnits(price, DECIMAL_UNITS);
 }
 
 type PricePerTokenProps = {
@@ -42,7 +41,7 @@ export function PricePerToken({
   toCoin,
   toAmount,
 }: PricePerTokenProps) {
-  const [direction, setDirection] = useState<ActiveInput>(ActiveInput.from);
+  const [direction, setDirection] = useState<ActiveInput>(ActiveInput.to);
   const isTyping = useAtomValue(swapIsTypingAtom);
 
   const pricePerToken = getPricePerToken(direction, fromAmount, toAmount);

packages/app/src/pages/SwapPage/SwapComponent.tsx

@@ -78,10 +78,10 @@ export function SwapComponent({
   }, []);
 
   useEffect(() => {
-    const amount =
-      activeInput.current === ActiveInput.from
-        ? fromInput.amount
-        : toInput.amount;
+    const currentInput =
+      activeInput.current === ActiveInput.from ? fromInput : toInput;
+    const amount = currentInput.amount;
+    const coin = activeInput.current === ActiveInput.from ? coinFrom : coinTo;
 
     // This is used to reset preview amount when set first input value for null
     if (activeInput.current === ActiveInput.from && amount === null) {
@@ -101,7 +101,9 @@ export function SwapComponent({
       from: coinFrom.assetId,
       to: coinTo.assetId,
       amount,
+      coin,
       direction: activeInput.current,
+      hasBalance: fromInput.hasEnoughBalance,
     });
   }, [fromInput.amount, toInput.amount, coinFrom, coinTo]);
 

packages/app/src/pages/SwapPage/index.tsx

@@ -1,36 +1,75 @@
-import type { CoinQuantity } from "fuels";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { MdSwapCalls } from "react-icons/md";
 import { useMutation, useQuery } from "react-query";
-import { useNavigate } from "react-router-dom";
 
 import { SwapComponent } from "./SwapComponent";
 import { queryPreviewAmount, swapTokens } from "./queries";
 import type { SwapState } from "./types";
-import { ActiveInput } from "./types";
 
 import { Button } from "~/components/Button";
 import { Card } from "~/components/Card";
 import { useContract } from "~/context/AppContext";
-import { useBalances } from "~/hooks/useBalances";
 import useDebounce from "~/hooks/useDebounce";
-import { sleep } from "~/lib/utils";
-import { Pages } from "~/types/pages";
+import { isSwayInfinity, sleep } from "~/lib/utils";
 
-const getBalanceAsset = (
-  balances: CoinQuantity[] | undefined,
-  assetId: string
-) => balances?.find((item) => item.assetId === assetId);
+type StateParams = {
+  swapState: SwapState | null;
+  previewAmount: bigint | null;
+  hasLiquidity: boolean;
+};
+
+enum ValidationStateEnum {
+  SelectToken = 0,
+  EnterAmount = 1,
+  InsufficientBalance = 2,
+  InsufficientLiquidity = 3,
+  Swap = 4,
+}
+
+const getValidationText = (
+  state: ValidationStateEnum,
+  swapState: SwapState | null
+) => {
+  switch (state) {
+    case ValidationStateEnum.SelectToken:
+      return "Select token";
+    case ValidationStateEnum.EnterAmount:
+      return "Enter amount";
+    case ValidationStateEnum.InsufficientBalance:
+      return `Insufficient ${swapState?.coin.symbol || ""} balance`;
+    case ValidationStateEnum.InsufficientLiquidity:
+      return "Insufficient liquidity";
+    default:
+      return "Swap";
+  }
+};
+
+const getValidationState = ({
+  swapState,
+  previewAmount,
+  hasLiquidity,
+}: StateParams): ValidationStateEnum => {
+  if (!swapState?.to || !swapState?.from) {
+    return ValidationStateEnum.SelectToken;
+  }
+  if (!swapState?.amount) {
+    return ValidationStateEnum.EnterAmount;
+  }
+  if (!swapState.hasBalance) {
+    return ValidationStateEnum.InsufficientBalance;
+  }
+  if (!hasLiquidity || isSwayInfinity(previewAmount))
+    return ValidationStateEnum.InsufficientLiquidity;
+  return ValidationStateEnum.Swap;
+};
 
 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(
     [
@@ -66,27 +105,18 @@ export default function SwapPage() {
     }
   );
 
-  const hasNotBalance =
-    !swapState ||
-    !swapState.amount ||
-    !getBalanceAsset(
-      balances,
-      swapState.direction === ActiveInput.to ? swapState.to : swapState.from
-    );
-
-  const shouldDisableButton =
-    isLoading || isSwaping || !hasLiquidity || !previewAmount || hasNotBalance;
-
-  function getButtonText() {
-    if (!hasLiquidity) return "Insufficient liquidity";
-    if (isSwaping) return "Loading...";
-    return "Swap";
-  }
-
   function handleSwap(state: SwapState) {
     setSwapState(state);
   }
 
+  const validationState = getValidationState({
+    swapState,
+    previewAmount,
+    hasLiquidity,
+  });
+  const shouldDisableSwap =
+    isLoading || validationState !== ValidationStateEnum.Swap;
+
   return (
     <Card className="min-w-[450px]">
       <Card.Title>
@@ -100,12 +130,13 @@ export default function SwapPage() {
       />
       <Button
         isFull
+        isLoading={isSwaping}
         size="lg"
         variant="primary"
-        isDisabled={shouldDisableButton}
+        isDisabled={shouldDisableSwap}
         onPress={() => swap()}
       >
-        {getButtonText()}
+        {getValidationText(validationState, swapState)}
       </Button>
     </Card>
   );

packages/app/src/pages/SwapPage/types.ts

@@ -1,3 +1,5 @@
+import type { Coin } from '~/types';
+
 export enum ActiveInput {
   'from' = 'from',
   'to' = 'to',
@@ -7,5 +9,7 @@ export type SwapState = {
   from: string;
   to: string;
   direction: ActiveInput;
+  coin: Coin;
   amount: bigint | null;
+  hasBalance: boolean;
 };