@rango-dev/widget-embedded 0.1.15 → 0.1.16-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/QueueManager.d.ts.map +1 -1
  2. package/dist/components/RoutesOverview.d.ts.map +1 -1
  3. package/dist/components/TokenPreview.d.ts.map +1 -1
  4. package/dist/pages/Home.d.ts.map +1 -1
  5. package/dist/store/wallets.d.ts +6 -15
  6. package/dist/store/wallets.d.ts.map +1 -1
  7. package/dist/types/index.d.ts +1 -0
  8. package/dist/types/index.d.ts.map +1 -1
  9. package/dist/types/wallets.d.ts +7 -0
  10. package/dist/types/wallets.d.ts.map +1 -0
  11. package/dist/utils/routing.d.ts +2 -3
  12. package/dist/utils/routing.d.ts.map +1 -1
  13. package/dist/utils/swap.d.ts +8 -9
  14. package/dist/utils/swap.d.ts.map +1 -1
  15. package/dist/utils/wallets.d.ts +11 -12
  16. package/dist/utils/wallets.d.ts.map +1 -1
  17. package/dist/widget-embedded.cjs.development.js +67 -73
  18. package/dist/widget-embedded.cjs.development.js.map +1 -1
  19. package/dist/widget-embedded.cjs.production.min.js +67 -73
  20. package/dist/widget-embedded.cjs.production.min.js.map +1 -1
  21. package/dist/widget-embedded.esm.js +67 -73
  22. package/dist/widget-embedded.esm.js.map +1 -1
  23. package/package.json +1 -1
  24. package/src/QueueManager.tsx +4 -5
  25. package/src/components/Layout.tsx +5 -5
  26. package/src/components/RoutesOverview.tsx +1 -4
  27. package/src/components/TokenInfo.tsx +5 -5
  28. package/src/components/TokenPreview.tsx +8 -3
  29. package/src/hooks/useConfirmSwap.ts +2 -2
  30. package/src/pages/ConfirmSwapPage.tsx +2 -2
  31. package/src/pages/Home.tsx +5 -3
  32. package/src/store/bestRoute.ts +7 -7
  33. package/src/store/wallets.ts +32 -46
  34. package/src/types/index.ts +1 -0
  35. package/src/types/wallets.ts +7 -0
  36. package/src/utils/routing.ts +2 -3
  37. package/src/utils/swap.ts +12 -11
  38. package/src/utils/wallets.ts +59 -52
@@ -402,27 +402,27 @@ function getRequiredChains(route) {
402
402
  });
403
403
  return wallets;
404
404
  }
405
- function getSelectableWallets(accounts, selectedWallets, getWalletInfo) {
406
- const connectedWallets = accounts.map(account => ({
407
- address: account.address,
408
- walletType: account.walletType,
409
- chain: account.chain,
410
- image: getWalletInfo(account.walletType).img,
411
- name: getWalletInfo(account.walletType).name,
412
- selected: !!selectedWallets.find(wallet => wallet.chain === account.chain && wallet.walletType === account.walletType)
405
+ function getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo) {
406
+ const selectableWallets = connectedWallets.map(connectedWallet => ({
407
+ address: connectedWallet.address,
408
+ walletType: connectedWallet.walletType,
409
+ chain: connectedWallet.chain,
410
+ image: getWalletInfo(connectedWallet.walletType).img,
411
+ name: getWalletInfo(connectedWallet.walletType).name,
412
+ selected: !!selectedWallets.find(selectedWallet => selectedWallet.chain === connectedWallet.chain && selectedWallet.walletType === connectedWallet.walletType)
413
413
  }));
414
- return connectedWallets;
414
+ return selectableWallets;
415
415
  }
416
- function getBalanceFromWallet(balances, chain, symbol, address) {
417
- if (balances.length === 0) return null;
418
- const selectedChainBalances = balances.filter(balance => balance.chain === chain);
419
- if (selectedChainBalances.length === 0) return null;
420
- 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;
416
+ function getBalanceFromWallet(connectedWallets, chain, symbol, address) {
417
+ if (connectedWallets.length === 0) return null;
418
+ const selectedChainWallets = connectedWallets.filter(wallet => wallet.chain === chain);
419
+ if (selectedChainWallets.length === 0) return null;
420
+ 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;
421
421
  }
422
- function isAccountAndBalanceMatched(account, balance) {
423
- return account.address === balance.address && account.chain === balance.chain && account.walletType === balance.walletType;
422
+ function isAccountAndWalletMatched(account, connectedWallet) {
423
+ return account.address === connectedWallet.address && account.chain === connectedWallet.chain && account.walletType === connectedWallet.walletType;
424
424
  }
425
- function makeBalanceFor(account, retrivedBalance, tokens) {
425
+ function makeBalanceFor(wallet, retrivedBalance, tokens) {
426
426
  const {
427
427
  address,
428
428
  blockChain: chain,
@@ -435,7 +435,7 @@ function makeBalanceFor(account, retrivedBalance, tokens) {
435
435
  loading: false,
436
436
  error: false,
437
437
  explorerUrl,
438
- walletType: account.walletType,
438
+ walletType: wallet.walletType,
439
439
  balances: balances?.map(tokenBalance => ({
440
440
  chain,
441
441
  symbol: tokenBalance.asset.symbol,
@@ -449,16 +449,16 @@ function makeBalanceFor(account, retrivedBalance, tokens) {
449
449
  })) || []
450
450
  };
451
451
  }
452
- function resetBalanceState(balance) {
452
+ function resetConnectedWalletState(connectedWallet) {
453
453
  return {
454
- ...balance,
454
+ ...connectedWallet,
455
455
  loading: false,
456
456
  error: true
457
457
  };
458
458
  }
459
- const calculateWalletUsdValue = balance => {
459
+ const calculateWalletUsdValue = connectedWallet => {
460
460
  const uniqueAccountAddresses = new Set();
461
- const uniqueBalane = balance?.reduce((acc, current) => {
461
+ const uniqueBalane = connectedWallet?.reduce((acc, current) => {
462
462
  return acc.findIndex(i => i.address === current.address && i.chain === current.chain) === -1 ? [...acc, current] : acc;
463
463
  }, []);
464
464
  const modifiedWalletBlockchains = uniqueBalane?.map(chain => {
@@ -504,15 +504,15 @@ const getKeplrCompatibleConnectedWallets = selectableWallets => {
504
504
  const connectedWalletTypes = new Set(selectableWallets.map(a => a.walletType.toString()));
505
505
  return walletsShared.KEPLR_COMPATIBLE_WALLETS.filter(compatibleWallet => connectedWalletTypes.has(compatibleWallet));
506
506
  };
507
- function getTokensWithBalance(tokens, balances) {
507
+ function getTokensWithBalance(tokens, connectedWallets) {
508
508
  return tokens.map(_ref2 => {
509
509
  let {
510
510
  balance,
511
511
  ...otherProps
512
512
  } = _ref2;
513
- const tokenAmount = numberToString(new BigNumber__default(getBalanceFromWallet(balances, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO));
513
+ const tokenAmount = numberToString(new BigNumber__default(getBalanceFromWallet(connectedWallets, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO));
514
514
  let tokenUsdValue = '';
515
- if (otherProps.usdPrice) tokenUsdValue = numberToString(new BigNumber__default(getBalanceFromWallet(balances, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO).multipliedBy(otherProps.usdPrice));
515
+ if (otherProps.usdPrice) tokenUsdValue = numberToString(new BigNumber__default(getBalanceFromWallet(connectedWallets, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO).multipliedBy(otherProps.usdPrice));
516
516
  return {
517
517
  ...otherProps,
518
518
  ...(tokenAmount !== '0' && {
@@ -524,11 +524,11 @@ function getTokensWithBalance(tokens, balances) {
524
524
  };
525
525
  });
526
526
  }
527
- function getSortedTokens(chain, tokens, balances, otherChainTokens) {
527
+ function getSortedTokens(chain, tokens, connectedWallets, otherChainTokens) {
528
528
  const fromChainEqueulsToToChain = chain?.name === otherChainTokens[0]?.name;
529
529
  if (fromChainEqueulsToToChain) return otherChainTokens;
530
530
  const filteredTokens = tokens.filter(token => token.blockchain === chain?.name);
531
- return sortTokens(getTokensWithBalance(filteredTokens, balances));
531
+ return sortTokens(getTokensWithBalance(filteredTokens, connectedWallets));
532
532
  }
533
533
  function tokensAreEqual(tokenA, tokenB) {
534
534
  return tokenA?.blockchain === tokenB?.blockchain && tokenA?.symbol === tokenB?.symbol && tokenA?.address === tokenB?.address;
@@ -609,12 +609,12 @@ function LimitErrorMessage(bestRoute) {
609
609
  recommendation
610
610
  };
611
611
  }
612
- function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount) {
612
+ function getSwapButtonState(loadingMetaStatus, connectedWallets, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount) {
613
613
  if (loadingMetaStatus !== 'success') return {
614
614
  title: 'Connect Wallet',
615
615
  disabled: true
616
616
  };
617
- if (accounts.length == 0) return {
617
+ if (connectedWallets.length == 0) return {
618
618
  title: 'Connect Wallet',
619
619
  disabled: false
620
620
  };
@@ -826,14 +826,12 @@ function shouldRetrySwap(pendingSwap) {
826
826
  }
827
827
 
828
828
  const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector((set, get) => ({
829
- accounts: [],
830
- balances: [],
829
+ connectedWallets: [],
831
830
  selectedWallets: [],
832
831
  connectWallet: accounts => {
833
832
  const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
834
833
  set(state => ({
835
- accounts: state.accounts.concat(accounts),
836
- balances: state.balances.concat(accounts.map(account => ({
834
+ connectedWallets: state.connectedWallets.concat(accounts.map(account => ({
837
835
  balances: [],
838
836
  address: account.address,
839
837
  chain: account.chain,
@@ -847,14 +845,13 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.creat
847
845
  },
848
846
  disconnectWallet: walletType => {
849
847
  set(state => ({
850
- accounts: state.accounts.filter(account => account.walletType !== walletType),
851
- balances: state.balances.filter(balance => balance.walletType !== walletType),
848
+ connectedWallets: state.connectedWallets.filter(balance => balance.walletType !== walletType),
852
849
  selectedWallets: state.selectedWallets.filter(wallet => wallet.walletType != walletType)
853
850
  }));
854
851
  },
855
852
  initSelectedWallets: () => set(state => {
856
853
  const requiredChains = getRequiredChains(useBestRouteStore.getState().bestRoute);
857
- const connectedWallets = state.accounts;
854
+ const connectedWallets = state.connectedWallets;
858
855
  const selectedWallets = [];
859
856
  requiredChains.forEach(chain => {
860
857
  const anyWalletSelected = !!state.selectedWallets.find(wallet => wallet.chain === chain);
@@ -879,14 +876,13 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.creat
879
876
  })
880
877
  })),
881
878
  clearConnectedWallet: () => set(() => ({
882
- accounts: [],
883
- balances: [],
879
+ connectedWallets: [],
884
880
  selectedWallets: []
885
881
  })),
886
882
  getOneOfWalletsDetails: async account => {
887
883
  const tokens = useMetaStore.getState().meta.tokens;
888
884
  set(state => ({
889
- balances: state.balances.map(balance => {
885
+ connectedWallets: state.connectedWallets.map(balance => {
890
886
  return balance.address === account.address && balance.chain === account.chain ? {
891
887
  ...balance,
892
888
  loading: true
@@ -901,28 +897,28 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.creat
901
897
  const retrivedBalance = response.wallets[0];
902
898
  if (retrivedBalance) {
903
899
  set(state => ({
904
- balances: state.balances.map(balance => {
905
- return isAccountAndBalanceMatched(account, balance) ? makeBalanceFor(account, retrivedBalance, tokens) : balance;
900
+ connectedWallets: state.connectedWallets.map(connectedWallet => {
901
+ return isAccountAndWalletMatched(account, connectedWallet) ? makeBalanceFor(account, retrivedBalance, tokens) : connectedWallet;
906
902
  })
907
903
  }));
908
904
  } else throw new Error('Wallet not found');
909
905
  } catch (error) {
910
906
  set(state => ({
911
- balances: state.balances.map(balance => {
912
- return isAccountAndBalanceMatched(account, balance) ? resetBalanceState(balance) : balance;
907
+ connectedWallets: state.connectedWallets.map(balance => {
908
+ return isAccountAndWalletMatched(account, balance) ? resetConnectedWalletState(balance) : balance;
913
909
  })
914
910
  }));
915
911
  }
916
912
  }
917
913
  }))));
918
- useWalletsStore.subscribe(state => state.balances, balances => {
914
+ useWalletsStore.subscribe(state => state.connectedWallets, connectedWallets => {
919
915
  useBestRouteStore.setState(_ref => {
920
916
  let {
921
917
  sourceTokens,
922
918
  destinationTokens
923
919
  } = _ref;
924
- const sourceTokensWithBalance = getTokensWithBalance(sourceTokens, balances);
925
- const destinationTokensWithBalance = getTokensWithBalance(destinationTokens, balances);
920
+ const sourceTokensWithBalance = getTokensWithBalance(sourceTokens, connectedWallets);
921
+ const destinationTokensWithBalance = getTokensWithBalance(destinationTokens, connectedWallets);
926
922
  return {
927
923
  sourceTokens: sortTokens(sourceTokensWithBalance),
928
924
  destinationTokens: sortTokens(destinationTokensWithBalance)
@@ -931,7 +927,7 @@ useWalletsStore.subscribe(state => state.balances, balances => {
931
927
  }, {
932
928
  equalityFn: shallow.shallow
933
929
  });
934
- const fetchingBalanceSelector = state => !!state.balances.find(wallet => wallet.loading);
930
+ const fetchingBalanceSelector = state => !!state.connectedWallets.find(wallet => wallet.loading);
935
931
 
936
932
  const getUsdValue = (token, amount) => new BigNumber__default(amount || ZERO).multipliedBy(token?.usdPrice || 0);
937
933
  const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
@@ -975,8 +971,8 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
975
971
  set(state => {
976
972
  if (state.fromChain?.name === chain?.name) return {};
977
973
  const tokens = useMetaStore.getState().meta.tokens;
978
- const balances = useWalletsStore.getState().balances;
979
- const sortedTokens = getSortedTokens(chain, tokens, balances, state.destinationTokens);
974
+ const connectedWallets = useWalletsStore.getState().connectedWallets;
975
+ const sortedTokens = getSortedTokens(chain, tokens, connectedWallets, state.destinationTokens);
980
976
  const fromToken = getDefaultToken(sortedTokens, state.toToken);
981
977
  return {
982
978
  fromChain: chain,
@@ -1000,8 +996,8 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
1000
996
  set(state => {
1001
997
  if (state.toChain?.name === chain?.name) return {};
1002
998
  const tokens = useMetaStore.getState().meta.tokens;
1003
- const balances = useWalletsStore.getState().balances;
1004
- const sortedTokens = getSortedTokens(chain, tokens, balances, state.destinationTokens);
999
+ const connectedWallets = useWalletsStore.getState().connectedWallets;
1000
+ const sortedTokens = getSortedTokens(chain, tokens, connectedWallets, state.destinationTokens);
1005
1001
  return {
1006
1002
  toChain: chain,
1007
1003
  destinationTokens: sortedTokens,
@@ -1033,7 +1029,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
1033
1029
  tokens,
1034
1030
  blockchains
1035
1031
  } = useMetaStore.getState().meta;
1036
- const balances = useWalletsStore.getState().balances;
1032
+ const connectedWallets = useWalletsStore.getState().connectedWallets;
1037
1033
  const failedIndex = pendingSwap.status === 'failed' ? pendingSwap.steps.findIndex(s => s.status === 'failed') : null;
1038
1034
  if (failedIndex === null || failedIndex < 0) return;
1039
1035
  const firstStep = pendingSwap.steps[0];
@@ -1050,8 +1046,8 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
1050
1046
  symbol: lastStep.toSymbol,
1051
1047
  address: lastStep.toSymbolAddress
1052
1048
  }));
1053
- const sortedSourceTokens = getSortedTokens(fromChain, tokens, balances, []);
1054
- const sortedDestinationTokens = getSortedTokens(toChain, tokens, balances, []);
1049
+ const sortedSourceTokens = getSortedTokens(fromChain, tokens, connectedWallets, []);
1050
+ const sortedDestinationTokens = getSortedTokens(toChain, tokens, connectedWallets, []);
1055
1051
  const inputAmount = pendingSwap.inputAmount;
1056
1052
  set({
1057
1053
  fromChain,
@@ -1558,7 +1554,7 @@ function useConfirmSwap() {
1558
1554
  const setBestRoute = useBestRouteStore.use.setBestRoute();
1559
1555
  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
1560
1556
  const affiliateRef = useSettingsStore.use.affiliateRef();
1561
- const accounts = useWalletsStore.use.accounts();
1557
+ const connectedWallets = useWalletsStore.use.connectedWallets();
1562
1558
  const selectedWallets = useWalletsStore.use.selectedWallets();
1563
1559
  const meta = useMetaStore.use.meta();
1564
1560
  const customSlippage = useSettingsStore.use.customSlippage();
@@ -1597,7 +1593,7 @@ function useConfirmSwap() {
1597
1593
  }
1598
1594
  abortControllerRef.current = new AbortController();
1599
1595
  setLoading(true);
1600
- const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, accounts, selectedWallets, disabledLiquiditySources, userSlippage, affiliateRef, initialRoute);
1596
+ const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, connectedWallets, selectedWallets, disabledLiquiditySources, userSlippage, affiliateRef, initialRoute);
1601
1597
  try {
1602
1598
  const confiremedRoute = await httpService().getBestRoute(requestBody, {
1603
1599
  signal: abortControllerRef.current?.signal
@@ -1841,7 +1837,7 @@ function ConfirmSwapPage() {
1841
1837
  tokens
1842
1838
  } = useMetaStore.use.meta();
1843
1839
  const loadingMetaStatus = useMetaStore.use.loadingStatus();
1844
- const accounts = useWalletsStore.use.accounts();
1840
+ const connectedWallets = useWalletsStore.use.connectedWallets();
1845
1841
  const selectedWallets = useWalletsStore.use.selectedWallets();
1846
1842
  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
1847
1843
  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
@@ -1874,7 +1870,7 @@ function ConfirmSwapPage() {
1874
1870
  React.useEffect(() => {
1875
1871
  initSelectedWallets();
1876
1872
  }, []);
1877
- const selectableWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
1873
+ const selectableWallets = getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo);
1878
1874
  const handleConnectChain = wallet => {
1879
1875
  const network = wallet;
1880
1876
  getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
@@ -2119,14 +2115,14 @@ function TokenInfo(props) {
2119
2115
  const setInputAmount = useBestRouteStore.use.setInputAmount();
2120
2116
  const bestRoute = useBestRouteStore.use.bestRoute();
2121
2117
  const inputAmount = useBestRouteStore.use.inputAmount();
2122
- const balances = useWalletsStore.use.balances();
2118
+ const connectedWallets = useWalletsStore.use.connectedWallets();
2123
2119
  const fetchingBestRoute = useBestRouteStore.use.loading();
2124
2120
  const navigate = reactRouterDom.useNavigate();
2125
2121
  const {
2126
2122
  t
2127
2123
  } = reactI18next.useTranslation();
2128
- const tokenBalance = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', 8) : '0';
2129
- 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';
2124
+ const tokenBalance = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(connectedWallets, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', 8) : '0';
2125
+ 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';
2130
2126
  const ItemSuffix = React__default.createElement("div", {
2131
2127
  style: {
2132
2128
  display: 'flex',
@@ -2401,7 +2397,7 @@ function Home() {
2401
2397
  const fetchingBestRoute = useBestRouteStore.use.loading();
2402
2398
  const bestRouteError = useBestRouteStore.use.error();
2403
2399
  const loadingMetaStatus = useMetaStore.use.loadingStatus();
2404
- const accounts = useWalletsStore.use.accounts();
2400
+ const connectedWallets = useWalletsStore.use.connectedWallets();
2405
2401
  const setCurrentPage = useUiStore.use.setCurrentPage();
2406
2402
  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
2407
2403
  const errorMessage = loadingMetaStatus === 'failed' ? errorMessages.genericServerError : bestRouteError;
@@ -2415,7 +2411,7 @@ function Home() {
2415
2411
  swap
2416
2412
  } = LimitErrorMessage(bestRoute);
2417
2413
  const priceImpactCanNotBeComputed = !canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue);
2418
- const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount);
2414
+ const swapButtonState = getSwapButtonState(loadingMetaStatus, connectedWallets, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount);
2419
2415
  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
2420
2416
  const highFee = hasHighFee(totalFeeInUsd);
2421
2417
  React.useEffect(() => {
@@ -2974,14 +2970,13 @@ function Layout(_ref) {
2974
2970
  } = _ref;
2975
2971
  const navigate = reactRouterDom.useNavigate();
2976
2972
  const {
2977
- balances,
2978
- accounts,
2973
+ connectedWallets,
2979
2974
  selectedWallets
2980
2975
  } = useWalletsStore();
2981
2976
  const {
2982
2977
  getWalletInfo
2983
2978
  } = walletsCore.useWallets();
2984
- const connectedWalletsImages = removeDuplicateFrom(getSelectableWallets(accounts, selectedWallets, getWalletInfo).map(w => w.image));
2979
+ const connectedWalletsImages = removeDuplicateFrom(getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo).map(w => w.image));
2985
2980
  const {
2986
2981
  blockchains,
2987
2982
  tokens
@@ -2992,7 +2987,7 @@ function Layout(_ref) {
2992
2987
  const setToToken = useBestRouteStore.use.setToToken();
2993
2988
  const setInputAmount = useBestRouteStore.use.setInputAmount();
2994
2989
  const setAffiliateRef = useSettingsStore.use.setAffiliateRef();
2995
- const totalBalance = calculateWalletUsdValue(balances);
2990
+ const totalBalance = calculateWalletUsdValue(connectedWallets);
2996
2991
  const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
2997
2992
  const loadingMetaStatus = useMetaStore.use.loadingStatus();
2998
2993
  const fetchingBalance = useWalletsStore(fetchingBalanceSelector);
@@ -3038,7 +3033,7 @@ function Layout(_ref) {
3038
3033
  className: "balance"
3039
3034
  }, React__default.createElement(ui.Typography, {
3040
3035
  variant: "body2"
3041
- }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`), fetchingBalance && React__default.createElement(ui.Spinner, null)))), React__default.createElement(AppRoutes, {
3036
+ }, !connectedWallets?.length ? t('Connect Wallet') : `$${totalBalance || 0}`), fetchingBalance && React__default.createElement(ui.Spinner, null)))), React__default.createElement(AppRoutes, {
3042
3037
  config: config
3043
3038
  }));
3044
3039
  }
@@ -3274,13 +3269,12 @@ function QueueManager(props) {
3274
3269
  });
3275
3270
  }, []);
3276
3271
  const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
3277
- const accounts = useWalletsStore.use.accounts();
3278
3272
  const {
3279
3273
  blockchains
3280
3274
  } = useMetaStore.use.meta();
3281
- const balances = useWalletsStore.use.balances();
3275
+ const connectedWallets = useWalletsStore.use.connectedWallets();
3282
3276
  const wallets = {
3283
- blockchains: balances.map(wallet => ({
3277
+ blockchains: connectedWallets.map(wallet => ({
3284
3278
  accounts: [wallet],
3285
3279
  name: wallet.chain
3286
3280
  }))
@@ -3306,8 +3300,8 @@ function QueueManager(props) {
3306
3300
  const outputAmount = data.step?.outputAmount || '';
3307
3301
  const step = data.step || lastStep;
3308
3302
  if (data.eventType === 'task_completed' || data.eventType === 'step_completed_with_output' && lastStep?.id !== data.step?.id || !!outputAmount) {
3309
- const fromAccount = accounts.find(account => account.chain === step?.fromBlockchain);
3310
- const toAccount = step?.fromBlockchain !== step?.toBlockchain && accounts.find(account => account.chain === step?.toBlockchain);
3303
+ const fromAccount = connectedWallets.find(account => account.chain === step?.fromBlockchain);
3304
+ const toAccount = step?.fromBlockchain !== step?.toBlockchain && connectedWallets.find(wallet => wallet.chain === step?.toBlockchain);
3311
3305
  fromAccount && getOneOfWalletsDetails(fromAccount);
3312
3306
  toAccount && getOneOfWalletsDetails(toAccount);
3313
3307
  }