@rango-dev/widget-embedded 0.17.1-next.15 → 0.17.1-next.17

package/dist/types/config.d.ts

@@ -85,12 +85,22 @@ export type BlockchainAndTokenConfig = {
     blockchains?: string[];
     tokens?: Asset[];
 };
+/**
+ * `ExperimentalFeatures`
+ *
+ * @property {boolean} routing
+ *- This property is optional and sets experimental in quote api.
+ */
+type ExperimentalFeatures = {
+    routing?: boolean;
+};
 /**
  * The type WidgetConfig defines the configuration options for a widget, including API key, affiliate
  * reference, amount, blockchain and token configurations, liquidity sources, wallet types, language,
  * and theme.
  *
  * @property {string} apiKey - The API key used to communicate with Rango API
+ * @property {string} apiUrl - The API url used to set custom API url
  * @property {WidgetAffiliate} affiliate - If you want to charge users fee per transaction, you should
  * pass `WidgetAffiliate` including affiliateRef, affiliatePercent, and affiliateWallets.
  * @property {number} amount - The default input amount.
@@ -123,9 +133,11 @@ export type BlockchainAndTokenConfig = {
  * you could use to pin tokens of your choice to the top of the token list.
  * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
  * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
+ * @property {ExperimentalFeatures} experimental - The `experimental` property is an optional object that specifies some experimental features.
  */
 export type WidgetConfig = {
     apiKey: string;
+    apiUrl?: string;
     walletConnectProjectId?: string;
     affiliate?: WidgetAffiliate;
     amount?: number;
@@ -140,5 +152,7 @@ export type WidgetConfig = {
     externalWallets?: boolean;
     pinnedTokens?: Asset[];
     enableNewLiquiditySources?: boolean;
+    experimental?: ExperimentalFeatures;
 };
+export {};
 //# 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":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,YAAY,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,YAAY,CAAC;QAAC,IAAI,CAAC,EAAE,YAAY,CAAA;KAAE,CAAC;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;IACvB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,YAAY,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,YAAY,CAAC;QAAC,IAAI,CAAC,EAAE,YAAY,CAAA;KAAE,CAAC;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;GAKG;AACH,KAAK,oBAAoB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;IACvB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC,CAAC"}

package/dist/utils/configs.d.ts

@@ -1,5 +1,6 @@
 export interface Configs {
     API_KEY: string;
+    BASE_URL?: string;
 }
 export declare function getConfig(name: keyof Configs): string;
 export declare function setConfig(name: keyof Configs, value: any): any;

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

@@ -1 +1 @@
-{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../src/utils/configs.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AAMD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,UAE5C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,EAAE,KAAK,EAAE,GAAG,OAIxD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,WAS9C;AAED,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,uBAAuB,iBAAiB,CAAC"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../src/utils/configs.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAMD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,UAE5C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,EAAE,KAAK,EAAE,GAAG,OAIxD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,WAS9C;AAED,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,uBAAuB,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.17.1-next.15",
+  "version": "0.17.1-next.17",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",

package/src/QueueManager.tsx

@@ -30,6 +30,7 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
   const swapQueueDef = useMemo(() => {
     return makeQueueDefinition({
       API_KEY: props.apiKey || getConfig('API_KEY'),
+      BASE_URL: getConfig('BASE_URL'),
     });
   }, [props.apiKey]);
 

package/src/constants/index.ts

@@ -1 +1,2 @@
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+export const DEFAULT_BASE_URL = 'https://api.rango.exchange';

package/src/containers/App/App.tsx

@@ -1,7 +1,7 @@
 import type { WalletType } from '@rango-dev/wallets-shared';
 
 import { I18nManager } from '@rango-dev/ui';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import { AppRouter } from '../../components/AppRouter';
 import { AppRoutes } from '../../components/AppRoutes';
@@ -12,7 +12,6 @@ import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useSettingsStore } from '../../store/settings';
-import { initConfig } from '../../utils/configs';
 import { WidgetContext } from '../Wallets';
 
 import { MainContainer } from './App.styles';
@@ -28,13 +27,6 @@ export function Main() {
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
   const widgetContext = useContext(WidgetContext);
 
-  useMemo(() => {
-    if (config?.apiKey) {
-      initConfig({
-        API_KEY: config?.apiKey,
-      });
-    }
-  }, [config]);
   useEffect(() => {
     void fetchMeta().catch();
     void useSettingsStore.persist.rehydrate();

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -1,14 +1,23 @@
 import type { PropTypes } from './WidgetProvider.types';
 import type { PropsWithChildren } from 'react';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { DEFAULT_BASE_URL, RANGO_PUBLIC_API_KEY } from '../../constants';
 import QueueManager from '../../QueueManager';
+import { initConfig } from '../../utils/configs';
 import { WidgetWallets } from '../Wallets';
 import { WidgetInfo } from '../WidgetInfo';
 
 export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
   const { onUpdateState, config } = props;
+
+  useMemo(() => {
+    initConfig({
+      API_KEY: config?.apiKey || RANGO_PUBLIC_API_KEY,
+      BASE_URL: config?.apiUrl || DEFAULT_BASE_URL,
+    });
+  }, [config]);
   return (
     <WidgetWallets config={config} onUpdateState={onUpdateState}>
       <QueueManager apiKey={config.apiKey}>

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -42,7 +42,7 @@ export function useConfirmSwap(): ConfirmSwap {
   const { connectedWallets } = useWalletsStore();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
-
+  const { experimental } = useAppStore().config;
   const userSlippage = customSlippage || slippage;
 
   const { fetch: fetchQuote, cancelFetch, loading } = useFetchQuote();
@@ -77,7 +77,9 @@ export function useConfirmSwap(): ConfirmSwap {
       initialQuote: initialQuote,
       destination: customDestination,
     });
-
+    if (experimental?.routing) {
+      requestBody.experimental = true;
+    }
     let currentQuote: BestRouteResponse;
     try {
       currentQuote = await fetchQuote(requestBody).then((response) =>

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts

@@ -1 +1 @@
-export const MOST_USED_BLOCKChAINS = ['ETH', 'COSMOS', 'OSMOSIS'];
+export const MOST_USED_BLOCKCHAINS = ['ETH', 'COSMOS', 'OSMOSIS'];

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.ts

@@ -1,13 +1,16 @@
-import type { PrepareListOptions } from './usePrepareBlockchainList.types';
+import type {
+  PrepareListOptions,
+  PrepareOutput,
+} from './usePrepareBlockchainList.types';
 import type { BlockchainMeta } from 'rango-sdk';
 
-import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants';
+import { MOST_USED_BLOCKCHAINS } from './usePrepareBlockchainList.constants';
 
 export function prepare(
   blockchains: BlockchainMeta[],
   preferredBlockchains: string[],
   options?: PrepareListOptions
-) {
+): PrepareOutput {
   /*
    * TODO:
    * We copying the `blockchains` which can causes performance penalties but we should because we are mutating the original object.
@@ -25,17 +28,37 @@ export function prepare(
     let preferredBlockchainsWithoutMainList = preferredBlockchains;
 
     if (preferredBlockchains.length <= options.limit) {
-      /*
-       * For first X (limit) numbers, we need to remove them from preferred if exists.
+      /**
+       *
+       * if we want to show 10 items (aka `options.limit`)
+       * and have these items as our preferred list: [x,y,z]
+       * and these as our main list: [A, B, C, D, E, F, G, H, I, J]
+       * the final list will be like this: [...preferred, ...mainList].
+       *
+       * Since we have a limit (e.g. 10) on our list (preferred + mainList),
+       * we only should check those items from main list that will be in final list.
+       *
+       * finalListWithoutLimit = [x,y,z, A, B, C, D, E, F, G, H, I, J]
+       * finalListWithLimit = [x,y,z, A, B, C, D, E, F, G]
+       *
+       * As you can see, [H, I, J] will not be in our list.
+       *
+       * The following code only check preffred blockchain
+       * shouldn't be in first 7 of 10 items in main list. (Since, the last 3 items will not be in the final list and we should check those.)
        */
-      for (let i = 0; i < options.limit; i++) {
+      const howManyItemsShouldBeCheckedFromMainList =
+        options.limit - preferredBlockchains.length;
+
+      for (let i = 0; i <= howManyItemsShouldBeCheckedFromMainList; i++) {
         const blockchain = list[i];
+
         preferredBlockchainsWithoutMainList =
           preferredBlockchainsWithoutMainList.filter((preferredBlockchain) => {
             return blockchain.name !== preferredBlockchain;
           });
       }
     }
+
     list.sort(
       generateSortByPreferredBlockchainsFor(preferredBlockchainsWithoutMainList)
     );
@@ -57,7 +80,7 @@ export function sortByMostUsedBlockchains(
   a: BlockchainMeta,
   b: BlockchainMeta
 ) {
-  const mostUsed = MOST_USED_BLOCKChAINS;
+  const mostUsed = MOST_USED_BLOCKCHAINS;
   const aIndexInMostUsed = mostUsed.findIndex((token) => token === a.name);
   const bIndexInMostUsed = mostUsed.findIndex((token) => token === b.name);
   const aIsMostUsed = aIndexInMostUsed > -1;
@@ -106,3 +129,10 @@ export function generateSortByPreferredBlockchainsFor(
     return 0;
   };
 }
+
+export function isInVisibleList(
+  blockchain: string,
+  prepareOutput: PrepareOutput
+): boolean {
+  return !!prepareOutput.list.find((item) => item.name === blockchain);
+}

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.mock.ts

@@ -2,6 +2,66 @@ import type { BlockchainMeta } from 'rango-sdk';
 
 import { TransactionType } from 'rango-sdk';
 
+export const sampleDefaultBlockchainNames = [
+  'ETH',
+  'COSMOS',
+  'OSMOSIS',
+  'BSC',
+  'ARBITRUM',
+  'POLYGON',
+  'ZKSYNC',
+  'STARKNET',
+  'OPTIMISM',
+  'AVAX_CCHAIN',
+  'POLYGONZK',
+  'LINEA',
+  'TRON',
+  'BTC',
+  'NEUTRON',
+  'NOBLE',
+  'SOLANA',
+  'CRONOS',
+  'BNB',
+  'AURORA',
+  'MAYA',
+  'THOR',
+  'BOBA',
+  'MOONBEAM',
+  'MOONRIVER',
+  'OKC',
+  'BOBA_AVALANCHE',
+  'LTC',
+  'BCH',
+  'HECO',
+  'STARGAZE',
+  'CRYPTO_ORG',
+  'CHIHUAHUA',
+  'BANDCHAIN',
+  'COMDEX',
+  'REGEN',
+  'IRIS',
+  'EMONEY',
+  'JUNO',
+  'STRIDE',
+  'MARS',
+  'TERRA',
+  'BITSONG',
+  'AKASH',
+  'KI',
+  'PERSISTENCE',
+  'MEDIBLOC',
+  'KUJIRA',
+  'SENTINEL',
+  'INJECTIVE',
+  'SECRET',
+  'KONSTELLATION',
+  'STARNAME',
+  'BITCANNA',
+  'UMEE',
+  'DESMOS',
+  'LUMNETWORK',
+];
+
 export const sampleBlockchains: BlockchainMeta[] = [
   {
     name: 'ETH',

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.test.ts

@@ -2,7 +2,7 @@ import type { BlockchainMeta } from 'rango-sdk';
 
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants';
+import { MOST_USED_BLOCKCHAINS } from './usePrepareBlockchainList.constants';
 import {
   generateSortByPreferredBlockchainsFor,
   prepare,
@@ -20,8 +20,8 @@ describe('usePrepareBlockchainList', () => {
   it('should sort blockchains by most used ones.', () => {
     const sortedBlockchainsList = sample.sort(sortByMostUsedBlockchains);
 
-    const mostUsedCount = MOST_USED_BLOCKChAINS.length;
-    const expected = MOST_USED_BLOCKChAINS;
+    const mostUsedCount = MOST_USED_BLOCKCHAINS.length;
+    const expected = MOST_USED_BLOCKCHAINS;
     const received = sortedBlockchainsList
       .map((blockchain) => blockchain.name)
       .slice(0, mostUsedCount);
@@ -270,4 +270,79 @@ describe('usePrepareBlockchainList', () => {
       ...received.more.map((blockchain) => blockchain.name),
     ]);
   });
+
+  it.only('Last item of the main list should be moved to front if it selected again.', () => {
+    const listLimit = 10;
+    const preferredBlockchains = ['AVAX_CCHAIN', 'BTC'];
+    const expected = [
+      'AVAX_CCHAIN',
+      'BTC',
+      'ETH',
+      'COSMOS',
+      'OSMOSIS',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'POLYGONZK',
+      'LINEA',
+      'TRON',
+      'NEUTRON',
+      'NOBLE',
+      'SOLANA',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'BOBA_AVALANCHE',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CRYPTO_ORG',
+      'CHIHUAHUA',
+      'BANDCHAIN',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'AKASH',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'INJECTIVE',
+      'SECRET',
+      'KONSTELLATION',
+      'STARNAME',
+      'BITCANNA',
+      'UMEE',
+      'DESMOS',
+      'LUMNETWORK',
+    ];
+
+    const output = prepare(sample, preferredBlockchains, {
+      limit: listLimit,
+    });
+
+    const received = [
+      ...output.list.map((blockchain) => blockchain.name),
+      ...output.more.map((blockchain) => blockchain.name),
+    ];
+
+    expect(expected).toEqual(received);
+  });
 });

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.ts

@@ -1,6 +1,6 @@
 import type {
   PrepareListOptions,
-  PrepareListOutput,
+  UsePrepareList,
 } from './usePrepareBlockchainList.types';
 import type { BlockchainMeta } from 'rango-sdk';
 
@@ -8,7 +8,7 @@ import { useEffect } from 'react';
 
 import { useSettingsStore } from '../../store/settings';
 
-import { prepare } from './usePrepareBlockchainList.helpers';
+import { isInVisibleList, prepare } from './usePrepareBlockchainList.helpers';
 
 /**
  *
@@ -19,12 +19,21 @@ import { prepare } from './usePrepareBlockchainList.helpers';
 export function usePrepareBlockchainList(
   blockchains: BlockchainMeta[],
   options?: PrepareListOptions
-): PrepareListOutput {
+): UsePrepareList {
   const { preferredBlockchains, addPreferredBlockchain } = useSettingsStore();
 
   useEffect(() => {
     if (options?.selected) {
-      addPreferredBlockchain(options?.selected);
+      const output = prepare(blockchains, preferredBlockchains, options);
+
+      /**
+       * We only add a new blockchain to preferred when it's not in the main list
+       * In this way we can guarantee we will be able to regenerate the same list always.
+       * And also it helps us to avoid jumping for the last item of the main list (e.g. tenth item of our list).
+       */
+      if (!isInVisibleList(options.selected, output)) {
+        addPreferredBlockchain(options?.selected);
+      }
     }
   }, [options?.selected]);
 

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.types.ts

@@ -5,8 +5,13 @@ export interface PrepareListOptions {
   selected?: string;
 }
 
-export interface PrepareListOutput {
+export interface PrepareOutput {
   list: BlockchainMeta[];
   more: BlockchainMeta[];
+}
+
+export interface UsePrepareList {
+  list: PrepareOutput['list'];
+  more: PrepareOutput['more'];
   history: string[];
 }

package/src/hooks/useSwapInput.ts

@@ -33,7 +33,8 @@ type UseSwapInput = {
  */
 export function useSwapInput(): UseSwapInput {
   const { fetch: fetchQuote, cancelFetch } = useFetchQuote();
-  const { liquiditySources, enableNewLiquiditySources } = useAppStore().config;
+  const { liquiditySources, enableNewLiquiditySources, experimental } =
+    useAppStore().config;
   const tokens = useAppStore().tokens();
   const {
     fromToken,
@@ -86,6 +87,9 @@ export function useSwapInput(): UseSwapInput {
         affiliatePercent,
         affiliateWallets,
       });
+      if (experimental?.routing) {
+        requestBody.experimental = true;
+      }
       fetchQuote(requestBody)
         .then((res) => {
           setLoading(false);

package/src/services/httpService.ts

@@ -8,6 +8,6 @@ export const httpService = () => {
   if (rango) {
     return rango;
   }
-  rango = new RangoClient(getConfig('API_KEY'));
+  rango = new RangoClient(getConfig('API_KEY'), getConfig('BASE_URL'));
   return rango;
 };

package/src/types/config.ts

@@ -85,12 +85,23 @@ export type BlockchainAndTokenConfig = {
   tokens?: Asset[];
 };
 
+/**
+ * `ExperimentalFeatures`
+ *
+ * @property {boolean} routing
+ *- This property is optional and sets experimental in quote api.
+ */
+type ExperimentalFeatures = {
+  routing?: boolean;
+};
+
 /**
  * The type WidgetConfig defines the configuration options for a widget, including API key, affiliate
  * reference, amount, blockchain and token configurations, liquidity sources, wallet types, language,
  * and theme.
  *
  * @property {string} apiKey - The API key used to communicate with Rango API
+ * @property {string} apiUrl - The API url used to set custom API url
  * @property {WidgetAffiliate} affiliate - If you want to charge users fee per transaction, you should
  * pass `WidgetAffiliate` including affiliateRef, affiliatePercent, and affiliateWallets.
  * @property {number} amount - The default input amount.
@@ -123,9 +134,12 @@ export type BlockchainAndTokenConfig = {
  * you could use to pin tokens of your choice to the top of the token list.
  * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
  * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
+ * @property {ExperimentalFeatures} experimental - The `experimental` property is an optional object that specifies some experimental features.
  */
+
 export type WidgetConfig = {
   apiKey: string;
+  apiUrl?: string;
   walletConnectProjectId?: string;
   affiliate?: WidgetAffiliate;
   amount?: number;
@@ -140,4 +154,5 @@ export type WidgetConfig = {
   externalWallets?: boolean;
   pinnedTokens?: Asset[];
   enableNewLiquiditySources?: boolean;
+  experimental?: ExperimentalFeatures;
 };

package/src/utils/configs.ts

@@ -2,6 +2,7 @@ import { RANGO_PUBLIC_API_KEY } from '../constants';
 
 export interface Configs {
   API_KEY: string;
+  BASE_URL?: string;
 }
 
 let configs: Configs = {
@@ -9,7 +10,7 @@ let configs: Configs = {
 };
 
 export function getConfig(name: keyof Configs) {
-  return configs[name];
+  return configs[name] || '';
 }
 
 export function setConfig(name: keyof Configs, value: any) {