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

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBA+T9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBA8T9B"}

package/dist/pages/Home.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+export declare const TIME_TO_NAVIGATE_ANOTHER_PAGE = 300;
 export declare function Home(): React.JSX.Element;
 //# sourceMappingURL=Home.d.ts.map

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,sBAgQnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAwBnD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,wBAAgB,IAAI,sBAsLnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Routes.d.ts","sourceRoot":"","sources":["../../src/pages/Routes.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,wBAAgB,UAAU,sBA6GzB"}
+{"version":3,"file":"Routes.d.ts","sourceRoot":"","sources":["../../src/pages/Routes.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,wBAAgB,UAAU,sBAqDzB"}

package/dist/types/config.d.ts

@@ -2,6 +2,7 @@ import type { Language } from '@rango-dev/ui';
 import type { ProviderInterface } from '@rango-dev/wallets-react';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
+export type WidgetVariant = 'default' | 'expandable';
 /**
  * The above type defines a set of optional color properties for a widget.
  * @property {string} background
@@ -168,6 +169,9 @@ export type Features = Partial<Record<'theme' | 'language' | 'connectWalletButto
  *   - 'connectWalletButton': Visibility state for the wallet connect icon.
  *   - 'language': Visibility state for the language.
  *   - 'experimentalRoute': Enablement state for the experimental route.
+ * @property {WidgetVariant} variant
+ *   If it is expandable, multiple routes will show up on the home page;
+ *   if not, you will need to go to a different page to see the suggested routes.
  */
 export type WidgetConfig = {
     apiKey: string;
@@ -187,5 +191,6 @@ export type WidgetConfig = {
     externalWallets?: boolean;
     enableNewLiquiditySources?: boolean;
     features?: Features;
+    variant?: WidgetVariant;
 };
 //# sourceMappingURL=config.d.ts.map

package/dist/types/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"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"}

package/dist/utils/common.d.ts

@@ -3,4 +3,5 @@ export declare function areEqual(array1: (number | string)[], array2: (number |
 export declare function debounce(fn: Function, time: number): (...args: any) => void;
 export declare function containsText(text: string, searchText: string): boolean;
 export declare const getContainer: () => HTMLElement;
+export declare const getExpanded: () => HTMLElement;
 //# sourceMappingURL=common.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,YAAY,mBACyC,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,YAAY,mBACyC,CAAC;AAEnE,eAAO,MAAM,WAAW,mBAC8C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.0",
+  "version": "0.23.1-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -23,9 +23,9 @@
     "@lingui/react": "4.2.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-rango-preset": "^0.28.1-next.0",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.29.1-next.0",
+    "@rango-dev/ui": "^0.29.1-next.1",
     "@rango-dev/wallets-react": "^0.14.0",
     "@rango-dev/wallets-shared": "^0.28.0",
     "bignumber.js": "^9.1.1",

package/src/components/Layout/Layout.styles.ts

@@ -1,19 +1,21 @@
-import { styled } from '@rango-dev/ui';
+import { css, styled } from '@rango-dev/ui';
 
 const WIDGET_HEIGHT = '700px';
 
-export const Container = styled('div', {
-  position: 'relative',
+export const LayoutContainer = css({
+  borderRadius: '$primary',
   display: 'flex',
   flexDirection: 'column',
-  borderRadius: '$primary',
+  overflow: 'hidden',
+  boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
+});
+
+export const Container = styled('div', {
+  position: 'relative',
   width: '100vw',
   minWidth: '300px',
   maxWidth: '390px',
-  boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
-  overflow: 'hidden',
   backgroundColor: '$background',
-
   variants: {
     height: {
       auto: {

package/src/components/Layout/Layout.tsx

@@ -22,7 +22,7 @@ import { ActivateTabModal } from '../common/ActivateTabModal';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 
 import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
-import { Container, Content, Footer } from './Layout.styles';
+import { Container, Content, Footer, LayoutContainer } from './Layout.styles';
 
 function Layout(props: PropsWithChildren<PropTypes>) {
   const { connectHeightObserver, disconnectHeightObserver } = useIframe();
@@ -98,7 +98,7 @@ function Layout(props: PropsWithChildren<PropTypes>) {
     <Container
       height={height}
       id={WIDGET_UI_ID.SWAP_BOX_ID}
-      className={activeTheme()}
+      className={`${activeTheme()} ${LayoutContainer()}`}
       ref={containerRef}>
       <Header
         prefix={

package/src/components/NoResult/NoResult.styles.ts

@@ -1,11 +1,9 @@
 import { styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
-  minHeight: '162px',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  justifyContent: 'center',
 });
 
 export const Footer = styled('div', {

package/src/components/NoResult/NoResult.tsx

@@ -52,6 +52,7 @@ export function NoResult(props: PropTypes) {
           <Alert
             type={info.alert.type}
             title={info.alert.text}
+            titleAlign={'center'}
             action={
               info.alert.action && (
                 <Button

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

@@ -123,7 +123,7 @@ export const SummaryContainer = styled('div', {
       listItem: true,
       selected: true,
       css: {
-        border: '1px solid $secondary',
+        outline: '1px solid $secondary',
       },
     },
     {

package/src/components/Quote/Quote.tsx

@@ -69,7 +69,7 @@ import {
 } from './Quote.styles';
 import { QuoteCostDetails } from './QuoteCostDetails';
 import { QuoteSummary } from './QuoteSummary';
-import { QuoteTrigger } from './QuoteTrigger ';
+import { QuoteTrigger } from './QuoteTrigger';
 
 export function Quote(props: QuoteProps) {
   const {
@@ -81,6 +81,7 @@ export function Quote(props: QuoteProps) {
     type,
     selected = false,
     tagHidden = true,
+    showModalFee = true,
     onClickAllRoutes,
   } = props;
   const blockchains = useAppStore().blockchains();
@@ -323,11 +324,12 @@ export function Quote(props: QuoteProps) {
           ) : null}
           <div id="portal-root" className={summaryHeaderStyles()}>
             <QuoteCostDetails
-              steps={numberOfSteps}
               quote={quote}
               time={totalTime}
               fee={fee}
               feeWarning={totalFee.gte(new BigNumber(GAS_FEE_MAX))}
+              showModalFee={showModalFee}
+              steps={numberOfSteps}
             />
 
             {showAllRoutesButton && (

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

@@ -12,6 +12,7 @@ export type QuoteProps = {
   expanded?: boolean;
   tagHidden?: boolean;
   selected?: boolean;
+  showModalFee?: boolean;
   onClickAllRoutes?: () => void;
 };
 
@@ -43,4 +44,5 @@ export type QuoteCostDetailsProps = {
   fee: string;
   time: string;
   feeWarning?: boolean;
+  showModalFee: boolean;
 };

package/src/components/Quote/QuoteCostDetails.tsx

@@ -57,7 +57,7 @@ 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, fee, time, feeWarning } = props;
+  const { steps, quote, fee, time, feeWarning, showModalFee } = props;
   const swaps = quote?.swaps ?? [];
   const container = getContainer();
 
@@ -66,15 +66,19 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   return (
     <>
       <QuoteCost
-        onClickFee={(e) => {
-          e.stopPropagation();
-          setOpen(!open);
-        }}
+        onClickFee={
+          showModalFee
+            ? (e) => {
+                e.stopPropagation();
+                setOpen(!open);
+              }
+            : undefined
+        }
         fee={fee}
         feeWarning={feeWarning}
         time={time}
         steps={steps}
-        tooltipGas={i18n.t('View more info')}
+        tooltipGas={showModalFee ? i18n.t('View more info') : undefined}
         tooltipContainer={container}
       />
 

package/src/components/Quote/{QuoteTrigger .tsx → QuoteTrigger.tsx}

@@ -9,8 +9,9 @@ import {
   Tooltip,
   Typography,
 } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
+import useMobileDetect from '../../hooks/useMobileDetect';
 import { getContainer } from '../../utils/common';
 import { getUniqueBlockchains } from '../../utils/quote';
 
@@ -24,7 +25,6 @@ import {
 
 const MAX_STEPS = 4;
 const MAX_BLOCKCHAINS = 6;
-const MIN_WIDTH_WINDOW = 375;
 
 const ImageComponent = (props: QuoteTriggerImagesProps) => {
   const tooltipContainer = getContainer();
@@ -48,20 +48,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
   const tooltipContainer = getContainer();
   const numberOfSteps = steps.length;
   const blockchains = getUniqueBlockchains(steps);
-  const [isMobile, setIsMobile] = useState(false);
-
-  //choose the screen size
-  const handleResize = () => {
-    if (window.innerWidth < MIN_WIDTH_WINDOW) {
-      setIsMobile(true);
-    } else {
-      setIsMobile(false);
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-  });
+  const isMobile = useMobileDetect();
 
   return (
     <Trigger

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -75,7 +75,21 @@ export function HighValueLossWarningModal(props: Props) {
   ];
 
   return (
-    <WatermarkedModal open={open} onClose={onClose} container={getContainer()}>
+    <WatermarkedModal
+      footer={
+        <Button
+          type="primary"
+          size="large"
+          prefix={<WarningIcon />}
+          fullWidth
+          disabled={confirmationDisabled}
+          onClick={onConfirm}>
+          {errorMessages().highValueLossError.confirmMessage}
+        </Button>
+      }
+      open={open}
+      onClose={onClose}
+      container={getContainer()}>
       <MessageBox
         type={type}
         title={errorMessages().highValueLossError.impactTitle}
@@ -94,17 +108,6 @@ export function HighValueLossWarningModal(props: Props) {
           })}
         </Flex>
       </Flex>
-
-      <Divider size={32} />
-      <Button
-        type="primary"
-        size="large"
-        prefix={<WarningIcon />}
-        fullWidth
-        disabled={confirmationDisabled}
-        onClick={onConfirm}>
-        {errorMessages().highValueLossError.confirmMessage}
-      </Button>
     </WatermarkedModal>
   );
 }

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

@@ -1,7 +1,6 @@
 import type { QuoteError, QuoteWarning } from '../../types';
 
 export interface PropTypes {
-  loading: boolean;
   error: QuoteError | null;
   warning: QuoteWarning | null;
   showWarningModal: boolean;

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -1,6 +1,6 @@
 import type { UnknownPriceWarning } from '../../types';
 
-import { Button, Divider, MessageBox, WarningIcon } from '@rango-dev/ui';
+import { Button, MessageBox, WarningIcon } from '@rango-dev/ui';
 import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
@@ -18,23 +18,26 @@ type Props = {
 export function UnknownPriceWarningModal(props: Props) {
   const { open, onClose, onConfirm, confirmationDisabled } = props;
   return (
-    <WatermarkedModal open={open} onClose={onClose} container={getContainer()}>
+    <WatermarkedModal
+      footer={
+        <Button
+          type="primary"
+          size="large"
+          prefix={<WarningIcon />}
+          fullWidth
+          disabled={confirmationDisabled}
+          onClick={onConfirm}>
+          {errorMessages().unknownPriceError.confirmMessage}
+        </Button>
+      }
+      open={open}
+      onClose={onClose}
+      container={getContainer()}>
       <MessageBox
         type="warning"
         title={errorMessages().unknownPriceError.impactTitle}
         description={errorMessages().unknownPriceError.description}
       />
-
-      <Divider size={32} />
-      <Button
-        type="primary"
-        size="large"
-        prefix={<WarningIcon />}
-        fullWidth
-        disabled={confirmationDisabled}
-        onClick={onConfirm}>
-        {errorMessages().unknownPriceError.confirmMessage}
-      </Button>
     </WatermarkedModal>
   );
 }

package/src/components/Quotes/Quotes.styles.ts

@@ -0,0 +1,18 @@
+import { styled } from '@rango-dev/ui';
+
+export const ErrorsContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  height: '100%',
+});
+
+export const StrategyContent = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const SelectContainer = styled('div', {
+  width: '146px',
+});

package/src/components/Quotes/Quotes.tsx

@@ -0,0 +1,134 @@
+import type { PropTypes } from './Quotes.types';
+import type { MultiRouteSimulationResult } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { Divider, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { QuoteInfo } from '../../containers/QuoteInfo';
+import { getQuoteError } from '../../hooks/useConfirmSwap/useConfirmSwap.helpers';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+import { QuoteErrorType, type SelectedQuote } from '../../types';
+import { getContainer } from '../../utils/common';
+import { generateQuoteWarnings, sortQuotesBy } from '../../utils/quote';
+import { NoResult } from '../NoResult';
+import { QuoteSkeleton } from '../QuoteSkeleton';
+
+import { ErrorsContainer, StrategyContent } from './Quotes.styles';
+import { SelectStrategy } from './SelectStrategy';
+
+const ITEM_SKELETON_COUNT = 3;
+export function Quotes(props: PropTypes) {
+  const {
+    loading,
+    onClickOnQuote,
+    fetch,
+    showModalFee,
+    hasSort = true,
+  } = props;
+  const {
+    selectedQuote,
+    quotes,
+    updateQuotePartialState,
+    fromToken,
+    toToken,
+    sortStrategy,
+    error,
+  } = useQuoteStore();
+  const { slippage, customSlippage } = useAppStore();
+  const tokens = useAppStore().tokens();
+  const hasQuotes = !!quotes && quotes.results.length;
+  const userSlippage = customSlippage ?? slippage;
+  const getQuoteWarning = (quote: MultiRouteSimulationResult) => {
+    if (!fromToken || !toToken || !quotes) {
+      return null;
+    }
+    const mergedQuote: SelectedQuote = {
+      requestAmount: quotes.requestAmount, // Assuming quotes is an array
+      ...quote,
+    };
+
+    return generateQuoteWarnings(mergedQuote, {
+      fromToken,
+      toToken,
+      userSlippage,
+      tokens,
+    });
+  };
+  const showNoResultMessage =
+    error?.type === QuoteErrorType.NO_RESULT ||
+    error?.type === QuoteErrorType.REQUEST_FAILED;
+
+  const sortQuotes = quotes?.results
+    ? sortQuotesBy(sortStrategy, quotes?.results)
+    : [];
+
+  return (
+    <>
+      {loading &&
+        Array.from({ length: ITEM_SKELETON_COUNT }, (_, index) => (
+          <React.Fragment key={index}>
+            <QuoteSkeleton
+              tagHidden={false}
+              type="list-item"
+              expanded={false}
+            />
+            <Divider size={16} />
+          </React.Fragment>
+        ))}
+
+      {!loading && (
+        <>
+          {hasSort && (
+            <>
+              <StrategyContent>
+                <Typography size="xmedium" variant="title">
+                  {i18n.t('Sort by')}
+                </Typography>
+                <SelectStrategy container={getContainer()} />
+              </StrategyContent>
+              <Divider size="10" />
+            </>
+          )}
+          {hasQuotes
+            ? sortQuotes.map((quote) => {
+                const quoteWarning = getQuoteWarning(quote);
+                const quoteError = getQuoteError(quote.swaps);
+
+                return (
+                  <React.Fragment key={quote.requestId}>
+                    <QuoteInfo
+                      showModalFee={showModalFee}
+                      selected={selectedQuote?.requestId === quote.requestId}
+                      tagHidden={false}
+                      quote={{ ...quote, requestAmount: quotes.requestAmount }}
+                      loading={loading}
+                      error={quoteError?.options || null}
+                      warning={quoteWarning}
+                      onClick={(quote) => {
+                        if (!quoteError) {
+                          updateQuotePartialState('warning', quoteWarning);
+                        }
+                        updateQuotePartialState(
+                          'error',
+                          quoteError?.options || null
+                        );
+                        onClickOnQuote(quote);
+                      }}
+                      type="list-item"
+                    />
+                    <Divider size={16} />
+                  </React.Fragment>
+                );
+              })
+            : showNoResultMessage && (
+                <ErrorsContainer>
+                  <NoResult error={error} fetch={fetch} />
+                </ErrorsContainer>
+              )}
+        </>
+      )}
+    </>
+  );
+}

package/src/components/Quotes/Quotes.types.ts

@@ -0,0 +1,9 @@
+import type { SelectedQuote } from '../../types';
+
+export type PropTypes = {
+  loading: boolean;
+  onClickOnQuote: (quote: SelectedQuote) => void;
+  fetch: (shouldChangeSelectedQuote?: boolean) => void;
+  showModalFee?: boolean;
+  hasSort?: boolean;
+};

package/src/components/Quotes/SelectStrategy.tsx

@@ -0,0 +1,33 @@
+import type { PreferenceType } from 'rango-sdk';
+
+import { Select } from '@rango-dev/ui';
+import React from 'react';
+
+import { ROUTE_STRATEGY } from '../../constants/quote';
+import { useQuoteStore } from '../../store/quote';
+
+import { SelectContainer } from './Quotes.styles';
+
+export function SelectStrategy(props: { container: HTMLElement }) {
+  const { updateQuotePartialState, sortStrategy } = useQuoteStore();
+
+  return (
+    <SelectContainer>
+      <Select
+        container={props.container}
+        options={ROUTE_STRATEGY}
+        value={
+          ROUTE_STRATEGY.find(
+            (strategy) => strategy.value === sortStrategy
+          ) as {
+            value: PreferenceType;
+            label: string;
+          }
+        }
+        handleItemClick={(item) => {
+          updateQuotePartialState('sortStrategy', item.value as PreferenceType);
+        }}
+      />
+    </SelectContainer>
+  );
+}

package/src/components/Quotes/index.ts

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

package/src/constants/index.ts

@@ -6,5 +6,6 @@ export const SCANNER_BASE_URL = 'https://scan.rango.exchange';
 
 export const WIDGET_UI_ID = {
   SWAP_BOX_ID: 'rango-swap-box',
+  EXPANDED_BOX_ID: 'rango-expanded-box',
   ...UI_ID,
 };

package/src/constants/quote.ts

@@ -22,13 +22,28 @@ export type FeesGroup = {
   nonePayable: { [key in NameOfFees]?: SwapFee[] };
 };
 
-export const ROUTE_SORTING_STRATEGY: { [key in PreferenceType]: string } = {
-  SPEED: i18n.t('Fastest Transfer'),
-  NET_OUTPUT: i18n.t('Maximum Return'),
-  FEE: i18n.t('Lowest Fee'),
-  PRICE: i18n.t('Maximum Output'),
-  SMART: i18n.t('Smart Routing'),
-};
+export const ROUTE_STRATEGY: { value: PreferenceType; label: string }[] = [
+  {
+    value: 'SMART',
+    label: i18n.t('Smart Routing'),
+  },
+  {
+    value: 'FEE',
+    label: i18n.t('Lowest Fee'),
+  },
+  {
+    value: 'SPEED',
+    label: i18n.t('Fastest Transfer'),
+  },
+  {
+    value: 'NET_OUTPUT',
+    label: i18n.t('Maximum Return'),
+  },
+  {
+    value: 'PRICE',
+    label: i18n.t('Maximum Output'),
+  },
+];
 
 export const HIGH_PRIORITY_TAGS: TagValue[] = [
   'RECOMMENDED',