@rango-dev/widget-embedded 0.11.0 → 0.11.1-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAyCnD,wBAAgB,eAAe,CAAC,EAC9B,wBAAwB,GACzB,EAAE;IACD,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,qBAgNA"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA0CnD,wBAAgB,eAAe,CAAC,EAC9B,wBAAwB,GACzB,EAAE;IACD,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,qBA0NA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA+DnD,wBAAgB,IAAI,sBA+JnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AA8BzC,wBAAgB,IAAI,sBAgKnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6B1B,wBAAgB,eAAe,sBAqI9B"}
+{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B,wBAAgB,eAAe,sBAqI9B"}

package/dist/utils/numbers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"numbers.d.ts","sourceRoot":"","sources":["../../src/utils/numbers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C,eAAO,MAAM,eAAe,MAAO,MAAM,yBAAkB,MAC7B,CAAC;AAC/B,eAAO,MAAM,eAAe,MAAO,MAAM,KAAG,MAM3C,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,gBAChC,MAAM,GAAG,IAAI,gBACb,MAAM,GAAG,IAAI,KACzB,MA6DF,CAAC;AAEF,eAAO,MAAM,qBAAqB,UACzB,SAAS,YACN,MAAM,KACf,MAEF,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,UAAU,KAAG,MAIpD,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAQrE;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAW5E;AAED,eAAO,MAAM,gBAAgB,SAAU,iBAAiB,GAAG,IAAI,WACc,CAAC;AAE9E,eAAO,MAAM,OAAO,SAAU,iBAAiB,KAAG,MAOnC,CAAC;AAEhB,eAAO,MAAM,YAAY,SAAU,MAAM,cAAc,MAAM,YACF,CAAC;AAE5D,eAAO,MAAM,gBAAgB,UAAW,MAAM,YACd,CAAC"}
+{"version":3,"file":"numbers.d.ts","sourceRoot":"","sources":["../../src/utils/numbers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C,eAAO,MAAM,eAAe,MAAO,MAAM,yBAAkB,MAC7B,CAAC;AAE/B,eAAO,MAAM,eAAe,MAAO,MAAM,KAAG,MAM3C,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,gBAChC,MAAM,GAAG,IAAI,gBACb,MAAM,GAAG,IAAI,KACzB,MA6DF,CAAC;AAEF,eAAO,MAAM,qBAAqB,UACzB,SAAS,YACN,MAAM,KACf,MAEF,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,UAAU,KAAG,MAKpD,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAQrE;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAW5E;AAED,eAAO,MAAM,gBAAgB,SAAU,iBAAiB,GAAG,IAAI,WACc,CAAC;AAE9E,eAAO,MAAM,OAAO,SAAU,iBAAiB,KAAG,MAOnC,CAAC;AAEhB,eAAO,MAAM,YAAY,SAAU,MAAM,cAAc,MAAM,YACF,CAAC;AAE5D,eAAO,MAAM,gBAAgB,UAAW,MAAM,YACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.11.0",
+  "version": "0.11.1-next.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -19,11 +19,11 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/provider-all": "^0.14.0",
+    "@rango-dev/provider-all": "^0.14.1-next.0",
     "@rango-dev/queue-manager-core": "^0.14.0",
     "@rango-dev/queue-manager-rango-preset": "^0.14.0",
     "@rango-dev/queue-manager-react": "^0.14.0",
-    "@rango-dev/ui": "^0.14.0",
+    "@rango-dev/ui": "^0.14.1-next.0",
     "@rango-dev/wallets-core": "^0.14.0",
     "@rango-dev/wallets-shared": "^0.14.0",
     "bignumber.js": "^9.1.1",

package/src/components/Layout.tsx

@@ -1,13 +1,6 @@
-import {
-  Button,
-  AddWalletIcon,
-  Typography,
-  styled,
-  Spinner,
-  Image,
-} from '@rango-dev/ui';
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { HeaderLayout } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-core';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useUiStore } from '../store/ui';
@@ -20,33 +13,10 @@ import {
 } from '../utils/wallets';
 import { removeDuplicateFrom } from '../utils/common';
 import { WidgetConfig } from '../types';
-import { i18n } from '@lingui/core';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
 
-const Header = styled('div', {
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'end',
-  '.balance': {
-    display: 'flex',
-  },
-});
-
-const WalletImages = styled('div', {
-  display: 'flex',
-  paddingLeft: '12px',
-});
-
-const WalletImageContainer = styled('div', {
-  marginLeft: -15,
-  marginRight: '$6',
-  '& img': {
-    borderRadius: '50%',
-  },
-});
-
 export type LayoutProps = {
   config?: WidgetConfig;
 };
@@ -119,40 +89,17 @@ export function Layout({ config }: LayoutProps) {
 
   return (
     <>
-      <Header>
-        <Button
-          size="small"
-          suffix={<AddWalletIcon size={20} />}
-          variant="ghost"
-          flexContent
-          loading={loadingMetaStatus === 'loading'}
-          disabled={loadingMetaStatus === 'failed'}
-          onClick={() => {
-            if (!connectWalletsButtonDisabled)
-              navigate(navigationRoutes.wallets);
-          }}
-          prefix={
-            connectedWalletsImages?.length ? (
-              <WalletImages>
-                {connectedWalletsImages.map((walletImage, index) => (
-                  <WalletImageContainer key={index}>
-                    <Image src={walletImage} size={24} />
-                  </WalletImageContainer>
-                ))}
-              </WalletImages>
-            ) : null
-          }>
-          <div className="balance">
-            <Typography variant="body2">
-              {!connectedWallets?.length
-                ? i18n.t('Connect Wallet')
-                : `$${totalBalance || 0}`}
-            </Typography>
-            {fetchingBalance && <Spinner />}
-          </div>
-        </Button>
-      </Header>
-      <AppRoutes config={config} />
+      <HeaderLayout
+        loadingStatus={loadingMetaStatus}
+        connectedWalletsImages={connectedWalletsImages}
+        connectedWallets={connectedWallets}
+        totalBalance={totalBalance}
+        fetchingBalance={fetchingBalance}
+        onClick={() => {
+          if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
+        }}>
+        <AppRoutes config={config} />
+      </HeaderLayout>
     </>
   );
 }

package/src/components/SwitchFromAndTo.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import React, { useEffect, useRef, useState } from 'react';
+import { useInRouterContext, useSearchParams } from 'react-router-dom';
+import { styled, Button, VerticalSwapIcon } from '@rango-dev/ui';
 import { SearchParams } from '../constants/searchParams';
 import { useBestRouteStore } from '../store/bestRoute';
 
-export function SwithFromAndTo({ count }: { count: number }) {
+function SwithFromAndTo({ count }: { count: number }) {
   const firstRender = useRef(true);
   const [searchParams, setSearchParams] = useSearchParams();
   const outputAmount = useBestRouteStore.use.outputAmount();
@@ -19,7 +20,9 @@ export function SwithFromAndTo({ count }: { count: number }) {
         ...(toTokenString && { [SearchParams.FROM_TOKEN]: toTokenString }),
         ...(fromChainString && { [SearchParams.TO_CHAIN]: fromChainString }),
         ...(fromTokenString && { [SearchParams.TO_TOKEN]: fromTokenString }),
-        ...(outputAmount && { [SearchParams.FROM_AMOUNT]: outputAmount.toString() }),
+        ...(outputAmount && {
+          [SearchParams.FROM_AMOUNT]: outputAmount.toString(),
+        }),
       });
     } else {
       firstRender.current = false;
@@ -28,3 +31,30 @@ export function SwithFromAndTo({ count }: { count: number }) {
 
   return null;
 }
+
+const SwitchButtonContainer = styled('div', {
+  position: 'absolute',
+  bottom: '-12px',
+  left: '50%',
+  transform: 'translate(-50%, 10%)',
+});
+
+export function SwithFromAndToButton() {
+  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
+  const isRouterInContext = useInRouterContext();
+  const [count, setCount] = useState(0);
+
+  return (
+    <SwitchButtonContainer>
+      <Button
+        variant="ghost"
+        onClick={() => {
+          switchFromAndTo();
+          setCount((prev) => prev + 1);
+        }}>
+        <VerticalSwapIcon size={32} />
+        {isRouterInContext && <SwithFromAndTo count={count} />}
+      </Button>
+    </SwitchButtonContainer>
+  );
+}

package/src/pages/ConfirmSwapPage.tsx

@@ -13,6 +13,7 @@ import {
 } from '../utils/wallets';
 import {
   confirmSwapDisabled,
+  getPercentageChange,
   getTotalFeeInUsd,
   isValidCustomDestination,
 } from '../utils/swap';
@@ -20,14 +21,15 @@ import { numberToString } from '../utils/numbers';
 import { useMetaStore } from '../store/meta';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { TokenPreview } from '../components/TokenPreview';
 import {
   Divider,
   ConfirmSwap,
   LoadingFailedAlert,
   HighSlippageWarning,
+  PercentageChange,
+  RoutesOverview,
+  TokenPreview,
 } from '@rango-dev/ui';
-import RoutesOverview from '../components/RoutesOverview';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useSettingsStore } from '../store/settings';
@@ -37,7 +39,6 @@ import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
 import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
 import { HIGH_SLIPPAGE } from '../constants/swapSettings';
 import { getBestRouteStatus } from '../utils/routing';
-import { PercentageChange } from '../components/PercentageChange';
 
 export function ConfirmSwapPage({
   customDestinationEnabled,
@@ -120,6 +121,14 @@ export function ConfirmSwapPage({
 
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
 
+  const percentageChange =
+    !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
+      ? null
+      : getPercentageChange(
+          inputUsdValue.toNumber(),
+          outputUsdValue.toNumber()
+        );
+
   return (
     <ConfirmSwap
       requiredWallets={getRequiredChains(bestRoute)}
@@ -182,7 +191,7 @@ export function ConfirmSwapPage({
               symbol: firstStep?.from.symbol || '',
               image: firstStep?.from.logo || '',
             }}
-            usdValue={inputUsdValue}
+            usdValue={inputUsdValue ? numberToString(inputUsdValue) : null}
             amount={fromAmount}
             label={i18n.t('From')}
             loadingStatus={
@@ -201,7 +210,7 @@ export function ConfirmSwapPage({
               symbol: lastStep?.to.symbol || '',
               image: lastStep?.to.logo || '',
             }}
-            usdValue={outputUsdValue}
+            usdValue={outputUsdValue ? numberToString(outputUsdValue) : null}
             amount={toAmount}
             label={i18n.t('To')}
             loadingStatus={
@@ -210,10 +219,12 @@ export function ConfirmSwapPage({
                 : bestRouteloadingStatus
             }
             percentageChange={
-              <PercentageChange
-                inputUsdValue={inputUsdValue}
-                outputUsdValue={outputUsdValue}
-              />
+              !percentageChange ? null : (
+                <PercentageChange
+                  percentageChange={numberToString(percentageChange, 0, 2)}
+                  showPercentageChange={!!percentageChange?.lt(0)}
+                />
+              )
             }
           />
         </>

package/src/pages/Home.tsx

@@ -1,20 +1,8 @@
-import {
-  Alert,
-  BestRoute,
-  BottomLogo,
-  Button,
-  styled,
-  Typography,
-  VerticalSwapIcon,
-  Header,
-  HeaderButtons,
-} from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
-import { i18n } from '@lingui/core';
-import { useInRouterContext, useNavigate } from 'react-router-dom';
-import { TokenInfo } from '../components/TokenInfo';
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { HomePanel } from '@rango-dev/ui';
 import { fetchBestRoute, useBestRouteStore } from '../store/bestRoute';
-import { SwithFromAndTo } from '../components/SwitchFromAndTo';
+import { SwithFromAndToButton } from '../components/SwitchFromAndTo';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useMetaStore } from '../store/meta';
 import { useWalletsStore } from '../store/wallets';
@@ -28,54 +16,20 @@ import {
   LimitErrorMessage,
   getTotalFeeInUsd,
   hasHighFee,
+  getPercentageChange,
 } from '../utils/swap';
+import { useUiStore } from '../store/ui';
 import {
   numberToString,
   secondsToString,
   totalArrivalTime,
 } from '../utils/numbers';
-import BigNumber from 'bignumber.js';
-import { useUiStore } from '../store/ui';
+import { getBalanceFromWallet } from '../utils/wallets';
 import { getFormatedBestRoute } from '../utils/routing';
-
-const Container = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-const FromContainer = styled('div', {
-  position: 'relative',
-  paddingBottom: '$12',
-});
-
-const SwitchButtonContainer = styled('div', {
-  position: 'absolute',
-  bottom: '-12px',
-  left: '50%',
-  transform: 'translate(-50%, 10%)',
-});
-
-const BestRouteContainer = styled('div', {
-  width: '100%',
-  paddingTop: '$16',
-});
-
-const Alerts = styled('div', {
-  width: '100%',
-  paddingTop: '$16',
-});
-
-const Footer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  paddingTop: '$16',
-});
+import BigNumber from 'bignumber.js';
 
 export function Home() {
-  const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
-  const [count, setCount] = useState(0);
   const fromChain = useBestRouteStore.use.fromChain();
   const fromToken = useBestRouteStore.use.fromToken();
   const toChain = useBestRouteStore.use.toChain();
@@ -92,7 +46,6 @@ export function Home() {
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const setCurrentPage = useUiStore.use.setCurrentPage();
-  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
 
   const errorMessage =
     loadingMetaStatus === 'failed'
@@ -102,7 +55,7 @@ export function Home() {
   const needsToWarnEthOnPath = false;
 
   const showBestRoute =
-    inputAmount && (!!bestRoute || fetchingBestRoute || bestRouteError);
+    !!inputAmount && (!!bestRoute || fetchingBestRoute || !!bestRouteError);
 
   const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
 
@@ -134,101 +87,105 @@ export function Home() {
 
   const highFee = hasHighFee(totalFeeInUsd);
 
+  const tokenBalance =
+    !!fromChain && !!fromToken
+      ? numberToString(
+          getBalanceFromWallet(
+            connectedWallets,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.amount || '0',
+          8
+        )
+      : '0';
+
+  const tokenBalanceReal =
+    !!fromChain && !!fromToken
+      ? numberToString(
+          getBalanceFromWallet(
+            connectedWallets,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.amount || '0',
+          getBalanceFromWallet(
+            connectedWallets,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.decimal
+        )
+      : '0';
+
   useEffect(() => {
     setCurrentPage(navigationRoutes.home);
 
     return setCurrentPage.bind(null, '');
   }, []);
 
+  const percentageChange =
+    !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
+      ? null
+      : getPercentageChange(
+          inputUsdValue.toNumber(),
+          outputUsdValue.toNumber()
+        );
+
   return (
-    <Container>
-      <Header
-        title={i18n.t('SWAP')}
-        suffix={
-          <HeaderButtons
-            onClickRefresh={
-              !!bestRoute || bestRouteError ? fetchBestRoute : undefined
-            }
-            onClickHistory={() => navigate(navigationRoutes.swaps)}
-            onClickSettings={() => navigate(navigationRoutes.settings)}
-          />
-        }
-      />
-      <FromContainer>
-        <TokenInfo
-          type="From"
-          chain={fromChain}
-          token={fromToken}
-          onAmountChange={setInputAmount}
-          inputAmount={inputAmount}
-        />
-        <SwitchButtonContainer>
-          <Button
-            variant="ghost"
-            onClick={() => {
-              switchFromAndTo();
-              setCount((prev) => prev + 1);
-            }}>
-            <VerticalSwapIcon size={32} />
-            {isRouterInContext && <SwithFromAndTo count={count} />}
-          </Button>
-        </SwitchButtonContainer>
-      </FromContainer>
-      <TokenInfo
-        type="To"
-        chain={toChain}
-        token={toToken}
-        outputAmount={
-          outputAmount ? new BigNumber(outputAmount) : new BigNumber(0)
+    <HomePanel
+      bestRoute={bestRoute}
+      bestRouteError={bestRouteError}
+      fetchBestRoute={fetchBestRoute}
+      onClickHistory={() => navigate(navigationRoutes.swaps)}
+      onClickSettings={() => navigate(navigationRoutes.settings)}
+      setInputAmount={setInputAmount}
+      fromChain={fromChain}
+      toChain={toChain}
+      fromToken={fromToken}
+      toToken={toToken}
+      outputAmount={
+        outputAmount
+          ? numberToString(new BigNumber(outputAmount))
+          : numberToString(new BigNumber(0))
+      }
+      inputAmount={inputAmount}
+      loadingStatus={loadingMetaStatus}
+      showBestRoute={showBestRoute}
+      fetchingBestRoute={fetchingBestRoute}
+      outputUsdValue={numberToString(outputUsdValue)}
+      inputUsdValue={numberToString(inputUsdValue)}
+      swapButtonTitle={swapButtonState.title}
+      swapButtonDisabled={swapButtonState.disabled}
+      swapButtonClick={() => {
+        if (swapButtonState.title === 'Connect Wallet')
+          navigate(navigationRoutes.wallets);
+        else {
+          navigate(navigationRoutes.confirmSwap, { replace: true });
         }
-        outputUsdValue={outputUsdValue}
-      />
-      {showBestRoute && (
-        <BestRouteContainer>
-          <BestRoute
-            error={bestRouteError}
-            loading={fetchingBestRoute}
-            data={getFormatedBestRoute(bestRoute)}
-            totalFee={numberToString(totalFeeInUsd, 0, 2)}
-            feeWarning={highFee}
-            totalTime={secondsToString(totalArrivalTime(bestRoute))}
-          />
-        </BestRouteContainer>
-      )}
-      {(errorMessage || hasLimitError(bestRoute)) && (
-        <Alerts>
-          {errorMessage && <Alert type="error">{errorMessage}</Alert>}
-          {hasLimitError(bestRoute) && (
-            <Alert type="error" title={`${swap?.swapperId} Limit`}>
-              <>
-                <Typography variant="body2">
-                  {`${fromAmountRangeError}, Yours: ${numberToString(
-                    swap?.fromAmount || null
-                  )} ${swap?.from.symbol}`}
-                </Typography>
-                <Typography variant="body2">{recommendation}</Typography>
-              </>
-            </Alert>
-          )}
-        </Alerts>
-      )}
-      <Footer>
-        <Button
-          type="primary"
-          align="grow"
-          size="large"
-          disabled={swapButtonState.disabled}
-          onClick={() => {
-            if (swapButtonState.title === 'Connect Wallet')
-              navigate(navigationRoutes.wallets);
-            else {
-              navigate(navigationRoutes.confirmSwap, { replace: true });
-            }
-          }}>
-          {swapButtonState.title}
-        </Button>
-        <BottomLogo />
-      </Footer>
-    </Container>
+      }}
+      onChainClick={(route) => {
+        navigate(route);
+      }}
+      onTokenClick={(route) => {
+        navigate(route);
+      }}
+      highFee={highFee}
+      errorMessage={errorMessage}
+      hasLimitError={hasLimitError}
+      swap={swap}
+      fromAmountRangeError={fromAmountRangeError}
+      recommendation={recommendation}
+      totalFeeInUsd={numberToString(totalFeeInUsd, 0, 2)}
+      swithFromAndToComponent={<SwithFromAndToButton />}
+      connectedWallets={connectedWallets}
+      percentageChange={numberToString(percentageChange, 0, 2)}
+      showPercentageChange={!!percentageChange?.lt(0)}
+      tokenBalanceReal={tokenBalanceReal}
+      tokenBalance={tokenBalance}
+      totalTime={secondsToString(totalArrivalTime(bestRoute))}
+      bestRouteData={getFormatedBestRoute(bestRoute)}
+      swapFromAmount={numberToString(swap?.fromAmount || null)}
+    />
   );
 }

package/src/pages/SwapDetailsPage.tsx

@@ -3,7 +3,11 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { getPendingSwaps } from '../utils/queue';
-import { SwapHistory, useCopyToClipboard } from '@rango-dev/ui';
+import {
+  SwapHistory,
+  useCopyToClipboard,
+  SwapDetailsPlaceholder,
+} from '@rango-dev/ui';
 import { useUiStore } from '../store/ui';
 import {
   cancelSwap,
@@ -24,7 +28,6 @@ import {
   isNetworkStatusInWarningState,
   shouldRetrySwap,
 } from '../utils/swap';
-import { SwapDetailsPlaceholder } from '../components/SwapDetailsPlaceholder';
 import { getFormatedPendingSwap } from '../utils/routing';
 
 export function SwapDetailsPage() {

package/src/utils/numbers.ts

@@ -3,6 +3,7 @@ import { BestRouteResponse } from 'rango-sdk';
 
 export const percentToString = (p: number, fractions = 0): string =>
   (p * 100).toFixed(fractions);
+
 export const secondsToString = (s: number): string => {
   const seconds = (s % 60).toString().padStart(2, '0');
   const minutes = parseInt((s / 60).toString())
@@ -87,6 +88,7 @@ export const convertBigNumberToHex = (
 
 export const uint8ArrayToHex = (buffer: Uint8Array): string => {
   // buffer is an ArrayBuffer
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   return [...buffer].map((x) => x.toString(16).padStart(2, '0')).join('');
 };

package/dist/components/PercentageChange.d.ts

@@ -1,9 +0,0 @@
-import BigNumber from 'bignumber.js';
-import React from 'react';
-interface PropTypes {
-    inputUsdValue: BigNumber | null;
-    outputUsdValue: BigNumber | null;
-}
-export declare function PercentageChange(props: PropTypes): React.JSX.Element | null;
-export {};
-//# sourceMappingURL=PercentageChange.d.ts.map

package/dist/components/PercentageChange.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PercentageChange.d.ts","sourceRoot":"","sources":["../../src/components/PercentageChange.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,SAAS;IACjB,aAAa,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,SAAS,GAAG,IAAI,CAAC;CAClC;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,SAAS,4BAqBhD"}