@lifi/widget 3.3.0 → 3.4.0-beta.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.
- package/_esm/components/StepActions/StepActions.js +32 -12
- package/_esm/components/StepActions/StepActions.js.map +1 -1
- package/_esm/components/StepActions/types.d.ts +2 -3
- package/_esm/components/TransactionDetails.js +21 -2
- package/_esm/components/TransactionDetails.js.map +1 -1
- package/_esm/config/version.d.ts +1 -1
- package/_esm/config/version.js +1 -1
- package/_esm/config/version.js.map +1 -1
- package/_esm/i18n/en.json +3 -0
- package/_esm/types/widget.d.ts +7 -1
- package/_esm/types/widget.js +1 -0
- package/_esm/types/widget.js.map +1 -1
- package/components/StepActions/StepActions.tsx +45 -28
- package/components/StepActions/types.ts +2 -2
- package/components/TransactionDetails.tsx +75 -22
- package/config/version.ts +1 -1
- package/i18n/en.json +3 -0
- package/package.json +2 -2
- package/types/widget.ts +7 -0
|
@@ -7,6 +7,7 @@ import { formatUnits } from 'viem';
|
|
|
7
7
|
import { useAvailableChains } from '../../hooks/useAvailableChains.js';
|
|
8
8
|
import { LiFiToolLogo } from '../../icons/lifi.js';
|
|
9
9
|
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
|
|
10
|
+
import { HiddenUI } from '../../types/widget.js';
|
|
10
11
|
import { formatTokenAmount } from '../../utils/format.js';
|
|
11
12
|
import { CardIconButton } from '../Card/CardIconButton.js';
|
|
12
13
|
import { SmallAvatar } from '../SmallAvatar.js';
|
|
@@ -14,7 +15,7 @@ import { StepAvatar, StepConnector, StepContent, StepLabel, StepLabelTypography,
|
|
|
14
15
|
import { StepFees } from './StepFees.js';
|
|
15
16
|
export const StepActions = ({ step, dense, ...other }) => {
|
|
16
17
|
const { t } = useTranslation();
|
|
17
|
-
const { subvariant
|
|
18
|
+
const { subvariant } = useWidgetConfig();
|
|
18
19
|
const [cardExpanded, setCardExpanded] = useState(false);
|
|
19
20
|
const handleExpand = (e) => {
|
|
20
21
|
e.stopPropagation();
|
|
@@ -28,15 +29,30 @@ export const StepActions = ({ step, dense, ...other }) => {
|
|
|
28
29
|
? toolDetails.name
|
|
29
30
|
: t(`main.stepDetails`, {
|
|
30
31
|
tool: toolDetails.name,
|
|
31
|
-
}) }), _jsx(StepFees, { ml: 2, step: step })] }), dense ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (_jsx(ExpandLess, { fontSize: "inherit" })) : (_jsx(ExpandMore, { fontSize: "inherit" })) })) : null] }), dense ? (_jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(IncludedSteps, { step: step
|
|
32
|
+
}) }), _jsx(StepFees, { ml: 2, step: step })] }), dense ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (_jsx(ExpandLess, { fontSize: "inherit" })) : (_jsx(ExpandMore, { fontSize: "inherit" })) })) : null] }), dense ? (_jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(IncludedSteps, { step: step }) })) : (_jsx(IncludedSteps, { step: step }))] }));
|
|
32
33
|
};
|
|
33
|
-
export const IncludedSteps = ({ step
|
|
34
|
+
export const IncludedSteps = ({ step }) => {
|
|
35
|
+
const { subvariant, subvariantOptions, feeTool, hiddenUI } = useWidgetConfig();
|
|
36
|
+
let includedSteps = step.includedSteps;
|
|
37
|
+
if (hiddenUI?.includes(HiddenUI.FeeCollectionStepDetails)) {
|
|
38
|
+
const feeCollectionStep = includedSteps.find((step) => step.tool === 'feeCollection');
|
|
39
|
+
if (feeCollectionStep) {
|
|
40
|
+
includedSteps = structuredClone(includedSteps.filter((step) => step.tool !== 'feeCollection'));
|
|
41
|
+
includedSteps[0].estimate.fromAmount =
|
|
42
|
+
feeCollectionStep.estimate.fromAmount;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
34
45
|
// eslint-disable-next-line react/no-unstable-nested-components
|
|
35
46
|
const StepIconComponent = ({ icon }) => {
|
|
36
|
-
const
|
|
37
|
-
|
|
47
|
+
const includedStep = includedSteps?.[Number(icon) - 1];
|
|
48
|
+
const tool = includedStep?.type === 'protocol' &&
|
|
49
|
+
includedStep?.tool === 'feeCollection' &&
|
|
50
|
+
feeTool
|
|
51
|
+
? feeTool
|
|
52
|
+
: includedStep?.toolDetails;
|
|
53
|
+
return tool ? (_jsx(SmallAvatar, { src: tool.logoURI, alt: tool.name, sx: { width: 20, height: 20 }, children: tool.name?.[0] })) : null;
|
|
38
54
|
};
|
|
39
|
-
return (_jsx(Box, { mt: 1, children: _jsx(Stepper, { orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1, children:
|
|
55
|
+
return (_jsx(Box, { mt: 1, children: _jsx(Stepper, { orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1, children: includedSteps.map((step, i, includedSteps) => (_jsxs(MuiStep, { expanded: true, children: [_jsx(StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && subvariant === 'custom' ? (_jsx(CustomStepDetailsLabel, { step: step, subvariant: subvariant, subvariantOptions: subvariantOptions })) : step.type === 'cross' ? (_jsx(BridgeStepDetailsLabel, { step: step })) : step.type === 'protocol' ? (_jsx(ProtocolStepDetailsLabel, { step: step, feeTool: feeTool })) : (_jsx(SwapStepDetailsLabel, { step: step })) }), _jsx(StepContent, { last: i === includedSteps.length - 1, children: _jsx(StepDetailsContent, { step: step }) })] }, step.id))) }) }));
|
|
40
56
|
};
|
|
41
57
|
export const StepDetailsContent = ({ step }) => {
|
|
42
58
|
const { t } = useTranslation();
|
|
@@ -94,12 +110,16 @@ export const SwapStepDetailsLabel = ({ step }) => {
|
|
|
94
110
|
tool: step.toolDetails.name,
|
|
95
111
|
}) }));
|
|
96
112
|
};
|
|
97
|
-
export const ProtocolStepDetailsLabel = ({ step }) => {
|
|
113
|
+
export const ProtocolStepDetailsLabel = ({ step, feeTool }) => {
|
|
98
114
|
const { t } = useTranslation();
|
|
99
|
-
return (_jsx(StepLabelTypography, { children: step.toolDetails.key === '
|
|
100
|
-
?
|
|
101
|
-
tool:
|
|
102
|
-
|
|
103
|
-
: step.toolDetails.
|
|
115
|
+
return (_jsx(StepLabelTypography, { children: step.toolDetails.key === 'feeCollection'
|
|
116
|
+
? feeTool?.name
|
|
117
|
+
? t('main.fees.integrator', { tool: feeTool.name })
|
|
118
|
+
: t('main.fees.defaultIntegrator')
|
|
119
|
+
: step.toolDetails.key === 'lifuelProtocol'
|
|
120
|
+
? t('main.refuelStepDetails', {
|
|
121
|
+
tool: step.toolDetails.name,
|
|
122
|
+
})
|
|
123
|
+
: step.toolDetails.name }));
|
|
104
124
|
};
|
|
105
125
|
//# sourceMappingURL=StepActions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepActions.js","sourceRoot":"","sources":["../../../components/StepActions/StepActions.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE3E,OAAO,EACL,KAAK,EACL,GAAG,EACH,QAAQ,EACR,IAAI,IAAI,OAAO,EACf,OAAO,EACP,UAAU,GACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,UAAU,EACV,aAAa,EACb,WAAW,EACX,SAAS,EACT,mBAAmB,GACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAOzC,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,IAAI,EACJ,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,EAAE,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"StepActions.js","sourceRoot":"","sources":["../../../components/StepActions/StepActions.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { LiFiStep, Step } from '@lifi/sdk';
|
|
2
2
|
import type { BoxProps } from '@mui/material';
|
|
3
|
-
import type { SubvariantOptions, WidgetSubvariant } from '../../types/widget.js';
|
|
3
|
+
import type { SubvariantOptions, WidgetFeeTool, WidgetSubvariant } from '../../types/widget.js';
|
|
4
4
|
export interface StepActionsProps extends BoxProps {
|
|
5
5
|
step: LiFiStep;
|
|
6
6
|
dense?: boolean;
|
|
@@ -9,9 +9,8 @@ export interface StepDetailsLabelProps {
|
|
|
9
9
|
step: Step;
|
|
10
10
|
subvariant?: Extract<WidgetSubvariant, 'custom'>;
|
|
11
11
|
subvariantOptions?: SubvariantOptions;
|
|
12
|
+
feeTool?: WidgetFeeTool;
|
|
12
13
|
}
|
|
13
14
|
export interface IncludedStepsProps {
|
|
14
15
|
step: LiFiStep;
|
|
15
|
-
subvariant?: WidgetSubvariant;
|
|
16
|
-
subvariantOptions?: SubvariantOptions;
|
|
17
16
|
}
|
|
@@ -3,6 +3,8 @@ import { ExpandLess, ExpandMore, LocalGasStationRounded, } from '@mui/icons-mate
|
|
|
3
3
|
import { Box, Collapse, Tooltip, Typography } from '@mui/material';
|
|
4
4
|
import { useState } from 'react';
|
|
5
5
|
import { useTranslation } from 'react-i18next';
|
|
6
|
+
import { formatUnits } from 'viem';
|
|
7
|
+
import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
|
|
6
8
|
import { isRouteDone } from '../stores/routes/utils.js';
|
|
7
9
|
import { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js';
|
|
8
10
|
import { convertToSubscriptFormat, formatTokenAmount, formatTokenPrice, } from '../utils/format.js';
|
|
@@ -13,6 +15,7 @@ import { IconTypography } from './IconTypography.js';
|
|
|
13
15
|
import { TokenRate } from './TokenRate/TokenRate.js';
|
|
14
16
|
export const TransactionDetails = ({ route, ...props }) => {
|
|
15
17
|
const { t } = useTranslation();
|
|
18
|
+
const { feeTool } = useWidgetConfig();
|
|
16
19
|
const [cardExpanded, setCardExpanded] = useState(false);
|
|
17
20
|
const toggleCard = () => {
|
|
18
21
|
setCardExpanded((cardExpanded) => !cardExpanded);
|
|
@@ -31,11 +34,27 @@ export const TransactionDetails = ({ route, ...props }) => {
|
|
|
31
34
|
useGrouping: false,
|
|
32
35
|
roundingMode: 'trunc',
|
|
33
36
|
});
|
|
34
|
-
|
|
37
|
+
const feeCollectionStep = route.steps[0].includedSteps.find((includedStep) => includedStep.tool === 'feeCollection');
|
|
38
|
+
let feeAmountUSD = 0;
|
|
39
|
+
if (feeCollectionStep) {
|
|
40
|
+
const estimatedFromAmount = BigInt(feeCollectionStep.estimate.fromAmount) -
|
|
41
|
+
BigInt(feeCollectionStep.estimate.toAmount);
|
|
42
|
+
const feeAmount = formatUnits(estimatedFromAmount, feeCollectionStep.action.fromToken.decimals);
|
|
43
|
+
feeAmountUSD =
|
|
44
|
+
parseFloat(feeAmount) *
|
|
45
|
+
parseFloat(feeCollectionStep.action.fromToken.priceUSD);
|
|
46
|
+
}
|
|
47
|
+
return (_jsxs(Card, { selectionColor: "secondary", ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", px: 2, py: 1.75, children: [_jsx(Box, { display: "flex", flex: 1, alignItems: "center", justifyContent: "left", children: _jsx(TokenRate, { route: route }) }), _jsx(Collapse, { timeout: 100, in: !cardExpanded, mountOnEnter: true, children: _jsx(FeeBreakdownTooltip, { gasCosts: gasCosts, feeCosts: feeCosts, children: _jsxs(Box, { display: "flex", alignItems: "center", onClick: toggleCard, role: "button", sx: { cursor: 'pointer' }, px: 1, children: [_jsx(IconTypography, { mr: 0.5, fontSize: 16, children: _jsx(LocalGasStationRounded, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "600", lineHeight: 1.429, "data-value": combinedFeesUSD, children: t(`format.currency`, { value: combinedFeesUSD }) })] }) }) }), _jsx(CardIconButton, { onClick: toggleCard, size: "small", children: cardExpanded ? (_jsx(ExpandLess, { fontSize: "inherit" })) : (_jsx(ExpandMore, { fontSize: "inherit" })) })] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, children: _jsxs(Box, { px: 2, pb: 2, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 0.5, children: [_jsx(Typography, { variant: "body2", children: t('main.fees.network') }), _jsx(FeeBreakdownTooltip, { gasCosts: gasCosts, children: _jsx(Typography, { variant: "body2", children: t(`format.currency`, {
|
|
35
48
|
value: gasCostUSD,
|
|
36
49
|
}) }) })] }), feeCosts.length ? (_jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 0.5, children: [_jsx(Typography, { variant: "body2", children: t('main.fees.provider') }), _jsx(FeeBreakdownTooltip, { feeCosts: feeCosts, children: _jsx(Typography, { variant: "body2", children: t(`format.currency`, {
|
|
37
50
|
value: feeCostUSD,
|
|
38
|
-
}) }) })] })) : null,
|
|
51
|
+
}) }) })] })) : null, feeAmountUSD ? (_jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 0.5, children: [_jsx(Typography, { variant: "body2", children: feeTool?.name
|
|
52
|
+
? t('main.fees.integrator', { tool: feeTool.name })
|
|
53
|
+
: t('main.fees.defaultIntegrator') }), feeTool?.name ? (_jsx(Tooltip, { title: t('tooltip.feeCollection', { tool: feeTool.name }), sx: { cursor: 'help' }, children: _jsx(Typography, { variant: "body2", children: t(`format.currency`, {
|
|
54
|
+
value: feeAmountUSD,
|
|
55
|
+
}) }) })) : (_jsx(Typography, { variant: "body2", children: t(`format.currency`, {
|
|
56
|
+
value: feeAmountUSD,
|
|
57
|
+
}) }))] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 0.5, children: [_jsx(Typography, { variant: "body2", children: t('main.priceImpact') }), _jsx(Tooltip, { title: t('tooltip.priceImpact'), sx: { cursor: 'help' }, children: _jsxs(Typography, { variant: "body2", children: [priceImpact, "%"] }) })] }), !isRouteDone(route) ? (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 0.5, children: [_jsx(Typography, { variant: "body2", children: t('main.maxSlippage') }), _jsx(Tooltip, { title: t('tooltip.slippage'), sx: { cursor: 'help' }, children: _jsxs(Typography, { variant: "body2", children: [route.steps[0].action.slippage * 100, "%"] }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", children: [_jsx(Typography, { variant: "body2", children: t('main.minReceived') }), _jsx(Tooltip, { title: t('tooltip.minReceived'), sx: { cursor: 'help' }, children: _jsxs(Typography, { variant: "body2", children: [t('format.number', {
|
|
39
58
|
value: formatTokenAmount(BigInt(route.toAmountMin), route.toToken.decimals),
|
|
40
59
|
}), ' ', route.toToken.symbol] }) })] })] })) : null] }) })] }));
|
|
41
60
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TransactionDetails.js","sourceRoot":"","sources":["../../components/TransactionDetails.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"TransactionDetails.js","sourceRoot":"","sources":["../../components/TransactionDetails.tsx"],"names":[],"mappings":"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"}
|
package/_esm/config/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export declare const name = "@lifi/widget";
|
|
2
|
-
export declare const version = "3.
|
|
2
|
+
export declare const version = "3.4.0-beta.0";
|
package/_esm/config/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../config/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG,cAAc,CAAC;AACnC,MAAM,CAAC,MAAM,OAAO,GAAG,
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../config/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG,cAAc,CAAC;AACnC,MAAM,CAAC,MAAM,OAAO,GAAG,cAAc,CAAC"}
|
package/_esm/i18n/en.json
CHANGED
|
@@ -170,6 +170,7 @@
|
|
|
170
170
|
"tooltip": {
|
|
171
171
|
"deselectAll": "Deselect all",
|
|
172
172
|
"estimatedTime": "Estimated time to complete the swap or bridge transaction, excluding chain switching and token approval.",
|
|
173
|
+
"feeCollection": "The fee is applied to selected token pairs and ensures the best experience with {{tool}}.",
|
|
173
174
|
"minReceived": "The estimated minimum amount may change until the swapping/bridging transaction is signed. For 2-step transfers, this applies until the second step transaction is signed.",
|
|
174
175
|
"notFound": {
|
|
175
176
|
"text": "We couldn't find this page.",
|
|
@@ -190,7 +191,9 @@
|
|
|
190
191
|
"depositStepDetails": "Deposit via {{tool}}",
|
|
191
192
|
"featuredTokens": "Featured tokens",
|
|
192
193
|
"fees": {
|
|
194
|
+
"defaultIntegrator": "Integrator fee",
|
|
193
195
|
"estimated": "estimated costs",
|
|
196
|
+
"integrator": "{{tool}} fee",
|
|
194
197
|
"network": "Network cost",
|
|
195
198
|
"paid": "paid costs",
|
|
196
199
|
"provider": "Provider fee"
|
package/_esm/types/widget.d.ts
CHANGED
|
@@ -45,7 +45,8 @@ export declare enum HiddenUI {
|
|
|
45
45
|
PoweredBy = "poweredBy",
|
|
46
46
|
ToAddress = "toAddress",
|
|
47
47
|
ToToken = "toToken",
|
|
48
|
-
WalletMenu = "walletMenu"
|
|
48
|
+
WalletMenu = "walletMenu",
|
|
49
|
+
FeeCollectionStepDetails = "feeCollectionStepDetails"
|
|
49
50
|
}
|
|
50
51
|
export type HiddenUIType = `${HiddenUI}`;
|
|
51
52
|
export declare enum RequiredUI {
|
|
@@ -64,6 +65,10 @@ export interface WidgetContractTool {
|
|
|
64
65
|
logoURI: string;
|
|
65
66
|
name: string;
|
|
66
67
|
}
|
|
68
|
+
export interface WidgetFeeTool {
|
|
69
|
+
logoURI: string;
|
|
70
|
+
name: string;
|
|
71
|
+
}
|
|
67
72
|
export interface ToAddress {
|
|
68
73
|
name?: string;
|
|
69
74
|
address: string;
|
|
@@ -91,6 +96,7 @@ export interface WidgetConfig {
|
|
|
91
96
|
integrator: string;
|
|
92
97
|
apiKey?: string;
|
|
93
98
|
fee?: number;
|
|
99
|
+
feeTool?: WidgetFeeTool;
|
|
94
100
|
referrer?: string;
|
|
95
101
|
routePriority?: Order;
|
|
96
102
|
slippage?: number;
|
package/_esm/types/widget.js
CHANGED
|
@@ -15,6 +15,7 @@ export var HiddenUI;
|
|
|
15
15
|
HiddenUI["ToAddress"] = "toAddress";
|
|
16
16
|
HiddenUI["ToToken"] = "toToken";
|
|
17
17
|
HiddenUI["WalletMenu"] = "walletMenu";
|
|
18
|
+
HiddenUI["FeeCollectionStepDetails"] = "feeCollectionStepDetails";
|
|
18
19
|
})(HiddenUI || (HiddenUI = {}));
|
|
19
20
|
export var RequiredUI;
|
|
20
21
|
(function (RequiredUI) {
|
package/_esm/types/widget.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../types/widget.ts"],"names":[],"mappings":"AAoEA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,uCAAyB,CAAA;IACzB,qCAAuB,CAAA;IACvB,qCAAuB,CAAA;IACvB,iCAAmB,CAAA;AACrB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAGD,MAAM,CAAN,IAAY,
|
|
1
|
+
{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../types/widget.ts"],"names":[],"mappings":"AAoEA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,uCAAyB,CAAA;IACzB,qCAAuB,CAAA;IACvB,qCAAuB,CAAA;IACvB,iCAAmB,CAAA;AACrB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAGD,MAAM,CAAN,IAAY,QAUX;AAVD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,mDAAuC,CAAA;IACvC,+BAAmB,CAAA;IACnB,iCAAqB,CAAA;IACrB,mCAAuB,CAAA;IACvB,mCAAuB,CAAA;IACvB,+BAAmB,CAAA;IACnB,qCAAyB,CAAA;IACzB,iEAAqD,CAAA;AACvD,CAAC,EAVW,QAAQ,KAAR,QAAQ,QAUnB;AAGD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,qCAAuB,CAAA;AACzB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}
|
|
@@ -16,6 +16,7 @@ import { formatUnits } from 'viem';
|
|
|
16
16
|
import { useAvailableChains } from '../../hooks/useAvailableChains.js';
|
|
17
17
|
import { LiFiToolLogo } from '../../icons/lifi.js';
|
|
18
18
|
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
|
|
19
|
+
import { HiddenUI } from '../../types/widget.js';
|
|
19
20
|
import { formatTokenAmount } from '../../utils/format.js';
|
|
20
21
|
import { CardIconButton } from '../Card/CardIconButton.js';
|
|
21
22
|
import { SmallAvatar } from '../SmallAvatar.js';
|
|
@@ -39,7 +40,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
|
|
|
39
40
|
...other
|
|
40
41
|
}) => {
|
|
41
42
|
const { t } = useTranslation();
|
|
42
|
-
const { subvariant
|
|
43
|
+
const { subvariant } = useWidgetConfig();
|
|
43
44
|
const [cardExpanded, setCardExpanded] = useState(false);
|
|
44
45
|
|
|
45
46
|
const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
|
|
@@ -93,41 +94,53 @@ export const StepActions: React.FC<StepActionsProps> = ({
|
|
|
93
94
|
</Box>
|
|
94
95
|
{dense ? (
|
|
95
96
|
<Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
|
|
96
|
-
<IncludedSteps
|
|
97
|
-
step={step}
|
|
98
|
-
subvariant={subvariant}
|
|
99
|
-
subvariantOptions={subvariantOptions}
|
|
100
|
-
/>
|
|
97
|
+
<IncludedSteps step={step} />
|
|
101
98
|
</Collapse>
|
|
102
99
|
) : (
|
|
103
|
-
<IncludedSteps
|
|
104
|
-
step={step}
|
|
105
|
-
subvariant={subvariant}
|
|
106
|
-
subvariantOptions={subvariantOptions}
|
|
107
|
-
/>
|
|
100
|
+
<IncludedSteps step={step} />
|
|
108
101
|
)}
|
|
109
102
|
</Box>
|
|
110
103
|
);
|
|
111
104
|
};
|
|
112
105
|
|
|
113
|
-
export const IncludedSteps: React.FC<IncludedStepsProps> = ({
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
106
|
+
export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
|
|
107
|
+
const { subvariant, subvariantOptions, feeTool, hiddenUI } =
|
|
108
|
+
useWidgetConfig();
|
|
109
|
+
|
|
110
|
+
let includedSteps = step.includedSteps;
|
|
111
|
+
if (hiddenUI?.includes(HiddenUI.FeeCollectionStepDetails)) {
|
|
112
|
+
const feeCollectionStep = includedSteps.find(
|
|
113
|
+
(step) => step.tool === 'feeCollection',
|
|
114
|
+
);
|
|
115
|
+
if (feeCollectionStep) {
|
|
116
|
+
includedSteps = structuredClone(
|
|
117
|
+
includedSteps.filter((step) => step.tool !== 'feeCollection'),
|
|
118
|
+
);
|
|
119
|
+
includedSteps[0].estimate.fromAmount =
|
|
120
|
+
feeCollectionStep.estimate.fromAmount;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
118
124
|
// eslint-disable-next-line react/no-unstable-nested-components
|
|
119
125
|
const StepIconComponent = ({ icon }: StepIconProps) => {
|
|
120
|
-
const
|
|
126
|
+
const includedStep = includedSteps?.[Number(icon) - 1];
|
|
127
|
+
const tool =
|
|
128
|
+
includedStep?.type === 'protocol' &&
|
|
129
|
+
includedStep?.tool === 'feeCollection' &&
|
|
130
|
+
feeTool
|
|
131
|
+
? feeTool
|
|
132
|
+
: includedStep?.toolDetails;
|
|
121
133
|
return tool ? (
|
|
122
134
|
<SmallAvatar
|
|
123
|
-
src={tool.
|
|
124
|
-
alt={tool.
|
|
135
|
+
src={tool.logoURI}
|
|
136
|
+
alt={tool.name}
|
|
125
137
|
sx={{ width: 20, height: 20 }}
|
|
126
138
|
>
|
|
127
|
-
{tool.
|
|
139
|
+
{tool.name?.[0]}
|
|
128
140
|
</SmallAvatar>
|
|
129
141
|
) : null;
|
|
130
142
|
};
|
|
143
|
+
|
|
131
144
|
return (
|
|
132
145
|
<Box mt={1}>
|
|
133
146
|
<Stepper
|
|
@@ -135,7 +148,7 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({
|
|
|
135
148
|
connector={<StepConnector />}
|
|
136
149
|
activeStep={-1}
|
|
137
150
|
>
|
|
138
|
-
{
|
|
151
|
+
{includedSteps.map((step, i, includedSteps) => (
|
|
139
152
|
<MuiStep key={step.id} expanded>
|
|
140
153
|
<StepLabel StepIconComponent={StepIconComponent}>
|
|
141
154
|
{step.type === 'custom' && subvariant === 'custom' ? (
|
|
@@ -147,7 +160,7 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({
|
|
|
147
160
|
) : step.type === 'cross' ? (
|
|
148
161
|
<BridgeStepDetailsLabel step={step} />
|
|
149
162
|
) : step.type === 'protocol' ? (
|
|
150
|
-
<ProtocolStepDetailsLabel step={step} />
|
|
163
|
+
<ProtocolStepDetailsLabel step={step} feeTool={feeTool} />
|
|
151
164
|
) : (
|
|
152
165
|
<SwapStepDetailsLabel step={step} />
|
|
153
166
|
)}
|
|
@@ -302,15 +315,19 @@ export const SwapStepDetailsLabel: React.FC<
|
|
|
302
315
|
|
|
303
316
|
export const ProtocolStepDetailsLabel: React.FC<
|
|
304
317
|
Omit<StepDetailsLabelProps, 'variant'>
|
|
305
|
-
> = ({ step }) => {
|
|
318
|
+
> = ({ step, feeTool }) => {
|
|
306
319
|
const { t } = useTranslation();
|
|
307
320
|
return (
|
|
308
321
|
<StepLabelTypography>
|
|
309
|
-
{step.toolDetails.key === '
|
|
310
|
-
?
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
: step.toolDetails.
|
|
322
|
+
{step.toolDetails.key === 'feeCollection'
|
|
323
|
+
? feeTool?.name
|
|
324
|
+
? t('main.fees.integrator', { tool: feeTool.name })
|
|
325
|
+
: t('main.fees.defaultIntegrator')
|
|
326
|
+
: step.toolDetails.key === 'lifuelProtocol'
|
|
327
|
+
? t('main.refuelStepDetails', {
|
|
328
|
+
tool: step.toolDetails.name,
|
|
329
|
+
})
|
|
330
|
+
: step.toolDetails.name}
|
|
314
331
|
</StepLabelTypography>
|
|
315
332
|
);
|
|
316
333
|
};
|
|
@@ -2,6 +2,7 @@ import type { LiFiStep, Step } from '@lifi/sdk';
|
|
|
2
2
|
import type { BoxProps } from '@mui/material';
|
|
3
3
|
import type {
|
|
4
4
|
SubvariantOptions,
|
|
5
|
+
WidgetFeeTool,
|
|
5
6
|
WidgetSubvariant,
|
|
6
7
|
} from '../../types/widget.js';
|
|
7
8
|
|
|
@@ -14,10 +15,9 @@ export interface StepDetailsLabelProps {
|
|
|
14
15
|
step: Step;
|
|
15
16
|
subvariant?: Extract<WidgetSubvariant, 'custom'>;
|
|
16
17
|
subvariantOptions?: SubvariantOptions;
|
|
18
|
+
feeTool?: WidgetFeeTool;
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
export interface IncludedStepsProps {
|
|
20
22
|
step: LiFiStep;
|
|
21
|
-
subvariant?: WidgetSubvariant;
|
|
22
|
-
subvariantOptions?: SubvariantOptions;
|
|
23
23
|
}
|
|
@@ -8,6 +8,8 @@ import type { CardProps } from '@mui/material';
|
|
|
8
8
|
import { Box, Collapse, Tooltip, Typography } from '@mui/material';
|
|
9
9
|
import { useState } from 'react';
|
|
10
10
|
import { useTranslation } from 'react-i18next';
|
|
11
|
+
import { formatUnits } from 'viem';
|
|
12
|
+
import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
|
|
11
13
|
import { isRouteDone } from '../stores/routes/utils.js';
|
|
12
14
|
import { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js';
|
|
13
15
|
import {
|
|
@@ -30,6 +32,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
|
|
|
30
32
|
...props
|
|
31
33
|
}) => {
|
|
32
34
|
const { t } = useTranslation();
|
|
35
|
+
const { feeTool } = useWidgetConfig();
|
|
33
36
|
const [cardExpanded, setCardExpanded] = useState(false);
|
|
34
37
|
|
|
35
38
|
const toggleCard = () => {
|
|
@@ -64,35 +67,58 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
|
|
|
64
67
|
roundingMode: 'trunc',
|
|
65
68
|
});
|
|
66
69
|
|
|
70
|
+
const feeCollectionStep = route.steps[0].includedSteps.find(
|
|
71
|
+
(includedStep) => includedStep.tool === 'feeCollection',
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
let feeAmountUSD: number = 0;
|
|
75
|
+
|
|
76
|
+
if (feeCollectionStep) {
|
|
77
|
+
const estimatedFromAmount =
|
|
78
|
+
BigInt(feeCollectionStep.estimate.fromAmount) -
|
|
79
|
+
BigInt(feeCollectionStep.estimate.toAmount);
|
|
80
|
+
|
|
81
|
+
const feeAmount = formatUnits(
|
|
82
|
+
estimatedFromAmount,
|
|
83
|
+
feeCollectionStep.action.fromToken.decimals,
|
|
84
|
+
);
|
|
85
|
+
|
|
86
|
+
feeAmountUSD =
|
|
87
|
+
parseFloat(feeAmount) *
|
|
88
|
+
parseFloat(feeCollectionStep.action.fromToken.priceUSD);
|
|
89
|
+
}
|
|
90
|
+
|
|
67
91
|
return (
|
|
68
92
|
<Card selectionColor="secondary" {...props}>
|
|
69
93
|
<Box display="flex" alignItems="center" px={2} py={1.75}>
|
|
70
94
|
<Box display="flex" flex={1} alignItems="center" justifyContent="left">
|
|
71
95
|
<TokenRate route={route} />
|
|
72
96
|
</Box>
|
|
73
|
-
<
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<IconTypography mr={0.5} fontSize={16}>
|
|
83
|
-
<LocalGasStationRounded fontSize="inherit" />
|
|
84
|
-
</IconTypography>
|
|
85
|
-
<Typography
|
|
86
|
-
fontSize={14}
|
|
87
|
-
color="text.primary"
|
|
88
|
-
fontWeight="600"
|
|
89
|
-
lineHeight={1.429}
|
|
90
|
-
data-value={combinedFeesUSD}
|
|
97
|
+
<Collapse timeout={100} in={!cardExpanded} mountOnEnter>
|
|
98
|
+
<FeeBreakdownTooltip gasCosts={gasCosts} feeCosts={feeCosts}>
|
|
99
|
+
<Box
|
|
100
|
+
display="flex"
|
|
101
|
+
alignItems="center"
|
|
102
|
+
onClick={toggleCard}
|
|
103
|
+
role="button"
|
|
104
|
+
sx={{ cursor: 'pointer' }}
|
|
105
|
+
px={1}
|
|
91
106
|
>
|
|
92
|
-
{
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
107
|
+
<IconTypography mr={0.5} fontSize={16}>
|
|
108
|
+
<LocalGasStationRounded fontSize="inherit" />
|
|
109
|
+
</IconTypography>
|
|
110
|
+
<Typography
|
|
111
|
+
fontSize={14}
|
|
112
|
+
color="text.primary"
|
|
113
|
+
fontWeight="600"
|
|
114
|
+
lineHeight={1.429}
|
|
115
|
+
data-value={combinedFeesUSD}
|
|
116
|
+
>
|
|
117
|
+
{t(`format.currency`, { value: combinedFeesUSD })}
|
|
118
|
+
</Typography>
|
|
119
|
+
</Box>
|
|
120
|
+
</FeeBreakdownTooltip>
|
|
121
|
+
</Collapse>
|
|
96
122
|
<CardIconButton onClick={toggleCard} size="small">
|
|
97
123
|
{cardExpanded ? (
|
|
98
124
|
<ExpandLess fontSize="inherit" />
|
|
@@ -125,6 +151,33 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
|
|
|
125
151
|
</FeeBreakdownTooltip>
|
|
126
152
|
</Box>
|
|
127
153
|
) : null}
|
|
154
|
+
{feeAmountUSD ? (
|
|
155
|
+
<Box display="flex" justifyContent="space-between" mb={0.5}>
|
|
156
|
+
<Typography variant="body2">
|
|
157
|
+
{feeTool?.name
|
|
158
|
+
? t('main.fees.integrator', { tool: feeTool.name })
|
|
159
|
+
: t('main.fees.defaultIntegrator')}
|
|
160
|
+
</Typography>
|
|
161
|
+
{feeTool?.name ? (
|
|
162
|
+
<Tooltip
|
|
163
|
+
title={t('tooltip.feeCollection', { tool: feeTool.name })}
|
|
164
|
+
sx={{ cursor: 'help' }}
|
|
165
|
+
>
|
|
166
|
+
<Typography variant="body2">
|
|
167
|
+
{t(`format.currency`, {
|
|
168
|
+
value: feeAmountUSD,
|
|
169
|
+
})}
|
|
170
|
+
</Typography>
|
|
171
|
+
</Tooltip>
|
|
172
|
+
) : (
|
|
173
|
+
<Typography variant="body2">
|
|
174
|
+
{t(`format.currency`, {
|
|
175
|
+
value: feeAmountUSD,
|
|
176
|
+
})}
|
|
177
|
+
</Typography>
|
|
178
|
+
)}
|
|
179
|
+
</Box>
|
|
180
|
+
) : null}
|
|
128
181
|
<Box display="flex" justifyContent="space-between" mb={0.5}>
|
|
129
182
|
<Typography variant="body2">{t('main.priceImpact')}</Typography>
|
|
130
183
|
<Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
|
package/config/version.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = '@lifi/widget';
|
|
2
|
-
export const version = '3.
|
|
2
|
+
export const version = '3.4.0-beta.0';
|
package/i18n/en.json
CHANGED
|
@@ -170,6 +170,7 @@
|
|
|
170
170
|
"tooltip": {
|
|
171
171
|
"deselectAll": "Deselect all",
|
|
172
172
|
"estimatedTime": "Estimated time to complete the swap or bridge transaction, excluding chain switching and token approval.",
|
|
173
|
+
"feeCollection": "The fee is applied to selected token pairs and ensures the best experience with {{tool}}.",
|
|
173
174
|
"minReceived": "The estimated minimum amount may change until the swapping/bridging transaction is signed. For 2-step transfers, this applies until the second step transaction is signed.",
|
|
174
175
|
"notFound": {
|
|
175
176
|
"text": "We couldn't find this page.",
|
|
@@ -190,7 +191,9 @@
|
|
|
190
191
|
"depositStepDetails": "Deposit via {{tool}}",
|
|
191
192
|
"featuredTokens": "Featured tokens",
|
|
192
193
|
"fees": {
|
|
194
|
+
"defaultIntegrator": "Integrator fee",
|
|
193
195
|
"estimated": "estimated costs",
|
|
196
|
+
"integrator": "{{tool}} fee",
|
|
194
197
|
"network": "Network cost",
|
|
195
198
|
"paid": "paid costs",
|
|
196
199
|
"provider": "Provider fee"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lifi/widget",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0-beta.0",
|
|
4
4
|
"description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./_esm/index.js",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@emotion/react": "^11.13.0",
|
|
36
36
|
"@emotion/styled": "^11.13.0",
|
|
37
37
|
"@lifi/sdk": "^3.1.3",
|
|
38
|
-
"@lifi/wallet-management": "^3.0.
|
|
38
|
+
"@lifi/wallet-management": "^3.0.7-beta.0",
|
|
39
39
|
"@mui/icons-material": "^5.16.5",
|
|
40
40
|
"@mui/lab": "^5.0.0-alpha.173",
|
|
41
41
|
"@mui/material": "^5.16.5",
|
package/types/widget.ts
CHANGED
|
@@ -83,6 +83,7 @@ export enum HiddenUI {
|
|
|
83
83
|
ToAddress = 'toAddress',
|
|
84
84
|
ToToken = 'toToken',
|
|
85
85
|
WalletMenu = 'walletMenu',
|
|
86
|
+
FeeCollectionStepDetails = 'feeCollectionStepDetails',
|
|
86
87
|
}
|
|
87
88
|
export type HiddenUIType = `${HiddenUI}`;
|
|
88
89
|
|
|
@@ -114,6 +115,11 @@ export interface WidgetContractTool {
|
|
|
114
115
|
name: string;
|
|
115
116
|
}
|
|
116
117
|
|
|
118
|
+
export interface WidgetFeeTool {
|
|
119
|
+
logoURI: string;
|
|
120
|
+
name: string;
|
|
121
|
+
}
|
|
122
|
+
|
|
117
123
|
export interface ToAddress {
|
|
118
124
|
name?: string;
|
|
119
125
|
address: string;
|
|
@@ -145,6 +151,7 @@ export interface WidgetConfig {
|
|
|
145
151
|
integrator: string;
|
|
146
152
|
apiKey?: string;
|
|
147
153
|
fee?: number;
|
|
154
|
+
feeTool?: WidgetFeeTool;
|
|
148
155
|
referrer?: string;
|
|
149
156
|
|
|
150
157
|
routePriority?: Order;
|