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

package/dist/widget-embedded.cjs.development.js

@@ -445,7 +445,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 {
@@ -470,80 +470,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 => {
@@ -585,7 +511,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 => {
@@ -598,6 +524,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,
@@ -753,8 +680,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) => {
@@ -771,7 +711,20 @@ const createSelectors = _store => {
   return store;
 };
 
-const httpService = /*#__PURE__*/new rangoSdk.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 rangoSdk.RangoClient(getConfig('API_KEY'));
+  return rango;
+};
 
 const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
 const DEFAULT_SLIPPAGE = 1;
@@ -789,7 +742,7 @@ const useMetaStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()
   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);
@@ -809,6 +762,7 @@ const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.crea
   slippage: DEFAULT_SLIPPAGE,
   customSlippage: null,
   infiniteApprove: false,
+  affiliateRef: null,
   disabledLiquiditySources: [],
   theme: 'auto',
   setSlippage: slippage => set(() => ({
@@ -817,6 +771,9 @@ const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.crea
   setCustomSlippage: customSlippage => set(() => ({
     customSlippage: customSlippage
   })),
+  setAffiliateRef: affiliateRef => set(() => ({
+    affiliateRef
+  })),
   toggleAllLiquiditySources: () => set(state => {
     const {
       swappers
@@ -867,7 +824,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.creat
     }));
     accounts.forEach(async account => {
       try {
-        const response = await httpService.getWalletsDetails([{
+        const response = await httpService().getWalletsDetails([{
           address: account.address,
           blockchain: account.chain
         }]);
@@ -1020,7 +977,6 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
     toToken: token
   })),
   setInputAmount: amount => {
-    console.log(amount, typeof amount);
     set(state => ({
       inputAmount: amount,
       ...(!amount && {
@@ -1073,7 +1029,17 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
       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;
@@ -1086,20 +1052,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__default(0)
     });
-    httpService.getBestRoute(requestBody, {
+    httpService().getBestRoute(requestBody, {
       signal: abortController.signal
     }).then(res => {
       const {
@@ -1126,7 +1093,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,
@@ -1148,17 +1115,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 {
@@ -1323,6 +1299,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__default.createElement(React__default.Fragment, null, showPercentageChange && React__default.createElement(ui.Typography, {
+    variant: "caption",
+    color: "$error500"
+  }, `(${numberToString(percentageChange, 0, 2)}%)`));
+}
+
 const Box = /*#__PURE__*/ui.styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -1366,12 +1356,15 @@ const Container = /*#__PURE__*/ui.styled('div', {
     '.amount': {
       width: '30%'
     }
+  },
+  '.output-usd': {
+    display: 'flex',
+    div: {
+      display: 'flex',
+      paddingLeft: '$8'
+    }
   }
 });
-const StyledImage = /*#__PURE__*/ui.styled('img', {
-  width: '$24',
-  maxHeight: '$24'
-});
 const Options = /*#__PURE__*/ui.styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
@@ -1450,10 +1443,15 @@ function TokenInfo(props) {
     type: "primary",
     variant: "ghost",
     size: "compact"
-  }, t('Max')))) : React__default.createElement(ui.Typography, {
+  }, t('Max')))) : React__default.createElement("div", {
+    className: "output-usd"
+  }, React__default.createElement(PercentageChange, {
+    inputUsdValue: inputUsdValue,
+    outputUsdValue: props.outputUsdValue
+  }), React__default.createElement("div", null, React__default.createElement(ui.Typography, {
     variant: "caption",
     color: "neutrals600"
-  }, `$${numberToString(props.outputUsdValue)}`)), React__default.createElement("div", {
+  }, `$${numberToString(props.outputUsdValue)}`)))), React__default.createElement("div", {
     className: "form"
   }, React__default.createElement(ui.Button, {
     className: "selectors",
@@ -1463,8 +1461,9 @@ function TokenInfo(props) {
     variant: "outlined",
     disabled: loadingStatus === 'failed',
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && chain ? React__default.createElement(StyledImage, {
-      src: chain.logo
+    prefix: loadingStatus === 'success' && chain ? React__default.createElement(ui.Image, {
+      src: chain.logo,
+      size: 24
     }) : React__default.createElement(ImagePlaceholder, null),
     suffix: ItemSuffix,
     align: "start",
@@ -1479,8 +1478,9 @@ function TokenInfo(props) {
     variant: "outlined",
     disabled: loadingStatus === 'failed' || type === 'From' && !fromChain || type === 'To' && !toChain,
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && token ? React__default.createElement(StyledImage, {
-      src: token.image
+    prefix: loadingStatus === 'success' && token ? React__default.createElement(ui.Image, {
+      src: token.image,
+      size: 24
     }) : React__default.createElement(ImagePlaceholder, null),
     suffix: ItemSuffix,
     size: "large",
@@ -1625,7 +1625,8 @@ function HeaderButtons(props) {
     onClick: onClickRefresh,
     disabled: !onClickRefresh
   }, React__default.createElement(ui.RetryIcon, {
-    size: 24
+    size: 24,
+    disabled: !onClickRefresh
   }))), React__default.createElement(ui.Tooltip, {
     content: "Transactions History"
   }, React__default.createElement(ui.Button, {
@@ -1665,10 +1666,7 @@ const Alerts = /*#__PURE__*/ui.styled('div', {
   width: '100%',
   paddingTop: '$16'
 });
-function Home(props) {
-  const {
-    title = 'SWAP'
-  } = props;
+function Home() {
   const isRouterInContext = reactRouterDom.useInRouterContext();
   const navigate = reactRouterDom.useNavigate();
   const [count, setCount] = React.useState(0);
@@ -1676,10 +1674,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();
@@ -1692,14 +1686,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);
@@ -1720,7 +1707,7 @@ function Home(props) {
     return setCurrentPage.bind(null, '');
   }, []);
   return React__default.createElement(Container$2, null, React__default.createElement(ui.Header, {
-    title: title,
+    title: "SWAP",
     suffix: React__default.createElement(HeaderButtons, {
       onClickRefresh: !!bestRoute ? fetchBestRoute : undefined
     })
@@ -1732,7 +1719,10 @@ function Home(props) {
     inputAmount: inputAmount
   }), React__default.createElement(SwitchButtonContainer, null, React__default.createElement(ui.Button, {
     variant: "ghost",
-    onClick: swithFromAndTo
+    onClick: () => {
+      switchFromAndTo();
+      setCount(prev => prev + 1);
+    }
   }, React__default.createElement(ui.VerticalSwapIcon, {
     size: 32
   }), isRouterInContext && React__default.createElement(SwithFromAndTo, {
@@ -1778,8 +1768,7 @@ function Home(props) {
 
 const Route = _ref => {
   let {
-    children,
-    ...props
+    children
   } = _ref;
   const location = reactRouter.useLocation();
   const navigate = reactRouter.useNavigate();
@@ -1790,7 +1779,7 @@ const Route = _ref => {
     });
     ref.current = false;
   }, []);
-  if (location.pathname === navigationRoutes.confirmSwap && ref.current) return React__default.createElement(Home, Object.assign({}, props));
+  if (location.pathname === navigationRoutes.confirmSwap && ref.current) return React__default.createElement(Home, null);
   return React__default.createElement(React__default.Fragment, null, " ", children);
 };
 function AppRouter(_ref2) {
@@ -1862,7 +1851,10 @@ const Container$3 = /*#__PURE__*/ui.styled('div', {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    minHeight: '32px'
+    minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8'
+    }
   },
   '.form': {
     display: 'flex',
@@ -1881,10 +1873,6 @@ const Container$3 = /*#__PURE__*/ui.styled('div', {
     }
   }
 });
-const StyledImage$1 = /*#__PURE__*/ui.styled('img', {
-  width: '$24',
-  maxHeight: '$24'
-});
 const ImagePlaceholder$1 = /*#__PURE__*/ui.styled('span', {
   width: '24px',
   height: '24px',
@@ -1907,7 +1895,8 @@ function TokenPreview(props) {
   const {
     chain,
     token,
-    loadingStatus
+    loadingStatus,
+    percentageChange
   } = props;
   const {
     t
@@ -1929,17 +1918,19 @@ function TokenPreview(props) {
   }, React__default.createElement(ui.Typography, {
     variant: "body2",
     color: "neutrals800"
-  }, props.label), props.usdValue && React__default.createElement(ui.Typography, {
+  }, props.label), React__default.createElement("div", null, percentageChange, props.usdValue && React__default.createElement(ui.Typography, {
     variant: "caption",
-    color: "neutrals600"
-  }, `$${numberToString(props.usdValue)}`)), React__default.createElement("div", {
+    color: "neutrals600",
+    className: "usd-value"
+  }, `$${numberToString(props.usdValue)}`))), React__default.createElement("div", {
     className: "form"
   }, React__default.createElement(ui.Button, {
     className: "selectors",
     variant: "outlined",
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && chain ? React__default.createElement(StyledImage$1, {
-      src: chain.logo
+    prefix: loadingStatus === 'success' && chain ? React__default.createElement(ui.Image, {
+      src: chain.logo,
+      size: 24
     }) : React__default.createElement(ImagePlaceholder$1, null),
     suffix: ItemSuffix,
     align: "start",
@@ -1950,8 +1941,9 @@ function TokenPreview(props) {
     className: "selectors",
     variant: "outlined",
     loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && token ? React__default.createElement(StyledImage$1, {
-      src: token.image
+    prefix: loadingStatus === 'success' && token ? React__default.createElement(ui.Image, {
+      src: token.image,
+      size: 24
     }) : React__default.createElement(ImagePlaceholder$1, null),
     suffix: ItemSuffix,
     size: "large",
@@ -2029,6 +2021,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();
@@ -2061,17 +2054,16 @@ function useConfirmSwap() {
       if (warnings.length > 0) setWarnings([]);
       proceedAnywayRef.current = false;
       if (confiremedRouteRef.current) {
-        const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRouteRef.current, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
-        //@ts-ignore
+        const newSwap = queueManagerRangoPreset.calculatePendingSwap(inputAmount.toString(), confiremedRouteRef.current, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
         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;
@@ -2124,8 +2116,7 @@ function useConfirmSwap() {
           slippage: userSlippage.toString(),
           disabledSwappersGroups: disabledLiquiditySources
         };
-        const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
-        //@ts-ignore
+        const newSwap = queueManagerRangoPreset.calculatePendingSwap(inputAmount.toString(), confiremedRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
         return newSwap;
       } else if (!proceedAnywayRef.current) {
         proceedAnywayRef.current = true;
@@ -2311,6 +2302,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
@@ -2341,7 +2334,10 @@ function ConfirmSwapPage() {
     getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
   };
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-  return React__default.createElement(ui.ConfirmSwap, {
+  return React__default.createElement(ui.ConfirmSwap
+  // @ts-ignore
+  , {
+    // @ts-ignore
     requiredWallets: getRequiredChains(bestRoute),
     selectableWallets: selectableWallets,
     onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
@@ -2350,7 +2346,9 @@ function ConfirmSwapPage() {
         if (swap) {
           manager?.create('swap', {
             swapDetails: swap
-          }, {
+          },
+          // @ts-ignore
+          {
             id: swap.requestId
           });
           setSelectedSwap(swap.requestId);
@@ -2373,7 +2371,7 @@ function ConfirmSwapPage() {
         symbol: firstStep?.from.symbol || '',
         image: firstStep?.from.logo || ''
       },
-      usdValue: calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice),
+      usdValue: inputUsdValue,
       amount: fromAmount,
       label: i18n.t('From'),
       loadingStatus: bestRouteloadingStatus
@@ -2389,10 +2387,14 @@ function ConfirmSwapPage() {
         symbol: lastStep?.to.symbol || '',
         image: lastStep?.to.logo || ''
       },
-      usdValue: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
+      usdValue: outputUsdValue,
       amount: toAmount,
       label: i18n.t('To'),
-      loadingStatus: bestRouteloadingStatus
+      loadingStatus: bestRouteloadingStatus,
+      percentageChange: React__default.createElement(PercentageChange, {
+        inputUsdValue: inputUsdValue,
+        outputUsdValue: outputUsdValue
+      })
     })),
     previewRoutes: React__default.createElement(RoutesOverview, {
       routes: bestRoute,
@@ -2504,7 +2506,7 @@ function LiquiditySourcePage(_ref) {
   });
   return React__default.createElement(ui.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
@@ -2516,7 +2518,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();
@@ -2548,8 +2550,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();
@@ -2602,8 +2604,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__default.createElement(ui.Settings, {
     slippages: SLIPPAGES,
     selectedSlippage: slippage,
@@ -2656,7 +2658,7 @@ function WalletsPage(_ref) {
     getWalletInfo,
     connect
   } = walletsCore.useWallets();
-  const wallets = getlistWallet(state, getWalletInfo, supportedWallets === 'all' ? Object.values(walletsShared.WalletType) : supportedWallets);
+  const wallets = getlistWallet(state, getWalletInfo, supportedWallets || Object.values(walletsShared.WalletType));
   const walletsRef = React.useRef();
   let sortedWallets = walletsShared.detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
   sortedWallets = sortWalletsBasedOnState(sortedWallets);
@@ -2865,7 +2867,7 @@ function SwapDetailsPage() {
     }), React__default.createElement(TokenPreview, {
       chain: {
         displayName: lastStep?.toBlockchain || '',
-        // @ts-ignore
+        //@ts-ignore
         logo: lastStep?.toBlockchainLogo || ''
       },
       token: {
@@ -2877,7 +2879,6 @@ function SwapDetailsPage() {
       loadingStatus: 'success'
     })),
     //todo: move PendingSwap type to rango-types
-    //@ts-ignore
     pendingSwap: swap,
     onCopy: handleCopy,
     isCopied: isCopied,
@@ -2907,48 +2908,44 @@ function SwapDetailsPage() {
 const getAbsolutePath = path => path.replace('/', '');
 function AppRoutes(props) {
   const {
-    configs
+    config
   } = props;
   return reactRouterDom.useRoutes([{
     path: getAbsolutePath(navigationRoutes.home),
-    element: React__default.createElement(Home, {
-      title: configs?.title,
-      titleSize: configs?.titleSize,
-      titleWeight: configs?.titleWeight
-    })
+    element: React__default.createElement(Home, null)
   }, {
     path: getAbsolutePath(navigationRoutes.fromChain),
     element: React__default.createElement(SelectChainPage, {
       type: "from",
-      supportedChains: configs?.fromChains || 'all'
+      supportedChains: config?.from?.blockchains
     })
   }, {
     path: getAbsolutePath(navigationRoutes.toChain),
     element: React__default.createElement(SelectChainPage, {
       type: "to",
-      supportedChains: configs?.toChains || 'all'
+      supportedChains: config?.to?.blockchains
     })
   }, {
     path: getAbsolutePath(navigationRoutes.fromToken),
     element: React__default.createElement(SelectTokenPage, {
       type: "from",
-      supportedTokens: configs?.fromTokens || 'all'
+      supportedTokens: config?.from?.tokens
     })
   }, {
     path: getAbsolutePath(navigationRoutes.toToken),
     element: React__default.createElement(SelectTokenPage, {
       type: "to",
-      supportedTokens: configs?.toTokens || 'all'
+      supportedTokens: config?.to?.tokens
     })
   }, {
     path: getAbsolutePath(navigationRoutes.settings),
     element: React__default.createElement(SettingsPage, {
-      supportedSwappers: configs?.liquiditySources || 'all'
+      supportedSwappers: config?.liquiditySources
     })
   }, {
     path: getAbsolutePath(navigationRoutes.liquiditySources),
     element: React__default.createElement(LiquiditySourcePage, {
-      supportedSwappers: configs?.liquiditySources || 'all'
+      supportedSwappers: config?.liquiditySources
     })
   }, {
     path: getAbsolutePath(navigationRoutes.swaps),
@@ -2959,8 +2956,8 @@ function AppRoutes(props) {
   }, {
     path: getAbsolutePath(navigationRoutes.wallets),
     element: React__default.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),
@@ -2976,16 +2973,14 @@ const Header = /*#__PURE__*/ui.styled('div', {
     display: 'flex'
   }
 });
-const WalletImage = /*#__PURE__*/ui.styled('img', {
-  width: '$24',
-  height: '$24',
+const WalletImageContainer = /*#__PURE__*/ui.styled('div', {
   marginLeft: -15,
   marginRight: '$6',
   borderRadius: '99999px'
 });
 function Layout(_ref) {
   let {
-    configs
+    config
   } = _ref;
   const navigate = reactRouterDom.useNavigate();
   const {
@@ -2997,11 +2992,16 @@ function Layout(_ref) {
     getWalletInfo
   } = walletsCore.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();
@@ -3010,22 +3010,23 @@ function Layout(_ref) {
     t
   } = reactI18next.useTranslation();
   React.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]);
   React.useEffect(() => {
-    setInputAmount(configs?.fromAmount?.toString() || '');
-  }, [configs?.fromAmount]);
+    setInputAmount(config?.amount?.toString() || '');
+  }, [config?.amount]);
   React.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]);
   React.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__default.createElement(React__default.Fragment, null, React__default.createElement(Header, null, React__default.createElement(ui.Button, {
     size: "small",
     suffix: React__default.createElement(ui.AddWalletIcon, {
@@ -3038,15 +3039,17 @@ function Layout(_ref) {
     onClick: () => {
       if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
     }
-  }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React__default.createElement(WalletImage, {
-    key: index,
-    src: walletImage
-  })) : React__default.createElement(React__default.Fragment, null), React__default.createElement("div", {
+  }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React__default.createElement(WalletImageContainer, {
+    key: index
+  }, React__default.createElement(ui.Image, {
+    src: walletImage,
+    size: 24
+  }))) : React__default.createElement(React__default.Fragment, null), React__default.createElement("div", {
     className: "balance"
   }, React__default.createElement(ui.Typography, {
     variant: "body2"
   }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`), fetchingBalance && React__default.createElement(ui.Spinner, null)))), React__default.createElement(AppRoutes, {
-    configs: configs
+    config: config
   }));
 }
 
@@ -3089,17 +3092,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',
@@ -3141,6 +3147,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 = ui.createTheme({
@@ -3159,6 +3168,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] = React.useState(customeLightTheme);
@@ -3177,6 +3189,9 @@ function useTheme(_ref) {
       window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', switchTheme);
     };
   }, []);
+  React.useEffect(() => {
+    if (mode !== 'auto') setTheme(mode);
+  }, [mode]);
   const prevFont = usePrevious(fontFamily);
   React.useLayoutEffect(() => {
     const {
@@ -3281,6 +3296,11 @@ function QueueManager(props) {
     canSwitchNetworkTo,
     getWalletInfo
   } = walletsCore.useWallets();
+  const swapQueueDef = React.useMemo(() => {
+    return queueManagerRangoPreset.makeQueueDefinition({
+      API_KEY: getConfig('API_KEY')
+    });
+  }, []);
   const {
     blockchains
   } = useMetaStore.use.meta();
@@ -3330,7 +3350,7 @@ function QueueManager(props) {
   //@ts-ignore
   , {
     //@ts-ignore
-    queuesDefs: [queueManagerRangoPreset.swapQueueDef],
+    queuesDefs: [swapQueueDef],
     context: context,
     onPersistedDataLoaded: manager => {
       queueManagerRangoPreset.checkWaitingForNetworkChange(manager);
@@ -3341,29 +3361,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] = React.useState('');
   const [disconnectedWallet, setDisconnectedWallet] = React.useState();
+  const currentPage = useUiStore.use.currentPage();
   const evmBasedChainNames = blockchains.filter(rangoSdk.isEvmBlockchain).map(chain => chain.name);
   const onUpdateState = (type, event, value, state, supportedChains) => {
     if (event === walletsCore.Events.ACCOUNTS) {
@@ -3388,19 +3406,16 @@ const SwapBox = _ref => {
   };
   let providers = providerAll.allProviders();
   React.useEffect(() => {
-    if (configs.theme !== 'auto') setTheme(configs.theme);
-  }, [configs.theme]);
-  React.useEffect(() => {
-    const wallets = configs.wallets;
+    const wallets = config?.wallets;
     clearConnectedWallet();
-    providers = wallets === 'all' ? providerAll.allProviders() : providerAll.allProviders().filter(provider => {
+    providers = !wallets ? providerAll.allProviders() : providerAll.allProviders().filter(provider => {
       const type = provider.config.type;
       return wallets.find(w => w === type);
     });
-  }, [configs?.wallets]);
+  }, [config?.wallets]);
   React.useEffect(() => {
-    changeLanguage(configs?.languege);
-  }, [configs?.languege]);
+    changeLanguage(config?.language || 'en');
+  }, [config?.language]);
   return React__default.createElement(walletsCore.Provider, {
     allBlockChains: blockchains,
     providers: providers,
@@ -3409,21 +3424,15 @@ const SwapBox = _ref => {
     id: "pageContainer",
     className: activeTheme
   }, React__default.createElement(QueueManager, null, React__default.createElement(ui.SwapContainer, {
-    style: {
-      width: configs?.width || 'auto',
-      height: configs?.height || 'auto'
-    }
+    fixedHeight: currentPage !== navigationRoutes.home
   }, React__default.createElement(AppRouter, {
-    title: configs.title,
-    titleSize: configs.titleSize,
-    titleWeight: configs.titleWeight,
     lastConnectedWallet: lastConnectedWalletWithNetwork,
     disconnectedWallet: disconnectedWallet,
     clearDisconnectedWallet: () => {
       setDisconnectedWallet(undefined);
     }
   }, React__default.createElement(Layout, {
-    configs: configs
+    config: config
   }))))));
 };