@rango-dev/widget-embedded 0.12.1-next.9 → 0.13.0

package/src/components/RouteErrors/RouteErrors.tsx

@@ -1,6 +1,6 @@
 import type { PropTypes } from './RouteErrors.types';
 
-import { Alert, InfoIcon } from '@rango-dev/ui';
+import { Alert, Divider, InfoIcon } from '@rango-dev/ui';
 import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
@@ -23,37 +23,48 @@ export function RouteErrors(props: PropTypes) {
     totalFeeInUsd,
     outputUsdValue,
     inputUsdValue,
+    loading,
+    extraSpace,
   } = props;
   const error = hasLimitError(bestRoute);
   const { recommendation } = LimitErrorMessage(bestRoute);
 
+  const showWarnings = !error && (highValueLoss || priceImpactCanNotBeComputed);
+  const showAlerts = showWarnings || error;
+
   return (
     <>
-      <Alerts>
-        {!error && (highValueLoss || priceImpactCanNotBeComputed) && (
-          <>
-            <Alert
-              title={
-                highValueLoss
-                  ? errorMessages.highValueLossError.title
-                  : errorMessages.unknownPriceError.title
-              }
-              type={
-                highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
-                  ? 'error'
-                  : 'warning'
-              }
-              variant="alarm"
-              action={
-                <Action onClick={() => onToggle(true)}>
-                  <InfoIcon size={12} color="gray" />
-                </Action>
-              }
-            />
-          </>
-        )}
-        {error && <Alert type="error" variant="alarm" title={recommendation} />}
-      </Alerts>
+      {(loading || (extraSpace && !showAlerts)) && <Divider size={20} />}
+      {showAlerts && (
+        <Alerts>
+          {showWarnings && (
+            <>
+              <Alert
+                title={
+                  highValueLoss
+                    ? errorMessages.highValueLossError.title
+                    : errorMessages.unknownPriceError.title
+                }
+                type={
+                  highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
+                    ? 'error'
+                    : 'warning'
+                }
+                variant="alarm"
+                action={
+                  <Action onClick={() => onToggle(true)}>
+                    <InfoIcon size={12} color="gray" />
+                  </Action>
+                }
+              />
+            </>
+          )}
+          {error && (
+            <Alert type="error" variant="alarm" title={recommendation} />
+          )}
+        </Alerts>
+      )}
+
       <RouteErrorsModal
         highValueLoss={highValueLoss}
         open={openModal}

package/src/components/RouteErrors/RouteErrors.types.ts

@@ -9,11 +9,13 @@ export interface PropTypes {
   percentageChange: BigNumber | null;
   highValueLoss: boolean;
   priceImpactCanNotBeComputed: boolean;
+  loading: boolean;
+  extraSpace: boolean;
 }
 
 type ModalPropTypesKeys = keyof Omit<
   PropTypes,
-  'priceImpactCanNotBeComputed' | 'openModal'
+  'priceImpactCanNotBeComputed' | 'openModal' | 'extraSpace' | 'loading'
 >;
 
 export type ModalPropTypes = Pick<PropTypes, ModalPropTypesKeys> & {

package/src/components/RouteErrors/RouteErrorsModal.tsx

@@ -1,5 +1,6 @@
 import type { ModalPropTypes } from './RouteErrors.types';
 
+import { i18n } from '@lingui/core';
 import {
   Button,
   Divider,
@@ -13,15 +14,20 @@ import { useNavigate } from 'react-router-dom';
 
 import { errorMessages } from '../../constants/errors';
 import { navigationRoutes } from '../../constants/navigationRoutes';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  HIGHT_PRICE_IMPACT,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
 import { numberToString } from '../../utils/numbers';
 
 import { Flex } from './RouteErrors.styles';
 import { RouteErrorsModalItem } from './RouteErrorsModalItem';
 
-const WARNING_LEVEL_LIMIT = -10;
-const MAX_DECIMAL = 2;
-const MIN_DECIMAL = 0;
-
 export function RouteErrorsModal(props: ModalPropTypes) {
   const {
     highValueLoss,
@@ -34,19 +40,41 @@ export function RouteErrorsModal(props: ModalPropTypes) {
   } = props;
   const navigate = useNavigate();
   const type =
-    highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
+    highValueLoss && !!percentageChange?.lt(HIGHT_PRICE_IMPACT)
       ? 'error'
       : 'warning';
   const highValueLossData = [
-    { title: 'Swapping', value: numberToString(inputUsdValue) },
     {
-      title: 'Gas cost',
-      value: numberToString(totalFeeInUsd, MIN_DECIMAL, MAX_DECIMAL),
+      title: i18n.t('Swapping'),
+      value: numberToString(
+        inputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Gas cost'),
+      value: numberToString(
+        totalFeeInUsd,
+        GAS_FEE_MIN_DECIMALS,
+        GAS_FEE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Receiving'),
+      value: numberToString(
+        outputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
     },
-    { title: 'Receiving', value: numberToString(outputUsdValue) },
     {
-      title: 'Price impact',
-      value: numberToString(percentageChange, MIN_DECIMAL, MAX_DECIMAL),
+      title: i18n.t('Price impact'),
+      value: numberToString(
+        percentageChange,
+        PERCENTAGE_CHANGE_MIN_DECIMALS,
+        PERCENTAGE_CHANGE_MAX_DECIMALS
+      ),
       valueColor: `${type}500`,
     },
   ];
@@ -59,13 +87,13 @@ export function RouteErrorsModal(props: ModalPropTypes) {
       {highValueLoss ? (
         <MessageBox
           type={type}
-          title={errorMessages.highValueLossError.impacTitle}
+          title={errorMessages.highValueLossError.impactTitle}
           description={errorMessages.highValueLossError.description}
         />
       ) : (
         <MessageBox
           type={type}
-          title={errorMessages.unknownPriceError.impacTitle}
+          title={errorMessages.unknownPriceError.impactTitle}
           description={errorMessages.unknownPriceError.description}
         />
       )}
@@ -73,7 +101,7 @@ export function RouteErrorsModal(props: ModalPropTypes) {
         <Flex>
           <Divider size={20} />
           <Typography size="small" variant="title">
-            Details
+            {i18n.t('Details')}
           </Typography>
           <Flex>
             {highValueLossData.map((item, index) => {

package/src/components/SettingsContainer/SettingsContainer.style.ts

@@ -2,6 +2,7 @@ import { styled } from '@rango-dev/ui';
 
 export const SettingsContainer = styled('div', {
   height: '100%',
+  overflow: 'hidden',
 });
 
 export const LiquiditySourceList = styled('ul', {
@@ -9,15 +10,9 @@ export const LiquiditySourceList = styled('ul', {
   margin: 0,
   listStyle: 'none',
   height: '100%',
-  overflowY: 'visible',
+  overflowY: 'auto',
 });
 
-export const LiquiditySourceDivider = styled('li', {
-  margin: '0 auto',
-  width: '100%',
-  height: '1px',
-  backgroundColor: '$neutral300',
-});
 export const LiquiditySourceSuffix = styled('div', {
   width: 80,
   display: 'flex',

package/src/components/SettingsContainer/index.ts

@@ -1,6 +1,5 @@
 export {
   SettingsContainer,
-  LiquiditySourceDivider,
   LiquiditySourceList,
   LiquiditySourceSuffix,
   NotFoundContainer,

package/src/components/Slippage/Slippage.tsx

@@ -15,6 +15,7 @@ import {
   SLIPPAGES,
 } from '../../constants/swapSettings';
 import { useSettingsStore } from '../../store/settings';
+import { getContainer } from '../../utils/common';
 
 import { BaseContainer, Head, SlippageChipsContainer } from './Slippage.styles';
 import { SlippageTooltipContent } from './SlippageTooltipContent';
@@ -32,7 +33,10 @@ export function Slippage() {
           {i18n.t('Slippage tolerance per swap')}
         </Typography>
         <Divider direction="horizontal" size={4} />
-        <Tooltip side="top" content={<SlippageTooltipContent />}>
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          content={<SlippageTooltipContent />}>
           <InfoIcon color="gray" />
         </Tooltip>
       </Head>
@@ -82,7 +86,7 @@ export function Slippage() {
               </Typography>
             )
           }
-          placeholder="Custom"
+          placeholder={i18n.t('Custom')}
         />
       </SlippageChipsContainer>
     </BaseContainer>

package/src/components/Slippage/SlippageTooltipContent.tsx

@@ -7,7 +7,7 @@ import { SlippageTooltipContainer } from './Slippage.styles';
 export function SlippageTooltipContent() {
   return (
     <SlippageTooltipContainer>
-      <Typography variant="label" size="small" color="neutral900">
+      <Typography variant="label" size="medium" color="neutral900">
         {i18n.t(
           'Your transaction will be reverted if the price changes unfavorably by more than this percentage'
         )}

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

@@ -1,43 +1,79 @@
 import type { SwapDetailsPlaceholderPropTypes } from './SwapDetails.types';
 
 import { i18n } from '@lingui/core';
-import { NotFound, Spinner } from '@rango-dev/ui';
+import {
+  CopyIcon,
+  IconButton,
+  NotFound,
+  Skeleton,
+  Typography,
+} from '@rango-dev/ui';
 import React from 'react';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
 import { Layout } from '../Layout';
+import { LoadingSwapDetails } from '../LoadingSwapDetails';
 
-import { LoaderContainer, PlaceholderContainer } from './SwapDetails.styles';
+import {
+  Container,
+  HeaderDetails,
+  PlaceholderContainer,
+} from './SwapDetails.styles';
 
 export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
-  const { requestId, loading } = props;
+  const { requestId, showSkeleton } = props;
   const { navigateBackFrom } = useNavigateBack();
 
   return (
     <Layout
+      noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
         onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
         suffix: <SuffixContainer />,
       }}>
-      <PlaceholderContainer>
-        {loading ? (
-          <LoaderContainer>
-            <Spinner size={24} />
-          </LoaderContainer>
-        ) : (
+      {showSkeleton && (
+        <Container>
+          <HeaderDetails>
+            <div className="row">
+              <Typography variant="label" size="large" color="neutral900">
+                {`${i18n.t('Request ID')}:`}
+              </Typography>
+              <div className="request-id">
+                <Typography variant="label" size="small" color="neutral900">
+                  <Skeleton width={60} height={10} variant="rounded" />
+                </Typography>
+                <IconButton variant="ghost">
+                  <CopyIcon size={16} color="gray" />
+                </IconButton>
+              </div>
+            </div>
+            <div className="row">
+              <Typography variant="label" size="large" color="neutral900">
+                {`${i18n.t('Created at')}:`}
+              </Typography>
+              <Typography variant="label" size="small" color="neutral900">
+                <Skeleton width={60} height={10} variant="rounded" />
+              </Typography>
+            </div>
+          </HeaderDetails>
+          <LoadingSwapDetails />
+        </Container>
+      )}
+      {!showSkeleton && (
+        <PlaceholderContainer>
           <NotFound
             title={i18n.t('Not found')}
-            description={i18n.t(
-              'swapNotFound',
-              { requestId },
-              { message: 'Swap with request ID = ${requestId} not found.' }
-            )}
+            description={i18n.t({
+              id: 'swapNotFound',
+              values: { requestId },
+              message: 'Swap with request ID = {requestId} not found.',
+            })}
           />
-        )}
-      </PlaceholderContainer>
+        </PlaceholderContainer>
+      )}
     </Layout>
   );
 }

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

@@ -1,61 +1,58 @@
 import type { GetStep } from '../SwapDetailsAlerts';
 import type { PendingSwapStep } from '@rango-dev/queue-manager-rango-preset';
-import type {
-  PriceImpactWarningLevel,
-  Step,
-  StepDetailsProps,
-} from '@rango-dev/ui';
-import type BigNumber from 'bignumber.js';
+import type { Step, StepDetailsProps } from '@rango-dev/ui';
 
 import React from 'react';
 
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../../constants/routing';
+import { getBlockchainShortNameFor } from '../../utils/meta';
 import { numberToString } from '../../utils/numbers';
 import { isNetworkStatusInWarningState } from '../../utils/swap';
 import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
 
-export const LOW_PRICE_IMPACT = 3;
-export const HIGHT_PRICE_IMPACT = 10;
 export const RESET_INTERVAL = 2_000;
-export const MIN_DECIMALS = 0;
-export const AMOUNT_DECIMALS = 4;
-export const PERCENT_DECIMALS = 2;
 export const SECONDS = 60;
 
-export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
+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;
     return {
       from: {
-        token: { displayName: step.fromSymbol, image: step.fromLogo },
+        token: { displayName: step.fromSymbol, image: step.fromLogo ?? '' },
         chain: {
-          displayName: step.fromBlockchain,
-          image: step.fromBlockchainLogo,
+          displayName:
+            getBlockchainShortNameFor(step.fromBlockchain, blockchains) ?? '',
+          image: step.fromBlockchainLogo ?? '',
         },
         price: {
           value: numberToString(
             amountToConvert,
-            AMOUNT_DECIMALS,
-            AMOUNT_DECIMALS
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
           ),
         },
       },
       to: {
         token: { displayName: step.toSymbol, image: step.toLogo },
         chain: {
-          displayName: step.toBlockchain,
-          image: step.toBlockchainLogo,
+          displayName:
+            getBlockchainShortNameFor(step.toBlockchain, blockchains) ?? '',
+          image: step.toBlockchainLogo ?? '',
         },
         price: {
           value: numberToString(
             step.outputAmount || step.expectedOutputAmountHumanReadable,
-            AMOUNT_DECIMALS,
-            AMOUNT_DECIMALS
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
           ),
         },
       },
-      swapper: { displayName: step.swapperId, image: step.swapperLogo },
+      swapper: { displayName: step.swapperId, image: step.swapperLogo ?? '' },
       alerts: (
         <SwapDetailsAlerts
           step={step}
@@ -67,17 +64,6 @@ export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
   });
 };
 
-export const getPriceImpactWarningLevel = (
-  priceImpact: BigNumber | null
-): PriceImpactWarningLevel | undefined => {
-  if (!priceImpact) {
-    return undefined;
-  } else if (priceImpact.lt(LOW_PRICE_IMPACT)) {
-    return 'low';
-  }
-  return 'high';
-};
-
 export function getStepState(step: PendingSwapStep): StepDetailsProps['state'] {
   if (
     isNetworkStatusInWarningState(step) &&

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -1,10 +1,9 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
   width: '100%',
   flexDirection: 'column',
-  justifyContent: 'center',
   alignItems: 'center',
   height: '0',
   flexGrow: 1,
@@ -13,8 +12,13 @@ export const Container = styled('div', {
     width: '100%',
     justifyContent: 'space-between',
     alignItems: 'center',
-    padding: '$10 $5',
-    borderBottom: '1px solid $neutral300',
+    padding: '$10 $20',
+    borderBottom: '1px solid',
+    $$color: '$colors$neutral300',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    borderColor: '$$color',
     color: '$neutral500',
   },
   '& .request-id': {
@@ -37,20 +41,12 @@ export const Container = styled('div', {
   },
 });
 
-export const Separator = styled('div', {
-  height: '$12',
-  marginRight: '$10',
-  borderLeft: '1px solid $neutral900',
-  marginLeft: '$14',
-});
-
 export const HeaderDetails = styled('div', {
   width: '100%',
-  padding: '0px 15px',
 });
 
 export const StepsList = styled('div', {
-  padding: '0 $20 $20',
+  padding: '$0 $20 $20 $20',
   width: '100%',
   overflow: 'auto',
 });
@@ -64,7 +60,7 @@ export const PlaceholderContainer = styled('div', {
   height: '450px',
   display: 'flex',
   alignItems: 'center',
-  textAlign: 'center',
+  justifyContent: 'center',
 });
 
 export const LoaderContainer = styled('div', {