@rango-dev/widget-embedded 0.24.2-next.5 → 0.24.2-next.6

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 (11) hide show
  1. package/dist/components/Quote/Quote.d.ts.map +1 -1
  2. package/dist/components/SwapDetails/SwapDetails.helpers.d.ts.map +1 -1
  3. package/dist/containers/QuoteInfo/QuoteInfo.styles.d.ts +3 -1
  4. package/dist/containers/QuoteInfo/QuoteInfo.styles.d.ts.map +1 -1
  5. package/dist/index.js +2 -2
  6. package/dist/index.js.map +3 -3
  7. package/package.json +2 -2
  8. package/src/components/Quote/Quote.tsx +92 -73
  9. package/src/components/Quote/QuoteTrigger.tsx +2 -2
  10. package/src/components/SwapDetails/SwapDetails.helpers.tsx +16 -10
  11. package/src/containers/QuoteInfo/QuoteInfo.styles.ts +7 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rango-dev/widget-embedded",
3
- "version": "0.24.2-next.5",
3
+ "version": "0.24.2-next.6",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "source": "./src/index.ts",
@@ -26,7 +26,7 @@
26
26
  "@rango-dev/queue-manager-core": "^0.26.0",
27
27
  "@rango-dev/queue-manager-rango-preset": "^0.29.2-next.1",
28
28
  "@rango-dev/queue-manager-react": "^0.26.0",
29
- "@rango-dev/ui": "^0.30.1-next.1",
29
+ "@rango-dev/ui": "^0.30.1-next.2",
30
30
  "@rango-dev/wallets-react": "^0.15.1-next.0",
31
31
  "@rango-dev/wallets-shared": "^0.29.1-next.0",
32
32
  "bignumber.js": "^9.1.1",
package/src/components/Quote/Quote.tsx CHANGED
@@ -50,7 +50,7 @@ import {
50
50
  getPriceImpactLevel,
51
51
  sortTags,
52
52
  } from '../../utils/quote';
53
- import { getTotalFeeInUsd } from '../../utils/swap';
53
+ import { getTotalFeeInUsd, getUsdFeeOfStep } from '../../utils/swap';
54
54
 
55
55
  import {
56
56
  AllRoutesButton,
@@ -116,18 +116,27 @@ export function Quote(props: QuoteProps) {
116
116
  );
117
117
  const priceImpactWarningLevel = getPriceImpactLevel(priceImpact ?? 0);
118
118
 
119
- const getQuoteSteps = (swaps: SwapResult[]): Step[] => {
119
+ const getQuoteSteps = (
120
+ swaps: SwapResult[],
121
+ internalSwap?: boolean
122
+ ): Step[] => {
120
123
  return swaps.map((swap, index) => {
121
124
  let stepState: 'error' | 'warning' | undefined = undefined;
122
- const stepHasError =
123
- (error?.type === QuoteErrorType.BRIDGE_LIMIT &&
124
- error.swap.swapperId === swap.swapperId) ||
125
- (error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE &&
126
- error.recommendedSlippages?.has(index));
127
- const stepHasWarning =
125
+ const hasBridgeLimitError =
126
+ error?.type === QuoteErrorType.BRIDGE_LIMIT &&
127
+ error.swap.swapperId === swap.swapperId;
128
+
129
+ const hasSlippageError =
130
+ error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE &&
131
+ error.recommendedSlippages?.has(index);
132
+
133
+ const hasSlippageWarning =
128
134
  warning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE &&
129
135
  warning.recommendedSlippages?.has(index);
130
136
 
137
+ const stepHasError = hasBridgeLimitError || hasSlippageError;
138
+ const stepHasWarning = hasSlippageWarning;
139
+
131
140
  if (stepHasError) {
132
141
  stepState = 'error';
133
142
  } else if (stepHasWarning) {
@@ -138,7 +147,7 @@ export function Quote(props: QuoteProps) {
138
147
  ? i18n.t('Slippage Error')
139
148
  : i18n.t('Slippage Warning');
140
149
 
141
- if (error?.type === QuoteErrorType.BRIDGE_LIMIT) {
150
+ if (hasBridgeLimitError) {
142
151
  alertTitle = error?.recommendation;
143
152
  }
144
153
 
@@ -158,7 +167,7 @@ export function Quote(props: QuoteProps) {
158
167
  },
159
168
  price: {
160
169
  value:
161
- index === 0
170
+ index === 0 && !internalSwap
162
171
  ? numberToString(
163
172
  input.value,
164
173
  TOKEN_AMOUNT_MIN_DECIMALS,
@@ -213,76 +222,86 @@ export function Quote(props: QuoteProps) {
213
222
  state: stepState,
214
223
  alerts:
215
224
  stepHasError || stepHasWarning ? (
216
- <FooterStepAlarm>
225
+ <FooterStepAlarm dense={fullExpandedMode}>
217
226
  <Alert
218
227
  variant="alarm"
219
228
  type={stepHasError ? 'error' : 'warning'}
220
229
  title={alertTitle}
221
230
  footer={
222
- <FooterAlert>
223
- {error?.type === QuoteErrorType.BRIDGE_LIMIT && (
224
- <>
225
- <Typography
226
- size="xsmall"
227
- variant="body"
228
- color="neutral900">
229
- {error.fromAmountRangeError}
230
- </Typography>
231
- <Divider direction="horizontal" size={8} />
232
- <Typography
233
- size="xsmall"
234
- variant="body"
235
- color="neutral900">
236
- |
237
- </Typography>
238
- <Divider direction="horizontal" size={8} />
239
- <Typography
240
- size="xsmall"
241
- variant="body"
242
- color="neutral900">
243
- {i18n.t({
244
- id: 'Yours: {amount} {symbol}',
245
- values: {
246
- amount: numberToString(
247
- swap.fromAmount,
248
- TOKEN_AMOUNT_MIN_DECIMALS,
249
- TOKEN_AMOUNT_MAX_DECIMALS
250
- ),
251
- symbol: swap?.from.symbol,
252
- },
253
- })}
254
- </Typography>
255
- </>
256
- )}
257
- {(error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE ||
258
- warning?.type ===
259
- QuoteWarningType.INSUFFICIENT_SLIPPAGE) && (
260
- <Typography
261
- size="xsmall"
262
- variant="body"
263
- color="neutral900">
264
- {i18n.t({
265
- id: 'Minimum required slippage is {minRequiredSlippage}',
266
- values: {
267
- ...(error?.type ===
268
- QuoteErrorType.INSUFFICIENT_SLIPPAGE && {
269
- minRequiredSlippage:
270
- error.recommendedSlippages?.get(index),
271
- }),
272
- ...(warning?.type ===
273
- QuoteWarningType.INSUFFICIENT_SLIPPAGE && {
274
- minRequiredSlippage:
275
- warning.recommendedSlippages?.get(index),
276
- }),
277
- },
278
- })}
279
- </Typography>
280
- )}
281
- </FooterAlert>
231
+ !fullExpandedMode ? (
232
+ <FooterAlert>
233
+ {hasBridgeLimitError && (
234
+ <>
235
+ <Typography
236
+ size="xsmall"
237
+ variant="body"
238
+ color="neutral900">
239
+ {error.fromAmountRangeError}
240
+ </Typography>
241
+ <Divider direction="horizontal" size={8} />
242
+ <Typography
243
+ size="xsmall"
244
+ variant="body"
245
+ color="neutral900">
246
+ |
247
+ </Typography>
248
+ <Divider direction="horizontal" size={8} />
249
+ <Typography
250
+ size="xsmall"
251
+ variant="body"
252
+ color="neutral900">
253
+ {i18n.t({
254
+ id: 'Yours: {amount} {symbol}',
255
+ values: {
256
+ amount: numberToString(
257
+ swap.fromAmount,
258
+ TOKEN_AMOUNT_MIN_DECIMALS,
259
+ TOKEN_AMOUNT_MAX_DECIMALS
260
+ ),
261
+ symbol: swap?.from.symbol,
262
+ },
263
+ })}
264
+ </Typography>
265
+ </>
266
+ )}
267
+ {(hasSlippageError || hasSlippageWarning) &&
268
+ !hasBridgeLimitError && (
269
+ <Typography
270
+ size="xsmall"
271
+ variant="body"
272
+ color="neutral900">
273
+ {i18n.t({
274
+ id: 'Minimum required slippage is {minRequiredSlippage}',
275
+ values: {
276
+ ...(error?.type ===
277
+ QuoteErrorType.INSUFFICIENT_SLIPPAGE && {
278
+ minRequiredSlippage:
279
+ error.recommendedSlippages?.get(index),
280
+ }),
281
+ ...(warning?.type ===
282
+ QuoteWarningType.INSUFFICIENT_SLIPPAGE && {
283
+ minRequiredSlippage:
284
+ warning.recommendedSlippages?.get(index),
285
+ }),
286
+ },
287
+ })}
288
+ </Typography>
289
+ )}
290
+ </FooterAlert>
291
+ ) : null
282
292
  }
283
293
  />
284
294
  </FooterStepAlarm>
285
295
  ) : undefined,
296
+ time: roundedSecondsToString(swap.estimatedTimeInSeconds),
297
+ fee: numberToString(
298
+ getUsdFeeOfStep(swap, tokens),
299
+ GAS_FEE_MIN_DECIMALS,
300
+ GAS_FEE_MAX_DECIMALS
301
+ ),
302
+ internalSwaps: swap.internalSwaps
303
+ ? getQuoteSteps(swap.internalSwaps)
304
+ : undefined,
286
305
  };
287
306
  });
288
307
  };
@@ -392,8 +411,8 @@ export function Quote(props: QuoteProps) {
392
411
  <Tooltip
393
412
  content={formatTooltipNumbers(output.usdValue)}
394
413
  container={container}
395
- style={{
396
- display: 'flex',
414
+ styles={{
415
+ root: { display: 'flex' },
397
416
  }}>
398
417
  <Typography
399
418
  color="$neutral600"
package/src/components/Quote/QuoteTrigger.tsx CHANGED
@@ -98,7 +98,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
98
98
  <Tooltip
99
99
  container={tooltipContainer}
100
100
  side="bottom"
101
- align="right"
101
+ align="end"
102
102
  sideOffset={4}
103
103
  content={
104
104
  <div className={rowStyles()}>
@@ -169,7 +169,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
169
169
  <Tooltip
170
170
  container={tooltipContainer}
171
171
  side="bottom"
172
- align="right"
172
+ align="end"
173
173
  sideOffset={4}
174
174
  content={
175
175
  <div className={rowStyles()}>
package/src/components/SwapDetails/SwapDetails.helpers.tsx CHANGED
@@ -75,18 +75,24 @@ export const getSteps = ({
75
75
  ? step.internalSwaps.map((internalSwap) => {
76
76
  return {
77
77
  from: {
78
- blockchain:
79
- getBlockchainShortNameFor(
80
- internalSwap.fromBlockchain,
81
- blockchains
82
- ) ?? '',
78
+ chain: {
79
+ displayName:
80
+ getBlockchainShortNameFor(
81
+ internalSwap.fromBlockchain,
82
+ blockchains
83
+ ) ?? '',
84
+ image: internalSwap.fromBlockchainLogo ?? '',
85
+ },
83
86
  },
84
87
  to: {
85
- blockchain:
86
- getBlockchainShortNameFor(
87
- internalSwap.toBlockchain,
88
- blockchains
89
- ) ?? '',
88
+ chain: {
89
+ displayName:
90
+ getBlockchainShortNameFor(
91
+ internalSwap.toBlockchain,
92
+ blockchains
93
+ ) ?? '',
94
+ image: internalSwap.toBlockchainLogo ?? '',
95
+ },
90
96
  },
91
97
  swapper: {
92
98
  displayName: getSwapperDisplayName(
package/src/containers/QuoteInfo/QuoteInfo.styles.ts CHANGED
@@ -8,6 +8,13 @@ export const QuoteContainer = styled('div', {
8
8
  });
9
9
  export const FooterStepAlarm = styled('div', {
10
10
  paddingBottom: '$15',
11
+ variants: {
12
+ dense: {
13
+ true: {
14
+ paddingBottom: 0,
15
+ },
16
+ },
17
+ },
11
18
  });
12
19
 
13
20
  export const FooterAlert = styled('div', {