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

package/package.json

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

package/src/pages/ConfirmSwapPage.tsx

@@ -112,7 +112,9 @@ export function ConfirmSwapPage() {
             navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
               replace: true,
             });
-            setInputAmount('');
+            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',
@@ -177,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/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,
   };
 }