@lifi/widget 1.10.4 → 1.11.0

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 (190) hide show
  1. package/App.js +5 -9
  2. package/AppDrawer.js +1 -1
  3. package/AppDrawer.style.d.ts +1 -1
  4. package/AppDrawer.style.js +0 -1
  5. package/AppProvider.d.ts +1 -0
  6. package/AppProvider.js +5 -2
  7. package/components/AppContainer.d.ts +10 -0
  8. package/components/AppContainer.js +3 -6
  9. package/components/Card/Card.d.ts +11 -5
  10. package/components/Card/Card.js +29 -5
  11. package/components/Card/index.d.ts +0 -1
  12. package/components/Card/index.js +0 -1
  13. package/components/Dialog.d.ts +3 -0
  14. package/components/Dialog.js +23 -0
  15. package/components/GasSufficiencyMessage/GasSufficiencyMessage.d.ts +6 -0
  16. package/components/GasSufficiencyMessage/GasSufficiencyMessage.js +48 -0
  17. package/components/{InsufficientGasOrFundsMessage/InsufficientGasOrFundsMessage.style.d.ts → GasSufficiencyMessage/GasSufficiencyMessage.style.d.ts} +0 -0
  18. package/components/{InsufficientGasOrFundsMessage/InsufficientGasOrFundsMessage.style.js → GasSufficiencyMessage/GasSufficiencyMessage.style.js} +1 -0
  19. package/components/GasSufficiencyMessage/index.d.ts +1 -0
  20. package/components/GasSufficiencyMessage/index.js +1 -0
  21. package/components/Header/Header.js +1 -1
  22. package/components/Header/Header.style.js +2 -1
  23. package/components/Header/NavigationHeader.js +15 -11
  24. package/components/Header/WalletHeader.js +1 -1
  25. package/components/Header/index.d.ts +1 -0
  26. package/components/Header/index.js +1 -0
  27. package/components/Header/types.d.ts +9 -0
  28. package/components/Header/types.js +1 -0
  29. package/components/Header/useHeaderActionStore.d.ts +6 -0
  30. package/components/Header/useHeaderActionStore.js +21 -0
  31. package/components/PoweredBy/PoweredBy.js +0 -1
  32. package/components/ProgressToNextUpdate/ProgressToNextUpdate.js +14 -2
  33. package/components/ReverseTokensButton/ReverseTokensButton.js +5 -7
  34. package/components/ReverseTokensButton/ReverseTokensButton.style.d.ts +1 -1
  35. package/components/ReverseTokensButton/ReverseTokensButton.style.js +4 -2
  36. package/components/SelectTokenButton/SelectTokenButton.js +5 -5
  37. package/components/SelectTokenButton/SelectTokenButton.style.d.ts +3 -10
  38. package/components/SelectTokenButton/SelectTokenButton.style.js +0 -7
  39. package/components/SmallAvatar.d.ts +16 -0
  40. package/components/SmallAvatar.js +8 -0
  41. package/{pages/SwapPage → components/Step}/CircularProgress.d.ts +0 -0
  42. package/{pages/SwapPage → components/Step}/CircularProgress.js +0 -0
  43. package/{pages/SwapPage → components/Step}/CircularProgress.style.d.ts +0 -0
  44. package/{pages/SwapPage → components/Step}/CircularProgress.style.js +0 -0
  45. package/components/Step/Step.d.ts +7 -0
  46. package/{pages/SwapPage/StepItem.js → components/Step/Step.js} +6 -6
  47. package/{pages/SwapPage/ExecutionItem.d.ts → components/Step/StepProcess.d.ts} +1 -1
  48. package/{pages/SwapPage/ExecutionItem.js → components/Step/StepProcess.js} +2 -2
  49. package/{pages/SwapPage/ExecutionItem.style.d.ts → components/Step/StepProcess.style.d.ts} +1 -1
  50. package/{pages/SwapPage/ExecutionItem.style.js → components/Step/StepProcess.style.js} +0 -0
  51. package/{pages/SwapPage → components/Step}/StepTimer.d.ts +0 -0
  52. package/{pages/SwapPage → components/Step}/StepTimer.js +0 -0
  53. package/components/Step/index.d.ts +1 -0
  54. package/components/Step/index.js +1 -0
  55. package/components/Step/utils.d.ts +6 -0
  56. package/components/Step/utils.js +89 -0
  57. package/components/StepActions/StepActions.js +14 -5
  58. package/components/StepActions/StepActions.style.js +2 -2
  59. package/{pages/SwapPage → components/StepDivider}/StepDivider.d.ts +0 -0
  60. package/{pages/SwapPage → components/StepDivider}/StepDivider.js +0 -0
  61. package/{pages/SwapPage → components/StepDivider}/StepDivider.style.d.ts +0 -0
  62. package/{pages/SwapPage → components/StepDivider}/StepDivider.style.js +0 -0
  63. package/components/StepDivider/index.d.ts +1 -0
  64. package/components/StepDivider/index.js +1 -0
  65. package/components/SwapButton/SwapButton.js +7 -10
  66. package/components/SwapButton/SwapButton.style.d.ts +1 -1
  67. package/components/SwapButton/SwapButton.style.js +0 -4
  68. package/components/SwapButton/types.d.ts +2 -0
  69. package/components/SwapInProgress/SwapInProgress.js +7 -4
  70. package/components/SwapInProgress/SwapInProgress.style.d.ts +9 -21
  71. package/components/SwapInProgress/SwapInProgress.style.js +5 -6
  72. package/components/SwapInput/SwapInput.js +3 -3
  73. package/components/SwapInput/SwapInputAdornment.style.d.ts +1 -1
  74. package/components/SwapInput/SwapInputAdornment.style.js +0 -2
  75. package/components/SwapRouteCard/SwapRouteCard.js +15 -15
  76. package/components/SwapRouteCard/SwapRouteCard.style.d.ts +0 -20
  77. package/components/SwapRouteCard/SwapRouteCard.style.js +7 -54
  78. package/components/SwapRouteCard/SwapRouteCardSkeleton.js +6 -10
  79. package/components/SwapRouteCard/SwapRouteNotFoundCard.js +3 -3
  80. package/components/SwapRouteCard/types.d.ts +0 -3
  81. package/components/{StepToken.d.ts → Token/Token.d.ts} +2 -1
  82. package/components/Token/Token.js +31 -0
  83. package/components/Token/Token.style.d.ts +24 -0
  84. package/components/Token/Token.style.js +31 -0
  85. package/components/Token/index.d.ts +2 -0
  86. package/components/Token/index.js +2 -0
  87. package/components/TokenAvatar/TokenAvatar.d.ts +7 -0
  88. package/components/TokenAvatar/TokenAvatar.js +8 -0
  89. package/components/TokenAvatar/TokenAvatar.style.d.ts +1 -0
  90. package/components/TokenAvatar/TokenAvatar.style.js +16 -0
  91. package/components/TokenAvatar/index.d.ts +2 -0
  92. package/components/TokenAvatar/index.js +2 -0
  93. package/components/TokenList/TokenList.js +2 -2
  94. package/components/TokenList/TokenListItem.d.ts +1 -0
  95. package/components/TokenList/TokenListItem.js +12 -6
  96. package/components/TokenList/types.d.ts +1 -0
  97. package/config/queryClient.d.ts +1 -1
  98. package/config/queryClient.js +1 -1
  99. package/config/theme.js +14 -1
  100. package/config/version.d.ts +1 -1
  101. package/config/version.js +1 -1
  102. package/hooks/index.d.ts +1 -1
  103. package/hooks/index.js +1 -1
  104. package/hooks/useChains.d.ts +8 -8
  105. package/hooks/useChains.js +1 -1
  106. package/hooks/useGasSufficiency.d.ts +15 -0
  107. package/hooks/useGasSufficiency.js +91 -0
  108. package/hooks/useRouteExecution.d.ts +3 -3
  109. package/hooks/useRouteExecution.js +22 -18
  110. package/hooks/useSwapRoutes.d.ts +1 -1
  111. package/hooks/useSwapRoutes.js +2 -14
  112. package/hooks/useTokenBalance.js +1 -1
  113. package/hooks/useTokenBalances.d.ts +2 -2
  114. package/hooks/useTokenBalances.js +7 -9
  115. package/hooks/useTokens.js +1 -1
  116. package/hooks/useTools.d.ts +10 -1
  117. package/hooks/useTools.js +13 -3
  118. package/i18n/en/translation.json +18 -9
  119. package/i18n/index.d.ts +12 -3
  120. package/icons/LiFiToolLogo.svg +6 -0
  121. package/package.json +8 -8
  122. package/pages/MainPage/MainPage.js +2 -3
  123. package/pages/MainPage/MainSwapButton.js +4 -5
  124. package/{components/SwapRoutes → pages/MainPage}/SwapRoutes.d.ts +0 -0
  125. package/pages/MainPage/SwapRoutes.js +36 -0
  126. package/{components/SwapRoutes → pages/MainPage}/SwapRoutes.style.d.ts +0 -0
  127. package/{components/SwapRoutes → pages/MainPage}/SwapRoutes.style.js +4 -0
  128. package/pages/SelectTokenPage/ChainSelect.js +2 -2
  129. package/pages/SelectTokenPage/SearchTokenInput.js +2 -2
  130. package/pages/SelectWalletPage/SelectWalletPage.js +4 -23
  131. package/pages/SettingsPage/AdvancedPreferences.js +1 -1
  132. package/pages/SettingsPage/ColorSchemeButtonGroup.style.d.ts +1 -1
  133. package/pages/SettingsPage/EnabledBridgesSelect.js +7 -4
  134. package/pages/SettingsPage/EnabledExchangesSelect.js +7 -4
  135. package/pages/SettingsPage/GasPriceSelect.js +2 -2
  136. package/pages/SettingsPage/RoutePrioritySelect.js +2 -2
  137. package/pages/SettingsPage/SlippageInput.js +2 -2
  138. package/pages/SwapDetailsPage/SwapDetailsPage.d.ts +2 -0
  139. package/pages/SwapDetailsPage/SwapDetailsPage.js +63 -0
  140. package/pages/SwapDetailsPage/SwapDetailsPage.style.d.ts +11 -0
  141. package/pages/SwapDetailsPage/SwapDetailsPage.style.js +5 -0
  142. package/pages/SwapDetailsPage/index.d.ts +1 -0
  143. package/pages/SwapDetailsPage/index.js +1 -0
  144. package/pages/SwapHistoryPage/SwapHistoryEmpty.d.ts +2 -0
  145. package/pages/SwapHistoryPage/SwapHistoryEmpty.js +14 -0
  146. package/pages/SwapHistoryPage/SwapHistoryItem.d.ts +5 -0
  147. package/pages/SwapHistoryPage/SwapHistoryItem.js +23 -0
  148. package/pages/SwapHistoryPage/SwapHistoryPage.d.ts +2 -0
  149. package/pages/SwapHistoryPage/SwapHistoryPage.js +14 -0
  150. package/pages/SwapHistoryPage/index.d.ts +1 -0
  151. package/pages/SwapHistoryPage/index.js +1 -0
  152. package/pages/SwapPage/StatusBottomSheet.js +3 -4
  153. package/pages/SwapPage/SwapPage.js +9 -9
  154. package/pages/SwapPage/SwapPage.style.d.ts +0 -33
  155. package/pages/SwapPage/SwapPage.style.js +2 -9
  156. package/pages/SwapRoutesPage/SwapRoutesPage.js +9 -5
  157. package/pages/SwapRoutesPage/SwapRoutesPage.style.js +1 -1
  158. package/providers/WalletProvider/WalletProvider.js +7 -26
  159. package/providers/WalletProvider/types.d.ts +0 -1
  160. package/providers/WidgetProvider/WidgetProvider.js +1 -1
  161. package/stores/route/index.d.ts +1 -1
  162. package/stores/route/index.js +1 -1
  163. package/stores/route/types.d.ts +2 -4
  164. package/stores/route/useExecutingRoutes.d.ts +2 -1
  165. package/stores/route/useExecutingRoutes.js +4 -2
  166. package/stores/route/useRouteStore.d.ts +4 -1
  167. package/stores/route/useRouteStore.js +23 -24
  168. package/stores/route/useSwapHistory.d.ts +2 -0
  169. package/stores/route/useSwapHistory.js +11 -0
  170. package/stores/settings/useSettingsStore.d.ts +13 -0
  171. package/types/widget.d.ts +3 -4
  172. package/utils/navigationRoutes.d.ts +2 -0
  173. package/utils/navigationRoutes.js +8 -6
  174. package/components/Card/CardContainer.d.ts +0 -11
  175. package/components/Card/CardContainer.js +0 -16
  176. package/components/InsufficientGasOrFundsMessage/InsufficientGasOrFundsMessage.d.ts +0 -3
  177. package/components/InsufficientGasOrFundsMessage/InsufficientGasOrFundsMessage.js +0 -31
  178. package/components/InsufficientGasOrFundsMessage/index.d.ts +0 -1
  179. package/components/InsufficientGasOrFundsMessage/index.js +0 -1
  180. package/components/StepToken.js +0 -21
  181. package/components/SwapRoutes/SwapRoutes.js +0 -32
  182. package/components/SwapRoutes/SwapRoutesUpdateProgress.d.ts +0 -3
  183. package/components/SwapRoutes/SwapRoutesUpdateProgress.js +0 -24
  184. package/components/SwapRoutes/index.d.ts +0 -1
  185. package/components/SwapRoutes/index.js +0 -1
  186. package/hooks/useHasSufficientBalance.d.ts +0 -5
  187. package/hooks/useHasSufficientBalance.js +0 -72
  188. package/pages/SwapPage/StepItem.d.ts +0 -7
  189. package/stores/route/useCurrentRoute.d.ts +0 -2
  190. package/stores/route/useCurrentRoute.js +0 -5
@@ -1,72 +0,0 @@
1
- import { isSwapStep } from '@lifi/sdk';
2
- import Big from 'big.js';
3
- import { useMemo } from 'react';
4
- import { useWatch } from 'react-hook-form';
5
- import { useDebouncedWatch } from '.';
6
- import { SwapFormKey, SwapFormKeyHelper } from '../providers/SwapFormProvider';
7
- import { useWallet } from '../providers/WalletProvider';
8
- import { useCurrentRoute } from '../stores';
9
- import { useTokenBalances } from './useTokenBalances';
10
- export const useHasSufficientBalance = () => {
11
- var _a;
12
- const { account } = useWallet();
13
- const [route] = useCurrentRoute();
14
- const [fromChainId, toChainId, fromToken] = useWatch({
15
- name: [
16
- SwapFormKeyHelper.getChainKey('from'),
17
- SwapFormKeyHelper.getChainKey('to'),
18
- SwapFormKey.FromToken,
19
- ],
20
- });
21
- const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
22
- const lastStep = route === null || route === void 0 ? void 0 : route.steps.at(-1);
23
- const { tokens: fromChainTokenBalances } = useTokenBalances(fromChainId);
24
- const { tokens: toChainTokenBalances } = useTokenBalances((_a = lastStep === null || lastStep === void 0 ? void 0 : lastStep.action.fromChainId) !== null && _a !== void 0 ? _a : toChainId);
25
- const hasGasOnStartChain = useMemo(() => {
26
- var _a, _b, _c;
27
- const gasToken = (_a = route === null || route === void 0 ? void 0 : route.steps[0].estimate.gasCosts) === null || _a === void 0 ? void 0 : _a[0].token;
28
- if (!account.isActive || !gasToken || !fromAmount) {
29
- return true;
30
- }
31
- const gasTokenBalance = Big((_c = (_b = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === gasToken.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
32
- let requiredAmount = route.steps
33
- .filter((step) => step.action.fromChainId === route.fromChainId)
34
- .reduce((big, step) => { var _a; return big.plus(Big(((_a = step.estimate.gasCosts) === null || _a === void 0 ? void 0 : _a[0].amount) || 0)); }, Big(0))
35
- .div(Math.pow(10, gasToken.decimals));
36
- if (route.fromToken.address === gasToken.address) {
37
- requiredAmount = requiredAmount.plus(Big(fromAmount));
38
- }
39
- return gasTokenBalance.gt(0) && gasTokenBalance.gte(requiredAmount);
40
- }, [
41
- account.isActive,
42
- fromAmount,
43
- fromChainTokenBalances,
44
- route === null || route === void 0 ? void 0 : route.fromChainId,
45
- route === null || route === void 0 ? void 0 : route.fromToken.address,
46
- route === null || route === void 0 ? void 0 : route.steps,
47
- ]);
48
- const hasGasOnCrossChain = useMemo(() => {
49
- var _a, _b, _c, _d, _e, _f;
50
- const gasToken = (_a = lastStep === null || lastStep === void 0 ? void 0 : lastStep.estimate.gasCosts) === null || _a === void 0 ? void 0 : _a[0].token;
51
- if (!account.isActive || !gasToken || !isSwapStep(lastStep)) {
52
- return true;
53
- }
54
- const balance = Big((_c = (_b = toChainTokenBalances === null || toChainTokenBalances === void 0 ? void 0 : toChainTokenBalances.find((t) => t.address === gasToken.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
55
- const gasEstimate = (_d = lastStep.estimate.gasCosts) === null || _d === void 0 ? void 0 : _d[0].amount;
56
- const requiredAmount = Big(gasEstimate || 0).div(Math.pow(10, ((_f = (_e = lastStep.estimate.gasCosts) === null || _e === void 0 ? void 0 : _e[0].token.decimals) !== null && _f !== void 0 ? _f : 0)));
57
- return balance.gt(0) && balance.gte(requiredAmount);
58
- }, [account.isActive, lastStep, toChainTokenBalances]);
59
- const hasSufficientBalance = useMemo(() => {
60
- var _a, _b;
61
- if (!account.isActive || !fromToken || !fromAmount) {
62
- return true;
63
- }
64
- const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === fromToken)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
65
- return Big(fromAmount).lte(balance);
66
- }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
67
- return {
68
- hasGasOnStartChain,
69
- hasGasOnCrossChain,
70
- hasSufficientBalance,
71
- };
72
- };
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- import { Step, TokenAmount } from '@lifi/sdk';
3
- export declare const StepItem: React.FC<{
4
- step: Step;
5
- fromToken?: TokenAmount;
6
- toToken?: TokenAmount;
7
- }>;
@@ -1,2 +0,0 @@
1
- import { Route } from '@lifi/sdk';
2
- export declare const useCurrentRoute: () => [Route | undefined, (route?: Route) => void];
@@ -1,5 +0,0 @@
1
- import shallow from 'zustand/shallow';
2
- import { useRouteStore } from './useRouteStore';
3
- export const useCurrentRoute = () => {
4
- return useRouteStore((state) => [state.currentRoute, state.setCurrentRoute], shallow);
5
- };