@rango-dev/widget-embedded 0.22.4-next.9 → 0.23.1-next.0

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuCnD,wBAAgB,IAAI,sBAkQnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuCnD,wBAAgB,IAAI,sBAgQnB"}

package/dist/utils/quote.d.ts

@@ -1,7 +1,6 @@
 import type { QuoteWarning, SelectedQuote, Wallet } from '../types';
-import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
-import type { SimulationAssetAndAmount, SimulationValidationStatus } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
-import type { Asset, BlockchainMeta, MultiRouteResponse, MultiRouteSimulationResult, PreferenceType, RouteTag, TagValue, Token } from 'rango-sdk';
+import type { PriceImpactWarningLevel, SimulationAssetAndAmount, SimulationValidationStatus, Step } from '@rango-dev/ui';
+import type { Asset, BlockchainMeta, MultiRouteResponse, MultiRouteSimulationResult, PreferenceType, RouteTag, Token } from 'rango-sdk';
 import type { PendingSwap } from 'rango-types';
 import BigNumber from 'bignumber.js';
 export declare function getQuoteToTokenUsdPrice(quote: SelectedQuote | null): number | null | undefined;
@@ -34,5 +33,4 @@ export declare const getUniqueBlockchains: (steps: Step[]) => {
 export declare const sortQuotesBy: (strategy: PreferenceType, quotes: MultiRouteResponse['results']) => MultiRouteResponse['results'];
 export declare const getDefaultQuote: (currentQuote: SelectedQuote | null, quotes: MultiRouteSimulationResult[], requestAmount: string) => SelectedQuote | null;
 export declare const sortTags: (tags: RouteTag[]) => RouteTag[];
-export declare const getRouteTagColor: (tag: TagValue) => string;
 //# sourceMappingURL=quote.d.ts.map

package/dist/utils/quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/utils/quote.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/utils/quote.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACpE,OAAO,KAAK,EACV,uBAAuB,EACvB,wBAAwB,EACxB,0BAA0B,EAC1B,IAAI,EACL,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EACV,KAAK,EACL,cAAc,EACd,kBAAkB,EAClB,0BAA0B,EAC1B,cAAc,EACd,QAAQ,EACR,KAAK,EACN,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,SAAS,MAAM,cAAc,CAAC;AAmBrC,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,aAAa,GAAG,IAAI,GAC1B,MAAM,GAAG,IAAI,GAAG,SAAS,CAG3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,WAKtB;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,WAKtB;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,WAKtB;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,GACpB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAAE,EAAE,CAAC,SAAS,KAAK,EAAE,EACnE,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,CAAC,KAUT;AAED,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,cAAc,EAAE,EAC7B,MAAM,EAAE,KAAK,EAAE,GACd;IACD,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,OAAO,EAAE,KAAK,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CA4CA;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE;IACN,SAAS,EAAE,KAAK,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,GACA,YAAY,GAAG,IAAI,CAiDrB;AAED,wBAAgB,cAAc,CAC5B,aAAa,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,EACxC,cAAc,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GACxC,MAAM,GAAG,IAAI,CAcf;AAED,eAAO,MAAM,oBAAoB,UAAW,IAAI,EAAE;iBAEnB,MAAM;WAAS,MAAM;GAanD,CAAC;AAEF,eAAO,MAAM,YAAY,aACb,cAAc,UAChB,kBAAkB,CAAC,SAAS,CAAC,KACpC,kBAAkB,CAAC,SAAS,CAkB9B,CAAC;AAEF,eAAO,MAAM,eAAe,iBACZ,aAAa,GAAG,IAAI,UAC1B,0BAA0B,EAAE,iBACrB,MAAM,KACpB,aAAa,GAAG,IAgClB,CAAC;AAEF,eAAO,MAAM,QAAQ,SAAU,QAAQ,EAAE,KAAG,QAAQ,EAmBnD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.22.4-next.9",
+  "version": "0.23.1-next.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -21,13 +21,13 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/provider-all": "^0.27.1-next.1",
-    "@rango-dev/queue-manager-core": "^0.25.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.27.1-next.1",
-    "@rango-dev/queue-manager-react": "^0.25.1-next.0",
-    "@rango-dev/ui": "^0.28.2-next.8",
-    "@rango-dev/wallets-react": "^0.13.1-next.1",
-    "@rango-dev/wallets-shared": "^0.27.1-next.1",
+    "@rango-dev/provider-all": "^0.28.0",
+    "@rango-dev/queue-manager-core": "^0.26.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.28.0",
+    "@rango-dev/queue-manager-react": "^0.26.0",
+    "@rango-dev/ui": "^0.29.1-next.0",
+    "@rango-dev/wallets-react": "^0.14.0",
+    "@rango-dev/wallets-shared": "^0.28.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/QueueManager.tsx

@@ -80,9 +80,6 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
       getSupportedChainNames,
     },
     getSigners,
-    //todo: remove Network type
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
     wallets,
     providers: allProviders,
     switchNetwork,

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -84,18 +84,23 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const isWalletRequiredFor = (blockchain: string) =>
     !!selectedQuote?.swaps.find((swap) => swap.from.blockchain === blockchain);
 
-  const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
+  const getInitialSelectableWallets = () =>
     connectedWallets.filter((connectedWallet) => {
       return (
         connectedWallet.selected &&
         requiredWallets.includes(connectedWallet.chain)
       );
-    })
+    });
+
+  const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
+    getInitialSelectableWallets()
   );
   const lastStepToBlockchainMeta = blockchains.find(
     (chain) => chain.name === lastStepToBlockchain?.name
   );
 
+  const isInsufficientBalanceModalOpen = balanceWarnings.length > 0;
+
   const isSelected = (walletType: string, chain: string) =>
     !!selectableWallets.find(
       (selectableWallet) =>
@@ -291,7 +296,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       })}
       anchor="center">
       <WatermarkedModal
-        open={balanceWarnings.length > 0}
+        open={isInsufficientBalanceModalOpen}
         onClose={setBalanceWarnings.bind(null, [])}
         container={modalContainer}>
         <MessageBox

package/src/components/Quote/Quote.styles.ts

@@ -365,13 +365,6 @@ export const MoreStep = styled('div', {
   },
 });
 
-export const Tag = styled('div', {
-  backgroundColor: '$neutral400',
-  borderRadius: '$xs',
-  padding: '$2 $5',
-  fontSize: '$10',
-  fontWeight: 400,
-});
 export const TagContainer = styled('div', {
   display: 'flex',
 });

package/src/components/Quote/Quote.tsx

@@ -7,6 +7,7 @@ import {
   Alert,
   Divider,
   InfoIcon,
+  QuoteTag,
   StepDetails,
   TokenAmount,
   Tooltip,
@@ -15,7 +16,10 @@ import {
 import BigNumber from 'bignumber.js';
 import React, { useRef, useState } from 'react';
 
+import { GAS_FEE_MAX } from '../../constants/quote';
 import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
   PERCENTAGE_CHANGE_MAX_DECIMALS,
   PERCENTAGE_CHANGE_MIN_DECIMALS,
   TOKEN_AMOUNT_MAX_DECIMALS,
@@ -34,13 +38,18 @@ import {
   getBlockchainShortNameFor,
   getSwapperDisplayName,
 } from '../../utils/meta';
-import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+import {
+  formatTooltipNumbers,
+  numberToString,
+  secondsToString,
+  totalArrivalTime,
+} from '../../utils/numbers';
 import {
   getPriceImpact,
   getPriceImpactLevel,
-  getRouteTagColor,
   sortTags,
 } from '../../utils/quote';
+import { getTotalFeeInUsd } from '../../utils/swap';
 
 import {
   AllRoutesButton,
@@ -56,7 +65,6 @@ import {
   SummaryContainer,
   summaryHeaderStyles,
   summaryStyles,
-  Tag,
   TagContainer,
 } from './Quote.styles';
 import { QuoteCostDetails } from './QuoteCostDetails';
@@ -76,6 +84,7 @@ export function Quote(props: QuoteProps) {
     onClickAllRoutes,
   } = props;
   const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
   const swappers = useAppStore().swappers();
   const [expanded, setExpanded] = useState(props.expanded);
   const quoteRef = useRef<HTMLButtonElement | null>(null);
@@ -280,6 +289,13 @@ export function Quote(props: QuoteProps) {
   const container = getContainer();
   const sortedQuoteTags = sortTags(props.quote.tags || []);
   const showAllRoutesButton = !!onClickAllRoutes;
+  const totalTime = secondsToString(totalArrivalTime(quote?.swaps));
+  const totalFee = getTotalFeeInUsd(quote?.swaps ?? [], tokens);
+  const fee = numberToString(
+    totalFee,
+    GAS_FEE_MIN_DECIMALS,
+    GAS_FEE_MAX_DECIMALS
+  );
 
   return (
     <>
@@ -295,11 +311,7 @@ export function Quote(props: QuoteProps) {
                   const key = `${tag.value}_${index}`;
                   return (
                     <>
-                      <Tag
-                        style={{ color: getRouteTagColor(tag.value) }}
-                        key={key}>
-                        {tag.label}
-                      </Tag>
+                      <QuoteTag label={tag.label} key={key} value={tag.value} />
                       <Divider size={4} direction="horizontal" />
                     </>
                   );
@@ -310,7 +322,13 @@ export function Quote(props: QuoteProps) {
             </>
           ) : null}
           <div id="portal-root" className={summaryHeaderStyles()}>
-            <QuoteCostDetails steps={numberOfSteps} quote={quote} />
+            <QuoteCostDetails
+              steps={numberOfSteps}
+              quote={quote}
+              time={totalTime}
+              fee={fee}
+              feeWarning={totalFee.gte(new BigNumber(GAS_FEE_MAX))}
+            />
 
             {showAllRoutesButton && (
               <AllRoutesButton

package/src/components/Quote/Quote.types.ts

@@ -40,4 +40,7 @@ export type QuoteTriggerImagesProps = {
 export type QuoteCostDetailsProps = {
   quote: SelectedQuote | null;
   steps: number;
+  fee: string;
+  time: string;
+  feeWarning?: boolean;
 };

package/src/components/Quote/QuoteCostDetails.tsx

@@ -1,5 +1,6 @@
 import type { QuoteCostDetailsProps } from './Quote.types';
 import type { NameOfFees } from '../../constants/quote';
+import type BigNumber from 'bignumber.js';
 
 import { i18n } from '@lingui/core';
 import {
@@ -11,7 +12,6 @@ import {
   Tooltip,
   Typography,
 } from '@rango-dev/ui';
-import BigNumber from 'bignumber.js';
 import React, { useState } from 'react';
 
 import { NAME_OF_FEES } from '../../constants/quote';
@@ -21,20 +21,9 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
-import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
-import {
-  formatTooltipNumbers,
-  numberToString,
-  secondsToString,
-  totalArrivalTime,
-} from '../../utils/numbers';
-import {
-  getFeesGroup,
-  getTotalFeeInUsd,
-  getTotalFeesInUsd,
-  getUsdFee,
-} from '../../utils/swap';
+import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+import { getFeesGroup, getTotalFeesInUsd, getUsdFee } from '../../utils/swap';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
 import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
@@ -47,8 +36,6 @@ import {
   trigger,
 } from './QuoteCostDetails.styles';
 
-const GAS_FEE_MAX = 30;
-
 const NonPayableFee = (props: { fee: BigNumber; label: string }) => {
   return !props.fee.isZero() ? (
     <FeeSection>
@@ -70,14 +57,10 @@ const NonPayableFee = (props: { fee: BigNumber; label: string }) => {
 export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const [open, setOpen] = useState<boolean>(false);
   const [openCollapse, setOpenCollapse] = useState<boolean>(false);
-  const { steps, quote } = props;
-  const tokens = useAppStore().tokens();
-  const totalTime = secondsToString(totalArrivalTime(quote?.swaps));
+  const { steps, quote, fee, time, feeWarning } = props;
   const swaps = quote?.swaps ?? [];
   const container = getContainer();
 
-  const totalFee = getTotalFeeInUsd(swaps, tokens);
-
   const feesGroup = getFeesGroup(swaps);
 
   return (
@@ -87,13 +70,9 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
           e.stopPropagation();
           setOpen(!open);
         }}
-        fee={numberToString(
-          totalFee,
-          GAS_FEE_MIN_DECIMALS,
-          GAS_FEE_MAX_DECIMALS
-        )}
-        feeWarning={totalFee.gte(new BigNumber(GAS_FEE_MAX))}
-        time={totalTime}
+        fee={fee}
+        feeWarning={feeWarning}
+        time={time}
         steps={steps}
         tooltipGas={i18n.t('View more info')}
         tooltipContainer={container}
@@ -164,7 +143,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
             <Typography variant="label" size="medium">
               $
               {numberToString(
-                totalFee,
+                fee,
                 USD_VALUE_MIN_DECIMALS,
                 USD_VALUE_MAX_DECIMALS
               )}

package/src/components/QuoteSkeleton/QuoteSkeleton.types.ts

@@ -1,5 +1,7 @@
+import type { QuoteProps } from '../Quote/Quote.types';
+
 export type PropTypes = {
-  type: 'basic' | 'list-item' | 'swap-preview';
+  type: QuoteProps['type'];
   expanded?: boolean;
   tagHidden?: boolean;
 };

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -95,9 +95,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
             type="primary"
             size="large"
             onClick={() => window.open(diagnosisUrl, '_blank')}>
-            <Typography variant="title" size="medium" color="primary">
-              {i18n.t('Diagnosis')}
-            </Typography>
+            {i18n.t('Diagnosis')}
           </Button>
           <Divider size={12} />
         </>

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

@@ -1,7 +1,7 @@
 import type { CancelContentProps } from './SwapDetailsModal.types';
 
 import { i18n } from '@lingui/core';
-import { Button, Divider, MessageBox, Typography } from '@rango-dev/ui';
+import { Button, Divider, MessageBox } from '@rango-dev/ui';
 import React from 'react';
 
 export const CancelContent = ({ onCancel, onClose }: CancelContentProps) => {
@@ -19,15 +19,11 @@ export const CancelContent = ({ onCancel, onClose }: CancelContentProps) => {
         type="primary"
         size="large"
         onClick={onCancel}>
-        <Typography variant="title" size="medium" color="neutral100">
-          {i18n.t('Yes, Cancel it')}
-        </Typography>
+        {i18n.t('Yes, Cancel it')}
       </Button>
       <Divider size={12} />
       <Button variant="outlined" type="primary" size="large" onClick={onClose}>
-        <Typography variant="title" size="medium" color="primary">
-          {i18n.t('No, Continue')}
-        </Typography>
+        {i18n.t('No, Continue')}
       </Button>
     </>
   );

package/src/components/SwapDetailsModal/SwapDetailsModal.Delete.tsx

@@ -19,9 +19,7 @@ export const DeleteContent = ({ onDelete, onClose }: DeleteContentProps) => {
         type="primary"
         size="large"
         onClick={onDelete}>
-        <Typography variant="title" size="medium" color="neutral100">
-          {i18n.t('Yes, Delete it')}
-        </Typography>
+        {i18n.t('Yes, Delete it')}
       </Button>
       <Divider size={12} />
       <Button variant="outlined" type="primary" size="large" onClick={onClose}>

package/src/constants/quote.ts

@@ -37,3 +37,5 @@ export const HIGH_PRIORITY_TAGS: TagValue[] = [
   'FASTEST',
   'HIGH_IMPACT',
 ];
+
+export const GAS_FEE_MAX = 30;

package/src/containers/Wallets/Wallets.tsx

@@ -3,15 +3,14 @@ import type {
   PropTypes,
   WidgetContextInterface,
 } from './Wallets.types';
-import type { Wallet } from '../../types/wallets';
 import type { ProvidersOptions } from '../../utils/providers';
 import type { EventHandler } from '@rango-dev/wallets-react';
-import type { Network } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
 import { Events, Provider } from '@rango-dev/wallets-react';
+import { type Network } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-sdk';
-import React, { createContext, useEffect, useRef, useState } from 'react';
+import React, { createContext, useEffect, useRef } from 'react';
 
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
@@ -35,7 +34,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const walletOptions: ProvidersOptions = {
     walletConnectProjectId: props.config?.walletConnectProjectId,
   };
-  const [accounts, setAccounts] = useState<Wallet[]>([]);
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
@@ -67,7 +65,9 @@ function Main(props: PropsWithChildren<PropTypes>) {
           supportedChainNames,
           meta.isContractWallet
         );
-        setAccounts(data);
+        if (data.length) {
+          connectWallet(data, tokens);
+        }
       } else {
         disconnectWallet(type);
       }
@@ -102,12 +102,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
   };
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  useEffect(() => {
-    if (accounts.length) {
-      connectWallet(accounts, tokens);
-    }
-  }, [accounts, tokens]);
-
   return (
     <WidgetContext.Provider
       // eslint-disable-next-line react/jsx-no-constructed-context-values

package/src/pages/Home.tsx

@@ -102,7 +102,7 @@ export function Home() {
     formatBalance(fromTokenBalance)?.amount ?? '0';
 
   const tokenBalanceReal =
-    !!fromBlockchain && !!fromToken
+    !!fromBlockchain && !!fromToken && fromTokenBalance?.amount
       ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
       : '0';
 
@@ -203,9 +203,7 @@ export function Home() {
               loadingBalance={fetchingBalance}
               tooltipContainer={getContainer()}
               onSelectMaxBalance={() => {
-                if (fromTokenFormattedBalance !== '0') {
-                  setInputAmount(tokenBalanceReal.split(',').join(''));
-                }
+                setInputAmount(tokenBalanceReal.split(',').join(''));
               }}
             />
             <SwitchFromAndToButton />

package/src/utils/quote.ts

@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { QuoteWarning, SelectedQuote, Wallet } from '../types';
-import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 import type {
+  PriceImpactWarningLevel,
   SimulationAssetAndAmount,
   SimulationValidationStatus,
-} from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
+  Step,
+} from '@rango-dev/ui';
 import type {
   Asset,
   BlockchainMeta,
@@ -12,7 +13,6 @@ import type {
   MultiRouteSimulationResult,
   PreferenceType,
   RouteTag,
-  TagValue,
   Token,
 } from 'rango-sdk';
 import type { PendingSwap } from 'rango-types';
@@ -372,19 +372,3 @@ export const sortTags = (tags: RouteTag[]): RouteTag[] => {
 
   return tags.sort(customSort);
 };
-
-export const getRouteTagColor = (tag: TagValue): string => {
-  switch (tag) {
-    case 'FASTEST':
-      return '#06C270';
-    case 'RECOMMENDED':
-      return '#469BF5';
-    case 'LOWEST_FEE':
-      return '#FF4DAD';
-    case 'HIGH_IMPACT':
-      return '#FF3B3B';
-    case 'CENTRALIZED':
-    default:
-      return '#FFF1D4';
-  }
-};