@rango-dev/widget-embedded 0.41.2-next.11 → 0.41.2-next.13
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.
- package/dist/components/Quote/Quote.styles.d.ts +2 -2
- package/dist/components/Slippage/Slippage.d.ts.map +1 -1
- package/dist/constants/swapSettings.d.ts +2 -2
- package/dist/constants/swapSettings.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +4 -4
- package/dist/store/slices/settings.d.ts.map +1 -1
- package/dist/utils/settings.d.ts +4 -0
- package/dist/utils/settings.d.ts.map +1 -1
- package/dist/widget-embedded.build.json +1 -1
- package/package.json +3 -3
- package/src/components/Slippage/Slippage.tsx +52 -21
- package/src/constants/swapSettings.ts +2 -2
- package/src/store/slices/settings.ts +0 -2
- package/src/utils/settings.ts +28 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rango-dev/widget-embedded",
|
|
3
|
-
"version": "0.41.2-next.
|
|
3
|
+
"version": "0.41.2-next.13",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"source": "./src/index.ts",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"@rango-dev/logging-core": "^0.8.0",
|
|
28
28
|
"@rango-dev/provider-all": "^0.44.1-next.6",
|
|
29
29
|
"@rango-dev/queue-manager-core": "^0.29.0",
|
|
30
|
-
"@rango-dev/queue-manager-rango-preset": "^0.44.1-next.
|
|
30
|
+
"@rango-dev/queue-manager-rango-preset": "^0.44.1-next.6",
|
|
31
31
|
"@rango-dev/queue-manager-react": "^0.29.0",
|
|
32
32
|
"@rango-dev/signer-solana": "^0.38.1-next.1",
|
|
33
33
|
"@rango-dev/ui": "^0.45.1-next.8",
|
|
@@ -54,4 +54,4 @@
|
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
}
|
|
57
|
-
}
|
|
57
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { i18n } from '@lingui/core';
|
|
2
2
|
import {
|
|
3
|
+
Alert,
|
|
3
4
|
Divider,
|
|
4
5
|
InfoIcon,
|
|
5
6
|
SlippageIcon,
|
|
@@ -9,13 +10,10 @@ import {
|
|
|
9
10
|
} from '@rango-dev/ui';
|
|
10
11
|
import React from 'react';
|
|
11
12
|
|
|
12
|
-
import {
|
|
13
|
-
MAX_SLIPPAGE,
|
|
14
|
-
MIN_SLIPPGAE,
|
|
15
|
-
SLIPPAGES,
|
|
16
|
-
} from '../../constants/swapSettings';
|
|
13
|
+
import { MAX_SLIPPAGE, SLIPPAGES } from '../../constants/swapSettings';
|
|
17
14
|
import { useAppStore } from '../../store/AppStore';
|
|
18
15
|
import { getContainer } from '../../utils/common';
|
|
16
|
+
import { getSlippageValidation } from '../../utils/settings';
|
|
19
17
|
|
|
20
18
|
import {
|
|
21
19
|
BaseContainer,
|
|
@@ -29,6 +27,40 @@ export function Slippage() {
|
|
|
29
27
|
const { slippage, setSlippage, customSlippage, setCustomSlippage } =
|
|
30
28
|
useAppStore();
|
|
31
29
|
|
|
30
|
+
const slippageValidation =
|
|
31
|
+
customSlippage !== null ? getSlippageValidation(customSlippage) : null;
|
|
32
|
+
|
|
33
|
+
const onSlippageValueChange = (
|
|
34
|
+
event: React.ChangeEvent<HTMLInputElement>
|
|
35
|
+
) => {
|
|
36
|
+
const value = event.target.value;
|
|
37
|
+
const parsedValue = parseFloat(value);
|
|
38
|
+
if (isNaN(parsedValue)) {
|
|
39
|
+
return setCustomSlippage(null);
|
|
40
|
+
}
|
|
41
|
+
let slippage = parsedValue;
|
|
42
|
+
if (parsedValue > MAX_SLIPPAGE) {
|
|
43
|
+
slippage = MAX_SLIPPAGE;
|
|
44
|
+
}
|
|
45
|
+
setCustomSlippage(slippage);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const onClickSlippageChip = (slippageItem: number) => {
|
|
49
|
+
if (customSlippage !== null) {
|
|
50
|
+
setCustomSlippage(null);
|
|
51
|
+
}
|
|
52
|
+
setSlippage(slippageItem);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
const onInput = (event: React.FormEvent<HTMLInputElement>) => {
|
|
56
|
+
const input = event.target as HTMLInputElement;
|
|
57
|
+
const regex = /^(0|[1-9]\d*)(\.\d{1,2})?$/;
|
|
58
|
+
const value = input.value;
|
|
59
|
+
if (!regex.test(value)) {
|
|
60
|
+
input.value = value.slice(0, -1);
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
|
|
32
64
|
return (
|
|
33
65
|
<BaseContainer>
|
|
34
66
|
<Head>
|
|
@@ -52,13 +84,8 @@ export function Slippage() {
|
|
|
52
84
|
return (
|
|
53
85
|
<SlippageChip
|
|
54
86
|
key={key}
|
|
55
|
-
onClick={() =>
|
|
56
|
-
|
|
57
|
-
setCustomSlippage(null);
|
|
58
|
-
}
|
|
59
|
-
setSlippage(slippageItem);
|
|
60
|
-
}}
|
|
61
|
-
selected={!customSlippage && slippageItem === slippage}
|
|
87
|
+
onClick={() => onClickSlippageChip(slippageItem)}
|
|
88
|
+
selected={customSlippage === null && slippageItem === slippage}
|
|
62
89
|
label={`${slippageItem.toString()}%`}
|
|
63
90
|
/>
|
|
64
91
|
);
|
|
@@ -68,19 +95,12 @@ export function Slippage() {
|
|
|
68
95
|
min="0.01"
|
|
69
96
|
max="30"
|
|
70
97
|
step="0.01"
|
|
98
|
+
onInput={onInput}
|
|
71
99
|
fullWidth
|
|
72
100
|
variant="contained"
|
|
73
101
|
value={customSlippage === null ? '' : customSlippage}
|
|
74
102
|
color="dark"
|
|
75
|
-
onChange={
|
|
76
|
-
const value = event.target.value;
|
|
77
|
-
const parsedValue = parseFloat(value);
|
|
78
|
-
if (parsedValue >= MIN_SLIPPGAE && parsedValue <= MAX_SLIPPAGE) {
|
|
79
|
-
setCustomSlippage(parsedValue);
|
|
80
|
-
} else {
|
|
81
|
-
setCustomSlippage(null);
|
|
82
|
-
}
|
|
83
|
-
}}
|
|
103
|
+
onChange={onSlippageValueChange}
|
|
84
104
|
suffix={
|
|
85
105
|
customSlippage && (
|
|
86
106
|
<Typography variant="body" size="small">
|
|
@@ -91,6 +111,17 @@ export function Slippage() {
|
|
|
91
111
|
placeholder={i18n.t('Custom')}
|
|
92
112
|
/>
|
|
93
113
|
</SlippageChipsContainer>
|
|
114
|
+
|
|
115
|
+
{slippageValidation && (
|
|
116
|
+
<>
|
|
117
|
+
<Divider size={10} />
|
|
118
|
+
<Alert
|
|
119
|
+
variant="alarm"
|
|
120
|
+
type={slippageValidation.type}
|
|
121
|
+
title={slippageValidation.message}
|
|
122
|
+
/>
|
|
123
|
+
</>
|
|
124
|
+
)}
|
|
94
125
|
</BaseContainer>
|
|
95
126
|
);
|
|
96
127
|
}
|
|
@@ -30,7 +30,6 @@ export interface SettingsSlice {
|
|
|
30
30
|
affiliatePercent: number | null;
|
|
31
31
|
affiliateWallets: { [key: string]: string } | null;
|
|
32
32
|
_customTokens: Token[];
|
|
33
|
-
|
|
34
33
|
setSlippage: (slippage: number) => void;
|
|
35
34
|
setCustomSlippage: (customSlippage: number | null) => void;
|
|
36
35
|
toggleInfiniteApprove: () => void;
|
|
@@ -70,7 +69,6 @@ export const createSettingsSlice: StateCreator<
|
|
|
70
69
|
affiliatePercent: null,
|
|
71
70
|
affiliateWallets: null,
|
|
72
71
|
_customTokens: [],
|
|
73
|
-
|
|
74
72
|
addPreferredBlockchain: (blockchain) => {
|
|
75
73
|
const currentPreferredBlockchains = get().preferredBlockchains;
|
|
76
74
|
|
package/src/utils/settings.ts
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import type { Features, Routing } from '../types';
|
|
2
2
|
import type { SwapperMeta, SwapperType, Token } from 'rango-sdk';
|
|
3
3
|
|
|
4
|
+
import { i18n } from '@lingui/core';
|
|
5
|
+
|
|
6
|
+
import {
|
|
7
|
+
HIGH_SLIPPAGE,
|
|
8
|
+
MAX_SLIPPAGE,
|
|
9
|
+
MIN_SLIPPAGE,
|
|
10
|
+
} from '../constants/swapSettings';
|
|
11
|
+
|
|
4
12
|
import { removeDuplicateFrom } from './common';
|
|
5
13
|
|
|
6
14
|
export type UniqueSwappersGroupType = {
|
|
@@ -87,3 +95,23 @@ export const addCustomTokensToSupportedTokens = (
|
|
|
87
95
|
? supportedTokens
|
|
88
96
|
: supportedTokens.concat(customTokens);
|
|
89
97
|
};
|
|
98
|
+
|
|
99
|
+
export function getSlippageValidation(
|
|
100
|
+
slippage: number
|
|
101
|
+
): { type: 'error' | 'warning'; message: string } | null {
|
|
102
|
+
if (slippage == MIN_SLIPPAGE) {
|
|
103
|
+
return {
|
|
104
|
+
type: 'error',
|
|
105
|
+
message: i18n.t('Slippage must be greater than or equal to 0.01'),
|
|
106
|
+
};
|
|
107
|
+
} else if (slippage > HIGH_SLIPPAGE && slippage <= MAX_SLIPPAGE) {
|
|
108
|
+
return {
|
|
109
|
+
type: 'warning',
|
|
110
|
+
message: i18n.t(
|
|
111
|
+
'Your transaction is at risk of being frontrun due to high slippage tolerance.'
|
|
112
|
+
),
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
return null;
|
|
117
|
+
}
|