@rango-dev/widget-embedded 0.1.16-next.2 → 0.1.16-next.20

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 (50) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/QueueManager.d.ts.map +1 -1
  3. package/dist/components/Footer.d.ts +111 -1
  4. package/dist/components/Footer.d.ts.map +1 -1
  5. package/dist/components/Layout.d.ts.map +1 -1
  6. package/dist/components/RoutesOverview.d.ts +111 -1
  7. package/dist/components/RoutesOverview.d.ts.map +1 -1
  8. package/dist/components/SwapDetailsPlaceholder.d.ts +111 -1
  9. package/dist/components/SwapDetailsPlaceholder.d.ts.map +1 -1
  10. package/dist/components/TokenInfo.d.ts.map +1 -1
  11. package/dist/hooks/useTheme.d.ts.map +1 -1
  12. package/dist/index.d.ts +1 -2
  13. package/dist/index.d.ts.map +1 -1
  14. package/dist/pages/ConfirmSwapPage.d.ts.map +1 -1
  15. package/dist/pages/SettingsPage.d.ts +2 -1
  16. package/dist/pages/SettingsPage.d.ts.map +1 -1
  17. package/dist/pages/WalletsPage.d.ts.map +1 -1
  18. package/dist/store/wallets.d.ts.map +1 -1
  19. package/dist/types/config.d.ts +11 -1
  20. package/dist/types/config.d.ts.map +1 -1
  21. package/dist/utils/common.d.ts +0 -1
  22. package/dist/utils/common.d.ts.map +1 -1
  23. package/dist/utils/wallets.d.ts +2 -2
  24. package/dist/utils/wallets.d.ts.map +1 -1
  25. package/dist/widget-embedded.cjs.development.js +115 -152
  26. package/dist/widget-embedded.cjs.development.js.map +1 -1
  27. package/dist/widget-embedded.cjs.production.min.js +115 -152
  28. package/dist/widget-embedded.cjs.production.min.js.map +1 -1
  29. package/dist/widget-embedded.esm.js +117 -149
  30. package/dist/widget-embedded.esm.js.map +1 -1
  31. package/package.json +16 -13
  32. package/src/QueueManager.tsx +4 -1
  33. package/src/components/AppRoutes.tsx +1 -1
  34. package/src/components/BottomLogo.tsx +1 -1
  35. package/src/components/Layout.tsx +7 -8
  36. package/src/components/RoutesOverview.tsx +4 -4
  37. package/src/components/TokenInfo.tsx +13 -12
  38. package/src/components/TokenPreview.tsx +9 -9
  39. package/src/components/warnings/BalanceErrors.tsx +2 -2
  40. package/src/components/warnings/MinRequiredSlippage.tsx +2 -2
  41. package/src/hooks/useTheme.ts +46 -63
  42. package/src/index.tsx +1 -7
  43. package/src/pages/ConfirmSwapPage.tsx +38 -28
  44. package/src/pages/SettingsPage.tsx +4 -2
  45. package/src/pages/SwapDetailsPage.tsx +1 -1
  46. package/src/pages/WalletsPage.tsx +6 -2
  47. package/src/store/wallets.ts +13 -11
  48. package/src/types/config.ts +8 -1
  49. package/src/utils/common.ts +0 -21
  50. package/src/utils/wallets.ts +7 -15
@@ -37,24 +37,6 @@ function removeDuplicateFrom(array) {
37
37
  function areEqual(array1, array2) {
38
38
  return array1.length === array2.length && array1.every((v, i) => v === array2[i]);
39
39
  }
40
- function shadeColor(color, percent) {
41
- var R = parseInt(color.substring(1, 3), 16);
42
- var G = parseInt(color.substring(3, 5), 16);
43
- var B = parseInt(color.substring(5, 7), 16);
44
- R = R * (100 + percent) / 100;
45
- G = G * (100 + percent) / 100;
46
- B = B * (100 + percent) / 100;
47
- R = R < 255 ? R : 255;
48
- G = G < 255 ? G : 255;
49
- B = B < 255 ? B : 255;
50
- R = Math.round(R);
51
- G = Math.round(G);
52
- B = Math.round(B);
53
- var RR = R.toString(16).length == 1 ? '0' + R.toString(16) : R.toString(16);
54
- var GG = G.toString(16).length == 1 ? '0' + G.toString(16) : G.toString(16);
55
- var BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16);
56
- return '#' + RR + GG + BB;
57
- }
58
40
  function debounce(fn, time) {
59
41
  let timeoutId;
60
42
  return wrapper;
@@ -318,8 +300,8 @@ function getStateWallet(state) {
318
300
  return ui.WalletState.DISCONNECTED;
319
301
  }
320
302
  }
303
+ const excludedWallets = [walletsShared.WalletTypes.LEAP];
321
304
  function getlistWallet(getState, getWalletInfo, list) {
322
- const excludedWallets = [walletsShared.WalletType.UNKNOWN, walletsShared.WalletType.TERRA_STATION, walletsShared.WalletType.LEAP];
323
305
  return list.filter(wallet => !excludedWallets.includes(wallet)).map(type => {
324
306
  const {
325
307
  name,
@@ -420,7 +402,7 @@ function getBalanceFromWallet(connectedWallets, chain, symbol, address) {
420
402
  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
403
  }
422
404
  function isAccountAndWalletMatched(account, connectedWallet) {
423
- return account.address === connectedWallet.address && account.chain === connectedWallet.chain && account.walletType === connectedWallet.walletType;
405
+ return account.address === connectedWallet.address && account.chain === connectedWallet.chain;
424
406
  }
425
407
  function makeBalanceFor(wallet, retrivedBalance, tokens) {
426
408
  const {
@@ -501,7 +483,9 @@ const isExperimentalChain = (blockchains, wallet) => {
501
483
  return cosmosExperimentalChainInfo && !!cosmosExperimentalChainInfo[wallet];
502
484
  };
503
485
  const getKeplrCompatibleConnectedWallets = selectableWallets => {
504
- const connectedWalletTypes = new Set(selectableWallets.map(a => a.walletType.toString()));
486
+ const connectedWalletTypes = new Set(selectableWallets.map(wallet => {
487
+ return wallet.walletType;
488
+ }));
505
489
  return walletsShared.KEPLR_COMPATIBLE_WALLETS.filter(compatibleWallet => connectedWalletTypes.has(compatibleWallet));
506
490
  };
507
491
  function getTokensWithBalance(tokens, connectedWallets) {
@@ -831,7 +815,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.creat
831
815
  connectWallet: accounts => {
832
816
  const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
833
817
  set(state => ({
834
- connectedWallets: state.connectedWallets.concat(accounts.map(account => ({
818
+ connectedWallets: state.connectedWallets.filter(wallet => wallet.walletType !== accounts[0].walletType).concat(accounts.map(account => ({
835
819
  balances: [],
836
820
  address: account.address,
837
821
  chain: account.chain,
@@ -1367,10 +1351,10 @@ const Container = /*#__PURE__*/ui.styled('div', {
1367
1351
  variants: {
1368
1352
  type: {
1369
1353
  filled: {
1370
- backgroundColor: '$neutrals300'
1354
+ backgroundColor: '$neutral100'
1371
1355
  },
1372
1356
  outlined: {
1373
- border: '1px solid $neutrals300'
1357
+ border: '1px solid $neutral100'
1374
1358
  }
1375
1359
  }
1376
1360
  },
@@ -1406,14 +1390,14 @@ const Container = /*#__PURE__*/ui.styled('div', {
1406
1390
  const ImagePlaceholder = /*#__PURE__*/ui.styled('span', {
1407
1391
  width: '24px',
1408
1392
  height: '24px',
1409
- backgroundColor: '$neutrals300',
1393
+ backgroundColor: '$neutral100',
1410
1394
  borderRadius: '99999px'
1411
1395
  });
1412
1396
  const OutputContainer = /*#__PURE__*/ui.styled('div', {
1413
1397
  windth: '100%',
1414
1398
  height: '$48',
1415
1399
  borderRadius: '$5',
1416
- backgroundColor: '$background',
1400
+ backgroundColor: '$surface',
1417
1401
  border: '1px solid transparent',
1418
1402
  position: 'relative',
1419
1403
  display: 'flex',
@@ -1447,10 +1431,10 @@ function TokenPreview(props) {
1447
1431
  className: "head"
1448
1432
  }, React__default.createElement(ui.Typography, {
1449
1433
  variant: "body2",
1450
- color: "neutrals800"
1434
+ color: "neutral800"
1451
1435
  }, props.label), React__default.createElement("div", null, percentageChange, props.usdValue && React__default.createElement(ui.Typography, {
1452
1436
  variant: "caption",
1453
- color: "neutrals600",
1437
+ color: "neutral600",
1454
1438
  className: "usd-value"
1455
1439
  }, `$${numberToString(props.usdValue)}`))), React__default.createElement("div", {
1456
1440
  className: "form"
@@ -1465,8 +1449,9 @@ function TokenPreview(props) {
1465
1449
  suffix: ItemSuffix,
1466
1450
  align: "start",
1467
1451
  size: "large"
1468
- }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Spacer, {
1469
- size: 12
1452
+ }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Divider, {
1453
+ size: 12,
1454
+ direction: "horizontal"
1470
1455
  }), React__default.createElement(ui.Button, {
1471
1456
  className: "selectors",
1472
1457
  variant: "outlined",
@@ -1478,8 +1463,9 @@ function TokenPreview(props) {
1478
1463
  suffix: ItemSuffix,
1479
1464
  size: "large",
1480
1465
  align: "start"
1481
- }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Spacer, {
1482
- size: 12
1466
+ }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Divider, {
1467
+ size: 12,
1468
+ direction: "horizontal"
1483
1469
  }), React__default.createElement("div", {
1484
1470
  className: "amount"
1485
1471
  }, React__default.createElement(OutputContainer, null, React__default.createElement(ui.Typography, {
@@ -1493,8 +1479,8 @@ const Container$1 = /*#__PURE__*/ui.styled('div', {
1493
1479
  justifyContent: 'space-between',
1494
1480
  padding: '$8',
1495
1481
  borderRadius: '$5',
1496
- backgroundColor: '$neutrals300',
1497
- color: '$neutrals800',
1482
+ backgroundColor: '$neutral100',
1483
+ color: '$neutral800',
1498
1484
  fontSize: '$12',
1499
1485
  '.routes': {
1500
1486
  display: 'flex',
@@ -1525,8 +1511,9 @@ function RoutesOverview(props) {
1525
1511
  className: "fee"
1526
1512
  }, React__default.createElement(ui.GasIcon, {
1527
1513
  size: 12
1528
- }), React__default.createElement(ui.Spacer, {
1529
- size: 4
1514
+ }), React__default.createElement(ui.Divider, {
1515
+ size: 4,
1516
+ direction: "horizontal"
1530
1517
  }), "$", props.totalFee) : null);
1531
1518
  }
1532
1519
 
@@ -1697,9 +1684,8 @@ function MinRequiredSlippage(_ref) {
1697
1684
  } = _ref;
1698
1685
  return React__default.createElement(StyledMessage, {
1699
1686
  variant: "body2"
1700
- }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React__default.createElement(ui.Spacer, {
1701
- size: 8,
1702
- direction: "vertical"
1687
+ }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React__default.createElement(ui.Divider, {
1688
+ size: 8
1703
1689
  }), React__default.createElement(ChangeSlippageButton, null));
1704
1690
  }
1705
1691
 
@@ -1736,9 +1722,8 @@ function BalanceErrors(_ref) {
1736
1722
  className: "title",
1737
1723
  variant: "title",
1738
1724
  color: 'error'
1739
- }, "Insufficent Balance:"), React__default.createElement(ui.Spacer, {
1740
- size: 8,
1741
- direction: "vertical"
1725
+ }, "Insufficent Balance:"), React__default.createElement(ui.Divider, {
1726
+ size: 8
1742
1727
  }), React__default.createElement(List, {
1743
1728
  showListStyle: showListStyle
1744
1729
  }, messages.map((warning, index) => React__default.createElement(ListItem, {
@@ -1846,6 +1831,7 @@ function ConfirmSwapPage() {
1846
1831
  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
1847
1832
  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
1848
1833
  const setInputAmount = useBestRouteStore.use.setInputAmount();
1834
+ const [dbErrorMessage, setDbErrorMessage] = React.useState('');
1849
1835
  const bestRouteloadingStatus = getBestRouteStatus(fetchingBestRoute, !!fetchingBestRouteError);
1850
1836
  const {
1851
1837
  manager
@@ -1880,21 +1866,25 @@ function ConfirmSwapPage() {
1880
1866
  requiredWallets: getRequiredChains(bestRoute),
1881
1867
  selectableWallets: selectableWallets,
1882
1868
  onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
1883
- onConfirm: () => {
1884
- confirmSwap?.().then(swap => {
1869
+ onConfirm: async () => {
1870
+ confirmSwap?.().then(async swap => {
1885
1871
  if (swap) {
1886
- manager?.create('swap', {
1887
- swapDetails: swap
1888
- }, {
1889
- id: swap.requestId
1890
- });
1891
- setSelectedSwap(swap.requestId);
1892
- navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
1893
- replace: true
1894
- });
1895
- setTimeout(() => {
1896
- setInputAmount('');
1897
- }, 0);
1872
+ try {
1873
+ await manager?.create('swap', {
1874
+ swapDetails: swap
1875
+ }, {
1876
+ id: swap.requestId
1877
+ });
1878
+ setSelectedSwap(swap.requestId);
1879
+ navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
1880
+ replace: true
1881
+ });
1882
+ setTimeout(() => {
1883
+ setInputAmount('');
1884
+ }, 0);
1885
+ } catch (e) {
1886
+ setDbErrorMessage('Error: ' + e?.message);
1887
+ }
1898
1888
  }
1899
1889
  });
1900
1890
  },
@@ -1915,9 +1905,8 @@ function ConfirmSwapPage() {
1915
1905
  amount: fromAmount,
1916
1906
  label: i18n.t('From'),
1917
1907
  loadingStatus: loadingMetaStatus !== 'success' ? loadingMetaStatus : bestRouteloadingStatus
1918
- }), React__default.createElement(ui.Spacer, {
1919
- size: 12,
1920
- direction: "vertical"
1908
+ }), React__default.createElement(ui.Divider, {
1909
+ size: 12
1921
1910
  }), React__default.createElement(TokenPreview, {
1922
1911
  chain: {
1923
1912
  displayName: lastStep?.to.blockchain || '',
@@ -1941,11 +1930,9 @@ function ConfirmSwapPage() {
1941
1930
  totalFee: numberToString(totalFeeInUsd, 0, 2)
1942
1931
  }),
1943
1932
  loading: fetchingConfirmedRoute,
1944
- errors: ConfirmSwapErrors(errors),
1933
+ errors: dbErrorMessage ? [dbErrorMessage, ...ConfirmSwapErrors(errors)] : ConfirmSwapErrors(errors),
1945
1934
  warnings: ConfirmSwapWarnings(warnings),
1946
- extraMessages: React__default.createElement(React__default.Fragment, null, loadingMetaStatus === 'failed' && React__default.createElement(ui.LoadingFailedAlert, null), loadingMetaStatus === 'failed' && showHighSlippageWarning && React__default.createElement(ui.Spacer, {
1947
- direction: "vertical"
1948
- }), showHighSlippageWarning && React__default.createElement(ConfirmSwapExtraMessages, {
1935
+ extraMessages: React__default.createElement(React__default.Fragment, null, loadingMetaStatus === 'failed' && React__default.createElement(ui.LoadingFailedAlert, null), loadingMetaStatus === 'failed' && showHighSlippageWarning && React__default.createElement(ui.Divider, null), showHighSlippageWarning && React__default.createElement(ConfirmSwapExtraMessages, {
1949
1936
  selectedSlippage: selectedSlippage
1950
1937
  })),
1951
1938
  confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!'
@@ -2035,10 +2022,11 @@ const Container$2 = /*#__PURE__*/ui.styled('div', {
2035
2022
  variants: {
2036
2023
  type: {
2037
2024
  filled: {
2038
- backgroundColor: '$neutrals300'
2025
+ backgroundColor: '$neutral100'
2039
2026
  },
2040
2027
  outlined: {
2041
- border: '1px solid $neutrals300'
2028
+ border: '1px solid $neutral100',
2029
+ backgroundColor: '$surface'
2042
2030
  }
2043
2031
  }
2044
2032
  },
@@ -2086,14 +2074,14 @@ const Options = /*#__PURE__*/ui.styled('div', {
2086
2074
  const ImagePlaceholder$1 = /*#__PURE__*/ui.styled('span', {
2087
2075
  width: '24px',
2088
2076
  height: '24px',
2089
- backgroundColor: '$neutrals300',
2077
+ backgroundColor: '$neutral100',
2090
2078
  borderRadius: '99999px'
2091
2079
  });
2092
2080
  const OutputContainer$1 = /*#__PURE__*/ui.styled('div', {
2093
2081
  windth: '100%',
2094
2082
  height: '$48',
2095
2083
  borderRadius: '$5',
2096
- backgroundColor: '$background',
2084
+ backgroundColor: '$surface',
2097
2085
  border: '1px solid transparent',
2098
2086
  position: 'relative',
2099
2087
  display: 'flex',
@@ -2139,7 +2127,7 @@ function TokenInfo(props) {
2139
2127
  className: "head"
2140
2128
  }, React__default.createElement(ui.Typography, {
2141
2129
  variant: "body2",
2142
- color: "neutrals800"
2130
+ color: "neutral800"
2143
2131
  }, t(type)), props.type === 'From' ? React__default.createElement(Options, null, React__default.createElement("div", {
2144
2132
  className: "balance",
2145
2133
  onClick: () => {
@@ -2147,8 +2135,8 @@ function TokenInfo(props) {
2147
2135
  }
2148
2136
  }, React__default.createElement(ui.Typography, {
2149
2137
  variant: "body3",
2150
- color: "neutrals600"
2151
- }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React__default.createElement(ui.Spacer, {
2138
+ color: "neutral600"
2139
+ }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React__default.createElement(ui.Divider, {
2152
2140
  size: 4
2153
2141
  }), React__default.createElement(ui.Button, {
2154
2142
  type: "primary",
@@ -2161,7 +2149,7 @@ function TokenInfo(props) {
2161
2149
  outputUsdValue: props.outputUsdValue
2162
2150
  }), React__default.createElement("div", null, React__default.createElement(ui.Typography, {
2163
2151
  variant: "caption",
2164
- color: "neutrals600"
2152
+ color: "neutral600"
2165
2153
  }, `$${numberToString(props.outputUsdValue)}`)))), React__default.createElement("div", {
2166
2154
  className: "form"
2167
2155
  }, React__default.createElement(ui.Button, {
@@ -2179,8 +2167,9 @@ function TokenInfo(props) {
2179
2167
  suffix: ItemSuffix,
2180
2168
  align: "start",
2181
2169
  size: "large"
2182
- }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Spacer, {
2183
- size: 12
2170
+ }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Divider, {
2171
+ size: 12,
2172
+ direction: "horizontal"
2184
2173
  }), React__default.createElement(ui.Button, {
2185
2174
  className: "selectors",
2186
2175
  onClick: () => {
@@ -2196,8 +2185,9 @@ function TokenInfo(props) {
2196
2185
  suffix: ItemSuffix,
2197
2186
  size: "large",
2198
2187
  align: "start"
2199
- }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Spacer, {
2200
- size: 12
2188
+ }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Divider, {
2189
+ size: 12,
2190
+ direction: "horizontal"
2201
2191
  }), React__default.createElement("div", {
2202
2192
  className: "amount"
2203
2193
  }, props.type === 'From' ? React__default.createElement(ui.TextField, {
@@ -2217,7 +2207,7 @@ function TokenInfo(props) {
2217
2207
  }
2218
2208
  }, React__default.createElement(ui.Typography, {
2219
2209
  variant: "caption",
2220
- color: "neutrals800"
2210
+ color: "neutral800"
2221
2211
  }, `$${numberToString(inputUsdValue)}`)),
2222
2212
  value: props.inputAmount || '',
2223
2213
  min: 0,
@@ -2253,7 +2243,7 @@ function BottomLogo() {
2253
2243
  } = reactI18next.useTranslation();
2254
2244
  return React__default.createElement(Container$3, null, React__default.createElement(ui.Typography, {
2255
2245
  variant: "caption",
2256
- color: "$neutrals600"
2246
+ color: "$neutral600"
2257
2247
  }, t('Powered By')), React__default.createElement(StyledAnchor, {
2258
2248
  href: "https://rango.exchange",
2259
2249
  target: "_blank"
@@ -2571,7 +2561,8 @@ function SelectTokenPage(props) {
2571
2561
 
2572
2562
  function SettingsPage(_ref) {
2573
2563
  let {
2574
- supportedSwappers
2564
+ supportedSwappers,
2565
+ singleTheme
2575
2566
  } = _ref;
2576
2567
  const slippage = useSettingsStore.use.slippage();
2577
2568
  const setSlippage = useSettingsStore.use.setSlippage();
@@ -2613,7 +2604,8 @@ function SettingsPage(_ref) {
2613
2604
  onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
2614
2605
  liquiditySources: supportedUniqueSwappersGroups,
2615
2606
  selectedLiquiditySources: supportedUniqueSwappersGroups.filter(s => s.selected),
2616
- customSlippage: customSlippage || NaN,
2607
+ singleTheme: singleTheme,
2608
+ customSlippage: customSlippage,
2617
2609
  onCustomSlippageChange: setCustomSlippage,
2618
2610
  minSlippage: MIN_SLIPPGAE,
2619
2611
  maxSlippage: MAX_SLIPPAGE,
@@ -2657,7 +2649,7 @@ function WalletsPage(_ref) {
2657
2649
  getWalletInfo,
2658
2650
  connect
2659
2651
  } = walletsCore.useWallets();
2660
- const wallets = getlistWallet(state, getWalletInfo, supportedWallets || Object.values(walletsShared.WalletType));
2652
+ const wallets = getlistWallet(state, getWalletInfo, supportedWallets || Object.values(walletsShared.WalletTypes));
2661
2653
  const walletsRef = React.useRef();
2662
2654
  let sortedWallets = walletsShared.detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
2663
2655
  sortedWallets = sortWalletsBasedOnState(sortedWallets);
@@ -2846,7 +2838,7 @@ function SwapDetailsPage() {
2846
2838
  label={t('From')}
2847
2839
  loadingStatus={'success'}
2848
2840
  />
2849
- <Spacer size={12} direction="vertical" />
2841
+ <Divider size={12} />
2850
2842
  <TokenPreview
2851
2843
  chain={{
2852
2844
  displayName: lastStep?.toBlockchain || '',
@@ -2924,6 +2916,7 @@ function AppRoutes(props) {
2924
2916
  }, {
2925
2917
  path: navigationRoutes.settings,
2926
2918
  element: React__default.createElement(SettingsPage, {
2919
+ singleTheme: config?.theme?.singleTheme,
2927
2920
  supportedSwappers: config?.liquiditySources
2928
2921
  })
2929
2922
  }, {
@@ -3064,96 +3057,73 @@ function usePrevious(value) {
3064
3057
  function useTheme(_ref) {
3065
3058
  let {
3066
3059
  colors: themeColors,
3067
- fontFamily = 'Robot',
3060
+ fontFamily = 'Roboto',
3068
3061
  borderRadius = 8,
3069
3062
  mode = 'auto'
3070
3063
  } = _ref;
3071
3064
  const theme = useSettingsStore.use.theme();
3072
3065
  const fetchMeta = useMetaStore.use.fetchMeta();
3073
3066
  const setTheme = useSettingsStore.use.setTheme();
3074
- const primary = themeColors?.primary || '#5FA425',
3075
- background = themeColors?.background || '#fff',
3076
- foreground = themeColors?.foreground || '#000',
3077
- error = themeColors?.error || '#FF0000',
3078
- warning = themeColors?.warning || '#F5A623',
3079
- success = themeColors?.success || '#0070F3';
3080
- const colors = {
3081
- neutrals200: '#FAFAFA',
3082
- neutrals300: '#f2f2f2',
3083
- neutrals400: '#dedede',
3084
- neutrals500: '#cccccc',
3085
- neutrals600: '#acacac',
3086
- neutrals700: '#444444',
3087
- neutrals800: '#333333',
3088
- neutrals900: '#111111',
3089
- primary,
3090
- primary100: shadeColor(primary, 15),
3091
- primary200: shadeColor(primary, -10),
3092
- primary300: shadeColor(primary, -15),
3093
- primary400: shadeColor(primary, -20),
3094
- primary500: shadeColor(primary, -25),
3095
- primary600: shadeColor(primary, -30),
3096
- primary700: shadeColor(primary, -35),
3097
- primary800: shadeColor(primary, -40),
3098
- primary900: shadeColor(primary, -45),
3067
+ const light = themeColors?.light;
3068
+ const dark = themeColors?.dark;
3069
+ const neutral = light?.neutral || '#fafafa';
3070
+ const background = light?.background || '#fff';
3071
+ const foreground = light?.foreground || '#000';
3072
+ const darkColors = {
3073
+ ...ui.generateRangeColors('primary', 'dark', dark?.primary),
3074
+ ...ui.generateRangeColors('error', 'dark', dark?.error),
3075
+ ...ui.generateRangeColors('warning', 'dark', dark?.warning),
3076
+ ...ui.generateRangeColors('success', 'dark', dark?.success),
3077
+ ...ui.generateRangeColors('neutral', 'dark', dark?.neutral),
3078
+ surface: dark?.surface,
3079
+ background: dark?.background,
3080
+ foreground: dark?.foreground
3081
+ };
3082
+ const lightColors = {
3083
+ surface: light?.surface || '#fff',
3084
+ ...ui.generateRangeColors('primary', 'light', light?.primary || '#5FA425'),
3085
+ ...ui.generateRangeColors('error', 'light', light?.error || '#FF0000'),
3086
+ ...ui.generateRangeColors('warning', 'light', light?.warning || '#F5A623'),
3087
+ ...ui.generateRangeColors('success', 'light', light?.success || '#0070F3'),
3088
+ ...ui.generateRangeColors('neutral', 'light', neutral),
3099
3089
  background,
3100
- foreground,
3101
- error,
3102
- error100: shadeColor(error, 50),
3103
- error300: shadeColor(error, -10),
3104
- error500: shadeColor(error, -20),
3105
- error700: shadeColor(error, -30),
3106
- warning,
3107
- warning100: shadeColor(warning, 50),
3108
- warning300: shadeColor(warning, -10),
3109
- warning500: shadeColor(warning, -20),
3110
- warning700: shadeColor(warning, -30),
3111
- success,
3112
- success100: shadeColor(success, 50),
3113
- success300: shadeColor(success, -10),
3114
- success500: shadeColor(success, -20),
3115
- success700: shadeColor(success, -30)
3090
+ foreground
3116
3091
  };
3117
- const customeLightTheme = ui.createTheme({
3118
- colors,
3092
+ const customLightTheme = ui.createTheme({
3093
+ colors: lightColors,
3119
3094
  radii: {
3120
3095
  5: `${borderRadius}px`
3121
3096
  },
3122
3097
  shadows: {
3123
- s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5'
3098
+ s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${light?.neutral || '#f0f2f5'}, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`
3124
3099
  }
3125
3100
  });
3126
- const customeDarkTheme = ui.createTheme({
3101
+ const customDarkTheme = ui.createTheme({
3127
3102
  colors: {
3128
- ...colors,
3129
- neutrals200: '#111111',
3130
- neutrals300: '#333333',
3131
- neutrals400: '#444444',
3132
- neutrals500: '#acacac',
3133
- neutrals600: '#cccccc',
3134
- neutrals700: '#dedede',
3135
- neutrals800: '#f2f2f2',
3136
- neutrals900: '#FAFAFA',
3103
+ ...lightColors,
3104
+ ...ui.generateRangeColors('neutral', 'dark', '#111111'),
3137
3105
  foreground: background,
3138
- background: foreground
3106
+ background: foreground,
3107
+ surface: '#000',
3108
+ ...JSON.parse(JSON.stringify(darkColors))
3139
3109
  },
3140
3110
  radii: {
3141
3111
  5: `${borderRadius}px`
3142
3112
  },
3143
3113
  shadows: {
3144
- s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222'
3114
+ s: `0px 3px 5px 3px ${dark?.neutral || '#222'}, 0px 6px 10px 3px ${dark?.neutral || '#222'}, 0px 1px 18px 3px ${dark?.neutral || '#222'}`
3145
3115
  }
3146
3116
  });
3147
- const [OSTheme, setOSTheme] = React.useState(customeLightTheme);
3117
+ const [OSTheme, setOSTheme] = React.useState('light');
3148
3118
  React.useEffect(() => {
3149
3119
  (async () => {
3150
3120
  await fetchMeta();
3151
3121
  })();
3152
3122
  const switchTheme = event => {
3153
- if (event.matches) setOSTheme(customeDarkTheme);else setOSTheme(customeLightTheme);
3123
+ if (event.matches) setOSTheme('dark');else setOSTheme('light');
3154
3124
  };
3155
3125
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
3156
- setOSTheme(customeDarkTheme);
3126
+ setOSTheme('dark');
3157
3127
  }
3158
3128
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme);
3159
3129
  return () => {
@@ -3172,7 +3142,7 @@ function useTheme(_ref) {
3172
3142
  classList.add(`font_${fontFamily.replace(/ /g, '')}`);
3173
3143
  }, [fontFamily]);
3174
3144
  const getActiveTheme = () => {
3175
- if (theme === 'auto') return OSTheme;else return theme === 'dark' ? customeDarkTheme : customeLightTheme;
3145
+ if (theme === 'auto') return OSTheme === 'dark' ? customDarkTheme : customLightTheme;else return theme === 'dark' ? customDarkTheme : customLightTheme;
3176
3146
  };
3177
3147
  return {
3178
3148
  activeTheme: getActiveTheme()
@@ -3289,6 +3259,7 @@ function QueueManager(props) {
3289
3259
  }
3290
3260
  return connect(wallet, network);
3291
3261
  };
3262
+ const isMobileWallet = walletType => !!getWalletInfo(walletType).mobileWallet;
3292
3263
  // TODO: this code copy & pasted from rango, should be refactored.
3293
3264
  const allBlockchains = blockchains.filter(blockchain => blockchain.enabled).reduce((blockchainsObj, blockchain) => (blockchainsObj[blockchain.name] = blockchain, blockchainsObj), {});
3294
3265
  const evmBasedChains = blockchains.filter(rangoSdk.isEvmBlockchain);
@@ -3325,12 +3296,10 @@ function QueueManager(props) {
3325
3296
  switchNetwork,
3326
3297
  connect,
3327
3298
  state,
3299
+ isMobileWallet,
3328
3300
  notifier
3329
3301
  };
3330
- return React__default.createElement(queueManagerReact.Provider
3331
- //@ts-ignore
3332
- , {
3333
- //@ts-ignore
3302
+ return React__default.createElement(queueManagerReact.Provider, {
3334
3303
  queuesDefs: [swapQueueDef],
3335
3304
  context: context,
3336
3305
  onPersistedDataLoaded: manager => {
@@ -3423,11 +3392,5 @@ const Widget = _ref => {
3423
3392
  }))))));
3424
3393
  };
3425
3394
 
3426
- Object.defineProperty(exports, 'WalletType', {
3427
- enumerable: true,
3428
- get: function () {
3429
- return walletsShared.WalletType;
3430
- }
3431
- });
3432
3395
  exports.Widget = Widget;
3433
3396
  //# sourceMappingURL=widget-embedded.cjs.development.js.map