@rango-dev/widget-embedded 0.1.11-next.10 → 0.1.11-next.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.11-next.10",
+  "version": "0.1.11-next.11",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/TokenInfo.tsx

@@ -132,6 +132,7 @@ export function TokenInfo(props: PropTypes) {
   const bestRoute = useBestRouteStore.use.bestRoute();
   const inputAmount = useBestRouteStore.use.inputAmount();
   const balances = useWalletsStore.use.balances();
+  const fetchingBestRoute = useBestRouteStore.use.loading();
   const navigate = useNavigate();
   const { t } = useTranslation();
 
@@ -307,11 +308,10 @@ export function TokenInfo(props: PropTypes) {
             ) : (
               <OutputContainer>
                 <Typography variant="h4">
-                  {bestRoute
-                    ? `≈ ${numberToString(props.outputAmount)}`
-                    : inputAmount
-                    ? '?'
-                    : '0'}
+                  {fetchingBestRoute && '?'}
+                  {!!bestRoute?.result &&
+                    `≈ ${numberToString(props.outputAmount)}`}
+                  {(!inputAmount || inputAmount === '0') && '0'}
                 </Typography>
               </OutputContainer>
             )}

package/src/hooks/useConfirmSwap.ts

@@ -112,8 +112,8 @@ export function useConfirmSwap(): ConfirmSwap {
       selectedWallets,
       disabledLiquiditySources,
       userSlippage,
-      true,
-      affiliateRef
+      affiliateRef,
+      initialRoute
     );
 
     try {

package/src/pages/ConfirmSwapPage.tsx

@@ -47,6 +47,7 @@ export function ConfirmSwapPage() {
   const customSlippage = useSettingsStore.use.customSlippage();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
 
   const bestRouteloadingStatus = getBestRouteStatus(
     fetchingBestRoute,
@@ -96,7 +97,6 @@ export function ConfirmSwapPage() {
 
   return (
     <ConfirmSwap
-    // @ts-ignore
       requiredWallets={getRequiredChains(bestRoute)}
       selectableWallets={selectableWallets}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
@@ -106,13 +106,13 @@ export function ConfirmSwapPage() {
             manager?.create(
               'swap',
               { swapDetails: swap },
-              // @ts-ignore
               { id: swap.requestId }
             );
             setSelectedSwap(swap.requestId);
             navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
               replace: true,
             });
+            setInputAmount('');
           }
         });
       }}

package/src/pages/Home.tsx

@@ -110,7 +110,6 @@ export function Home() {
     outputUsdValue
   );
 
-  const inputIsZero = inputAmount === '0';
   const swapButtonState = getSwapButtonState(
     loadingMetaStatus,
     accounts,
@@ -120,7 +119,7 @@ export function Home() {
     highValueLoss,
     priceImpactCanNotBeComputed,
     needsToWarnEthOnPath,
-    inputIsZero
+    inputAmount
   );
 
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);

package/src/store/bestRoute.ts

@@ -263,7 +263,6 @@ const bestRoute = (
       [],
       disabledLiquiditySources,
       userSlippage,
-      false,
       affiliateRef
     );
     if (!bestRouteStore.getState().loading)
@@ -297,7 +296,8 @@ const bestRoute = (
   const bestRouteParamsListener = () => {
     const { fromToken, toToken, inputAmount, inputUsdValue } =
       useBestRouteStore.getState();
-    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return;
+    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0))
+      return bestRouteStore.setState({ loading: false });
 
     if (tokensAreEqual(fromToken, toToken))
       return bestRouteStore.setState({

package/src/store/wallets.ts

@@ -142,7 +142,7 @@ export const useWalletsStore = createSelectors(
             }
           });
           return {
-            selectedWallets: selectedWallets,
+            selectedWallets: state.selectedWallets.concat(selectedWallets),
           };
         }),
       setSelectedWallet: (wallet) =>

package/src/utils/swap.ts

@@ -19,6 +19,7 @@ import {
   PendingSwapStep,
 } from '@rango-dev/queue-manager-rango-preset';
 import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import { removeDuplicateFrom } from './common';
 
 export function getOutputRatio(
   inputUsdValue: BigNumber,
@@ -128,13 +129,14 @@ export function getSwapButtonState(
   highValueLoss: boolean,
   priceImpactCanNotBeComputed: boolean,
   needsToWarnEthOnPath: boolean,
-  inputIsZero: boolean
+  inputAmount: string
 ): SwapButtonState {
   if (loadingMetaStatus !== 'success')
     return { title: 'Connect Wallet', disabled: true };
   if (accounts.length == 0) return { title: 'Connect Wallet', disabled: false };
   if (loading) return { title: 'Finding Best Route...', disabled: true };
-  else if (inputIsZero) return { title: 'Enter an amount', disabled: true };
+  else if (!inputAmount || inputAmount === '0')
+    return { title: 'Enter an amount', disabled: true };
   else if (!bestRoute || !bestRoute.result)
     return { title: 'Swap', disabled: true };
   else if (hasLimitError) return { title: 'Limit Error', disabled: true };
@@ -313,8 +315,8 @@ export function createBestRouteRequestBody(
   selectedWallets: SelectedWallet[],
   disabledLiquiditySources: string[],
   slippage: number,
-  checkPrerequisites: boolean,
-  affiliateRef: string | null
+  affiliateRef: string | null,
+  initialRoute?: BestRouteResponse
 ): BestRouteRequest {
   const selectedWalletsMap = selectedWallets.reduce(
     (
@@ -341,7 +343,16 @@ export function createBestRouteRequestBody(
       });
   });
 
-  const filteredBlockchains = selectedWallets.map((wallet) => wallet.chain);
+  const checkPrerequisites = !!initialRoute;
+
+  const filteredBlockchains = removeDuplicateFrom(
+    (initialRoute?.result?.swaps || []).reduce(
+      (blockchains: string[], swap) => (
+        blockchains.push(swap.from.blockchain, swap.to.blockchain), blockchains
+      ),
+      []
+    )
+  );
 
   const requestBody: BestRouteRequest = {
     amount: inputAmount.toString(),