@rango-dev/widget-embedded 0.17.1-next.8 → 0.18.0

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts

@@ -31,6 +31,7 @@ export function makeAlerts(
       if (warningLevel === 'high') {
         alertInfo.alertType = 'error';
       }
+      alertInfo.action = null;
       alertInfo.title = errorMessages().highValueLossError.title;
     }
     if (warning.type === QuoteWarningType.UNKNOWN_PRICE) {
@@ -38,14 +39,15 @@ export function makeAlerts(
     }
     if (warning.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE) {
       alertInfo.title = i18n.t({
-        id: 'minimum required slippage for this route: {minRequiredSlippage}',
+        id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
         values: {
           minRequiredSlippage: warning.minRequiredSlippage,
         },
       });
+      alertInfo.action = 'change-settings';
     }
     if (warning.type === QuoteWarningType.HIGH_SLIPPAGE) {
-      alertInfo.title = i18n.t('Caution, your slippage is high');
+      alertInfo.title = i18n.t('Caution, your slippage is high.');
     }
     return alertInfo;
   }
@@ -53,11 +55,16 @@ export function makeAlerts(
     alertInfo.alertType = 'error';
     if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
       alertInfo.title = error.recommendation;
-      alertInfo.action = null;
+      alertInfo.action = 'show-info';
     }
 
     if (error.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE) {
-      alertInfo.title = '';
+      alertInfo.title = i18n.t({
+        id: 'You need to increase slippage to at least {minRequiredSlippage} for this route.',
+        values: {
+          minRequiredSlippage: error.minRequiredSlippage,
+        },
+      });
       alertInfo.action = 'change-settings';
     }
 

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
@@ -19,6 +19,13 @@ export const Item = styled('div', {
   justifyContent: 'space-between',
   alignItems: 'center',
   width: '100%',
+  '._title': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
 export const Action = styled('div', {

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -3,9 +3,7 @@ import type { PropTypes } from './QuoteWarningsAndErrors.types';
 import { i18n } from '@lingui/core';
 import { Alert, Button, InfoIcon } from '@rango-dev/ui';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
 import { QuoteErrorType, QuoteWarningType } from '../../types';
 import { NoResult } from '../NoResult';
 
@@ -24,10 +22,9 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
     onOpenWarningModal,
     onCloseWarningModal,
     onConfirmWarningModal,
+    onChangeSettings,
   } = props;
 
-  const navigate = useNavigate();
-
   const warningModalHandlers = {
     open: showWarningModal,
     onClose: onCloseWarningModal,
@@ -58,20 +55,23 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
             title={alertInfo.title}
             type={alertInfo.alertType}
             variant="alarm"
-            action={
-              alertInfo.action === 'show-info' ? (
+            {...(alertInfo.action === 'show-info' && {
+              action: (
                 <Action onClick={onOpenWarningModal}>
                   <InfoIcon size={12} color="gray" />
                 </Action>
-              ) : (
+              ),
+            })}
+            {...(alertInfo.action === 'change-settings' && {
+              action: (
                 <Button
-                  size="xsmall"
-                  type={'error'}
-                  onClick={() => navigate(navigationRoutes.settings)}>
-                  {i18n.t('Change Settings')}
+                  size="xxsmall"
+                  type={alertInfo.alertType}
+                  onClick={onChangeSettings}>
+                  {i18n.t('Change')}
                 </Button>
-              )
-            }
+              ),
+            })}
           />
         </Alerts>
       )}

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.types.ts

@@ -9,6 +9,7 @@ export interface PropTypes {
   onOpenWarningModal: () => void;
   onCloseWarningModal: () => void;
   onConfirmWarningModal: () => void;
+  onChangeSettings: () => void;
 }
 
 type ModalPropTypesKeys = keyof Omit<PropTypes, 'extraSpace' | 'loading'>;

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
-import { useSettingsStore } from '../../store/settings';
+import { useAppStore } from '../../store/AppStore';
 import { QuoteWarningType } from '../../types';
 import { getContainer } from '../../utils/common';
 
@@ -21,7 +21,7 @@ type PropsTypes = {
 };
 
 export function SlippageWarningModal(props: PropsTypes) {
-  const { customSlippage, slippage } = useSettingsStore();
+  const { customSlippage, slippage } = useAppStore();
   const { open, onClose, onConfirm, warning } = props;
   const navigate = useNavigate();
   const userSlippage = customSlippage ?? slippage;
@@ -33,7 +33,7 @@ export function SlippageWarningModal(props: PropsTypes) {
         <Button
           size="small"
           variant="ghost"
-          onClick={() => navigate('/' + navigationRoutes.settings)}>
+          onClick={() => navigate('../' + navigationRoutes.settings)}>
           <Typography variant="label" size="medium" color="$neutral900">
             {i18n.t('Change settings')}
           </Typography>

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

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

package/src/components/Slippage/Slippage.tsx

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

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

@@ -10,8 +10,6 @@ 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';
@@ -20,28 +18,27 @@ 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(navigationRoutes.swapDetails),
         suffix: <SuffixContainer />,
       }}>
       {showSkeleton && (
         <Container>
           <HeaderDetails>
-            <div className="row">
+            <div className={rowStyles()}>
               <Typography variant="label" size="large" color="neutral700">
                 {`${i18n.t('Request ID')}:`}
               </Typography>
-              <div className="request-id">
+              <div className={requestIdStyles()}>
                 <Typography variant="label" size="small" color="neutral700">
                   <Skeleton width={60} height={10} variant="rounded" />
                 </Typography>
@@ -50,7 +47,7 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
                 </IconButton>
               </div>
             </div>
-            <div className="row">
+            <div className={rowStyles()}>
               <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 { darkTheme, styled } from '@rango-dev/ui';
+import { css, darkTheme, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -7,38 +7,6 @@ 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', {
@@ -70,3 +38,38 @@ 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,7 +6,6 @@ import {
   getCurrentBlockchainOfOrNull,
   getCurrentStep,
   getRelatedWalletOrNull,
-  PendingSwapNetworkStatus,
 } from '@rango-dev/queue-manager-rango-preset';
 import {
   Button,
@@ -19,10 +18,10 @@ import {
   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,
@@ -33,7 +32,6 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
-import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
@@ -49,7 +47,7 @@ import {
   shouldRetrySwap,
 } from '../../utils/swap';
 import { getSwapDate } from '../../utils/time';
-import { getConciseAddress, getUsdPrice } from '../../utils/wallets';
+import { getConciseAddress } from '../../utils/wallets';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
 import { Layout } from '../Layout';
 import { QuoteSummary } from '../Quote';
@@ -59,7 +57,15 @@ import {
 } from '../SwapDetailsModal';
 
 import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
-import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
+import {
+  Container,
+  HeaderDetails,
+  outputStyles,
+  requestIdStyles,
+  rowStyles,
+  StepsList,
+  titleStepsStyles,
+} from './SwapDetails.styles';
 
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
@@ -68,7 +74,6 @@ export function SwapDetails(props: SwapDetailsProps) {
   const tokens = useAppStore().tokens();
   const retry = useQuoteStore.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);
@@ -166,35 +171,19 @@ export function SwapDetails(props: SwapDetailsProps) {
   )?.diagnosisUrl;
 
   const outputUsdValue = numberToString(
-    String(
-      parseFloat(
-        numberToString(
-          outputAmount,
-          TOKEN_AMOUNT_MIN_DECIMALS,
-          TOKEN_AMOUNT_MAX_DECIMALS
-        )
-      ) *
-        (getUsdPrice(
-          lastStep.toBlockchain,
-          lastStep.toSymbol,
-          lastStep.toSymbolAddress,
-          tokens
-        ) || 0)
-    ),
+    parseFloat(
+      numberToString(
+        outputAmount,
+        TOKEN_AMOUNT_MIN_DECIMALS,
+        TOKEN_AMOUNT_MAX_DECIMALS
+      )
+    ) * (lastStep.toUsdPrice || 0),
     USD_VALUE_MIN_DECIMALS,
     USD_VALUE_MAX_DECIMALS
   );
 
   const inputUsdValue = numberToString(
-    String(
-      parseFloat(swap.inputAmount) *
-        (getUsdPrice(
-          firstStep.fromBlockchain,
-          firstStep.fromSymbol,
-          firstStep.fromSymbolAddress,
-          tokens
-        ) || 0)
-    ),
+    parseFloat(swap.inputAmount) * (firstStep.fromUsdPrice || 0),
     USD_VALUE_MIN_DECIMALS,
     USD_VALUE_MAX_DECIMALS
   );
@@ -237,7 +226,6 @@ export function SwapDetails(props: SwapDetailsProps) {
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
-        onBack: () => navigateBackFrom(navigationRoutes.swapDetails),
         onCancel:
           swap.status === 'running' ? () => setModalState('cancel') : undefined,
         suffix: swap.status !== 'running' && (
@@ -265,7 +253,8 @@ export function SwapDetails(props: SwapDetailsProps) {
             onClick={() => {
               retry(swap, { blockchains: blockchains, tokens: tokens });
               setTimeout(() => {
-                navigate(navigationRoutes.home);
+                const home = '../../';
+                navigate(home);
               }, 0);
             }}>
             {i18n.t('Try again')}
@@ -274,11 +263,11 @@ export function SwapDetails(props: SwapDetailsProps) {
       }>
       <Container>
         <HeaderDetails>
-          <div className="row">
+          <div className={rowStyles()}>
             <Typography variant="label" size="large" color="neutral700">
               {`${i18n.t('Request ID')}:`}
             </Typography>
-            <div className="request-id">
+            <div className={requestIdStyles()}>
               <Typography variant="label" size="small" color="neutral700">
                 {requestId}
               </Typography>
@@ -289,7 +278,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               </IconButton>
             </div>
           </div>
-          <div className="row">
+          <div className={rowStyles()}>
             <Typography variant="label" size="large" color="neutral700">
               {`${i18n.t('Created at')}:`}
             </Typography>
@@ -299,7 +288,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </div>
         </HeaderDetails>
 
-        <div className="output">
+        <div className={outputStyles()}>
           <QuoteCost
             fee={numberToString(
               String(totalFee),
@@ -347,14 +336,14 @@ export function SwapDetails(props: SwapDetailsProps) {
               },
             }}
             percentageChange={numberToString(
-              String(percentageChange),
+              percentageChange,
               PERCENTAGE_CHANGE_MIN_DECIMALS,
               PERCENTAGE_CHANGE_MAX_DECIMALS
             )}
             warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
           />
         </div>
-        <div className="title-steps">
+        <div className={titleStepsStyles()}>
           <Typography variant="title" size="small">
             {i18n.t('Swaps steps')}
           </Typography>
@@ -405,7 +394,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         )}
         usdValue={outputUsdValue}
         percentageChange={numberToString(
-          String(percentageChange),
+          percentageChange,
           PERCENTAGE_CHANGE_MIN_DECIMALS,
           PERCENTAGE_CHANGE_MAX_DECIMALS
         )}

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,8 +12,6 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
-
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
     open,
@@ -70,7 +68,10 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           variant="contained"
           type="primary"
           size="large"
-          onClick={() => navigate(navigationRoutes.home)}>
+          onClick={() => {
+            const home = '../../';
+            navigate(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('Transaction Cancel')}
-        description={i18n.t('Are you sure you want to Cancel this swap?')}
+        title={i18n.t('Cancel Swap')}
+        description={i18n.t('Are you sure you want to cancel this swap?')}
       />
       <Divider size={32} />
       <Button

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -1,30 +1,36 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
 
-import { MessageBox, Wallet, WalletState } from '@rango-dev/ui';
+import { MessageBox, Wallet } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
 import { getContainer } from '../../utils/common';
+import { mapStatusToWalletState } from '../../utils/wallets';
 
 import { WalletContainer } from './SwapDetailsModal.styles';
 
 export const WalletStateContent = (props: WalletStateContentProps) => {
   const { type, title, currentStepWallet, message, showWalletButton } = props;
-  const { connect, getWalletInfo, state: walletState } = useWallets();
+  const { connect, getWalletInfo, state } = useWallets();
   const walletType = currentStepWallet?.walletType;
-  const isConnected = walletType && walletState(walletType).connected;
-  const state = isConnected ? WalletState.CONNECTED : WalletState.DISCONNECTED;
+  const walletState = walletType
+    ? mapStatusToWalletState(state(walletType))
+    : null;
+  const walletInfo = walletType ? getWalletInfo(walletType) : null;
+  const shouldShowWallet =
+    showWalletButton && !!walletType && !!walletState && !!walletInfo;
   return (
     <>
       <MessageBox type={type} title={title} description={message} />
-      {showWalletButton && walletType && (
+      {shouldShowWallet && (
         <WalletContainer>
           <Wallet
             container={getContainer()}
-            title={getWalletInfo(walletType).name}
-            image={getWalletInfo(walletType).img}
+            title={walletInfo.name}
+            image={walletInfo.img}
             type={walletType}
-            state={state}
+            state={walletState}
+            link={walletInfo.installLink}
             onClick={async () => connect(walletType)}
           />
         </WalletContainer>

package/src/components/SwapDetailsModal/SwapDetailsModal.helpers.tsx

@@ -1,7 +1,7 @@
 import type { ModalNetworkValueTypes } from './SwapDetailsModal.types';
 
 import { i18n } from '@lingui/core';
-import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
+import { PendingSwapNetworkStatus } from 'rango-types';
 
 export const modalNetworkValues: Record<
   Exclude<PendingSwapNetworkStatus, PendingSwapNetworkStatus.WaitingForQueue>,