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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.29.1-next.19",
+  "version": "0.29.1-next.20",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@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.1",
-    "@rango-dev/ui": "^0.35.1-next.9",
+    "@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",

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/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/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,

package/src/utils/numbers.ts

@@ -4,8 +4,6 @@ import type { BestRouteResponse } from 'rango-sdk';
 
 import { BigNumber } from 'bignumber.js';
 
-import { TOOLTIP_DECIMALS } from '../constants/routing';
-
 /*
  * if time > 1h -> rounded with 5 minutes precision
  * if time < 1h -> rounded with 15 seconds precision
@@ -127,13 +125,3 @@ export const containsText = (text: string, searchText: string) =>
 
 export const isPositiveNumber = (text?: string) =>
   !!text && parseFloat(text) > 0;
-10;
-
-export function formatTooltipNumbers(
-  number: BigNumber | string | number | null | undefined
-) {
-  return numberToString(number, TOOLTIP_DECIMALS, TOOLTIP_DECIMALS).replace(
-    /(?:\.0*|(\.\d+?)0*)$/,
-    '$1'
-  );
-}