@rango-dev/widget-embedded 0.1.20-next.0 → 0.1.20-next.2

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 (144) hide show
  1. package/dist/QueueManager.d.ts +3 -3
  2. package/dist/QueueManager.d.ts.map +1 -1
  3. package/dist/Widget.d.ts +8 -0
  4. package/dist/Widget.d.ts.map +1 -0
  5. package/dist/components/AppRouter.d.ts +7 -7
  6. package/dist/components/AppRouter.d.ts.map +1 -1
  7. package/dist/components/AppRoutes.d.ts +7 -7
  8. package/dist/components/AppRoutes.d.ts.map +1 -1
  9. package/dist/components/BottomLogo.d.ts +2 -2
  10. package/dist/components/BottomLogo.d.ts.map +1 -1
  11. package/dist/components/ChangeSlippageButton.d.ts +2 -2
  12. package/dist/components/ChangeSlippageButton.d.ts.map +1 -1
  13. package/dist/components/ConfirmSwapErrors.d.ts +3 -3
  14. package/dist/components/ConfirmSwapErrors.d.ts.map +1 -1
  15. package/dist/components/ConfirmSwapWarnings.d.ts +2 -2
  16. package/dist/components/ConfirmSwapWarnings.d.ts.map +1 -1
  17. package/dist/components/Footer.d.ts +111 -111
  18. package/dist/components/Footer.d.ts.map +1 -1
  19. package/dist/components/HeaderButtons.d.ts +6 -6
  20. package/dist/components/HeaderButtons.d.ts.map +1 -1
  21. package/dist/components/Layout.d.ts +6 -6
  22. package/dist/components/Layout.d.ts.map +1 -1
  23. package/dist/components/PercentageChange.d.ts +8 -8
  24. package/dist/components/PercentageChange.d.ts.map +1 -1
  25. package/dist/components/RoutesOverview.d.ts +119 -119
  26. package/dist/components/RoutesOverview.d.ts.map +1 -1
  27. package/dist/components/SwapDetailsPlaceholder.d.ts +119 -119
  28. package/dist/components/SwapDetailsPlaceholder.d.ts.map +1 -1
  29. package/dist/components/SwitchFromAndTo.d.ts +3 -3
  30. package/dist/components/SwitchFromAndTo.d.ts.map +1 -1
  31. package/dist/components/TokenInfo.d.ts +17 -17
  32. package/dist/components/TokenInfo.d.ts.map +1 -1
  33. package/dist/components/TokenPreview.d.ts +20 -20
  34. package/dist/components/TokenPreview.d.ts.map +1 -1
  35. package/dist/components/UpdateUrl.d.ts +1 -1
  36. package/dist/components/UpdateUrl.d.ts.map +1 -1
  37. package/dist/components/warnings/BalanceErrors.d.ts +6 -6
  38. package/dist/components/warnings/BalanceErrors.d.ts.map +1 -1
  39. package/dist/components/warnings/ConfirmSwapExtraMessages.d.ts +6 -6
  40. package/dist/components/warnings/ConfirmSwapExtraMessages.d.ts.map +1 -1
  41. package/dist/components/warnings/HighSlippageWarning.d.ts +6 -6
  42. package/dist/components/warnings/HighSlippageWarning.d.ts.map +1 -1
  43. package/dist/components/warnings/MinRequiredSlippage.d.ts +6 -6
  44. package/dist/components/warnings/MinRequiredSlippage.d.ts.map +1 -1
  45. package/dist/constants/errors.d.ts +3 -3
  46. package/dist/constants/errors.d.ts.map +1 -1
  47. package/dist/constants/navigationRoutes.d.ts +13 -13
  48. package/dist/constants/navigationRoutes.d.ts.map +1 -1
  49. package/dist/constants/numbers.d.ts +2 -2
  50. package/dist/constants/numbers.d.ts.map +1 -1
  51. package/dist/constants/searchParams.d.ts +7 -7
  52. package/dist/constants/searchParams.d.ts.map +1 -1
  53. package/dist/constants/swapSettings.d.ts +5 -5
  54. package/dist/constants/swapSettings.d.ts.map +1 -1
  55. package/dist/globalStyles.d.ts +1 -1
  56. package/dist/globalStyles.d.ts.map +1 -1
  57. package/dist/hooks/useConfirmSwap.d.ts +10 -10
  58. package/dist/hooks/useConfirmSwap.d.ts.map +1 -1
  59. package/dist/hooks/useNavigateBack.d.ts +3 -3
  60. package/dist/hooks/useNavigateBack.d.ts.map +1 -1
  61. package/dist/hooks/usePrevious.d.ts +1 -1
  62. package/dist/hooks/usePrevious.d.ts.map +1 -1
  63. package/dist/hooks/useSelectLanguage.d.ts +4 -4
  64. package/dist/hooks/useSelectLanguage.d.ts.map +1 -1
  65. package/dist/hooks/useTheme.d.ts +30 -4
  66. package/dist/hooks/useTheme.d.ts.map +1 -1
  67. package/dist/i18n.d.ts +2 -2
  68. package/dist/i18n.d.ts.map +1 -1
  69. package/dist/index.d.ts +5 -8
  70. package/dist/index.d.ts.map +1 -1
  71. package/dist/index.js +2 -8
  72. package/dist/index.js.map +7 -0
  73. package/dist/mockData/pendingSwap.d.ts +1 -1
  74. package/dist/mockData/pendingSwap.d.ts.map +1 -1
  75. package/dist/pages/ConfirmSwapPage.d.ts +2 -2
  76. package/dist/pages/ConfirmSwapPage.d.ts.map +1 -1
  77. package/dist/pages/HistoryPage.d.ts +2 -2
  78. package/dist/pages/HistoryPage.d.ts.map +1 -1
  79. package/dist/pages/Home.d.ts +2 -2
  80. package/dist/pages/Home.d.ts.map +1 -1
  81. package/dist/pages/LiquiditySourcesPage.d.ts +6 -6
  82. package/dist/pages/LiquiditySourcesPage.d.ts.map +1 -1
  83. package/dist/pages/SelectChainPage.d.ts +7 -7
  84. package/dist/pages/SelectChainPage.d.ts.map +1 -1
  85. package/dist/pages/SelectTokenPage.d.ts +14 -14
  86. package/dist/pages/SelectTokenPage.d.ts.map +1 -1
  87. package/dist/pages/SettingsPage.d.ts +7 -7
  88. package/dist/pages/SettingsPage.d.ts.map +1 -1
  89. package/dist/pages/SwapDetailsPage.d.ts +2 -2
  90. package/dist/pages/SwapDetailsPage.d.ts.map +1 -1
  91. package/dist/pages/WalletsPage.d.ts +8 -8
  92. package/dist/pages/WalletsPage.d.ts.map +1 -1
  93. package/dist/services/httpService.d.ts +3 -3
  94. package/dist/services/httpService.d.ts.map +1 -1
  95. package/dist/store/bestRoute.d.ts +67 -31
  96. package/dist/store/bestRoute.d.ts.map +1 -1
  97. package/dist/store/meta.d.ts +17 -8
  98. package/dist/store/meta.d.ts.map +1 -1
  99. package/dist/store/selectors.d.ts +10 -10
  100. package/dist/store/selectors.d.ts.map +1 -1
  101. package/dist/store/settings.d.ts +55 -18
  102. package/dist/store/settings.d.ts.map +1 -1
  103. package/dist/store/ui.d.ts +22 -1
  104. package/dist/store/ui.d.ts.map +1 -1
  105. package/dist/store/wallets.d.ts +55 -33
  106. package/dist/store/wallets.d.ts.map +1 -1
  107. package/dist/types/config.d.ts +114 -114
  108. package/dist/types/config.d.ts.map +1 -1
  109. package/dist/types/index.d.ts +4 -4
  110. package/dist/types/index.d.ts.map +1 -1
  111. package/dist/types/routing.d.ts +57 -57
  112. package/dist/types/routing.d.ts.map +1 -1
  113. package/dist/types/swap.d.ts +16 -16
  114. package/dist/types/swap.d.ts.map +1 -1
  115. package/dist/types/wallets.d.ts +6 -6
  116. package/dist/types/wallets.d.ts.map +1 -1
  117. package/dist/utils/common.d.ts +3 -3
  118. package/dist/utils/common.d.ts.map +1 -1
  119. package/dist/utils/configs.d.ts +6 -6
  120. package/dist/utils/configs.d.ts.map +1 -1
  121. package/dist/utils/date.d.ts +2 -2
  122. package/dist/utils/date.d.ts.map +1 -1
  123. package/dist/utils/numbers.d.ts +13 -13
  124. package/dist/utils/numbers.d.ts.map +1 -1
  125. package/dist/utils/queue.d.ts +3 -3
  126. package/dist/utils/queue.d.ts.map +1 -1
  127. package/dist/utils/routing.d.ts +17 -17
  128. package/dist/utils/routing.d.ts.map +1 -1
  129. package/dist/utils/swap.d.ts +50 -50
  130. package/dist/utils/swap.d.ts.map +1 -1
  131. package/dist/utils/time.d.ts +3 -3
  132. package/dist/utils/time.d.ts.map +1 -1
  133. package/dist/utils/wallets.d.ts +27 -27
  134. package/dist/utils/wallets.d.ts.map +1 -1
  135. package/package.json +13 -20
  136. package/src/QueueManager.tsx +1 -1
  137. package/src/{index.tsx → Widget.tsx} +1 -8
  138. package/src/index.ts +18 -0
  139. package/dist/widget-embedded.cjs.development.js +0 -3401
  140. package/dist/widget-embedded.cjs.development.js.map +0 -1
  141. package/dist/widget-embedded.cjs.production.min.js +0 -3401
  142. package/dist/widget-embedded.cjs.production.min.js.map +0 -1
  143. package/dist/widget-embedded.esm.js +0 -3392
  144. package/dist/widget-embedded.esm.js.map +0 -1
@@ -1,3401 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
-
7
- var ui = require('@rango-dev/ui');
8
- var React = require('react');
9
- var React__default = _interopDefault(React);
10
- var reactRouter = require('react-router');
11
- var queueManagerRangoPreset = require('@rango-dev/queue-manager-rango-preset');
12
- var rangoTypes = require('rango-types');
13
- var reactRouterDom = require('react-router-dom');
14
- var zustand = require('zustand');
15
- var BigNumber = require('bignumber.js');
16
- var BigNumber__default = _interopDefault(BigNumber);
17
- var middleware = require('zustand/middleware');
18
- var rangoSdk = require('rango-sdk');
19
- var walletsShared = require('@rango-dev/wallets-shared');
20
- var walletsCore = require('@rango-dev/wallets-core');
21
- var shallow = require('zustand/shallow');
22
- var providerAll = require('@rango-dev/provider-all');
23
- var reactI18next = require('react-i18next');
24
- var i18n = require('i18next');
25
- var i18n__default = _interopDefault(i18n);
26
- var queueManagerReact = require('@rango-dev/queue-manager-react');
27
- var dayjs = _interopDefault(require('dayjs'));
28
- var _ = require('@rango-dev/ui/');
29
- var Backend = _interopDefault(require('i18next-http-backend'));
30
- var LanguageDetector = _interopDefault(require('i18next-browser-languagedetector'));
31
-
32
- const ZERO = /*#__PURE__*/new BigNumber__default(0);
33
-
34
- function removeDuplicateFrom(array) {
35
- return Array.from(new Set(array));
36
- }
37
- function areEqual(array1, array2) {
38
- return array1.length === array2.length && array1.every((v, i) => v === array2[i]);
39
- }
40
- function debounce(fn, time) {
41
- let timeoutId;
42
- return wrapper;
43
- function wrapper() {
44
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
45
- args[_key] = arguments[_key];
46
- }
47
- if (timeoutId) {
48
- clearTimeout(timeoutId);
49
- }
50
- timeoutId = setTimeout(() => {
51
- timeoutId = null;
52
- fn(...args);
53
- }, time);
54
- }
55
- }
56
-
57
- const secondsToString = s => {
58
- const seconds = (s % 60).toString().padStart(2, '0');
59
- const minutes = parseInt((s / 60).toString()).toString().padStart(2, '0');
60
- return `${minutes}:${seconds}`;
61
- };
62
- const numberToString = function (number, minDecimals, maxDecimals) {
63
- if (minDecimals === void 0) {
64
- minDecimals = null;
65
- }
66
- if (maxDecimals === void 0) {
67
- maxDecimals = null;
68
- }
69
- if (number === null || number === undefined) return '';
70
- if (number === '') return '';
71
- const n = new BigNumber.BigNumber(number);
72
- const roundingMode = 1;
73
- let maxI = 1000;
74
- for (let i = 0; i < 60; i++) {
75
- if (new BigNumber.BigNumber(n.toFixed(i, roundingMode)).eq(n)) {
76
- maxI = i;
77
- break;
78
- }
79
- }
80
- if (n.gte(10000)) return n.toFormat(0, roundingMode);
81
- if (n.gte(1000)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))), roundingMode);
82
- if (n.gte(100)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))), roundingMode);
83
- if (n.gte(1)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 2))), roundingMode);
84
- if (n.gte(0.01)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 4))), roundingMode);
85
- for (let i = minDecimals || 4; i < 17; i++) if (n.gte(Math.pow(10, -i))) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, i))), roundingMode);
86
- if (n.isEqualTo(0)) return '0';
87
- return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 8))), roundingMode);
88
- };
89
- const totalArrivalTime = data => data?.result?.swaps?.reduce((a, b) => a + b.estimatedTimeInSeconds, 0) || 0;
90
- const isPositiveNumber = text => !!text && parseFloat(text) > 0;
91
-
92
- function searchParamsToToken(tokens, searchParams, chain) {
93
- if (!chain) return null;
94
- return tokens.find(token => {
95
- const symbolAndAddress = searchParams?.split('--');
96
- if (symbolAndAddress?.length === 1) return token.symbol === symbolAndAddress[0] && token.address === null && token.blockchain === chain.name;
97
- return token.symbol === symbolAndAddress?.[0] && token.address === symbolAndAddress?.[1] && token.blockchain === chain.name;
98
- }) || null;
99
- }
100
- function getBestRouteToTokenUsdPrice(bestRoute) {
101
- return bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to.usdPrice;
102
- }
103
- function isNumberOfSwapsChanged(route1, route2) {
104
- const route1Swaps = route1.result?.swaps || [];
105
- const route2Swaps = route2.result?.swaps || [];
106
- return route1Swaps.length !== route2Swaps.length;
107
- }
108
- function isRouteSwappersUpdated(route1, route2) {
109
- const route1Swappers = route1.result?.swaps.map(swap => swap.swapperId) || [];
110
- const route2Swappers = route2.result?.swaps.map(swap => swap.swapperId) || [];
111
- return !areEqual(route1Swappers, route2Swappers);
112
- }
113
- function isRouteInternalCoinsUpdated(route1, route2) {
114
- const route1InternalCoins = route1.result?.swaps.map(swap => swap.to.symbol) || [];
115
- const route2InternalCoins = route2.result?.swaps.map(swap => swap.to.symbol) || [];
116
- return !areEqual(route1InternalCoins, route2InternalCoins);
117
- }
118
- function isRouteChanged(route1, route2) {
119
- return isNumberOfSwapsChanged(route1, route2) || isRouteSwappersUpdated(route1, route2) || isRouteInternalCoinsUpdated(route1, route2);
120
- }
121
- function getRequiredBalanceOfWallet(selectedWallet, fee) {
122
- if (fee === null) return null;
123
- const relatedFeeStatus = fee?.find(item => item.blockchain === selectedWallet.chain)?.wallets.find(wallet => wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase());
124
- if (!relatedFeeStatus) return null;
125
- return relatedFeeStatus.requiredAssets;
126
- }
127
- function isRouteParametersChanged(params) {
128
- if (params.store === 'bestRoute') {
129
- const {
130
- prevState,
131
- currentState
132
- } = params;
133
- return !!currentState.fromToken && !!currentState.toToken && (prevState.fromChain?.name !== currentState.fromChain?.name || prevState.toChain?.name !== currentState.toChain?.name || prevState.fromToken?.symbol !== currentState.fromToken?.symbol || prevState.toToken?.symbol !== currentState.toToken?.symbol || prevState.fromToken?.blockchain !== prevState.fromToken?.blockchain || prevState.toToken?.blockchain !== currentState.toToken?.blockchain || prevState.fromToken?.address !== currentState.fromToken?.address || prevState.toToken?.address !== currentState.toToken?.address || prevState.inputAmount !== currentState.inputAmount);
134
- } else if (params.store === 'settings') {
135
- const {
136
- prevState,
137
- currentState
138
- } = params;
139
- return prevState.slippage !== currentState.slippage || prevState.customSlippage !== currentState.customSlippage || prevState.disabledLiquiditySources?.length !== currentState.disabledLiquiditySources?.length || prevState.infiniteApprove || currentState.infiniteApprove;
140
- }
141
- return false;
142
- }
143
- function getFormatedBestRoute(bestRoute) {
144
- if (!bestRoute) return null;
145
- const formatedSwaps = (bestRoute.result?.swaps || []).map(swap => ({
146
- ...swap,
147
- fromAmount: numberToString(swap.fromAmount, 6, 6),
148
- toAmount: numberToString(swap.toAmount, 6, 6)
149
- }));
150
- return {
151
- ...bestRoute,
152
- ...(bestRoute.result && {
153
- result: {
154
- ...bestRoute.result,
155
- swaps: formatedSwaps
156
- }
157
- })
158
- };
159
- }
160
- function getFormatedPendingSwap(pendingSwap) {
161
- const formatedSteps = pendingSwap.steps.map(step => ({
162
- ...step,
163
- feeInUsd: numberToString(step.feeInUsd, 4, 4),
164
- outputAmount: numberToString(step.outputAmount, 6, 6),
165
- expectedOutputAmountHumanReadable: numberToString(step.expectedOutputAmountHumanReadable, 6, 6)
166
- }));
167
- return {
168
- ...pendingSwap,
169
- inputAmount: numberToString(pendingSwap.inputAmount, 6, 6),
170
- steps: formatedSteps
171
- };
172
- }
173
- //todo: refactor bestRoute store and add loadingStatus
174
- const getBestRouteStatus = (loading, error) => {
175
- if (loading) return 'loading';
176
- if (error) return 'failed';else return 'success';
177
- };
178
-
179
- const createSelectors = _store => {
180
- let store = _store;
181
- store.use = {};
182
- for (let k of Object.keys(store.getState())) {
183
- store.use[k] = () => store(s => s[k]);
184
- }
185
- return store;
186
- };
187
-
188
- const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
189
- let configs = {
190
- API_KEY: RANGO_PUBLIC_API_KEY
191
- };
192
- function getConfig(name) {
193
- return configs[name];
194
- }
195
- function initConfig(nextConfigs) {
196
- let clonedConfigs;
197
- if (typeof structuredClone === 'function') {
198
- clonedConfigs = structuredClone(nextConfigs);
199
- } else {
200
- clonedConfigs = JSON.parse(JSON.stringify(nextConfigs));
201
- }
202
- configs = clonedConfigs;
203
- return configs;
204
- }
205
-
206
- let rango = undefined;
207
- const httpService = () => {
208
- if (rango) return rango;
209
- rango = new rangoSdk.RangoClient(getConfig('API_KEY'));
210
- return rango;
211
- };
212
-
213
- const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
214
- const DEFAULT_SLIPPAGE = 1;
215
- const HIGH_SLIPPAGE = 5;
216
- const MAX_SLIPPAGE = 100;
217
- const MIN_SLIPPGAE = 0;
218
-
219
- const useMetaStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()(set => ({
220
- meta: {
221
- blockchains: [],
222
- popularTokens: [],
223
- swappers: [],
224
- tokens: []
225
- },
226
- loadingStatus: 'loading',
227
- fetchMeta: async () => {
228
- try {
229
- const response = await httpService().getAllMetadata();
230
- const chainThatHasTokenInMetaResponse = removeDuplicateFrom(response.tokens.map(t => t.blockchain));
231
- const enabledChains = response.blockchains.filter(chain => chain.enabled && chainThatHasTokenInMetaResponse.includes(chain.name));
232
- response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
233
- set({
234
- meta: response,
235
- loadingStatus: 'success'
236
- });
237
- } catch (error) {
238
- set({
239
- loadingStatus: 'failed'
240
- });
241
- }
242
- }
243
- })));
244
-
245
- const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.persist( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
246
- slippage: DEFAULT_SLIPPAGE,
247
- customSlippage: null,
248
- infiniteApprove: false,
249
- affiliateRef: null,
250
- disabledLiquiditySources: [],
251
- theme: 'auto',
252
- setSlippage: slippage => set(() => ({
253
- slippage: slippage
254
- })),
255
- setCustomSlippage: customSlippage => set(() => ({
256
- customSlippage: customSlippage
257
- })),
258
- setAffiliateRef: affiliateRef => set(() => ({
259
- affiliateRef
260
- })),
261
- toggleAllLiquiditySources: () => set(state => {
262
- const {
263
- swappers
264
- } = useMetaStore.getState().meta;
265
- const swappersGroup = removeDuplicateFrom(swappers.map(swapper => swapper.swapperGroup));
266
- if (swappersGroup.length === state.disabledLiquiditySources.length) return {
267
- disabledLiquiditySources: []
268
- };else {
269
- return {
270
- disabledLiquiditySources: swappersGroup
271
- };
272
- }
273
- }),
274
- toggleInfiniteApprove: () => set(state => ({
275
- infiniteApprove: !state.infiniteApprove
276
- })),
277
- toggleLiquiditySource: name => set(state => {
278
- if (state.disabledLiquiditySources.includes(name)) return {
279
- disabledLiquiditySources: state.disabledLiquiditySources.filter(liquiditySource => liquiditySource != name)
280
- };else return {
281
- disabledLiquiditySources: state.disabledLiquiditySources.concat(name)
282
- };
283
- }),
284
- setTheme: theme => set(() => ({
285
- theme
286
- }))
287
- })), {
288
- name: 'user-settings'
289
- })));
290
-
291
- function getStateWallet(state) {
292
- switch (true) {
293
- case state.connected:
294
- return ui.WalletState.CONNECTED;
295
- case state.connecting:
296
- return ui.WalletState.CONNECTING;
297
- case !state.installed:
298
- return ui.WalletState.NOT_INSTALLED;
299
- default:
300
- return ui.WalletState.DISCONNECTED;
301
- }
302
- }
303
- const excludedWallets = [walletsShared.WalletTypes.LEAP];
304
- function getlistWallet(getState, getWalletInfo, list) {
305
- return list.filter(wallet => !excludedWallets.includes(wallet)).map(type => {
306
- const {
307
- name,
308
- img: image,
309
- installLink,
310
- showOnMobile
311
- } = getWalletInfo(type);
312
- const state = getStateWallet(getState(type));
313
- return {
314
- name,
315
- image,
316
- installLink: walletsShared.detectInstallLink(installLink),
317
- state,
318
- type,
319
- showOnMobile: typeof showOnMobile === 'undefined' ? false : true
320
- };
321
- });
322
- }
323
- function walletAndSupportedChainsNames(supportedChains) {
324
- if (!supportedChains) return null;
325
- let walletAndSupportedChainsNames = [];
326
- walletAndSupportedChainsNames = supportedChains.map(blockchainMeta => blockchainMeta.name);
327
- return walletAndSupportedChainsNames;
328
- }
329
- function prepareAccountsForWalletStore(wallet, accounts, evmBasedChains, supportedChainNames) {
330
- const result = [];
331
- function addAccount(network, address) {
332
- const newAccount = {
333
- address,
334
- chain: network,
335
- walletType: wallet
336
- };
337
- result.push(newAccount);
338
- }
339
- const supportedChains = supportedChainNames || [];
340
- accounts.forEach(account => {
341
- const {
342
- address,
343
- network
344
- } = walletsCore.readAccountAddress(account);
345
- const hasLimitation = supportedChains.length > 0;
346
- const isSupported = supportedChains.includes(network);
347
- const isUnknown = network === walletsShared.Network.Unknown;
348
- const notSupportedNetworkByWallet = hasLimitation && !isSupported && !isUnknown;
349
- // Here we check given `network` is not supported by wallet
350
- // And also the network is known.
351
- if (notSupportedNetworkByWallet) return;
352
- // In some cases we can handle unknown network by checking its address
353
- // pattern and act on it.
354
- // Example: showing our evm compatible netwrok when the uknown network is evem.
355
- // Otherwise, we stop executing this function.
356
- const isUknownAndEvmBased = network === walletsShared.Network.Unknown && walletsShared.isEvmAddress(address);
357
- if (isUnknown && !isUknownAndEvmBased) return;
358
- const isEvmBasedChain = evmBasedChains.includes(network);
359
- // If it's an evm network, we will add the address to all the evm chains.
360
- if (isEvmBasedChain || isUknownAndEvmBased) {
361
- // all evm chains are not supported in wallets, so we are adding
362
- // only to those that are supported by wallet.
363
- const evmChainsSupportedByWallet = supportedChains.filter(chain => evmBasedChains.includes(chain));
364
- evmChainsSupportedByWallet.forEach(network => {
365
- // EVM addresses are not case sensetive.
366
- // Some wallets like Binance-chain return some letters in uppercase which produces bugs in our wallet state.
367
- addAccount(network, address.toLowerCase());
368
- });
369
- } else {
370
- addAccount(network, address);
371
- }
372
- });
373
- return result;
374
- }
375
- function getRequiredChains(route) {
376
- const wallets = [];
377
- route?.result?.swaps.forEach(swap => {
378
- const currentStepFromBlockchain = swap.from.blockchain;
379
- const currentStepToBlockchain = swap.to.blockchain;
380
- let lastAddedWallet = wallets[wallets.length - 1];
381
- if (currentStepFromBlockchain != lastAddedWallet) wallets.push(currentStepFromBlockchain);
382
- lastAddedWallet = wallets[wallets.length - 1];
383
- if (currentStepToBlockchain != lastAddedWallet) wallets.push(currentStepToBlockchain);
384
- });
385
- return wallets;
386
- }
387
- function getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo) {
388
- const selectableWallets = connectedWallets.map(connectedWallet => ({
389
- address: connectedWallet.address,
390
- walletType: connectedWallet.walletType,
391
- chain: connectedWallet.chain,
392
- image: getWalletInfo(connectedWallet.walletType).img,
393
- name: getWalletInfo(connectedWallet.walletType).name,
394
- selected: !!selectedWallets.find(selectedWallet => selectedWallet.chain === connectedWallet.chain && selectedWallet.walletType === connectedWallet.walletType)
395
- }));
396
- return selectableWallets;
397
- }
398
- function getBalanceFromWallet(connectedWallets, chain, symbol, address) {
399
- if (connectedWallets.length === 0) return null;
400
- const selectedChainWallets = connectedWallets.filter(wallet => wallet.chain === chain);
401
- if (selectedChainWallets.length === 0) return null;
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;
403
- }
404
- function isAccountAndWalletMatched(account, connectedWallet) {
405
- return account.address === connectedWallet.address && account.chain === connectedWallet.chain;
406
- }
407
- function makeBalanceFor(wallet, retrivedBalance, tokens) {
408
- const {
409
- address,
410
- blockChain: chain,
411
- explorerUrl,
412
- balances = []
413
- } = retrivedBalance;
414
- return {
415
- address,
416
- chain,
417
- loading: false,
418
- error: false,
419
- explorerUrl,
420
- walletType: wallet.walletType,
421
- balances: balances?.map(tokenBalance => ({
422
- chain,
423
- symbol: tokenBalance.asset.symbol,
424
- ticker: tokenBalance.asset.symbol,
425
- address: tokenBalance.asset.address || null,
426
- rawAmount: tokenBalance.amount.amount,
427
- decimal: tokenBalance.amount.decimals,
428
- amount: new BigNumber__default(tokenBalance.amount.amount).shiftedBy(-tokenBalance.amount.decimals).toFixed(),
429
- logo: '',
430
- usdPrice: getUsdPrice(chain, tokenBalance.asset.symbol, tokenBalance.asset.address, tokens) || null
431
- })) || []
432
- };
433
- }
434
- function resetConnectedWalletState(connectedWallet) {
435
- return {
436
- ...connectedWallet,
437
- loading: false,
438
- error: true
439
- };
440
- }
441
- const calculateWalletUsdValue = connectedWallet => {
442
- const uniqueAccountAddresses = new Set();
443
- const uniqueBalane = connectedWallet?.reduce((acc, current) => {
444
- return acc.findIndex(i => i.address === current.address && i.chain === current.chain) === -1 ? [...acc, current] : acc;
445
- }, []);
446
- const modifiedWalletBlockchains = uniqueBalane?.map(chain => {
447
- const modifiedWalletBlockchain = {
448
- name: chain.chain,
449
- accounts: []
450
- };
451
- if (!uniqueAccountAddresses.has(chain.address)) {
452
- uniqueAccountAddresses.add(chain.address);
453
- }
454
- uniqueAccountAddresses.forEach(accountAddress => {
455
- if (chain.address === accountAddress) modifiedWalletBlockchain.accounts.push(chain);
456
- });
457
- return modifiedWalletBlockchain;
458
- });
459
- const total = numberToString(modifiedWalletBlockchains?.flatMap(b => b.accounts)?.flatMap(a => a?.balances)?.map(b => new BigNumber__default(b?.amount || ZERO).multipliedBy(b?.usdPrice || 0))?.reduce((a, b) => a.plus(b), ZERO) || ZERO).toString();
460
- return numberWithThousandSeperator(total);
461
- };
462
- function numberWithThousandSeperator(number) {
463
- var parts = number.toString().split('.');
464
- parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
465
- return parts.join('.');
466
- }
467
- const sortTokens = tokens => {
468
- let walletConnected = !!tokens.some(token => token.balance);
469
- if (!walletConnected) {
470
- return tokens.filter(token => !token.address).concat(tokens.filter(token => token.address && !token.isSecondaryCoin), tokens.filter(token => token.isSecondaryCoin));
471
- }
472
- return tokens.filter(token => !!token.balance).sort((tokenA, tokenB) => parseFloat(tokenB.balance?.usdValue || '0') - parseFloat(tokenA.balance?.usdValue || '0')).concat(tokens.filter(token => !token.balance && !token.isSecondaryCoin), tokens.filter(token => !token.balance && token.isSecondaryCoin));
473
- };
474
- const getUsdPrice = (blockchain, symbol, address, allTokens) => {
475
- const token = allTokens?.find(t => t.blockchain === blockchain && t.symbol?.toUpperCase() === symbol?.toUpperCase() && t.address === address);
476
- return token?.usdPrice || null;
477
- };
478
- const isExperimentalChain = (blockchains, wallet) => {
479
- const cosmosExperimentalChainInfo = walletsShared.getCosmosExperimentalChainInfo(Object.entries(blockchains).map(_ref => {
480
- let [, blockchainMeta] = _ref;
481
- return blockchainMeta;
482
- }).filter(rangoTypes.isCosmosBlockchain));
483
- return cosmosExperimentalChainInfo && !!cosmosExperimentalChainInfo[wallet];
484
- };
485
- const getKeplrCompatibleConnectedWallets = selectableWallets => {
486
- const connectedWalletTypes = new Set(selectableWallets.map(wallet => {
487
- return wallet.walletType;
488
- }));
489
- return walletsShared.KEPLR_COMPATIBLE_WALLETS.filter(compatibleWallet => connectedWalletTypes.has(compatibleWallet));
490
- };
491
- function getTokensWithBalance(tokens, connectedWallets) {
492
- return tokens.map(_ref2 => {
493
- let {
494
- balance,
495
- ...otherProps
496
- } = _ref2;
497
- const tokenAmount = numberToString(new BigNumber__default(getBalanceFromWallet(connectedWallets, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO));
498
- let tokenUsdValue = '';
499
- if (otherProps.usdPrice) tokenUsdValue = numberToString(new BigNumber__default(getBalanceFromWallet(connectedWallets, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO).multipliedBy(otherProps.usdPrice));
500
- return {
501
- ...otherProps,
502
- ...(tokenAmount !== '0' && {
503
- balance: {
504
- amount: tokenAmount,
505
- usdValue: tokenUsdValue
506
- }
507
- })
508
- };
509
- });
510
- }
511
- function getSortedTokens(chain, tokens, connectedWallets, otherChainTokens) {
512
- const fromChainEqueulsToToChain = chain?.name === otherChainTokens[0]?.name;
513
- if (fromChainEqueulsToToChain) return otherChainTokens;
514
- const filteredTokens = tokens.filter(token => token.blockchain === chain?.name);
515
- return sortTokens(getTokensWithBalance(filteredTokens, connectedWallets));
516
- }
517
- function tokensAreEqual(tokenA, tokenB) {
518
- return tokenA?.blockchain === tokenB?.blockchain && tokenA?.symbol === tokenB?.symbol && tokenA?.address === tokenB?.address;
519
- }
520
- function getDefaultToken(sortedTokens, otherToken) {
521
- let selectedToken;
522
- const firstToken = sortedTokens[0];
523
- const secondToken = sortedTokens[1];
524
- if (sortedTokens.length === 1) selectedToken = firstToken;else if (tokensAreEqual(firstToken, otherToken)) selectedToken = secondToken;else selectedToken = firstToken;
525
- return selectedToken;
526
- }
527
- function sortWalletsBasedOnState(wallets) {
528
- return wallets.sort((a, b) => Number(b.state === ui.WalletState.CONNECTED) - Number(a.state === ui.WalletState.CONNECTED) || Number(b.state === ui.WalletState.DISCONNECTED || b.state === ui.WalletState.CONNECTING) - Number(a.state === ui.WalletState.DISCONNECTED || a.state === ui.WalletState.CONNECTING));
529
- }
530
-
531
- function getOutputRatio(inputUsdValue, outputUsdValue) {
532
- if (inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) return 0;
533
- return outputUsdValue.div(inputUsdValue).minus(1).multipliedBy(100);
534
- }
535
- function outputRatioHasWarning(inputUsdValue, outputRatio) {
536
- return parseInt(outputRatio.toFixed(2) || '0') <= -10 && inputUsdValue.gte(new BigNumber__default(400)) || parseInt(outputRatio.toFixed(2) || '0') <= -5 && inputUsdValue.gte(new BigNumber__default(1000));
537
- }
538
- function hasLimitError(bestRoute) {
539
- return (bestRoute?.result?.swaps || []).filter(swap => {
540
- const minimum = !!swap.fromAmountMinValue ? new BigNumber__default(swap.fromAmountMinValue) : null;
541
- const maximum = !!swap.fromAmountMaxValue ? new BigNumber__default(swap.fromAmountMaxValue) : null;
542
- const isExclusive = swap.fromAmountRestrictionType === 'EXCLUSIVE';
543
- if (isExclusive) {
544
- return minimum?.gte(swap.fromAmount) || maximum?.lte(swap.fromAmount);
545
- } else {
546
- return minimum?.gt(swap.fromAmount) || maximum?.lt(swap.fromAmount);
547
- }
548
- }).length > 0;
549
- }
550
- function LimitErrorMessage(bestRoute) {
551
- if (!bestRoute) return {
552
- swap: null,
553
- fromAmountRangeError: '',
554
- recommendation: ''
555
- };
556
- const swap = (bestRoute?.result?.swaps || []).filter(swap => {
557
- const minimum = !!swap.fromAmountMinValue ? new BigNumber__default(swap.fromAmountMinValue) : null;
558
- const maximum = !!swap.fromAmountMaxValue ? new BigNumber__default(swap.fromAmountMaxValue) : null;
559
- const isExclusive = swap.fromAmountRestrictionType === 'EXCLUSIVE';
560
- if (isExclusive) {
561
- return minimum?.gte(swap.fromAmount) || maximum?.lte(swap.fromAmount);
562
- } else {
563
- return minimum?.gt(swap.fromAmount) || maximum?.lt(swap.fromAmount);
564
- }
565
- })[0];
566
- if (!swap) return {
567
- swap: null,
568
- fromAmountRangeError: '',
569
- recommendation: ''
570
- };
571
- const minimum = !!swap.fromAmountMinValue ? new BigNumber__default(swap.fromAmountMinValue) : null;
572
- const maximum = !!swap.fromAmountMaxValue ? new BigNumber__default(swap.fromAmountMaxValue) : null;
573
- const isExclusive = swap.fromAmountRestrictionType === 'EXCLUSIVE';
574
- let fromAmountRangeError = '';
575
- let recommendation = '';
576
- if (!isExclusive && !!minimum && minimum.gt(swap.fromAmount)) {
577
- fromAmountRangeError = `Required: >= ${numberToString(minimum)} ${swap.from.symbol}`;
578
- recommendation = 'Increase your swap amount';
579
- } else if (isExclusive && !!minimum && minimum.gte(swap.fromAmount)) {
580
- fromAmountRangeError = `Required: > ${numberToString(minimum)} ${swap.from.symbol}`;
581
- recommendation = 'Increase your swap amount';
582
- }
583
- if (!isExclusive && !!maximum && maximum.lt(swap.fromAmount)) {
584
- fromAmountRangeError = `Required: <= ${numberToString(maximum)} ${swap.from.symbol}`;
585
- recommendation = 'Decrease your swap amount';
586
- } else if (isExclusive && !!maximum && maximum.lte(swap.fromAmount)) {
587
- fromAmountRangeError = `Required: < ${numberToString(maximum)} ${swap.from.symbol}`;
588
- recommendation = 'Decrease your swap amount';
589
- }
590
- return {
591
- swap,
592
- fromAmountRangeError,
593
- recommendation
594
- };
595
- }
596
- function getSwapButtonState(loadingMetaStatus, connectedWallets, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount) {
597
- if (loadingMetaStatus !== 'success') return {
598
- title: 'Connect Wallet',
599
- disabled: true
600
- };
601
- if (connectedWallets.length == 0) return {
602
- title: 'Connect Wallet',
603
- disabled: false
604
- };
605
- if (loading) return {
606
- title: 'Finding Best Route...',
607
- disabled: true
608
- };else if (!inputAmount || inputAmount === '0') return {
609
- title: 'Enter an amount',
610
- disabled: true
611
- };else if (!bestRoute || !bestRoute.result) return {
612
- title: 'Swap',
613
- disabled: true
614
- };else if (hasLimitError) return {
615
- title: 'Limit Error',
616
- disabled: true
617
- };else if (highValueLoss) return {
618
- title: 'Price impact is too high!',
619
- disabled: true
620
- };else if (priceImpactCanNotBeComputed) return {
621
- title: 'USD price is unknown, price impact might be high!',
622
- disabled: false,
623
- hasWarning: true
624
- };else if (needsToWarnEthOnPath) return {
625
- title: 'The route goes through Ethereum. Continue?',
626
- disabled: false,
627
- hasWarning: true
628
- };else return {
629
- title: 'Swap',
630
- disabled: false
631
- };
632
- }
633
- function canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue) {
634
- return !((inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) && !!bestRoute?.result && !!inputAmount && inputAmount !== '0' && parseFloat(inputAmount || '0') !== 0 && !!bestRoute.result);
635
- }
636
- function requiredWallets(route) {
637
- const wallets = [];
638
- route?.result?.swaps.forEach(swap => {
639
- const currentStepFromBlockchain = swap.from.blockchain;
640
- const currentStepToBlockchain = swap.to.blockchain;
641
- let lastAddedWallet = wallets[wallets.length - 1];
642
- if (currentStepFromBlockchain != lastAddedWallet) wallets.push(currentStepFromBlockchain);
643
- lastAddedWallet = wallets[wallets.length - 1];
644
- if (currentStepToBlockchain != lastAddedWallet) wallets.push(currentStepToBlockchain);
645
- });
646
- return wallets;
647
- }
648
- const getUsdPrice$1 = (blockchain, symbol, address, allTokens) => {
649
- const token = allTokens?.find(t => t.blockchain === blockchain && t.symbol?.toUpperCase() === symbol?.toUpperCase() && t.address === address);
650
- return token?.usdPrice || null;
651
- };
652
- function getUsdFeeOfStep(step, allTokens) {
653
- let totalFeeInUsd = ZERO;
654
- for (let i = 0; i < step.fee.length; i++) {
655
- const fee = step.fee[i];
656
- if (fee.expenseType === 'DECREASE_FROM_OUTPUT') continue;
657
- const unitPrice = getUsdPrice$1(fee.asset.blockchain, fee.asset.symbol, fee.asset.address, allTokens);
658
- totalFeeInUsd = totalFeeInUsd.plus(new BigNumber__default(fee.amount).multipliedBy(unitPrice || 0));
659
- }
660
- return totalFeeInUsd;
661
- }
662
- function getTotalFeeInUsd(bestRoute, allTokens) {
663
- return bestRoute?.result?.swaps.reduce((totalFee, step) => totalFee.plus(getUsdFeeOfStep(step, allTokens)), ZERO) || null;
664
- }
665
- function hasHighFee(totalFeeInUsd) {
666
- if (!totalFeeInUsd) return false;
667
- return !totalFeeInUsd.lt(new BigNumber__default(30));
668
- }
669
- function getMinRequiredSlippage(route) {
670
- const slippages = route.result?.swaps.map(slippage => slippage.recommendedSlippage);
671
- return slippages?.map(s => s?.slippage || '0')?.filter(s => parseFloat(s) > 0)?.sort((a, b) => parseFloat(b) - parseFloat(a))?.find(() => true) || null;
672
- }
673
- function hasProperSlippage(userSlippage, minRequiredSlippage) {
674
- if (!minRequiredSlippage) return true;
675
- return parseFloat(userSlippage) >= parseFloat(minRequiredSlippage);
676
- }
677
- function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, selectedWallets, disabledLiquiditySources, slippage, affiliateRef, initialRoute) {
678
- const selectedWalletsMap = selectedWallets.reduce((selectedWalletsMap, selectedWallet) => (selectedWalletsMap[selectedWallet.chain] = selectedWallet.address, selectedWalletsMap), {});
679
- const connectedWallets = [];
680
- wallets.forEach(wallet => {
681
- const chainAndAccounts = connectedWallets.find(connectedWallet => connectedWallet.blockchain === wallet.chain);
682
- if (!!chainAndAccounts) chainAndAccounts.addresses.push(wallet.address);else connectedWallets.push({
683
- blockchain: wallet.chain,
684
- addresses: [wallet.address]
685
- });
686
- });
687
- const checkPrerequisites = !!initialRoute;
688
- const filteredBlockchains = removeDuplicateFrom((initialRoute?.result?.swaps || []).reduce((blockchains, swap) => (blockchains.push(swap.from.blockchain, swap.to.blockchain), blockchains), []));
689
- const requestBody = {
690
- amount: inputAmount.toString(),
691
- affiliateRef,
692
- checkPrerequisites,
693
- from: {
694
- address: fromToken.address,
695
- blockchain: fromToken.blockchain,
696
- symbol: fromToken.symbol
697
- },
698
- to: {
699
- address: toToken.address,
700
- blockchain: toToken.blockchain,
701
- symbol: toToken.symbol
702
- },
703
- connectedWallets,
704
- selectedWallets: selectedWalletsMap,
705
- swapperGroups: disabledLiquiditySources,
706
- swappersGroupsExclude: true,
707
- slippage: slippage.toString(),
708
- ...(checkPrerequisites && {
709
- blockchains: filteredBlockchains
710
- })
711
- };
712
- return requestBody;
713
- }
714
- function getWalletsForNewSwap(selectedWallets) {
715
- const wallets = selectedWallets.reduce((selectedWalletsMap, selectedWallet) => (selectedWalletsMap[selectedWallet.chain] = {
716
- address: selectedWallet.address,
717
- walletType: selectedWallet.walletType
718
- }, selectedWalletsMap), {});
719
- return wallets;
720
- }
721
- function getRouteOutputAmount(route) {
722
- return route?.result?.outputAmount || null;
723
- }
724
- function getPercentageChange(oldValue, newValue) {
725
- if (!oldValue || !newValue) return null;
726
- return new BigNumber__default(newValue).div(new BigNumber__default(oldValue)).minus(1).multipliedBy(100);
727
- }
728
- function isOutputAmountChangedALot(oldRoute, newRoute) {
729
- const oldOutputAmount = getRouteOutputAmount(oldRoute);
730
- const newOutputAmount = getRouteOutputAmount(newRoute);
731
- if (!oldOutputAmount || !newOutputAmount) return false;
732
- const percentageChange = getPercentageChange(oldOutputAmount, newOutputAmount);
733
- if (!percentageChange) return true;
734
- return percentageChange.toNumber() <= -1;
735
- }
736
- function getBalanceWarnings(route, selectedWallets) {
737
- const fee = route.validationStatus;
738
- const requiredWallets = getRequiredChains(route);
739
- const walletsSortedByRequiredWallets = selectedWallets.sort((selectedWallet1, selectedWallet2) => requiredWallets.indexOf(selectedWallet1.chain) - requiredWallets.indexOf(selectedWallet2.chain));
740
- return walletsSortedByRequiredWallets.flatMap(wallet => getRequiredBalanceOfWallet(wallet, fee) || []).filter(asset => !asset.ok).map(asset => {
741
- const symbol = asset.asset.symbol;
742
- const currentAmount = numberToString(new BigNumber__default(asset.currentAmount.amount).shiftedBy(-asset.currentAmount.decimals), 8);
743
- const requiredAmount = numberToString(new BigNumber__default(asset.requiredAmount.amount).shiftedBy(-asset.requiredAmount.decimals), 8);
744
- let reason = '';
745
- if (asset.reason === 'FEE') reason = ' for network fee';
746
- if (asset.reason === 'INPUT_ASSET') reason = ' for swap';
747
- if (asset.reason === 'FEE_AND_INPUT_ASSET') reason = ' for input and network fee';
748
- const warningMessage = `Needs ≈ ${requiredAmount} ${symbol}${reason}, but you have ${currentAmount} ${symbol} in your ${asset.asset.blockchain} wallet.`;
749
- return warningMessage;
750
- });
751
- }
752
- function calcOutputUsdValue(outputAmount, tokenPrice) {
753
- const amount = !!outputAmount ? new BigNumber__default(outputAmount) : ZERO;
754
- return amount.multipliedBy(tokenPrice || 0);
755
- }
756
- function isNetworkStatusInWarningState(pendingSwapStep) {
757
- return !!pendingSwapStep && pendingSwapStep.networkStatus !== null && pendingSwapStep.networkStatus !== queueManagerRangoPreset.PendingSwapNetworkStatus.NetworkChanged;
758
- }
759
- function getSwapMessages(pendingSwap, currentStep) {
760
- const textForRemove = 'bellow button or';
761
- let message = pendingSwap.extraMessage;
762
- let detailedMessage = pendingSwap.extraMessageDetail;
763
- if (pendingSwap.networkStatusExtraMessageDetail?.includes(textForRemove)) {
764
- pendingSwap.networkStatusExtraMessageDetail = pendingSwap.networkStatusExtraMessageDetail.replace(textForRemove, '');
765
- }
766
- const networkWarningState = isNetworkStatusInWarningState(currentStep);
767
- if (networkWarningState) {
768
- message = pendingSwap.networkStatusExtraMessage || '';
769
- detailedMessage = pendingSwap.networkStatusExtraMessageDetail || '';
770
- switch (currentStep?.networkStatus) {
771
- case queueManagerRangoPreset.PendingSwapNetworkStatus.WaitingForConnectingWallet:
772
- message = message || 'Waiting for connecting wallet';
773
- break;
774
- case queueManagerRangoPreset.PendingSwapNetworkStatus.WaitingForQueue:
775
- message = message || 'Waiting for other running tasks to be finished';
776
- break;
777
- case queueManagerRangoPreset.PendingSwapNetworkStatus.WaitingForNetworkChange:
778
- message = message || 'Waiting for changing wallet network';
779
- break;
780
- }
781
- }
782
- detailedMessage = detailedMessage || '';
783
- message = message || '';
784
- const isRpc = message?.indexOf('code') !== -1 && message?.indexOf('reason') !== -1;
785
- return {
786
- shortMessage: message,
787
- detailedMessage: {
788
- content: detailedMessage,
789
- long: isRpc
790
- }
791
- };
792
- }
793
- function getLastConvertedTokenInFailedSwap(pendingSwap) {
794
- let resultToken = null;
795
- if (pendingSwap.status === 'failed') {
796
- const lastSuccessStep = pendingSwap.steps.slice().reverse().filter(step => step.status === 'success')[0];
797
- if (lastSuccessStep) {
798
- resultToken = {
799
- blockchain: lastSuccessStep.toBlockchain,
800
- symbol: lastSuccessStep.toSymbol,
801
- outputAmount: lastSuccessStep.outputAmount,
802
- address: lastSuccessStep.toSymbolAddress
803
- };
804
- }
805
- }
806
- return resultToken;
807
- }
808
- function shouldRetrySwap(pendingSwap) {
809
- return pendingSwap.status === 'failed' && !!pendingSwap.finishTime && new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000;
810
- }
811
-
812
- const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector((set, get) => ({
813
- connectedWallets: [],
814
- selectedWallets: [],
815
- connectWallet: accounts => {
816
- const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
817
- set(state => ({
818
- connectedWallets: state.connectedWallets.filter(wallet => wallet.walletType !== accounts[0].walletType).concat(accounts.map(account => ({
819
- balances: [],
820
- address: account.address,
821
- chain: account.chain,
822
- loading: true,
823
- walletType: account.walletType,
824
- error: false,
825
- explorerUrl: null
826
- })))
827
- }));
828
- accounts.forEach(async account => getOneOfWalletsDetails(account));
829
- },
830
- disconnectWallet: walletType => {
831
- set(state => ({
832
- connectedWallets: state.connectedWallets.filter(balance => balance.walletType !== walletType),
833
- selectedWallets: state.selectedWallets.filter(wallet => wallet.walletType != walletType)
834
- }));
835
- },
836
- initSelectedWallets: () => set(state => {
837
- const requiredChains = getRequiredChains(useBestRouteStore.getState().bestRoute);
838
- const connectedWallets = state.connectedWallets;
839
- const selectedWallets = [];
840
- requiredChains.forEach(chain => {
841
- const anyWalletSelected = !!state.selectedWallets.find(wallet => wallet.chain === chain);
842
- if (!anyWalletSelected) {
843
- const firstWalletWithMatchedChain = connectedWallets.find(wallet => wallet.chain === chain);
844
- if (!!firstWalletWithMatchedChain) selectedWallets.push({
845
- address: firstWalletWithMatchedChain.address,
846
- chain: firstWalletWithMatchedChain.chain,
847
- walletType: firstWalletWithMatchedChain.walletType
848
- });
849
- }
850
- });
851
- return {
852
- selectedWallets: state.selectedWallets.concat(selectedWallets)
853
- };
854
- }),
855
- setSelectedWallet: wallet => set(state => ({
856
- selectedWallets: state.selectedWallets.filter(selectedWallet => selectedWallet.chain !== wallet.chain).concat({
857
- chain: wallet.chain,
858
- address: wallet.address,
859
- walletType: wallet.walletType
860
- })
861
- })),
862
- clearConnectedWallet: () => set(() => ({
863
- connectedWallets: [],
864
- selectedWallets: []
865
- })),
866
- getOneOfWalletsDetails: async account => {
867
- const tokens = useMetaStore.getState().meta.tokens;
868
- set(state => ({
869
- connectedWallets: state.connectedWallets.map(balance => {
870
- return balance.address === account.address && balance.chain === account.chain ? {
871
- ...balance,
872
- loading: true
873
- } : balance;
874
- })
875
- }));
876
- try {
877
- const response = await httpService().getWalletsDetails([{
878
- address: account.address,
879
- blockchain: account.chain
880
- }]);
881
- const retrivedBalance = response.wallets[0];
882
- if (retrivedBalance) {
883
- set(state => ({
884
- connectedWallets: state.connectedWallets.map(connectedWallet => {
885
- return isAccountAndWalletMatched(account, connectedWallet) ? makeBalanceFor(account, retrivedBalance, tokens) : connectedWallet;
886
- })
887
- }));
888
- } else throw new Error('Wallet not found');
889
- } catch (error) {
890
- set(state => ({
891
- connectedWallets: state.connectedWallets.map(balance => {
892
- return isAccountAndWalletMatched(account, balance) ? resetConnectedWalletState(balance) : balance;
893
- })
894
- }));
895
- }
896
- }
897
- }))));
898
- useWalletsStore.subscribe(state => state.connectedWallets, connectedWallets => {
899
- useBestRouteStore.setState(_ref => {
900
- let {
901
- sourceTokens,
902
- destinationTokens
903
- } = _ref;
904
- const sourceTokensWithBalance = getTokensWithBalance(sourceTokens, connectedWallets);
905
- const destinationTokensWithBalance = getTokensWithBalance(destinationTokens, connectedWallets);
906
- return {
907
- sourceTokens: sortTokens(sourceTokensWithBalance),
908
- destinationTokens: sortTokens(destinationTokensWithBalance)
909
- };
910
- });
911
- }, {
912
- equalityFn: shallow.shallow
913
- });
914
- const fetchingBalanceSelector = state => !!state.connectedWallets.find(wallet => wallet.loading);
915
-
916
- const getUsdValue = (token, amount) => new BigNumber__default(amount || ZERO).multipliedBy(token?.usdPrice || 0);
917
- const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
918
- fromChain: null,
919
- fromToken: null,
920
- inputAmount: '',
921
- outputAmount: null,
922
- inputUsdValue: new BigNumber__default(0),
923
- outputUsdValue: new BigNumber__default(0),
924
- toChain: null,
925
- toToken: null,
926
- bestRoute: null,
927
- loading: false,
928
- error: '',
929
- sourceTokens: [],
930
- destinationTokens: [],
931
- setBestRoute: bestRoute => set(state => {
932
- let outputAmount = null;
933
- let outputUsdValue = ZERO;
934
- if (!isPositiveNumber(state.inputAmount)) return {};
935
- if (!!bestRoute) {
936
- outputAmount = !!bestRoute.result?.outputAmount ? new BigNumber__default(bestRoute.result?.outputAmount) : null;
937
- outputUsdValue = calcOutputUsdValue(bestRoute.result?.outputAmount, getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice);
938
- }
939
- return {
940
- bestRoute,
941
- ...(!!bestRoute && {
942
- outputAmount,
943
- outputUsdValue
944
- })
945
- };
946
- }),
947
- resetRoute: () => set(() => ({
948
- loading: true,
949
- error: '',
950
- bestRoute: null,
951
- outputAmount: null,
952
- outputUsdValue: new BigNumber__default(0)
953
- })),
954
- setFromChain: (chain, setDefaultToken) => {
955
- set(state => {
956
- if (state.fromChain?.name === chain?.name) return {};
957
- const tokens = useMetaStore.getState().meta.tokens;
958
- const connectedWallets = useWalletsStore.getState().connectedWallets;
959
- const sortedTokens = getSortedTokens(chain, tokens, connectedWallets, state.destinationTokens);
960
- const fromToken = getDefaultToken(sortedTokens, state.toToken);
961
- return {
962
- fromChain: chain,
963
- sourceTokens: sortedTokens,
964
- ...(setDefaultToken && {
965
- fromToken
966
- }),
967
- ...(!!state.inputAmount && {
968
- inputUsdValue: getUsdValue(fromToken, state.inputAmount)
969
- })
970
- };
971
- });
972
- },
973
- setFromToken: token => set(state => ({
974
- fromToken: token,
975
- ...(!!state.inputAmount && {
976
- inputUsdValue: getUsdValue(token, state.inputAmount)
977
- })
978
- })),
979
- setToChain: (chain, setDefaultToken) => {
980
- set(state => {
981
- if (state.toChain?.name === chain?.name) return {};
982
- const tokens = useMetaStore.getState().meta.tokens;
983
- const connectedWallets = useWalletsStore.getState().connectedWallets;
984
- const sortedTokens = getSortedTokens(chain, tokens, connectedWallets, state.destinationTokens);
985
- return {
986
- toChain: chain,
987
- destinationTokens: sortedTokens,
988
- ...(setDefaultToken && {
989
- toToken: getDefaultToken(sortedTokens, state.fromToken)
990
- })
991
- };
992
- });
993
- },
994
- setToToken: token => set(() => ({
995
- toToken: token
996
- })),
997
- setInputAmount: amount => {
998
- set(state => ({
999
- inputAmount: amount,
1000
- ...(!amount && {
1001
- outputAmount: new BigNumber__default(0),
1002
- outputUsdValue: new BigNumber__default(0),
1003
- bestRoute: null,
1004
- error: ''
1005
- }),
1006
- ...(!!state.fromToken && {
1007
- inputUsdValue: getUsdValue(state.fromToken, amount)
1008
- })
1009
- }));
1010
- },
1011
- retry: pendingSwap => {
1012
- const {
1013
- tokens,
1014
- blockchains
1015
- } = useMetaStore.getState().meta;
1016
- const connectedWallets = useWalletsStore.getState().connectedWallets;
1017
- const failedIndex = pendingSwap.status === 'failed' ? pendingSwap.steps.findIndex(s => s.status === 'failed') : null;
1018
- if (failedIndex === null || failedIndex < 0) return;
1019
- const firstStep = pendingSwap.steps[0];
1020
- const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
1021
- const fromChain = blockchains.find(blockchain => blockchain.name === firstStep.fromBlockchain) || null;
1022
- const toChain = blockchains.find(blockchain => blockchain.name === lastStep.toBlockchain) || null;
1023
- const fromToken = tokens.find(token => tokensAreEqual(token, {
1024
- blockchain: firstStep.fromBlockchain,
1025
- symbol: firstStep.fromSymbol,
1026
- address: firstStep.fromSymbolAddress
1027
- }));
1028
- const toToken = tokens.find(token => tokensAreEqual(token, {
1029
- blockchain: lastStep.toBlockchain,
1030
- symbol: lastStep.toSymbol,
1031
- address: lastStep.toSymbolAddress
1032
- }));
1033
- const sortedSourceTokens = getSortedTokens(fromChain, tokens, connectedWallets, []);
1034
- const sortedDestinationTokens = getSortedTokens(toChain, tokens, connectedWallets, []);
1035
- const inputAmount = pendingSwap.inputAmount;
1036
- set({
1037
- fromChain,
1038
- fromToken,
1039
- inputAmount,
1040
- outputAmount: null,
1041
- inputUsdValue: getUsdValue(fromToken || null, inputAmount),
1042
- outputUsdValue: new BigNumber__default(0),
1043
- toChain,
1044
- toToken,
1045
- bestRoute: null,
1046
- loading: false,
1047
- error: '',
1048
- sourceTokens: sortedSourceTokens,
1049
- destinationTokens: sortedDestinationTokens
1050
- });
1051
- },
1052
- switchFromAndTo: () => set(state => ({
1053
- fromChain: state.toChain,
1054
- fromToken: state.toToken,
1055
- toChain: state.fromChain,
1056
- toToken: state.fromToken,
1057
- sourceTokens: state.destinationTokens,
1058
- destinationTokens: state.sourceTokens,
1059
- inputAmount: state.outputAmount?.toString() || '',
1060
- inputUsdValue: getUsdValue(state.toToken, state.outputAmount?.toString() || '')
1061
- }))
1062
- }))));
1063
- const bestRoute = (bestRouteStore, settingsStore) => {
1064
- let abortController = null;
1065
- const fetchBestRoute = () => {
1066
- const {
1067
- fromToken,
1068
- toToken,
1069
- inputAmount,
1070
- resetRoute
1071
- } = bestRouteStore.getState();
1072
- const {
1073
- slippage,
1074
- customSlippage,
1075
- disabledLiquiditySources,
1076
- affiliateRef
1077
- } = settingsStore.getState();
1078
- if (!fromToken || !toToken || !isPositiveNumber(inputAmount)) return;
1079
- abortController?.abort();
1080
- abortController = new AbortController();
1081
- const userSlippage = !!customSlippage ? customSlippage : slippage;
1082
- const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, affiliateRef);
1083
- if (!bestRouteStore.getState().loading) {
1084
- resetRoute();
1085
- }
1086
- httpService().getBestRoute(requestBody, {
1087
- signal: abortController.signal
1088
- }).then(res => {
1089
- const {
1090
- setBestRoute
1091
- } = bestRouteStore.getState();
1092
- setBestRoute(res);
1093
- bestRouteStore.setState({
1094
- loading: false
1095
- });
1096
- abortController = null;
1097
- }).catch(error => {
1098
- if (error.code === 'ERR_CANCELED') return;
1099
- bestRouteStore.setState({
1100
- error: error.message,
1101
- loading: false
1102
- });
1103
- });
1104
- };
1105
- const debouncedFetchBestRoute = debounce(fetchBestRoute, 600);
1106
- const bestRouteParamsListener = () => {
1107
- const {
1108
- fromToken,
1109
- toToken,
1110
- inputAmount,
1111
- inputUsdValue,
1112
- resetRoute
1113
- } = useBestRouteStore.getState();
1114
- if (!isPositiveNumber(inputAmount) || inputUsdValue.eq(0)) return bestRouteStore.setState({
1115
- loading: false
1116
- });
1117
- if (tokensAreEqual(fromToken, toToken)) return bestRouteStore.setState({
1118
- loading: false,
1119
- bestRoute: null,
1120
- outputAmount: new BigNumber__default(inputAmount),
1121
- outputUsdValue: inputUsdValue
1122
- });
1123
- if (!bestRouteStore.getState().loading) resetRoute();
1124
- debouncedFetchBestRoute();
1125
- };
1126
- useBestRouteStore.subscribe(state => ({
1127
- fromChain: state.fromChain,
1128
- fromToken: state.fromToken,
1129
- toChain: state.toChain,
1130
- toToken: state.toToken,
1131
- inputAmount: state.inputAmount
1132
- }), bestRouteParamsListener, {
1133
- equalityFn: (prevState, currentState) => {
1134
- if (isRouteParametersChanged({
1135
- store: 'bestRoute',
1136
- prevState,
1137
- currentState
1138
- })) return false;else return true;
1139
- }
1140
- });
1141
- useSettingsStore.subscribe(state => ({
1142
- slippage: state.slippage,
1143
- customSlippage: state.customSlippage,
1144
- disabledLiquiditySources: state.disabledLiquiditySources,
1145
- infiniteApprove: state.infiniteApprove
1146
- }), bestRouteParamsListener, {
1147
- equalityFn: (prevState, currentState) => {
1148
- if (isRouteParametersChanged({
1149
- store: 'settings',
1150
- prevState,
1151
- currentState
1152
- })) return false;else return true;
1153
- }
1154
- });
1155
- return {
1156
- fetchBestRoute
1157
- };
1158
- };
1159
- const {
1160
- fetchBestRoute
1161
- } = /*#__PURE__*/bestRoute(useBestRouteStore, useSettingsStore);
1162
-
1163
- var SearchParams;
1164
- (function (SearchParams) {
1165
- SearchParams["FROM_CHAIN"] = "fromChain";
1166
- SearchParams["FROM_TOKEN"] = "fromToken";
1167
- SearchParams["TO_CHAIN"] = "toChain";
1168
- SearchParams["TO_TOKEN"] = "toToken";
1169
- SearchParams["FROM_AMOUNT"] = "fromAmount";
1170
- })(SearchParams || (SearchParams = {}));
1171
-
1172
- const navigationRoutes = {
1173
- home: '/',
1174
- fromChain: 'from-chain',
1175
- fromToken: 'from-token',
1176
- toChain: 'to-chain',
1177
- toToken: 'to-token',
1178
- settings: 'settings',
1179
- liquiditySources: '/settings/liquidity-sources',
1180
- swaps: 'swaps',
1181
- wallets: 'wallets',
1182
- confirmSwap: 'confirm-swap',
1183
- swapDetails: 'swaps/:requestId'
1184
- };
1185
-
1186
- const useUiStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()(set => ({
1187
- connectWalletsButtonDisabled: false,
1188
- selectedSwapRequestId: null,
1189
- currentPage: '',
1190
- toggleConnectWalletsButton: () => set(state => ({
1191
- connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled
1192
- })),
1193
- setSelectedSwap: requestId => set({
1194
- selectedSwapRequestId: requestId
1195
- }),
1196
- setCurrentPage: path => set({
1197
- currentPage: path
1198
- })
1199
- })));
1200
-
1201
- function UpdateUrl() {
1202
- const firstRender = React.useRef(true);
1203
- const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
1204
- const location = reactRouterDom.useLocation();
1205
- const firstRenderSearchParams = React.useRef(location.search);
1206
- const searchParamsRef = React.useRef({});
1207
- const fromChain = useBestRouteStore.use.fromChain();
1208
- const toChain = useBestRouteStore.use.toChain();
1209
- const fromToken = useBestRouteStore.use.fromToken();
1210
- const toToken = useBestRouteStore.use.toToken();
1211
- const setFromChain = useBestRouteStore.use.setFromChain();
1212
- const setFromToken = useBestRouteStore.use.setFromToken();
1213
- const setToChain = useBestRouteStore.use.setToChain();
1214
- const setToToken = useBestRouteStore.use.setToToken();
1215
- const inputAmount = useBestRouteStore.use.inputAmount();
1216
- const setInputAmount = useBestRouteStore.use.setInputAmount();
1217
- const loadingStatus = useMetaStore.use.loadingStatus();
1218
- const {
1219
- blockchains,
1220
- tokens
1221
- } = useMetaStore.use.meta();
1222
- const setSelectedSwap = useUiStore.use.setSelectedSwap();
1223
- React.useEffect(() => {
1224
- const params = {};
1225
- reactRouterDom.createSearchParams(firstRenderSearchParams.current).forEach((value, key) => {
1226
- params[key] = value;
1227
- });
1228
- searchParamsRef.current = params;
1229
- const requestId = location.pathname.split(navigationRoutes.swaps + '/')[1] || null;
1230
- if (requestId) setSelectedSwap(requestId);
1231
- }, []);
1232
- React.useEffect(() => {
1233
- if (!firstRender.current) {
1234
- let fromChainString = '',
1235
- fromTokenString = '',
1236
- toChainString = '',
1237
- toTokenString = '',
1238
- fromAmount = '';
1239
- if (loadingStatus !== 'success') {
1240
- fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
1241
- fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
1242
- toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
1243
- toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
1244
- fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT] || inputAmount;
1245
- } else {
1246
- if (location.state === 'redirect') return;
1247
- fromChainString = fromChain?.name || '';
1248
- fromTokenString = (fromToken?.symbol || '') + (fromToken?.address ? `--${fromToken?.address}` : '');
1249
- toChainString = toChain?.name || '';
1250
- toTokenString = (toToken?.symbol || '') + (toToken?.address ? `--${toToken?.address}` : '');
1251
- fromAmount = inputAmount;
1252
- }
1253
- setSearchParams({
1254
- ...(fromChainString && {
1255
- [SearchParams.FROM_CHAIN]: fromChainString
1256
- }),
1257
- ...(fromTokenString && {
1258
- [SearchParams.FROM_TOKEN]: fromTokenString
1259
- }),
1260
- ...(toChainString && {
1261
- [SearchParams.TO_CHAIN]: toChainString
1262
- }),
1263
- ...(toTokenString && {
1264
- [SearchParams.TO_TOKEN]: toTokenString
1265
- }),
1266
- ...(fromAmount && {
1267
- [SearchParams.FROM_AMOUNT]: fromAmount.toString()
1268
- })
1269
- }, {
1270
- replace: true
1271
- });
1272
- }
1273
- firstRender.current = false;
1274
- }, [location.pathname, inputAmount, fromChain, fromToken, toChain, toToken]);
1275
- React.useEffect(() => {
1276
- if (loadingStatus === 'success') {
1277
- const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
1278
- const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
1279
- const toChainString = searchParams.get(SearchParams.TO_CHAIN);
1280
- const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
1281
- const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
1282
- const fromChain = blockchains.find(blockchain => blockchain.name === fromChainString);
1283
- const fromToken = searchParamsToToken(tokens, fromTokenString, fromChain || null);
1284
- const toChain = blockchains.find(blockchain => blockchain.name === toChainString);
1285
- const toToken = searchParamsToToken(tokens, toTokenString, toChain || null);
1286
- if (!!fromChain) {
1287
- setFromChain(fromChain);
1288
- if (!!fromToken) setFromToken(fromToken);
1289
- }
1290
- if (!!toChain) {
1291
- setToChain(toChain);
1292
- if (!!toToken) setToToken(toToken);
1293
- }
1294
- if (fromAmount) setInputAmount(fromAmount);
1295
- }
1296
- }, [loadingStatus]);
1297
- return null;
1298
- }
1299
-
1300
- function AppRouter(_ref) {
1301
- let {
1302
- children,
1303
- ...props
1304
- } = _ref;
1305
- const isRouterInContext = reactRouter.useInRouterContext();
1306
- const Router = isRouterInContext ? React.Fragment : reactRouter.MemoryRouter;
1307
- const {
1308
- blockchains
1309
- } = useMetaStore.use.meta();
1310
- const evmChains = blockchains.filter(rangoTypes.isEvmBlockchain);
1311
- queueManagerRangoPreset.useQueueManager({
1312
- lastConnectedWallet: props.lastConnectedWallet,
1313
- clearDisconnectedWallet: props.clearDisconnectedWallet,
1314
- disconnectedWallet: props.disconnectedWallet,
1315
- evmChains,
1316
- notifier: () => {}
1317
- });
1318
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(Router, null, children), isRouterInContext && React__default.createElement(UpdateUrl, null));
1319
- }
1320
-
1321
- function useNavigateBack() {
1322
- const isRouterInContext = reactRouterDom.useInRouterContext();
1323
- const navigate = reactRouterDom.useNavigate();
1324
- const navigateBackFrom = currentRoute => {
1325
- if (currentRoute === navigationRoutes.swapDetails) return navigate('/' + navigationRoutes.swaps, {
1326
- replace: true
1327
- });
1328
- if (!isRouterInContext || window.history.state && window.history.state.idx > 0) navigate(-1);else {
1329
- if ([navigationRoutes.fromChain, navigationRoutes.fromToken, navigationRoutes.toChain, navigationRoutes.toToken, navigationRoutes.settings, navigationRoutes.wallets, navigationRoutes.swaps, navigationRoutes.confirmSwap].includes(currentRoute)) navigate(navigationRoutes.home, {
1330
- replace: true
1331
- });else if (currentRoute === navigationRoutes.liquiditySources) navigate('/' + navigationRoutes.settings, {
1332
- replace: true
1333
- });
1334
- }
1335
- };
1336
- return {
1337
- navigateBackFrom
1338
- };
1339
- }
1340
-
1341
- const Box = /*#__PURE__*/ui.styled('div', {
1342
- display: 'flex',
1343
- flexDirection: 'column',
1344
- width: '100%',
1345
- overflow: 'hidden'
1346
- });
1347
- const Container = /*#__PURE__*/ui.styled('div', {
1348
- boxSizing: 'border-box',
1349
- borderRadius: '$5',
1350
- padding: '$8 $16 $16 $16',
1351
- variants: {
1352
- type: {
1353
- filled: {
1354
- backgroundColor: '$neutral100'
1355
- },
1356
- outlined: {
1357
- border: '1px solid $neutral100'
1358
- }
1359
- }
1360
- },
1361
- defaultVariants: {
1362
- type: 'filled'
1363
- },
1364
- '.head': {
1365
- display: 'flex',
1366
- justifyContent: 'space-between',
1367
- alignItems: 'center',
1368
- minHeight: '32px',
1369
- '.usd-value': {
1370
- paddingLeft: '$8'
1371
- }
1372
- },
1373
- '.form': {
1374
- display: 'flex',
1375
- width: '100%',
1376
- padding: '$2 0',
1377
- '.selectors': {
1378
- width: '35%',
1379
- '._text': {
1380
- whiteSpace: 'nowrap',
1381
- overflow: 'hidden',
1382
- textOverflow: 'ellipsis'
1383
- }
1384
- },
1385
- '.amount': {
1386
- width: '30%'
1387
- }
1388
- }
1389
- });
1390
- const ImagePlaceholder = /*#__PURE__*/ui.styled('span', {
1391
- width: '24px',
1392
- height: '24px',
1393
- backgroundColor: '$neutral100',
1394
- borderRadius: '99999px'
1395
- });
1396
- const OutputContainer = /*#__PURE__*/ui.styled('div', {
1397
- windth: '100%',
1398
- height: '$48',
1399
- borderRadius: '$5',
1400
- backgroundColor: '$surface',
1401
- border: '1px solid transparent',
1402
- position: 'relative',
1403
- display: 'flex',
1404
- alignItems: 'center',
1405
- paddingLeft: '$8',
1406
- paddingRight: '$8'
1407
- });
1408
- function TokenPreview(props) {
1409
- const {
1410
- chain,
1411
- token,
1412
- loadingStatus,
1413
- percentageChange
1414
- } = props;
1415
- const {
1416
- t
1417
- } = reactI18next.useTranslation();
1418
- const ItemSuffix = React__default.createElement("div", {
1419
- style: {
1420
- display: 'flex',
1421
- justifyContent: 'center',
1422
- alignItems: 'center'
1423
- }
1424
- }, loadingStatus === 'failed' && React__default.createElement(ui.InfoCircleIcon, {
1425
- color: "error",
1426
- size: 24
1427
- }));
1428
- return React__default.createElement(Box, null, React__default.createElement(Container, {
1429
- type: 'outlined'
1430
- }, React__default.createElement("div", {
1431
- className: "head"
1432
- }, React__default.createElement(ui.Typography, {
1433
- variant: "body2",
1434
- color: "neutral800"
1435
- }, props.label), React__default.createElement("div", null, percentageChange, props.usdValue && React__default.createElement(ui.Typography, {
1436
- variant: "caption",
1437
- color: "neutral600",
1438
- className: "usd-value"
1439
- }, `$${numberToString(props.usdValue)}`))), React__default.createElement("div", {
1440
- className: "form"
1441
- }, React__default.createElement(ui.Button, {
1442
- className: "selectors",
1443
- variant: "outlined",
1444
- loading: loadingStatus === 'loading',
1445
- prefix: loadingStatus === 'success' && chain ? React__default.createElement(ui.Image, {
1446
- src: chain.logo,
1447
- size: 24
1448
- }) : React__default.createElement(ImagePlaceholder, null),
1449
- suffix: ItemSuffix,
1450
- align: "start",
1451
- size: "large"
1452
- }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Divider, {
1453
- size: 12,
1454
- direction: "horizontal"
1455
- }), React__default.createElement(ui.Button, {
1456
- className: "selectors",
1457
- variant: "outlined",
1458
- loading: loadingStatus === 'loading',
1459
- prefix: loadingStatus === 'success' && token ? React__default.createElement(ui.Image, {
1460
- src: token.image,
1461
- size: 24
1462
- }) : React__default.createElement(ImagePlaceholder, null),
1463
- suffix: ItemSuffix,
1464
- size: "large",
1465
- align: "start"
1466
- }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Divider, {
1467
- size: 12,
1468
- direction: "horizontal"
1469
- }), React__default.createElement("div", {
1470
- className: "amount"
1471
- }, React__default.createElement(OutputContainer, null, React__default.createElement(ui.Typography, {
1472
- variant: "h4"
1473
- }, props.amount))))));
1474
- }
1475
-
1476
- const Container$1 = /*#__PURE__*/ui.styled('div', {
1477
- display: 'flex',
1478
- alignItems: 'center',
1479
- justifyContent: 'space-between',
1480
- padding: '$8',
1481
- borderRadius: '$5',
1482
- backgroundColor: '$neutral100',
1483
- color: '$neutral800',
1484
- fontSize: '$12',
1485
- '.routes': {
1486
- display: 'flex',
1487
- alignItems: 'center'
1488
- },
1489
- '.fee': {
1490
- display: 'flex',
1491
- alignItems: 'center'
1492
- }
1493
- });
1494
- function RoutesOverview(props) {
1495
- if (!props.routes) return null;
1496
- const swaps = props.routes.result?.swaps;
1497
- return React__default.createElement(Container$1, null, React__default.createElement("div", {
1498
- className: "routes"
1499
- }, swaps?.map((swap, idx) => {
1500
- const isLast = idx + 1 == swaps.length;
1501
- return React__default.createElement(React__default.Fragment, {
1502
- key: idx
1503
- }, React__default.createElement("div", {
1504
- className: "route"
1505
- }, swap.from.symbol), React__default.createElement(ui.ChevronRightIcon, {
1506
- size: 12
1507
- }), isLast ? React__default.createElement("div", {
1508
- className: "route"
1509
- }, swap.to.symbol) : null);
1510
- })), props.totalFee ? React__default.createElement("div", {
1511
- className: "fee"
1512
- }, React__default.createElement(ui.GasIcon, {
1513
- size: 12
1514
- }), React__default.createElement(ui.Divider, {
1515
- size: 4,
1516
- direction: "horizontal"
1517
- }), "$", props.totalFee) : null);
1518
- }
1519
-
1520
- var ConfirmSwapErrorTypes;
1521
- (function (ConfirmSwapErrorTypes) {
1522
- ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["NO_ROUTE"] = 0] = "NO_ROUTE";
1523
- ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS"] = 1] = "ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS";
1524
- ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["REQUEST_FAILED"] = 2] = "REQUEST_FAILED";
1525
- ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["INSUFFICIENT_SLIPPAGE"] = 3] = "INSUFFICIENT_SLIPPAGE";
1526
- ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
1527
- })(ConfirmSwapErrorTypes || (ConfirmSwapErrorTypes = {}));
1528
- var ConfirmSwapWarningTypes;
1529
- (function (ConfirmSwapWarningTypes) {
1530
- ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_UPDATED"] = 0] = "ROUTE_UPDATED";
1531
- ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_SWAPPERS_UPDATED"] = 1] = "ROUTE_SWAPPERS_UPDATED";
1532
- ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_COINS_UPDATED"] = 2] = "ROUTE_COINS_UPDATED";
1533
- ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_AND_OUTPUT_AMOUNT_UPDATED"] = 3] = "ROUTE_AND_OUTPUT_AMOUNT_UPDATED";
1534
- })(ConfirmSwapWarningTypes || (ConfirmSwapWarningTypes = {}));
1535
-
1536
- function useConfirmSwap() {
1537
- const fromToken = useBestRouteStore.use.fromToken();
1538
- const toToken = useBestRouteStore.use.toToken();
1539
- const inputAmount = useBestRouteStore.use.inputAmount();
1540
- const initialRoute = useBestRouteStore.use.bestRoute();
1541
- const setBestRoute = useBestRouteStore.use.setBestRoute();
1542
- const inputUsdValue = useBestRouteStore.use.inputUsdValue();
1543
- const affiliateRef = useSettingsStore.use.affiliateRef();
1544
- const connectedWallets = useWalletsStore.use.connectedWallets();
1545
- const selectedWallets = useWalletsStore.use.selectedWallets();
1546
- const meta = useMetaStore.use.meta();
1547
- const customSlippage = useSettingsStore.use.customSlippage();
1548
- const slippage = useSettingsStore.use.slippage();
1549
- const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
1550
- const userSlippage = customSlippage || slippage;
1551
- const proceedAnywayRef = React.useRef(false);
1552
- const confiremedRouteRef = React.useRef(null);
1553
- let abortControllerRef = React.useRef(null);
1554
- const [loading, setLoading] = React.useState(false);
1555
- const [errors, setErrors] = React.useState([]);
1556
- const [warnings, setWarnings] = React.useState([]);
1557
- React.useEffect(() => {
1558
- return () => abortControllerRef.current?.abort();
1559
- }, []);
1560
- if (!fromToken || !toToken || !inputAmount || !initialRoute) return {
1561
- loading: false,
1562
- warnings: [],
1563
- errors: [],
1564
- confirmSwap: null
1565
- };
1566
- const confirmSwap = async () => {
1567
- if (proceedAnywayRef.current) {
1568
- const swapSettings = {
1569
- slippage: userSlippage.toString(),
1570
- disabledSwappersGroups: disabledLiquiditySources
1571
- };
1572
- if (errors.length > 0) setErrors([]);
1573
- if (warnings.length > 0) setWarnings([]);
1574
- proceedAnywayRef.current = false;
1575
- if (confiremedRouteRef.current) {
1576
- const newSwap = queueManagerRangoPreset.calculatePendingSwap(inputAmount.toString(), confiremedRouteRef.current, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
1577
- return newSwap;
1578
- }
1579
- return;
1580
- }
1581
- abortControllerRef.current = new AbortController();
1582
- setLoading(true);
1583
- const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, connectedWallets, selectedWallets, disabledLiquiditySources, userSlippage, affiliateRef, initialRoute);
1584
- try {
1585
- const confiremedRoute = await httpService().getBestRoute(requestBody, {
1586
- signal: abortControllerRef.current?.signal
1587
- });
1588
- abortControllerRef.current = null;
1589
- setLoading(false);
1590
- if (!confiremedRoute.result || !new BigNumber__default(confiremedRoute.requestAmount).isEqualTo(new BigNumber__default(inputAmount || '-1'))) {
1591
- setErrors(prevState => prevState.concat({
1592
- type: ConfirmSwapErrorTypes.NO_ROUTE
1593
- }));
1594
- return;
1595
- }
1596
- const confirmSwapState = {
1597
- errors: [],
1598
- warnings: []
1599
- };
1600
- const routeChanged = isRouteChanged(initialRoute, confiremedRoute);
1601
- if (routeChanged) {
1602
- setBestRoute(confiremedRoute);
1603
- const newRouteOutputUsdValue = new BigNumber__default(confiremedRoute.result?.outputAmount || '0').multipliedBy(toToken.usdPrice || 0);
1604
- const outputRatio = getOutputRatio(inputUsdValue, newRouteOutputUsdValue);
1605
- const highValueLoss = outputRatioHasWarning(inputUsdValue, outputRatio);
1606
- if (highValueLoss) confirmSwapState.errors.push({
1607
- type: ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS
1608
- });else if (isOutputAmountChangedALot(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
1609
- type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
1610
- newOutputAmount: numberToString(getRouteOutputAmount(confiremedRoute)),
1611
- percentageChange: numberToString(getPercentageChange(getRouteOutputAmount(initialRoute), getRouteOutputAmount(confiremedRoute)), null, 2)
1612
- });else if (isRouteInternalCoinsUpdated(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
1613
- type: ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED
1614
- });else if (isNumberOfSwapsChanged(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
1615
- type: ConfirmSwapWarningTypes.ROUTE_UPDATED
1616
- });else if (isRouteSwappersUpdated(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
1617
- type: ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED
1618
- });
1619
- }
1620
- const balanceWarnings = getBalanceWarnings(confiremedRoute, selectedWallets);
1621
- const enoughBalance = balanceWarnings.length === 0;
1622
- if (!enoughBalance) confirmSwapState.errors.push({
1623
- type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE,
1624
- messages: balanceWarnings
1625
- });
1626
- const minRequiredSlippage = getMinRequiredSlippage(initialRoute);
1627
- if (!hasProperSlippage(userSlippage.toString(), minRequiredSlippage)) confirmSwapState.errors.push({
1628
- type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE,
1629
- minRequiredSlippage
1630
- });
1631
- const noErrors = confirmSwapState.errors.length === 0;
1632
- const noWarnings = confirmSwapState.warnings.length === 0;
1633
- if ((noErrors || !noErrors && proceedAnywayRef.current) && (noWarnings || !noWarnings && proceedAnywayRef.current)) {
1634
- const swapSettings = {
1635
- slippage: userSlippage.toString(),
1636
- disabledSwappersGroups: disabledLiquiditySources
1637
- };
1638
- const newSwap = queueManagerRangoPreset.calculatePendingSwap(inputAmount.toString(), confiremedRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
1639
- return newSwap;
1640
- } else if (!proceedAnywayRef.current) {
1641
- proceedAnywayRef.current = true;
1642
- setErrors(confirmSwapState.errors);
1643
- setWarnings(confirmSwapState.warnings);
1644
- confiremedRouteRef.current = confiremedRoute;
1645
- }
1646
- return;
1647
- } catch (error) {
1648
- if (error?.code === 'ERR_CANCELED') {
1649
- return;
1650
- }
1651
- const status = error?.response?.status;
1652
- setLoading(false);
1653
- setErrors([{
1654
- type: ConfirmSwapErrorTypes.REQUEST_FAILED,
1655
- status
1656
- }]);
1657
- return;
1658
- }
1659
- };
1660
- return {
1661
- loading,
1662
- warnings,
1663
- errors,
1664
- confirmSwap
1665
- };
1666
- }
1667
-
1668
- function ChangeSlippageButton() {
1669
- const navigate = reactRouterDom.useNavigate();
1670
- return React__default.createElement(ui.Button, {
1671
- type: "primary",
1672
- variant: "outlined",
1673
- size: "small",
1674
- onClick: () => navigate('/' + navigationRoutes.settings)
1675
- }, "Change Slippage");
1676
- }
1677
-
1678
- const StyledMessage = /*#__PURE__*/ui.styled(ui.Typography, {
1679
- color: '$error500 !important'
1680
- });
1681
- function MinRequiredSlippage(_ref) {
1682
- let {
1683
- minRequiredSlippage
1684
- } = _ref;
1685
- return React__default.createElement(StyledMessage, {
1686
- variant: "body2"
1687
- }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React__default.createElement(ui.Divider, {
1688
- size: 8
1689
- }), React__default.createElement(ChangeSlippageButton, null));
1690
- }
1691
-
1692
- const List = /*#__PURE__*/ui.styled('ul', {
1693
- padding: 0,
1694
- margin: 0,
1695
- variants: {
1696
- showListStyle: {
1697
- true: {
1698
- paddingLeft: '$24'
1699
- }
1700
- }
1701
- }
1702
- });
1703
- const ListItem = /*#__PURE__*/ui.styled('li', {
1704
- variants: {
1705
- showListStyle: {
1706
- true: {
1707
- listStyleType: 'disc',
1708
- listStylePosition: 'outside'
1709
- }
1710
- }
1711
- }
1712
- });
1713
- const Message = /*#__PURE__*/ui.styled(ui.Typography, {
1714
- display: 'block'
1715
- });
1716
- function BalanceErrors(_ref) {
1717
- let {
1718
- messages
1719
- } = _ref;
1720
- const showListStyle = messages.length > 1;
1721
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(ui.Typography, {
1722
- className: "title",
1723
- variant: "title",
1724
- color: 'error'
1725
- }, "Insufficent Balance:"), React__default.createElement(ui.Divider, {
1726
- size: 8
1727
- }), React__default.createElement(List, {
1728
- showListStyle: showListStyle
1729
- }, messages.map((warning, index) => React__default.createElement(ListItem, {
1730
- showListStyle: showListStyle,
1731
- key: index
1732
- }, React__default.createElement(Message, {
1733
- variant: "body2"
1734
- }, warning)))));
1735
- }
1736
-
1737
- function ConfirmSwapErrors(errors) {
1738
- return errors.flatMap(error => {
1739
- switch (error.type) {
1740
- case ConfirmSwapErrorTypes.NO_ROUTE:
1741
- return 'No routes found. Please try again later.';
1742
- case ConfirmSwapErrorTypes.REQUEST_FAILED:
1743
- return `Failed to confirm swap ${error.status ? `'status': ${error.status})` : ''}, please try again.`;
1744
- case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
1745
- return 'Route updated and price impact is too high, try again later!';
1746
- case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
1747
- return React__default.createElement(MinRequiredSlippage, {
1748
- minRequiredSlippage: error.minRequiredSlippage
1749
- });
1750
- case ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE:
1751
- return React__default.createElement(BalanceErrors, {
1752
- messages: error.messages
1753
- });
1754
- default:
1755
- return [];
1756
- }
1757
- });
1758
- }
1759
-
1760
- function ConfirmSwapWarnings(warnings) {
1761
- return warnings.flatMap(warning => {
1762
- switch (warning.type) {
1763
- case ConfirmSwapWarningTypes.ROUTE_UPDATED:
1764
- return "Route has been updated.";
1765
- case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
1766
- return `Output amount changed to ${warning.newOutputAmount} (${warning.percentageChange}% change).`;
1767
- case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
1768
- return "Route swappers has been updated.";
1769
- case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
1770
- return "Route internal coins has been updated.";
1771
- default:
1772
- return [];
1773
- }
1774
- });
1775
- }
1776
-
1777
- function HighSlippageWarning(props) {
1778
- const {
1779
- selectedSlippage
1780
- } = props;
1781
- return React__default.createElement(ui.Alert, {
1782
- type: "warning",
1783
- footer: React__default.createElement(ChangeSlippageButton, null)
1784
- }, "Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.");
1785
- }
1786
-
1787
- function ConfirmSwapExtraMessages(props) {
1788
- const {
1789
- selectedSlippage
1790
- } = props;
1791
- const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
1792
- return React__default.createElement(React__default.Fragment, null, highSlippage && React__default.createElement(HighSlippageWarning, {
1793
- selectedSlippage: selectedSlippage
1794
- }));
1795
- }
1796
-
1797
- function PercentageChange(props) {
1798
- const {
1799
- inputUsdValue,
1800
- outputUsdValue
1801
- } = props;
1802
- if (!inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)) return null;
1803
- const percentageChange = getPercentageChange(inputUsdValue.toNumber(), outputUsdValue.toNumber());
1804
- const showPercentageChange = percentageChange?.lt(0);
1805
- return React__default.createElement(React__default.Fragment, null, showPercentageChange && React__default.createElement(ui.Typography, {
1806
- variant: "caption",
1807
- color: "$error500"
1808
- }, `(${numberToString(percentageChange, 0, 2)}%)`));
1809
- }
1810
-
1811
- function ConfirmSwapPage() {
1812
- const navigate = reactRouterDom.useNavigate();
1813
- const {
1814
- navigateBackFrom
1815
- } = useNavigateBack();
1816
- const bestRoute = useBestRouteStore.use.bestRoute();
1817
- const fetchingBestRoute = useBestRouteStore.use.loading();
1818
- const fetchingBestRouteError = useBestRouteStore.use.error();
1819
- const setSelectedSwap = useUiStore.use.setSelectedSwap();
1820
- const {
1821
- blockchains,
1822
- tokens
1823
- } = useMetaStore.use.meta();
1824
- const loadingMetaStatus = useMetaStore.use.loadingStatus();
1825
- const connectedWallets = useWalletsStore.use.connectedWallets();
1826
- const selectedWallets = useWalletsStore.use.selectedWallets();
1827
- const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
1828
- const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
1829
- const slippage = useSettingsStore.use.slippage();
1830
- const customSlippage = useSettingsStore.use.customSlippage();
1831
- const inputUsdValue = useBestRouteStore.use.inputUsdValue();
1832
- const outputUsdValue = useBestRouteStore.use.outputUsdValue();
1833
- const setInputAmount = useBestRouteStore.use.setInputAmount();
1834
- const [dbErrorMessage, setDbErrorMessage] = React.useState('');
1835
- const bestRouteloadingStatus = getBestRouteStatus(fetchingBestRoute, !!fetchingBestRouteError);
1836
- const {
1837
- manager
1838
- } = queueManagerReact.useManager();
1839
- const {
1840
- loading: fetchingConfirmedRoute,
1841
- errors,
1842
- warnings,
1843
- confirmSwap
1844
- } = useConfirmSwap();
1845
- const selectedSlippage = customSlippage || slippage;
1846
- const showHighSlippageWarning = !errors.find(error => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE);
1847
- const {
1848
- getWalletInfo,
1849
- connect
1850
- } = walletsCore.useWallets();
1851
- const confirmDisabled = fetchingBestRoute || !requiredWallets(bestRoute).every(chain => selectedWallets.map(wallet => wallet.chain).includes(chain));
1852
- const firstStep = bestRoute?.result?.swaps[0];
1853
- const lastStep = bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
1854
- const fromAmount = numberToString(firstStep?.fromAmount, 4, 6);
1855
- const toAmount = numberToString(lastStep?.toAmount, 4, 6);
1856
- React.useEffect(() => {
1857
- initSelectedWallets();
1858
- }, []);
1859
- const selectableWallets = getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo);
1860
- const handleConnectChain = wallet => {
1861
- const network = wallet;
1862
- getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
1863
- };
1864
- const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
1865
- return React__default.createElement(ui.ConfirmSwap, {
1866
- requiredWallets: getRequiredChains(bestRoute),
1867
- selectableWallets: selectableWallets,
1868
- onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
1869
- onConfirm: async () => {
1870
- confirmSwap?.().then(async swap => {
1871
- if (swap) {
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
- }
1888
- }
1889
- });
1890
- },
1891
- onChange: wallet => setSelectedWallet(wallet),
1892
- confirmDisabled: loadingMetaStatus !== 'success' || confirmDisabled,
1893
- handleConnectChain: wallet => handleConnectChain(wallet),
1894
- isExperimentalChain: wallet => getKeplrCompatibleConnectedWallets(selectableWallets).length > 0 ? isExperimentalChain(blockchains, wallet) : false,
1895
- previewInputs: React__default.createElement(React__default.Fragment, null, React__default.createElement(TokenPreview, {
1896
- chain: {
1897
- displayName: firstStep?.from.blockchain || '',
1898
- logo: firstStep?.from.blockchainLogo || ''
1899
- },
1900
- token: {
1901
- symbol: firstStep?.from.symbol || '',
1902
- image: firstStep?.from.logo || ''
1903
- },
1904
- usdValue: inputUsdValue,
1905
- amount: fromAmount,
1906
- label: i18n.t('From'),
1907
- loadingStatus: loadingMetaStatus !== 'success' ? loadingMetaStatus : bestRouteloadingStatus
1908
- }), React__default.createElement(ui.Divider, {
1909
- size: 12
1910
- }), React__default.createElement(TokenPreview, {
1911
- chain: {
1912
- displayName: lastStep?.to.blockchain || '',
1913
- logo: lastStep?.to.blockchainLogo || ''
1914
- },
1915
- token: {
1916
- symbol: lastStep?.to.symbol || '',
1917
- image: lastStep?.to.logo || ''
1918
- },
1919
- usdValue: outputUsdValue,
1920
- amount: toAmount,
1921
- label: i18n.t('To'),
1922
- loadingStatus: loadingMetaStatus !== 'success' ? loadingMetaStatus : bestRouteloadingStatus,
1923
- percentageChange: React__default.createElement(PercentageChange, {
1924
- inputUsdValue: inputUsdValue,
1925
- outputUsdValue: outputUsdValue
1926
- })
1927
- })),
1928
- previewRoutes: React__default.createElement(RoutesOverview, {
1929
- routes: bestRoute,
1930
- totalFee: numberToString(totalFeeInUsd, 0, 2)
1931
- }),
1932
- loading: fetchingConfirmedRoute,
1933
- errors: dbErrorMessage ? [dbErrorMessage, ...ConfirmSwapErrors(errors)] : ConfirmSwapErrors(errors),
1934
- warnings: ConfirmSwapWarnings(warnings),
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, {
1936
- selectedSlippage: selectedSlippage
1937
- })),
1938
- confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!'
1939
- });
1940
- }
1941
-
1942
- const getPendingSwaps = manager => {
1943
- const result = [];
1944
- manager?.getAll().forEach((q, id) => {
1945
- const storage = q.list.getStorage();
1946
- if (storage?.swapDetails) {
1947
- result.push({
1948
- id,
1949
- swap: storage?.swapDetails
1950
- });
1951
- }
1952
- });
1953
- return result.sort((a, b) => Number(b.swap.creationTime) - Number(a.swap.creationTime));
1954
- };
1955
-
1956
- const groupSwapsByDate = swaps => {
1957
- const output = new Map([['today', {
1958
- title: 'Today',
1959
- swaps: []
1960
- }], ['week', {
1961
- title: 'This week',
1962
- swaps: []
1963
- }], ['month', {
1964
- title: 'This month',
1965
- swaps: []
1966
- }], ['year', {
1967
- title: 'This year',
1968
- swaps: []
1969
- }], ['history', {
1970
- title: 'History',
1971
- swaps: []
1972
- }]]);
1973
- const now = dayjs();
1974
- swaps.forEach(swap => {
1975
- const swapDate = dayjs(Number(swap.creationTime));
1976
- if (now.isSame(swapDate, 'day')) output.get('today')?.swaps.push(swap);else if (now.isSame(swapDate, 'week')) output.get('week')?.swaps.push(swap);else if (now.isSame(swapDate, 'month')) output.get('month')?.swaps.push(swap);else if (now.isSame(swapDate, 'year')) output.get('year')?.swaps.push(swap);else output.get('history')?.swaps.push(swap);
1977
- });
1978
- return Array.from(output.values());
1979
- };
1980
-
1981
- function HistoryPage() {
1982
- const setSelectedSwap = useUiStore.use.setSelectedSwap();
1983
- const navigate = reactRouterDom.useNavigate();
1984
- const {
1985
- navigateBackFrom
1986
- } = useNavigateBack();
1987
- const {
1988
- manager,
1989
- state
1990
- } = queueManagerReact.useManager();
1991
- const pendingSwaps = getPendingSwaps(manager).map(_ref => {
1992
- let {
1993
- swap
1994
- } = _ref;
1995
- return swap;
1996
- });
1997
- const loading = !state.loadedFromPersistor;
1998
- return React__default.createElement(ui.History, {
1999
- list: pendingSwaps,
2000
- groupBy: groupSwapsByDate,
2001
- loading: loading,
2002
- onSwapClick: requestId => {
2003
- setSelectedSwap(requestId);
2004
- navigate(`${requestId}`, {
2005
- replace: true
2006
- });
2007
- },
2008
- onBack: navigateBackFrom.bind(null, navigationRoutes.swaps)
2009
- });
2010
- }
2011
-
2012
- const Box$1 = /*#__PURE__*/ui.styled('div', {
2013
- display: 'flex',
2014
- flexDirection: 'column',
2015
- width: '100%',
2016
- overflow: 'hidden'
2017
- });
2018
- const Container$2 = /*#__PURE__*/ui.styled('div', {
2019
- boxSizing: 'border-box',
2020
- borderRadius: '$5',
2021
- padding: '$8 $16 $16 $16',
2022
- variants: {
2023
- type: {
2024
- filled: {
2025
- backgroundColor: '$neutral100'
2026
- },
2027
- outlined: {
2028
- border: '1px solid $neutral100',
2029
- backgroundColor: '$surface'
2030
- }
2031
- }
2032
- },
2033
- defaultVariants: {
2034
- type: 'filled'
2035
- },
2036
- '.head': {
2037
- display: 'flex',
2038
- justifyContent: 'space-between',
2039
- alignItems: 'center',
2040
- minHeight: '32px'
2041
- },
2042
- '.form': {
2043
- display: 'flex',
2044
- width: '100%',
2045
- padding: '$2 0',
2046
- '.selectors': {
2047
- width: '35%',
2048
- '._text': {
2049
- whiteSpace: 'nowrap',
2050
- overflow: 'hidden',
2051
- textOverflow: 'ellipsis'
2052
- }
2053
- },
2054
- '.amount': {
2055
- width: '30%'
2056
- }
2057
- },
2058
- '.output-usd': {
2059
- display: 'flex',
2060
- div: {
2061
- display: 'flex',
2062
- paddingLeft: '$8'
2063
- }
2064
- }
2065
- });
2066
- const Options = /*#__PURE__*/ui.styled('div', {
2067
- display: 'flex',
2068
- justifyContent: 'flex-end',
2069
- '.balance': {
2070
- display: 'flex',
2071
- alignItems: 'center'
2072
- }
2073
- });
2074
- const ImagePlaceholder$1 = /*#__PURE__*/ui.styled('span', {
2075
- width: '24px',
2076
- height: '24px',
2077
- backgroundColor: '$neutral100',
2078
- borderRadius: '99999px'
2079
- });
2080
- const OutputContainer$1 = /*#__PURE__*/ui.styled('div', {
2081
- windth: '100%',
2082
- height: '$48',
2083
- borderRadius: '$5',
2084
- backgroundColor: '$surface',
2085
- border: '1px solid transparent',
2086
- position: 'relative',
2087
- display: 'flex',
2088
- alignItems: 'center',
2089
- paddingLeft: '$8',
2090
- paddingRight: '$8'
2091
- });
2092
- function TokenInfo(props) {
2093
- const {
2094
- type,
2095
- chain,
2096
- token
2097
- } = props;
2098
- const loadingStatus = useMetaStore.use.loadingStatus();
2099
- const fromChain = useBestRouteStore.use.fromChain();
2100
- const toChain = useBestRouteStore.use.toChain();
2101
- const inputUsdValue = useBestRouteStore.use.inputUsdValue();
2102
- const fromToken = useBestRouteStore.use.fromToken();
2103
- const setInputAmount = useBestRouteStore.use.setInputAmount();
2104
- const bestRoute = useBestRouteStore.use.bestRoute();
2105
- const inputAmount = useBestRouteStore.use.inputAmount();
2106
- const connectedWallets = useWalletsStore.use.connectedWallets();
2107
- const fetchingBestRoute = useBestRouteStore.use.loading();
2108
- const navigate = reactRouterDom.useNavigate();
2109
- const {
2110
- t
2111
- } = reactI18next.useTranslation();
2112
- const tokenBalance = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(connectedWallets, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', 8) : '0';
2113
- 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';
2114
- const ItemSuffix = React__default.createElement("div", {
2115
- style: {
2116
- display: 'flex',
2117
- justifyContent: 'center',
2118
- alignItems: 'center'
2119
- }
2120
- }, loadingStatus === 'failed' && React__default.createElement(ui.InfoCircleIcon, {
2121
- color: "error",
2122
- size: 24
2123
- }), React__default.createElement(ui.AngleDownIcon, null));
2124
- return React__default.createElement(Box$1, null, React__default.createElement(Container$2, {
2125
- type: props.type === 'From' ? 'filled' : 'outlined'
2126
- }, React__default.createElement("div", {
2127
- className: "head"
2128
- }, React__default.createElement(ui.Typography, {
2129
- variant: "body2",
2130
- color: "neutral800"
2131
- }, t(type)), props.type === 'From' ? React__default.createElement(Options, null, React__default.createElement("div", {
2132
- className: "balance",
2133
- onClick: () => {
2134
- if (tokenBalance !== '0') setInputAmount(tokenBalanceReal.split(',').join(''));
2135
- }
2136
- }, React__default.createElement(ui.Typography, {
2137
- variant: "body3",
2138
- color: "neutral600"
2139
- }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React__default.createElement(ui.Divider, {
2140
- size: 4
2141
- }), React__default.createElement(ui.Button, {
2142
- type: "primary",
2143
- variant: "ghost",
2144
- size: "compact"
2145
- }, t('Max')))) : React__default.createElement("div", {
2146
- className: "output-usd"
2147
- }, React__default.createElement(PercentageChange, {
2148
- inputUsdValue: inputUsdValue,
2149
- outputUsdValue: props.outputUsdValue
2150
- }), React__default.createElement("div", null, React__default.createElement(ui.Typography, {
2151
- variant: "caption",
2152
- color: "neutral600"
2153
- }, `$${numberToString(props.outputUsdValue)}`)))), React__default.createElement("div", {
2154
- className: "form"
2155
- }, React__default.createElement(ui.Button, {
2156
- className: "selectors",
2157
- onClick: () => {
2158
- navigate(`${props.type.toLowerCase()}-chain`);
2159
- },
2160
- variant: "outlined",
2161
- disabled: loadingStatus === 'failed',
2162
- loading: loadingStatus === 'loading',
2163
- prefix: loadingStatus === 'success' && chain ? React__default.createElement(ui.Image, {
2164
- src: chain.logo,
2165
- size: 24
2166
- }) : React__default.createElement(ImagePlaceholder$1, null),
2167
- suffix: ItemSuffix,
2168
- align: "start",
2169
- size: "large"
2170
- }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Divider, {
2171
- size: 12,
2172
- direction: "horizontal"
2173
- }), React__default.createElement(ui.Button, {
2174
- className: "selectors",
2175
- onClick: () => {
2176
- navigate(`${props.type.toLowerCase()}-token`);
2177
- },
2178
- variant: "outlined",
2179
- disabled: loadingStatus === 'failed' || type === 'From' && !fromChain || type === 'To' && !toChain,
2180
- loading: loadingStatus === 'loading',
2181
- prefix: loadingStatus === 'success' && token ? React__default.createElement(ui.Image, {
2182
- src: token.image,
2183
- size: 24
2184
- }) : React__default.createElement(ImagePlaceholder$1, null),
2185
- suffix: ItemSuffix,
2186
- size: "large",
2187
- align: "start"
2188
- }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Divider, {
2189
- size: 12,
2190
- direction: "horizontal"
2191
- }), React__default.createElement("div", {
2192
- className: "amount"
2193
- }, props.type === 'From' ? React__default.createElement(ui.TextField, {
2194
- type: "number",
2195
- size: "large",
2196
- autoFocus: true,
2197
- placeholder: "0",
2198
- style: {
2199
- position: 'relative',
2200
- backgroundColor: '$background !important'
2201
- },
2202
- suffix: React__default.createElement("span", {
2203
- style: {
2204
- position: 'absolute',
2205
- right: '4px',
2206
- bottom: '2px'
2207
- }
2208
- }, React__default.createElement(ui.Typography, {
2209
- variant: "caption",
2210
- color: "neutral800"
2211
- }, `$${numberToString(inputUsdValue)}`)),
2212
- value: props.inputAmount || '',
2213
- min: 0,
2214
- onChange: props.type === 'From' ? event => {
2215
- props.onAmountChange(event.target.value);
2216
- } : undefined
2217
- }) : React__default.createElement(OutputContainer$1, null, React__default.createElement(ui.Typography, {
2218
- variant: "h4"
2219
- }, fetchingBestRoute && '?', !!bestRoute?.result && `≈ ${numberToString(props.outputAmount)}`, (!inputAmount || inputAmount === '0') && '0'))))));
2220
- }
2221
-
2222
- const Container$3 = /*#__PURE__*/_.styled('div', {
2223
- display: 'flex',
2224
- width: '100%',
2225
- justifyContent: 'end',
2226
- alignItems: 'center',
2227
- paddingTop: '$16'
2228
- });
2229
- const Logo = /*#__PURE__*/_.styled('svg', {
2230
- fill: '$foreground',
2231
- width: '$24',
2232
- margin: '0 $8 0 $16'
2233
- });
2234
- const StyledAnchor = /*#__PURE__*/_.styled('a', {
2235
- display: 'flex',
2236
- justifyContent: 'center',
2237
- alignItems: 'center',
2238
- textDecoration: 'none'
2239
- });
2240
- function BottomLogo() {
2241
- const {
2242
- t
2243
- } = reactI18next.useTranslation();
2244
- return React__default.createElement(Container$3, null, React__default.createElement(ui.Typography, {
2245
- variant: "caption",
2246
- color: "$neutral600"
2247
- }, t('Powered By')), React__default.createElement(StyledAnchor, {
2248
- href: "https://rango.exchange",
2249
- target: "_blank"
2250
- }, React__default.createElement(Logo, {
2251
- xmlns: "http://www.w3.org/2000/svg",
2252
- viewBox: "0 0 33.68 29"
2253
- }, React__default.createElement("defs", null), React__default.createElement("g", {
2254
- id: "Layer_2",
2255
- "data-name": "Layer 2"
2256
- }, React__default.createElement("g", {
2257
- id: "Layer_1-2",
2258
- "data-name": "Layer 1"
2259
- }, React__default.createElement("path", {
2260
- d: "M33.68,18.05A17.93,17.93,0,0,0,28.34,5.29,18.31,18.31,0,0,0,15.45,0H13.54V7.41L6.07,0H.69L9.83,9.07H0V11A17.93,17.93,0,0,0,5.34,23.71,18.32,18.32,0,0,0,18.24,29h1.9V21.59l7.38,7.31h5.39l-9-9h9.82ZM17.37,16.16H12.49a1.93,1.93,0,0,0-1.35.55,1.89,1.89,0,0,0-.56,1.34,1.85,1.85,0,0,0,.56,1.33,1.93,1.93,0,0,0,1.35.55h3.84V25.1A14.43,14.43,0,0,1,8,21a14.21,14.21,0,0,1-4.1-8.2H21.2a1.86,1.86,0,0,0,.74-.13,1.92,1.92,0,0,0,.64-.4,2,2,0,0,0,.43-.62,1.88,1.88,0,0,0,0-1.47,2,2,0,0,0-.43-.62,1.92,1.92,0,0,0-.64-.4,1.86,1.86,0,0,0-.74-.13H17.35V3.9A14.43,14.43,0,0,1,25.64,8a14.19,14.19,0,0,1,4.11,8.2Zm2.12-5.27a1.43,1.43,0,0,1,.26-.83,1.52,1.52,0,0,1,.67-.56,1.55,1.55,0,0,1,.88-.08,1.51,1.51,0,0,1,.77.4,1.54,1.54,0,0,1,.42.77,1.41,1.41,0,0,1-.09.86,1.47,1.47,0,0,1-.55.68,1.56,1.56,0,0,1-.84.25,1.52,1.52,0,0,1-1.52-1.49Z"
2261
- }), React__default.createElement("path", {
2262
- d: "M21.7,11.57a.68.68,0,0,0-.12-.38.64.64,0,0,0-.31-.25.68.68,0,0,0-.75.15.61.61,0,0,0-.19.35.62.62,0,0,0,0,.4.67.67,0,0,0,.25.3.69.69,0,0,0,.39.12.7.7,0,0,0,.49-.2A.68.68,0,0,0,21.7,11.57Z"
2263
- })))), React__default.createElement(ui.Typography, {
2264
- variant: "body2"
2265
- }, "RANGO")));
2266
- }
2267
-
2268
- function SwithFromAndTo(_ref) {
2269
- let {
2270
- count
2271
- } = _ref;
2272
- const firstRender = React.useRef(true);
2273
- const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
2274
- const outputAmount = useBestRouteStore.use.outputAmount();
2275
- React.useEffect(() => {
2276
- if (!firstRender.current) {
2277
- const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
2278
- const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
2279
- const toChainString = searchParams.get(SearchParams.TO_CHAIN);
2280
- const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
2281
- setSearchParams({
2282
- ...(toChainString && {
2283
- [SearchParams.FROM_CHAIN]: toChainString
2284
- }),
2285
- ...(toTokenString && {
2286
- [SearchParams.FROM_TOKEN]: toTokenString
2287
- }),
2288
- ...(fromChainString && {
2289
- [SearchParams.TO_CHAIN]: fromChainString
2290
- }),
2291
- ...(fromTokenString && {
2292
- [SearchParams.TO_TOKEN]: fromTokenString
2293
- }),
2294
- ...(outputAmount && {
2295
- [SearchParams.FROM_AMOUNT]: outputAmount.toString()
2296
- })
2297
- });
2298
- } else {
2299
- firstRender.current = false;
2300
- }
2301
- }, [count]);
2302
- return null;
2303
- }
2304
-
2305
- const Footer = /*#__PURE__*/ui.styled('div', {
2306
- display: 'flex',
2307
- flexDirection: 'column',
2308
- width: '100%',
2309
- paddingTop: '$16'
2310
- });
2311
-
2312
- const errorMessages = {
2313
- genericServerError: 'Error connecting server, please reload the app and try again'
2314
- };
2315
-
2316
- const ButtonsContainer = /*#__PURE__*/ui.styled('div', {
2317
- display: 'flex'
2318
- });
2319
- function HeaderButtons(props) {
2320
- const {
2321
- onClickRefresh
2322
- } = props;
2323
- const navigate = reactRouterDom.useNavigate();
2324
- return React__default.createElement(ButtonsContainer, null, React__default.createElement(ui.Tooltip, {
2325
- content: "Refresh"
2326
- }, React__default.createElement(ui.Button, {
2327
- variant: "ghost",
2328
- onClick: onClickRefresh,
2329
- disabled: !onClickRefresh
2330
- }, React__default.createElement(ui.RetryIcon, {
2331
- size: 24,
2332
- disabled: !onClickRefresh
2333
- }))), React__default.createElement(ui.Tooltip, {
2334
- content: "Transactions History"
2335
- }, React__default.createElement(ui.Button, {
2336
- variant: "ghost",
2337
- onClick: () => navigate(navigationRoutes.swaps)
2338
- }, React__default.createElement(ui.HistoryIcon, {
2339
- size: 24
2340
- }))), React__default.createElement(ui.Tooltip, {
2341
- content: "Settings"
2342
- }, React__default.createElement(ui.Button, {
2343
- variant: "ghost",
2344
- onClick: () => navigate(navigationRoutes.settings)
2345
- }, React__default.createElement(ui.SettingsIcon, {
2346
- size: 24
2347
- }))));
2348
- }
2349
-
2350
- const Container$4 = /*#__PURE__*/ui.styled('div', {
2351
- display: 'flex',
2352
- flexDirection: 'column'
2353
- });
2354
- const FromContainer = /*#__PURE__*/ui.styled('div', {
2355
- position: 'relative',
2356
- paddingBottom: '$12'
2357
- });
2358
- const SwitchButtonContainer = /*#__PURE__*/ui.styled('div', {
2359
- position: 'absolute',
2360
- bottom: '-12px',
2361
- left: '50%',
2362
- transform: 'translate(-50%, 10%)'
2363
- });
2364
- const BestRouteContainer = /*#__PURE__*/ui.styled('div', {
2365
- width: '100%',
2366
- paddingTop: '$16'
2367
- });
2368
- const Alerts = /*#__PURE__*/ui.styled('div', {
2369
- width: '100%',
2370
- paddingTop: '$16'
2371
- });
2372
- function Home() {
2373
- const isRouterInContext = reactRouterDom.useInRouterContext();
2374
- const navigate = reactRouterDom.useNavigate();
2375
- const [count, setCount] = React.useState(0);
2376
- const fromChain = useBestRouteStore.use.fromChain();
2377
- const fromToken = useBestRouteStore.use.fromToken();
2378
- const toChain = useBestRouteStore.use.toChain();
2379
- const toToken = useBestRouteStore.use.toToken();
2380
- const setInputAmount = useBestRouteStore.use.setInputAmount();
2381
- const inputUsdValue = useBestRouteStore.use.inputUsdValue();
2382
- const inputAmount = useBestRouteStore.use.inputAmount();
2383
- const outputAmount = useBestRouteStore.use.outputAmount();
2384
- const outputUsdValue = useBestRouteStore.use.outputUsdValue();
2385
- const bestRoute = useBestRouteStore.use.bestRoute();
2386
- const tokens = useMetaStore.use.meta().tokens;
2387
- const fetchingBestRoute = useBestRouteStore.use.loading();
2388
- const bestRouteError = useBestRouteStore.use.error();
2389
- const loadingMetaStatus = useMetaStore.use.loadingStatus();
2390
- const connectedWallets = useWalletsStore.use.connectedWallets();
2391
- const setCurrentPage = useUiStore.use.setCurrentPage();
2392
- const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
2393
- const errorMessage = loadingMetaStatus === 'failed' ? errorMessages.genericServerError : bestRouteError;
2394
- const needsToWarnEthOnPath = false;
2395
- const showBestRoute = inputAmount && (!!bestRoute || fetchingBestRoute || bestRouteError);
2396
- const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
2397
- const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
2398
- const {
2399
- fromAmountRangeError,
2400
- recommendation,
2401
- swap
2402
- } = LimitErrorMessage(bestRoute);
2403
- const priceImpactCanNotBeComputed = !canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue);
2404
- const swapButtonState = getSwapButtonState(loadingMetaStatus, connectedWallets, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount);
2405
- const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
2406
- const highFee = hasHighFee(totalFeeInUsd);
2407
- React.useEffect(() => {
2408
- setCurrentPage(navigationRoutes.home);
2409
- return setCurrentPage.bind(null, '');
2410
- }, []);
2411
- return React__default.createElement(Container$4, null, React__default.createElement(ui.Header, {
2412
- title: "SWAP",
2413
- suffix: React__default.createElement(HeaderButtons, {
2414
- onClickRefresh: !!bestRoute || bestRouteError ? fetchBestRoute : undefined
2415
- })
2416
- }), React__default.createElement(FromContainer, null, React__default.createElement(TokenInfo, {
2417
- type: "From",
2418
- chain: fromChain,
2419
- token: fromToken,
2420
- onAmountChange: setInputAmount,
2421
- inputAmount: inputAmount
2422
- }), React__default.createElement(SwitchButtonContainer, null, React__default.createElement(ui.Button, {
2423
- variant: "ghost",
2424
- onClick: () => {
2425
- switchFromAndTo();
2426
- setCount(prev => prev + 1);
2427
- }
2428
- }, React__default.createElement(ui.VerticalSwapIcon, {
2429
- size: 32
2430
- }), isRouterInContext && React__default.createElement(SwithFromAndTo, {
2431
- count: count
2432
- })))), React__default.createElement(TokenInfo, {
2433
- type: "To",
2434
- chain: toChain,
2435
- token: toToken,
2436
- outputAmount: outputAmount ? new BigNumber__default(outputAmount) : new BigNumber__default(0),
2437
- outputUsdValue: outputUsdValue
2438
- }), showBestRoute && React__default.createElement(BestRouteContainer, null, React__default.createElement(ui.BestRoute, {
2439
- error: bestRouteError,
2440
- loading: fetchingBestRoute,
2441
- data: getFormatedBestRoute(bestRoute),
2442
- totalFee: numberToString(totalFeeInUsd, 0, 2),
2443
- feeWarning: highFee,
2444
- totalTime: secondsToString(totalArrivalTime(bestRoute))
2445
- })), (errorMessage || hasLimitError(bestRoute)) && React__default.createElement(Alerts, null, errorMessage && React__default.createElement(ui.Alert, {
2446
- type: "error"
2447
- }, errorMessage), hasLimitError(bestRoute) && React__default.createElement(ui.Alert, {
2448
- type: "error",
2449
- title: `${swap?.swapperId} Limit`
2450
- }, React__default.createElement(React__default.Fragment, null, React__default.createElement(ui.Typography, {
2451
- variant: "body2"
2452
- }, `${fromAmountRangeError}, Yours: ${numberToString(swap?.fromAmount || null)} ${swap?.from.symbol}`), React__default.createElement(ui.Typography, {
2453
- variant: "body2"
2454
- }, recommendation)))), React__default.createElement(Footer, null, React__default.createElement(ui.Button, {
2455
- type: "primary",
2456
- align: "grow",
2457
- size: "large",
2458
- disabled: swapButtonState.disabled,
2459
- onClick: () => {
2460
- if (swapButtonState.title === 'Connect Wallet') navigate(navigationRoutes.wallets);else {
2461
- navigate(navigationRoutes.confirmSwap, {
2462
- replace: true
2463
- });
2464
- }
2465
- }
2466
- }, swapButtonState.title), React__default.createElement(BottomLogo, null)));
2467
- }
2468
-
2469
- function LiquiditySourcePage(_ref) {
2470
- let {
2471
- supportedSwappers
2472
- } = _ref;
2473
- const swappers = useMetaStore.use.meta().swappers;
2474
- const loadingMetaStatus = useMetaStore.use.loadingStatus();
2475
- const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
2476
- const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
2477
- const toggleAllLiquiditySources = useSettingsStore.use.toggleAllLiquiditySources();
2478
- const {
2479
- navigateBackFrom
2480
- } = useNavigateBack();
2481
- const uniqueSwappersGroups = [];
2482
- removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
2483
- return swappers.find(s => s.swapperGroup === swapperGroup);
2484
- }).find(s => {
2485
- if (s) {
2486
- for (const type of s.types) {
2487
- uniqueSwappersGroups.push({
2488
- title: s.swapperGroup,
2489
- logo: s.logo,
2490
- type,
2491
- selected: !disabledLiquiditySources.includes(s.swapperGroup)
2492
- });
2493
- }
2494
- }
2495
- });
2496
- return React__default.createElement(ui.LiquiditySourcesSelector, {
2497
- toggleAll: toggleAllLiquiditySources,
2498
- list: supportedSwappers ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s === item.title).length > 0) : uniqueSwappersGroups,
2499
- onChange: liquiditySource => toggleLiquiditySource(liquiditySource.title),
2500
- onBack: navigateBackFrom.bind(null, navigationRoutes.liquiditySources),
2501
- loadingStatus: loadingMetaStatus
2502
- });
2503
- }
2504
-
2505
- function SelectChainPage(props) {
2506
- const {
2507
- type,
2508
- supportedChains
2509
- } = props;
2510
- const blockchains = supportedChains ? useMetaStore.use.meta().blockchains.filter(chain => supportedChains.includes(chain.name)) : useMetaStore.use.meta().blockchains;
2511
- const loadingStatus = useMetaStore.use.loadingStatus();
2512
- const fromChain = useBestRouteStore.use.fromChain();
2513
- const toChain = useBestRouteStore.use.toChain();
2514
- const setFromChain = useBestRouteStore.use.setFromChain();
2515
- const setToChain = useBestRouteStore.use.setToChain();
2516
- const {
2517
- navigateBackFrom
2518
- } = useNavigateBack();
2519
- return React__default.createElement(ui.BlockchainSelector, {
2520
- type: type === 'from' ? 'Source' : 'Destination',
2521
- list: blockchains,
2522
- selected: type === 'from' ? fromChain : toChain,
2523
- loadingStatus: loadingStatus,
2524
- onChange: chain => {
2525
- if (type === 'from') setFromChain(chain, true);else setToChain(chain, true);
2526
- navigateBackFrom(navigationRoutes.fromChain);
2527
- },
2528
- onBack: navigateBackFrom.bind(null, navigationRoutes.fromChain)
2529
- });
2530
- }
2531
-
2532
- function SelectTokenPage(props) {
2533
- const {
2534
- navigateBackFrom
2535
- } = useNavigateBack();
2536
- const {
2537
- type,
2538
- supportedTokens
2539
- } = props;
2540
- const sourceTokens = useBestRouteStore.use.sourceTokens();
2541
- const destinationTokens = useBestRouteStore.use.destinationTokens();
2542
- const supportedSourceTokens = supportedTokens ? sourceTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token))) : sourceTokens;
2543
- const supportedDestinationTokens = supportedTokens ? destinationTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token))) : destinationTokens;
2544
- const fromToken = useBestRouteStore.use.fromToken();
2545
- const toToken = useBestRouteStore.use.toToken();
2546
- const setFromToken = useBestRouteStore.use.setFromToken();
2547
- const setToToken = useBestRouteStore.use.setToToken();
2548
- const loadingMetaStatus = useMetaStore.use.loadingStatus();
2549
- return React__default.createElement(ui.TokenSelector, {
2550
- type: type === 'from' ? 'Source' : 'Destination',
2551
- list: type == 'from' ? supportedSourceTokens : supportedDestinationTokens,
2552
- selected: type === 'from' ? fromToken : toToken,
2553
- onChange: token => {
2554
- if (type === 'from') setFromToken(token);else setToToken(token);
2555
- navigateBackFrom(navigationRoutes.fromToken);
2556
- },
2557
- onBack: navigateBackFrom.bind(null, navigationRoutes.fromToken),
2558
- loadingStatus: loadingMetaStatus
2559
- });
2560
- }
2561
-
2562
- function SettingsPage(_ref) {
2563
- let {
2564
- supportedSwappers,
2565
- singleTheme
2566
- } = _ref;
2567
- const slippage = useSettingsStore.use.slippage();
2568
- const setSlippage = useSettingsStore.use.setSlippage();
2569
- const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
2570
- const customSlippage = useSettingsStore.use.customSlippage();
2571
- const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
2572
- const theme = useSettingsStore.use.theme();
2573
- const setTheme = useSettingsStore.use.setTheme();
2574
- const swappers = useMetaStore.use.meta().swappers;
2575
- const navigate = reactRouterDom.useNavigate();
2576
- const {
2577
- navigateBackFrom
2578
- } = useNavigateBack();
2579
- const infiniteApprove = useSettingsStore.use.infiniteApprove();
2580
- const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
2581
- const loadingMetaStatus = useMetaStore.use.loadingStatus();
2582
- const uniqueSwappersGroups = [];
2583
- removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
2584
- return swappers.find(s => s.swapperGroup === swapperGroup);
2585
- }).find(s => {
2586
- if (s) {
2587
- for (const type of s.types) {
2588
- uniqueSwappersGroups.push({
2589
- title: s.swapperGroup,
2590
- logo: s.logo,
2591
- type,
2592
- selected: !disabledLiquiditySources.includes(s.swapperGroup)
2593
- });
2594
- }
2595
- }
2596
- });
2597
- supportedSwappers && uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s === item.title).length > 0);
2598
- const supportedUniqueSwappersGroups = supportedSwappers ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s === item.title).length > 0) : uniqueSwappersGroups;
2599
- return React__default.createElement(ui.Settings, {
2600
- slippages: SLIPPAGES,
2601
- selectedSlippage: slippage,
2602
- onSlippageChange: slippage => setSlippage(slippage),
2603
- onLiquiditySourcesClick: () => navigate(navigationRoutes.liquiditySources),
2604
- onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
2605
- liquiditySources: supportedUniqueSwappersGroups,
2606
- selectedLiquiditySources: supportedUniqueSwappersGroups.filter(s => s.selected),
2607
- singleTheme: singleTheme,
2608
- customSlippage: customSlippage,
2609
- onCustomSlippageChange: setCustomSlippage,
2610
- minSlippage: MIN_SLIPPGAE,
2611
- maxSlippage: MAX_SLIPPAGE,
2612
- selectedTheme: theme,
2613
- onThemeChange: setTheme,
2614
- infiniteApprove: infiniteApprove,
2615
- toggleInfiniteApprove: toggleInfiniteApprove,
2616
- loadingStatus: loadingMetaStatus
2617
- });
2618
- }
2619
-
2620
- const ListContainer = /*#__PURE__*/ui.styled('div', {
2621
- display: 'grid',
2622
- gap: '.5rem',
2623
- gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
2624
- alignContent: 'baseline',
2625
- padding: '0.5rem',
2626
- overflowY: 'auto'
2627
- });
2628
- const LoaderContainer = /*#__PURE__*/ui.styled('div', {
2629
- display: 'flex',
2630
- justifyContent: 'center',
2631
- width: '100%',
2632
- position: 'absolute',
2633
- top: '50%'
2634
- });
2635
- const AlertContainer = /*#__PURE__*/ui.styled('div', {
2636
- paddingBottom: '$16'
2637
- });
2638
- function WalletsPage(_ref) {
2639
- let {
2640
- supportedWallets,
2641
- multiWallets
2642
- } = _ref;
2643
- const {
2644
- navigateBackFrom
2645
- } = useNavigateBack();
2646
- const {
2647
- state,
2648
- disconnect,
2649
- getWalletInfo,
2650
- connect
2651
- } = walletsCore.useWallets();
2652
- const wallets = getlistWallet(state, getWalletInfo, supportedWallets || Object.values(walletsShared.WalletTypes));
2653
- const walletsRef = React.useRef();
2654
- let sortedWallets = walletsShared.detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
2655
- sortedWallets = sortWalletsBasedOnState(sortedWallets);
2656
- const [walletErrorMessage, setWalletErrorMessage] = React.useState('');
2657
- const toggleConnectWalletsButton = useUiStore.use.toggleConnectWalletsButton();
2658
- const loadingMetaStatus = useMetaStore.use.loadingStatus();
2659
- const {
2660
- t
2661
- } = reactI18next.useTranslation();
2662
- const onSelectWallet = async type => {
2663
- const wallet = state(type);
2664
- try {
2665
- if (walletErrorMessage) setWalletErrorMessage('');
2666
- if (wallet.connected) {
2667
- await disconnect(type);
2668
- } else {
2669
- if (!multiWallets && !!wallets.find(w => w.state === ui.WalletState.CONNECTED)) {
2670
- return;
2671
- }
2672
- await connect(type);
2673
- }
2674
- } catch (e) {
2675
- setWalletErrorMessage('Error: ' + e?.message);
2676
- }
2677
- };
2678
- const disconnectConnectingWallets = () => {
2679
- const connectingWallets = walletsRef.current?.filter(wallet => wallet.state === ui.WalletState.CONNECTING) || [];
2680
- for (const wallet of connectingWallets) {
2681
- disconnect(wallet.type);
2682
- }
2683
- };
2684
- React.useEffect(() => {
2685
- toggleConnectWalletsButton();
2686
- return () => {
2687
- disconnectConnectingWallets();
2688
- toggleConnectWalletsButton();
2689
- };
2690
- }, []);
2691
- React.useEffect(() => {
2692
- walletsRef.current = wallets;
2693
- }, [wallets]);
2694
- return React__default.createElement(ui.SecondaryPage, {
2695
- title: t('Select Wallet') || '',
2696
- textField: false,
2697
- onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
2698
- }, React__default.createElement(React__default.Fragment, null, walletErrorMessage && React__default.createElement(AlertContainer, null, React__default.createElement(ui.Alert, {
2699
- type: "error",
2700
- title: walletErrorMessage
2701
- })), loadingMetaStatus === 'loading' && React__default.createElement(LoaderContainer, {
2702
- className: "loader"
2703
- }, React__default.createElement(ui.Spinner, {
2704
- size: 24
2705
- })), loadingMetaStatus === 'failed' && React__default.createElement(ui.LoadingFailedAlert, null), React__default.createElement(ListContainer, null, loadingMetaStatus === 'success' && sortedWallets.map((wallet, index) => React__default.createElement(ui.Wallet, Object.assign({}, wallet, {
2706
- key: `${index}-${wallet.type}`,
2707
- onClick: onSelectWallet
2708
- }))))));
2709
- }
2710
-
2711
- function timeSince(timeMillis) {
2712
- const seconds = Math.floor((new Date().getTime() - timeMillis) / 1000);
2713
- let intervalType;
2714
- let interval = Math.floor(seconds / 31536000);
2715
- if (interval >= 1) {
2716
- intervalType = 'year';
2717
- } else {
2718
- interval = Math.floor(seconds / 2592000);
2719
- if (interval >= 1) {
2720
- intervalType = 'month';
2721
- } else {
2722
- interval = Math.floor(seconds / 86400);
2723
- if (interval >= 1) {
2724
- intervalType = 'day';
2725
- } else {
2726
- interval = Math.floor(seconds / 3600);
2727
- if (interval >= 1) {
2728
- intervalType = 'hour';
2729
- } else {
2730
- interval = Math.floor(seconds / 60);
2731
- if (interval >= 1) {
2732
- intervalType = 'minute';
2733
- } else {
2734
- interval = seconds;
2735
- intervalType = 'second';
2736
- }
2737
- }
2738
- }
2739
- }
2740
- }
2741
- if (interval > 1 || interval === 0) {
2742
- intervalType += 's';
2743
- }
2744
- return interval + ' ' + intervalType;
2745
- }
2746
- function getSwapDate(pendingSwap) {
2747
- return pendingSwap.finishTime ? `${timeSince(parseInt(pendingSwap.finishTime))} ago` : `${timeSince(parseInt(pendingSwap.creationTime))} ago`;
2748
- }
2749
-
2750
- const PlaceholderContainer = /*#__PURE__*/ui.styled('div', {
2751
- height: '450px'
2752
- });
2753
- const LoaderContainer$1 = /*#__PURE__*/ui.styled('div', {
2754
- display: 'flex',
2755
- justifyContent: 'center',
2756
- width: '100%',
2757
- paddingTop: '33%',
2758
- flex: 1
2759
- });
2760
- function SwapDetailsPlaceholder(props) {
2761
- const {
2762
- requestId,
2763
- loading,
2764
- onBack
2765
- } = props;
2766
- return React__default.createElement(ui.SecondaryPage, {
2767
- title: "Swap Details",
2768
- textField: false,
2769
- onBack: onBack
2770
- }, React__default.createElement(PlaceholderContainer, null, loading ? React__default.createElement(LoaderContainer$1, null, React__default.createElement(ui.Spinner, {
2771
- size: 24
2772
- })) : React__default.createElement(ui.Alert, {
2773
- type: "secondary",
2774
- title: `Swap with request ID = ${requestId} not found.`
2775
- })));
2776
- }
2777
-
2778
- function SwapDetailsPage() {
2779
- const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
2780
- const {
2781
- canSwitchNetworkTo,
2782
- connect
2783
- } = walletsCore.useWallets();
2784
- const retry = useBestRouteStore.use.retry();
2785
- const navigate = reactRouterDom.useNavigate();
2786
- const {
2787
- navigateBackFrom
2788
- } = useNavigateBack();
2789
- const [isCopied, handleCopy] = ui.useCopyToClipboard(2000);
2790
- const {
2791
- manager,
2792
- state
2793
- } = queueManagerReact.useManager();
2794
- const pendingSwaps = getPendingSwaps(manager);
2795
- const selectedSwap = pendingSwaps.find(_ref => {
2796
- let {
2797
- swap
2798
- } = _ref;
2799
- return swap.requestId === selectedSwapRequestId;
2800
- });
2801
- const onCancel = () => {
2802
- const swap = manager?.get(selectedSwap?.id);
2803
- if (swap) queueManagerRangoPreset.cancelSwap(swap);
2804
- };
2805
- const swap = selectedSwap?.swap;
2806
- const loading = !state.loadedFromPersistor;
2807
- if (!swap) return React__default.createElement(SwapDetailsPlaceholder, {
2808
- requestId: selectedSwapRequestId || '',
2809
- loading: loading,
2810
- onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails)
2811
- });
2812
- const currentStep = queueManagerRangoPreset.getCurrentStep(swap);
2813
- const currentStepBlockchain = currentStep ? queueManagerRangoPreset.getCurrentBlockchainOfOrNull(swap, currentStep) : null;
2814
- const currentStepWallet = currentStep ? queueManagerRangoPreset.getRelatedWalletOrNull(swap, currentStep) : null;
2815
- const currentStepNetworkStatus = currentStep?.networkStatus;
2816
- const swapMessages = getSwapMessages(swap, currentStep);
2817
- const networkWarningState = isNetworkStatusInWarningState(currentStep);
2818
- const swapDate = getSwapDate(swap);
2819
- const shouldRetry = shouldRetrySwap(swap);
2820
- const switchNetwork = !!currentStepBlockchain && !!currentStepWallet?.walletType && currentStepNetworkStatus === queueManagerRangoPreset.PendingSwapNetworkStatus.WaitingForNetworkChange && canSwitchNetworkTo(currentStepWallet?.walletType, currentStepBlockchain) ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain) : undefined;
2821
- const lastConvertedTokenInFailedSwap = getLastConvertedTokenInFailedSwap(swap);
2822
- return React__default.createElement(ui.SwapHistory, Object.assign({
2823
- onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
2824
- /* TODO: It was temporarily removed to find a better solution*/
2825
- /*
2826
- previewInputs={
2827
- <>
2828
- <TokenPreview
2829
- chain={{
2830
- displayName: firstStep?.fromBlockchain || '',
2831
- logo: firstStep?.fromBlockchainLogo || '',
2832
- }}
2833
- token={{
2834
- symbol: firstStep?.fromSymbol || '',
2835
- image: firstStep?.fromLogo || '',
2836
- }}
2837
- amount={fromAmount}
2838
- label={t('From')}
2839
- loadingStatus={'success'}
2840
- />
2841
- <Divider size={12} />
2842
- <TokenPreview
2843
- chain={{
2844
- displayName: lastStep?.toBlockchain || '',
2845
- logo: lastStep?.toBlockchainLogo || '',
2846
- }}
2847
- token={{
2848
- symbol: lastStep?.toSymbol || '',
2849
- image: lastStep?.toLogo || '',
2850
- }}
2851
- amount={toAmount}
2852
- label={t('To')}
2853
- loadingStatus={'success'}
2854
- />
2855
- </>
2856
- }
2857
- */
2858
- pendingSwap: getFormatedPendingSwap(swap),
2859
- onCopy: handleCopy,
2860
- isCopied: isCopied,
2861
- onCancel: onCancel,
2862
- shortMessage: swapMessages.shortMessage,
2863
- detailedMessage: swapMessages.detailedMessage,
2864
- currentStepBlockchain: currentStepBlockchain || '',
2865
- switchNetwork: switchNetwork,
2866
- type: networkWarningState ? 'warning' : swap.extraMessageSeverity || undefined,
2867
- date: swapDate
2868
- }, shouldRetry && {
2869
- onRetry: () => {
2870
- retry(swap);
2871
- setTimeout(() => {
2872
- navigate(navigationRoutes.home);
2873
- }, 0);
2874
- }
2875
- }, lastConvertedTokenInFailedSwap && {
2876
- lastConvertedTokenInFailedSwap: {
2877
- blockchain: lastConvertedTokenInFailedSwap.blockchain,
2878
- outputAmount: lastConvertedTokenInFailedSwap.outputAmount || '',
2879
- symbol: lastConvertedTokenInFailedSwap.symbol
2880
- }
2881
- }));
2882
- }
2883
-
2884
- const getAbsolutePath = path => path.replace('/', '');
2885
- function AppRoutes(props) {
2886
- const {
2887
- config
2888
- } = props;
2889
- return reactRouterDom.useRoutes([{
2890
- path: navigationRoutes.home,
2891
- element: React__default.createElement(Home, null)
2892
- }, {
2893
- path: navigationRoutes.fromChain,
2894
- element: React__default.createElement(SelectChainPage, {
2895
- type: "from",
2896
- supportedChains: config?.from?.blockchains
2897
- })
2898
- }, {
2899
- path: navigationRoutes.toChain,
2900
- element: React__default.createElement(SelectChainPage, {
2901
- type: "to",
2902
- supportedChains: config?.to?.blockchains
2903
- })
2904
- }, {
2905
- path: navigationRoutes.fromToken,
2906
- element: React__default.createElement(SelectTokenPage, {
2907
- type: "from",
2908
- supportedTokens: config?.from?.tokens
2909
- })
2910
- }, {
2911
- path: navigationRoutes.toToken,
2912
- element: React__default.createElement(SelectTokenPage, {
2913
- type: "to",
2914
- supportedTokens: config?.to?.tokens
2915
- })
2916
- }, {
2917
- path: navigationRoutes.settings,
2918
- element: React__default.createElement(SettingsPage, {
2919
- singleTheme: config?.theme?.singleTheme,
2920
- supportedSwappers: config?.liquiditySources
2921
- })
2922
- }, {
2923
- path: navigationRoutes.liquiditySources,
2924
- element: React__default.createElement(LiquiditySourcePage, {
2925
- supportedSwappers: config?.liquiditySources
2926
- })
2927
- }, {
2928
- path: navigationRoutes.swaps,
2929
- element: React__default.createElement(HistoryPage, null)
2930
- }, {
2931
- path: navigationRoutes.swapDetails,
2932
- element: React__default.createElement(SwapDetailsPage, null)
2933
- }, {
2934
- path: navigationRoutes.wallets,
2935
- element: React__default.createElement(WalletsPage, {
2936
- supportedWallets: config?.wallets,
2937
- multiWallets: typeof config?.multiWallets === 'undefined' ? true : config.multiWallets
2938
- })
2939
- }, {
2940
- path: getAbsolutePath(navigationRoutes.confirmSwap),
2941
- element: React__default.createElement(ConfirmSwapPage, null)
2942
- }]);
2943
- }
2944
-
2945
- const Header = /*#__PURE__*/ui.styled('div', {
2946
- display: 'flex',
2947
- width: '100%',
2948
- justifyContent: 'end',
2949
- '.balance': {
2950
- display: 'flex'
2951
- }
2952
- });
2953
- const WalletImages = /*#__PURE__*/ui.styled('div', {
2954
- display: 'flex',
2955
- paddingLeft: '12px'
2956
- });
2957
- const WalletImageContainer = /*#__PURE__*/ui.styled('div', {
2958
- marginLeft: -15,
2959
- marginRight: '$6',
2960
- '& img': {
2961
- borderRadius: '50%'
2962
- }
2963
- });
2964
- function Layout(_ref) {
2965
- let {
2966
- config
2967
- } = _ref;
2968
- const navigate = reactRouterDom.useNavigate();
2969
- const {
2970
- connectedWallets,
2971
- selectedWallets
2972
- } = useWalletsStore();
2973
- const {
2974
- getWalletInfo
2975
- } = walletsCore.useWallets();
2976
- const connectedWalletsImages = removeDuplicateFrom(getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo).map(w => w.image));
2977
- const {
2978
- blockchains,
2979
- tokens
2980
- } = useMetaStore.use.meta();
2981
- const setFromChain = useBestRouteStore.use.setFromChain();
2982
- const setFromToken = useBestRouteStore.use.setFromToken();
2983
- const setToChain = useBestRouteStore.use.setToChain();
2984
- const setToToken = useBestRouteStore.use.setToToken();
2985
- const setInputAmount = useBestRouteStore.use.setInputAmount();
2986
- const setAffiliateRef = useSettingsStore.use.setAffiliateRef();
2987
- const totalBalance = calculateWalletUsdValue(connectedWallets);
2988
- const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
2989
- const loadingMetaStatus = useMetaStore.use.loadingStatus();
2990
- const fetchingBalance = useWalletsStore(fetchingBalanceSelector);
2991
- const {
2992
- t
2993
- } = reactI18next.useTranslation();
2994
- React.useEffect(() => {
2995
- if (loadingMetaStatus === 'success') {
2996
- const chain = blockchains.find(chain => chain.name === config?.to?.blockchain);
2997
- const token = tokens.find(t => tokensAreEqual(t, config?.to?.token || null));
2998
- setToChain(chain || null);
2999
- setToToken(token || null);
3000
- }
3001
- }, [config?.to?.token, config?.to?.blockchain, loadingMetaStatus]);
3002
- React.useEffect(() => {
3003
- setInputAmount(config?.amount?.toString() || '');
3004
- }, [config?.amount]);
3005
- React.useEffect(() => {
3006
- if (loadingMetaStatus === 'success') {
3007
- const chain = blockchains.find(chain => chain.name === config?.from?.blockchain);
3008
- const token = tokens.find(t => tokensAreEqual(t, config?.from?.token || null));
3009
- setFromChain(chain || null);
3010
- setFromToken(token || null);
3011
- }
3012
- }, [config?.from?.token, config?.from?.blockchain, loadingMetaStatus]);
3013
- React.useEffect(() => {
3014
- setAffiliateRef(config?.affiliateRef || null);
3015
- }, [config?.affiliateRef]);
3016
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(Header, null, React__default.createElement(ui.Button, {
3017
- size: "small",
3018
- suffix: React__default.createElement(ui.AddWalletIcon, {
3019
- size: 20
3020
- }),
3021
- variant: "ghost",
3022
- flexContent: true,
3023
- loading: loadingMetaStatus === 'loading',
3024
- disabled: loadingMetaStatus === 'failed',
3025
- onClick: () => {
3026
- if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
3027
- },
3028
- prefix: connectedWalletsImages?.length ? React__default.createElement(WalletImages, null, connectedWalletsImages.map((walletImage, index) => React__default.createElement(WalletImageContainer, {
3029
- key: index
3030
- }, React__default.createElement(ui.Image, {
3031
- src: walletImage,
3032
- size: 24
3033
- })))) : null
3034
- }, React__default.createElement("div", {
3035
- className: "balance"
3036
- }, React__default.createElement(ui.Typography, {
3037
- variant: "body2"
3038
- }, !connectedWallets?.length ? t('Connect Wallet') : `$${totalBalance || 0}`), fetchingBalance && React__default.createElement(ui.Spinner, null)))), React__default.createElement(AppRoutes, {
3039
- config: config
3040
- }));
3041
- }
3042
-
3043
- const globalFont = fontFamily => ui.globalCss({
3044
- '@import': ["url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')", "url('https://fonts.cdnfonts.com/css/times-new-roman')"],
3045
- body: {
3046
- fontFamily
3047
- }
3048
- })();
3049
-
3050
- function usePrevious(value) {
3051
- // The ref object is a generic container whose current property is mutable ...
3052
- // ... and can hold any value, similar to an instance property on a class
3053
- const ref = React.useRef();
3054
- // Store current value in ref
3055
- React.useEffect(() => {
3056
- ref.current = value;
3057
- }, [value]); // Only re-run if value changes
3058
- // Return previous value (happens before update in useEffect above)
3059
- return ref.current;
3060
- }
3061
-
3062
- function useTheme(_ref) {
3063
- let {
3064
- colors: themeColors,
3065
- fontFamily = 'Roboto',
3066
- borderRadius = 8,
3067
- mode = 'auto'
3068
- } = _ref;
3069
- const theme = useSettingsStore.use.theme();
3070
- const fetchMeta = useMetaStore.use.fetchMeta();
3071
- const setTheme = useSettingsStore.use.setTheme();
3072
- const light = themeColors?.light;
3073
- const dark = themeColors?.dark;
3074
- const neutral = light?.neutral || '#fafafa';
3075
- const background = light?.background || '#fff';
3076
- const foreground = light?.foreground || '#000';
3077
- const darkColors = {
3078
- ...ui.generateRangeColors('primary', 'dark', dark?.primary),
3079
- ...ui.generateRangeColors('error', 'dark', dark?.error),
3080
- ...ui.generateRangeColors('warning', 'dark', dark?.warning),
3081
- ...ui.generateRangeColors('success', 'dark', dark?.success),
3082
- ...ui.generateRangeColors('neutral', 'dark', dark?.neutral),
3083
- surface: dark?.surface,
3084
- background: dark?.background,
3085
- foreground: dark?.foreground
3086
- };
3087
- const lightColors = {
3088
- surface: light?.surface || '#fff',
3089
- ...ui.generateRangeColors('primary', 'light', light?.primary || '#5FA425'),
3090
- ...ui.generateRangeColors('error', 'light', light?.error || '#FF0000'),
3091
- ...ui.generateRangeColors('warning', 'light', light?.warning || '#F5A623'),
3092
- ...ui.generateRangeColors('success', 'light', light?.success || '#0070F3'),
3093
- ...ui.generateRangeColors('neutral', 'light', neutral),
3094
- background,
3095
- foreground
3096
- };
3097
- const customLightTheme = ui.createTheme({
3098
- colors: lightColors,
3099
- radii: {
3100
- 5: `${borderRadius}px`
3101
- },
3102
- shadows: {
3103
- s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${light?.neutral || '#f0f2f5'}, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`
3104
- }
3105
- });
3106
- const customDarkTheme = ui.createTheme({
3107
- colors: {
3108
- ...lightColors,
3109
- ...ui.generateRangeColors('neutral', 'dark', '#111111'),
3110
- foreground: background,
3111
- background: foreground,
3112
- surface: '#000',
3113
- ...JSON.parse(JSON.stringify(darkColors))
3114
- },
3115
- radii: {
3116
- 5: `${borderRadius}px`
3117
- },
3118
- shadows: {
3119
- s: `0px 3px 5px 3px ${dark?.neutral || '#222'}, 0px 6px 10px 3px ${dark?.neutral || '#222'}, 0px 1px 18px 3px ${dark?.neutral || '#222'}`
3120
- }
3121
- });
3122
- const [OSTheme, setOSTheme] = React.useState('light');
3123
- React.useEffect(() => {
3124
- (async () => {
3125
- await fetchMeta();
3126
- })();
3127
- const switchTheme = event => {
3128
- if (event.matches) setOSTheme('dark');else setOSTheme('light');
3129
- };
3130
- if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
3131
- setOSTheme('dark');
3132
- }
3133
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme);
3134
- return () => {
3135
- window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', switchTheme);
3136
- };
3137
- }, []);
3138
- React.useEffect(() => {
3139
- if (mode !== 'auto') setTheme(mode);
3140
- }, [mode]);
3141
- const prevFont = usePrevious(fontFamily);
3142
- React.useLayoutEffect(() => {
3143
- const {
3144
- classList
3145
- } = document.body;
3146
- if (prevFont) classList.remove(`font_${prevFont.replace(/ /g, '')}`);
3147
- classList.add(`font_${fontFamily.replace(/ /g, '')}`);
3148
- }, [fontFamily]);
3149
- const getActiveTheme = () => {
3150
- if (theme === 'auto') return OSTheme === 'dark' ? customDarkTheme : customLightTheme;else return theme === 'dark' ? customDarkTheme : customLightTheme;
3151
- };
3152
- return {
3153
- activeTheme: getActiveTheme()
3154
- };
3155
- }
3156
-
3157
- function useSelectLanguage() {
3158
- const {
3159
- i18n
3160
- } = reactI18next.useTranslation();
3161
- // @ts-ignore
3162
- const currentLanguage = i18n?.language || 'en';
3163
- const changeLanguage = value => {
3164
- if (currentLanguage !== value) {
3165
- // @ts-ignore
3166
- i18n.changeLanguage(value);
3167
- }
3168
- };
3169
- return {
3170
- changeLanguage,
3171
- currentLanguage
3172
- };
3173
- }
3174
-
3175
- var swap = "SWAP";
3176
- var From = "You sell";
3177
- var To = "You receive";
3178
- var Balance = "Balance";
3179
- var Max = "Max";
3180
- var Chain = "Chain";
3181
- var Token = "Token";
3182
- var Source = "Source";
3183
- var Destination = "Destination";
3184
- var en = {
3185
- swap: swap,
3186
- "Connect Wallet": "Connect Wallet",
3187
- "Powered By": "Powered By",
3188
- From: From,
3189
- To: To,
3190
- Balance: Balance,
3191
- Max: Max,
3192
- Chain: Chain,
3193
- Token: Token,
3194
- Source: Source,
3195
- Destination: Destination,
3196
- "Select Wallet": "Connect Your Wallet"
3197
- };
3198
-
3199
- var swap$1 = "TAKAS";
3200
- var From$1 = "İtibaren";
3201
- var To$1 = "İle";
3202
- var Max$1 = "maks.";
3203
- var Chain$1 = "Zincir";
3204
- var Token$1 = "Jeton";
3205
- var tr = {
3206
- swap: swap$1,
3207
- "Select Wallet": "Cüzdan Seç",
3208
- "Powered By": "Tarafından desteklenmektedir",
3209
- "Connect Wallet": "Cüzdanı Bağla",
3210
- From: From$1,
3211
- To: To$1,
3212
- Max: Max$1,
3213
- Chain: Chain$1,
3214
- Token: Token$1
3215
- };
3216
-
3217
- const languages = ['en', 'tr'];
3218
- i18n__default.use(Backend)
3219
- // detect user language
3220
- .use(LanguageDetector)
3221
- // pass the i18n instance to react-i18next.
3222
- .use(reactI18next.initReactI18next).init({
3223
- resources: {
3224
- en: {
3225
- translation: en
3226
- },
3227
- tr: {
3228
- translation: tr
3229
- }
3230
- },
3231
- fallbackLng: 'en',
3232
- debug: true,
3233
- whitelist: languages
3234
- });
3235
-
3236
- function QueueManager(props) {
3237
- const {
3238
- providers,
3239
- getSigners,
3240
- state,
3241
- connect,
3242
- canSwitchNetworkTo,
3243
- getWalletInfo
3244
- } = walletsCore.useWallets();
3245
- const swapQueueDef = React.useMemo(() => {
3246
- return queueManagerRangoPreset.makeQueueDefinition({
3247
- API_KEY: getConfig('API_KEY')
3248
- });
3249
- }, []);
3250
- const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
3251
- const {
3252
- blockchains
3253
- } = useMetaStore.use.meta();
3254
- const connectedWallets = useWalletsStore.use.connectedWallets();
3255
- const wallets = {
3256
- blockchains: connectedWallets.map(wallet => ({
3257
- accounts: [wallet],
3258
- name: wallet.chain
3259
- }))
3260
- };
3261
- const switchNetwork = (wallet, network) => {
3262
- if (!canSwitchNetworkTo(wallet, network)) {
3263
- return undefined;
3264
- }
3265
- return connect(wallet, network);
3266
- };
3267
- const isMobileWallet = walletType => !!getWalletInfo(walletType).mobileWallet;
3268
- // TODO: this code copy & pasted from rango, should be refactored.
3269
- const allBlockchains = blockchains.filter(blockchain => blockchain.enabled).reduce((blockchainsObj, blockchain) => (blockchainsObj[blockchain.name] = blockchain, blockchainsObj), {});
3270
- const evmBasedChains = blockchains.filter(rangoSdk.isEvmBlockchain);
3271
- const getSupportedChainNames = type => {
3272
- const {
3273
- supportedChains
3274
- } = getWalletInfo(type);
3275
- return walletAndSupportedChainsNames(supportedChains);
3276
- };
3277
- const allProviders = providers();
3278
- const notifier = data => {
3279
- const lastStep = data.swap?.steps[data.swap.steps.length - 1];
3280
- const outputAmount = data.step?.outputAmount || '';
3281
- const step = data.step || lastStep;
3282
- if (data.eventType === 'task_completed' || data.eventType === 'step_completed_with_output' && lastStep?.id !== data.step?.id || !!outputAmount) {
3283
- const fromAccount = connectedWallets.find(account => account.chain === step?.fromBlockchain);
3284
- const toAccount = step?.fromBlockchain !== step?.toBlockchain && connectedWallets.find(wallet => wallet.chain === step?.toBlockchain);
3285
- fromAccount && getOneOfWalletsDetails(fromAccount);
3286
- toAccount && getOneOfWalletsDetails(toAccount);
3287
- }
3288
- };
3289
- const context = {
3290
- meta: {
3291
- blockchains: allBlockchains,
3292
- evmBasedChains: evmBasedChains,
3293
- evmNetworkChainInfo: walletsShared.convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
3294
- getSupportedChainNames
3295
- },
3296
- getSigners,
3297
- //todo: remove Network type
3298
- //@ts-ignore
3299
- wallets,
3300
- providers: allProviders,
3301
- switchNetwork,
3302
- connect,
3303
- state,
3304
- isMobileWallet,
3305
- notifier
3306
- };
3307
- return React__default.createElement(queueManagerReact.Provider, {
3308
- queuesDefs: [swapQueueDef],
3309
- context: context,
3310
- onPersistedDataLoaded: manager => {
3311
- queueManagerRangoPreset.checkWaitingForNetworkChange(manager);
3312
- },
3313
- isPaused: false
3314
- }, props.children);
3315
- }
3316
-
3317
- const Widget = _ref => {
3318
- let {
3319
- config
3320
- } = _ref;
3321
- globalFont(config?.theme?.fontFamily || 'Roboto');
3322
- const {
3323
- activeTheme
3324
- } = useTheme({
3325
- ...config?.theme
3326
- });
3327
- const {
3328
- blockchains
3329
- } = useMetaStore.use.meta();
3330
- const disconnectWallet = useWalletsStore.use.disconnectWallet();
3331
- const connectWallet = useWalletsStore.use.connectWallet();
3332
- const {
3333
- changeLanguage
3334
- } = useSelectLanguage();
3335
- const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
3336
- const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] = React.useState('');
3337
- const [disconnectedWallet, setDisconnectedWallet] = React.useState();
3338
- const currentPage = useUiStore.use.currentPage();
3339
- const evmBasedChainNames = blockchains.filter(rangoSdk.isEvmBlockchain).map(chain => chain.name);
3340
- React.useMemo(() => {
3341
- if (config?.apiKey) {
3342
- initConfig({
3343
- API_KEY: config?.apiKey
3344
- });
3345
- }
3346
- }, [config]);
3347
- const onUpdateState = (type, event, value, state, supportedChains) => {
3348
- if (event === walletsCore.Events.ACCOUNTS) {
3349
- if (value) {
3350
- const supportedChainNames = walletAndSupportedChainsNames(supportedChains);
3351
- const data = prepareAccountsForWalletStore(type, value, evmBasedChainNames, supportedChainNames);
3352
- connectWallet(data);
3353
- } else {
3354
- disconnectWallet(type);
3355
- }
3356
- }
3357
- if (event === walletsCore.Events.ACCOUNTS && state.connected) {
3358
- const key = `${type}-${state.network}-${value}`;
3359
- if (state.connected) {
3360
- setLastConnectedWalletWithNetwork(key);
3361
- }
3362
- }
3363
- if (event === walletsCore.Events.NETWORK && state.network) {
3364
- const key = `${type}-${state.network}`;
3365
- setLastConnectedWalletWithNetwork(key);
3366
- }
3367
- };
3368
- let providers = providerAll.allProviders();
3369
- React.useEffect(() => {
3370
- const wallets = config?.wallets;
3371
- clearConnectedWallet();
3372
- providers = !wallets ? providerAll.allProviders() : providerAll.allProviders().filter(provider => {
3373
- const type = provider.config.type;
3374
- return wallets.find(w => w === type);
3375
- });
3376
- }, [config?.wallets]);
3377
- React.useEffect(() => {
3378
- changeLanguage(config?.language || 'en');
3379
- }, [config?.language]);
3380
- return React__default.createElement(walletsCore.Provider, {
3381
- allBlockChains: blockchains,
3382
- providers: providers,
3383
- onUpdateState: onUpdateState
3384
- }, React__default.createElement("div", {
3385
- id: "swap-container",
3386
- className: activeTheme
3387
- }, React__default.createElement(QueueManager, null, React__default.createElement(ui.SwapContainer, {
3388
- fixedHeight: currentPage !== navigationRoutes.home
3389
- }, React__default.createElement(AppRouter, {
3390
- lastConnectedWallet: lastConnectedWalletWithNetwork,
3391
- disconnectedWallet: disconnectedWallet,
3392
- clearDisconnectedWallet: () => {
3393
- setDisconnectedWallet(undefined);
3394
- }
3395
- }, React__default.createElement(Layout, {
3396
- config: config
3397
- }))))));
3398
- };
3399
-
3400
- exports.Widget = Widget;
3401
- //# sourceMappingURL=widget-embedded.cjs.development.js.map