@rango-dev/widget-embedded 0.20.1-next.1 → 0.20.1-next.10
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/ConfirmWalletsModal/ConfirmWallets.styles.d.ts +1 -0
- package/dist/components/ConfirmWalletsModal/ConfirmWallets.styles.d.ts.map +1 -1
- package/dist/components/HeaderButtons/HeaderButtons.styles.d.ts +159 -0
- package/dist/components/HeaderButtons/HeaderButtons.styles.d.ts.map +1 -1
- package/dist/components/HeaderButtons/HeaderButtons.types.d.ts +0 -1
- package/dist/components/HeaderButtons/HeaderButtons.types.d.ts.map +1 -1
- package/dist/components/HeaderButtons/HomeButtons.d.ts.map +1 -1
- package/dist/components/HeaderButtons/RefreshButton.d.ts +6 -0
- package/dist/components/HeaderButtons/RefreshButton.d.ts.map +1 -0
- package/dist/components/Quote/Quote.d.ts.map +1 -1
- package/dist/components/Quote/Quote.styles.d.ts +157 -0
- package/dist/components/Quote/Quote.styles.d.ts.map +1 -1
- package/dist/components/Quote/QuoteSummary.d.ts.map +1 -1
- package/dist/components/SwapDetails/SwapDetails.d.ts.map +1 -1
- package/dist/components/SwapDetails/SwapDetails.helpers.d.ts.map +1 -1
- package/dist/components/SwapDetailsModal/SwapDetailsCompleteModal.d.ts.map +1 -1
- package/dist/components/SwapDetailsModal/SwapDetailsModal.types.d.ts +2 -0
- package/dist/components/SwapDetailsModal/SwapDetailsModal.types.d.ts.map +1 -1
- package/dist/components/SwapsGroup/SwapsGroup.d.ts.map +1 -1
- package/dist/constants/routing.d.ts +1 -0
- package/dist/constants/routing.d.ts.map +1 -1
- package/dist/containers/Wallets/Wallets.d.ts.map +1 -1
- package/dist/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.d.ts +2 -2
- package/dist/hooks/useSwapInput.d.ts.map +1 -1
- package/dist/hooks/useSyncStoresWithConfig.d.ts.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +4 -4
- package/dist/pages/ConfirmSwapPage.d.ts.map +1 -1
- package/dist/pages/Home.d.ts.map +1 -1
- package/dist/pages/LiquiditySourcePage.d.ts.map +1 -1
- package/dist/pages/SelectSwapItemsPage.d.ts.map +1 -1
- package/dist/store/slices/data.d.ts.map +1 -1
- package/dist/types/config.d.ts +16 -3
- package/dist/types/config.d.ts.map +1 -1
- package/dist/utils/configs.d.ts +8 -0
- package/dist/utils/configs.d.ts.map +1 -1
- package/dist/utils/date.d.ts.map +1 -1
- package/dist/utils/numbers.d.ts +1 -5
- package/dist/utils/numbers.d.ts.map +1 -1
- package/dist/utils/settings.d.ts +1 -1
- package/dist/utils/time.d.ts.map +1 -1
- package/package.json +7 -7
- package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx +1 -1
- package/src/components/HeaderButtons/HeaderButtons.styles.ts +16 -1
- package/src/components/HeaderButtons/HeaderButtons.types.ts +0 -1
- package/src/components/HeaderButtons/HomeButtons.tsx +20 -33
- package/src/components/HeaderButtons/RefreshButton.tsx +81 -0
- package/src/components/Quote/Quote.styles.ts +5 -1
- package/src/components/Quote/Quote.tsx +53 -15
- package/src/components/Quote/QuoteSummary.tsx +20 -4
- package/src/components/Slippage/Slippage.tsx +5 -5
- package/src/components/SwapDetails/SwapDetails.helpers.tsx +7 -1
- package/src/components/SwapDetails/SwapDetails.tsx +21 -1
- package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx +6 -0
- package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts +2 -0
- package/src/components/SwapsGroup/SwapsGroup.tsx +28 -11
- package/src/constants/routing.ts +2 -0
- package/src/containers/Wallets/Wallets.tsx +11 -2
- package/src/hooks/useSwapInput.ts +6 -2
- package/src/hooks/useSyncStoresWithConfig.ts +17 -34
- package/src/index.ts +2 -0
- package/src/pages/ConfirmSwapPage.tsx +12 -10
- package/src/pages/Home.tsx +16 -2
- package/src/pages/LiquiditySourcePage.tsx +5 -2
- package/src/pages/SelectBlockchainPage.tsx +3 -3
- package/src/pages/SelectSwapItemsPage.tsx +5 -1
- package/src/store/slices/data.ts +5 -7
- package/src/types/config.ts +16 -3
- package/src/utils/configs.ts +41 -0
- package/src/utils/date.ts +24 -9
- package/src/utils/numbers.ts +8 -58
- package/src/utils/time.ts +25 -69
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AA0D5E,wBAAgB,eAAe,sBA6S9B"}
|
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":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA+C3D,wBAAgB,IAAI,sBA6OnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAexC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAexC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBAwH5D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBAmGnD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../src/store/slices/data.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../src/store/slices/data.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQ5C,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;CACjC,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;IAE/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC3D,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,OAAO,EAAE,KAAK,EAAE,CAAC;IACjB,cAAc,EAAE,KAAK,EAAE,CAAC;IACxB,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,KAAK,cAAc,EAAE,CAAC;IAC/D,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,KAAK,EAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,GAAG,aAAa,KAAK,OAAO,CAAC;IAEzE,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,EAAE,YAAY,CACxC,SAAS,GAAG,WAAW,EACvB;CAAE,EACF;CAAE,EACF,SAAS,CAsMT,CAAC"}
|
package/dist/types/config.d.ts
CHANGED
|
@@ -68,6 +68,17 @@ export type WidgetAffiliate = {
|
|
|
68
68
|
[key: string]: string;
|
|
69
69
|
};
|
|
70
70
|
};
|
|
71
|
+
/**
|
|
72
|
+
* `Tokens`
|
|
73
|
+
*
|
|
74
|
+
* @property {boolean} isExcluded - This is a boolean property capable of removing tokens from all or a blockchain.
|
|
75
|
+
* @property {Asset[]} tokens - The `tokens` property is an array of `Asset` objects that
|
|
76
|
+
* you could use that to limit tokens to some limited ones.
|
|
77
|
+
*/
|
|
78
|
+
export type Tokens = {
|
|
79
|
+
isExcluded: boolean;
|
|
80
|
+
tokens: Asset[];
|
|
81
|
+
};
|
|
71
82
|
/**
|
|
72
83
|
* `BlockchainAndTokenConfig`
|
|
73
84
|
*
|
|
@@ -76,8 +87,8 @@ export type WidgetAffiliate = {
|
|
|
76
87
|
* which is selected. e.g. {blockchain: 'BSC', symbol: 'BNB', address: null}
|
|
77
88
|
* @property {string[]} blockchains - An optional array of strings representing the supported
|
|
78
89
|
* blockchains. e.g. ['BSC','ETHEREUM']
|
|
79
|
-
* @property {Asset[]} tokens - The `tokens` property is an optional array of `Asset` objects
|
|
80
|
-
* you could use that to limit tokens to some limited ones.
|
|
90
|
+
* @property {Asset[] |{ [blockchain: string]: Tokens }} tokens - The `tokens` property is an optional object of `blockchain` objects or array of `Asset` objects
|
|
91
|
+
* that you could use that to limit tokens to some limited ones.
|
|
81
92
|
* @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that
|
|
82
93
|
* you could use to pin tokens of your choice to the top of the token list.
|
|
83
94
|
*/
|
|
@@ -85,8 +96,10 @@ export type BlockchainAndTokenConfig = {
|
|
|
85
96
|
blockchain?: string;
|
|
86
97
|
token?: Asset;
|
|
87
98
|
blockchains?: string[];
|
|
88
|
-
tokens?: Asset[];
|
|
89
99
|
pinnedTokens?: Asset[];
|
|
100
|
+
tokens?: Asset[] | {
|
|
101
|
+
[blockchain: string]: Tokens;
|
|
102
|
+
};
|
|
90
103
|
};
|
|
91
104
|
/**
|
|
92
105
|
* `Features`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,YAAY,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,YAAY,CAAC;QAAC,IAAI,CAAC,EAAE,YAAY,CAAA;KAAE,CAAC;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"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"}
|
package/dist/utils/configs.d.ts
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
|
+
import type { Tokens } from '../types';
|
|
2
|
+
import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
|
|
1
3
|
export interface Configs {
|
|
2
4
|
API_KEY: string;
|
|
3
5
|
BASE_URL?: string;
|
|
4
6
|
}
|
|
7
|
+
type TokensConfig = Asset[] | {
|
|
8
|
+
[blockchain: string]: Tokens;
|
|
9
|
+
};
|
|
5
10
|
export declare function getConfig(name: keyof Configs): string;
|
|
6
11
|
export declare function setConfig(name: keyof Configs, value: any): any;
|
|
7
12
|
/**
|
|
@@ -12,4 +17,7 @@ export declare const DEFAULT_PRIMARY_RADIUS = 20;
|
|
|
12
17
|
export declare const DEFAULT_SECONDARY_RADIUS = 25;
|
|
13
18
|
export declare const DEFAULT_FONT_FAMILY = "Roboto";
|
|
14
19
|
export declare const THEME_CLASS_NAME_PREFIX = "theme-widget";
|
|
20
|
+
export declare const isTokenExcludedInConfig: (token: Token | null, tokensConfig?: TokensConfig) => boolean;
|
|
21
|
+
export declare const isBlockchainExcludedInConfig: (blockchain: BlockchainMeta | null, blockchainsConfig?: string[]) => boolean | null | undefined;
|
|
22
|
+
export {};
|
|
15
23
|
//# sourceMappingURL=configs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../src/utils/configs.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../src/utils/configs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAM9D,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,KAAK,YAAY,GACb,KAAK,EAAE,GACP;IACE,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B,CAAC;AAMN,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,UAE5C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,EAAE,KAAK,EAAE,GAAG,OAIxD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,WAS9C;AAED,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,uBAAuB,iBAAiB,CAAC;AAEtD,eAAO,MAAM,uBAAuB,UAC3B,KAAK,GAAG,IAAI,iBACJ,YAAY,YAe5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,eAC3B,cAAc,GAAG,IAAI,sBACb,MAAM,EAAE,+BAO7B,CAAC"}
|
package/dist/utils/date.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2CAA2C,CAAC;
|
|
1
|
+
{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2CAA2C,CAAC;AAMzE,eAAO,MAAM,gBAAgB,EAAE,OAmE9B,CAAC"}
|
package/dist/utils/numbers.d.ts
CHANGED
|
@@ -1,17 +1,13 @@
|
|
|
1
1
|
import type { BestRouteResponse } from 'rango-sdk';
|
|
2
2
|
import { BigNumber } from 'bignumber.js';
|
|
3
|
-
export declare const percentToString: (p: number, fractions?: number) => string;
|
|
4
3
|
export declare const secondsToString: (s: number) => string;
|
|
5
4
|
export declare const numberToString: (number: BigNumber | string | number | null | undefined, minDecimals?: number | null, maxDecimals?: number | null) => string;
|
|
6
|
-
export declare const convertBigNumberToHex: (value: BigNumber, decimals: number) => string;
|
|
7
5
|
export declare const uint8ArrayToHex: (buffer: Uint8Array) => string;
|
|
8
|
-
export declare function dollarToConciseString(num: number | undefined): string;
|
|
9
|
-
export declare function removeExtraDecimals(num: string, maxDecimals: number): string;
|
|
10
6
|
export declare const totalArrivalTime: (data: {
|
|
11
7
|
estimatedTimeInSeconds: number | null;
|
|
12
8
|
}[] | undefined) => number;
|
|
13
9
|
export declare const rawFees: (data: BestRouteResponse) => string;
|
|
14
10
|
export declare const containsText: (text: string, searchText: string) => boolean;
|
|
15
11
|
export declare const isPositiveNumber: (text?: string) => boolean;
|
|
16
|
-
export declare function
|
|
12
|
+
export declare function formatTooltipNumbers(number: BigNumber | string | number | null | undefined): string;
|
|
17
13
|
//# sourceMappingURL=numbers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"numbers.d.ts","sourceRoot":"","sources":["../../src/utils/numbers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"numbers.d.ts","sourceRoot":"","sources":["../../src/utils/numbers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,eAAe,MAAO,MAAM,KAAG,MAM3C,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,gBACzC,MAAM,GAAG,IAAI,gBACb,MAAM,GAAG,IAAI,KACzB,MA2EF,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,UAAU,KAAG,MAKpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,SACrB;IAAE,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,EAAE,GAAG,SAAS,WACS,CAAC;AAEzE,eAAO,MAAM,OAAO,SAAU,iBAAiB,KAAG,MAOnC,CAAC;AAEhB,eAAO,MAAM,YAAY,SAAU,MAAM,cAAc,MAAM,YACF,CAAC;AAE5D,eAAO,MAAM,gBAAgB,UAAW,MAAM,YACd,CAAC;AAGjC,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,UAMvD"}
|
package/dist/utils/settings.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export type UniqueSwappersGroupType = {
|
|
|
9
9
|
selected: boolean;
|
|
10
10
|
};
|
|
11
11
|
export declare function getUniqueSwappersGroups(swappers: SwapperMeta[], disabledLiquiditySources: string[]): UniqueSwappersGroupType[];
|
|
12
|
-
export declare function sortLiquiditySourcesByGroupTitle(a: SwapperMeta, b: SwapperMeta):
|
|
12
|
+
export declare function sortLiquiditySourcesByGroupTitle(a: SwapperMeta, b: SwapperMeta): 0 | 1 | -1;
|
|
13
13
|
export declare function isFeatureHidden(feature: keyof Features, features?: Features): boolean;
|
|
14
14
|
export declare function isFeatureEnabled(feature: keyof Features, features?: Features): boolean;
|
|
15
15
|
//# sourceMappingURL=settings.d.ts.map
|
package/dist/utils/time.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAc/C,wBAAgB,SAAS,CAAC,WAAW,EAAE,MAAM,UAW5C;AAED,wBAAgB,WAAW,CAAC,WAAW,EAAE,WAAW,UAKnD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rango-dev/widget-embedded",
|
|
3
|
-
"version": "0.20.1-next.
|
|
3
|
+
"version": "0.20.1-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"source": "./src/index.ts",
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@lingui/core": "4.2.1",
|
|
23
23
|
"@lingui/react": "4.2.1",
|
|
24
|
-
"@rango-dev/provider-all": "^0.25.1-next.
|
|
24
|
+
"@rango-dev/provider-all": "^0.25.1-next.2",
|
|
25
25
|
"@rango-dev/queue-manager-core": "^0.25.0",
|
|
26
|
-
"@rango-dev/queue-manager-rango-preset": "^0.25.1-next.
|
|
26
|
+
"@rango-dev/queue-manager-rango-preset": "^0.25.1-next.1",
|
|
27
27
|
"@rango-dev/queue-manager-react": "^0.24.0",
|
|
28
|
-
"@rango-dev/ui": "^0.26.1-next.
|
|
29
|
-
"@rango-dev/wallets-react": "^0.11.1-next.
|
|
30
|
-
"@rango-dev/wallets-shared": "^0.25.1-next.
|
|
28
|
+
"@rango-dev/ui": "^0.26.1-next.5",
|
|
29
|
+
"@rango-dev/wallets-react": "^0.11.1-next.1",
|
|
30
|
+
"@rango-dev/wallets-shared": "^0.25.1-next.1",
|
|
31
31
|
"bignumber.js": "^9.1.1",
|
|
32
32
|
"copy-to-clipboard": "^3.3.3",
|
|
33
33
|
"dayjs": "^1.11.7",
|
|
@@ -47,4 +47,4 @@
|
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
|
49
49
|
}
|
|
50
|
-
}
|
|
50
|
+
}
|
|
@@ -23,7 +23,10 @@ export const ConnectedIcon = styled('div', {
|
|
|
23
23
|
export const SuffixContainer = styled('div', {
|
|
24
24
|
display: 'flex',
|
|
25
25
|
justifyContent: 'flex-end',
|
|
26
|
-
|
|
26
|
+
minWidth: '$40',
|
|
27
|
+
button: {
|
|
28
|
+
padding: 0,
|
|
29
|
+
},
|
|
27
30
|
});
|
|
28
31
|
|
|
29
32
|
export const NotificationsBadgeContainer = styled('div', {
|
|
@@ -38,3 +41,15 @@ export const NotificationsBadgeContainer = styled('div', {
|
|
|
38
41
|
top: '$0',
|
|
39
42
|
right: '$0',
|
|
40
43
|
});
|
|
44
|
+
|
|
45
|
+
export const ProgressIcon = styled('div', {
|
|
46
|
+
padding: '$2',
|
|
47
|
+
variants: {
|
|
48
|
+
isRefetched: {
|
|
49
|
+
true: {
|
|
50
|
+
transform: `rotate(360deg)`,
|
|
51
|
+
transition: 'transform 1s ease-in-out',
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
});
|
|
@@ -4,7 +4,6 @@ import { i18n } from '@lingui/core';
|
|
|
4
4
|
import {
|
|
5
5
|
NotificationsIcon,
|
|
6
6
|
Popover,
|
|
7
|
-
RefreshIcon,
|
|
8
7
|
SettingsIcon,
|
|
9
8
|
Tooltip,
|
|
10
9
|
TransactionIcon,
|
|
@@ -17,16 +16,11 @@ import { isFeatureHidden } from '../../utils/settings';
|
|
|
17
16
|
import { NotificationContent } from '../NotificationContent';
|
|
18
17
|
|
|
19
18
|
import { HeaderButton } from './HeaderButtons.styles';
|
|
19
|
+
import { RefreshButton } from './RefreshButton';
|
|
20
20
|
import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
|
|
21
21
|
|
|
22
22
|
export function HomeButtons(props: HomeButtonsPropTypes) {
|
|
23
|
-
const {
|
|
24
|
-
layoutRef,
|
|
25
|
-
onClickRefresh,
|
|
26
|
-
onClickHistory,
|
|
27
|
-
onClickSettings,
|
|
28
|
-
onClickNotifications,
|
|
29
|
-
} = props;
|
|
23
|
+
const { layoutRef, onClickRefresh, onClickHistory, onClickSettings } = props;
|
|
30
24
|
|
|
31
25
|
const {
|
|
32
26
|
config: { features },
|
|
@@ -40,35 +34,28 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
|
|
|
40
34
|
container={getContainer()}
|
|
41
35
|
side="top"
|
|
42
36
|
content={i18n.t('Refresh')}>
|
|
43
|
-
<
|
|
44
|
-
variant="ghost"
|
|
45
|
-
size="small"
|
|
46
|
-
onClick={onClickRefresh}
|
|
47
|
-
disabled={!onClickRefresh}>
|
|
48
|
-
<RefreshIcon size={16} color={!onClickRefresh ? 'gray' : 'black'} />
|
|
49
|
-
</HeaderButton>
|
|
37
|
+
<RefreshButton onClick={onClickRefresh} />
|
|
50
38
|
</Tooltip>
|
|
51
39
|
|
|
52
40
|
{!isNotificationsHidden && (
|
|
53
|
-
<
|
|
41
|
+
<Popover
|
|
42
|
+
align="center"
|
|
43
|
+
collisionBoundary={layoutRef}
|
|
44
|
+
collisionPadding={{ right: 20, left: 20 }}
|
|
54
45
|
container={getContainer()}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<UnreadNotificationsBadge />
|
|
69
|
-
</HeaderButton>
|
|
70
|
-
</Popover>
|
|
71
|
-
</Tooltip>
|
|
46
|
+
content={<NotificationContent />}>
|
|
47
|
+
<div>
|
|
48
|
+
<Tooltip
|
|
49
|
+
container={getContainer()}
|
|
50
|
+
side="top"
|
|
51
|
+
content={i18n.t('Notifications')}>
|
|
52
|
+
<HeaderButton size="small" variant="ghost">
|
|
53
|
+
<NotificationsIcon size={18} color="black" />
|
|
54
|
+
<UnreadNotificationsBadge />
|
|
55
|
+
</HeaderButton>
|
|
56
|
+
</Tooltip>
|
|
57
|
+
</div>
|
|
58
|
+
</Popover>
|
|
72
59
|
)}
|
|
73
60
|
<Tooltip
|
|
74
61
|
container={getContainer()}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { RefreshProgressButton } from '@rango-dev/ui';
|
|
2
|
+
import React, { useEffect, useState } from 'react';
|
|
3
|
+
|
|
4
|
+
import { HeaderButton, ProgressIcon } from './HeaderButtons.styles';
|
|
5
|
+
|
|
6
|
+
const REFRESH_INTERVAL = 1000;
|
|
7
|
+
const MAX_ELAPSED_TIME = 60;
|
|
8
|
+
const MAX_PERCENTAGE = 100;
|
|
9
|
+
|
|
10
|
+
function RefreshButton({ onClick }: { onClick: (() => void) | undefined }) {
|
|
11
|
+
const [elapsedTime, setElapsedTime] = useState(0);
|
|
12
|
+
const [isRefetched, setIsRefetched] = useState(false);
|
|
13
|
+
|
|
14
|
+
const handleVisibilityChange = (interval?: number) => {
|
|
15
|
+
if (document.hidden && interval) {
|
|
16
|
+
// Tab is inactive, clear the interval
|
|
17
|
+
clearTimeout(interval);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
let interval: number | undefined;
|
|
23
|
+
if (onClick) {
|
|
24
|
+
interval = window.setInterval(() => {
|
|
25
|
+
setElapsedTime((prevTime) => prevTime + 1);
|
|
26
|
+
|
|
27
|
+
if (elapsedTime === MAX_ELAPSED_TIME) {
|
|
28
|
+
handleRefreshClick();
|
|
29
|
+
}
|
|
30
|
+
}, REFRESH_INTERVAL);
|
|
31
|
+
} else {
|
|
32
|
+
clearTimeout(interval);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
document.addEventListener('visibilitychange', () =>
|
|
36
|
+
handleVisibilityChange(interval)
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
return () => {
|
|
40
|
+
document.removeEventListener('visibilitychange', () =>
|
|
41
|
+
handleVisibilityChange(interval)
|
|
42
|
+
);
|
|
43
|
+
if (interval) {
|
|
44
|
+
clearInterval(interval);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
}, [elapsedTime, onClick]);
|
|
48
|
+
|
|
49
|
+
const clearTimeout = (interval?: number) => {
|
|
50
|
+
if (interval) {
|
|
51
|
+
clearInterval(interval);
|
|
52
|
+
}
|
|
53
|
+
setElapsedTime(0);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const handleRefreshClick = () => {
|
|
57
|
+
onClick?.();
|
|
58
|
+
setElapsedTime(0);
|
|
59
|
+
setIsRefetched(true);
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
return (
|
|
63
|
+
<HeaderButton
|
|
64
|
+
variant="ghost"
|
|
65
|
+
size="small"
|
|
66
|
+
onClick={handleRefreshClick}
|
|
67
|
+
disabled={!onClick}>
|
|
68
|
+
<ProgressIcon
|
|
69
|
+
onTransitionEnd={() => setIsRefetched(false)}
|
|
70
|
+
isRefetched={isRefetched}>
|
|
71
|
+
<RefreshProgressButton
|
|
72
|
+
size={24}
|
|
73
|
+
color={!onClick ? 'gray' : 'black'}
|
|
74
|
+
progress={(elapsedTime / MAX_ELAPSED_TIME) * MAX_PERCENTAGE}
|
|
75
|
+
/>
|
|
76
|
+
</ProgressIcon>
|
|
77
|
+
</HeaderButton>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export { RefreshButton };
|
|
@@ -243,8 +243,12 @@ export const FrameIcon = styled('div', {
|
|
|
243
243
|
});
|
|
244
244
|
|
|
245
245
|
export const BasicInfoOutput = styled(Typography, {
|
|
246
|
-
width: '100%',
|
|
247
246
|
overflow: 'hidden',
|
|
248
247
|
textOverflow: 'ellipsis',
|
|
249
248
|
letterSpacing: 0.4,
|
|
250
249
|
});
|
|
250
|
+
|
|
251
|
+
export const ContainerInfoOutput = styled('div', {
|
|
252
|
+
display: 'flex',
|
|
253
|
+
flexWrap: 'wrap',
|
|
254
|
+
});
|
|
@@ -16,6 +16,7 @@ import {
|
|
|
16
16
|
Tooltip,
|
|
17
17
|
Typography,
|
|
18
18
|
} from '@rango-dev/ui';
|
|
19
|
+
import BigNumber from 'bignumber.js';
|
|
19
20
|
import React, { useLayoutEffect, useRef, useState } from 'react';
|
|
20
21
|
|
|
21
22
|
import {
|
|
@@ -40,6 +41,7 @@ import {
|
|
|
40
41
|
getSwapperDisplayName,
|
|
41
42
|
} from '../../utils/meta';
|
|
42
43
|
import {
|
|
44
|
+
formatTooltipNumbers,
|
|
43
45
|
numberToString,
|
|
44
46
|
secondsToString,
|
|
45
47
|
totalArrivalTime,
|
|
@@ -52,6 +54,7 @@ import {
|
|
|
52
54
|
basicInfoStyles,
|
|
53
55
|
ChainImageContainer,
|
|
54
56
|
Chains,
|
|
57
|
+
ContainerInfoOutput,
|
|
55
58
|
Content,
|
|
56
59
|
EXPANDABLE_QUOTE_TRANSITION_DURATION,
|
|
57
60
|
FrameIcon,
|
|
@@ -162,6 +165,14 @@ export function Quote(props: QuoteProps) {
|
|
|
162
165
|
USD_VALUE_MIN_DECIMALS,
|
|
163
166
|
USD_VALUE_MAX_DECIMALS
|
|
164
167
|
),
|
|
168
|
+
realValue: formatTooltipNumbers(
|
|
169
|
+
index === 0 ? input.value : swap.fromAmount
|
|
170
|
+
),
|
|
171
|
+
realUsdValue: formatTooltipNumbers(
|
|
172
|
+
new BigNumber(swap.from.usdPrice ?? 0).multipliedBy(
|
|
173
|
+
swap.fromAmount
|
|
174
|
+
)
|
|
175
|
+
),
|
|
165
176
|
},
|
|
166
177
|
},
|
|
167
178
|
to: {
|
|
@@ -184,6 +195,10 @@ export function Quote(props: QuoteProps) {
|
|
|
184
195
|
USD_VALUE_MIN_DECIMALS,
|
|
185
196
|
USD_VALUE_MAX_DECIMALS
|
|
186
197
|
),
|
|
198
|
+
realValue: formatTooltipNumbers(swap.toAmount),
|
|
199
|
+
realUsdValue: formatTooltipNumbers(
|
|
200
|
+
new BigNumber(swap.to.usdPrice ?? 0).multipliedBy(swap.toAmount)
|
|
201
|
+
),
|
|
187
202
|
},
|
|
188
203
|
},
|
|
189
204
|
state: stepState,
|
|
@@ -291,27 +306,49 @@ export function Quote(props: QuoteProps) {
|
|
|
291
306
|
<FrameIcon>
|
|
292
307
|
<InfoIcon size={12} color="gray" />
|
|
293
308
|
</FrameIcon>
|
|
294
|
-
<
|
|
295
|
-
|
|
296
|
-
steps[0].from.token.displayName
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
309
|
+
<ContainerInfoOutput>
|
|
310
|
+
<BasicInfoOutput size="small" variant="body">
|
|
311
|
+
{`${roundedInput} ${steps[0].from.token.displayName} = `}
|
|
312
|
+
</BasicInfoOutput>
|
|
313
|
+
<Tooltip
|
|
314
|
+
content={formatTooltipNumbers(output.value)}
|
|
315
|
+
container={tooltipContainer}
|
|
316
|
+
open={!output.value ? false : undefined}>
|
|
317
|
+
<BasicInfoOutput size="small" variant="body">
|
|
318
|
+
|
|
319
|
+
{`${roundedOutput} ${
|
|
320
|
+
steps[steps.length - 1].to.token.displayName
|
|
321
|
+
}`}
|
|
322
|
+
</BasicInfoOutput>
|
|
323
|
+
</Tooltip>
|
|
324
|
+
</ContainerInfoOutput>
|
|
325
|
+
<Tooltip
|
|
326
|
+
content={formatTooltipNumbers(output.usdValue)}
|
|
327
|
+
container={tooltipContainer}
|
|
328
|
+
style={{
|
|
329
|
+
display: 'flex',
|
|
330
|
+
}}>
|
|
331
|
+
<Typography
|
|
332
|
+
color="$neutral600"
|
|
333
|
+
ml={2}
|
|
334
|
+
size="xsmall"
|
|
335
|
+
variant="body">
|
|
336
|
+
{`($${roundedOutputUsdValue})`}
|
|
337
|
+
</Typography>
|
|
338
|
+
</Tooltip>
|
|
308
339
|
</div>
|
|
309
340
|
)}
|
|
310
341
|
{type === 'list-item' && (
|
|
311
342
|
<TokenAmount
|
|
312
343
|
type="output"
|
|
313
344
|
direction="vertical"
|
|
314
|
-
|
|
345
|
+
tooltipContainer={tooltipContainer}
|
|
346
|
+
price={{
|
|
347
|
+
value: roundedOutput,
|
|
348
|
+
usdValue: roundedOutputUsdValue,
|
|
349
|
+
realValue: formatTooltipNumbers(output.value),
|
|
350
|
+
realUsdValue: formatTooltipNumbers(output.usdValue),
|
|
351
|
+
}}
|
|
315
352
|
token={{
|
|
316
353
|
displayName: steps[numberOfSteps - 1].to.token.displayName,
|
|
317
354
|
image: steps[numberOfSteps - 1].to.token.image,
|
|
@@ -402,6 +439,7 @@ export function Quote(props: QuoteProps) {
|
|
|
402
439
|
step={step}
|
|
403
440
|
hasSeparator={index !== steps.length - 1}
|
|
404
441
|
state={step.state}
|
|
442
|
+
tooltipContainer={tooltipContainer}
|
|
405
443
|
/>
|
|
406
444
|
);
|
|
407
445
|
})}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
|
|
2
2
|
|
|
3
|
+
import { i18n } from '@lingui/core';
|
|
3
4
|
import { TokenAmount } from '@rango-dev/ui';
|
|
4
5
|
import React from 'react';
|
|
5
6
|
|
|
7
|
+
import { getContainer } from '../../utils/common';
|
|
8
|
+
|
|
6
9
|
import { Container, separatorStyles } from './QuoteSummary.styles';
|
|
7
10
|
|
|
8
11
|
type PropTypes = {
|
|
@@ -14,13 +17,20 @@ type PropTypes = {
|
|
|
14
17
|
|
|
15
18
|
export function QuoteSummary(props: PropTypes) {
|
|
16
19
|
const { from, to, percentageChange, warningLevel } = props;
|
|
20
|
+
|
|
17
21
|
return (
|
|
18
22
|
<Container>
|
|
19
23
|
<TokenAmount
|
|
20
24
|
direction="horizontal"
|
|
21
|
-
label=
|
|
25
|
+
label={i18n.t('Swap input')}
|
|
22
26
|
type="input"
|
|
23
|
-
|
|
27
|
+
tooltipContainer={getContainer()}
|
|
28
|
+
price={{
|
|
29
|
+
value: from.price.value,
|
|
30
|
+
usdValue: from.price.usdValue,
|
|
31
|
+
realValue: from.price.realValue,
|
|
32
|
+
realUsdValue: from.price.realUsdValue,
|
|
33
|
+
}}
|
|
24
34
|
token={{
|
|
25
35
|
displayName: from.token.displayName,
|
|
26
36
|
image: from.token.image,
|
|
@@ -30,9 +40,15 @@ export function QuoteSummary(props: PropTypes) {
|
|
|
30
40
|
<div className={separatorStyles()} />
|
|
31
41
|
<TokenAmount
|
|
32
42
|
direction="horizontal"
|
|
33
|
-
|
|
43
|
+
tooltipContainer={getContainer()}
|
|
44
|
+
label={i18n.t('Estimated output')}
|
|
34
45
|
type="output"
|
|
35
|
-
price={{
|
|
46
|
+
price={{
|
|
47
|
+
value: to.price.value,
|
|
48
|
+
usdValue: to.price.usdValue,
|
|
49
|
+
realValue: to.price.realValue,
|
|
50
|
+
realUsdValue: to.price.realUsdValue,
|
|
51
|
+
}}
|
|
36
52
|
token={{
|
|
37
53
|
displayName: to.token.displayName,
|
|
38
54
|
image: to.token.image,
|
|
@@ -72,12 +72,12 @@ export function Slippage() {
|
|
|
72
72
|
value={customSlippage || ''}
|
|
73
73
|
color="dark"
|
|
74
74
|
onChange={(event) => {
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
(parsedValue >= MIN_SLIPPGAE && parsedValue <= MAX_SLIPPAGE)
|
|
79
|
-
) {
|
|
75
|
+
const value = event.target.value;
|
|
76
|
+
const parsedValue = parseFloat(value);
|
|
77
|
+
if (parsedValue >= MIN_SLIPPGAE && parsedValue <= MAX_SLIPPAGE) {
|
|
80
78
|
setCustomSlippage(parsedValue);
|
|
79
|
+
} else {
|
|
80
|
+
setCustomSlippage(null);
|
|
81
81
|
}
|
|
82
82
|
}}
|
|
83
83
|
suffix={
|
|
@@ -20,7 +20,10 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
|
|
|
20
20
|
const hasAlreadyProceededToSign = swap.hasAlreadyProceededToSign !== false;
|
|
21
21
|
return swap.steps.map((step, index) => {
|
|
22
22
|
const amountToConvert =
|
|
23
|
-
index === 0
|
|
23
|
+
index === 0
|
|
24
|
+
? swap.inputAmount
|
|
25
|
+
: swap.steps[index - 1].outputAmount ||
|
|
26
|
+
swap.steps[index - 1].expectedOutputAmountHumanReadable;
|
|
24
27
|
return {
|
|
25
28
|
from: {
|
|
26
29
|
token: { displayName: step.fromSymbol, image: step.fromLogo ?? '' },
|
|
@@ -35,6 +38,7 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
|
|
|
35
38
|
TOKEN_AMOUNT_MIN_DECIMALS,
|
|
36
39
|
TOKEN_AMOUNT_MAX_DECIMALS
|
|
37
40
|
),
|
|
41
|
+
realValue: amountToConvert,
|
|
38
42
|
},
|
|
39
43
|
},
|
|
40
44
|
to: {
|
|
@@ -50,6 +54,8 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
|
|
|
50
54
|
TOKEN_AMOUNT_MIN_DECIMALS,
|
|
51
55
|
TOKEN_AMOUNT_MAX_DECIMALS
|
|
52
56
|
),
|
|
57
|
+
realValue:
|
|
58
|
+
step.outputAmount || step.expectedOutputAmountHumanReadable,
|
|
53
59
|
},
|
|
54
60
|
},
|
|
55
61
|
swapper: { displayName: step.swapperId, image: step.swapperLogo ?? '' },
|