refac: add loading when calculating swap amount (#155)

* fix: reset preview amount if first input amount is null
* refac: add loading when calculating amount on swap
* chore: format

package.json

@@ -51,4 +51,4 @@
     "turbo": "^1.2.8",
     "typescript": "^4.6.4"
   }
-}
+}

packages/app/src/components/CoinInput.tsx

@@ -6,6 +6,7 @@ import NumberFormat from "react-number-format";
 
 import { Button } from "./Button";
 import { CoinSelector } from "./CoinSelector";
+import { Spinner } from "./Spinner";
 
 import { DECIMAL_UNITS } from "~/config";
 import { useBalances } from "~/hooks/useBalances";
@@ -45,6 +46,7 @@ type CoinInputParameters = UseCoinParams & {
   showBalance?: boolean;
   showMaxButton?: boolean;
   autoFocus?: boolean;
+  isLoading?: boolean;
   isAllowed?: (values: NumberFormatValues) => boolean;
   onChange?: (val: string) => void;
   setMaxBalance?: () => void;
@@ -149,6 +151,7 @@ export const CoinInput = forwardRef<HTMLInputElement, CoinInputParameters>(
       setMaxBalance,
       balance,
       autoFocus,
+      isLoading,
     },
     ref
   ) => {
@@ -163,24 +166,30 @@ export const CoinInput = forwardRef<HTMLInputElement, CoinInputParameters>(
 
     return (
       <div className={style.transferPropContainer}>
-        <NumberFormat
-          autoFocus={autoFocus}
-          getInputRef={ref}
-          allowNegative={false}
-          defaultValue={initialValue}
-          value={value}
-          displayType={displayType}
-          isAllowed={isAllowed}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            onChange?.(e.target.value);
-            setValue(e.target.value);
-          }}
-          decimalScale={DECIMAL_UNITS}
-          placeholder="0"
-          className={style.input}
-          thousandSeparator={false}
-          onInput={onInput}
-        />
+        {isLoading ? (
+          <div className="mt-3 ml-4">
+            <Spinner />
+          </div>
+        ) : (
+          <NumberFormat
+            autoFocus={autoFocus}
+            getInputRef={ref}
+            allowNegative={false}
+            defaultValue={initialValue}
+            value={value}
+            displayType={displayType}
+            isAllowed={isAllowed}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              onChange?.(e.target.value);
+              setValue(e.target.value);
+            }}
+            decimalScale={DECIMAL_UNITS}
+            placeholder="0"
+            className={style.input}
+            thousandSeparator={false}
+            onInput={onInput}
+          />
+        )}
         <div className={style.rightWrapper}>
           <CoinSelector
             value={coin}

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

@@ -16,11 +16,13 @@ const style = {
 type SwapComponentProps = {
   previewAmount?: bigint | null;
   onChange?: (swapState: SwapState) => void;
+  isLoading?: boolean;
 };
 
 export function SwapComponent({
-  previewAmount: previewValue,
   onChange,
+  isLoading,
+  previewAmount: previewValue,
 }: SwapComponentProps) {
   const [initialAmount, setInitialAmount] = useAtom(swapAmountAtom);
   const [initialActiveInput, setInitialActiveInput] =
@@ -76,6 +78,12 @@ export function SwapComponent({
     // Set current input
     setInitialActiveInput(activeInput?.current);
 
+    // This is used to reset preview amount when set first input value for null
+    if (amount === null) {
+      toInput.setAmount(null);
+      return;
+    }
+
     // Call on onChange
     onChange?.({
       from: coinFrom.assetId,
@@ -107,7 +115,11 @@ export function SwapComponent({
         <InvertButton onClick={handleInvertCoins} />
       </div>
       <div className="mb-4">
-        <CoinInput {...toInput.getInputProps()} coinSelectorDisabled={true} />
+        <CoinInput
+          {...toInput.getInputProps()}
+          coinSelectorDisabled={true}
+          isLoading={isLoading}
+        />
       </div>
     </>
   );

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

@@ -52,6 +52,7 @@ export default function SwapPage() {
       },
     }
   );
+
   const { mutate: swap, isLoading: isSwaping } = useMutation(
     async () => {
       if (!swapState) return;
@@ -73,22 +74,31 @@ export default function SwapPage() {
       balances,
       swapState.direction === ActiveInput.to ? swapState.to : swapState.from
     );
+
   const shouldDisableButton =
     isLoading || isSwaping || !hasLiquidity || !previewAmount || hasNotBalance;
 
-  const getButtonText = () => {
+  function getButtonText() {
     if (!hasLiquidity) return "Insufficient liquidity";
     if (isSwaping) return "Loading...";
     return "Swap";
-  };
+  }
+
+  function handleSwap(state: SwapState) {
+    setSwapState(state);
+  }
 
   return (
     <PageContent>
       <PageContent.Title>
         <MdSwapCalls className="text-primary-500" />
         Swap
       </PageContent.Title>
-      <SwapComponent previewAmount={previewAmount} onChange={setSwapState} />
+      <SwapComponent
+        previewAmount={previewAmount}
+        onChange={handleSwap}
+        isLoading={isLoading}
+      />
       <Button
         isFull
         size="lg"

pnpm-workspace.yaml

@@ -1,2 +1,2 @@
 packages:
-  - 'packages/*'
+  - "packages/*"