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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.11-next.10",
+  "version": "0.1.11-next.12",
   "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,15 @@ export function ConfirmSwapPage() {
             manager?.create(
               'swap',
               { swapDetails: swap },
-              // @ts-ignore
               { id: swap.requestId }
             );
             setSelectedSwap(swap.requestId);
             navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
               replace: true,
             });
+            setTimeout(() => {
+              setInputAmount('');
+            }, 0);
           }
         });
       }}

package/src/pages/Home.tsx

@@ -36,6 +36,7 @@ import {
 import BigNumber from 'bignumber.js';
 import { HeaderButtons } from '../components/HeaderButtons';
 import { useUiStore } from '../store/ui';
+import { getFormatedBestRoute } from '../utils/routing';
 
 const Container = styled('div', {
   display: 'flex',
@@ -110,7 +111,6 @@ export function Home() {
     outputUsdValue
   );
 
-  const inputIsZero = inputAmount === '0';
   const swapButtonState = getSwapButtonState(
     loadingMetaStatus,
     accounts,
@@ -120,7 +120,7 @@ export function Home() {
     highValueLoss,
     priceImpactCanNotBeComputed,
     needsToWarnEthOnPath,
-    inputIsZero
+    inputAmount
   );
 
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
@@ -178,7 +178,7 @@ export function Home() {
           <BestRoute
             error={bestRouteError}
             loading={fetchingBestRoute}
-            data={bestRoute}
+            data={getFormatedBestRoute(bestRoute)}
             totalFee={numberToString(totalFeeInUsd, 0, 2)}
             feeWarning={highFee}
             totalTime={secondsToString(totalArrivalTime(bestRoute))}

package/src/pages/SwapDetailsPage.tsx

@@ -4,7 +4,7 @@ import useCopyToClipboard from '../hooks/useCopyToClipboard';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { getPendingSwaps } from '../utils/queue';
-import { SwapHistory, Spacer } from '@rango-dev/ui';
+import { SwapHistory } from '@rango-dev/ui';
 import { useUiStore } from '../store/ui';
 import {
   cancelSwap,
@@ -25,11 +25,10 @@ import {
   isNetworkStatusInWarningState,
   shouldRetrySwap,
 } from '../utils/swap';
-import { TokenPreview } from '../components/TokenPreview';
-import { numberToString } from '../utils/numbers';
 //@ts-ignore
 import { t } from 'i18next';
 import { SwapDetailsPlaceholder } from '../components/SwapDetailsPlaceholder';
+import { getFormatedPendingSwap } from '../utils/routing';
 
 export function SwapDetailsPage() {
   const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
@@ -68,11 +67,6 @@ export function SwapDetailsPage() {
       />
     );
 
-  const firstStep = swap.steps[0];
-  const lastStep = swap.steps[swap.steps.length - 1];
-  const fromAmount = numberToString(swap.inputAmount);
-  const toAmount = numberToString(swap.simulationResult.outputAmount);
-
   const currentStep = getCurrentStep(swap);
 
   const currentStepBlockchain = currentStep
@@ -106,12 +100,13 @@ export function SwapDetailsPage() {
   return (
     <SwapHistory
       onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
+      /* TODO: It was temporarily removed to find a better solution*/
+      /*
       previewInputs={
         <>
           <TokenPreview
             chain={{
               displayName: firstStep?.fromBlockchain || '',
-              // @ts-ignore
               logo: firstStep?.fromBlockchainLogo || '',
             }}
             token={{
@@ -126,7 +121,6 @@ export function SwapDetailsPage() {
           <TokenPreview
             chain={{
               displayName: lastStep?.toBlockchain || '',
-              //@ts-ignore
               logo: lastStep?.toBlockchainLogo || '',
             }}
             token={{
@@ -139,8 +133,8 @@ export function SwapDetailsPage() {
           />
         </>
       }
-      //todo: move PendingSwap type to rango-types
-      pendingSwap={swap}
+      */
+      pendingSwap={getFormatedPendingSwap(swap)}
       onCopy={handleCopy}
       isCopied={isCopied}
       onCancel={onCancel}

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/routing.ts

@@ -7,10 +7,8 @@ import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import { areEqual } from './common';
 import { SelectedWallet } from './wallets';
 import { BestRouteEqualityParams } from '../types';
-import { TokenMeta } from '@rango-dev/ui/dist/types/meta';
 import { numberToString } from './numbers';
-import { getUsdFeeOfStep } from './swap';
-import { BestRouteWithFee } from '@rango-dev/ui';
+import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 export function searchParamsToToken(
   tokens: Token[],
@@ -142,19 +140,41 @@ export function isRouteParametersChanged(params: BestRouteEqualityParams) {
   return false;
 }
 
-export function getBestRouteWithCalculatedFees(
-  bestRoute: BestRouteResponse | null,
-  tokens: TokenMeta[]
-): BestRouteWithFee | null {
-  if (!bestRoute || !bestRoute.result) return null;
-  const swapsWithFee = (bestRoute?.result?.swaps || []).map((swap) => ({
+export function getFormatedBestRoute(
+  bestRoute: BestRouteResponse | null
+): BestRouteResponse | null {
+  if (!bestRoute) return null;
+
+  const formatedSwaps = (bestRoute.result?.swaps || []).map((swap) => ({
     ...swap,
-    feeInUsd: numberToString(getUsdFeeOfStep(swap, tokens), 0, 2),
+    fromAmount: numberToString(swap.fromAmount, 6, 6),
+    toAmount: numberToString(swap.toAmount, 6, 6),
   }));
 
   return {
     ...bestRoute,
-    result: { ...bestRoute.result, swaps: swapsWithFee },
+    ...(bestRoute.result && {
+      result: { ...bestRoute.result, swaps: formatedSwaps },
+    }),
+  };
+}
+
+export function getFormatedPendingSwap(pendingSwap: PendingSwap): PendingSwap {
+  const formatedSteps = pendingSwap.steps.map((step) => ({
+    ...step,
+    feeInUsd: numberToString(step.feeInUsd, 4, 4),
+    outputAmount: numberToString(step.outputAmount, 6, 6),
+    expectedOutputAmountHumanReadable: numberToString(
+      step.expectedOutputAmountHumanReadable,
+      6,
+      6
+    ),
+  }));
+
+  return {
+    ...pendingSwap,
+    inputAmount: numberToString(pendingSwap.inputAmount, 6, 6),
+    steps: formatedSteps,
   };
 }
 

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(),