@rango-dev/widget-embedded 0.37.0 → 0.37.1-next.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 (157) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/QueueManager.d.ts.map +1 -1
  3. package/dist/components/ConfirmWalletsModal/ConfirmWalletsModal.d.ts.map +1 -1
  4. package/dist/components/ConfirmWalletsModal/WalletList.d.ts.map +1 -1
  5. package/dist/components/Layout/Layout.d.ts.map +1 -1
  6. package/dist/components/Quote/Quote.d.ts.map +1 -1
  7. package/dist/components/Quote/Quote.styles.d.ts +1 -1
  8. package/dist/components/Quote/Quote.types.d.ts +2 -0
  9. package/dist/components/Quote/Quote.types.d.ts.map +1 -1
  10. package/dist/components/Quote/QuoteCostDetails.d.ts.map +1 -1
  11. package/dist/components/Quote/QuoteCostDetails.styles.d.ts.map +1 -1
  12. package/dist/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.d.ts.map +1 -1
  13. package/dist/components/Quotes/Quotes.d.ts.map +1 -1
  14. package/dist/components/RefreshModal/RefreshModal.styles.d.ts +1 -1
  15. package/dist/components/SwapDetails/SwapDetails.d.ts.map +1 -1
  16. package/dist/components/SwapDetailsAlerts/SwapDetailsAlerts.types.d.ts +1 -1
  17. package/dist/components/SwapDetailsAlerts/SwapDetailsAlerts.types.d.ts.map +1 -1
  18. package/dist/components/SwapDetailsModal/SwapDetailsCompleteModal.d.ts.map +1 -1
  19. package/dist/components/TokenList/TokenList.d.ts.map +1 -1
  20. package/dist/components/WalletStatefulConnect/DerivationPath.helpers.d.ts +2 -1
  21. package/dist/components/WalletStatefulConnect/DerivationPath.helpers.d.ts.map +1 -1
  22. package/dist/components/WalletStatefulConnect/Namespaces.d.ts.map +1 -1
  23. package/dist/components/WalletStatefulConnect/Namespaces.types.d.ts +1 -1
  24. package/dist/components/WalletStatefulConnect/Namespaces.types.d.ts.map +1 -1
  25. package/dist/constants/quote.d.ts +10 -0
  26. package/dist/constants/quote.d.ts.map +1 -1
  27. package/dist/containers/ExpandedQuotes/ExpandedQuotes.styles.d.ts.map +1 -1
  28. package/dist/containers/Inputs/Inputs.d.ts.map +1 -1
  29. package/dist/containers/QuoteInfo/QuoteInfo.d.ts.map +1 -1
  30. package/dist/containers/Wallets/Wallets.d.ts.map +1 -1
  31. package/dist/containers/WidgetInfo/WidgetInfo.d.ts.map +1 -1
  32. package/dist/containers/WidgetInfo/WidgetInfo.helpers.d.ts +1 -1
  33. package/dist/containers/WidgetInfo/WidgetInfo.types.d.ts +2 -2
  34. package/dist/containers/WidgetInfo/WidgetInfo.types.d.ts.map +1 -1
  35. package/dist/hooks/useConfirmSwap/useConfirmSwap.d.ts.map +1 -1
  36. package/dist/hooks/useConfirmSwap/useConfirmSwap.helpers.d.ts +6 -4
  37. package/dist/hooks/useConfirmSwap/useConfirmSwap.helpers.d.ts.map +1 -1
  38. package/dist/hooks/useFetchApiConfig.d.ts.map +1 -1
  39. package/dist/hooks/useFetchCustomToken.d.ts.map +1 -1
  40. package/dist/hooks/useStatefulConnect/useStatefulConnect.d.ts +2 -1
  41. package/dist/hooks/useStatefulConnect/useStatefulConnect.d.ts.map +1 -1
  42. package/dist/hooks/useStatefulConnect/useStatefulConnect.types.d.ts +3 -5
  43. package/dist/hooks/useStatefulConnect/useStatefulConnect.types.d.ts.map +1 -1
  44. package/dist/hooks/useSubscribeToWidgetEvents/useSubscribeToWidgetEvents.d.ts.map +1 -1
  45. package/dist/hooks/useSwapInput.d.ts.map +1 -1
  46. package/dist/hooks/useWalletList.d.ts.map +1 -1
  47. package/dist/hooks/useWalletProviders/useWalletProviders.d.ts +2 -3
  48. package/dist/hooks/useWalletProviders/useWalletProviders.d.ts.map +1 -1
  49. package/dist/index.d.ts +1 -1
  50. package/dist/index.d.ts.map +1 -1
  51. package/dist/index.js +2 -2
  52. package/dist/index.js.map +4 -4
  53. package/dist/pages/ConfirmSwapPage.d.ts.map +1 -1
  54. package/dist/pages/Home.d.ts.map +1 -1
  55. package/dist/pages/SelectSwapItemsPage.d.ts.map +1 -1
  56. package/dist/store/app.d.ts +2 -4
  57. package/dist/store/app.d.ts.map +1 -1
  58. package/dist/store/quote.d.ts.map +1 -1
  59. package/dist/store/slices/config.d.ts +4 -0
  60. package/dist/store/slices/config.d.ts.map +1 -1
  61. package/dist/store/slices/data.d.ts.map +1 -1
  62. package/dist/store/slices/types.d.ts +6 -0
  63. package/dist/store/slices/types.d.ts.map +1 -0
  64. package/dist/store/slices/wallets.d.ts +60 -0
  65. package/dist/store/slices/wallets.d.ts.map +1 -0
  66. package/dist/store/ui.d.ts +4 -0
  67. package/dist/store/ui.d.ts.map +1 -1
  68. package/dist/store/utils/wallets.d.ts +17 -0
  69. package/dist/store/utils/wallets.d.ts.map +1 -0
  70. package/dist/types/config.d.ts +6 -3
  71. package/dist/types/config.d.ts.map +1 -1
  72. package/dist/types/quote.d.ts +8 -17
  73. package/dist/types/quote.d.ts.map +1 -1
  74. package/dist/types/wallets.d.ts +3 -7
  75. package/dist/types/wallets.d.ts.map +1 -1
  76. package/dist/utils/providers.d.ts +8 -9
  77. package/dist/utils/providers.d.ts.map +1 -1
  78. package/dist/utils/quote.d.ts +5 -6
  79. package/dist/utils/quote.d.ts.map +1 -1
  80. package/dist/utils/settings.d.ts +1 -0
  81. package/dist/utils/settings.d.ts.map +1 -1
  82. package/dist/utils/swap.d.ts +5 -5
  83. package/dist/utils/swap.d.ts.map +1 -1
  84. package/dist/utils/wallets.d.ts +12 -14
  85. package/dist/utils/wallets.d.ts.map +1 -1
  86. package/dist/widget-embedded.build.json +1 -1
  87. package/package.json +8 -8
  88. package/src/QueueManager.tsx +17 -11
  89. package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx +5 -24
  90. package/src/components/ConfirmWalletsModal/WalletList.tsx +10 -7
  91. package/src/components/Layout/Layout.tsx +1 -3
  92. package/src/components/Quote/Quote.tsx +22 -3
  93. package/src/components/Quote/Quote.types.ts +2 -0
  94. package/src/components/Quote/QuoteCostDetails.styles.ts +0 -1
  95. package/src/components/Quote/QuoteCostDetails.tsx +23 -4
  96. package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts +42 -22
  97. package/src/components/Quotes/Quotes.tsx +2 -3
  98. package/src/components/StatefulConnectModal/StatefulConnectModal.tsx +1 -1
  99. package/src/components/SwapDetails/SwapDetails.tsx +14 -6
  100. package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.types.ts +1 -1
  101. package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx +26 -13
  102. package/src/components/TokenList/TokenList.tsx +4 -27
  103. package/src/components/WalletStatefulConnect/DerivationPath.helpers.ts +2 -1
  104. package/src/components/WalletStatefulConnect/Namespaces.tsx +31 -38
  105. package/src/components/WalletStatefulConnect/Namespaces.types.tsx +1 -1
  106. package/src/constants/quote.ts +25 -0
  107. package/src/containers/ExpandedQuotes/ExpandedQuotes.styles.ts +1 -0
  108. package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx +1 -1
  109. package/src/containers/Inputs/Inputs.tsx +20 -7
  110. package/src/containers/QuoteInfo/QuoteInfo.tsx +3 -9
  111. package/src/containers/Wallets/Wallets.tsx +82 -16
  112. package/src/containers/WidgetInfo/WidgetInfo.helpers.ts +2 -2
  113. package/src/containers/WidgetInfo/WidgetInfo.tsx +10 -8
  114. package/src/containers/WidgetInfo/WidgetInfo.types.ts +2 -2
  115. package/src/hooks/useConfirmSwap/useConfirmSwap.helpers.ts +29 -66
  116. package/src/hooks/useConfirmSwap/useConfirmSwap.ts +10 -15
  117. package/src/hooks/useFetchApiConfig.ts +5 -1
  118. package/src/hooks/useFetchCustomToken.ts +5 -0
  119. package/src/hooks/useStatefulConnect/useStatefulConnect.ts +50 -17
  120. package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts +3 -5
  121. package/src/hooks/useSubscribeToWidgetEvents/useSubscribeToWidgetEvents.ts +7 -6
  122. package/src/hooks/useSwapInput.ts +3 -11
  123. package/src/hooks/useWalletList.ts +6 -8
  124. package/src/hooks/useWalletProviders/useWalletProviders.ts +8 -12
  125. package/src/index.ts +1 -1
  126. package/src/pages/ConfirmSwapPage.tsx +7 -15
  127. package/src/pages/Home.tsx +5 -3
  128. package/src/pages/SelectSwapItemsPage.tsx +1 -2
  129. package/src/store/app.ts +4 -4
  130. package/src/store/quote.ts +3 -13
  131. package/src/store/slices/config.ts +76 -0
  132. package/src/store/slices/data.test.ts +23 -1
  133. package/src/store/slices/data.ts +3 -2
  134. package/src/store/slices/types.ts +9 -0
  135. package/src/store/slices/wallets.ts +488 -0
  136. package/src/store/ui.ts +6 -0
  137. package/src/store/utils/wallets.ts +108 -0
  138. package/src/types/config.ts +7 -3
  139. package/src/types/quote.ts +10 -24
  140. package/src/types/wallets.ts +3 -7
  141. package/src/utils/providers.ts +88 -36
  142. package/src/utils/quote.ts +57 -45
  143. package/src/utils/settings.ts +4 -0
  144. package/src/utils/swap.ts +56 -37
  145. package/src/utils/wallets.ts +76 -141
  146. package/dist/constants/warnings.d.ts +0 -3
  147. package/dist/constants/warnings.d.ts.map +0 -1
  148. package/dist/hooks/useObserveBalanceChanges/index.d.ts +0 -2
  149. package/dist/hooks/useObserveBalanceChanges/index.d.ts.map +0 -1
  150. package/dist/hooks/useObserveBalanceChanges/useObserveBalanceChanges.d.ts +0 -4
  151. package/dist/hooks/useObserveBalanceChanges/useObserveBalanceChanges.d.ts.map +0 -1
  152. package/dist/store/wallets.d.ts +0 -66
  153. package/dist/store/wallets.d.ts.map +0 -1
  154. package/src/constants/warnings.ts +0 -26
  155. package/src/hooks/useObserveBalanceChanges/index.ts +0 -1
  156. package/src/hooks/useObserveBalanceChanges/useObserveBalanceChanges.ts +0 -68
  157. package/src/store/wallets.ts +0 -268
@@ -1,68 +0,0 @@
1
- import type { WalletEventData } from '../../types';
2
-
3
- import { useWallets } from '@rango-dev/wallets-react';
4
- import { useEffect, useRef, useState } from 'react';
5
-
6
- import { widgetEventEmitter } from '../../services/eventEmitter';
7
- import { useWalletsStore } from '../../store/wallets';
8
- import { WalletEventTypes, WidgetEvents } from '../../types';
9
-
10
- // A hook to listen for and detect changes in balances on a specific blockchain.
11
- export function useObserveBalanceChanges(selectedBlockchain?: string) {
12
- const { connectedWallets } = useWalletsStore();
13
- const { getWalletInfo } = useWallets();
14
- const prevFetchingBalanceWallets = useRef<string[]>([]);
15
- // The "balanceKey" will be updated and incremented after each change in the balance for a blockchain.
16
- const [balanceKey, setBalanceKey] = useState(0);
17
-
18
- useEffect(() => {
19
- const handleWalletEvent = (event: WalletEventData) => {
20
- if (event.type === WalletEventTypes.DISCONNECT) {
21
- const walletInfo = getWalletInfo(event.payload.walletType);
22
- const blockchainSupported = walletInfo.supportedChains.some(
23
- (chain) => chain.name === selectedBlockchain
24
- );
25
-
26
- if (blockchainSupported) {
27
- setBalanceKey((prev) => prev + 1);
28
- }
29
- }
30
- };
31
-
32
- widgetEventEmitter.on(WidgetEvents.WalletEvent, handleWalletEvent);
33
-
34
- if (!selectedBlockchain) {
35
- return setBalanceKey((prev) => prev + 1);
36
- }
37
-
38
- const supportedWallets = connectedWallets.filter(
39
- (wallet) => wallet.chain === selectedBlockchain
40
- );
41
-
42
- supportedWallets.forEach((wallet) => {
43
- const { walletType } = wallet;
44
- const walletIsAlreadyFetching =
45
- prevFetchingBalanceWallets.current.includes(walletType);
46
-
47
- /**
48
- * Watching for changes in "wallet.balances.length" is not accurate.
49
- * Additionally, checking the equality of previous and current balances for a specific blockchain is resource-intensive, so we avoid these methods.
50
- */
51
- if (wallet.loading && !walletIsAlreadyFetching) {
52
- prevFetchingBalanceWallets.current =
53
- prevFetchingBalanceWallets.current.concat(walletType);
54
- } else if (!wallet.loading && walletIsAlreadyFetching) {
55
- prevFetchingBalanceWallets.current =
56
- prevFetchingBalanceWallets.current.filter(
57
- (prevWallet) => prevWallet !== walletType
58
- );
59
- setBalanceKey((prev) => prev + 1);
60
- }
61
- });
62
-
63
- return () =>
64
- widgetEventEmitter.off(WidgetEvents.WalletEvent, handleWalletEvent);
65
- }, [connectedWallets, selectedBlockchain, getWalletInfo]);
66
-
67
- return { balanceKey };
68
- }
@@ -1,268 +0,0 @@
1
- import type { FindToken } from './slices/data';
2
- import type { Balance, TokensBalance, Wallet } from '../types';
3
- import type { WalletType } from '@rango-dev/wallets-shared';
4
- import type { Token } from 'rango-sdk';
5
-
6
- import { create } from 'zustand';
7
- import { subscribeWithSelector } from 'zustand/middleware';
8
-
9
- import { eventEmitter } from '../services/eventEmitter';
10
- import { httpService } from '../services/httpService';
11
- import { WalletEventTypes, WidgetEvents } from '../types';
12
- import { createTokenHash } from '../utils/meta';
13
- import {
14
- isAccountAndWalletMatched,
15
- makeBalanceFor,
16
- makeTokensBalance,
17
- resetConnectedWalletState,
18
- } from '../utils/wallets';
19
-
20
- import createSelectors from './selectors';
21
-
22
- export type TokenBalance = {
23
- chain: string;
24
- symbol: string;
25
- ticker: string;
26
- address: string | null;
27
- rawAmount: string;
28
- decimal: number | null;
29
- amount: string;
30
- logo: string | null;
31
- usdPrice: number | null;
32
- };
33
-
34
- export interface ConnectedWallet extends Wallet {
35
- balances: TokenBalance[] | null;
36
- explorerUrl: string | null;
37
- selected: boolean;
38
- loading: boolean;
39
- error: boolean;
40
- }
41
- interface WalletsStore {
42
- connectedWallets: ConnectedWallet[];
43
- balances: TokensBalance;
44
- loading: boolean;
45
- connectWallet: (accounts: Wallet[], findToken: FindToken) => void;
46
- disconnectWallet: (walletType: WalletType) => void;
47
- selectWallets: (wallets: { walletType: string; chain: string }[]) => void;
48
- clearConnectedWallet: () => void;
49
- getWalletsDetails: (
50
- accounts: Wallet[],
51
- findToken: FindToken,
52
- shouldRetry?: boolean
53
- ) => void;
54
- getBalanceFor: (token: Token) => Balance | null;
55
- }
56
-
57
- export const useWalletsStore = createSelectors(
58
- create<WalletsStore>()(
59
- subscribeWithSelector((set, get) => {
60
- return {
61
- connectedWallets: [],
62
- balances: {},
63
- loading: false,
64
- connectWallet: (accounts, findToken) => {
65
- eventEmitter.emit(WidgetEvents.WalletEvent, {
66
- type: WalletEventTypes.CONNECT,
67
- payload: { walletType: accounts[0].walletType, accounts },
68
- });
69
-
70
- const getWalletsDetails = get().getWalletsDetails;
71
- set((state) => ({
72
- loading: true,
73
- connectedWallets: state.connectedWallets
74
- .filter((wallet) => wallet.walletType !== accounts[0].walletType)
75
- .concat(
76
- accounts.map((account) => {
77
- const shouldMarkWalletAsSelected =
78
- !state.connectedWallets.some(
79
- (connectedWallet) =>
80
- connectedWallet.chain === account.chain &&
81
- connectedWallet.selected &&
82
- /**
83
- * Sometimes, the connect function can be called multiple times for a particular wallet type when using the auto-connect feature.
84
- * This check is there to make sure the chosen wallet doesn't end up unselected.
85
- */
86
- connectedWallet.walletType !== account.walletType
87
- );
88
- return {
89
- balances: [],
90
- address: account.address,
91
- chain: account.chain,
92
- explorerUrl: null,
93
- walletType: account.walletType,
94
- selected: shouldMarkWalletAsSelected,
95
- loading: true,
96
- error: false,
97
- };
98
- })
99
- ),
100
- }));
101
- getWalletsDetails(accounts, findToken);
102
- },
103
- disconnectWallet: (walletType) => {
104
- set((state) => {
105
- if (
106
- state.connectedWallets.find(
107
- (wallet) => wallet.walletType === walletType
108
- )
109
- ) {
110
- eventEmitter.emit(WidgetEvents.WalletEvent, {
111
- type: WalletEventTypes.DISCONNECT,
112
- payload: { walletType },
113
- });
114
- }
115
-
116
- const selectedWallets = state.connectedWallets
117
- .filter(
118
- (connectedWallet) =>
119
- connectedWallet.selected &&
120
- connectedWallet.walletType !== walletType
121
- )
122
- .map((selectedWallet) => selectedWallet.chain);
123
-
124
- const connectedWallets = state.connectedWallets
125
- .filter(
126
- (connectedWallet) => connectedWallet.walletType !== walletType
127
- )
128
- .map((connectedWallet) => {
129
- const anyWalletSelectedForBlockchain = selectedWallets.includes(
130
- connectedWallet.chain
131
- );
132
- if (anyWalletSelectedForBlockchain) {
133
- return connectedWallet;
134
- }
135
- selectedWallets.push(connectedWallet.chain);
136
- return { ...connectedWallet, selected: true };
137
- });
138
-
139
- const balances = makeTokensBalance(connectedWallets);
140
-
141
- return {
142
- balances,
143
- connectedWallets,
144
- };
145
- });
146
- },
147
- selectWallets: (wallets) =>
148
- set((state) => ({
149
- connectedWallets: state.connectedWallets.map((connectedWallet) => {
150
- const walletSelected = !!wallets.find(
151
- (wallet) =>
152
- wallet.chain === connectedWallet.chain &&
153
- wallet.walletType !== connectedWallet.walletType &&
154
- connectedWallet.selected
155
- );
156
- const walletNotSelected = !!wallets.find(
157
- (wallet) =>
158
- wallet.chain === connectedWallet.chain &&
159
- wallet.walletType === connectedWallet.walletType &&
160
- !connectedWallet.selected
161
- );
162
- if (walletSelected) {
163
- return { ...connectedWallet, selected: false };
164
- } else if (walletNotSelected) {
165
- return { ...connectedWallet, selected: true };
166
- }
167
-
168
- return connectedWallet;
169
- }),
170
- })),
171
- clearConnectedWallet: () =>
172
- set(() => ({
173
- connectedWallets: [],
174
- selectedWallets: [],
175
- })),
176
- getWalletsDetails: async (accounts, findToken, shouldRetry = true) => {
177
- const getWalletsDetails = get().getWalletsDetails;
178
- set((state) => ({
179
- loading: true,
180
- connectedWallets: state.connectedWallets.map((wallet) => {
181
- return accounts.find((account) =>
182
- isAccountAndWalletMatched(account, wallet)
183
- )
184
- ? { ...wallet, loading: true }
185
- : wallet;
186
- }),
187
- }));
188
- try {
189
- const data = accounts.map(({ address, chain }) => ({
190
- address,
191
- blockchain: chain,
192
- }));
193
- const response = await httpService().getWalletsDetails(data);
194
- const retrievedBalance = response.wallets;
195
- if (retrievedBalance) {
196
- set((state) => {
197
- const connectedWallets = state.connectedWallets.map(
198
- (connectedWallet) => {
199
- const matchedAccount = accounts.find((account) =>
200
- isAccountAndWalletMatched(account, connectedWallet)
201
- );
202
- const retrievedBalanceAccount = retrievedBalance.find(
203
- (balance) =>
204
- balance.address === connectedWallet.address &&
205
- balance.blockChain === connectedWallet.chain
206
- );
207
- if (
208
- retrievedBalanceAccount?.failed &&
209
- matchedAccount &&
210
- shouldRetry
211
- ) {
212
- getWalletsDetails([matchedAccount], findToken, false);
213
- }
214
- return matchedAccount && retrievedBalanceAccount
215
- ? {
216
- ...connectedWallet,
217
- explorerUrl: retrievedBalanceAccount.explorerUrl,
218
- balances: makeBalanceFor(
219
- retrievedBalanceAccount,
220
- findToken
221
- ),
222
- loading: false,
223
- error: false,
224
- }
225
- : connectedWallet;
226
- }
227
- );
228
-
229
- const balances = makeTokensBalance(connectedWallets);
230
- return {
231
- loading: false,
232
- balances,
233
- connectedWallets,
234
- };
235
- });
236
- } else {
237
- throw new Error('Wallet not found');
238
- }
239
- } catch (error) {
240
- set((state) => {
241
- const connectedWallets = state.connectedWallets.map((balance) => {
242
- return accounts.find((account) =>
243
- isAccountAndWalletMatched(account, balance)
244
- )
245
- ? resetConnectedWalletState(balance)
246
- : balance;
247
- });
248
-
249
- const balances = makeTokensBalance(connectedWallets);
250
-
251
- return {
252
- loading: false,
253
- balances,
254
- connectedWallets,
255
- };
256
- });
257
- }
258
- },
259
- getBalanceFor: (token) => {
260
- const { balances } = get();
261
- const tokenHash = createTokenHash(token);
262
- const balance = balances[tokenHash];
263
- return balance ?? null;
264
- },
265
- };
266
- })
267
- )
268
- );