@rango-dev/widget-embedded 0.20.1-next.0 → 0.20.1-next.2

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

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA8C3D,wBAAgB,IAAI,sBAgOnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA+C3D,wBAAgB,IAAI,sBAyOnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,YAAY,mBAC2B,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,YAAY,mBACkC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2CAA2C,CAAC;AAKzE,eAAO,MAAM,gBAAgB,EAAE,OAqD9B,CAAC"}
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2CAA2C,CAAC;AAKzE,eAAO,MAAM,gBAAgB,EAAE,OAmE9B,CAAC"}

package/dist/utils/numbers.d.ts

@@ -1,17 +1,13 @@
 import type { BestRouteResponse } from 'rango-sdk';
 import { BigNumber } from 'bignumber.js';
-export declare const percentToString: (p: number, fractions?: number) => string;
 export declare const secondsToString: (s: number) => string;
 export declare const numberToString: (number: BigNumber | string | number | null | undefined, minDecimals?: number | null, maxDecimals?: number | null) => string;
-export declare const convertBigNumberToHex: (value: BigNumber, decimals: number) => string;
 export declare const uint8ArrayToHex: (buffer: Uint8Array) => string;
-export declare function dollarToConciseString(num: number | undefined): string;
-export declare function removeExtraDecimals(num: string, maxDecimals: number): string;
 export declare const totalArrivalTime: (data: {
     estimatedTimeInSeconds: number | null;
 }[] | undefined) => number;
 export declare const rawFees: (data: BestRouteResponse) => string;
 export declare const containsText: (text: string, searchText: string) => boolean;
 export declare const isPositiveNumber: (text?: string) => boolean;
-export declare function limitDecimalPlaces(numberString: string, maxDecimalPlaces?: number): string;
+export declare function formatTooltipNumbers(number: BigNumber | string | number | null | undefined): string;
 //# sourceMappingURL=numbers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"numbers.d.ts","sourceRoot":"","sources":["../../src/utils/numbers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,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,MAAM,GAAG,IAAI,GAAG,SAAS,gBACzC,MAAM,GAAG,IAAI,gBACb,MAAM,GAAG,IAAI,KACzB,MA2EF,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,CAoBrE;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAa5E;AAED,eAAO,MAAM,gBAAgB,SACrB;IAAE,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,EAAE,GAAG,SAAS,WACS,CAAC;AAEzE,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;AAGjC,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,MAAM,EACpB,gBAAgB,SAAI,GACnB,MAAM,CASR"}
+{"version":3,"file":"numbers.d.ts","sourceRoot":"","sources":["../../src/utils/numbers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,eAAe,MAAO,MAAM,KAAG,MAM3C,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,gBACzC,MAAM,GAAG,IAAI,gBACb,MAAM,GAAG,IAAI,KACzB,MA2EF,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,UAAU,KAAG,MAKpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,SACrB;IAAE,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,EAAE,GAAG,SAAS,WACS,CAAC;AAEzE,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;AAGjC,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,UAMvD"}

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

@@ -1 +1 @@
-{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAW/C,wBAAgB,SAAS,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAqDrD;AAED,wBAAgB,WAAW,CAAC,WAAW,EAAE,WAAW,UAUnD"}
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAc/C,wBAAgB,SAAS,CAAC,WAAW,EAAE,MAAM,UAW5C;AAED,wBAAgB,WAAW,CAAC,WAAW,EAAE,WAAW,UAKnD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.20.1-next.0",
+  "version": "0.20.1-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.25.0",
     "@rango-dev/queue-manager-rango-preset": "^0.25.1-next.0",
     "@rango-dev/queue-manager-react": "^0.24.0",
-    "@rango-dev/ui": "^0.26.1-next.0",
+    "@rango-dev/ui": "^0.26.1-next.1",
     "@rango-dev/wallets-react": "^0.11.1-next.0",
     "@rango-dev/wallets-shared": "^0.25.1-next.0",
     "bignumber.js": "^9.1.1",

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -18,6 +18,7 @@ import {
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
 import { getQuoteErrorMessage } from '../../constants/errors';
 import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
@@ -238,7 +239,9 @@ export function ConfirmWalletsModal(props: PropTypes) {
     }
   }, [showCustomDestination]);
 
-  const modalContainer = document.querySelector('#swap-box') as HTMLDivElement;
+  const modalContainer = document.getElementById(
+    RANGO_SWAP_BOX_ID
+  ) as HTMLDivElement;
 
   const navigate = useNavigate();
   return (

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -18,6 +18,7 @@ import {
 import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
+import { RANGO_SWAP_BOX_ID } from '../../constants';
 import { useWalletList } from '../../hooks/useWalletList';
 import {
   TIME_TO_CLOSE_MODAL,
@@ -107,7 +108,9 @@ export function WalletList(props: PropTypes) {
     });
   }, [JSON.stringify(list)]);
 
-  const modalContainer = document.querySelector('#swap-box') as HTMLDivElement;
+  const modalContainer = document.getElementById(
+    RANGO_SWAP_BOX_ID
+  ) as HTMLDivElement;
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout> | null = null;

package/src/components/Layout/Layout.styles.ts

@@ -7,7 +7,7 @@ export const Container = styled('div', {
   borderRadius: '$primary',
   overflow: 'hidden !important',
   boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
-  width: '95vw',
+  width: '100vw',
   minWidth: '300px',
   maxWidth: '390px',
   maxHeight: '700px',
@@ -20,10 +20,10 @@ export const Container = styled('div', {
   variants: {
     fixedHeight: {
       true: {
-        height: '95vh',
+        height: '100vh',
       },
       false: {
-        height: 'auto',
+        height: 'auto !important',
       },
     },
   },

package/src/components/Layout/Layout.tsx

@@ -4,7 +4,9 @@ import type { PropsWithChildren } from 'react';
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React from 'react';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
+import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
@@ -25,8 +27,9 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
   } = props;
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
-    config: { features },
+    config: { features, theme },
   } = useAppStore();
+  const { activeTheme } = useTheme(theme || {});
 
   const isConnectWalletHidden = isFeatureHidden(
     'connectWalletButton',
@@ -47,7 +50,11 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     typeof header.hasBackButton === 'undefined' || header.hasBackButton;
 
   return (
-    <Container ref={ref} fixedHeight={fixedHeight} id="swap-box">
+    <Container
+      ref={ref}
+      fixedHeight={fixedHeight}
+      id={RANGO_SWAP_BOX_ID}
+      className={activeTheme()}>
       <Header
         prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}

package/src/components/Quote/Quote.styles.ts

@@ -243,8 +243,12 @@ export const FrameIcon = styled('div', {
 });
 
 export const BasicInfoOutput = styled(Typography, {
-  width: '100%',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   letterSpacing: 0.4,
 });
+
+export const ContainerInfoOutput = styled('div', {
+  display: 'flex',
+  flexWrap: 'wrap',
+});

package/src/components/Quote/Quote.tsx

@@ -16,6 +16,7 @@ import {
   Tooltip,
   Typography,
 } from '@rango-dev/ui';
+import BigNumber from 'bignumber.js';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 
 import {
@@ -40,6 +41,7 @@ import {
   getSwapperDisplayName,
 } from '../../utils/meta';
 import {
+  formatTooltipNumbers,
   numberToString,
   secondsToString,
   totalArrivalTime,
@@ -52,6 +54,7 @@ import {
   basicInfoStyles,
   ChainImageContainer,
   Chains,
+  ContainerInfoOutput,
   Content,
   EXPANDABLE_QUOTE_TRANSITION_DURATION,
   FrameIcon,
@@ -162,6 +165,14 @@ export function Quote(props: QuoteProps) {
               USD_VALUE_MIN_DECIMALS,
               USD_VALUE_MAX_DECIMALS
             ),
+            realValue: formatTooltipNumbers(
+              index === 0 ? input.value : swap.fromAmount
+            ),
+            realUsdValue: formatTooltipNumbers(
+              new BigNumber(swap.from.usdPrice ?? 0).multipliedBy(
+                swap.fromAmount
+              )
+            ),
           },
         },
         to: {
@@ -184,6 +195,10 @@ export function Quote(props: QuoteProps) {
               USD_VALUE_MIN_DECIMALS,
               USD_VALUE_MAX_DECIMALS
             ),
+            realValue: formatTooltipNumbers(swap.toAmount),
+            realUsdValue: formatTooltipNumbers(
+              new BigNumber(swap.to.usdPrice ?? 0).multipliedBy(swap.toAmount)
+            ),
           },
         },
         state: stepState,
@@ -291,27 +306,49 @@ export function Quote(props: QuoteProps) {
               <FrameIcon>
                 <InfoIcon size={12} color="gray" />
               </FrameIcon>
-              <BasicInfoOutput size="small" variant="body">
-                {`${roundedInput} ${
-                  steps[0].from.token.displayName
-                } = ${roundedOutput} ${
-                  steps[steps.length - 1].to.token.displayName
-                }`}
-              </BasicInfoOutput>
-              <Typography
-                color="$neutral600"
-                ml={2}
-                size="xsmall"
-                variant="body">
-                {`($${roundedOutputUsdValue})`}
-              </Typography>
+              <ContainerInfoOutput>
+                <BasicInfoOutput size="small" variant="body">
+                  {`${roundedInput} ${steps[0].from.token.displayName} = `}
+                </BasicInfoOutput>
+                <Tooltip
+                  content={formatTooltipNumbers(output.value)}
+                  container={tooltipContainer}
+                  open={!output.value ? false : undefined}>
+                  <BasicInfoOutput size="small" variant="body">
+                    &nbsp;
+                    {`${roundedOutput} ${
+                      steps[steps.length - 1].to.token.displayName
+                    }`}
+                  </BasicInfoOutput>
+                </Tooltip>
+              </ContainerInfoOutput>
+              <Tooltip
+                content={formatTooltipNumbers(output.usdValue)}
+                container={tooltipContainer}
+                style={{
+                  display: 'flex',
+                }}>
+                <Typography
+                  color="$neutral600"
+                  ml={2}
+                  size="xsmall"
+                  variant="body">
+                  {`($${roundedOutputUsdValue})`}
+                </Typography>
+              </Tooltip>
             </div>
           )}
           {type === 'list-item' && (
             <TokenAmount
               type="output"
               direction="vertical"
-              price={{ value: roundedOutput, usdValue: roundedOutputUsdValue }}
+              tooltipContainer={tooltipContainer}
+              price={{
+                value: roundedOutput,
+                usdValue: roundedOutputUsdValue,
+                realValue: formatTooltipNumbers(output.value),
+                realUsdValue: formatTooltipNumbers(output.usdValue),
+              }}
               token={{
                 displayName: steps[numberOfSteps - 1].to.token.displayName,
                 image: steps[numberOfSteps - 1].to.token.image,
@@ -402,6 +439,7 @@ export function Quote(props: QuoteProps) {
                     step={step}
                     hasSeparator={index !== steps.length - 1}
                     state={step.state}
+                    tooltipContainer={tooltipContainer}
                   />
                 );
               })}

package/src/components/Quote/QuoteSummary.tsx

@@ -3,6 +3,8 @@ import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 import { TokenAmount } from '@rango-dev/ui';
 import React from 'react';
 
+import { getContainer } from '../../utils/common';
+
 import { Container, separatorStyles } from './QuoteSummary.styles';
 
 type PropTypes = {
@@ -14,13 +16,20 @@ type PropTypes = {
 
 export function QuoteSummary(props: PropTypes) {
   const { from, to, percentageChange, warningLevel } = props;
+
   return (
     <Container>
       <TokenAmount
         direction="horizontal"
         label="Swap input"
         type="input"
-        price={{ value: from.price.value, usdValue: from.price.usdValue }}
+        tooltipContainer={getContainer()}
+        price={{
+          value: from.price.value,
+          usdValue: from.price.usdValue,
+          realValue: from.price.realValue,
+          realUsdValue: from.price.realUsdValue,
+        }}
         token={{
           displayName: from.token.displayName,
           image: from.token.image,
@@ -31,8 +40,14 @@ export function QuoteSummary(props: PropTypes) {
       <TokenAmount
         direction="horizontal"
         label="Estimated output"
+        tooltipContainer={getContainer()}
         type="output"
-        price={{ value: to.price.value, usdValue: to.price.usdValue }}
+        price={{
+          value: to.price.value,
+          usdValue: to.price.usdValue,
+          realValue: to.price.realValue,
+          realUsdValue: to.price.realUsdValue,
+        }}
         token={{
           displayName: to.token.displayName,
           image: to.token.image,

package/src/components/SwapDetails/SwapDetails.helpers.tsx

@@ -20,7 +20,10 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
   const hasAlreadyProceededToSign = swap.hasAlreadyProceededToSign !== false;
   return swap.steps.map((step, index) => {
     const amountToConvert =
-      index === 0 ? swap.inputAmount : swap.steps[index - 1].outputAmount;
+      index === 0
+        ? swap.inputAmount
+        : swap.steps[index - 1].outputAmount ||
+          swap.steps[index - 1].expectedOutputAmountHumanReadable;
     return {
       from: {
         token: { displayName: step.fromSymbol, image: step.fromLogo ?? '' },
@@ -35,6 +38,7 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
             TOKEN_AMOUNT_MIN_DECIMALS,
             TOKEN_AMOUNT_MAX_DECIMALS
           ),
+          realValue: amountToConvert,
         },
       },
       to: {
@@ -50,6 +54,8 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
             TOKEN_AMOUNT_MIN_DECIMALS,
             TOKEN_AMOUNT_MAX_DECIMALS
           ),
+          realValue:
+            step.outputAmount || step.expectedOutputAmountHumanReadable,
         },
       },
       swapper: { displayName: step.swapperId, image: step.swapperLogo ?? '' },

package/src/components/SwapDetails/SwapDetails.tsx

@@ -18,6 +18,7 @@ import {
   useCopyToClipboard,
 } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
+import BigNumber from 'bignumber.js';
 import { PendingSwapNetworkStatus } from 'rango-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -35,7 +36,9 @@ import {
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
+import { getContainer } from '../../utils/common';
 import {
+  formatTooltipNumbers,
   numberToString,
   secondsToString,
   totalArrivalTime,
@@ -188,6 +191,16 @@ export function SwapDetails(props: SwapDetailsProps) {
     USD_VALUE_MAX_DECIMALS
   );
 
+  const realOutputUsdValue = outputAmount
+    ? formatTooltipNumbers(
+        new BigNumber(outputAmount).multipliedBy(lastStep.toUsdPrice || 0)
+      )
+    : '';
+
+  const realInputUsdValue = formatTooltipNumbers(
+    new BigNumber(swap.inputAmount).multipliedBy(firstStep.fromUsdPrice || 0)
+  );
+
   const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
 
   const completeModalDesc =
@@ -280,7 +293,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </div>
           <div className={rowStyles()}>
             <Typography variant="label" size="large" color="neutral700">
-              {`${i18n.t('Created at')}:`}
+              {`${i18n.t(swap.finishTime ? 'Finished at' : 'Created at')}:`}
             </Typography>
             <Typography variant="label" size="small" color="neutral700">
               {swapDate}
@@ -307,6 +320,8 @@ export function SwapDetails(props: SwapDetailsProps) {
                   TOKEN_AMOUNT_MAX_DECIMALS
                 ),
                 usdValue: inputUsdValue,
+                realUsdValue: realInputUsdValue,
+                realValue: swap.inputAmount,
               },
               token: {
                 displayName: steps[0].from.token.displayName,
@@ -325,6 +340,8 @@ export function SwapDetails(props: SwapDetailsProps) {
                   TOKEN_AMOUNT_MAX_DECIMALS
                 ),
                 usdValue: outputUsdValue,
+                realUsdValue: realOutputUsdValue,
+                realValue: outputAmount,
               },
               token: {
                 displayName: steps[numberOfSteps - 1].to.token.displayName,
@@ -368,6 +385,7 @@ export function SwapDetails(props: SwapDetailsProps) {
                 hasSeparator={index !== 0}
                 tabIndex={key}
                 isFocused={isFocused}
+                tooltipContainer={getContainer()}
               />
             );
           })}
@@ -393,6 +411,8 @@ export function SwapDetails(props: SwapDetailsProps) {
           TOKEN_AMOUNT_MAX_DECIMALS
         )}
         usdValue={outputUsdValue}
+        realUsdValue={realOutputUsdValue}
+        realValue={formatTooltipNumbers(outputAmount)}
         percentageChange={numberToString(
           percentageChange,
           PERCENTAGE_CHANGE_MIN_DECIMALS,

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -12,6 +12,9 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { getContainer } from '../../utils/common';
+
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
     open,
@@ -19,6 +22,8 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     status,
     priceValue,
     usdValue,
+    realUsdValue,
+    realValue,
     token,
     chain,
     percentageChange,
@@ -31,16 +36,19 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     <Modal
       open={open}
       onClose={onClose}
-      container={document.getElementById('swap-box') || document.body}>
+      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
       {status === 'success' ? (
         <MessageBox type="success" title={i18n.t('Swap Successful')}>
           <TokenAmount
             direction="vertical"
+            tooltipContainer={getContainer()}
             type="output"
             centerAlign={true}
             price={{
               value: priceValue,
               usdValue,
+              realUsdValue,
+              realValue,
             }}
             token={token}
             chain={chain}

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -4,6 +4,8 @@ import { Modal } from '@rango-dev/ui';
 import { PendingSwapNetworkStatus } from 'rango-types';
 import React from 'react';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
+
 import { CancelContent } from './SwapDetailsModal.Cancel';
 import { DeleteContent } from './SwapDetailsModal.Delete';
 import { modalNetworkValues } from './SwapDetailsModal.helpers';
@@ -22,7 +24,7 @@ export function SwapDetailsModal(props: ModalPropTypes) {
     <Modal
       open={!!state}
       onClose={onClose}
-      container={document.getElementById('swap-box') || document.body}>
+      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
       {showWalletStateContent && (
         <WalletStateContent
           type={modalNetworkValues[state].type}

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -24,7 +24,9 @@ export interface CompleteModalPropTypes {
   onClose: () => void;
   status: 'success' | 'failed';
   priceValue: string;
+  realValue: string;
   usdValue: string;
+  realUsdValue: string;
   percentageChange: string;
   chain: {
     displayName?: string;

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -4,7 +4,8 @@ import { i18n } from '@lingui/core';
 import { Divider, SwapListItem, Typography } from '@rango-dev/ui';
 import React from 'react';
 
-import { limitDecimalPlaces } from '../../utils/numbers';
+import { getContainer } from '../../utils/common';
+import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
 
 import { Group, groupStyles, SwapList, Time } from './SwapsGroup.styles';
 
@@ -21,7 +22,7 @@ export function SwapsGroup(props: PropTypes) {
         swaps,
       },
       {
-        title: 'Last month',
+        title: 'This month',
         swaps,
       },
     ];
@@ -75,6 +76,7 @@ export function SwapsGroup(props: PropTypes) {
               <SwapList>
                 {group.swaps.map((swap) => {
                   const firstStep = swap.steps[0];
+
                   const lastStep = swap.steps[swap.steps.length - 1];
                   return (
                     <React.Fragment key={swap.requestId}>
@@ -84,6 +86,7 @@ export function SwapsGroup(props: PropTypes) {
                         status={swap.status}
                         onClick={onSwapClick}
                         onlyShowTime={group.title === 'Today'}
+                        tooltipContainer={getContainer()}
                         swapTokenData={{
                           from: {
                             token: {
@@ -93,7 +96,7 @@ export function SwapsGroup(props: PropTypes) {
                             blockchain: {
                               image: firstStep.fromBlockchainLogo || '',
                             },
-                            amount: limitDecimalPlaces(swap.inputAmount),
+                            amount: swap.inputAmount,
                           },
                           to: {
                             token: {
@@ -103,11 +106,14 @@ export function SwapsGroup(props: PropTypes) {
                             blockchain: {
                               image: lastStep.toBlockchainLogo || '',
                             },
-                            amount: limitDecimalPlaces(
-                              lastStep.outputAmount || ''
+                            amount: numberToString(
+                              lastStep.outputAmount ||
+                                lastStep.expectedOutputAmountHumanReadable ||
+                                ''
                             ),
-                            estimatedAmount: limitDecimalPlaces(
-                              lastStep.expectedOutputAmountHumanReadable || ''
+                            realAmount: formatTooltipNumbers(
+                              lastStep.outputAmount ||
+                                lastStep.expectedOutputAmountHumanReadable
                             ),
                           },
                         }}

package/src/components/WalletModal/WalletModal.tsx

@@ -3,6 +3,8 @@ import type { PropTypes } from './WalletModal.types';
 import { Divider, Modal } from '@rango-dev/ui';
 import React from 'react';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
+
 import { ModalContent } from './WalletModalContent';
 
 export function WalletModal(props: PropTypes) {
@@ -12,7 +14,7 @@ export function WalletModal(props: PropTypes) {
     <Modal
       open={open}
       onClose={onClose}
-      container={document.getElementById('swap-box') || document.body}>
+      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
       <ModalContent {...otherProps} />
       <Divider direction="vertical" size={32} />
     </Modal>

package/src/constants/index.ts

@@ -1,2 +1,3 @@
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
+export const RANGO_SWAP_BOX_ID = 'rango-swap-box';

package/src/constants/routing.ts

@@ -15,3 +15,5 @@ export const PERCENTAGE_CHANGE_MAX_DECIMALS = 2;
 
 export const BALANCE_MIN_DECIMALS = 8;
 export const BALANCE_MAX_DECIMALS = 8;
+
+export const TOOLTIP_DECIMALS = 12;

package/src/containers/App/App.styles.ts

@@ -1,7 +1,6 @@
 import { styled } from '@rango-dev/ui';
 
 export const MainContainer = styled('div', {
-  width: '100%',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -9,10 +8,10 @@ export const MainContainer = styled('div', {
   boxSizing: 'border-box',
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
-    listStyleType: 'none',
   },
   '& *:focus-visible': {
     outlineColor: '$info500',
     transition: 'none',
   },
+  '& ul, ol, li': { listStyleType: 'none' },
 });