@rango-dev/widget-embedded 0.20.1-next.1 → 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/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.1",
+  "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",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

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

@@ -13,6 +13,7 @@ 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 {
@@ -21,6 +22,8 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     status,
     priceValue,
     usdValue,
+    realUsdValue,
+    realValue,
     token,
     chain,
     percentageChange,
@@ -38,11 +41,14 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
         <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.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/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/pages/Home.tsx

@@ -22,7 +22,8 @@ import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
-import { numberToString } from '../utils/numbers';
+import { getContainer } from '../utils/common';
+import { formatTooltipNumbers, numberToString } from '../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
 import { canComputePriceImpact, getSwapButtonState } from '../utils/swap';
 import { formatBalance, isFetchingBalance } from '../utils/wallets';
@@ -192,6 +193,9 @@ export function Home() {
                       USD_VALUE_MIN_DECIMALS,
                       USD_VALUE_MAX_DECIMALS
                     ),
+                realUsdValue: priceImpactInputCanNotBeComputed
+                  ? undefined
+                  : formatTooltipNumbers(inputUsdValue),
                 error: priceImpactInputCanNotBeComputed
                   ? errorMessages().unknownPriceError.impactTitle
                   : undefined,
@@ -199,6 +203,7 @@ export function Home() {
               disabled={fetchMetaStatus === 'failed'}
               loading={fetchMetaStatus === 'loading'}
               loadingBalance={fetchingBalance}
+              tooltipContainer={getContainer()}
               onSelectMaxBalance={() => {
                 if (fromTokenFormattedBalance !== '0') {
                   setInputAmount(tokenBalanceReal.split(',').join(''));
@@ -239,6 +244,10 @@ export function Home() {
                     USD_VALUE_MIN_DECIMALS,
                     USD_VALUE_MAX_DECIMALS
                   ),
+              realValue: formatTooltipNumbers(outputAmount),
+              realUsdValue: priceImpactOutputCanNotBeComputed
+                ? undefined
+                : formatTooltipNumbers(outputUsdValue),
               error: priceImpactOutputCanNotBeComputed
                 ? errorMessages().unknownPriceError.impactTitle
                 : undefined,
@@ -246,6 +255,7 @@ export function Home() {
             onClickToken={() => navigate(navigationRoutes.toSwap)}
             disabled={fetchMetaStatus === 'failed'}
             loading={fetchMetaStatus === 'loading'}
+            tooltipContainer={getContainer()}
           />
         </InputsContainer>
         <div className="quote__container">

package/src/utils/date.ts

@@ -19,39 +19,53 @@ export const groupSwapsByDate: GroupBy = (swaps) => {
       },
     ],
     [
-      'month',
+      'week',
       {
-        title: 'Last month',
+        title: 'This week',
         swaps: [],
       },
     ],
     [
-      'year',
+      'month',
       {
-        title: 'Last year',
+        title: 'This month',
         swaps: [],
       },
     ],
     [
-      'history',
+      'year',
       {
-        title: 'History',
+        title: 'This year',
         swaps: [],
       },
     ],
   ]);
 
+  function addYearsToOutput(key: string, swap: PendingSwap) {
+    if (!output.has(key)) {
+      output.set(key, {
+        title: key,
+        swaps: [],
+      });
+    }
+    output.get(key)?.swaps.push(swap);
+  }
+
   const now = dayjs();
   swaps.forEach((swap) => {
-    const swapDate = dayjs(Number(swap.creationTime));
+    const time = Number(swap.creationTime);
+    const swapDate = dayjs(time);
     if (now.isSame(swapDate, 'day')) {
       output.get('today')?.swaps.push(swap);
+    } else if (now.isSame(swapDate, 'week')) {
+      output.get('week')?.swaps.push(swap);
     } else if (now.isSame(swapDate, 'month')) {
       output.get('month')?.swaps.push(swap);
     } else if (now.isSame(swapDate, 'year')) {
       output.get('year')?.swaps.push(swap);
     } else {
-      output.get('history')?.swaps.push(swap);
+      const year = new Date(time).getFullYear().toString();
+      addYearsToOutput(year, swap);
     }
   });
 

package/src/utils/numbers.ts

@@ -4,8 +4,7 @@ import type { BestRouteResponse } from 'rango-sdk';
 
 import { BigNumber } from 'bignumber.js';
 
-export const percentToString = (p: number, fractions = 0): string =>
-  (p * 100).toFixed(fractions);
+import { TOOLTIP_DECIMALS } from '../constants/routing';
 
 export const secondsToString = (s: number): string => {
   const seconds = (s % 60).toString().padStart(2, '0');
@@ -96,13 +95,6 @@ export const numberToString = (
   );
 };
 
-export const convertBigNumberToHex = (
-  value: BigNumber,
-  decimals: number
-): string => {
-  return '0x' + value.shiftedBy(decimals).toString(16);
-};
-
 export const uint8ArrayToHex = (buffer: Uint8Array): string => {
   // buffer is an ArrayBuffer
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -110,43 +102,6 @@ export const uint8ArrayToHex = (buffer: Uint8Array): string => {
   return [...buffer].map((x) => x.toString(16).padStart(2, '0')).join('');
 };
 
-export function dollarToConciseString(num: number | undefined): string {
-  if (!num) {
-    return '-';
-  }
-  if (num < 1) {
-    return ' < 1$';
-  }
-  if (num < 1000) {
-    return numberToString(new BigNumber(num)) + '$';
-  }
-  if (num < 10_000) {
-    return parseInt((num / 100).toString()) / 10 + 'K';
-  }
-  if (num < 1_000_000) {
-    return parseInt((num / 1000).toString()) + 'K';
-  }
-  if (num < 100_000_000) {
-    return parseInt((num / 100000).toString()) / 10 + 'M';
-  }
-  return parseInt((num / 1000000).toString()) + 'M';
-}
-
-export function removeExtraDecimals(num: string, maxDecimals: number): string {
-  try {
-    if (!num.includes('.')) {
-      return num;
-    }
-    const [b, f] = num.split('.');
-    if (f && f.length > maxDecimals) {
-      return `${b}.${f.substring(0, maxDecimals)}`;
-    }
-    return num;
-  } catch (e) {
-    return num;
-  }
-}
-
 export const totalArrivalTime = (
   data: { estimatedTimeInSeconds: number | null }[] | undefined
 ) => data?.reduce((a, b) => a + (b.estimatedTimeInSeconds ?? 0), 0) || 0;
@@ -167,16 +122,11 @@ export const isPositiveNumber = (text?: string) =>
   !!text && parseFloat(text) > 0;
 10;
 
-export function limitDecimalPlaces(
-  numberString: string,
-  maxDecimalPlaces = 4
-): string {
-  const number = parseFloat(numberString);
-  if (isNaN(number)) {
-    return numberString;
-  } // Return the original string if it's not a valid number
-
-  const multiplier = Math.pow(10, maxDecimalPlaces);
-  const roundedNumber = Math.round(number * multiplier) / multiplier;
-  return roundedNumber.toString();
+export function formatTooltipNumbers(
+  number: BigNumber | string | number | null | undefined
+) {
+  return numberToString(number, TOOLTIP_DECIMALS, TOOLTIP_DECIMALS).replace(
+    /(?:\.0*|(\.\d+?)0*)$/,
+    '$1'
+  );
 }