@rango-dev/widget-embedded 0.18.0 → 0.19.0

package/src/components/RouteErrors/RouteErrorsModal.tsx

@@ -0,0 +1,129 @@
+import type { ModalPropTypes } from './RouteErrors.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  MessageBox,
+  Modal,
+  Typography,
+  WarningIcon,
+} from '@rango-dev/ui';
+import React from 'react';
+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';
+
+export function RouteErrorsModal(props: ModalPropTypes) {
+  const {
+    highValueLoss,
+    open,
+    onToggle,
+    percentageChange,
+    inputUsdValue,
+    outputUsdValue,
+    totalFeeInUsd,
+  } = props;
+  const navigate = useNavigate();
+  const type =
+    highValueLoss && !!percentageChange?.lt(HIGHT_PRICE_IMPACT)
+      ? 'error'
+      : 'warning';
+  const highValueLossData = [
+    {
+      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: i18n.t('Price impact'),
+      value: numberToString(
+        percentageChange,
+        PERCENTAGE_CHANGE_MIN_DECIMALS,
+        PERCENTAGE_CHANGE_MAX_DECIMALS
+      ),
+      valueColor: `${type}500`,
+    },
+  ];
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => onToggle(false)}
+      container={document.getElementById('swap-box') || document.body}>
+      {highValueLoss ? (
+        <MessageBox
+          type={type}
+          title={errorMessages().highValueLossError.impactTitle}
+          description={errorMessages().highValueLossError.description}
+        />
+      ) : (
+        <MessageBox
+          type={type}
+          title={errorMessages().unknownPriceError.impactTitle}
+          description={errorMessages().unknownPriceError.description}
+        />
+      )}
+      {highValueLoss && (
+        <Flex>
+          <Divider size={20} />
+          <Typography size="small" variant="title">
+            {i18n.t('Details')}
+          </Typography>
+          <Flex>
+            {highValueLossData.map((item, index) => {
+              const key = index;
+              return <RouteErrorsModalItem key={key} {...item} />;
+            })}
+          </Flex>
+        </Flex>
+      )}
+      <Divider size={32} />
+      <Button
+        type="primary"
+        size="large"
+        prefix={<WarningIcon />}
+        fullWidth
+        onClick={() => {
+          navigate(navigationRoutes.confirmSwap);
+        }}>
+        {highValueLoss
+          ? errorMessages().highValueLossError.confirmMessage
+          : errorMessages().unknownPriceError.confirmMessage}
+      </Button>
+    </Modal>
+  );
+}

package/src/components/{QuoteWarningsAndErrors/QuoteErrorsModalItem.tsx → RouteErrors/RouteErrorsModalItem.tsx}

@@ -1,16 +1,16 @@
-import type { ModalContentData } from './QuoteWarningsAndErrors.types';
+import type { ModalContentData } from './RouteErrors.types';
 
 import { Typography } from '@rango-dev/ui';
 import React from 'react';
 
-import { Item } from './QuoteWarningsAndErrors.styles';
+import { Item } from './RouteErrors.styles';
 
-export function QuoteErrorsModalItem(props: ModalContentData) {
+export function RouteErrorsModalItem(props: ModalContentData) {
   const { title, value, valueColor } = props;
 
   return (
     <Item>
-      <Typography size="medium" variant="label" className="_title">
+      <Typography size="medium" variant="label" color="neutral600">
         {title}
       </Typography>
       <Typography

package/src/components/RouteErrors/index.ts

@@ -0,0 +1 @@
+export { RouteErrors } from './RouteErrors';

package/src/components/Slippage/Slippage.styles.ts

@@ -1,19 +1,14 @@
-import { Chip, styled, TextField } from '@rango-dev/ui';
+import { styled } from '@rango-dev/ui';
 
 export const BaseContainer = styled('div', {
   paddingTop: '$5',
-  padding: '$10 $5',
+  paddingBottom: '30px',
 });
 
 export const SlippageChipsContainer = styled('div', {
   display: 'flex',
-  flexWrap: 'wrap',
-  gap: '$10',
-  [`& ${TextField}`]: {
-    flex: '1 1 0',
-    maxWidth: '127px',
-    minWidth: '85px',
-  },
+  alignItems: 'center',
+  justifyContent: 'start',
 });
 
 export const Head = styled('div', {
@@ -24,11 +19,6 @@ export const Head = styled('div', {
 });
 
 export const SlippageTooltipContainer = styled('div', {
-  maxWidth: '280px',
+  maxWidth: '300px',
   padding: '$10',
 });
-
-export const SlippageChip = styled(Chip, {
-  width: '61px',
-  flexShrink: 0,
-});

package/src/components/Slippage/Slippage.tsx

@@ -1,5 +1,6 @@
 import { i18n } from '@lingui/core';
 import {
+  Chip,
   Divider,
   InfoIcon,
   TextField,
@@ -13,20 +14,17 @@ import {
   MIN_SLIPPGAE,
   SLIPPAGES,
 } from '../../constants/swapSettings';
-import { useAppStore } from '../../store/AppStore';
+import { useSettingsStore } from '../../store/settings';
 import { getContainer } from '../../utils/common';
 
-import {
-  BaseContainer,
-  Head,
-  SlippageChip,
-  SlippageChipsContainer,
-} from './Slippage.styles';
+import { BaseContainer, Head, SlippageChipsContainer } from './Slippage.styles';
 import { SlippageTooltipContent } from './SlippageTooltipContent';
 
 export function Slippage() {
-  const { slippage, setSlippage, customSlippage, setCustomSlippage } =
-    useAppStore();
+  const slippage = useSettingsStore.use.slippage();
+  const setSlippage = useSettingsStore.use.setSlippage();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
 
   return (
     <BaseContainer>
@@ -38,7 +36,6 @@ export function Slippage() {
         <Tooltip
           container={getContainer()}
           side="top"
-          sideOffset={4}
           content={<SlippageTooltipContent />}>
           <InfoIcon color="gray" />
         </Tooltip>
@@ -48,7 +45,8 @@ export function Slippage() {
           const key = `slippage-${index}`;
           return (
             <>
-              <SlippageChip
+              <Chip
+                style={{ width: '64px', flexShrink: 0 }}
                 key={key}
                 onClick={() => {
                   if (customSlippage) {
@@ -59,6 +57,7 @@ export function Slippage() {
                 selected={!customSlippage && slippageItem === slippage}
                 label={`${slippageItem.toString()}%`}
               />
+              <Divider direction="horizontal" size={8} />
             </>
           );
         })}

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

@@ -10,6 +10,8 @@ import {
 } 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';
@@ -18,27 +20,28 @@ import {
   Container,
   HeaderDetails,
   PlaceholderContainer,
-  requestIdStyles,
-  rowStyles,
 } from './SwapDetails.styles';
 
 export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
   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 />,
       }}>
       {showSkeleton && (
         <Container>
           <HeaderDetails>
-            <div className={rowStyles()}>
+            <div className="row">
               <Typography variant="label" size="large" color="neutral700">
                 {`${i18n.t('Request ID')}:`}
               </Typography>
-              <div className={requestIdStyles()}>
+              <div className="request-id">
                 <Typography variant="label" size="small" color="neutral700">
                   <Skeleton width={60} height={10} variant="rounded" />
                 </Typography>
@@ -47,7 +50,7 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
                 </IconButton>
               </div>
             </div>
-            <div className={rowStyles()}>
+            <div className="row">
               <Typography variant="label" size="large" color="neutral700">
                 {`${i18n.t('Created at')}:`}
               </Typography>

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

@@ -1,6 +1,6 @@
 import type { GetStep } from '../SwapDetailsAlerts';
+import type { PendingSwapStep } from '@rango-dev/queue-manager-rango-preset';
 import type { Step, StepDetailsProps } from '@rango-dev/ui';
-import type { PendingSwapStep } from 'rango-types';
 
 import React from 'react';
 

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

@@ -1,4 +1,4 @@
-import { css, darkTheme, styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -7,6 +7,38 @@ export const Container = styled('div', {
   alignItems: 'center',
   height: '0',
   flexGrow: 1,
+  '& .row': {
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '$10 $20',
+    borderBottom: '1px solid',
+    $$color: '$colors$neutral300',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    borderColor: '$$color',
+    color: '$neutral500',
+  },
+  '& .request-id': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '$24',
+  },
+  '& .output': {
+    display: 'flex',
+    width: '100%',
+    padding: '$15 $20 $20',
+    flexDirection: 'column',
+    alignItems: 'start',
+  },
+  '& .title-steps': {
+    textAlign: 'left',
+    width: '100%',
+    padding: '0 $20 $10',
+  },
 });
 
 export const HeaderDetails = styled('div', {
@@ -38,38 +70,3 @@ export const LoaderContainer = styled('div', {
   paddingTop: '33%',
   flex: 1,
 });
-
-export const rowStyles = css({
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '$10 $20',
-  borderBottom: '1px solid',
-  $$color: '$colors$neutral300',
-  [`.${darkTheme} &`]: {
-    $$color: '$colors$neutral400',
-  },
-  borderColor: '$$color',
-  color: '$neutral500',
-});
-
-export const requestIdStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '$24',
-});
-
-export const outputStyles = css({
-  display: 'flex',
-  width: '100%',
-  padding: '$15 $20 $20',
-  flexDirection: 'column',
-  alignItems: 'start',
-});
-
-export const titleStepsStyles = css({
-  width: '100%',
-  padding: '0 $20 $10',
-});

package/src/components/SwapDetails/SwapDetails.tsx

@@ -6,22 +6,24 @@ import {
   getCurrentBlockchainOfOrNull,
   getCurrentStep,
   getRelatedWalletOrNull,
+  PendingSwapNetworkStatus,
 } from '@rango-dev/queue-manager-rango-preset';
 import {
   Button,
   CopyIcon,
   Divider,
   IconButton,
-  QuoteCost,
+  RouteCost,
+  RouteSummary,
   StepDetails,
   Typography,
   useCopyToClipboard,
 } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
-import { PendingSwapNetworkStatus } from 'rango-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { navigationRoutes } from '../../constants/navigationRoutes';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -32,54 +34,49 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
-import { useAppStore } from '../../store/AppStore';
+import { useNavigateBack } from '../../hooks/useNavigateBack';
+import { useBestRouteStore } from '../../store/bestRoute';
+import { useMetaStore } from '../../store/meta';
 import { useNotificationStore } from '../../store/notification';
-import { useQuoteStore } from '../../store/quote';
 import {
   numberToString,
   secondsToString,
   totalArrivalTime,
 } from '../../utils/numbers';
-import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
+import { getPriceImpactLevel } from '../../utils/routing';
 import {
   getLastConvertedTokenInFailedSwap,
+  getPercentageChange,
   getSwapMessages,
   shouldRetrySwap,
 } from '../../utils/swap';
 import { getSwapDate } from '../../utils/time';
-import { getConciseAddress } from '../../utils/wallets';
+import { getConciseAddress, getUsdPrice } from '../../utils/wallets';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
 import { Layout } from '../Layout';
-import { QuoteSummary } from '../Quote';
 import {
   SwapDetailsCompleteModal,
   SwapDetailsModal,
 } from '../SwapDetailsModal';
 
 import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
-import {
-  Container,
-  HeaderDetails,
-  outputStyles,
-  requestIdStyles,
-  rowStyles,
-  StepsList,
-  titleStepsStyles,
-} from './SwapDetails.styles';
+import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
 
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
-  const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
-  const retry = useQuoteStore.use.retry();
+  const retry = useBestRouteStore.use.retry();
   const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
   const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
   const listRef = useRef<HTMLDivElement | null>(null);
   const [modalState, setModalState] = useState<ModalState>(null);
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
   >(null);
+  const {
+    meta: { tokens, blockchains },
+  } = useMetaStore();
 
   const onCancel = () => {
     onCancelProps();
@@ -154,7 +151,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     showNetworkModal: currentStepNetworkStatus,
     setNetworkModal: setModalState,
     message: stepMessage,
-    blockchains: blockchains,
+    blockchains,
   });
   const numberOfSteps = steps.length;
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];
@@ -171,24 +168,40 @@ export function SwapDetails(props: SwapDetailsProps) {
   )?.diagnosisUrl;
 
   const outputUsdValue = numberToString(
-    parseFloat(
-      numberToString(
-        outputAmount,
-        TOKEN_AMOUNT_MIN_DECIMALS,
-        TOKEN_AMOUNT_MAX_DECIMALS
-      )
-    ) * (lastStep.toUsdPrice || 0),
+    String(
+      parseFloat(
+        numberToString(
+          outputAmount,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        )
+      ) *
+        (getUsdPrice(
+          lastStep.toBlockchain,
+          lastStep.toSymbol,
+          lastStep.toSymbolAddress,
+          tokens
+        ) || 0)
+    ),
     USD_VALUE_MIN_DECIMALS,
     USD_VALUE_MAX_DECIMALS
   );
 
   const inputUsdValue = numberToString(
-    parseFloat(swap.inputAmount) * (firstStep.fromUsdPrice || 0),
+    String(
+      parseFloat(swap.inputAmount) *
+        (getUsdPrice(
+          firstStep.fromBlockchain,
+          firstStep.fromSymbol,
+          firstStep.fromSymbolAddress,
+          tokens
+        ) || 0)
+    ),
     USD_VALUE_MIN_DECIMALS,
     USD_VALUE_MAX_DECIMALS
   );
 
-  const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
+  const percentageChange = getPercentageChange(inputUsdValue, outputUsdValue);
 
   const completeModalDesc =
     swap.status === 'success'
@@ -226,6 +239,7 @@ export function SwapDetails(props: SwapDetailsProps) {
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
         onCancel:
           swap.status === 'running' ? () => setModalState('cancel') : undefined,
         suffix: swap.status !== 'running' && (
@@ -251,10 +265,9 @@ export function SwapDetails(props: SwapDetailsProps) {
             type="primary"
             size="large"
             onClick={() => {
-              retry(swap, { blockchains: blockchains, tokens: tokens });
+              retry(swap);
               setTimeout(() => {
-                const home = '../../';
-                navigate(home);
+                navigate(navigationRoutes.home);
               }, 0);
             }}>
             {i18n.t('Try again')}
@@ -263,11 +276,11 @@ export function SwapDetails(props: SwapDetailsProps) {
       }>
       <Container>
         <HeaderDetails>
-          <div className={rowStyles()}>
+          <div className="row">
             <Typography variant="label" size="large" color="neutral700">
               {`${i18n.t('Request ID')}:`}
             </Typography>
-            <div className={requestIdStyles()}>
+            <div className="request-id">
               <Typography variant="label" size="small" color="neutral700">
                 {requestId}
               </Typography>
@@ -278,7 +291,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               </IconButton>
             </div>
           </div>
-          <div className={rowStyles()}>
+          <div className="row">
             <Typography variant="label" size="large" color="neutral700">
               {`${i18n.t('Created at')}:`}
             </Typography>
@@ -288,8 +301,8 @@ export function SwapDetails(props: SwapDetailsProps) {
           </div>
         </HeaderDetails>
 
-        <div className={outputStyles()}>
-          <QuoteCost
+        <div className="output">
+          <RouteCost
             fee={numberToString(
               String(totalFee),
               GAS_FEE_MIN_DECIMALS,
@@ -298,7 +311,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             time={secondsToString(totalArrivalTime(swap.steps))}
             steps={numberOfSteps}
           />
-          <QuoteSummary
+          <RouteSummary
             from={{
               price: {
                 value: numberToString(
@@ -340,10 +353,12 @@ export function SwapDetails(props: SwapDetailsProps) {
               PERCENTAGE_CHANGE_MIN_DECIMALS,
               PERCENTAGE_CHANGE_MAX_DECIMALS
             )}
-            warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
+            warningLevel={getPriceImpactLevel(
+              percentageChange?.toNumber() ?? 0
+            )}
           />
         </div>
-        <div className={titleStepsStyles()}>
+        <div className="title-steps">
           <Typography variant="title" size="small">
             {i18n.t('Swaps steps')}
           </Typography>
@@ -362,7 +377,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               <StepDetails
                 key={key}
                 step={step}
-                type="swap-progress"
+                type="route-progress"
                 ref={listRef}
                 state={state}
                 hasSeparator={index !== 0}

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Warning.tsx

@@ -1,8 +1,8 @@
 import type { WaningAlertsProps } from './SwapDetailsAlerts.types';
 
 import { i18n } from '@lingui/core';
+import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
 import { Alert, Button } from '@rango-dev/ui';
-import { PendingSwapNetworkStatus } from 'rango-types';
 import React from 'react';
 
 export function WarningAlert(props: WaningAlertsProps) {

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -12,6 +12,8 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { navigationRoutes } from '../../constants/navigationRoutes';
+
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
     open,
@@ -68,10 +70,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           variant="contained"
           type="primary"
           size="large"
-          onClick={() => {
-            const home = '../../';
-            navigate(home);
-          }}>
+          onClick={() => navigate(navigationRoutes.home)}>
           <Typography variant="title" size="medium" color="neutral100">
             {i18n.t('Done')}
           </Typography>

package/src/components/SwapDetailsModal/SwapDetailsModal.Cancel.tsx

@@ -10,8 +10,8 @@ export const CancelContent = ({ onCancel, onClose }: CancelContentProps) => {
       <Divider size={20} />
       <MessageBox
         type="error"
-        title={i18n.t('Cancel Swap')}
-        description={i18n.t('Are you sure you want to cancel this swap?')}
+        title={i18n.t('Transaction Cancel')}
+        description={i18n.t('Are you sure you want to Cancel this swap?')}
       />
       <Divider size={32} />
       <Button