@rango-dev/widget-embedded 0.29.1-next.2 → 0.29.1-next.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.29.1-next.2",
+  "version": "0.29.1-next.20",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,14 +25,14 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.4.0",
-    "@rango-dev/provider-all": "^0.34.1-next.0",
+    "@rango-dev/provider-all": "^0.34.1-next.7",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.34.1-next.1",
+    "@rango-dev/queue-manager-rango-preset": "^0.34.1-next.7",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/signer-solana": "^0.29.1-next.0",
-    "@rango-dev/ui": "^0.35.1-next.1",
-    "@rango-dev/wallets-react": "^0.20.1-next.0",
-    "@rango-dev/wallets-shared": "^0.34.1-next.0",
+    "@rango-dev/signer-solana": "^0.29.1-next.1",
+    "@rango-dev/ui": "^0.35.1-next.10",
+    "@rango-dev/wallets-react": "^0.20.1-next.5",
+    "@rango-dev/wallets-shared": "^0.34.1-next.5",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/QueueManager.tsx

@@ -12,6 +12,7 @@ import { convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-share
 import { isEvmBlockchain } from 'rango-types';
 import React, { useMemo } from 'react';
 
+import { eventEmitter } from './services/eventEmitter';
 import { useAppStore } from './store/AppStore';
 import { useUiStore } from './store/ui';
 import { useWalletsStore } from './store/wallets';
@@ -32,6 +33,9 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     return makeQueueDefinition({
       API_KEY: props.apiKey || getConfig('API_KEY'),
       BASE_URL: getConfig('BASE_URL'),
+      emitter: {
+        emit: eventEmitter.emit,
+      },
     });
   }, [props.apiKey]);
 

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -18,7 +18,13 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
@@ -87,10 +93,14 @@ export function ConfirmWalletsModal(props: PropTypes) {
 
   const isFirefox = navigator?.userAgent.includes('Firefox');
 
-  const quoteWallets = getQuoteWallets({
-    filter: 'all',
-    quote: selectedQuote,
-  });
+  const quoteWallets = useMemo(
+    () =>
+      getQuoteWallets({
+        filter: 'all',
+        quote: selectedQuote,
+      }),
+    [selectedQuote]
+  );
 
   const requiredWallets = getQuoteWallets({
     filter: 'required',
@@ -113,7 +123,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
           quoteWallets.includes(connectedWallet.chain)
         );
       }),
-    [connectedWallets.length, quoteWallets.length]
+    [connectedWallets, quoteWallets]
   );
 
   const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
@@ -333,7 +343,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       );
       return nextState;
     });
-  }, [connectedWallets.length, quoteWallets.length]);
+  }, [connectedWallets, quoteWallets]);
 
   useEffect(() => {
     const nextState: typeof nextSelectedWallets = [];
@@ -353,7 +363,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       });
       setNextSelectedWallets(nextState);
     }
-  }, [connectedWallets.length, nextSelectedWallets.length]);
+  }, [connectedWallets, nextSelectedWallets]);
 
   const modalContainer = document.getElementById(
     WIDGET_UI_ID.SWAP_BOX_ID
@@ -513,7 +523,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     />
                   </ListContainer>
                   {!isLastWallet && <Divider size={32} />}
-                  {isLastWallet && config?.customDestination && (
+                  {isLastWallet && config?.customDestination !== false && (
                     <CustomDestination>
                       <CustomCollapsible
                         onOpenChange={

package/src/components/HistoryGroupedList/HistoryGroupedList.tsx

@@ -15,7 +15,7 @@ import {
   TOKEN_AMOUNT_MIN_DECIMALS,
 } from '../../constants/routing';
 import { getContainer } from '../../utils/common';
-import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+import { numberToString } from '../../utils/numbers';
 
 import { calculateGroupsSoFar } from './HistoryGroupedList.helpers';
 import {
@@ -130,7 +130,7 @@ export function HistoryGroupedList(props: PropTypes) {
                     TOKEN_AMOUNT_MIN_DECIMALS,
                     TOKEN_AMOUNT_MAX_DECIMALS
                   ),
-                  realAmount: formatTooltipNumbers(swap.inputAmount),
+                  realAmount: swap.inputAmount,
                 },
                 to: {
                   token: {
@@ -147,10 +147,10 @@ export function HistoryGroupedList(props: PropTypes) {
                     TOKEN_AMOUNT_MIN_DECIMALS,
                     TOKEN_AMOUNT_MAX_DECIMALS
                   ),
-                  realAmount: formatTooltipNumbers(
+                  realAmount:
                     lastStep.outputAmount ||
-                      lastStep.expectedOutputAmountHumanReadable
-                  ),
+                    lastStep.expectedOutputAmountHumanReadable ||
+                    '',
                 },
               }}
             />

package/src/components/NotificationContent/NotificationContent.tsx

@@ -1,32 +1,13 @@
 import type { Notification } from '../../types/notification';
 
-import { i18n } from '@lingui/core';
-import { EventSeverity } from '@rango-dev/queue-manager-rango-preset';
-import {
-  ChainToken,
-  ChevronRightIcon,
-  Divider,
-  Typography,
-} from '@rango-dev/ui';
+import { Notifications } from '@rango-dev/ui';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
-
-import {
-  ClearAllButton,
-  Container,
-  Header,
-  IconContainer,
-  Images,
-  List,
-  ListItem,
-} from './NotificationContent.styles';
-import { NotificationNotFound } from './NotificationNotFound';
-
-const MAX_NOTIFICATIONS_DISPLAYED = 4;
+import { getBlockchainImage } from '../../utils/meta';
 
 export function NotificationContent() {
   const navigate = useNavigate();
@@ -36,102 +17,20 @@ export function NotificationContent() {
   const notifications: Notification[] = getNotifications();
   const blockchains = useAppStore().blockchains();
   const { findToken } = useAppStore();
-  const sortedNotification = notifications
-    .sort((a, b) => b.creationTime - a.creationTime)
-    .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
-  const handleOnClick = (requestId: Notification['requestId']) => {
+  const onClickItem = (requestId: Notification['requestId']) => {
     navigate(`${navigationRoutes.swaps}/${requestId}`);
   };
 
   return (
-    <Container>
-      {sortedNotification.length > 0 && (
-        <>
-          <Header>
-            <Typography variant="label" size="medium">
-              {i18n.t('Notifications')}
-            </Typography>
-            <ClearAllButton
-              variant="ghost"
-              size="xsmall"
-              onClick={clearNotifications}>
-              <Typography variant="body" size="xsmall">
-                {i18n.t('Clear all')}
-              </Typography>
-            </ClearAllButton>
-          </Header>
-          <Divider direction="vertical" size={4} />
-        </>
-      )}
-      {sortedNotification.length ? (
-        <List>
-          {sortedNotification.map((notificationItem, index) => {
-            const { route, requestId, event } = notificationItem;
-            const fromToken = findToken(route.from);
-
-            const fromBlockchain = blockchains.find(
-              (blockchainItem) => blockchainItem.name === route.from.blockchain
-            );
-
-            const toToken = findToken(route.to);
-
-            const toBlockchain = blockchains.find(
-              (blockchainItem) => blockchainItem.name === route.to.blockchain
-            );
-
-            return (
-              <React.Fragment key={requestId}>
-                {index > 0 && <Divider size={4} />}
-                <ListItem
-                  onClick={() => handleOnClick(requestId)}
-                  actionRequired={
-                    event.messageSeverity === EventSeverity.WARNING
-                  }
-                  title={
-                    <Typography
-                      variant="body"
-                      size="small"
-                      color={
-                        event.messageSeverity === EventSeverity.WARNING
-                          ? '$foreground'
-                          : '$neutral700'
-                      }>
-                      {i18n.t(event.message)}
-                    </Typography>
-                  }
-                  id={requestId}
-                  start={
-                    <Images>
-                      <div className="from-chain-token">
-                        <ChainToken
-                          tokenImage={fromToken ? fromToken.image : ''}
-                          chainImage={fromBlockchain ? fromBlockchain.logo : ''}
-                          size="small"
-                        />
-                      </div>
-                      <div className="to-chain-token">
-                        <ChainToken
-                          tokenImage={toToken ? toToken.image : ''}
-                          chainImage={toBlockchain ? toBlockchain.logo : ''}
-                          size="small"
-                        />
-                      </div>
-                    </Images>
-                  }
-                  end={
-                    <IconContainer>
-                      <ChevronRightIcon size={12} color="gray" />
-                    </IconContainer>
-                  }
-                />
-              </React.Fragment>
-            );
-          })}
-        </List>
-      ) : (
-        <NotificationNotFound />
-      )}
-    </Container>
+    <Notifications
+      list={notifications}
+      getBlockchainImage={(blockchain) =>
+        getBlockchainImage(blockchain, blockchains) ?? ''
+      }
+      getTokenImage={(token) => findToken(token)?.image ?? ''}
+      onClickItem={onClickItem}
+      onClearAll={clearNotifications}
+    />
   );
 }

package/src/components/Quote/Quote.tsx

@@ -8,10 +8,10 @@ import {
   Divider,
   FullExpandedQuote,
   InfoIcon,
+  NumericTooltip,
   QuoteTag,
   StepDetails,
   TokenAmount,
-  Tooltip,
   Typography,
 } from '@rango-dev/ui';
 import BigNumber from 'bignumber.js';
@@ -40,7 +40,6 @@ import {
   getSwapperDisplayName,
 } from '../../utils/meta';
 import {
-  formatTooltipNumbers,
   numberToString,
   roundedSecondsToString,
   totalArrivalTime,
@@ -186,14 +185,10 @@ 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
-              )
-            ),
+            realValue: index === 0 ? input.value : swap.fromAmount,
+            realUsdValue: new BigNumber(swap.from.usdPrice ?? 0)
+              .multipliedBy(swap.fromAmount)
+              .toString(),
           },
         },
         to: {
@@ -216,10 +211,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)
-            ),
+            realValue: swap.toAmount,
+            realUsdValue: new BigNumber(swap.to.usdPrice ?? 0)
+              .multipliedBy(swap.toAmount)
+              .toString(),
           },
         },
         state: stepState,
@@ -343,8 +338,8 @@ export function Quote(props: QuoteProps) {
       outputPrice={{
         value: roundedOutput,
         usdValue: roundedOutputUsdValue,
-        realValue: formatTooltipNumbers(output.value),
-        realUsdValue: formatTooltipNumbers(output.usdValue),
+        realValue: output.value,
+        realUsdValue: output.usdValue,
       }}
     />
   ) : (
@@ -414,8 +409,8 @@ export function Quote(props: QuoteProps) {
               <BasicInfoOutput size="small" variant="body">
                 {`${roundedInput} ${steps[0].from.token.displayName} = `}
               </BasicInfoOutput>
-              <Tooltip
-                content={formatTooltipNumbers(output.value)}
+              <NumericTooltip
+                content={output.value}
                 container={container}
                 open={!output.value ? false : undefined}>
                 <BasicInfoOutput size="small" variant="body">
@@ -424,16 +419,14 @@ export function Quote(props: QuoteProps) {
                     steps[steps.length - 1].to.token.displayName
                   }`}
                 </BasicInfoOutput>
-              </Tooltip>
+              </NumericTooltip>
             </ContainerInfoOutput>
-            <Tooltip
-              content={formatTooltipNumbers(output.usdValue)}
-              container={container}>
+            <NumericTooltip content={output.usdValue} container={container}>
               <Divider size={2} direction="horizontal" />
               <Typography color="$neutral600" size="xsmall" variant="body">
                 {`($${roundedOutputUsdValue})`}
               </Typography>
-            </Tooltip>
+            </NumericTooltip>
           </div>
         )}
         {type === 'list-item' && (
@@ -444,8 +437,8 @@ export function Quote(props: QuoteProps) {
             price={{
               value: roundedOutput,
               usdValue: roundedOutputUsdValue,
-              realValue: formatTooltipNumbers(output.value),
-              realUsdValue: formatTooltipNumbers(output.usdValue),
+              realValue: output.value,
+              realUsdValue: output.usdValue,
             }}
             token={{
               displayName: steps[numberOfSteps - 1].to.token.displayName,

package/src/components/Quote/QuoteCostDetails.tsx

@@ -8,13 +8,13 @@ import {
   CloseIcon,
   Divider,
   IconButton,
+  NumericTooltip,
   QuoteCost,
-  Tooltip,
   Typography,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
-import { NAME_OF_FEES } from '../../constants/quote';
+import { getFeeLabel } from '../../constants/quote';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -22,7 +22,7 @@ import {
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
 import { getContainer } from '../../utils/common';
-import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+import { numberToString } from '../../utils/numbers';
 import { getFeesGroup, getTotalFeesInUsd, getUsdFee } from '../../utils/swap';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
@@ -115,11 +115,9 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
                       variant="label"
                       size="medium"
                       color="neutral600">
-                      {NAME_OF_FEES[payableFeesKey as NameOfFees]}
+                      {getFeeLabel(payableFeesKey as NameOfFees, i18n.t)}
                     </Typography>
-                    <Tooltip
-                      content={formatTooltipNumbers(fee.amount)}
-                      container={container}>
+                    <NumericTooltip content={fee.amount} container={container}>
                       <Typography variant="label" size="medium">
                         {numberToString(
                           fee.amount,
@@ -134,7 +132,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
                         )}
                         )
                       </Typography>
-                    </Tooltip>
+                    </NumericTooltip>
                   </FeeSection>
                 );
               })
@@ -184,7 +182,10 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
               {Object.entries(feesGroup.nonePayable).map(
                 ([nonPayableFeesKey, fees], index) => {
                   const totalFeeInUsd = getTotalFeesInUsd(fees);
-                  const label = NAME_OF_FEES[nonPayableFeesKey as NameOfFees];
+                  const label = getFeeLabel(
+                    nonPayableFeesKey as NameOfFees,
+                    i18n.t
+                  );
                   const key = `non-payable-fee-${index}`;
                   return (
                     <NonPayableFee

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -22,7 +22,7 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
   return (
     <Layout
       header={{
-        title: i18n.t('Swap and Bridge'),
+        title: i18n.t('Swap Details'),
         suffix: <SuffixContainer />,
       }}>
       {showSkeleton && (

package/src/components/SwapDetails/SwapDetails.tsx

@@ -42,7 +42,6 @@ import { useQuoteStore } from '../../store/quote';
 import { useUiStore } from '../../store/ui';
 import { getContainer } from '../../utils/common';
 import {
-  formatTooltipNumbers,
   numberToString,
   roundedSecondsToString,
   totalArrivalTime,
@@ -206,14 +205,14 @@ export function SwapDetails(props: SwapDetailsProps) {
   );
 
   const realOutputUsdValue = outputAmount
-    ? formatTooltipNumbers(
-        new BigNumber(outputAmount).multipliedBy(lastStep.toUsdPrice || 0)
-      )
+    ? new BigNumber(outputAmount)
+        .multipliedBy(lastStep.toUsdPrice || 0)
+        .toString()
     : '';
 
-  const realInputUsdValue = formatTooltipNumbers(
-    new BigNumber(swap.inputAmount).multipliedBy(firstStep.fromUsdPrice || 0)
-  );
+  const realInputUsdValue = new BigNumber(swap.inputAmount)
+    .multipliedBy(firstStep.fromUsdPrice || 0)
+    .toString();
 
   const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
 
@@ -272,7 +271,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   return (
     <Layout
       header={{
-        title: i18n.t('Swap and Bridge'),
+        title: i18n.t('Swap Details'),
         onCancel:
           swap.status === 'running' ? () => setModalState('cancel') : undefined,
         suffix: swap.status !== 'running' && (
@@ -338,7 +337,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </div>
           <div className={rowStyles()}>
             <Typography variant="label" size="large" color="neutral700">
-              {`${i18n.t(swap.finishTime ? 'Finished at' : 'Created at')}:`}
+              {swap.finishTime ? i18n.t('Finished at') : i18n.t('Created at')}
             </Typography>
             <Typography variant="label" size="small" color="neutral700">
               {swapDate}
@@ -458,7 +457,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         )}
         usdValue={outputUsdValue}
         realUsdValue={realOutputUsdValue}
-        realValue={formatTooltipNumbers(outputAmount)}
+        realValue={outputAmount || ''}
         percentageChange={numberToString(
           percentageChange,
           PERCENTAGE_CHANGE_MIN_DECIMALS,

package/src/components/TokenList/TokenList.tsx

@@ -110,7 +110,7 @@ export function TokenList(props: PropTypes) {
 
   useEffect(() => {
     setTokens(list.slice(0, PAGE_SIZE));
-  }, [list.length]);
+  }, [list.length, selectedBlockchain]);
 
   const renderList = () => {
     if (!tokens.length && !!searchedFor) {
@@ -136,17 +136,17 @@ export function TokenList(props: PropTypes) {
           ) as BlockchainMeta;
           const colors = createTintsAndShades(blockchain.color, 'main');
           const customCssForTag = {
-            $$color: colors.main250,
+            $$color: colors.main150,
             [`.${darkTheme} &`]: {
-              $$color: colors.main850,
+              $$color: colors.main750,
             },
             backgroundColor: '$$color',
           };
 
           const customCssForTagTitle = {
-            $$color: colors.main600,
+            $$color: colors.main750,
             [`.${darkTheme} &`]: {
-              $$color: colors.main200,
+              $$color: colors.main150,
             },
             color: '$$color',
           };

package/src/components/WalletNamespacesModal/WalletNamespacesModal.tsx

@@ -1,4 +1,5 @@
 import type { PropTypes } from './WalletNamespacesModal.types';
+import type { Namespace } from '@rango-dev/wallets-shared';
 import type { BlockchainMeta } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
@@ -11,7 +12,7 @@ import {
   Radio,
   RadioRoot,
 } from '@rango-dev/ui';
-import { Namespace } from '@rango-dev/wallets-shared';
+import { namespaceMainBlockchain } from '@rango-dev/wallets-shared';
 import React, { useMemo, useState } from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
@@ -25,15 +26,6 @@ import {
 
 import { NamespaceList } from './WalletNamespacesModal.styles';
 
-export const namespaceMainBlockchain: Record<Namespace, string> = {
-  [Namespace.Evm]: 'ETH',
-  [Namespace.Solana]: 'SOLANA',
-  [Namespace.Cosmos]: 'COSMOS',
-  [Namespace.Utxo]: 'BTC',
-  [Namespace.Starknet]: 'STARKNET',
-  [Namespace.Tron]: 'TRON',
-};
-
 const getBlockchainLogo = (
   blockchains: BlockchainMeta[],
   blockchainName: string

package/src/constants/quote.ts

@@ -1,7 +1,6 @@
+import type { I18n } from '@lingui/core';
 import type { SwapFee, TagValue } from 'rango-sdk';
 
-import { i18n } from '@lingui/core';
-
 export type NameOfFees =
   | 'Swapper Fee'
   | 'Affiliate Fee'
@@ -9,13 +8,16 @@ export type NameOfFees =
   | 'Rango Fee'
   | 'Network Fee';
 
-export const NAME_OF_FEES: Record<NameOfFees, string> = {
-  'Network Fee': i18n.t('Network Fee'),
-  'Swapper Fee': i18n.t('Protocol Fee'),
-  'Affiliate Fee': i18n.t('Affiliate Fee'),
-  'Outbound network fee': i18n.t('Outbound Fee'),
-  'Rango Fee': i18n.t('Rango Fee'),
-};
+export function getFeeLabel(fee: NameOfFees, t: I18n['t']): string {
+  const data: Record<NameOfFees, string> = {
+    'Network Fee': t('Network Fee'),
+    'Swapper Fee': t('Protocol Fee'),
+    'Affiliate Fee': t('Affiliate Fee'),
+    'Outbound network fee': t('Outbound Fee'),
+    'Rango Fee': t('Rango Fee'),
+  };
+  return data[fee];
+}
 
 export type FeesGroup = {
   payable: { [key in NameOfFees]?: SwapFee[] };

package/src/constants/routing.ts

@@ -15,5 +15,3 @@ 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/Inputs/Inputs.tsx

@@ -17,7 +17,7 @@ import {
 import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
-import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+import { numberToString } from '../../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
 import { canComputePriceImpact } from '../../utils/swap';
 import { formatBalance, isFetchingBalance } from '../../utils/wallets';
@@ -97,7 +97,7 @@ export function Inputs(props: PropTypes) {
                 ),
             realUsdValue: priceImpactInputCanNotBeComputed
               ? undefined
-              : formatTooltipNumbers(inputUsdValue),
+              : inputUsdValue?.toString(),
             error: priceImpactInputCanNotBeComputed
               ? errorMessages().unknownPriceError.impactTitle
               : undefined,
@@ -144,10 +144,10 @@ export function Inputs(props: PropTypes) {
                 USD_VALUE_MIN_DECIMALS,
                 USD_VALUE_MAX_DECIMALS
               ),
-          realValue: formatTooltipNumbers(outputAmount),
+          realValue: outputAmount?.toString(),
           realUsdValue: priceImpactOutputCanNotBeComputed
             ? undefined
-            : formatTooltipNumbers(outputUsdValue),
+            : outputUsdValue?.toString(),
           error: priceImpactOutputCanNotBeComputed
             ? errorMessages().unknownPriceError.impactTitle
             : undefined,