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

package/dist/widget-embedded.esm.js

@@ -1,7 +1,7 @@
-import { WalletState, InfoCircleIcon, AngleDownIcon, Typography, 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';
@@ -436,7 +436,7 @@ function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, has
   };else if (inputIsZero) return {
     title: 'Enter an amount',
     disabled: true
-  };else if (!bestRoute) return {
+  };else if (!bestRoute || !bestRoute.result) return {
     title: 'Swap',
     disabled: true
   };else if (hasLimitError) return {
@@ -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,
@@ -744,8 +671,21 @@ function getRequiredBalanceOfWallet(selectedWallet, fee) {
   if (!relatedFeeStatus) return null;
   return relatedFeeStatus.requiredAssets;
 }
-function isRouteParametersChanged(prevParams, currentParams) {
-  return !!currentParams.fromToken && !!currentParams.toToken && (prevParams.fromChain?.name !== currentParams.fromChain?.name || prevParams.toChain?.name !== currentParams.toChain?.name || prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol || prevParams.toToken?.symbol !== currentParams.toToken?.symbol || prevParams.fromToken?.blockchain !== currentParams.fromToken?.blockchain || prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain || prevParams.fromToken?.address !== currentParams.fromToken?.address || prevParams.toToken?.address !== currentParams.toToken?.address || prevParams.inputAmount !== currentParams.inputAmount || prevParams.slippage !== currentParams.slippage || prevParams.customSlippage !== currentParams.customSlippage || prevParams.disabledLiquiditySources?.length !== currentParams.disabledLiquiditySources?.length);
+function isRouteParametersChanged(params) {
+  if (params.store === 'bestRoute') {
+    const {
+      prevState,
+      currentState
+    } = params;
+    return !!currentState.fromToken && !!currentState.toToken && (prevState.fromChain?.name !== currentState.fromChain?.name || prevState.toChain?.name !== currentState.toChain?.name || prevState.fromToken?.symbol !== currentState.fromToken?.symbol || prevState.toToken?.symbol !== currentState.toToken?.symbol || prevState.fromToken?.blockchain !== prevState.fromToken?.blockchain || prevState.toToken?.blockchain !== currentState.toToken?.blockchain || prevState.fromToken?.address !== currentState.fromToken?.address || prevState.toToken?.address !== currentState.toToken?.address || prevState.inputAmount !== currentState.inputAmount);
+  } else if (params.store === 'settings') {
+    const {
+      prevState,
+      currentState
+    } = params;
+    return prevState.slippage !== currentState.slippage || prevState.customSlippage !== currentState.customSlippage || prevState.disabledLiquiditySources?.length !== currentState.disabledLiquiditySources?.length || prevState.infiniteApprove || currentState.infiniteApprove;
+  }
+  return false;
 }
 //todo: refactor bestRoute store and add loadingStatus
 const getBestRouteStatus = (loading, error) => {
@@ -762,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;
@@ -780,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);
@@ -800,6 +753,7 @@ const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*
   slippage: DEFAULT_SLIPPAGE,
   customSlippage: null,
   infiniteApprove: false,
+  affiliateRef: null,
   disabledLiquiditySources: [],
   theme: 'auto',
   setSlippage: slippage => set(() => ({
@@ -808,6 +762,9 @@ const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*
   setCustomSlippage: customSlippage => set(() => ({
     customSlippage: customSlippage
   })),
+  setAffiliateRef: affiliateRef => set(() => ({
+    affiliateRef
+  })),
   toggleAllLiquiditySources: () => set(state => {
     const {
       swappers
@@ -858,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
         }]);
@@ -1011,7 +968,6 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
     toToken: token
   })),
   setInputAmount: amount => {
-    console.log(amount, typeof amount);
     set(state => ({
       inputAmount: amount,
       ...(!amount && {
@@ -1064,7 +1020,17 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
       sourceTokens: sortedSourceTokens,
       destinationTokens: sortedDestinationTokens
     });
-  }
+  },
+  switchFromAndTo: () => set(state => ({
+    fromChain: state.toChain,
+    fromToken: state.toToken,
+    toChain: state.fromChain,
+    toToken: state.fromToken,
+    sourceTokens: state.destinationTokens,
+    destinationTokens: state.sourceTokens,
+    inputAmount: state.outputAmount?.toString() || '',
+    inputUsdValue: getUsdValue(state.toToken, state.outputAmount?.toString() || '')
+  }))
 }))));
 const bestRoute = (bestRouteStore, settingsStore) => {
   let abortController = null;
@@ -1077,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 {
@@ -1117,7 +1084,7 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       inputAmount,
       inputUsdValue
     } = useBestRouteStore.getState();
-    if (!inputAmount || inputAmount === '0') return;
+    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return;
     if (tokensAreEqual(fromToken, toToken)) return bestRouteStore.setState({
       loading: false,
       bestRoute: null,
@@ -1139,17 +1106,26 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     toToken: state.toToken,
     inputAmount: state.inputAmount
   }), bestRouteParamsListener, {
-    equalityFn: (prevState, state) => {
-      if (isRouteParametersChanged(prevState, state)) return false;else return true;
+    equalityFn: (prevState, currentState) => {
+      if (isRouteParametersChanged({
+        store: 'bestRoute',
+        prevState,
+        currentState
+      })) return false;else return true;
     }
   });
   useSettingsStore.subscribe(state => ({
     slippage: state.slippage,
     customSlippage: state.customSlippage,
-    disabledLiquiditySources: state.disabledLiquiditySources
+    disabledLiquiditySources: state.disabledLiquiditySources,
+    infiniteApprove: state.infiniteApprove
   }), bestRouteParamsListener, {
-    equalityFn: (prevState, state) => {
-      if (isRouteParametersChanged(prevState, state)) return false;else return true;
+    equalityFn: (prevState, currentState) => {
+      if (isRouteParametersChanged({
+        store: 'settings',
+        prevState,
+        currentState
+      })) return false;else return true;
     }
   });
   return {
@@ -1314,6 +1290,20 @@ function UpdateUrl() {
   return null;
 }
 
+function PercentageChange(props) {
+  const {
+    inputUsdValue,
+    outputUsdValue
+  } = props;
+  if (!inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)) return null;
+  const percentageChange = getPercentageChange(inputUsdValue.toNumber(), outputUsdValue.toNumber());
+  const showPercentageChange = percentageChange?.lt(0);
+  return React.createElement(React.Fragment, null, showPercentageChange && React.createElement(Typography, {
+    variant: "caption",
+    color: "$error500"
+  }, `(${numberToString(percentageChange, 0, 2)}%)`));
+}
+
 const Box = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -1357,12 +1347,15 @@ const Container = /*#__PURE__*/styled('div', {
     '.amount': {
       width: '30%'
     }
+  },
+  '.output-usd': {
+    display: 'flex',
+    div: {
+      display: 'flex',
+      paddingLeft: '$8'
+    }
   }
 });
-const StyledImage = /*#__PURE__*/styled('img', {
-  width: '$24',
-  maxHeight: '$24'
-});
 const Options = /*#__PURE__*/styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
@@ -1441,10 +1434,15 @@ function TokenInfo(props) {
     type: "primary",
     variant: "ghost",
     size: "compact"
-  }, t('Max')))) : React.createElement(Typography, {
+  }, t('Max')))) : React.createElement("div", {
+    className: "output-usd"
+  }, React.createElement(PercentageChange, {
+    inputUsdValue: inputUsdValue,
+    outputUsdValue: props.outputUsdValue
+  }), React.createElement("div", null, React.createElement(Typography, {
     variant: "caption",
     color: "neutrals600"
-  }, `$${numberToString(props.outputUsdValue)}`)), React.createElement("div", {
+  }, `$${numberToString(props.outputUsdValue)}`)))), React.createElement("div", {
     className: "form"
   }, React.createElement(Button, {
     className: "selectors",
@@ -1454,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",
@@ -1470,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",
@@ -1616,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, {
@@ -1656,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);
@@ -1667,10 +1665,6 @@ function Home(props) {
   const fromToken = useBestRouteStore.use.fromToken();
   const toChain = useBestRouteStore.use.toChain();
   const toToken = useBestRouteStore.use.toToken();
-  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 inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const inputAmount = useBestRouteStore.use.inputAmount();
@@ -1683,14 +1677,7 @@ function Home(props) {
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const accounts = useWalletsStore.use.accounts();
   const setCurrentPage = useUiStore.use.setCurrentPage();
-  const swithFromAndTo = () => {
-    setFromChain(toChain);
-    setFromToken(toToken);
-    setToChain(fromChain);
-    setToToken(fromToken);
-    setInputAmount(outputAmount?.toString() || '');
-    setCount(prev => prev + 1);
-  };
+  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
   const errorMessage = loadingMetaStatus === 'failed' ? errorMessages.genericServerError : bestRouteError;
   const needsToWarnEthOnPath = false;
   const showBestRoute = inputAmount && (!!bestRoute || fetchingBestRoute || bestRouteError);
@@ -1711,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
     })
@@ -1723,7 +1710,10 @@ function Home(props) {
     inputAmount: inputAmount
   }), React.createElement(SwitchButtonContainer, null, React.createElement(Button, {
     variant: "ghost",
-    onClick: swithFromAndTo
+    onClick: () => {
+      switchFromAndTo();
+      setCount(prev => prev + 1);
+    }
   }, React.createElement(VerticalSwapIcon, {
     size: 32
   }), isRouterInContext && React.createElement(SwithFromAndTo, {
@@ -1769,8 +1759,7 @@ function Home(props) {
 
 const Route = _ref => {
   let {
-    children,
-    ...props
+    children
   } = _ref;
   const location = useLocation$1();
   const navigate = useNavigate$1();
@@ -1781,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) {
@@ -1853,7 +1842,10 @@ const Container$3 = /*#__PURE__*/styled('div', {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    minHeight: '32px'
+    minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8'
+    }
   },
   '.form': {
     display: 'flex',
@@ -1872,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',
@@ -1898,7 +1886,8 @@ function TokenPreview(props) {
   const {
     chain,
     token,
-    loadingStatus
+    loadingStatus,
+    percentageChange
   } = props;
   const {
     t
@@ -1920,17 +1909,19 @@ function TokenPreview(props) {
   }, React.createElement(Typography, {
     variant: "body2",
     color: "neutrals800"
-  }, props.label), props.usdValue && React.createElement(Typography, {
+  }, props.label), React.createElement("div", null, percentageChange, props.usdValue && React.createElement(Typography, {
     variant: "caption",
-    color: "neutrals600"
-  }, `$${numberToString(props.usdValue)}`)), React.createElement("div", {
+    color: "neutrals600",
+    className: "usd-value"
+  }, `$${numberToString(props.usdValue)}`))), React.createElement("div", {
     className: "form"
   }, React.createElement(Button, {
     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",
@@ -1941,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",
@@ -2020,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();
@@ -2053,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;
@@ -2116,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;
@@ -2302,6 +2293,8 @@ function ConfirmSwapPage() {
   const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
   const bestRouteloadingStatus = getBestRouteStatus(fetchingBestRoute, !!fetchingBestRouteError);
   const {
     manager
@@ -2332,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),
@@ -2341,7 +2337,9 @@ function ConfirmSwapPage() {
         if (swap) {
           manager?.create('swap', {
             swapDetails: swap
-          }, {
+          },
+          // @ts-ignore
+          {
             id: swap.requestId
           });
           setSelectedSwap(swap.requestId);
@@ -2364,7 +2362,7 @@ function ConfirmSwapPage() {
         symbol: firstStep?.from.symbol || '',
         image: firstStep?.from.logo || ''
       },
-      usdValue: calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice),
+      usdValue: inputUsdValue,
       amount: fromAmount,
       label: t('From'),
       loadingStatus: bestRouteloadingStatus
@@ -2380,10 +2378,14 @@ function ConfirmSwapPage() {
         symbol: lastStep?.to.symbol || '',
         image: lastStep?.to.logo || ''
       },
-      usdValue: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
+      usdValue: outputUsdValue,
       amount: toAmount,
       label: t('To'),
-      loadingStatus: bestRouteloadingStatus
+      loadingStatus: bestRouteloadingStatus,
+      percentageChange: React.createElement(PercentageChange, {
+        inputUsdValue: inputUsdValue,
+        outputUsdValue: outputUsdValue
+      })
     })),
     previewRoutes: React.createElement(RoutesOverview, {
       routes: bestRoute,
@@ -2495,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
@@ -2507,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();
@@ -2539,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();
@@ -2593,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,
@@ -2647,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);
@@ -2856,7 +2858,7 @@ function SwapDetailsPage() {
     }), React.createElement(TokenPreview, {
       chain: {
         displayName: lastStep?.toBlockchain || '',
-        // @ts-ignore
+        //@ts-ignore
         logo: lastStep?.toBlockchainLogo || ''
       },
       token: {
@@ -2868,7 +2870,6 @@ function SwapDetailsPage() {
       loadingStatus: 'success'
     })),
     //todo: move PendingSwap type to rango-types
-    //@ts-ignore
     pendingSwap: swap,
     onCopy: handleCopy,
     isCopied: isCopied,
@@ -2898,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),
@@ -2950,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),
@@ -2967,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 {
@@ -2988,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();
@@ -3001,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, {
@@ -3029,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
   }));
 }
 
@@ -3080,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',
@@ -3132,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({
@@ -3150,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);
@@ -3168,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 {
@@ -3272,6 +3287,11 @@ function QueueManager(props) {
     canSwitchNetworkTo,
     getWalletInfo
   } = useWallets();
+  const swapQueueDef = useMemo(() => {
+    return makeQueueDefinition({
+      API_KEY: getConfig('API_KEY')
+    });
+  }, []);
   const {
     blockchains
   } = useMetaStore.use.meta();
@@ -3332,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) {
@@ -3379,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,
@@ -3400,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
   }))))));
 };