@rango-dev/widget-embedded 0.1.11-next.0 → 0.1.11-next.10

package/dist/widget-embedded.esm.js

@@ -1,7 +1,7 @@
-import { WalletState, Typography, InfoCircleIcon, AngleDownIcon, Spacer, Button, TextField, styled, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, Alert, ChevronRightIcon, GasIcon, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, LoadingFailedAlert, Wallet, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
-import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
+import { WalletState, Typography, InfoCircleIcon, AngleDownIcon, Spacer, Button, Image, TextField, styled, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, Alert, ChevronRightIcon, GasIcon, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, LoadingFailedAlert, Wallet, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
+import React, { useRef, useEffect, useState, useLayoutEffect, useMemo } from 'react';
 import { useInRouterContext as useInRouterContext$1, MemoryRouter, useLocation as useLocation$1, useNavigate as useNavigate$1 } from 'react-router';
-import { PendingSwapNetworkStatus, useQueueManager, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, swapQueueDef, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
+import { PendingSwapNetworkStatus, useQueueManager, calculatePendingSwap, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, makeQueueDefinition, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
 import { isCosmosBlockchain, isEvmBlockchain } from 'rango-types';
 import { useSearchParams, useLocation, createSearchParams, useNavigate, useInRouterContext, useRoutes } from 'react-router-dom';
 import { create } from 'zustand';
@@ -461,80 +461,6 @@ function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, has
 function canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue) {
   return !((inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) && !!bestRoute?.result && !!inputAmount && inputAmount !== '0' && parseFloat(inputAmount || '0') !== 0 && !!bestRoute.result);
 }
-function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validateBalanceOrFee, meta) {
-  const simulationResult = bestRoute.result;
-  if (!simulationResult) throw Error('Simulation result should not be null');
-  return {
-    creationTime: new Date().getTime().toString(),
-    finishTime: null,
-    requestId: bestRoute.requestId || '',
-    inputAmount: inputAmount,
-    //@ts-ignore
-    wallets,
-    status: 'running',
-    isPaused: false,
-    extraMessage: null,
-    extraMessageSeverity: null,
-    extraMessageDetail: null,
-    extraMessageErrorCode: null,
-    networkStatusExtraMessage: null,
-    networkStatusExtraMessageDetail: null,
-    lastNotificationTime: null,
-    //@ts-ignore
-    settings: settings,
-    simulationResult: simulationResult,
-    validateBalanceOrFee,
-    //@ts-ignore
-    steps: bestRoute.result?.swaps?.map((swap, index) => {
-      const swapper = meta.swappers.find(swapper => swapper.id === swap.swapperId);
-      const swapperType = swapper?.types[0];
-      const fromBlockchain = meta.blockchains.find(blockchain => blockchain.name === swap.from.blockchain);
-      const toBlockchain = meta.blockchains.find(blockchain => blockchain.name === swap.to.blockchain);
-      return {
-        id: index + 1,
-        fromBlockchain: swap.from.blockchain,
-        fromSymbol: swap.from.symbol,
-        fromSymbolAddress: swap.from.address,
-        fromDecimals: swap.from.decimals,
-        fromAmountPrecision: swap.fromAmountPrecision,
-        fromAmountMinValue: swap.fromAmountMinValue,
-        fromAmountMaxValue: swap.fromAmountMaxValue,
-        toBlockchain: swap.to.blockchain,
-        fromLogo: swap.from.logo,
-        toSymbol: swap.to.symbol,
-        toSymbolAddress: swap.to.address,
-        toDecimals: swap.to.decimals,
-        toLogo: swap.to.logo,
-        startTransactionTime: new Date().getTime(),
-        swapperId: swap.swapperId,
-        feeInUsd: numberToString(getUsdFeeOfStep(swap, meta.tokens), null, 2),
-        expectedOutputAmountHumanReadable: swap.toAmount,
-        outputAmount: '',
-        status: 'created',
-        networkStatus: null,
-        executedTransactionId: null,
-        externalTransactionId: null,
-        explorerUrl: null,
-        trackingCode: null,
-        cosmosTransaction: null,
-        solanaTransaction: null,
-        starknetTransaction: null,
-        starknetApprovalTransaction: null,
-        tronTransaction: null,
-        tronApprovalTransaction: null,
-        evmTransaction: null,
-        evmApprovalTransaction: null,
-        transferTransaction: null,
-        diagnosisUrl: null,
-        internalSteps: null,
-        fromBlockchainLogo: fromBlockchain?.logo || '',
-        toBlockchainLogo: toBlockchain?.logo || '',
-        swapperLogo: swapper?.logo || '',
-        swapperType: swapperType || ''
-      };
-    }) || []
-  };
-}
 function requiredWallets(route) {
   const wallets = [];
   route?.result?.swaps.forEach(swap => {
@@ -576,7 +502,7 @@ function hasProperSlippage(userSlippage, minRequiredSlippage) {
   if (!minRequiredSlippage) return true;
   return parseFloat(userSlippage) >= parseFloat(minRequiredSlippage);
 }
-function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, selectedWallets, disabledLiquiditySources, slippage, checkPrerequisites) {
+function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, selectedWallets, disabledLiquiditySources, slippage, checkPrerequisites, affiliateRef) {
   const selectedWalletsMap = selectedWallets.reduce((selectedWalletsMap, selectedWallet) => (selectedWalletsMap[selectedWallet.chain] = selectedWallet.address, selectedWalletsMap), {});
   const connectedWallets = [];
   wallets.forEach(wallet => {
@@ -589,6 +515,7 @@ function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, se
   const filteredBlockchains = selectedWallets.map(wallet => wallet.chain);
   const requestBody = {
     amount: inputAmount.toString(),
+    affiliateRef,
     checkPrerequisites,
     from: {
       address: fromToken.address,
@@ -775,7 +702,20 @@ const createSelectors = _store => {
   return store;
 };
 
-const httpService = /*#__PURE__*/new RangoClient(process.env.REACT_APP_API_KEY);
+const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+let configs = {
+  API_KEY: RANGO_PUBLIC_API_KEY
+};
+function getConfig(name) {
+  return configs[name];
+}
+
+let rango = undefined;
+const httpService = () => {
+  if (rango) return rango;
+  rango = new RangoClient(getConfig('API_KEY'));
+  return rango;
+};
 
 const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
 const DEFAULT_SLIPPAGE = 1;
@@ -793,7 +733,7 @@ const useMetaStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()(set =>
   loadingStatus: 'loading',
   fetchMeta: async () => {
     try {
-      const response = await httpService.getAllMetadata();
+      const response = await httpService().getAllMetadata();
       const chainThatHasTokenInMetaResponse = removeDuplicateFrom(response.tokens.map(t => t.blockchain));
       const enabledChains = response.blockchains.filter(chain => chain.enabled && chainThatHasTokenInMetaResponse.includes(chain.name));
       response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
@@ -813,6 +753,7 @@ const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*
   slippage: DEFAULT_SLIPPAGE,
   customSlippage: null,
   infiniteApprove: false,
+  affiliateRef: null,
   disabledLiquiditySources: [],
   theme: 'auto',
   setSlippage: slippage => set(() => ({
@@ -821,6 +762,9 @@ const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*
   setCustomSlippage: customSlippage => set(() => ({
     customSlippage: customSlippage
   })),
+  setAffiliateRef: affiliateRef => set(() => ({
+    affiliateRef
+  })),
   toggleAllLiquiditySources: () => set(state => {
     const {
       swappers
@@ -871,7 +815,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
     }));
     accounts.forEach(async account => {
       try {
-        const response = await httpService.getWalletsDetails([{
+        const response = await httpService().getWalletsDetails([{
           address: account.address,
           blockchain: account.chain
         }]);
@@ -1099,20 +1043,21 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     const {
       slippage,
       customSlippage,
-      disabledLiquiditySources
+      disabledLiquiditySources,
+      affiliateRef
     } = settingsStore.getState();
     if (!fromToken || !toToken || !inputAmount || inputAmount === '0') return;
     abortController?.abort();
     abortController = new AbortController();
     const userSlippage = !!customSlippage ? customSlippage : slippage;
-    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, false);
+    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, false, affiliateRef);
     if (!bestRouteStore.getState().loading) bestRouteStore.setState({
       loading: true,
       bestRoute: null,
       outputAmount: null,
       outputUsdValue: new BigNumber(0)
     });
-    httpService.getBestRoute(requestBody, {
+    httpService().getBestRoute(requestBody, {
       signal: abortController.signal
     }).then(res => {
       const {
@@ -1411,10 +1356,6 @@ const Container = /*#__PURE__*/styled('div', {
     }
   }
 });
-const StyledImage = /*#__PURE__*/styled('img', {
-  width: '$24',
-  maxHeight: '$24'
-});
 const Options = /*#__PURE__*/styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
@@ -1511,8 +1452,9 @@ function TokenInfo(props) {
     variant: "outlined",
     disabled: loadingStatus === 'failed',
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && chain ? React.createElement(StyledImage, {
-      src: chain.logo
+    prefix: loadingStatus === 'success' && chain ? React.createElement(Image, {
+      src: chain.logo,
+      size: 24
     }) : React.createElement(ImagePlaceholder, null),
     suffix: ItemSuffix,
     align: "start",
@@ -1527,8 +1469,9 @@ function TokenInfo(props) {
     variant: "outlined",
     disabled: loadingStatus === 'failed' || type === 'From' && !fromChain || type === 'To' && !toChain,
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && token ? React.createElement(StyledImage, {
-      src: token.image
+    prefix: loadingStatus === 'success' && token ? React.createElement(Image, {
+      src: token.image,
+      size: 24
     }) : React.createElement(ImagePlaceholder, null),
     suffix: ItemSuffix,
     size: "large",
@@ -1673,7 +1616,8 @@ function HeaderButtons(props) {
     onClick: onClickRefresh,
     disabled: !onClickRefresh
   }, React.createElement(RetryIcon, {
-    size: 24
+    size: 24,
+    disabled: !onClickRefresh
   }))), React.createElement(Tooltip, {
     content: "Transactions History"
   }, React.createElement(Button, {
@@ -1713,10 +1657,7 @@ const Alerts = /*#__PURE__*/styled('div', {
   width: '100%',
   paddingTop: '$16'
 });
-function Home(props) {
-  const {
-    title = 'SWAP'
-  } = props;
+function Home() {
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
   const [count, setCount] = useState(0);
@@ -1757,7 +1698,7 @@ function Home(props) {
     return setCurrentPage.bind(null, '');
   }, []);
   return React.createElement(Container$2, null, React.createElement(Header$1, {
-    title: title,
+    title: "SWAP",
     suffix: React.createElement(HeaderButtons, {
       onClickRefresh: !!bestRoute ? fetchBestRoute : undefined
     })
@@ -1818,8 +1759,7 @@ function Home(props) {
 
 const Route = _ref => {
   let {
-    children,
-    ...props
+    children
   } = _ref;
   const location = useLocation$1();
   const navigate = useNavigate$1();
@@ -1830,7 +1770,7 @@ const Route = _ref => {
     });
     ref.current = false;
   }, []);
-  if (location.pathname === navigationRoutes.confirmSwap && ref.current) return React.createElement(Home, Object.assign({}, props));
+  if (location.pathname === navigationRoutes.confirmSwap && ref.current) return React.createElement(Home, null);
   return React.createElement(React.Fragment, null, " ", children);
 };
 function AppRouter(_ref2) {
@@ -1924,10 +1864,6 @@ const Container$3 = /*#__PURE__*/styled('div', {
     }
   }
 });
-const StyledImage$1 = /*#__PURE__*/styled('img', {
-  width: '$24',
-  maxHeight: '$24'
-});
 const ImagePlaceholder$1 = /*#__PURE__*/styled('span', {
   width: '24px',
   height: '24px',
@@ -1983,8 +1919,9 @@ function TokenPreview(props) {
     className: "selectors",
     variant: "outlined",
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && chain ? React.createElement(StyledImage$1, {
-      src: chain.logo
+    prefix: loadingStatus === 'success' && chain ? React.createElement(Image, {
+      src: chain.logo,
+      size: 24
     }) : React.createElement(ImagePlaceholder$1, null),
     suffix: ItemSuffix,
     align: "start",
@@ -1995,8 +1932,9 @@ function TokenPreview(props) {
     className: "selectors",
     variant: "outlined",
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && token ? React.createElement(StyledImage$1, {
-      src: token.image
+    prefix: loadingStatus === 'success' && token ? React.createElement(Image, {
+      src: token.image,
+      size: 24
     }) : React.createElement(ImagePlaceholder$1, null),
     suffix: ItemSuffix,
     size: "large",
@@ -2074,6 +2012,7 @@ function useConfirmSwap() {
   const initialRoute = useBestRouteStore.use.bestRoute();
   const setBestRoute = useBestRouteStore.use.setBestRoute();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const affiliateRef = useSettingsStore.use.affiliateRef();
   const accounts = useWalletsStore.use.accounts();
   const selectedWallets = useWalletsStore.use.selectedWallets();
   const meta = useMetaStore.use.meta();
@@ -2107,16 +2046,15 @@ function useConfirmSwap() {
       proceedAnywayRef.current = false;
       if (confiremedRouteRef.current) {
         const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRouteRef.current, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
-        //@ts-ignore
         return newSwap;
       }
       return;
     }
     abortControllerRef.current = new AbortController();
     setLoading(true);
-    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, accounts, selectedWallets, disabledLiquiditySources, userSlippage, true);
+    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, accounts, selectedWallets, disabledLiquiditySources, userSlippage, true, affiliateRef);
     try {
-      const confiremedRoute = await httpService.getBestRoute(requestBody, {
+      const confiremedRoute = await httpService().getBestRoute(requestBody, {
         signal: abortControllerRef.current?.signal
       });
       abortControllerRef.current = null;
@@ -2170,7 +2108,6 @@ function useConfirmSwap() {
           disabledSwappersGroups: disabledLiquiditySources
         };
         const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
-        //@ts-ignore
         return newSwap;
       } else if (!proceedAnywayRef.current) {
         proceedAnywayRef.current = true;
@@ -2388,7 +2325,10 @@ function ConfirmSwapPage() {
     getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
   };
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-  return React.createElement(ConfirmSwap, {
+  return React.createElement(ConfirmSwap
+  // @ts-ignore
+  , {
+    // @ts-ignore
     requiredWallets: getRequiredChains(bestRoute),
     selectableWallets: selectableWallets,
     onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
@@ -2397,7 +2337,9 @@ function ConfirmSwapPage() {
         if (swap) {
           manager?.create('swap', {
             swapDetails: swap
-          }, {
+          },
+          // @ts-ignore
+          {
             id: swap.requestId
           });
           setSelectedSwap(swap.requestId);
@@ -2555,7 +2497,7 @@ function LiquiditySourcePage(_ref) {
   });
   return React.createElement(LiquiditySourcesSelector, {
     toggleAll: toggleAllLiquiditySources,
-    list: supportedSwappers !== 'all' ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0) : uniqueSwappersGroups,
+    list: supportedSwappers ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s === item.title).length > 0) : uniqueSwappersGroups,
     onChange: liquiditySource => toggleLiquiditySource(liquiditySource.title),
     onBack: navigateBackFrom.bind(null, navigationRoutes.liquiditySources),
     loadingStatus: loadingMetaStatus
@@ -2567,7 +2509,7 @@ function SelectChainPage(props) {
     type,
     supportedChains
   } = props;
-  const blockchains = supportedChains === 'all' ? useMetaStore.use.meta().blockchains : supportedChains;
+  const blockchains = supportedChains ? useMetaStore.use.meta().blockchains.filter(chain => supportedChains.includes(chain.name)) : useMetaStore.use.meta().blockchains;
   const loadingStatus = useMetaStore.use.loadingStatus();
   const fromChain = useBestRouteStore.use.fromChain();
   const toChain = useBestRouteStore.use.toChain();
@@ -2599,8 +2541,8 @@ function SelectTokenPage(props) {
   } = props;
   const sourceTokens = useBestRouteStore.use.sourceTokens();
   const destinationTokens = useBestRouteStore.use.destinationTokens();
-  const supportedSourceTokens = supportedTokens === 'all' ? sourceTokens : sourceTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
-  const supportedDestinationTokens = supportedTokens === 'all' ? destinationTokens : destinationTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
+  const supportedSourceTokens = supportedTokens ? sourceTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token))) : sourceTokens;
+  const supportedDestinationTokens = supportedTokens ? destinationTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token))) : destinationTokens;
   const fromToken = useBestRouteStore.use.fromToken();
   const toToken = useBestRouteStore.use.toToken();
   const setFromToken = useBestRouteStore.use.setFromToken();
@@ -2653,8 +2595,8 @@ function SettingsPage(_ref) {
       }
     }
   });
-  supportedSwappers !== 'all' && uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0);
-  const supportedUniqueSwappersGroups = supportedSwappers !== 'all' ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0) : uniqueSwappersGroups;
+  supportedSwappers && uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s === item.title).length > 0);
+  const supportedUniqueSwappersGroups = supportedSwappers ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s === item.title).length > 0) : uniqueSwappersGroups;
   return React.createElement(Settings, {
     slippages: SLIPPAGES,
     selectedSlippage: slippage,
@@ -2707,7 +2649,7 @@ function WalletsPage(_ref) {
     getWalletInfo,
     connect
   } = useWallets();
-  const wallets = getlistWallet(state, getWalletInfo, supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets);
+  const wallets = getlistWallet(state, getWalletInfo, supportedWallets || Object.values(WalletType));
   const walletsRef = useRef();
   let sortedWallets = detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
   sortedWallets = sortWalletsBasedOnState(sortedWallets);
@@ -2916,7 +2858,7 @@ function SwapDetailsPage() {
     }), React.createElement(TokenPreview, {
       chain: {
         displayName: lastStep?.toBlockchain || '',
-        // @ts-ignore
+        //@ts-ignore
         logo: lastStep?.toBlockchainLogo || ''
       },
       token: {
@@ -2928,7 +2870,6 @@ function SwapDetailsPage() {
       loadingStatus: 'success'
     })),
     //todo: move PendingSwap type to rango-types
-    //@ts-ignore
     pendingSwap: swap,
     onCopy: handleCopy,
     isCopied: isCopied,
@@ -2958,48 +2899,44 @@ function SwapDetailsPage() {
 const getAbsolutePath = path => path.replace('/', '');
 function AppRoutes(props) {
   const {
-    configs
+    config
   } = props;
   return useRoutes([{
     path: getAbsolutePath(navigationRoutes.home),
-    element: React.createElement(Home, {
-      title: configs?.title,
-      titleSize: configs?.titleSize,
-      titleWeight: configs?.titleWeight
-    })
+    element: React.createElement(Home, null)
   }, {
     path: getAbsolutePath(navigationRoutes.fromChain),
     element: React.createElement(SelectChainPage, {
       type: "from",
-      supportedChains: configs?.fromChains || 'all'
+      supportedChains: config?.from?.blockchains
     })
   }, {
     path: getAbsolutePath(navigationRoutes.toChain),
     element: React.createElement(SelectChainPage, {
       type: "to",
-      supportedChains: configs?.toChains || 'all'
+      supportedChains: config?.to?.blockchains
     })
   }, {
     path: getAbsolutePath(navigationRoutes.fromToken),
     element: React.createElement(SelectTokenPage, {
       type: "from",
-      supportedTokens: configs?.fromTokens || 'all'
+      supportedTokens: config?.from?.tokens
     })
   }, {
     path: getAbsolutePath(navigationRoutes.toToken),
     element: React.createElement(SelectTokenPage, {
       type: "to",
-      supportedTokens: configs?.toTokens || 'all'
+      supportedTokens: config?.to?.tokens
     })
   }, {
     path: getAbsolutePath(navigationRoutes.settings),
     element: React.createElement(SettingsPage, {
-      supportedSwappers: configs?.liquiditySources || 'all'
+      supportedSwappers: config?.liquiditySources
     })
   }, {
     path: getAbsolutePath(navigationRoutes.liquiditySources),
     element: React.createElement(LiquiditySourcePage, {
-      supportedSwappers: configs?.liquiditySources || 'all'
+      supportedSwappers: config?.liquiditySources
     })
   }, {
     path: getAbsolutePath(navigationRoutes.swaps),
@@ -3010,8 +2947,8 @@ function AppRoutes(props) {
   }, {
     path: getAbsolutePath(navigationRoutes.wallets),
     element: React.createElement(WalletsPage, {
-      supportedWallets: configs?.wallets || 'all',
-      multiWallets: typeof configs?.multiWallets === 'undefined' ? true : configs.multiWallets
+      supportedWallets: config?.wallets,
+      multiWallets: typeof config?.multiWallets === 'undefined' ? true : config.multiWallets
     })
   }, {
     path: getAbsolutePath(navigationRoutes.confirmSwap),
@@ -3027,16 +2964,14 @@ const Header = /*#__PURE__*/styled('div', {
     display: 'flex'
   }
 });
-const WalletImage = /*#__PURE__*/styled('img', {
-  width: '$24',
-  height: '$24',
+const WalletImageContainer = /*#__PURE__*/styled('div', {
   marginLeft: -15,
   marginRight: '$6',
   borderRadius: '99999px'
 });
 function Layout(_ref) {
   let {
-    configs
+    config
   } = _ref;
   const navigate = useNavigate();
   const {
@@ -3048,11 +2983,16 @@ function Layout(_ref) {
     getWalletInfo
   } = useWallets();
   const connectedWalletsImages = removeDuplicateFrom(getSelectableWallets(accounts, selectedWallets, getWalletInfo).map(w => w.image));
+  const {
+    blockchains,
+    tokens
+  } = useMetaStore.use.meta();
   const setFromChain = useBestRouteStore.use.setFromChain();
   const setFromToken = useBestRouteStore.use.setFromToken();
   const setToChain = useBestRouteStore.use.setToChain();
   const setToToken = useBestRouteStore.use.setToToken();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const setAffiliateRef = useSettingsStore.use.setAffiliateRef();
   const totalBalance = calculateWalletUsdValue(balances);
   const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
@@ -3061,22 +3001,23 @@ function Layout(_ref) {
     t
   } = useTranslation();
   useEffect(() => {
-    setToChain(configs?.toChain || null);
-    setToToken(configs?.toToken || null);
-  }, [configs?.toChain, configs?.toToken]);
+    const chain = blockchains.find(chain => chain.name === config?.to?.blockchain);
+    const token = tokens.find(t => tokensAreEqual(t, config?.to?.token || null));
+    setToChain(chain || null);
+    setToToken(token || null);
+  }, [config?.to?.token, config?.to?.blockchain]);
   useEffect(() => {
-    setInputAmount(configs?.fromAmount?.toString() || '');
-  }, [configs?.fromAmount]);
+    setInputAmount(config?.amount?.toString() || '');
+  }, [config?.amount]);
   useEffect(() => {
-    setFromToken(configs?.fromToken || null);
-    setFromChain(configs?.fromChain || null);
-  }, [configs?.fromToken, configs?.fromChain]);
+    const chain = blockchains.find(chain => chain.name === config?.from?.blockchain);
+    const token = tokens.find(t => tokensAreEqual(t, config?.from?.token || null));
+    setFromChain(chain || null);
+    setFromToken(token || null);
+  }, [config?.from?.token, config?.from?.blockchain]);
   useEffect(() => {
-    setToChain(null);
-    setFromChain(null);
-    setFromToken(null);
-    setToToken(null);
-  }, [configs?.fromChains, configs?.toChains, configs?.fromTokens, configs?.toTokens]);
+    setAffiliateRef(config?.affiliateRef || null);
+  }, [config?.affiliateRef]);
   return React.createElement(React.Fragment, null, React.createElement(Header, null, React.createElement(Button, {
     size: "small",
     suffix: React.createElement(AddWalletIcon, {
@@ -3089,15 +3030,17 @@ function Layout(_ref) {
     onClick: () => {
       if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
     }
-  }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React.createElement(WalletImage, {
-    key: index,
-    src: walletImage
-  })) : React.createElement(React.Fragment, null), React.createElement("div", {
+  }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React.createElement(WalletImageContainer, {
+    key: index
+  }, React.createElement(Image, {
+    src: walletImage,
+    size: 24
+  }))) : React.createElement(React.Fragment, null), React.createElement("div", {
     className: "balance"
   }, React.createElement(Typography, {
     variant: "body2"
   }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`), fetchingBalance && React.createElement(Spinner, null)))), React.createElement(AppRoutes, {
-    configs: configs
+    config: config
   }));
 }
 
@@ -3140,17 +3083,20 @@ function usePrevious(value) {
 
 function useTheme(_ref) {
   let {
-    primary = '#5FA425',
-    background = '#fff',
-    foreground = '#000',
-    error = '#FF0000',
-    warning = '#F5A623',
-    success = '#0070F3',
+    colors: themeColors,
     fontFamily = 'Robot',
-    borderRadius = 8
+    borderRadius = 8,
+    mode = 'auto'
   } = _ref;
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
+  const setTheme = useSettingsStore.use.setTheme();
+  const primary = themeColors?.primary || '#5FA425',
+    background = themeColors?.background || '#fff',
+    foreground = themeColors?.foreground || '#000',
+    error = themeColors?.error || '#FF0000',
+    warning = themeColors?.warning || '#F5A623',
+    success = themeColors?.success || '#0070F3';
   const colors = {
     neutrals200: '#FAFAFA',
     neutrals300: '#f2f2f2',
@@ -3192,6 +3138,9 @@ function useTheme(_ref) {
     colors,
     radii: {
       5: `${borderRadius}px`
+    },
+    shadows: {
+      s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5'
     }
   });
   const customeDarkTheme = createTheme({
@@ -3210,6 +3159,9 @@ function useTheme(_ref) {
     },
     radii: {
       5: `${borderRadius}px`
+    },
+    shadows: {
+      s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222'
     }
   });
   const [OSTheme, setOSTheme] = useState(customeLightTheme);
@@ -3228,6 +3180,9 @@ function useTheme(_ref) {
       window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', switchTheme);
     };
   }, []);
+  useEffect(() => {
+    if (mode !== 'auto') setTheme(mode);
+  }, [mode]);
   const prevFont = usePrevious(fontFamily);
   useLayoutEffect(() => {
     const {
@@ -3332,6 +3287,11 @@ function QueueManager(props) {
     canSwitchNetworkTo,
     getWalletInfo
   } = useWallets();
+  const swapQueueDef = useMemo(() => {
+    return makeQueueDefinition({
+      API_KEY: getConfig('API_KEY')
+    });
+  }, []);
   const {
     blockchains
   } = useMetaStore.use.meta();
@@ -3392,29 +3352,27 @@ function QueueManager(props) {
 
 const SwapBox = _ref => {
   let {
-    configs
+    config
   } = _ref;
   globalStyles();
-  globalFont(configs?.fontFamily || 'Roboto');
+  globalFont(config?.theme?.fontFamily || 'Roboto');
   const {
     activeTheme
   } = useTheme({
-    ...configs.colors,
-    borderRadius: configs?.borderRadius,
-    fontFamily: configs?.fontFamily
+    ...config?.theme
   });
   const {
     blockchains
   } = useMetaStore.use.meta();
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
-  const setTheme = useSettingsStore.use.setTheme();
   const {
     changeLanguage
   } = useSelectLanguage();
   const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] = useState('');
   const [disconnectedWallet, setDisconnectedWallet] = useState();
+  const currentPage = useUiStore.use.currentPage();
   const evmBasedChainNames = blockchains.filter(isEvmBlockchain$1).map(chain => chain.name);
   const onUpdateState = (type, event, value, state, supportedChains) => {
     if (event === Events.ACCOUNTS) {
@@ -3439,19 +3397,16 @@ const SwapBox = _ref => {
   };
   let providers = allProviders();
   useEffect(() => {
-    if (configs.theme !== 'auto') setTheme(configs.theme);
-  }, [configs.theme]);
-  useEffect(() => {
-    const wallets = configs.wallets;
+    const wallets = config?.wallets;
     clearConnectedWallet();
-    providers = wallets === 'all' ? allProviders() : allProviders().filter(provider => {
+    providers = !wallets ? allProviders() : allProviders().filter(provider => {
       const type = provider.config.type;
       return wallets.find(w => w === type);
     });
-  }, [configs?.wallets]);
+  }, [config?.wallets]);
   useEffect(() => {
-    changeLanguage(configs?.languege);
-  }, [configs?.languege]);
+    changeLanguage(config?.language || 'en');
+  }, [config?.language]);
   return React.createElement(Provider$1, {
     allBlockChains: blockchains,
     providers: providers,
@@ -3460,21 +3415,15 @@ const SwapBox = _ref => {
     id: "pageContainer",
     className: activeTheme
   }, React.createElement(QueueManager, null, React.createElement(SwapContainer, {
-    style: {
-      width: configs?.width || 'auto',
-      height: configs?.height || 'auto'
-    }
+    fixedHeight: currentPage !== navigationRoutes.home
   }, React.createElement(AppRouter, {
-    title: configs.title,
-    titleSize: configs.titleSize,
-    titleWeight: configs.titleWeight,
     lastConnectedWallet: lastConnectedWalletWithNetwork,
     disconnectedWallet: disconnectedWallet,
     clearDisconnectedWallet: () => {
       setDisconnectedWallet(undefined);
     }
   }, React.createElement(Layout, {
-    configs: configs
+    config: config
   }))))));
 };