@rango-dev/widget-embedded 0.27.4-next.2 → 0.27.4-next.3

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AA6C5E,wBAAgB,eAAe,sBA8P9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AA6C5E,wBAAgB,eAAe,sBA6P9B"}

package/dist/pages/Routes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Routes.d.ts","sourceRoot":"","sources":["../../src/pages/Routes.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,wBAAgB,UAAU,sBAqDzB"}
+{"version":3,"file":"Routes.d.ts","sourceRoot":"","sources":["../../src/pages/Routes.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,wBAAgB,UAAU,sBAwDzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.27.4-next.2",
+  "version": "0.27.4-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -52,4 +52,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/hooks/useSwapInput.ts

@@ -1,6 +1,6 @@
 import type { Token } from 'rango-sdk';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
@@ -80,6 +80,7 @@ export function useSwapInput({
   const excludeLiquiditySources = useAppStore().excludeLiquiditySources();
 
   const [loading, setLoading] = useState(true);
+  const prevInputAmount = useRef(inputAmount);
   const userSlippage = customSlippage ?? slippage;
   const tokensValueInvalid = !fromToken || !toToken;
   const shouldSkipRequest =
@@ -174,9 +175,7 @@ export function useSwapInput({
 
   const debouncedFetch = useCallback(
     debounce((params: FetchQuoteParams) => {
-      if (!shouldSkipRequest) {
-        fetch(params);
-      }
+      fetch(params);
     }, DEBOUNCE_DELAY),
     [shouldSkipRequest]
   );
@@ -204,7 +203,14 @@ export function useSwapInput({
 
     resetQuote();
     resetState(true);
-    debouncedFetch({
+
+    let fetchQuotes = fetch;
+    if (prevInputAmount.current && prevInputAmount.current != inputAmount) {
+      fetchQuotes = debouncedFetch;
+    }
+    prevInputAmount.current = inputAmount;
+
+    fetchQuotes({
       inputAmount,
       fromToken,
       toToken,

package/src/hooks/useSyncStoresWithConfig.ts

@@ -16,6 +16,7 @@ export function useSyncStoresWithConfig() {
     setToToken,
     setToBlockchain,
     setFromBlockchain,
+    resetQuote,
     setFromToken,
     fromToken,
     toToken,
@@ -46,6 +47,7 @@ export function useSyncStoresWithConfig() {
 
   useEffect(() => {
     if (fetchMetaStatus === 'success') {
+      resetQuote();
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
       );
@@ -95,6 +97,7 @@ export function useSyncStoresWithConfig() {
 
   useEffect(() => {
     if (fetchMetaStatus === 'success') {
+      resetQuote();
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain
       );

package/src/pages/ConfirmSwapPage.tsx

@@ -17,7 +17,7 @@ import {
   WalletIcon,
 } from '@rango-dev/ui';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
 import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
@@ -72,7 +72,6 @@ export function ConfirmSwapPage() {
     quoteWarningsConfirmed,
   } = useQuoteStore();
   const navigate = useNavigate();
-  const location = useLocation();
   const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
 
   const showWalletsOnInit = !quoteWalletsConfirmed;
@@ -185,10 +184,10 @@ export function ConfirmSwapPage() {
   }, []);
 
   useLayoutEffect(() => {
-    if (!selectedQuote) {
+    if (!selectedQuote?.requestId) {
       navigate(`../${location.search}`);
     }
-  }, []);
+  }, [selectedQuote?.requestId]);
 
   const quoteWarning = confirmSwapResult.warnings?.quote ?? null;
   const quoteError = confirmSwapResult.error;

package/src/pages/Routes.tsx

@@ -15,7 +15,6 @@ import { useQuoteStore } from '../store/quote';
 export function RoutesPage() {
   const navigate = useNavigate();
   const navigateBack = useNavigateBack();
-
   const {
     selectedQuote,
     refetchQuote,
@@ -41,6 +40,7 @@ export function RoutesPage() {
       header={{
         onWallet: () => {
           navigate(wallets_url);
+          updateQuotePartialState('refetchQuote', true);
         },
         onBack: () => {
           updateQuotePartialState('refetchQuote', false);
@@ -52,7 +52,10 @@ export function RoutesPage() {
               !!selectedQuote || quoteError ? fetchQuote : undefined
             }
             hidden={['notifications', 'history']}
-            onClickSettings={() => navigate(settings_url)}
+            onClickSettings={() => {
+              navigate(settings_url);
+              updateQuotePartialState('refetchQuote', true);
+            }}
           />
         ),
       }}>