Revert "Fix: update swap to match SQS return (osmosis-labs#2991)" (os…

…mosis-labs#2997) (osmosis-labs#2998)
onezoomin · Mar 26, 2024 · 6d86dba · 6d86dba
1 parent 42d34ea
commit 6d86dba
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 77 deletions.
diff --git a/packages/pools/src/router/types.ts b/packages/pools/src/router/types.ts
@@ -62,7 +62,7 @@ export type SplitTokenInQuote = Quote & {
   /** In amount after fees paid are subtracted. */
   tokenInFeeAmount?: Int;
   swapFee?: Dec;
-  inBaseOutQuoteSpotPrice?: Dec;
+  inOutSpotPrice?: Dec;
 };
 
 export type Logger = {

diff --git a/packages/web/.gitignore b/packages/web/.gitignore
@@ -46,4 +46,4 @@ generated
 
 robots.txt
 sitemap-*.xml
-sitemap.xml
+sitemap.xml
diff --git a/packages/web/components/swap-tool/index.tsx b/packages/web/components/swap-tool/index.tsx
@@ -153,13 +153,6 @@ export const SwapTool: FunctionComponent<SwapToolProps> = observer(
     // to & from box switch animation
     const [isHoveringSwitchButton, setHoveringSwitchButton] = useState(false);
 
-    // true if the spot price from quote result is available
-    const isSwapAssetsSpotPriceAvailable =
-      swapState &&
-      !swapState.isQuoteLoading &&
-      swapState.quote &&
-      swapState.quote.inBaseOutQuoteSpotPrice;
-
     // user action
     const sendSwapTx = () => {
       // prompt to select wallet insteaad of swapping
@@ -658,7 +651,7 @@ export const SwapTool: FunctionComponent<SwapToolProps> = observer(
               isLoaded={
                 Boolean(swapState.toAsset) &&
                 Boolean(swapState.fromAsset) &&
-                !swapState.isQuoteLoading
+                !swapState.isSpotPriceQuoteLoading
               }
             >
               {/* TODO - move this custom button to our own button component */}
@@ -674,45 +667,46 @@ export const SwapTool: FunctionComponent<SwapToolProps> = observer(
                     setShowEstimateDetails((show) => !show);
                 }}
               >
-                {swapState.toAsset && isSwapAssetsSpotPriceAvailable && (
-                  <div>
-                    <span
-                      className={classNames("subtitle2 transition-opacity", {
-                        "text-osmoverse-600": !isQuoteDetailRelevant,
-                        "opacity-50":
-                          swapState.isQuoteLoading ||
-                          swapState.inAmountInput.isTyping,
-                      })}
-                    >
-                      1{" "}
-                      <span title={swapState.fromAsset?.coinDenom}>
-                        {ellipsisText(
-                          swapState.fromAsset?.coinDenom ?? "",
-                          isMobile ? 11 : 20
-                        )}
-                      </span>{" "}
-                      {`≈ ${formatPretty(
-                        new CoinPretty(
-                          swapState.toAsset,
-                          // asserting quote and inBaseOutQuoteSpotPrice is acceptable
-                          // as this is guarded by a isSwapAssetsSpotPriceAvailable check
-                          // that checks for quote and inBaseOutQuoteSpotPrice being available
-                          swapState.quote!.inBaseOutQuoteSpotPrice!.mul(
-                            DecUtils.getTenExponentN(
-                              swapState.fromAsset.coinDecimals
-                            )
-                          )
-                        ),
-                        {
-                          maxDecimals: Math.min(
-                            swapState.toAsset.coinDecimals,
-                            8
-                          ),
-                        }
-                      )}`}
-                    </span>
-                  </div>
-                )}
+                <span
+                  className={classNames("subtitle2 transition-opacity", {
+                    "text-osmoverse-600": !isQuoteDetailRelevant,
+                    "opacity-50":
+                      swapState.isQuoteLoading ||
+                      swapState.inAmountInput.isTyping,
+                  })}
+                >
+                  1{" "}
+                  <span title={swapState.fromAsset?.coinDenom}>
+                    {ellipsisText(
+                      swapState.fromAsset?.coinDenom ?? "",
+                      isMobile ? 11 : 20
+                    )}
+                  </span>{" "}
+                  {`≈ ${
+                    swapState.toAsset
+                      ? formatPretty(
+                          (swapState.quote?.inOutSpotPrice
+                            ? new CoinPretty(
+                                swapState.toAsset,
+                                swapState.quote.inOutSpotPrice.mul(
+                                  DecUtils.getTenExponentN(
+                                    swapState.toAsset.coinDecimals
+                                  )
+                                )
+                              )
+                            : null) ??
+                            swapState.spotPriceQuote?.amount ??
+                            new Dec(0),
+                          {
+                            maxDecimals: Math.min(
+                              swapState.toAsset.coinDecimals,
+                              8
+                            ),
+                          }
+                        )
+                      : "0"
+                  }`}
+                </span>
                 <div
                   className={classNames(
                     "flex items-center gap-2 transition-opacity",
@@ -728,21 +722,16 @@ export const SwapTool: FunctionComponent<SwapToolProps> = observer(
                       showPriceImpactWarning ? "opacity-100" : "opacity-0"
                     )}
                   />
-                  {
-                    // if unavailalble, hide the icon
-                    isSwapAssetsSpotPriceAvailable && (
-                      <Icon
-                        id="chevron-down"
-                        height={isMobile ? 14 : 18}
-                        width={isMobile ? 14 : 18}
-                        className={classNames(
-                          "text-osmoverse-400 transition-all",
-                          showQuoteDetails ? "rotate-180" : "rotate-0",
-                          isQuoteDetailRelevant ? "opacity-100" : "opacity-0"
-                        )}
-                      />
-                    )
-                  }
+                  <Icon
+                    id="chevron-down"
+                    height={isMobile ? 14 : 18}
+                    width={isMobile ? 14 : 18}
+                    className={classNames(
+                      "text-osmoverse-400 transition-all",
+                      showQuoteDetails ? "rotate-180" : "rotate-0",
+                      isQuoteDetailRelevant ? "opacity-100" : "opacity-0"
+                    )}
+                  />
                 </div>
               </button>
               <div

diff --git a/packages/web/hooks/use-swap.ts b/packages/web/hooks/use-swap.ts
@@ -35,6 +35,7 @@ import { useAmountInput } from "./input/use-amount-input";
 import { useBalances } from "./queries/cosmos/use-balances";
 import { useDebouncedState } from "./use-debounced-state";
 import { useFeatureFlags } from "./use-feature-flags";
+import { usePreviousWhen } from "./use-previous-when";
 import { useWalletSelect } from "./wallet-select";
 import { useQueryParamState } from "./window/use-query-param-state";
 
@@ -107,6 +108,24 @@ export function useSwap({
    *  Work around this by checking if the query is enabled and if the query is loading to be considered loading. */
   const isQuoteLoading = isQuoteLoading_ && canLoadQuote;
 
+  const {
+    data: spotPriceQuote,
+    isLoading: isSpotPriceQuoteLoading,
+    error: spotPriceQuoteError,
+  } = useQueryRouterBestQuote(
+    {
+      tokenInDenom: swapAssets.fromAsset?.coinMinimalDenom ?? "",
+      tokenInAmount: DecUtils.getTenExponentN(
+        swapAssets.fromAsset?.coinDecimals ?? 0
+      )
+        .truncate()
+        .toString(),
+      tokenOutDenom: swapAssets.toAsset?.coinMinimalDenom ?? "",
+      forcePoolId: forceSwapInPoolId,
+    },
+    isToFromAssets && !Boolean(quote?.inOutSpotPrice)
+  );
+
   /** Collate errors coming first from user input and then tRPC and serialize accordingly. */
   const precedentError:
     | NoRouteError
@@ -115,13 +134,29 @@ export function useSwap({
     | undefined = useMemo(() => {
     let error = quoteError;
 
+    // only show spot price error if there's no quote
+    if (
+      (quote &&
+        !quote.inOutSpotPrice &&
+        !quote.amount.toDec().isPositive() &&
+        !error) ||
+      (!quote && spotPriceQuoteError)
+    )
+      error = spotPriceQuoteError;
+
     const errorFromTrpc = makeRouterErrorFromTrpcError(error)?.error;
     if (errorFromTrpc) return errorFromTrpc;
 
     // prioritize router errors over user input errors
     if (!inAmountInput.isEmpty && inAmountInput.error)
       return inAmountInput.error;
-  }, [quoteError, inAmountInput.error, inAmountInput.isEmpty]);
+  }, [
+    quoteError,
+    quote,
+    spotPriceQuoteError,
+    inAmountInput.error,
+    inAmountInput.isEmpty,
+  ]);
 
   const getSwapTxParameters = useCallback(
     ({
@@ -350,19 +385,37 @@ export function useSwap({
     ]
   );
 
+  const positivePrevQuote = usePreviousWhen(
+    quote,
+    useCallback(
+      () => Boolean(quote?.amount.toDec().isPositive()) && !quoteError,
+      [quote, quoteError]
+    )
+  );
+
   return {
     ...swapAssets,
     inAmountInput,
-    quote,
+    quote:
+      isQuoteLoading || inAmountInput.isTyping
+        ? positivePrevQuote
+        : !Boolean(quoteError)
+        ? quote
+        : undefined,
     totalFee: sum([
       quote?.tokenInFeeAmountFiatValue?.toDec() ?? new Dec(0),
       networkFee?.gasUsdValueToPay?.toDec() ?? new Dec(0),
     ]),
     networkFee,
     isLoadingNetworkFee,
     error: precedentError,
+    spotPriceQuote,
+    isSpotPriceQuoteLoading,
+    spotPriceQuoteError,
     isQuoteLoading,
-    isLoading: isQuoteLoading,
+    /** Spot price or user input quote. */
+    isAnyQuoteLoading: isQuoteLoading || isSpotPriceQuoteLoading,
+    isLoading: isQuoteLoading || isSpotPriceQuoteLoading,
     sendTradeTokenInTx,
   };
 }
@@ -560,7 +613,7 @@ function useSwapAsset<TAsset extends Asset>(
       asset.coinDenom === minDenomOrSymbol ||
       asset.coinMinimalDenom === minDenomOrSymbol
   );
-
+  !existingAsset;
   const asset = useMemo(() => {
     if (existingAsset) return existingAsset;
 
@@ -570,19 +623,13 @@ function useSwapAsset<TAsset extends Asset>(
         (asset.symbol === minDenomOrSymbol ||
           asset.coinMinimalDenom === minDenomOrSymbol)
     );
-    if (!asset) {
-      console.warn(
-        "useSwap: asset not found for in/out swap:",
-        minDenomOrSymbol
-      );
-      return;
-    }
+    if (!asset) return;
 
     return makeMinimalAsset(asset);
   }, [minDenomOrSymbol, existingAsset]);
 
   return {
-    asset: asset as TAsset,
+    asset: existingAsset ?? (asset as TAsset),
   };
 }
 

diff --git a/packages/web/integrations/sidecar/router.ts b/packages/web/integrations/sidecar/router.ts
@@ -53,7 +53,7 @@ export class OsmosisSidecarRemoteRouter implements TokenOutGivenInRouter {
         swapFee,
         priceImpactTokenOut: priceImpact,
         tokenInFeeAmount: tokenIn.amount.toDec().mul(swapFee).truncate(),
-        inBaseOutQuoteSpotPrice: new Dec(in_base_out_quote_spot_price),
+        inOutSpotPrice: new Dec(in_base_out_quote_spot_price),
         split: routes.map(({ pools, in_amount }) => ({
           initialAmount: new Int(in_amount),
           pools: pools.map(({ id, spread_factor, type, code_id }) => ({