@rango-dev/widget-embedded 0.12.1-next.11 → 0.12.1-next.13

package/src/pages/ConfirmSwapPage.tsx

@@ -4,7 +4,6 @@ import type {
   ConfirmSwapFetchResult,
 } from '../hooks/useConfirmSwap';
 import type { WidgetConfig } from '../types';
-import type { PriceImpactWarningLevel } from '@rango-dev/ui/dist/widget/ui/src/components/PriceImpact/PriceImpact.types';
 
 import { i18n } from '@lingui/core';
 import { useManager } from '@rango-dev/queue-manager-react';
@@ -38,7 +37,16 @@ import { Layout } from '../components/Layout';
 import { NoRoutes } from '../components/NoRoutes';
 import { getConfirmSwapErrorMessage } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { HIGHT_PRICE_IMPACT, LOW_PRICE_IMPACT } from '../constants/routing';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../constants/routing';
 import { getRouteWarningMessage } from '../constants/warnings';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useBestRouteStore } from '../store/bestRoute';
@@ -56,6 +64,7 @@ import {
   secondsToString,
   totalArrivalTime,
 } from '../utils/numbers';
+import { getPriceImpactLevel } from '../utils/routing';
 import { getPercentageChange, getTotalFeeInUsd } from '../utils/swap';
 
 const Container = styled('div', {
@@ -117,7 +126,10 @@ export function ConfirmSwapPage(props: PropTypes) {
   const showWalletsOnInit = !routeWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  const { tokens } = useMetaStore.use.meta();
+  const {
+    meta: { tokens },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
   const { manager } = useManager();
@@ -133,6 +145,8 @@ export function ConfirmSwapPage(props: PropTypes) {
       error: null,
       warnings: null,
     });
+  const showSkeleton =
+    fetchingConfirmationRoute || loadingMetaStatus === 'loading';
   const showNoRouteFound =
     !fetchingConfirmationRoute &&
     confirmSwapResult.error &&
@@ -152,15 +166,11 @@ export function ConfirmSwapPage(props: PropTypes) {
       inputUsdValue?.toNumber() ?? 0,
       outputUsdValue?.toNumber() ?? 0
     ),
-    2,
-    2
+    PERCENTAGE_CHANGE_MIN_DECIMALS,
+    PERCENTAGE_CHANGE_MAX_DECIMALS
   );
-  let warningLevel: PriceImpactWarningLevel = undefined;
-  if (parseFloat(percentageChange) >= HIGHT_PRICE_IMPACT) {
-    warningLevel = 'high';
-  } else if (parseFloat(percentageChange) >= LOW_PRICE_IMPACT) {
-    warningLevel = 'low';
-  }
+
+  const warningLevel = getPriceImpactLevel(parseFloat(percentageChange));
 
   const onConfirmSwap: ConfirmSwap['fetch'] = async ({
     selectedWallets,
@@ -450,22 +460,40 @@ export function ConfirmSwapPage(props: PropTypes) {
             <Divider size={12} />
           </>
         )}
-        {fetchingConfirmationRoute && (
-          <BestRouteSkeleton type="swap-preview" expanded />
-        )}
+        {showSkeleton && <BestRouteSkeleton type="swap-preview" expanded />}
         {showBestRoute && (
           <BestRoute
             expanded={true}
             steps={formatBestRoute(bestRoute) ?? []}
             input={{
-              value: numberToString(inputAmount, 6, 6),
-              usdValue: numberToString(inputUsdValue, 6, 6),
+              value: numberToString(
+                inputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                inputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
             }}
             output={{
-              value: numberToString(outputAmount, 6, 6),
-              usdValue: numberToString(outputUsdValue, 6, 6),
+              value: numberToString(
+                outputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                outputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
             }}
-            totalFee={numberToString(totalFeeInUsd, 0, 2)}
+            totalFee={numberToString(
+              totalFeeInUsd,
+              GAS_FEE_MIN_DECIMALS,
+              GAS_FEE_MAX_DECIMALS
+            )}
             totalTime={secondsToString(totalArrivalTime(bestRoute))}
             recommended={true}
             type="swap-preview"

package/src/pages/Home.tsx

@@ -22,6 +22,18 @@ import { RouteErrors } from '../components/RouteErrors';
 import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
 import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import {
+  BALANCE_MAX_DECIMALS,
+  BALANCE_MIN_DECIMALS,
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../constants/routing';
 import { useSwapInput } from '../hooks/useSwapInput';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
@@ -33,7 +45,7 @@ import {
   secondsToString,
   totalArrivalTime,
 } from '../utils/numbers';
-import { getFormatedBestRoute } from '../utils/routing';
+import { getFormattedBestRoute, getPriceImpactLevel } from '../utils/routing';
 import {
   canComputePriceImpact,
   getOutputRatio,
@@ -77,12 +89,6 @@ const FooterAlert = styled('div', {
   display: 'flex',
 });
 
-const BALANCE_PRECISION = 8;
-const TWO_DECIMAL = 2;
-const MAX_DECIMAL = 6;
-const MIN_DECIMAL = 0;
-const WARNING_LEVEL_LIMIT = -10;
-
 export function Home() {
   const navigate = useNavigate();
   const {
@@ -160,7 +166,8 @@ export function Home() {
             fromToken?.symbol,
             fromToken?.address
           )?.amount || '0',
-          BALANCE_PRECISION
+          BALANCE_MIN_DECIMALS,
+          BALANCE_MAX_DECIMALS
         )
       : '0';
 
@@ -208,7 +215,11 @@ export function Home() {
         price: {
           value:
             index === 0
-              ? numberToString(inputAmount, MIN_DECIMAL, TWO_DECIMAL)
+              ? numberToString(
+                  inputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
+                )
               : swap.fromAmount,
         },
       },
@@ -240,7 +251,9 @@ export function Home() {
                   <Divider direction="horizontal" size={8} />
                   <Typography size="xsmall" variant="body" color="neutral900">
                     {`Yours: ${numberToString(
-                      swapHasError?.fromAmount || null
+                      swapHasError?.fromAmount || null,
+                      TOKEN_AMOUNT_MIN_DECIMALS,
+                      TOKEN_AMOUNT_MAX_DECIMALS
                     )} ${swap?.from.symbol}`}
                   </Typography>
                 </FooterAlert>
@@ -253,7 +266,7 @@ export function Home() {
 
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
 
-  const bestRouteData = getFormatedBestRoute(bestRoute);
+  const bestRouteData = getFormattedBestRoute(bestRoute);
 
   return (
     <Layout
@@ -316,9 +329,13 @@ export function Home() {
                 value: inputAmount,
                 usdValue: priceImpactInputCanNotBeComputed
                   ? undefined
-                  : numberToString(inputUsdValue),
+                  : numberToString(
+                      inputUsdValue,
+                      USD_VALUE_MIN_DECIMALS,
+                      USD_VALUE_MAX_DECIMALS
+                    ),
                 error: priceImpactInputCanNotBeComputed
-                  ? errorMessages.unknownPriceError.impacTitle
+                  ? errorMessages.unknownPriceError.impactTitle
                   : undefined,
               }}
               disabled={loadingMetaStatus === 'failed'}
@@ -344,19 +361,31 @@ export function Home() {
             }}
             percentageChange={
               !!percentageChange?.lt(0)
-                ? numberToString(percentageChange, MIN_DECIMAL, TWO_DECIMAL)
+                ? numberToString(
+                    percentageChange,
+                    PERCENTAGE_CHANGE_MIN_DECIMALS,
+                    PERCENTAGE_CHANGE_MAX_DECIMALS
+                  )
                 : null
             }
-            warningLevel={
-              !!percentageChange?.lt(WARNING_LEVEL_LIMIT) ? 'high' : 'low'
-            }
+            warningLevel={getPriceImpactLevel(
+              percentageChange?.toNumber() ?? 0
+            )}
             price={{
-              value: numberToString(outputAmount),
+              value: numberToString(
+                outputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
               usdValue: priceImpactOutputCanNotBeComputed
                 ? undefined
-                : numberToString(outputUsdValue),
+                : numberToString(
+                    outputUsdValue,
+                    USD_VALUE_MIN_DECIMALS,
+                    USD_VALUE_MAX_DECIMALS
+                  ),
               error: priceImpactOutputCanNotBeComputed
-                ? errorMessages.unknownPriceError.impacTitle
+                ? errorMessages.unknownPriceError.impactTitle
                 : undefined,
             }}
             onClickToken={() => navigate('to-swap')}
@@ -377,20 +406,40 @@ export function Home() {
               type="basic"
               recommended={true}
               input={{
-                value: numberToString(inputAmount, MIN_DECIMAL, MAX_DECIMAL),
-                usdValue: numberToString(inputUsdValue),
+                value: numberToString(
+                  inputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
+                ),
+                usdValue: numberToString(
+                  inputUsdValue,
+                  USD_VALUE_MIN_DECIMALS,
+                  USD_VALUE_MAX_DECIMALS
+                ),
               }}
               output={{
-                value: numberToString(outputAmount),
-                usdValue: numberToString(outputUsdValue),
+                value: numberToString(
+                  outputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
+                ),
+                usdValue: numberToString(
+                  outputUsdValue,
+                  USD_VALUE_MIN_DECIMALS,
+                  USD_VALUE_MAX_DECIMALS
+                ),
               }}
               steps={getBestRouteSteps(bestRouteData.result.swaps)}
               percentageChange={numberToString(
                 percentageChange,
-                MIN_DECIMAL,
-                TWO_DECIMAL
+                PERCENTAGE_CHANGE_MIN_DECIMALS,
+                PERCENTAGE_CHANGE_MAX_DECIMALS
+              )}
+              totalFee={numberToString(
+                totalFeeInUsd,
+                GAS_FEE_MIN_DECIMALS,
+                GAS_FEE_MAX_DECIMALS
               )}
-              totalFee={numberToString(totalFeeInUsd, MIN_DECIMAL, TWO_DECIMAL)}
               totalTime={secondsToString(totalArrivalTime(bestRoute))}
             />
           </BestRouteContainer>
@@ -405,21 +454,20 @@ export function Home() {
           </>
         ) : null}
       </Container>
-      {!fetchingBestRoute && (
-        <RouteErrors
-          openModal={openWarningModal}
-          onToggle={setOpenWarningModal}
-          totalFeeInUsd={totalFeeInUsd}
-          outputUsdValue={outputUsdValue}
-          inputUsdValue={inputUsdValue}
-          percentageChange={percentageChange}
-          highValueLoss={highValueLoss}
-          priceImpactCanNotBeComputed={
-            priceImpactInputCanNotBeComputed ||
-            priceImpactOutputCanNotBeComputed
-          }
-        />
-      )}
+      <RouteErrors
+        openModal={openWarningModal}
+        onToggle={setOpenWarningModal}
+        totalFeeInUsd={totalFeeInUsd}
+        outputUsdValue={outputUsdValue}
+        inputUsdValue={inputUsdValue}
+        percentageChange={percentageChange}
+        highValueLoss={highValueLoss}
+        priceImpactCanNotBeComputed={
+          priceImpactInputCanNotBeComputed || priceImpactOutputCanNotBeComputed
+        }
+        loading={fetchingBestRoute || loadingMetaStatus === 'loading'}
+        extraSpace={!!bestRoute?.result || !bestRoute}
+      />
     </Layout>
   );
 }

package/src/types/config.ts

@@ -38,6 +38,8 @@ export type WidgetColors = {
  * border color
  * @property {number} borderRadius - `borderRadius` is a property of the `WidgetTheme` type that
  * specifies the radius of the corners of a widget.
+ * @property {number} secondaryBorderRadius - `secondaryBorderRadius` is a property of the `WidgetTheme` type that
+ * specifies the radius of the buttons of a widget.
  * @property {number} width - The `width` property is a number that represents the width of the widget.
  * @property {number} height - The `height` property is a number that specifies the height of the widget.
  * @property {boolean} singleTheme - The `singleTheme` property is a boolean that specifies the theme is support dark and light or only light.
@@ -47,6 +49,7 @@ export type WidgetTheme = {
   fontFamily?: string;
   colors?: { light: WidgetColors; dark: WidgetColors };
   borderRadius?: number;
+  secondaryBorderRadius?: number;
   width?: number;
   height?: number;
   singleTheme?: boolean;

package/src/utils/configs.ts

@@ -28,3 +28,6 @@ export function initConfig(nextConfigs: Configs) {
   configs = clonedConfigs;
   return configs;
 }
+
+export const DEFAULT_PRIMARY_RADIUS = 20;
+export const DEFAULT_SECONDARY_RADIUS = 25;

package/src/utils/routing.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { BestRouteEqualityParams, Wallet } from '../types';
 import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import type { PriceImpactWarningLevel } from '@rango-dev/ui';
 import type {
   SimulationAssetAndAmount,
   SimulationValidationStatus,
@@ -9,6 +10,15 @@ import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 
 import BigNumber from 'bignumber.js';
 
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  HIGHT_PRICE_IMPACT,
+  LOW_PRICE_IMPACT,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../constants/routing';
+
 import { areEqual } from './common';
 import { numberToString } from './numbers';
 
@@ -149,43 +159,63 @@ export function isRouteParametersChanged(params: BestRouteEqualityParams) {
   return false;
 }
 
-export function getFormatedBestRoute(
+export function getFormattedBestRoute(
   bestRoute: BestRouteResponse | null
 ): BestRouteResponse | null {
   if (!bestRoute) {
     return null;
   }
 
-  const formatedSwaps = (bestRoute.result?.swaps || []).map((swap) => ({
+  const formattedSwaps = (bestRoute.result?.swaps || []).map((swap) => ({
     ...swap,
-    fromAmount: numberToString(swap.fromAmount, 6, 6),
-    toAmount: numberToString(swap.toAmount, 6, 6),
+    fromAmount: numberToString(
+      swap.fromAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
+    toAmount: numberToString(
+      swap.toAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
   }));
 
   return {
     ...bestRoute,
     ...(bestRoute.result && {
-      result: { ...bestRoute.result, swaps: formatedSwaps },
+      result: { ...bestRoute.result, swaps: formattedSwaps },
     }),
   };
 }
 
-export function getFormatedPendingSwap(pendingSwap: PendingSwap): PendingSwap {
-  const formatedSteps = pendingSwap.steps.map((step) => ({
+export function getFormattedPendingSwap(pendingSwap: PendingSwap): PendingSwap {
+  const formattedSteps = pendingSwap.steps.map((step) => ({
     ...step,
-    feeInUsd: numberToString(step.feeInUsd, 4, 4),
-    outputAmount: numberToString(step.outputAmount, 6, 6),
+    feeInUsd: numberToString(
+      step.feeInUsd,
+      GAS_FEE_MIN_DECIMALS,
+      GAS_FEE_MAX_DECIMALS
+    ),
+    outputAmount: numberToString(
+      step.outputAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
     expectedOutputAmountHumanReadable: numberToString(
       step.expectedOutputAmountHumanReadable,
-      6,
-      6
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
     ),
   }));
 
   return {
     ...pendingSwap,
-    inputAmount: numberToString(pendingSwap.inputAmount, 6, 6),
-    steps: formatedSteps,
+    inputAmount: numberToString(
+      pendingSwap.inputAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
+    steps: formattedSteps,
   };
 }
 
@@ -199,3 +229,16 @@ export const getBestRouteStatus = (loading: boolean, error: boolean) => {
   }
   return 'success';
 };
+
+export function getPriceImpactLevel(
+  priceImpact: number
+): PriceImpactWarningLevel {
+  let warningLevel: PriceImpactWarningLevel = undefined;
+  if (priceImpact <= LOW_PRICE_IMPACT && priceImpact > HIGHT_PRICE_IMPACT) {
+    warningLevel = 'low';
+  } else if (priceImpact <= HIGHT_PRICE_IMPACT) {
+    warningLevel = 'high';
+  }
+
+  return warningLevel;
+}

package/src/utils/swap.ts

@@ -23,6 +23,12 @@ import { isValidAddress } from '../components/ConfirmWalletsModal/ConfirmWallets
 import { errorMessages } from '../constants/errors';
 import { swapButtonTitles } from '../constants/messages';
 import { ZERO } from '../constants/numbers';
+import {
+  BALANCE_MAX_DECIMALS,
+  BALANCE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../constants/routing';
 import { useMetaStore } from '../store/meta';
 import { ButtonState } from '../types';
 
@@ -112,26 +118,34 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
   let fromAmountRangeError = '';
   let recommendation = '';
   if (!isExclusive && !!minimum && minimum.gt(swap.fromAmount)) {
-    fromAmountRangeError = `Required: >= ${numberToString(minimum)} ${
-      swap.from.symbol
-    }`;
+    fromAmountRangeError = `Required: >= ${numberToString(
+      minimum,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    )} ${swap.from.symbol}`;
     recommendation = errorMessages.bridgeLimitErrors.increaseAmount;
   } else if (isExclusive && !!minimum && minimum.gte(swap.fromAmount)) {
-    fromAmountRangeError = `Required: > ${numberToString(minimum)} ${
-      swap.from.symbol
-    }`;
+    fromAmountRangeError = `Required: > ${numberToString(
+      minimum,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    )} ${swap.from.symbol}`;
     recommendation = errorMessages.bridgeLimitErrors.increaseAmount;
   }
 
   if (!isExclusive && !!maximum && maximum.lt(swap.fromAmount)) {
-    fromAmountRangeError = `Required: <= ${numberToString(maximum)} ${
-      swap.from.symbol
-    }`;
+    fromAmountRangeError = `Required: <= ${numberToString(
+      maximum,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    )} ${swap.from.symbol}`;
     recommendation = errorMessages.bridgeLimitErrors.decreaseAmount;
   } else if (isExclusive && !!maximum && maximum.lte(swap.fromAmount)) {
-    fromAmountRangeError = `Required: < ${numberToString(maximum)} ${
-      swap.from.symbol
-    }`;
+    fromAmountRangeError = `Required: < ${numberToString(
+      maximum,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    )} ${swap.from.symbol}`;
     recommendation = errorMessages.bridgeLimitErrors.decreaseAmount;
   }
 
@@ -492,14 +506,14 @@ export function getRouteOutputAmount(route: BestRouteResponse | null) {
 }
 
 export function getPercentageChange(
-  oldValue: string | number | null,
-  newValue: string | number | null
+  inputUsdValue: string | number | null,
+  outputUsdValue: string | number | null
 ) {
-  if (!oldValue || !newValue) {
+  if (!inputUsdValue || !outputUsdValue) {
     return null;
   }
-  return new BigNumber(newValue)
-    .div(new BigNumber(oldValue))
+  return new BigNumber(outputUsdValue)
+    .div(new BigNumber(inputUsdValue))
     .minus(1)
     .multipliedBy(100);
 }
@@ -544,13 +558,15 @@ export function getBalanceWarnings(
         new BigNumber(asset.currentAmount.amount).shiftedBy(
           -asset.currentAmount.decimals
         ),
-        8
+        BALANCE_MIN_DECIMALS,
+        BALANCE_MAX_DECIMALS
       );
       const requiredAmount = numberToString(
         new BigNumber(asset.requiredAmount.amount).shiftedBy(
           -asset.requiredAmount.decimals
         ),
-        8
+        BALANCE_MIN_DECIMALS,
+        BALANCE_MAX_DECIMALS
       );
       let reason = '';
       if (asset.reason === 'FEE') {