@rango-dev/widget-embedded 0.12.1-next.11 → 0.12.1-next.12
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/BlockchainList/BlockchainList.d.ts.map +1 -1
- package/dist/components/BlockchainList/BlockchainList.styles.d.ts +2 -2
- package/dist/components/BlockchainList/BlockchainList.styles.d.ts.map +1 -1
- package/dist/components/ConfirmWalletsModal/ConfirmWallets.helpers.d.ts.map +1 -1
- package/dist/components/RouteErrors/RouteErrors.d.ts.map +1 -1
- package/dist/components/RouteErrors/RouteErrors.styles.d.ts.map +1 -1
- package/dist/components/RouteErrors/RouteErrors.types.d.ts +3 -1
- package/dist/components/RouteErrors/RouteErrors.types.d.ts.map +1 -1
- package/dist/components/RouteErrors/RouteErrorsModal.d.ts.map +1 -1
- package/dist/components/SwapDetails/SwapDetails.d.ts.map +1 -1
- package/dist/components/SwapDetails/SwapDetails.helpers.d.ts +1 -8
- package/dist/components/SwapDetails/SwapDetails.helpers.d.ts.map +1 -1
- package/dist/components/SwapDetails/SwapDetails.styles.d.ts +0 -148
- package/dist/components/SwapDetails/SwapDetails.styles.d.ts.map +1 -1
- package/dist/components/SwapDetailsModal/SwapDetailsModal.WalletState.d.ts +1 -1
- package/dist/components/SwapDetailsModal/SwapDetailsModal.WalletState.d.ts.map +1 -1
- package/dist/components/SwapDetailsModal/SwapDetailsModal.d.ts.map +1 -1
- package/dist/components/SwapDetailsModal/SwapDetailsModal.types.d.ts +1 -0
- package/dist/components/SwapDetailsModal/SwapDetailsModal.types.d.ts.map +1 -1
- package/dist/components/TokenList/TokenList.d.ts.map +1 -1
- package/dist/components/TokenList/TokenList.styles.d.ts +148 -0
- package/dist/components/TokenList/TokenList.styles.d.ts.map +1 -1
- package/dist/constants/errors.d.ts +2 -2
- package/dist/constants/routing.d.ts +12 -2
- package/dist/constants/routing.d.ts.map +1 -1
- package/dist/hooks/useSwapInput.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +3 -3
- package/dist/pages/ConfirmSwapPage.d.ts.map +1 -1
- package/dist/pages/Home.d.ts.map +1 -1
- package/dist/utils/routing.d.ts +4 -2
- package/dist/utils/routing.d.ts.map +1 -1
- package/dist/utils/swap.d.ts +1 -1
- package/dist/utils/swap.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/components/BlockchainList/BlockchainList.styles.ts +6 -5
- package/src/components/BlockchainList/BlockchainList.tsx +5 -8
- package/src/components/ConfirmWalletsModal/ConfirmWallets.helpers.ts +26 -4
- package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx +1 -1
- package/src/components/Layout/Layout.tsx +2 -2
- package/src/components/RouteErrors/RouteErrors.styles.ts +2 -1
- package/src/components/RouteErrors/RouteErrors.tsx +37 -26
- package/src/components/RouteErrors/RouteErrors.types.ts +3 -1
- package/src/components/RouteErrors/RouteErrorsModal.tsx +38 -11
- package/src/components/SwapDetails/SwapDetails.helpers.tsx +9 -26
- package/src/components/SwapDetails/SwapDetails.styles.ts +1 -9
- package/src/components/SwapDetails/SwapDetails.tsx +99 -73
- package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx +3 -7
- package/src/components/SwapDetailsModal/SwapDetailsModal.tsx +3 -0
- package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts +1 -0
- package/src/components/TokenList/TokenList.styles.ts +7 -1
- package/src/components/TokenList/TokenList.tsx +3 -2
- package/src/constants/errors.ts +2 -2
- package/src/constants/routing.ts +17 -2
- package/src/hooks/useFetchBestRoute.ts +2 -2
- package/src/hooks/useSwapInput.ts +10 -1
- package/src/pages/ConfirmSwapPage.tsx +47 -19
- package/src/pages/Home.tsx +90 -42
- package/src/utils/routing.ts +56 -13
- package/src/utils/swap.ts +35 -19
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoB7C,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4EnD,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,qBA6a/C"}
|
package/dist/pages/Home.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAsC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA6E3D,wBAAgB,IAAI,sBA6XnB"}
|
package/dist/utils/routing.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { BestRouteEqualityParams, Wallet } from '../types';
|
|
2
2
|
import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
|
|
3
|
+
import type { PriceImpactWarningLevel } from '@rango-dev/ui';
|
|
3
4
|
import type { SimulationAssetAndAmount, SimulationValidationStatus } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
|
|
4
5
|
import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
|
|
5
6
|
import BigNumber from 'bignumber.js';
|
|
@@ -12,7 +13,8 @@ export declare function isRouteChanged(route1: BestRouteResponse, route2: BestRo
|
|
|
12
13
|
export declare function outToRatioHasWarning(fromUsdValue: BigNumber | null, outToInRatio: BigNumber | 0): boolean;
|
|
13
14
|
export declare function getRequiredBalanceOfWallet(selectedWallet: Wallet, fee: SimulationValidationStatus[] | null): SimulationAssetAndAmount[] | null;
|
|
14
15
|
export declare function isRouteParametersChanged(params: BestRouteEqualityParams): boolean | undefined;
|
|
15
|
-
export declare function
|
|
16
|
-
export declare function
|
|
16
|
+
export declare function getFormattedBestRoute(bestRoute: BestRouteResponse | null): BestRouteResponse | null;
|
|
17
|
+
export declare function getFormattedPendingSwap(pendingSwap: PendingSwap): PendingSwap;
|
|
17
18
|
export declare const getBestRouteStatus: (loading: boolean, error: boolean) => "failed" | "success" | "loading";
|
|
19
|
+
export declare function getPriceImpactLevel(priceImpact: number): PriceImpactWarningLevel;
|
|
18
20
|
//# sourceMappingURL=routing.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../../src/utils/routing.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAE1E,OAAO,SAAS,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../../src/utils/routing.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAE1E,OAAO,SAAS,MAAM,cAAc,CAAC;AAcrC,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAqBd;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,MAAM,GAAG,IAAI,GAAG,SAAS,CAG3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,uBAAuB,uBA4BvE;AAED,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,iBAAiB,GAAG,IAAI,CAyB1B;AAED,wBAAgB,uBAAuB,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,CA6B7E;AAGD,eAAO,MAAM,kBAAkB,YAAa,OAAO,SAAS,OAAO,qCAQlE,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB"}
|
package/dist/utils/swap.d.ts
CHANGED
|
@@ -48,7 +48,7 @@ export declare function getWalletsForNewSwap(selectedWallets: Wallet[]): {
|
|
|
48
48
|
};
|
|
49
49
|
};
|
|
50
50
|
export declare function getRouteOutputAmount(route: BestRouteResponse | null): string | null;
|
|
51
|
-
export declare function getPercentageChange(
|
|
51
|
+
export declare function getPercentageChange(inputUsdValue: string | number | null, outputUsdValue: string | number | null): BigNumber | null;
|
|
52
52
|
export declare function isOutputAmountChangedALot(oldRoute: BestRouteResponse, newRoute: BestRouteResponse): boolean;
|
|
53
53
|
export declare function getBalanceWarnings(route: BestRouteResponse, selectedWallets: Wallet[]): string[];
|
|
54
54
|
export declare function calcOutputUsdValue(outputAmount?: string, tokenPrice?: number | null): BigNumber;
|
package/dist/utils/swap.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/utils/swap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,KAAK,EACV,WAAW,EACX,eAAe,EAChB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EACV,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,UAAU,EACV,KAAK,EACN,MAAM,WAAW,CAAC;AAGnB,OAAO,SAAS,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/utils/swap.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rango-dev/widget-embedded",
|
|
3
|
-
"version": "0.12.1-next.
|
|
3
|
+
"version": "0.12.1-next.12",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"@rango-dev/queue-manager-core": "^0.15.1-next.1",
|
|
24
24
|
"@rango-dev/queue-manager-rango-preset": "^0.15.1-next.5",
|
|
25
25
|
"@rango-dev/queue-manager-react": "^0.15.1-next.3",
|
|
26
|
-
"@rango-dev/ui": "^0.15.1-next.
|
|
26
|
+
"@rango-dev/ui": "^0.15.1-next.9",
|
|
27
27
|
"@rango-dev/wallets-react": "^0.1.1-next.5",
|
|
28
28
|
"@rango-dev/wallets-shared": "^0.15.1-next.3",
|
|
29
29
|
"bignumber.js": "^9.1.1",
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import { styled } from '@rango-dev/ui';
|
|
2
2
|
|
|
3
|
+
export const Container = styled('div', {
|
|
4
|
+
display: 'flex',
|
|
5
|
+
flexDirection: 'column',
|
|
6
|
+
overflow: 'hidden',
|
|
7
|
+
});
|
|
8
|
+
|
|
3
9
|
export const List = styled('ul', {
|
|
4
10
|
padding: 0,
|
|
5
11
|
margin: 0,
|
|
6
12
|
listStyle: 'none',
|
|
7
|
-
height: 355,
|
|
8
13
|
overflowY: 'auto',
|
|
9
14
|
paddingRight: '$5',
|
|
10
15
|
'.image-container': {
|
|
@@ -12,7 +17,3 @@ export const List = styled('ul', {
|
|
|
12
17
|
overflow: 'hidden',
|
|
13
18
|
},
|
|
14
19
|
});
|
|
15
|
-
|
|
16
|
-
export const Content = styled('div', {
|
|
17
|
-
minHeight: 325,
|
|
18
|
-
});
|
|
@@ -14,7 +14,7 @@ import React, { useEffect, useState } from 'react';
|
|
|
14
14
|
import { useMetaStore } from '../../store/meta';
|
|
15
15
|
|
|
16
16
|
import { filterBlockchains } from './BlockchainList.helpers';
|
|
17
|
-
import {
|
|
17
|
+
import { Container, List } from './BlockchainList.styles';
|
|
18
18
|
import { LoadingBlockchainList } from './LoadingBlockchainList';
|
|
19
19
|
|
|
20
20
|
export function BlockchainList(props: PropTypes) {
|
|
@@ -61,16 +61,13 @@ export function BlockchainList(props: PropTypes) {
|
|
|
61
61
|
};
|
|
62
62
|
|
|
63
63
|
return (
|
|
64
|
-
<
|
|
64
|
+
<Container>
|
|
65
65
|
<Typography variant="label" size="large">
|
|
66
66
|
{i18n.t('Select Blockchain')}
|
|
67
67
|
</Typography>
|
|
68
68
|
<Divider size={4} />
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
{loadingStatus === 'success' && renderList()}
|
|
73
|
-
</Content>
|
|
74
|
-
</div>
|
|
69
|
+
{loadingStatus === 'loading' && <LoadingBlockchainList />}
|
|
70
|
+
{loadingStatus === 'success' && renderList()}
|
|
71
|
+
</Container>
|
|
75
72
|
);
|
|
76
73
|
}
|
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
import type { Step } from '@rango-dev/ui/dist/widget/ui/src/components/BestRoute/BestRoute.types';
|
|
3
3
|
import type { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
|
|
4
4
|
|
|
5
|
+
import {
|
|
6
|
+
TOKEN_AMOUNT_MAX_DECIMALS,
|
|
7
|
+
TOKEN_AMOUNT_MIN_DECIMALS,
|
|
8
|
+
USD_VALUE_MAX_DECIMALS,
|
|
9
|
+
USD_VALUE_MIN_DECIMALS,
|
|
10
|
+
} from '../../constants/routing';
|
|
5
11
|
import { numberToString } from '../../utils/numbers';
|
|
6
12
|
|
|
7
13
|
export function formatBestRoute(
|
|
@@ -17,8 +23,16 @@ export function formatBestRoute(
|
|
|
17
23
|
image: swap.from.blockchainLogo,
|
|
18
24
|
},
|
|
19
25
|
price: {
|
|
20
|
-
value: numberToString(
|
|
21
|
-
|
|
26
|
+
value: numberToString(
|
|
27
|
+
swap.fromAmount,
|
|
28
|
+
TOKEN_AMOUNT_MIN_DECIMALS,
|
|
29
|
+
TOKEN_AMOUNT_MAX_DECIMALS
|
|
30
|
+
),
|
|
31
|
+
usdValue: numberToString(
|
|
32
|
+
swap.from.usdPrice?.toString(),
|
|
33
|
+
USD_VALUE_MIN_DECIMALS,
|
|
34
|
+
USD_VALUE_MAX_DECIMALS
|
|
35
|
+
),
|
|
22
36
|
},
|
|
23
37
|
},
|
|
24
38
|
to: {
|
|
@@ -28,8 +42,16 @@ export function formatBestRoute(
|
|
|
28
42
|
image: swap.to.blockchainLogo,
|
|
29
43
|
},
|
|
30
44
|
price: {
|
|
31
|
-
value: numberToString(
|
|
32
|
-
|
|
45
|
+
value: numberToString(
|
|
46
|
+
swap.toAmount,
|
|
47
|
+
TOKEN_AMOUNT_MIN_DECIMALS,
|
|
48
|
+
TOKEN_AMOUNT_MAX_DECIMALS
|
|
49
|
+
),
|
|
50
|
+
usdValue: numberToString(
|
|
51
|
+
swap.to.usdPrice?.toString(),
|
|
52
|
+
USD_VALUE_MIN_DECIMALS,
|
|
53
|
+
USD_VALUE_MAX_DECIMALS
|
|
54
|
+
),
|
|
33
55
|
},
|
|
34
56
|
},
|
|
35
57
|
};
|
|
@@ -332,7 +332,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
|
|
|
332
332
|
);
|
|
333
333
|
|
|
334
334
|
const key = `wallet-${index}`;
|
|
335
|
-
const isLastWallet = index
|
|
335
|
+
const isLastWallet = index === requiredWallets.length - 1;
|
|
336
336
|
|
|
337
337
|
return (
|
|
338
338
|
<div key={key}>
|
|
@@ -38,7 +38,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
|
|
|
38
38
|
const contentRef = useRef<HTMLDivElement | null>(null);
|
|
39
39
|
|
|
40
40
|
usePaddingRight({
|
|
41
|
-
|
|
41
|
+
elementRef: contentRef,
|
|
42
42
|
paddingRight: noPadding ? '0' : theme.sizes[DEFAULT_CONTENT_PADDING],
|
|
43
43
|
});
|
|
44
44
|
|
|
@@ -65,7 +65,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
|
|
|
65
65
|
</>
|
|
66
66
|
}
|
|
67
67
|
/>
|
|
68
|
-
<Content noPadding={noPadding} ref={
|
|
68
|
+
<Content noPadding={noPadding} ref={contentRef}>
|
|
69
69
|
{children}
|
|
70
70
|
</Content>
|
|
71
71
|
{(hasLogo || footer) && (
|
|
@@ -2,7 +2,7 @@ import { styled } from '@rango-dev/ui';
|
|
|
2
2
|
|
|
3
3
|
export const Alerts = styled('div', {
|
|
4
4
|
width: '100%',
|
|
5
|
-
paddingTop: '$
|
|
5
|
+
paddingTop: '$10',
|
|
6
6
|
});
|
|
7
7
|
|
|
8
8
|
export const Flex = styled('div', {
|
|
@@ -24,4 +24,5 @@ export const Item = styled('div', {
|
|
|
24
24
|
export const Action = styled('div', {
|
|
25
25
|
padding: '$2',
|
|
26
26
|
alignSelf: 'flex-start',
|
|
27
|
+
cursor: 'pointer',
|
|
27
28
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { PropTypes } from './RouteErrors.types';
|
|
2
2
|
|
|
3
|
-
import { Alert, InfoIcon } from '@rango-dev/ui';
|
|
3
|
+
import { Alert, Divider, InfoIcon } from '@rango-dev/ui';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
|
|
6
6
|
import { errorMessages } from '../../constants/errors';
|
|
@@ -23,37 +23,48 @@ export function RouteErrors(props: PropTypes) {
|
|
|
23
23
|
totalFeeInUsd,
|
|
24
24
|
outputUsdValue,
|
|
25
25
|
inputUsdValue,
|
|
26
|
+
loading,
|
|
27
|
+
extraSpace,
|
|
26
28
|
} = props;
|
|
27
29
|
const error = hasLimitError(bestRoute);
|
|
28
30
|
const { recommendation } = LimitErrorMessage(bestRoute);
|
|
29
31
|
|
|
32
|
+
const showWarnings = !error && (highValueLoss || priceImpactCanNotBeComputed);
|
|
33
|
+
const showAlerts = showWarnings || error;
|
|
34
|
+
|
|
30
35
|
return (
|
|
31
36
|
<>
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
37
|
+
{(loading || (extraSpace && !showAlerts)) && <Divider size={20} />}
|
|
38
|
+
{showAlerts && (
|
|
39
|
+
<Alerts>
|
|
40
|
+
{showWarnings && (
|
|
41
|
+
<>
|
|
42
|
+
<Alert
|
|
43
|
+
title={
|
|
44
|
+
highValueLoss
|
|
45
|
+
? errorMessages.highValueLossError.title
|
|
46
|
+
: errorMessages.unknownPriceError.title
|
|
47
|
+
}
|
|
48
|
+
type={
|
|
49
|
+
highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
|
|
50
|
+
? 'error'
|
|
51
|
+
: 'warning'
|
|
52
|
+
}
|
|
53
|
+
variant="alarm"
|
|
54
|
+
action={
|
|
55
|
+
<Action onClick={() => onToggle(true)}>
|
|
56
|
+
<InfoIcon size={12} color="gray" />
|
|
57
|
+
</Action>
|
|
58
|
+
}
|
|
59
|
+
/>
|
|
60
|
+
</>
|
|
61
|
+
)}
|
|
62
|
+
{error && (
|
|
63
|
+
<Alert type="error" variant="alarm" title={recommendation} />
|
|
64
|
+
)}
|
|
65
|
+
</Alerts>
|
|
66
|
+
)}
|
|
67
|
+
|
|
57
68
|
<RouteErrorsModal
|
|
58
69
|
highValueLoss={highValueLoss}
|
|
59
70
|
open={openModal}
|
|
@@ -9,11 +9,13 @@ export interface PropTypes {
|
|
|
9
9
|
percentageChange: BigNumber | null;
|
|
10
10
|
highValueLoss: boolean;
|
|
11
11
|
priceImpactCanNotBeComputed: boolean;
|
|
12
|
+
loading: boolean;
|
|
13
|
+
extraSpace: boolean;
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
type ModalPropTypesKeys = keyof Omit<
|
|
15
17
|
PropTypes,
|
|
16
|
-
'priceImpactCanNotBeComputed' | 'openModal'
|
|
18
|
+
'priceImpactCanNotBeComputed' | 'openModal' | 'extraSpace' | 'loading'
|
|
17
19
|
>;
|
|
18
20
|
|
|
19
21
|
export type ModalPropTypes = Pick<PropTypes, ModalPropTypesKeys> & {
|
|
@@ -13,15 +13,20 @@ import { useNavigate } from 'react-router-dom';
|
|
|
13
13
|
|
|
14
14
|
import { errorMessages } from '../../constants/errors';
|
|
15
15
|
import { navigationRoutes } from '../../constants/navigationRoutes';
|
|
16
|
+
import {
|
|
17
|
+
GAS_FEE_MAX_DECIMALS,
|
|
18
|
+
GAS_FEE_MIN_DECIMALS,
|
|
19
|
+
HIGHT_PRICE_IMPACT,
|
|
20
|
+
PERCENTAGE_CHANGE_MAX_DECIMALS,
|
|
21
|
+
PERCENTAGE_CHANGE_MIN_DECIMALS,
|
|
22
|
+
USD_VALUE_MAX_DECIMALS,
|
|
23
|
+
USD_VALUE_MIN_DECIMALS,
|
|
24
|
+
} from '../../constants/routing';
|
|
16
25
|
import { numberToString } from '../../utils/numbers';
|
|
17
26
|
|
|
18
27
|
import { Flex } from './RouteErrors.styles';
|
|
19
28
|
import { RouteErrorsModalItem } from './RouteErrorsModalItem';
|
|
20
29
|
|
|
21
|
-
const WARNING_LEVEL_LIMIT = -10;
|
|
22
|
-
const MAX_DECIMAL = 2;
|
|
23
|
-
const MIN_DECIMAL = 0;
|
|
24
|
-
|
|
25
30
|
export function RouteErrorsModal(props: ModalPropTypes) {
|
|
26
31
|
const {
|
|
27
32
|
highValueLoss,
|
|
@@ -34,19 +39,41 @@ export function RouteErrorsModal(props: ModalPropTypes) {
|
|
|
34
39
|
} = props;
|
|
35
40
|
const navigate = useNavigate();
|
|
36
41
|
const type =
|
|
37
|
-
highValueLoss && !!percentageChange?.lt(
|
|
42
|
+
highValueLoss && !!percentageChange?.lt(HIGHT_PRICE_IMPACT)
|
|
38
43
|
? 'error'
|
|
39
44
|
: 'warning';
|
|
40
45
|
const highValueLossData = [
|
|
41
|
-
{
|
|
46
|
+
{
|
|
47
|
+
title: 'Swapping',
|
|
48
|
+
value: numberToString(
|
|
49
|
+
inputUsdValue,
|
|
50
|
+
USD_VALUE_MIN_DECIMALS,
|
|
51
|
+
USD_VALUE_MAX_DECIMALS
|
|
52
|
+
),
|
|
53
|
+
},
|
|
42
54
|
{
|
|
43
55
|
title: 'Gas cost',
|
|
44
|
-
value: numberToString(
|
|
56
|
+
value: numberToString(
|
|
57
|
+
totalFeeInUsd,
|
|
58
|
+
GAS_FEE_MIN_DECIMALS,
|
|
59
|
+
GAS_FEE_MAX_DECIMALS
|
|
60
|
+
),
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
title: 'Receiving',
|
|
64
|
+
value: numberToString(
|
|
65
|
+
outputUsdValue,
|
|
66
|
+
USD_VALUE_MIN_DECIMALS,
|
|
67
|
+
USD_VALUE_MAX_DECIMALS
|
|
68
|
+
),
|
|
45
69
|
},
|
|
46
|
-
{ title: 'Receiving', value: numberToString(outputUsdValue) },
|
|
47
70
|
{
|
|
48
71
|
title: 'Price impact',
|
|
49
|
-
value: numberToString(
|
|
72
|
+
value: numberToString(
|
|
73
|
+
percentageChange,
|
|
74
|
+
PERCENTAGE_CHANGE_MIN_DECIMALS,
|
|
75
|
+
PERCENTAGE_CHANGE_MAX_DECIMALS
|
|
76
|
+
),
|
|
50
77
|
valueColor: `${type}500`,
|
|
51
78
|
},
|
|
52
79
|
];
|
|
@@ -59,13 +86,13 @@ export function RouteErrorsModal(props: ModalPropTypes) {
|
|
|
59
86
|
{highValueLoss ? (
|
|
60
87
|
<MessageBox
|
|
61
88
|
type={type}
|
|
62
|
-
title={errorMessages.highValueLossError.
|
|
89
|
+
title={errorMessages.highValueLossError.impactTitle}
|
|
63
90
|
description={errorMessages.highValueLossError.description}
|
|
64
91
|
/>
|
|
65
92
|
) : (
|
|
66
93
|
<MessageBox
|
|
67
94
|
type={type}
|
|
68
|
-
title={errorMessages.unknownPriceError.
|
|
95
|
+
title={errorMessages.unknownPriceError.impactTitle}
|
|
69
96
|
description={errorMessages.unknownPriceError.description}
|
|
70
97
|
/>
|
|
71
98
|
)}
|
|
@@ -1,24 +1,18 @@
|
|
|
1
1
|
import type { GetStep } from '../SwapDetailsAlerts';
|
|
2
2
|
import type { PendingSwapStep } from '@rango-dev/queue-manager-rango-preset';
|
|
3
|
-
import type {
|
|
4
|
-
PriceImpactWarningLevel,
|
|
5
|
-
Step,
|
|
6
|
-
StepDetailsProps,
|
|
7
|
-
} from '@rango-dev/ui';
|
|
8
|
-
import type BigNumber from 'bignumber.js';
|
|
3
|
+
import type { Step, StepDetailsProps } from '@rango-dev/ui';
|
|
9
4
|
|
|
10
5
|
import React from 'react';
|
|
11
6
|
|
|
7
|
+
import {
|
|
8
|
+
TOKEN_AMOUNT_MAX_DECIMALS,
|
|
9
|
+
TOKEN_AMOUNT_MIN_DECIMALS,
|
|
10
|
+
} from '../../constants/routing';
|
|
12
11
|
import { numberToString } from '../../utils/numbers';
|
|
13
12
|
import { isNetworkStatusInWarningState } from '../../utils/swap';
|
|
14
13
|
import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
|
|
15
14
|
|
|
16
|
-
export const LOW_PRICE_IMPACT = 3;
|
|
17
|
-
export const HIGHT_PRICE_IMPACT = 10;
|
|
18
15
|
export const RESET_INTERVAL = 2_000;
|
|
19
|
-
export const MIN_DECIMALS = 0;
|
|
20
|
-
export const AMOUNT_DECIMALS = 4;
|
|
21
|
-
export const PERCENT_DECIMALS = 2;
|
|
22
16
|
export const SECONDS = 60;
|
|
23
17
|
|
|
24
18
|
export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
|
|
@@ -36,8 +30,8 @@ export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
|
|
|
36
30
|
price: {
|
|
37
31
|
value: numberToString(
|
|
38
32
|
amountToConvert,
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
TOKEN_AMOUNT_MIN_DECIMALS,
|
|
34
|
+
TOKEN_AMOUNT_MAX_DECIMALS
|
|
41
35
|
),
|
|
42
36
|
},
|
|
43
37
|
},
|
|
@@ -50,8 +44,8 @@ export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
|
|
|
50
44
|
price: {
|
|
51
45
|
value: numberToString(
|
|
52
46
|
step.outputAmount || step.expectedOutputAmountHumanReadable,
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
TOKEN_AMOUNT_MIN_DECIMALS,
|
|
48
|
+
TOKEN_AMOUNT_MAX_DECIMALS
|
|
55
49
|
),
|
|
56
50
|
},
|
|
57
51
|
},
|
|
@@ -67,17 +61,6 @@ export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
|
|
|
67
61
|
});
|
|
68
62
|
};
|
|
69
63
|
|
|
70
|
-
export const getPriceImpactWarningLevel = (
|
|
71
|
-
priceImpact: BigNumber | null
|
|
72
|
-
): PriceImpactWarningLevel | undefined => {
|
|
73
|
-
if (!priceImpact) {
|
|
74
|
-
return undefined;
|
|
75
|
-
} else if (priceImpact.lt(LOW_PRICE_IMPACT)) {
|
|
76
|
-
return 'low';
|
|
77
|
-
}
|
|
78
|
-
return 'high';
|
|
79
|
-
};
|
|
80
|
-
|
|
81
64
|
export function getStepState(step: PendingSwapStep): StepDetailsProps['state'] {
|
|
82
65
|
if (
|
|
83
66
|
isNetworkStatusInWarningState(step) &&
|
|
@@ -4,7 +4,6 @@ export const Container = styled('div', {
|
|
|
4
4
|
display: 'flex',
|
|
5
5
|
width: '100%',
|
|
6
6
|
flexDirection: 'column',
|
|
7
|
-
justifyContent: 'center',
|
|
8
7
|
alignItems: 'center',
|
|
9
8
|
height: '0',
|
|
10
9
|
flexGrow: 1,
|
|
@@ -37,20 +36,13 @@ export const Container = styled('div', {
|
|
|
37
36
|
},
|
|
38
37
|
});
|
|
39
38
|
|
|
40
|
-
export const Separator = styled('div', {
|
|
41
|
-
height: '$12',
|
|
42
|
-
marginRight: '$10',
|
|
43
|
-
borderLeft: '1px solid $neutral900',
|
|
44
|
-
marginLeft: '$14',
|
|
45
|
-
});
|
|
46
|
-
|
|
47
39
|
export const HeaderDetails = styled('div', {
|
|
48
40
|
width: '100%',
|
|
49
41
|
padding: '0px 15px',
|
|
50
42
|
});
|
|
51
43
|
|
|
52
44
|
export const StepsList = styled('div', {
|
|
53
|
-
padding: '0 $20 $20',
|
|
45
|
+
padding: '$0 $0 $20 $20',
|
|
54
46
|
width: '100%',
|
|
55
47
|
overflow: 'auto',
|
|
56
48
|
});
|