@lifi/widget 3.0.2 → 3.1.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/CHANGELOG.md +16 -0
- package/_esm/components/Card/CardIconButton.js +1 -0
- package/_esm/components/Card/CardIconButton.js.map +1 -1
- package/_esm/components/Card/CardLabel.d.ts +1 -1
- package/_esm/components/Card/CardLabel.js +8 -12
- package/_esm/components/Card/CardLabel.js.map +1 -1
- package/_esm/components/ChainSelect/ChainSelect.js +1 -1
- package/_esm/components/ChainSelect/ChainSelect.js.map +1 -1
- package/_esm/components/FeeBreakdownTooltip.d.ts +12 -0
- package/_esm/components/FeeBreakdownTooltip.js +13 -0
- package/_esm/components/FeeBreakdownTooltip.js.map +1 -0
- package/_esm/components/Header/CloseDrawerButton.js +1 -1
- package/_esm/components/Header/CloseDrawerButton.js.map +1 -1
- package/_esm/components/Header/SettingsButton.js +1 -1
- package/_esm/components/Header/SettingsButton.js.map +1 -1
- package/_esm/components/Header/TransactionHistoryButton.js +1 -1
- package/_esm/components/Header/TransactionHistoryButton.js.map +1 -1
- package/_esm/components/IconTypography.d.ts +3 -0
- package/_esm/components/IconTypography.js +8 -0
- package/_esm/components/IconTypography.js.map +1 -0
- package/_esm/components/PoweredBy/PoweredBy.js +1 -1
- package/_esm/components/PoweredBy/PoweredBy.js.map +1 -1
- package/_esm/components/ProgressToNextUpdate.js +1 -1
- package/_esm/components/ProgressToNextUpdate.js.map +1 -1
- package/_esm/components/RouteCard/RouteCard.js +7 -16
- package/_esm/components/RouteCard/RouteCard.js.map +1 -1
- package/_esm/components/RouteCard/RouteCard.style.d.ts +0 -3
- package/_esm/components/RouteCard/RouteCard.style.js +1 -7
- package/_esm/components/RouteCard/RouteCard.style.js.map +1 -1
- package/_esm/components/RouteCard/RouteCardEssentials.js +13 -14
- package/_esm/components/RouteCard/RouteCardEssentials.js.map +1 -1
- package/_esm/components/RouteCard/RouteCardEssentialsExpanded.js +4 -20
- package/_esm/components/RouteCard/RouteCardEssentialsExpanded.js.map +1 -1
- package/_esm/components/RouteCard/types.d.ts +1 -6
- package/_esm/components/Routes/RoutesExpanded.js +2 -4
- package/_esm/components/Routes/RoutesExpanded.js.map +1 -1
- package/_esm/components/SendToWallet/SendToWalletExpandButton.js +1 -1
- package/_esm/components/SendToWallet/SendToWalletExpandButton.js.map +1 -1
- package/_esm/components/Step/Step.d.ts +1 -0
- package/_esm/components/Step/Step.js +2 -2
- package/_esm/components/Step/Step.js.map +1 -1
- package/_esm/components/Step/StepList.js +16 -7
- package/_esm/components/Step/StepList.js.map +1 -1
- package/_esm/components/Step/StepTimer.js +3 -3
- package/_esm/components/Step/StepTimer.js.map +1 -1
- package/_esm/components/StepActions/StepActions.js +5 -4
- package/_esm/components/StepActions/StepActions.js.map +1 -1
- package/_esm/components/Token/Token.d.ts +2 -0
- package/_esm/components/Token/Token.js +22 -8
- package/_esm/components/Token/Token.js.map +1 -1
- package/_esm/components/Token/Token.style.js +1 -0
- package/_esm/components/Token/Token.style.js.map +1 -1
- package/_esm/components/TokenRate.d.ts +7 -0
- package/_esm/components/TokenRate.js +41 -0
- package/_esm/components/TokenRate.js.map +1 -0
- package/_esm/components/TransactionDetails.d.ts +7 -0
- package/_esm/components/TransactionDetails.js +46 -0
- package/_esm/components/TransactionDetails.js.map +1 -0
- package/_esm/config/version.d.ts +1 -1
- package/_esm/config/version.js +1 -1
- package/_esm/hooks/timer/useInterval.d.ts +1 -0
- package/_esm/hooks/timer/useInterval.js +18 -0
- package/_esm/hooks/timer/useInterval.js.map +1 -0
- package/_esm/hooks/timer/useTimer.d.ts +18 -0
- package/_esm/hooks/timer/useTimer.js +61 -0
- package/_esm/hooks/timer/useTimer.js.map +1 -0
- package/_esm/hooks/timer/utils.d.ts +11 -0
- package/_esm/hooks/timer/utils.js +46 -0
- package/_esm/hooks/timer/utils.js.map +1 -0
- package/_esm/hooks/useAccount.js +4 -5
- package/_esm/hooks/useAccount.js.map +1 -1
- package/_esm/hooks/useAvailableChains.js +1 -0
- package/_esm/hooks/useAvailableChains.js.map +1 -1
- package/_esm/hooks/useGasRecommendation.js +1 -0
- package/_esm/hooks/useGasRecommendation.js.map +1 -1
- package/_esm/hooks/useRoutes.d.ts +4 -2
- package/_esm/hooks/useRoutes.js +17 -10
- package/_esm/hooks/useRoutes.js.map +1 -1
- package/_esm/hooks/useTokens.js +1 -0
- package/_esm/hooks/useTokens.js.map +1 -1
- package/_esm/hooks/useTools.js +1 -0
- package/_esm/hooks/useTools.js.map +1 -1
- package/_esm/hooks/useTransactionDetails.d.ts +1 -1
- package/_esm/hooks/useTransactionDetails.js +1 -1
- package/_esm/hooks/useTransactionDetails.js.map +1 -1
- package/_esm/hooks/useTransactionHistory.js.map +1 -1
- package/_esm/i18n/en.json +14 -20
- package/_esm/i18n/index.js +15 -15
- package/_esm/i18n/index.js.map +1 -1
- package/_esm/index.d.ts +2 -1
- package/_esm/index.js +1 -4
- package/_esm/index.js.map +1 -1
- package/_esm/pages/MainPage/ReviewButton.js +2 -4
- package/_esm/pages/MainPage/ReviewButton.js.map +1 -1
- package/_esm/pages/RoutesPage/RoutesPage.js +2 -4
- package/_esm/pages/RoutesPage/RoutesPage.js.map +1 -1
- package/_esm/pages/SelectEnabledToolsPage.js +1 -1
- package/_esm/pages/SelectEnabledToolsPage.js.map +1 -1
- package/_esm/pages/SendToWallet/SendToWalletPage.js +1 -1
- package/_esm/pages/SendToWallet/SendToWalletPage.js.map +1 -1
- package/_esm/pages/SettingsPage/ThemeSettings.js +1 -1
- package/_esm/pages/SettingsPage/ThemeSettings.js.map +1 -1
- package/_esm/pages/TransactionDetailsPage/TransactionDetailsPage.js +5 -7
- package/_esm/pages/TransactionDetailsPage/TransactionDetailsPage.js.map +1 -1
- package/_esm/pages/TransactionHistoryPage/TransactionHistoryItem.js +2 -2
- package/_esm/pages/TransactionHistoryPage/TransactionHistoryItem.js.map +1 -1
- package/_esm/pages/TransactionPage/ExchangeRateBottomSheet.js +2 -2
- package/_esm/pages/TransactionPage/ExchangeRateBottomSheet.js.map +1 -1
- package/_esm/pages/TransactionPage/RouteTracker.d.ts +7 -0
- package/_esm/pages/TransactionPage/RouteTracker.js +39 -0
- package/_esm/pages/TransactionPage/RouteTracker.js.map +1 -0
- package/_esm/pages/TransactionPage/StartTransactionButton.d.ts +0 -1
- package/_esm/pages/TransactionPage/StartTransactionButton.js +0 -9
- package/_esm/pages/TransactionPage/StartTransactionButton.js.map +1 -1
- package/_esm/pages/TransactionPage/TransactionPage.js +10 -21
- package/_esm/pages/TransactionPage/TransactionPage.js.map +1 -1
- package/_esm/pages/TransactionPage/types.d.ts +0 -1
- package/_esm/providers/I18nProvider/I18nProvider.js +2 -0
- package/_esm/providers/I18nProvider/I18nProvider.js.map +1 -1
- package/_esm/providers/I18nProvider/currencyExtendedFormatter.d.ts +1 -0
- package/_esm/providers/I18nProvider/currencyExtendedFormatter.js +13 -0
- package/_esm/providers/I18nProvider/currencyExtendedFormatter.js.map +1 -0
- package/_esm/providers/WalletProvider/EVMBaseProvider.js +18 -12
- package/_esm/providers/WalletProvider/EVMBaseProvider.js.map +1 -1
- package/_esm/stores/routes/createRouteExecutionStore.js +2 -2
- package/_esm/stores/routes/createRouteExecutionStore.js.map +1 -1
- package/_esm/stores/routes/types.d.ts +1 -1
- package/_esm/stores/routes/useSetExecutableRoute.d.ts +1 -1
- package/_esm/themes/createTheme.js +6 -0
- package/_esm/themes/createTheme.js.map +1 -1
- package/_esm/types/widget.d.ts +1 -2
- package/_esm/utils/converters.js +5 -13
- package/_esm/utils/converters.js.map +1 -1
- package/_esm/utils/fees.d.ts +3 -3
- package/_esm/utils/fees.js +18 -13
- package/_esm/utils/fees.js.map +1 -1
- package/_esm/utils/format.d.ts +13 -4
- package/_esm/utils/format.js +51 -13
- package/_esm/utils/format.js.map +1 -1
- package/components/Card/CardIconButton.tsx +1 -0
- package/components/Card/CardLabel.tsx +13 -29
- package/components/ChainSelect/ChainSelect.tsx +1 -9
- package/components/FeeBreakdownTooltip.tsx +66 -0
- package/components/Header/CloseDrawerButton.tsx +1 -1
- package/components/Header/SettingsButton.tsx +1 -1
- package/components/Header/TransactionHistoryButton.tsx +1 -1
- package/components/IconTypography.ts +9 -0
- package/components/PoweredBy/PoweredBy.tsx +1 -1
- package/components/ProgressToNextUpdate.tsx +0 -3
- package/components/RouteCard/RouteCard.style.ts +1 -9
- package/components/RouteCard/RouteCard.tsx +15 -71
- package/components/RouteCard/RouteCardEssentials.tsx +52 -81
- package/components/RouteCard/RouteCardEssentialsExpanded.tsx +17 -107
- package/components/RouteCard/types.ts +1 -7
- package/components/Routes/RoutesExpanded.tsx +3 -4
- package/components/SendToWallet/SendToWalletExpandButton.tsx +1 -6
- package/components/Step/Step.tsx +11 -2
- package/components/Step/StepList.tsx +19 -10
- package/components/Step/StepTimer.tsx +9 -6
- package/components/StepActions/StepActions.tsx +11 -14
- package/components/Token/Token.style.tsx +1 -0
- package/components/Token/Token.tsx +49 -9
- package/components/TokenRate.tsx +79 -0
- package/components/TransactionDetails.tsx +182 -0
- package/config/version.ts +1 -1
- package/hooks/timer/useInterval.ts +21 -0
- package/hooks/timer/useTimer.ts +91 -0
- package/hooks/timer/utils.ts +54 -0
- package/hooks/useAccount.ts +8 -5
- package/hooks/useAvailableChains.ts +2 -1
- package/hooks/useGasRecommendation.ts +1 -0
- package/hooks/useRoutes.ts +23 -13
- package/hooks/useTokens.ts +1 -0
- package/hooks/useTools.ts +2 -1
- package/hooks/useTransactionDetails.ts +3 -3
- package/hooks/useTransactionHistory.ts +1 -1
- package/i18n/en.json +14 -20
- package/i18n/index.ts +15 -15
- package/index.ts +2 -5
- package/package.json +15 -16
- package/pages/MainPage/ReviewButton.tsx +2 -4
- package/pages/RoutesPage/RoutesPage.tsx +3 -4
- package/pages/SelectEnabledToolsPage.tsx +1 -1
- package/pages/SendToWallet/SendToWalletPage.tsx +1 -1
- package/pages/SettingsPage/ThemeSettings.tsx +1 -1
- package/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +9 -20
- package/pages/TransactionHistoryPage/TransactionHistoryItem.tsx +3 -5
- package/pages/TransactionPage/ExchangeRateBottomSheet.tsx +0 -2
- package/pages/TransactionPage/RouteTracker.tsx +68 -0
- package/pages/TransactionPage/StartTransactionButton.tsx +0 -24
- package/pages/TransactionPage/TransactionPage.tsx +21 -48
- package/pages/TransactionPage/types.ts +0 -1
- package/providers/I18nProvider/I18nProvider.tsx +6 -0
- package/providers/I18nProvider/currencyExtendedFormatter.ts +15 -0
- package/providers/WalletProvider/EVMBaseProvider.tsx +13 -7
- package/stores/routes/createRouteExecutionStore.ts +2 -2
- package/stores/routes/types.ts +1 -1
- package/themes/createTheme.ts +6 -0
- package/types/widget.ts +1 -2
- package/utils/converters.ts +5 -13
- package/utils/fees.ts +23 -24
- package/utils/format.ts +67 -20
- package/_esm/components/Insurance/Insurance.d.ts +0 -2
- package/_esm/components/Insurance/Insurance.js +0 -8
- package/_esm/components/Insurance/Insurance.js.map +0 -1
- package/_esm/components/Insurance/InsuranceCard.d.ts +0 -2
- package/_esm/components/Insurance/InsuranceCard.js +0 -36
- package/_esm/components/Insurance/InsuranceCard.js.map +0 -1
- package/_esm/components/Insurance/InsuranceCollapsed.d.ts +0 -2
- package/_esm/components/Insurance/InsuranceCollapsed.js +0 -29
- package/_esm/components/Insurance/InsuranceCollapsed.js.map +0 -1
- package/_esm/components/Insurance/types.d.ts +0 -19
- package/_esm/components/Insurance/types.js +0 -2
- package/_esm/components/Insurance/types.js.map +0 -1
- package/_esm/components/StepActions/StepFeeBreakdown.d.ts +0 -4
- package/_esm/components/StepActions/StepFeeBreakdown.js +0 -42
- package/_esm/components/StepActions/StepFeeBreakdown.js.map +0 -1
- package/_esm/icons/InsuraceLogo.d.ts +0 -2
- package/_esm/icons/InsuraceLogo.js +0 -8
- package/_esm/icons/InsuraceLogo.js.map +0 -1
- package/components/Insurance/Insurance.tsx +0 -22
- package/components/Insurance/InsuranceCard.tsx +0 -119
- package/components/Insurance/InsuranceCollapsed.tsx +0 -59
- package/components/Insurance/types.ts +0 -24
- package/components/StepActions/StepFeeBreakdown.tsx +0 -108
- package/icons/InsuraceLogo.tsx +0 -46
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import type { ExchangeRateUpdateParams } from '@lifi/sdk';
|
|
2
2
|
import { Delete } from '@mui/icons-material';
|
|
3
3
|
import { Box, Button, Tooltip } from '@mui/material';
|
|
4
|
-
import { useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
5
5
|
import { useTranslation } from 'react-i18next';
|
|
6
6
|
import { useLocation } from 'react-router-dom';
|
|
7
7
|
import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
|
|
8
8
|
import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
|
|
9
9
|
import { GasMessage } from '../../components/GasMessage/GasMessage.js';
|
|
10
|
-
import { Insurance } from '../../components/Insurance/Insurance.js';
|
|
11
10
|
import { PageContainer } from '../../components/PageContainer.js';
|
|
12
11
|
import { getStepList } from '../../components/Step/StepList.js';
|
|
12
|
+
import { TransactionDetails } from '../../components/TransactionDetails.js';
|
|
13
13
|
import { useHeader } from '../../hooks/useHeader.js';
|
|
14
14
|
import { useNavigateBack } from '../../hooks/useNavigateBack.js';
|
|
15
15
|
import { useRouteExecution } from '../../hooks/useRouteExecution.js';
|
|
@@ -18,13 +18,10 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
|
|
|
18
18
|
import { useFieldActions } from '../../stores/form/useFieldActions.js';
|
|
19
19
|
import { RouteExecutionStatus } from '../../stores/routes/types.js';
|
|
20
20
|
import { WidgetEvent } from '../../types/events.js';
|
|
21
|
-
import { formatTokenAmount } from '../../utils/format.js';
|
|
22
21
|
import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js';
|
|
23
22
|
import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js';
|
|
24
|
-
import {
|
|
25
|
-
|
|
26
|
-
StartTransactionButton,
|
|
27
|
-
} from './StartTransactionButton.js';
|
|
23
|
+
import { RouteTracker } from './RouteTracker.js';
|
|
24
|
+
import { StartTransactionButton } from './StartTransactionButton.js';
|
|
28
25
|
import { StatusBottomSheet } from './StatusBottomSheet.js';
|
|
29
26
|
import {
|
|
30
27
|
TokenValueBottomSheet,
|
|
@@ -37,11 +34,11 @@ export const TransactionPage: React.FC = () => {
|
|
|
37
34
|
const { setFieldValue } = useFieldActions();
|
|
38
35
|
const emitter = useWidgetEvents();
|
|
39
36
|
const { navigateBack } = useNavigateBack();
|
|
40
|
-
const { subvariant,
|
|
41
|
-
useWidgetConfig();
|
|
37
|
+
const { subvariant, contractSecondaryComponent } = useWidgetConfig();
|
|
42
38
|
const { state }: any = useLocation();
|
|
43
39
|
const stateRouteId = state?.routeId;
|
|
44
40
|
const [routeId, setRouteId] = useState<string>(stateRouteId);
|
|
41
|
+
const [routeRefreshing, setRouteRefreshing] = useState(false);
|
|
45
42
|
|
|
46
43
|
const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null);
|
|
47
44
|
const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null);
|
|
@@ -76,9 +73,19 @@ export const TransactionPage: React.FC = () => {
|
|
|
76
73
|
return t(`header.exchange`);
|
|
77
74
|
};
|
|
78
75
|
|
|
79
|
-
const
|
|
76
|
+
const headerAction = useMemo(
|
|
77
|
+
() =>
|
|
78
|
+
status === RouteExecutionStatus.Idle ? (
|
|
79
|
+
<RouteTracker
|
|
80
|
+
observableRouteId={stateRouteId}
|
|
81
|
+
onChange={setRouteId}
|
|
82
|
+
onFetching={setRouteRefreshing}
|
|
83
|
+
/>
|
|
84
|
+
) : undefined,
|
|
85
|
+
[stateRouteId, status],
|
|
86
|
+
);
|
|
80
87
|
|
|
81
|
-
useHeader(
|
|
88
|
+
useHeader(getHeaderTitle(), headerAction);
|
|
82
89
|
|
|
83
90
|
useEffect(() => {
|
|
84
91
|
if (status === RouteExecutionStatus.Idle) {
|
|
@@ -150,24 +157,6 @@ export const TransactionPage: React.FC = () => {
|
|
|
150
157
|
}
|
|
151
158
|
};
|
|
152
159
|
|
|
153
|
-
const insuredRoute = route.insurance?.state === 'INSURED';
|
|
154
|
-
const insurableRoute =
|
|
155
|
-
insurance &&
|
|
156
|
-
subvariant !== 'refuel' &&
|
|
157
|
-
status === RouteExecutionStatus.Idle &&
|
|
158
|
-
route.insurance?.state === 'INSURABLE';
|
|
159
|
-
|
|
160
|
-
const insuranceAvailable = insuredRoute || insurableRoute;
|
|
161
|
-
|
|
162
|
-
const StartButton = insurableRoute
|
|
163
|
-
? StartInsurableTransactionButton
|
|
164
|
-
: StartTransactionButton;
|
|
165
|
-
|
|
166
|
-
const getInsuranceCoverageId = () =>
|
|
167
|
-
route.steps[0].execution?.process
|
|
168
|
-
.filter((process) => process.type !== 'TOKEN_ALLOWANCE')
|
|
169
|
-
.find((process) => process.txHash)?.txHash ?? route.fromAddress;
|
|
170
|
-
|
|
171
160
|
return (
|
|
172
161
|
<PageContainer bottomGutters>
|
|
173
162
|
{getStepList(route, subvariant)}
|
|
@@ -176,38 +165,22 @@ export const TransactionPage: React.FC = () => {
|
|
|
176
165
|
{contractSecondaryComponent}
|
|
177
166
|
</ContractComponent>
|
|
178
167
|
) : null}
|
|
179
|
-
{
|
|
180
|
-
<Insurance
|
|
181
|
-
status={status}
|
|
182
|
-
insurableRouteId={stateRouteId}
|
|
183
|
-
feeAmountUsd={route.insurance.feeAmountUsd}
|
|
184
|
-
insuredAmount={formatTokenAmount(
|
|
185
|
-
BigInt(route.toAmountMin),
|
|
186
|
-
route.toToken.decimals,
|
|
187
|
-
)}
|
|
188
|
-
insuredTokenSymbol={route.toToken.symbol}
|
|
189
|
-
insuranceCoverageId={getInsuranceCoverageId()}
|
|
190
|
-
onChange={setRouteId}
|
|
191
|
-
sx={{ marginTop: 2 }}
|
|
192
|
-
/>
|
|
193
|
-
) : null}
|
|
168
|
+
<TransactionDetails route={route} sx={{ marginTop: 2 }} />
|
|
194
169
|
{status === RouteExecutionStatus.Idle ||
|
|
195
170
|
status === RouteExecutionStatus.Failed ? (
|
|
196
171
|
<>
|
|
197
172
|
<GasMessage mt={2} route={route} />
|
|
198
173
|
<Box mt={2} display="flex">
|
|
199
|
-
<
|
|
174
|
+
<StartTransactionButton
|
|
200
175
|
text={getButtonText()}
|
|
201
176
|
onClick={handleStartClick}
|
|
202
177
|
route={route}
|
|
203
|
-
|
|
178
|
+
loading={routeRefreshing}
|
|
204
179
|
/>
|
|
205
180
|
{status === RouteExecutionStatus.Failed ? (
|
|
206
181
|
<Tooltip
|
|
207
182
|
title={t('button.removeTransaction')}
|
|
208
183
|
placement="bottom-end"
|
|
209
|
-
enterDelay={400}
|
|
210
|
-
arrow
|
|
211
184
|
>
|
|
212
185
|
<Button
|
|
213
186
|
onClick={handleRemoveRoute}
|
|
@@ -7,6 +7,7 @@ import { useSettings } from '../../stores/settings/useSettings.js';
|
|
|
7
7
|
import { deepMerge } from '../../utils/deepMerge.js';
|
|
8
8
|
import { isItemAllowed } from '../../utils/item.js';
|
|
9
9
|
import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
|
|
10
|
+
import { currencyExtendedFormatter } from './currencyExtendedFormatter.js';
|
|
10
11
|
import type { LanguageKey, LanguageTranslationResources } from './types.js';
|
|
11
12
|
|
|
12
13
|
export const I18nProvider: React.FC<React.PropsWithChildren> = ({
|
|
@@ -61,6 +62,11 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
|
|
|
61
62
|
|
|
62
63
|
i18n.init();
|
|
63
64
|
|
|
65
|
+
i18n.services.formatter?.addCached(
|
|
66
|
+
'currencyExt',
|
|
67
|
+
currencyExtendedFormatter,
|
|
68
|
+
);
|
|
69
|
+
|
|
64
70
|
return i18n;
|
|
65
71
|
}, [language, languageResources, languages]);
|
|
66
72
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export const currencyExtendedFormatter = (
|
|
2
|
+
lng: string | undefined,
|
|
3
|
+
options: any,
|
|
4
|
+
) => {
|
|
5
|
+
const formatter = new Intl.NumberFormat(lng, {
|
|
6
|
+
...options,
|
|
7
|
+
style: 'currency',
|
|
8
|
+
});
|
|
9
|
+
return (value: any) => {
|
|
10
|
+
if (value > 0 && value < 0.01) {
|
|
11
|
+
return `<${formatter.format(0.01)}`;
|
|
12
|
+
}
|
|
13
|
+
return formatter.format(value);
|
|
14
|
+
};
|
|
15
|
+
};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import type { DefaultWagmiConfigResult } from '@lifi/wallet-management';
|
|
1
2
|
import {
|
|
2
3
|
createDefaultWagmiConfig,
|
|
3
4
|
useSyncWagmiConfig,
|
|
4
5
|
} from '@lifi/wallet-management';
|
|
5
|
-
import {
|
|
6
|
+
import { useRef, type FC, type PropsWithChildren } from 'react';
|
|
6
7
|
import { WagmiProvider } from 'wagmi';
|
|
7
8
|
import { defaultWalletConnectProjectId } from '../../config/walletConnect.js';
|
|
8
9
|
import { useAvailableChains } from '../../hooks/useAvailableChains.js';
|
|
@@ -12,8 +13,10 @@ import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
|
|
|
12
13
|
export const EVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
|
|
13
14
|
const { walletConfig } = useWidgetConfig();
|
|
14
15
|
const { chains } = useAvailableChains();
|
|
15
|
-
const
|
|
16
|
-
|
|
16
|
+
const wagmi = useRef<DefaultWagmiConfigResult>();
|
|
17
|
+
|
|
18
|
+
if (!wagmi.current) {
|
|
19
|
+
wagmi.current = createDefaultWagmiConfig({
|
|
17
20
|
walletConnect: walletConfig?.walletConnect ?? {
|
|
18
21
|
projectId: defaultWalletConnectProjectId,
|
|
19
22
|
},
|
|
@@ -21,13 +24,16 @@ export const EVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
|
|
|
21
24
|
appName: 'LI.FI',
|
|
22
25
|
appLogoUrl: LiFiToolLogo,
|
|
23
26
|
},
|
|
24
|
-
|
|
25
|
-
|
|
27
|
+
wagmiConfig: {
|
|
28
|
+
ssr: true,
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
}
|
|
26
32
|
|
|
27
|
-
useSyncWagmiConfig(wagmi.config, wagmi.connectors, chains);
|
|
33
|
+
useSyncWagmiConfig(wagmi.current.config, wagmi.current.connectors, chains);
|
|
28
34
|
|
|
29
35
|
return (
|
|
30
|
-
<WagmiProvider config={wagmi.config} reconnectOnMount={false}>
|
|
36
|
+
<WagmiProvider config={wagmi.current.config} reconnectOnMount={false}>
|
|
31
37
|
{children}
|
|
32
38
|
</WagmiProvider>
|
|
33
39
|
);
|
|
@@ -18,7 +18,7 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
|
|
|
18
18
|
persist(
|
|
19
19
|
(set, get) => ({
|
|
20
20
|
routes: {},
|
|
21
|
-
setExecutableRoute: (route: Route,
|
|
21
|
+
setExecutableRoute: (route: Route, observableRouteIds?: string[]) => {
|
|
22
22
|
if (!get().routes[route.id]) {
|
|
23
23
|
set((state: RouteExecutionState) => {
|
|
24
24
|
const routes = { ...state.routes };
|
|
@@ -26,7 +26,7 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
|
|
|
26
26
|
Object.keys(routes)
|
|
27
27
|
.filter(
|
|
28
28
|
(routeId) =>
|
|
29
|
-
(routeId
|
|
29
|
+
(!observableRouteIds?.includes(routeId) &&
|
|
30
30
|
hasEnumFlag(
|
|
31
31
|
routes[routeId]!.status,
|
|
32
32
|
RouteExecutionStatus.Idle,
|
package/stores/routes/types.ts
CHANGED
|
@@ -7,7 +7,7 @@ export interface RouteExecution {
|
|
|
7
7
|
|
|
8
8
|
export interface RouteExecutionState {
|
|
9
9
|
routes: Partial<Record<string, RouteExecution>>;
|
|
10
|
-
setExecutableRoute: (route: Route,
|
|
10
|
+
setExecutableRoute: (route: Route, observableRouteIds?: string[]) => void;
|
|
11
11
|
updateRoute: (route: Route) => void;
|
|
12
12
|
restartRoute: (routeId: string) => void;
|
|
13
13
|
deleteRoute: (routeId: string) => void;
|
package/themes/createTheme.ts
CHANGED
|
@@ -347,6 +347,12 @@ export const createTheme = (
|
|
|
347
347
|
},
|
|
348
348
|
},
|
|
349
349
|
MuiTooltip: {
|
|
350
|
+
defaultProps: {
|
|
351
|
+
enterDelay: 400,
|
|
352
|
+
disableInteractive: true,
|
|
353
|
+
arrow: true,
|
|
354
|
+
placement: 'top',
|
|
355
|
+
},
|
|
350
356
|
styleOverrides: {
|
|
351
357
|
tooltip: ({ theme }) => ({
|
|
352
358
|
backgroundColor: 'rgb(0 0 0 / 64%)',
|
package/types/widget.ts
CHANGED
|
@@ -106,7 +106,7 @@ export interface WidgetSDKConfig
|
|
|
106
106
|
| 'routeOptions'
|
|
107
107
|
| 'widgetVersion'
|
|
108
108
|
> {
|
|
109
|
-
routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'
|
|
109
|
+
routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
export interface WidgetContractTool {
|
|
@@ -149,7 +149,6 @@ export interface WidgetConfig {
|
|
|
149
149
|
|
|
150
150
|
routePriority?: Order;
|
|
151
151
|
slippage?: number;
|
|
152
|
-
insurance?: boolean;
|
|
153
152
|
|
|
154
153
|
variant?: WidgetVariant;
|
|
155
154
|
subvariant?: WidgetSubvariant;
|
package/utils/converters.ts
CHANGED
|
@@ -8,6 +8,7 @@ import type {
|
|
|
8
8
|
TokenAmount,
|
|
9
9
|
ToolsResponse,
|
|
10
10
|
} from '@lifi/sdk';
|
|
11
|
+
import { v4 as uuidv4 } from 'uuid';
|
|
11
12
|
import { formatUnits } from 'viem';
|
|
12
13
|
import type { RouteExecution } from '../stores/routes/types.js';
|
|
13
14
|
|
|
@@ -93,21 +94,11 @@ export const buildRouteFromTxHistory = (
|
|
|
93
94
|
const fromToken: TokenAmount = {
|
|
94
95
|
...sending.token,
|
|
95
96
|
amount: BigInt(sending.amount ?? 0),
|
|
96
|
-
priceUSD: sending.amountUSD ?? '0',
|
|
97
|
-
symbol: sending.token?.symbol ?? '',
|
|
98
|
-
decimals: sending.token?.decimals ?? 0,
|
|
99
|
-
name: sending.token?.name ?? '',
|
|
100
|
-
chainId: sending.token?.chainId,
|
|
101
97
|
};
|
|
102
98
|
|
|
103
99
|
const toToken: TokenAmount = {
|
|
104
100
|
...receiving.token,
|
|
105
101
|
amount: BigInt(receiving.amount ?? 0),
|
|
106
|
-
priceUSD: receiving.amountUSD ?? '0',
|
|
107
|
-
symbol: receiving.token?.symbol ?? '',
|
|
108
|
-
decimals: receiving.token?.decimals ?? 0,
|
|
109
|
-
name: receiving.token?.name ?? '',
|
|
110
|
-
chainId: receiving.token?.chainId,
|
|
111
102
|
};
|
|
112
103
|
|
|
113
104
|
const sendingValue = sending.value ? BigInt(sending.value) : 0n;
|
|
@@ -121,7 +112,7 @@ export const buildRouteFromTxHistory = (
|
|
|
121
112
|
parseFloat(sending.gasToken.priceUSD)
|
|
122
113
|
: 0;
|
|
123
114
|
|
|
124
|
-
const feeCosts: FeeCost[] | undefined =
|
|
115
|
+
const feeCosts: FeeCost[] | undefined = sendingFeeAmount
|
|
125
116
|
? [
|
|
126
117
|
{
|
|
127
118
|
amount: sendingFeeAmount.toString(),
|
|
@@ -151,9 +142,10 @@ export const buildRouteFromTxHistory = (
|
|
|
151
142
|
toChainId: receiving.chainId,
|
|
152
143
|
fromToken,
|
|
153
144
|
toToken,
|
|
145
|
+
gasCostUSD: sending.gasAmountUSD,
|
|
154
146
|
steps: [
|
|
155
147
|
{
|
|
156
|
-
id:
|
|
148
|
+
id: uuidv4(),
|
|
157
149
|
type: 'lifi',
|
|
158
150
|
tool: tx.tool,
|
|
159
151
|
toolDetails: usedTool,
|
|
@@ -203,7 +195,7 @@ export const buildRouteFromTxHistory = (
|
|
|
203
195
|
toolDetails: usedTool,
|
|
204
196
|
},
|
|
205
197
|
],
|
|
206
|
-
integrator: '',
|
|
198
|
+
integrator: tx.metadata?.integrator ?? '',
|
|
207
199
|
execution: {
|
|
208
200
|
status: 'DONE', // can be FAILED
|
|
209
201
|
process: buildProcessFromTxHistory(tx),
|
package/utils/fees.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { FeeCost, GasCost,
|
|
1
|
+
import type { FeeCost, GasCost, RouteExtended, Token } from '@lifi/sdk';
|
|
2
2
|
|
|
3
3
|
export interface FeesBreakdown {
|
|
4
4
|
amount: bigint;
|
|
@@ -6,45 +6,45 @@ export interface FeesBreakdown {
|
|
|
6
6
|
token: Token;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
export const getGasCostsBreakdown = (route:
|
|
10
|
-
return
|
|
11
|
-
route.steps
|
|
12
|
-
(groupedGasCosts, step) => {
|
|
13
|
-
|
|
9
|
+
export const getGasCostsBreakdown = (route: RouteExtended): FeesBreakdown[] => {
|
|
10
|
+
return Array.from(
|
|
11
|
+
route.steps
|
|
12
|
+
.reduce((groupedGasCosts, step) => {
|
|
13
|
+
const gasCosts = step.execution?.gasCosts ?? step.estimate.gasCosts;
|
|
14
|
+
if (gasCosts?.length) {
|
|
14
15
|
const {
|
|
15
16
|
token,
|
|
16
17
|
amount: gasCostAmount,
|
|
17
18
|
amountUSD: gasCostAmountUSD,
|
|
18
|
-
} = getStepFeeCostsBreakdown(
|
|
19
|
-
const groupedGasCost = groupedGasCosts
|
|
19
|
+
} = getStepFeeCostsBreakdown(gasCosts);
|
|
20
|
+
const groupedGasCost = groupedGasCosts.get(token.chainId);
|
|
20
21
|
const amount = groupedGasCost
|
|
21
22
|
? groupedGasCost.amount + gasCostAmount
|
|
22
23
|
: gasCostAmount;
|
|
23
24
|
const amountUSD = groupedGasCost
|
|
24
25
|
? groupedGasCost.amountUSD + gasCostAmountUSD
|
|
25
26
|
: gasCostAmountUSD;
|
|
26
|
-
groupedGasCosts
|
|
27
|
+
groupedGasCosts.set(token.chainId, {
|
|
27
28
|
amount,
|
|
28
29
|
amountUSD,
|
|
29
30
|
token,
|
|
30
|
-
};
|
|
31
|
+
});
|
|
31
32
|
return groupedGasCosts;
|
|
32
33
|
}
|
|
33
34
|
return groupedGasCosts;
|
|
34
|
-
},
|
|
35
|
-
|
|
36
|
-
),
|
|
35
|
+
}, new Map<number, FeesBreakdown>())
|
|
36
|
+
.values(),
|
|
37
37
|
);
|
|
38
38
|
};
|
|
39
39
|
|
|
40
40
|
export const getFeeCostsBreakdown = (
|
|
41
|
-
route:
|
|
41
|
+
route: RouteExtended,
|
|
42
42
|
included?: boolean,
|
|
43
43
|
): FeesBreakdown[] => {
|
|
44
|
-
return
|
|
45
|
-
route.steps
|
|
46
|
-
(groupedFeeCosts, step) => {
|
|
47
|
-
let feeCosts = step.estimate.feeCosts;
|
|
44
|
+
return Array.from(
|
|
45
|
+
route.steps
|
|
46
|
+
.reduce((groupedFeeCosts, step) => {
|
|
47
|
+
let feeCosts = step.execution?.feeCosts ?? step.estimate.feeCosts;
|
|
48
48
|
if (typeof included === 'boolean') {
|
|
49
49
|
feeCosts = feeCosts?.filter(
|
|
50
50
|
(feeCost) => feeCost.included === included,
|
|
@@ -56,24 +56,23 @@ export const getFeeCostsBreakdown = (
|
|
|
56
56
|
amount: feeCostAmount,
|
|
57
57
|
amountUSD: feeCostAmountUSD,
|
|
58
58
|
} = getStepFeeCostsBreakdown(feeCosts);
|
|
59
|
-
const groupedFeeCost = groupedFeeCosts
|
|
59
|
+
const groupedFeeCost = groupedFeeCosts.get(token.chainId);
|
|
60
60
|
const amount = groupedFeeCost
|
|
61
61
|
? groupedFeeCost.amount + feeCostAmount
|
|
62
62
|
: feeCostAmount;
|
|
63
63
|
const amountUSD = groupedFeeCost
|
|
64
64
|
? groupedFeeCost.amountUSD + feeCostAmountUSD
|
|
65
65
|
: feeCostAmountUSD;
|
|
66
|
-
groupedFeeCosts
|
|
66
|
+
groupedFeeCosts.set(token.chainId, {
|
|
67
67
|
amount,
|
|
68
68
|
amountUSD,
|
|
69
69
|
token,
|
|
70
|
-
};
|
|
70
|
+
});
|
|
71
71
|
return groupedFeeCosts;
|
|
72
72
|
}
|
|
73
73
|
return groupedFeeCosts;
|
|
74
|
-
},
|
|
75
|
-
|
|
76
|
-
),
|
|
74
|
+
}, new Map<number, FeesBreakdown>())
|
|
75
|
+
.values(),
|
|
77
76
|
);
|
|
78
77
|
};
|
|
79
78
|
|
package/utils/format.ts
CHANGED
|
@@ -1,34 +1,35 @@
|
|
|
1
1
|
import { formatUnits } from 'viem';
|
|
2
2
|
|
|
3
|
+
const subscriptMap = ['₀', '₁', '₂', '₃', '₄', '₅', '₆', '₇', '₈', '₉'];
|
|
4
|
+
|
|
5
|
+
export const precisionFormatter = new Intl.NumberFormat('en', {
|
|
6
|
+
notation: 'standard',
|
|
7
|
+
roundingPriority: 'morePrecision',
|
|
8
|
+
maximumSignificantDigits: 4,
|
|
9
|
+
maximumFractionDigits: 4,
|
|
10
|
+
useGrouping: false,
|
|
11
|
+
});
|
|
12
|
+
|
|
3
13
|
/**
|
|
4
14
|
* Format token amount to at least 4 decimals.
|
|
5
15
|
* @param amount amount to format.
|
|
6
16
|
* @returns formatted amount.
|
|
7
17
|
*/
|
|
8
|
-
export
|
|
9
|
-
amount: bigint = 0n,
|
|
10
|
-
decimals: number,
|
|
11
|
-
decimalPlaces: number = 3,
|
|
12
|
-
) => {
|
|
18
|
+
export function formatTokenAmount(amount: bigint = 0n, decimals: number) {
|
|
13
19
|
const formattedAmount = amount ? formatUnits(amount, decimals) : '0';
|
|
14
20
|
const parsedAmount = parseFloat(formattedAmount);
|
|
15
21
|
if (parsedAmount === 0 || isNaN(Number(formattedAmount))) {
|
|
16
22
|
return '0';
|
|
17
23
|
}
|
|
18
24
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
decimalPlaces++;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
return parsedAmount.toFixed(decimalPlaces + 1);
|
|
25
|
-
};
|
|
25
|
+
return precisionFormatter.format(parsedAmount);
|
|
26
|
+
}
|
|
26
27
|
|
|
27
|
-
export
|
|
28
|
+
export function formatSlippage(
|
|
28
29
|
slippage: string = '',
|
|
29
30
|
defaultValue: string = '',
|
|
30
31
|
returnInitial: boolean = false,
|
|
31
|
-
): string
|
|
32
|
+
): string {
|
|
32
33
|
if (!slippage) {
|
|
33
34
|
return slippage;
|
|
34
35
|
}
|
|
@@ -49,13 +50,13 @@ export const formatSlippage = (
|
|
|
49
50
|
return slippage;
|
|
50
51
|
}
|
|
51
52
|
return parsedSlippage.toString();
|
|
52
|
-
}
|
|
53
|
+
}
|
|
53
54
|
|
|
54
|
-
export
|
|
55
|
+
export function formatInputAmount(
|
|
55
56
|
amount: string,
|
|
56
57
|
decimals: number | null = null,
|
|
57
58
|
returnInitial: boolean = false,
|
|
58
|
-
)
|
|
59
|
+
) {
|
|
59
60
|
if (!amount) {
|
|
60
61
|
return amount;
|
|
61
62
|
}
|
|
@@ -80,9 +81,9 @@ export const formatInputAmount = (
|
|
|
80
81
|
integer = integer.replace(/^0+|-/, '');
|
|
81
82
|
fraction = fraction.replace(/(0+)$/, '');
|
|
82
83
|
return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`;
|
|
83
|
-
}
|
|
84
|
+
}
|
|
84
85
|
|
|
85
|
-
export
|
|
86
|
+
export function formatTokenPrice(amount?: string, price?: string) {
|
|
86
87
|
if (!amount || !price) {
|
|
87
88
|
return 0;
|
|
88
89
|
}
|
|
@@ -90,4 +91,50 @@ export const formatTokenPrice = (amount?: string, price?: string) => {
|
|
|
90
91
|
return 0;
|
|
91
92
|
}
|
|
92
93
|
return parseFloat(amount) * parseFloat(price);
|
|
93
|
-
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* Converts a number to a subscript format if it contains leading zeros in the fractional part.
|
|
98
|
+
*
|
|
99
|
+
* @param {number} value - The number to be converted.
|
|
100
|
+
* @param {Intl.NumberFormatOptions} options An object that contains one or more properties that specify comparison options.
|
|
101
|
+
* @returns {string} - The number formatted as a string, with subscripts for leading zeros if applicable.
|
|
102
|
+
*/
|
|
103
|
+
export function convertToSubscriptFormat(
|
|
104
|
+
value: number,
|
|
105
|
+
options?: Intl.NumberFormatOptions,
|
|
106
|
+
): string {
|
|
107
|
+
let formattedValue;
|
|
108
|
+
if (options) {
|
|
109
|
+
formattedValue = value.toLocaleString('en', options);
|
|
110
|
+
} else {
|
|
111
|
+
formattedValue = precisionFormatter.format(value);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// Calculate the number of zeros after the decimal point
|
|
115
|
+
const d = Math.ceil(Math.log10(Math.abs(value)));
|
|
116
|
+
|
|
117
|
+
// If the value does not have significant leading zeros in the fractional part, return the formatted value as is
|
|
118
|
+
if (d > -3 || !value) {
|
|
119
|
+
return formattedValue;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// Calculate the number of leading zeros in the fractional part
|
|
123
|
+
const leadingZeros = Math.abs(d);
|
|
124
|
+
|
|
125
|
+
const fractionalPartExtractor = value > 0 ? 2 : 3;
|
|
126
|
+
|
|
127
|
+
// Extract the fractional part of the formatted value, excluding the leading zeros and "0." or "-0."
|
|
128
|
+
const fractionalPart = formattedValue.slice(
|
|
129
|
+
leadingZeros + fractionalPartExtractor,
|
|
130
|
+
);
|
|
131
|
+
|
|
132
|
+
// Convert the number of leading zeros to their corresponding Unicode subscript characters
|
|
133
|
+
const subscript = leadingZeros
|
|
134
|
+
.toString()
|
|
135
|
+
.split('')
|
|
136
|
+
.map((digit) => subscriptMap[digit as any])
|
|
137
|
+
.join('');
|
|
138
|
+
|
|
139
|
+
return `${value > 0 ? '' : '-'}0.0${subscript}${fractionalPart}`;
|
|
140
|
+
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { RouteExecutionStatus } from '../../stores/routes/types.js';
|
|
3
|
-
import { InsuranceCard } from './InsuranceCard.js';
|
|
4
|
-
import { InsuranceCollapsed } from './InsuranceCollapsed.js';
|
|
5
|
-
export const Insurance = ({ status, insurableRouteId, onChange, ...props }) => {
|
|
6
|
-
return status === RouteExecutionStatus.Idle ? (_jsx(InsuranceCollapsed, { status: status, insurableRouteId: insurableRouteId, onChange: onChange, ...props })) : (_jsx(InsuranceCard, { status: status, ...props }));
|
|
7
|
-
};
|
|
8
|
-
//# sourceMappingURL=Insurance.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Insurance.js","sourceRoot":"","sources":["../../../components/Insurance/Insurance.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,MAAM,EACN,gBAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,MAAM,KAAK,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,CAC5C,KAAC,kBAAkB,IACjB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ,KACd,KAAK,GACT,CACH,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAC7C,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { VerifiedUser } from '@mui/icons-material';
|
|
3
|
-
import { Box, Collapse, Link, Typography } from '@mui/material';
|
|
4
|
-
import { useState } from 'react';
|
|
5
|
-
import { Trans, useTranslation } from 'react-i18next';
|
|
6
|
-
import { InsuraceLogo } from '../../icons/InsuraceLogo.js';
|
|
7
|
-
import { RouteExecutionStatus } from '../../stores/routes/types.js';
|
|
8
|
-
import { Card } from '../Card/Card.js';
|
|
9
|
-
import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js';
|
|
10
|
-
import { Switch } from '../Switch.js';
|
|
11
|
-
export const InsuranceCard = ({ status, feeAmountUsd, insuredAmount, insuredTokenSymbol, insuranceCoverageId, onChange, ...props }) => {
|
|
12
|
-
const { t } = useTranslation();
|
|
13
|
-
const [enabled, setEnabled] = useState(false);
|
|
14
|
-
const handleSwitch = (_, checked) => {
|
|
15
|
-
setEnabled(checked);
|
|
16
|
-
onChange?.(checked);
|
|
17
|
-
};
|
|
18
|
-
return (_jsxs(Card, { selectionColor: "secondary", indented: true, ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsxs(CardLabel, { type: 'insurance', children: [_jsx(VerifiedUser, { fontSize: "inherit" }), _jsx(CardLabelTypography, { type: "icon", children: status === RouteExecutionStatus.Idle
|
|
19
|
-
? t('main.tags.insurance')
|
|
20
|
-
: t('main.tags.insured') })] }), _jsx(Switch, { onChange: handleSwitch, value: enabled })] }), _jsx(Collapse, { timeout: 225, in: enabled, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { mt: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
|
|
21
|
-
value: feeAmountUsd,
|
|
22
|
-
}) }), _jsx(InsuraceLogo, {})] }), _jsxs(Box, { children: [_jsx(Typography, { fontSize: 14, children: _jsx(Trans, { i18nKey: status === RouteExecutionStatus.Idle
|
|
23
|
-
? 'insurance.insure'
|
|
24
|
-
: 'insurance.insured', values: {
|
|
25
|
-
amount: insuredAmount,
|
|
26
|
-
tokenSymbol: insuredTokenSymbol,
|
|
27
|
-
}, components: [_jsx("strong", {})] }) }), _jsx(Collapse, { timeout: 225, in: enabled || status !== RouteExecutionStatus.Idle, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { sx: {
|
|
28
|
-
listStyleType: 'disc',
|
|
29
|
-
pl: 2,
|
|
30
|
-
}, children: [_jsx(Typography, { fontSize: 14, display: "list-item", children: t('insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 14, display: "list-item", children: t('insurance.slippageError') })] }) }), _jsx(Link, { href: status === RouteExecutionStatus.Idle
|
|
31
|
-
? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
|
|
32
|
-
: `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: _jsx(Typography, { pt: 0.5, color: "primary", fontSize: 14, fontWeight: 600, children: status === RouteExecutionStatus.Idle
|
|
33
|
-
? t('button.learnMore')
|
|
34
|
-
: t('button.viewCoverage') }) })] })] }) })] }));
|
|
35
|
-
};
|
|
36
|
-
//# sourceMappingURL=InsuranceCard.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"InsuranceCard.js","sourceRoot":"","sources":["../../../components/Insurance/InsuranceCard.tsx"],"names":[],"mappings":"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"}
|