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

package/dist/widget-embedded.esm.js

@@ -1,4 +1,4 @@
-import { WalletState, InfoCircleIcon, Typography, Button, Image, Spacer, styled, ChevronRightIcon, GasIcon, Alert, ConfirmSwap, LoadingFailedAlert, History, AngleDownIcon, TextField, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, Wallet, useCopyToClipboard, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
+import { WalletState, InfoCircleIcon, Typography, Button, Image, Spacer, styled, ChevronRightIcon, GasIcon, Alert, ConfirmSwap, LoadingFailedAlert, History, AngleDownIcon, TextField, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, Wallet, useCopyToClipboard, SwapHistory, AddWalletIcon, globalCss, generateRangeColors, createTheme, SwapContainer } from '@rango-dev/ui';
 import React, { useRef, useEffect, Fragment, useState, useLayoutEffect, useMemo } from 'react';
 import { useInRouterContext, MemoryRouter } from 'react-router';
 import { PendingSwapNetworkStatus, useQueueManager, calculatePendingSwap, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, makeQueueDefinition, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
@@ -29,24 +29,6 @@ function removeDuplicateFrom(array) {
 function areEqual(array1, array2) {
   return array1.length === array2.length && array1.every((v, i) => v === array2[i]);
 }
-function shadeColor(color, percent) {
-  var R = parseInt(color.substring(1, 3), 16);
-  var G = parseInt(color.substring(3, 5), 16);
-  var B = parseInt(color.substring(5, 7), 16);
-  R = R * (100 + percent) / 100;
-  G = G * (100 + percent) / 100;
-  B = B * (100 + percent) / 100;
-  R = R < 255 ? R : 255;
-  G = G < 255 ? G : 255;
-  B = B < 255 ? B : 255;
-  R = Math.round(R);
-  G = Math.round(G);
-  B = Math.round(B);
-  var RR = R.toString(16).length == 1 ? '0' + R.toString(16) : R.toString(16);
-  var GG = G.toString(16).length == 1 ? '0' + G.toString(16) : G.toString(16);
-  var BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16);
-  return '#' + RR + GG + BB;
-}
 function debounce(fn, time) {
   let timeoutId;
   return wrapper;
@@ -310,8 +292,8 @@ function getStateWallet(state) {
       return WalletState.DISCONNECTED;
   }
 }
+const excludedWallets = [WalletType.UNKNOWN, WalletType.LEAP];
 function getlistWallet(getState, getWalletInfo, list) {
-  const excludedWallets = [WalletType.UNKNOWN, WalletType.TERRA_STATION, WalletType.LEAP];
   return list.filter(wallet => !excludedWallets.includes(wallet)).map(type => {
     const {
       name,
@@ -394,27 +376,27 @@ function getRequiredChains(route) {
   });
   return wallets;
 }
-function getSelectableWallets(accounts, selectedWallets, getWalletInfo) {
-  const connectedWallets = accounts.map(account => ({
-    address: account.address,
-    walletType: account.walletType,
-    chain: account.chain,
-    image: getWalletInfo(account.walletType).img,
-    name: getWalletInfo(account.walletType).name,
-    selected: !!selectedWallets.find(wallet => wallet.chain === account.chain && wallet.walletType === account.walletType)
+function getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo) {
+  const selectableWallets = connectedWallets.map(connectedWallet => ({
+    address: connectedWallet.address,
+    walletType: connectedWallet.walletType,
+    chain: connectedWallet.chain,
+    image: getWalletInfo(connectedWallet.walletType).img,
+    name: getWalletInfo(connectedWallet.walletType).name,
+    selected: !!selectedWallets.find(selectedWallet => selectedWallet.chain === connectedWallet.chain && selectedWallet.walletType === connectedWallet.walletType)
   }));
-  return connectedWallets;
+  return selectableWallets;
 }
-function getBalanceFromWallet(balances, chain, symbol, address) {
-  if (balances.length === 0) return null;
-  const selectedChainBalances = balances.filter(balance => balance.chain === chain);
-  if (selectedChainBalances.length === 0) return null;
-  return selectedChainBalances.map(a => a.balances?.find(bl => address !== null && bl.address === address || address === null && bl.address === address && bl.symbol === symbol) || null).filter(b => b !== null).sort((a, b) => parseFloat(b?.amount || '0') - parseFloat(a?.amount || '1')).find(() => true) || null;
+function getBalanceFromWallet(connectedWallets, chain, symbol, address) {
+  if (connectedWallets.length === 0) return null;
+  const selectedChainWallets = connectedWallets.filter(wallet => wallet.chain === chain);
+  if (selectedChainWallets.length === 0) return null;
+  return selectedChainWallets.map(wallet => wallet.balances?.find(balance => address !== null && balance.address === address || address === null && balance.address === address && balance.symbol === symbol) || null).filter(balance => balance !== null).sort((a, b) => parseFloat(b?.amount || '0') - parseFloat(a?.amount || '1')).find(() => true) || null;
 }
-function isAccountAndBalanceMatched(account, balance) {
-  return account.address === balance.address && account.chain === balance.chain && account.walletType === balance.walletType;
+function isAccountAndWalletMatched(account, connectedWallet) {
+  return account.address === connectedWallet.address && account.chain === connectedWallet.chain && account.walletType === connectedWallet.walletType;
 }
-function makeBalanceFor(account, retrivedBalance, tokens) {
+function makeBalanceFor(wallet, retrivedBalance, tokens) {
   const {
     address,
     blockChain: chain,
@@ -427,7 +409,7 @@ function makeBalanceFor(account, retrivedBalance, tokens) {
     loading: false,
     error: false,
     explorerUrl,
-    walletType: account.walletType,
+    walletType: wallet.walletType,
     balances: balances?.map(tokenBalance => ({
       chain,
       symbol: tokenBalance.asset.symbol,
@@ -441,16 +423,16 @@ function makeBalanceFor(account, retrivedBalance, tokens) {
     })) || []
   };
 }
-function resetBalanceState(balance) {
+function resetConnectedWalletState(connectedWallet) {
   return {
-    ...balance,
+    ...connectedWallet,
     loading: false,
     error: true
   };
 }
-const calculateWalletUsdValue = balance => {
+const calculateWalletUsdValue = connectedWallet => {
   const uniqueAccountAddresses = new Set();
-  const uniqueBalane = balance?.reduce((acc, current) => {
+  const uniqueBalane = connectedWallet?.reduce((acc, current) => {
     return acc.findIndex(i => i.address === current.address && i.chain === current.chain) === -1 ? [...acc, current] : acc;
   }, []);
   const modifiedWalletBlockchains = uniqueBalane?.map(chain => {
@@ -496,15 +478,15 @@ const getKeplrCompatibleConnectedWallets = selectableWallets => {
   const connectedWalletTypes = new Set(selectableWallets.map(a => a.walletType.toString()));
   return KEPLR_COMPATIBLE_WALLETS.filter(compatibleWallet => connectedWalletTypes.has(compatibleWallet));
 };
-function getTokensWithBalance(tokens, balances) {
+function getTokensWithBalance(tokens, connectedWallets) {
   return tokens.map(_ref2 => {
     let {
       balance,
       ...otherProps
     } = _ref2;
-    const tokenAmount = numberToString(new BigNumber(getBalanceFromWallet(balances, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO));
+    const tokenAmount = numberToString(new BigNumber(getBalanceFromWallet(connectedWallets, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO));
     let tokenUsdValue = '';
-    if (otherProps.usdPrice) tokenUsdValue = numberToString(new BigNumber(getBalanceFromWallet(balances, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO).multipliedBy(otherProps.usdPrice));
+    if (otherProps.usdPrice) tokenUsdValue = numberToString(new BigNumber(getBalanceFromWallet(connectedWallets, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO).multipliedBy(otherProps.usdPrice));
     return {
       ...otherProps,
       ...(tokenAmount !== '0' && {
@@ -516,11 +498,11 @@ function getTokensWithBalance(tokens, balances) {
     };
   });
 }
-function getSortedTokens(chain, tokens, balances, otherChainTokens) {
+function getSortedTokens(chain, tokens, connectedWallets, otherChainTokens) {
   const fromChainEqueulsToToChain = chain?.name === otherChainTokens[0]?.name;
   if (fromChainEqueulsToToChain) return otherChainTokens;
   const filteredTokens = tokens.filter(token => token.blockchain === chain?.name);
-  return sortTokens(getTokensWithBalance(filteredTokens, balances));
+  return sortTokens(getTokensWithBalance(filteredTokens, connectedWallets));
 }
 function tokensAreEqual(tokenA, tokenB) {
   return tokenA?.blockchain === tokenB?.blockchain && tokenA?.symbol === tokenB?.symbol && tokenA?.address === tokenB?.address;
@@ -601,12 +583,12 @@ function LimitErrorMessage(bestRoute) {
     recommendation
   };
 }
-function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount) {
+function getSwapButtonState(loadingMetaStatus, connectedWallets, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount) {
   if (loadingMetaStatus !== 'success') return {
     title: 'Connect Wallet',
     disabled: true
   };
-  if (accounts.length == 0) return {
+  if (connectedWallets.length == 0) return {
     title: 'Connect Wallet',
     disabled: false
   };
@@ -818,14 +800,12 @@ function shouldRetrySwap(pendingSwap) {
 }
 
 const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector((set, get) => ({
-  accounts: [],
-  balances: [],
+  connectedWallets: [],
   selectedWallets: [],
   connectWallet: accounts => {
     const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
     set(state => ({
-      accounts: state.accounts.concat(accounts),
-      balances: state.balances.concat(accounts.map(account => ({
+      connectedWallets: state.connectedWallets.concat(accounts.map(account => ({
         balances: [],
         address: account.address,
         chain: account.chain,
@@ -839,14 +819,13 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
   },
   disconnectWallet: walletType => {
     set(state => ({
-      accounts: state.accounts.filter(account => account.walletType !== walletType),
-      balances: state.balances.filter(balance => balance.walletType !== walletType),
+      connectedWallets: state.connectedWallets.filter(balance => balance.walletType !== walletType),
       selectedWallets: state.selectedWallets.filter(wallet => wallet.walletType != walletType)
     }));
   },
   initSelectedWallets: () => set(state => {
     const requiredChains = getRequiredChains(useBestRouteStore.getState().bestRoute);
-    const connectedWallets = state.accounts;
+    const connectedWallets = state.connectedWallets;
     const selectedWallets = [];
     requiredChains.forEach(chain => {
       const anyWalletSelected = !!state.selectedWallets.find(wallet => wallet.chain === chain);
@@ -871,14 +850,13 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
     })
   })),
   clearConnectedWallet: () => set(() => ({
-    accounts: [],
-    balances: [],
+    connectedWallets: [],
     selectedWallets: []
   })),
   getOneOfWalletsDetails: async account => {
     const tokens = useMetaStore.getState().meta.tokens;
     set(state => ({
-      balances: state.balances.map(balance => {
+      connectedWallets: state.connectedWallets.map(balance => {
         return balance.address === account.address && balance.chain === account.chain ? {
           ...balance,
           loading: true
@@ -893,28 +871,28 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
       const retrivedBalance = response.wallets[0];
       if (retrivedBalance) {
         set(state => ({
-          balances: state.balances.map(balance => {
-            return isAccountAndBalanceMatched(account, balance) ? makeBalanceFor(account, retrivedBalance, tokens) : balance;
+          connectedWallets: state.connectedWallets.map(connectedWallet => {
+            return isAccountAndWalletMatched(account, connectedWallet) ? makeBalanceFor(account, retrivedBalance, tokens) : connectedWallet;
           })
         }));
       } else throw new Error('Wallet not found');
     } catch (error) {
       set(state => ({
-        balances: state.balances.map(balance => {
-          return isAccountAndBalanceMatched(account, balance) ? resetBalanceState(balance) : balance;
+        connectedWallets: state.connectedWallets.map(balance => {
+          return isAccountAndWalletMatched(account, balance) ? resetConnectedWalletState(balance) : balance;
         })
       }));
     }
   }
 }))));
-useWalletsStore.subscribe(state => state.balances, balances => {
+useWalletsStore.subscribe(state => state.connectedWallets, connectedWallets => {
   useBestRouteStore.setState(_ref => {
     let {
       sourceTokens,
       destinationTokens
     } = _ref;
-    const sourceTokensWithBalance = getTokensWithBalance(sourceTokens, balances);
-    const destinationTokensWithBalance = getTokensWithBalance(destinationTokens, balances);
+    const sourceTokensWithBalance = getTokensWithBalance(sourceTokens, connectedWallets);
+    const destinationTokensWithBalance = getTokensWithBalance(destinationTokens, connectedWallets);
     return {
       sourceTokens: sortTokens(sourceTokensWithBalance),
       destinationTokens: sortTokens(destinationTokensWithBalance)
@@ -923,7 +901,7 @@ useWalletsStore.subscribe(state => state.balances, balances => {
 }, {
   equalityFn: shallow
 });
-const fetchingBalanceSelector = state => !!state.balances.find(wallet => wallet.loading);
+const fetchingBalanceSelector = state => !!state.connectedWallets.find(wallet => wallet.loading);
 
 const getUsdValue = (token, amount) => new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
 const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector(set => ({
@@ -967,8 +945,8 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
     set(state => {
       if (state.fromChain?.name === chain?.name) return {};
       const tokens = useMetaStore.getState().meta.tokens;
-      const balances = useWalletsStore.getState().balances;
-      const sortedTokens = getSortedTokens(chain, tokens, balances, state.destinationTokens);
+      const connectedWallets = useWalletsStore.getState().connectedWallets;
+      const sortedTokens = getSortedTokens(chain, tokens, connectedWallets, state.destinationTokens);
       const fromToken = getDefaultToken(sortedTokens, state.toToken);
       return {
         fromChain: chain,
@@ -992,8 +970,8 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
     set(state => {
       if (state.toChain?.name === chain?.name) return {};
       const tokens = useMetaStore.getState().meta.tokens;
-      const balances = useWalletsStore.getState().balances;
-      const sortedTokens = getSortedTokens(chain, tokens, balances, state.destinationTokens);
+      const connectedWallets = useWalletsStore.getState().connectedWallets;
+      const sortedTokens = getSortedTokens(chain, tokens, connectedWallets, state.destinationTokens);
       return {
         toChain: chain,
         destinationTokens: sortedTokens,
@@ -1025,7 +1003,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
       tokens,
       blockchains
     } = useMetaStore.getState().meta;
-    const balances = useWalletsStore.getState().balances;
+    const connectedWallets = useWalletsStore.getState().connectedWallets;
     const failedIndex = pendingSwap.status === 'failed' ? pendingSwap.steps.findIndex(s => s.status === 'failed') : null;
     if (failedIndex === null || failedIndex < 0) return;
     const firstStep = pendingSwap.steps[0];
@@ -1042,8 +1020,8 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
       symbol: lastStep.toSymbol,
       address: lastStep.toSymbolAddress
     }));
-    const sortedSourceTokens = getSortedTokens(fromChain, tokens, balances, []);
-    const sortedDestinationTokens = getSortedTokens(toChain, tokens, balances, []);
+    const sortedSourceTokens = getSortedTokens(fromChain, tokens, connectedWallets, []);
+    const sortedDestinationTokens = getSortedTokens(toChain, tokens, connectedWallets, []);
     const inputAmount = pendingSwap.inputAmount;
     set({
       fromChain,
@@ -1363,10 +1341,10 @@ const Container = /*#__PURE__*/styled('div', {
   variants: {
     type: {
       filled: {
-        backgroundColor: '$neutrals300'
+        backgroundColor: '$neutral100'
       },
       outlined: {
-        border: '1px solid $neutrals300'
+        border: '1px solid $neutral100'
       }
     }
   },
@@ -1402,14 +1380,14 @@ const Container = /*#__PURE__*/styled('div', {
 const ImagePlaceholder = /*#__PURE__*/styled('span', {
   width: '24px',
   height: '24px',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   borderRadius: '99999px'
 });
 const OutputContainer = /*#__PURE__*/styled('div', {
   windth: '100%',
   height: '$48',
   borderRadius: '$5',
-  backgroundColor: '$background',
+  backgroundColor: '$surface',
   border: '1px solid transparent',
   position: 'relative',
   display: 'flex',
@@ -1443,10 +1421,10 @@ function TokenPreview(props) {
     className: "head"
   }, React.createElement(Typography, {
     variant: "body2",
-    color: "neutrals800"
+    color: "neutral800"
   }, props.label), React.createElement("div", null, percentageChange, props.usdValue && React.createElement(Typography, {
     variant: "caption",
-    color: "neutrals600",
+    color: "neutral600",
     className: "usd-value"
   }, `$${numberToString(props.usdValue)}`))), React.createElement("div", {
     className: "form"
@@ -1489,8 +1467,8 @@ const Container$1 = /*#__PURE__*/styled('div', {
   justifyContent: 'space-between',
   padding: '$8',
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
-  color: '$neutrals800',
+  backgroundColor: '$neutral100',
+  color: '$neutral800',
   fontSize: '$12',
   '.routes': {
     display: 'flex',
@@ -1550,7 +1528,7 @@ function useConfirmSwap() {
   const setBestRoute = useBestRouteStore.use.setBestRoute();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const affiliateRef = useSettingsStore.use.affiliateRef();
-  const accounts = useWalletsStore.use.accounts();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
   const selectedWallets = useWalletsStore.use.selectedWallets();
   const meta = useMetaStore.use.meta();
   const customSlippage = useSettingsStore.use.customSlippage();
@@ -1589,7 +1567,7 @@ function useConfirmSwap() {
     }
     abortControllerRef.current = new AbortController();
     setLoading(true);
-    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, accounts, selectedWallets, disabledLiquiditySources, userSlippage, affiliateRef, initialRoute);
+    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, connectedWallets, selectedWallets, disabledLiquiditySources, userSlippage, affiliateRef, initialRoute);
     try {
       const confiremedRoute = await httpService().getBestRoute(requestBody, {
         signal: abortControllerRef.current?.signal
@@ -1833,7 +1811,7 @@ function ConfirmSwapPage() {
     tokens
   } = useMetaStore.use.meta();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const accounts = useWalletsStore.use.accounts();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
   const selectedWallets = useWalletsStore.use.selectedWallets();
   const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
   const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
@@ -1842,6 +1820,7 @@ function ConfirmSwapPage() {
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const outputUsdValue = useBestRouteStore.use.outputUsdValue();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const [dbErrorMessage, setDbErrorMessage] = useState('');
   const bestRouteloadingStatus = getBestRouteStatus(fetchingBestRoute, !!fetchingBestRouteError);
   const {
     manager
@@ -1866,7 +1845,7 @@ function ConfirmSwapPage() {
   useEffect(() => {
     initSelectedWallets();
   }, []);
-  const selectableWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
+  const selectableWallets = getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo);
   const handleConnectChain = wallet => {
     const network = wallet;
     getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
@@ -1876,21 +1855,25 @@ function ConfirmSwapPage() {
     requiredWallets: getRequiredChains(bestRoute),
     selectableWallets: selectableWallets,
     onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
-    onConfirm: () => {
-      confirmSwap?.().then(swap => {
+    onConfirm: async () => {
+      confirmSwap?.().then(async swap => {
         if (swap) {
-          manager?.create('swap', {
-            swapDetails: swap
-          }, {
-            id: swap.requestId
-          });
-          setSelectedSwap(swap.requestId);
-          navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
-            replace: true
-          });
-          setTimeout(() => {
-            setInputAmount('');
-          }, 0);
+          try {
+            await manager?.create('swap', {
+              swapDetails: swap
+            }, {
+              id: swap.requestId
+            });
+            setSelectedSwap(swap.requestId);
+            navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
+              replace: true
+            });
+            setTimeout(() => {
+              setInputAmount('');
+            }, 0);
+          } catch (e) {
+            setDbErrorMessage('Error: ' + e?.message);
+          }
         }
       });
     },
@@ -1937,7 +1920,7 @@ function ConfirmSwapPage() {
       totalFee: numberToString(totalFeeInUsd, 0, 2)
     }),
     loading: fetchingConfirmedRoute,
-    errors: ConfirmSwapErrors(errors),
+    errors: dbErrorMessage ? [dbErrorMessage, ...ConfirmSwapErrors(errors)] : ConfirmSwapErrors(errors),
     warnings: ConfirmSwapWarnings(warnings),
     extraMessages: React.createElement(React.Fragment, null, loadingMetaStatus === 'failed' && React.createElement(LoadingFailedAlert, null), loadingMetaStatus === 'failed' && showHighSlippageWarning && React.createElement(Spacer, {
       direction: "vertical"
@@ -2031,10 +2014,11 @@ const Container$2 = /*#__PURE__*/styled('div', {
   variants: {
     type: {
       filled: {
-        backgroundColor: '$neutrals300'
+        backgroundColor: '$neutral100'
       },
       outlined: {
-        border: '1px solid $neutrals300'
+        border: '1px solid $neutral100',
+        backgroundColor: '$surface'
       }
     }
   },
@@ -2082,14 +2066,14 @@ const Options = /*#__PURE__*/styled('div', {
 const ImagePlaceholder$1 = /*#__PURE__*/styled('span', {
   width: '24px',
   height: '24px',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   borderRadius: '99999px'
 });
 const OutputContainer$1 = /*#__PURE__*/styled('div', {
   windth: '100%',
   height: '$48',
   borderRadius: '$5',
-  backgroundColor: '$background',
+  backgroundColor: '$surface',
   border: '1px solid transparent',
   position: 'relative',
   display: 'flex',
@@ -2111,14 +2095,14 @@ function TokenInfo(props) {
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   const bestRoute = useBestRouteStore.use.bestRoute();
   const inputAmount = useBestRouteStore.use.inputAmount();
-  const balances = useWalletsStore.use.balances();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
   const fetchingBestRoute = useBestRouteStore.use.loading();
   const navigate = useNavigate();
   const {
     t
   } = useTranslation();
-  const tokenBalance = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', 8) : '0';
-  const tokenBalanceReal = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.decimal) : '0';
+  const tokenBalance = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(connectedWallets, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', 8) : '0';
+  const tokenBalanceReal = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(connectedWallets, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', getBalanceFromWallet(connectedWallets, fromChain?.name, fromToken?.symbol, fromToken?.address)?.decimal) : '0';
   const ItemSuffix = React.createElement("div", {
     style: {
       display: 'flex',
@@ -2135,7 +2119,7 @@ function TokenInfo(props) {
     className: "head"
   }, React.createElement(Typography, {
     variant: "body2",
-    color: "neutrals800"
+    color: "neutral800"
   }, t(type)), props.type === 'From' ? React.createElement(Options, null, React.createElement("div", {
     className: "balance",
     onClick: () => {
@@ -2143,7 +2127,7 @@ function TokenInfo(props) {
     }
   }, React.createElement(Typography, {
     variant: "body3",
-    color: "neutrals600"
+    color: "neutral600"
   }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React.createElement(Spacer, {
     size: 4
   }), React.createElement(Button, {
@@ -2157,7 +2141,7 @@ function TokenInfo(props) {
     outputUsdValue: props.outputUsdValue
   }), React.createElement("div", null, React.createElement(Typography, {
     variant: "caption",
-    color: "neutrals600"
+    color: "neutral600"
   }, `$${numberToString(props.outputUsdValue)}`)))), React.createElement("div", {
     className: "form"
   }, React.createElement(Button, {
@@ -2213,7 +2197,7 @@ function TokenInfo(props) {
       }
     }, React.createElement(Typography, {
       variant: "caption",
-      color: "neutrals800"
+      color: "neutral800"
     }, `$${numberToString(inputUsdValue)}`)),
     value: props.inputAmount || '',
     min: 0,
@@ -2249,7 +2233,7 @@ function BottomLogo() {
   } = useTranslation();
   return React.createElement(Container$3, null, React.createElement(Typography, {
     variant: "caption",
-    color: "$neutrals600"
+    color: "$neutral600"
   }, t('Powered By')), React.createElement(StyledAnchor, {
     href: "https://rango.exchange",
     target: "_blank"
@@ -2393,7 +2377,7 @@ function Home() {
   const fetchingBestRoute = useBestRouteStore.use.loading();
   const bestRouteError = useBestRouteStore.use.error();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const accounts = useWalletsStore.use.accounts();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
   const setCurrentPage = useUiStore.use.setCurrentPage();
   const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
   const errorMessage = loadingMetaStatus === 'failed' ? errorMessages.genericServerError : bestRouteError;
@@ -2407,7 +2391,7 @@ function Home() {
     swap
   } = LimitErrorMessage(bestRoute);
   const priceImpactCanNotBeComputed = !canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue);
-  const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount);
+  const swapButtonState = getSwapButtonState(loadingMetaStatus, connectedWallets, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount);
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
   const highFee = hasHighFee(totalFeeInUsd);
   useEffect(() => {
@@ -2567,7 +2551,8 @@ function SelectTokenPage(props) {
 
 function SettingsPage(_ref) {
   let {
-    supportedSwappers
+    supportedSwappers,
+    singleTheme
   } = _ref;
   const slippage = useSettingsStore.use.slippage();
   const setSlippage = useSettingsStore.use.setSlippage();
@@ -2609,6 +2594,7 @@ function SettingsPage(_ref) {
     onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
     liquiditySources: supportedUniqueSwappersGroups,
     selectedLiquiditySources: supportedUniqueSwappersGroups.filter(s => s.selected),
+    singleTheme: singleTheme,
     customSlippage: customSlippage || NaN,
     onCustomSlippageChange: setCustomSlippage,
     minSlippage: MIN_SLIPPGAE,
@@ -2920,6 +2906,7 @@ function AppRoutes(props) {
   }, {
     path: navigationRoutes.settings,
     element: React.createElement(SettingsPage, {
+      singleTheme: config?.theme?.singleTheme,
       supportedSwappers: config?.liquiditySources
     })
   }, {
@@ -2966,14 +2953,13 @@ function Layout(_ref) {
   } = _ref;
   const navigate = useNavigate();
   const {
-    balances,
-    accounts,
+    connectedWallets,
     selectedWallets
   } = useWalletsStore();
   const {
     getWalletInfo
   } = useWallets();
-  const connectedWalletsImages = removeDuplicateFrom(getSelectableWallets(accounts, selectedWallets, getWalletInfo).map(w => w.image));
+  const connectedWalletsImages = removeDuplicateFrom(getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo).map(w => w.image));
   const {
     blockchains,
     tokens
@@ -2984,7 +2970,7 @@ function Layout(_ref) {
   const setToToken = useBestRouteStore.use.setToToken();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   const setAffiliateRef = useSettingsStore.use.setAffiliateRef();
-  const totalBalance = calculateWalletUsdValue(balances);
+  const totalBalance = calculateWalletUsdValue(connectedWallets);
   const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const fetchingBalance = useWalletsStore(fetchingBalanceSelector);
@@ -2992,20 +2978,24 @@ function Layout(_ref) {
     t
   } = useTranslation();
   useEffect(() => {
-    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]);
+    if (loadingMetaStatus === 'success') {
+      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, loadingMetaStatus]);
   useEffect(() => {
     setInputAmount(config?.amount?.toString() || '');
   }, [config?.amount]);
   useEffect(() => {
-    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]);
+    if (loadingMetaStatus === 'success') {
+      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, loadingMetaStatus]);
   useEffect(() => {
     setAffiliateRef(config?.affiliateRef || null);
   }, [config?.affiliateRef]);
@@ -3030,7 +3020,7 @@ function Layout(_ref) {
     className: "balance"
   }, React.createElement(Typography, {
     variant: "body2"
-  }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`), fetchingBalance && React.createElement(Spinner, null)))), React.createElement(AppRoutes, {
+  }, !connectedWallets?.length ? t('Connect Wallet') : `$${totalBalance || 0}`), fetchingBalance && React.createElement(Spinner, null)))), React.createElement(AppRoutes, {
     config: config
   }));
 }
@@ -3064,89 +3054,66 @@ function useTheme(_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',
-    neutrals400: '#dedede',
-    neutrals500: '#cccccc',
-    neutrals600: '#acacac',
-    neutrals700: '#444444',
-    neutrals800: '#333333',
-    neutrals900: '#111111',
-    primary,
-    primary100: shadeColor(primary, 15),
-    primary200: shadeColor(primary, -10),
-    primary300: shadeColor(primary, -15),
-    primary400: shadeColor(primary, -20),
-    primary500: shadeColor(primary, -25),
-    primary600: shadeColor(primary, -30),
-    primary700: shadeColor(primary, -35),
-    primary800: shadeColor(primary, -40),
-    primary900: shadeColor(primary, -45),
+  const light = themeColors?.light;
+  const dark = themeColors?.dark;
+  const neutral = light?.neutral || '#fafafa';
+  const background = light?.background || '#fff';
+  const foreground = light?.foreground || '#000';
+  const darkColors = {
+    ...generateRangeColors('primary', 'dark', dark?.primary),
+    ...generateRangeColors('error', 'dark', dark?.error),
+    ...generateRangeColors('warning', 'dark', dark?.warning),
+    ...generateRangeColors('success', 'dark', dark?.success),
+    ...generateRangeColors('neutral', 'dark', dark?.neutral),
+    surface: dark?.surface,
+    background: dark?.background,
+    foreground: dark?.foreground
+  };
+  const lightColors = {
+    surface: light?.surface || '#fff',
+    ...generateRangeColors('primary', 'light', light?.primary || '#5FA425'),
+    ...generateRangeColors('error', 'light', light?.error || '#FF0000'),
+    ...generateRangeColors('warning', 'light', light?.warning || '#F5A623'),
+    ...generateRangeColors('success', 'light', light?.success || '#0070F3'),
+    ...generateRangeColors('neutral', 'light', neutral),
     background,
-    foreground,
-    error,
-    error100: shadeColor(error, 50),
-    error300: shadeColor(error, -10),
-    error500: shadeColor(error, -20),
-    error700: shadeColor(error, -30),
-    warning,
-    warning100: shadeColor(warning, 50),
-    warning300: shadeColor(warning, -10),
-    warning500: shadeColor(warning, -20),
-    warning700: shadeColor(warning, -30),
-    success,
-    success100: shadeColor(success, 50),
-    success300: shadeColor(success, -10),
-    success500: shadeColor(success, -20),
-    success700: shadeColor(success, -30)
+    foreground
   };
   const customeLightTheme = createTheme({
-    colors,
+    colors: lightColors,
     radii: {
       5: `${borderRadius}px`
     },
     shadows: {
-      s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5'
+      s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${light?.neutral || '#f0f2f5'}, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`
     }
   });
   const customeDarkTheme = createTheme({
     colors: {
-      ...colors,
-      neutrals200: '#111111',
-      neutrals300: '#333333',
-      neutrals400: '#444444',
-      neutrals500: '#acacac',
-      neutrals600: '#cccccc',
-      neutrals700: '#dedede',
-      neutrals800: '#f2f2f2',
-      neutrals900: '#FAFAFA',
+      ...lightColors,
+      ...generateRangeColors('neutral', 'dark', '#111111'),
       foreground: background,
-      background: foreground
+      background: foreground,
+      surface: '#000',
+      ...JSON.parse(JSON.stringify(darkColors))
     },
     radii: {
       5: `${borderRadius}px`
     },
     shadows: {
-      s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222'
+      s: `0px 3px 5px 3px ${dark?.neutral || '#222'}, 0px 6px 10px 3px ${dark?.neutral || '#222'}, 0px 1px 18px 3px ${dark?.neutral || '#222'}`
     }
   });
-  const [OSTheme, setOSTheme] = useState(customeLightTheme);
+  const [OSTheme, setOSTheme] = useState('light');
   useEffect(() => {
     (async () => {
       await fetchMeta();
     })();
     const switchTheme = event => {
-      if (event.matches) setOSTheme(customeDarkTheme);else setOSTheme(customeLightTheme);
+      if (event.matches) setOSTheme('dark');else setOSTheme('light');
     };
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      setOSTheme(customeDarkTheme);
+      setOSTheme('dark');
     }
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme);
     return () => {
@@ -3165,7 +3132,7 @@ function useTheme(_ref) {
     classList.add(`font_${fontFamily.replace(/ /g, '')}`);
   }, [fontFamily]);
   const getActiveTheme = () => {
-    if (theme === 'auto') return OSTheme;else return theme === 'dark' ? customeDarkTheme : customeLightTheme;
+    if (theme === 'auto') return OSTheme === 'dark' ? customeDarkTheme : customeLightTheme;else return theme === 'dark' ? customeDarkTheme : customeLightTheme;
   };
   return {
     activeTheme: getActiveTheme()
@@ -3266,13 +3233,12 @@ function QueueManager(props) {
     });
   }, []);
   const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
-  const accounts = useWalletsStore.use.accounts();
   const {
     blockchains
   } = useMetaStore.use.meta();
-  const balances = useWalletsStore.use.balances();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
   const wallets = {
-    blockchains: balances.map(wallet => ({
+    blockchains: connectedWallets.map(wallet => ({
       accounts: [wallet],
       name: wallet.chain
     }))
@@ -3298,8 +3264,8 @@ function QueueManager(props) {
     const outputAmount = data.step?.outputAmount || '';
     const step = data.step || lastStep;
     if (data.eventType === 'task_completed' || data.eventType === 'step_completed_with_output' && lastStep?.id !== data.step?.id || !!outputAmount) {
-      const fromAccount = accounts.find(account => account.chain === step?.fromBlockchain);
-      const toAccount = step?.fromBlockchain !== step?.toBlockchain && accounts.find(account => account.chain === step?.toBlockchain);
+      const fromAccount = connectedWallets.find(account => account.chain === step?.fromBlockchain);
+      const toAccount = step?.fromBlockchain !== step?.toBlockchain && connectedWallets.find(wallet => wallet.chain === step?.toBlockchain);
       fromAccount && getOneOfWalletsDetails(fromAccount);
       toAccount && getOneOfWalletsDetails(toAccount);
     }
@@ -3321,10 +3287,7 @@ function QueueManager(props) {
     state,
     notifier
   };
-  return React.createElement(Provider
-  //@ts-ignore
-  , {
-    //@ts-ignore
+  return React.createElement(Provider, {
     queuesDefs: [swapQueueDef],
     context: context,
     onPersistedDataLoaded: manager => {
@@ -3402,6 +3365,7 @@ const Widget = _ref => {
     providers: providers,
     onUpdateState: onUpdateState
   }, React.createElement("div", {
+    id: "swap-container",
     className: activeTheme
   }, React.createElement(QueueManager, null, React.createElement(SwapContainer, {
     fixedHeight: currentPage !== navigationRoutes.home