diff --git a/packages/widget/src/components/Card/CardLabel.tsx b/packages/widget/src/components/Card/CardLabel.tsx index f9eb0c8e2..75e825686 100644 --- a/packages/widget/src/components/Card/CardLabel.tsx +++ b/packages/widget/src/components/Card/CardLabel.tsx @@ -1,15 +1,9 @@ -import { - Box, - Typography, - getContrastRatio, - lighten, - styled, -} from '@mui/material'; +import { Box, Typography, getContrastRatio, styled } from '@mui/material'; import { blend } from '../../utils/colors.js'; export const CardLabel = styled(Box, { shouldForwardProp: (prop) => prop !== 'type', -})<{ type?: 'active' | 'insurance' | 'insurance-icon' }>(({ theme, type }) => { +})<{ type?: 'active' }>(({ theme, type }) => { const backgroundColor = type === 'active' ? theme.palette.mode === 'light' @@ -19,35 +13,25 @@ export const CardLabel = styled(Box, { theme.palette.secondary.main, 0.8, ) - : type?.includes('insurance') + : theme.palette.mode === 'light' ? blend( theme.palette.background.paper, - theme.palette.success.main, - theme.palette.mode === 'light' ? 0.12 : 0.24, + theme.palette.common.black, + 0.12, ) - : theme.palette.mode === 'light' - ? blend( - theme.palette.background.paper, - theme.palette.common.black, - 0.12, - ) - : blend( - theme.palette.background.paper, - theme.palette.common.white, - 0.16, - ); + : blend( + theme.palette.background.paper, + theme.palette.common.white, + 0.16, + ); return { backgroundColor, borderRadius: theme.shape.borderRadius, - color: type?.includes('insurance') - ? lighten( - theme.palette.success.main, - theme.palette.mode === 'light' ? 0 : 0.24, - ) - : getContrastRatio(theme.palette.common.white, backgroundColor) >= 3 + color: + getContrastRatio(theme.palette.common.white, backgroundColor) >= 3 ? theme.palette.common.white : theme.palette.common.black, - padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0, + padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', diff --git a/packages/widget/src/components/Insurance/Insurance.tsx b/packages/widget/src/components/Insurance/Insurance.tsx deleted file mode 100644 index 5841b8f43..000000000 --- a/packages/widget/src/components/Insurance/Insurance.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { RouteExecutionStatus } from '../../stores/routes/types.js'; -import { InsuranceCard } from './InsuranceCard.js'; -import { InsuranceCollapsed } from './InsuranceCollapsed.js'; -import type { InsuranceProps } from './types.js'; - -export const Insurance: React.FC = ({ - status, - insurableRouteId, - onChange, - ...props -}) => { - return status === RouteExecutionStatus.Idle ? ( - - ) : ( - - ); -}; diff --git a/packages/widget/src/components/Insurance/InsuranceCard.tsx b/packages/widget/src/components/Insurance/InsuranceCard.tsx deleted file mode 100644 index 2a481b672..000000000 --- a/packages/widget/src/components/Insurance/InsuranceCard.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import { VerifiedUser } from '@mui/icons-material'; -import { Box, Collapse, Link, Typography } from '@mui/material'; -import type { ChangeEvent } from 'react'; -import { useState } from 'react'; -import { Trans, useTranslation } from 'react-i18next'; -import { InsuraceLogo } from '../../icons/InsuraceLogo.js'; -import { RouteExecutionStatus } from '../../stores/routes/types.js'; -import { Card } from '../Card/Card.js'; -import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'; -import { Switch } from '../Switch.js'; -import type { InsuranceCardProps } from './types.js'; - -export const InsuranceCard: React.FC = ({ - status, - feeAmountUsd, - insuredAmount, - insuredTokenSymbol, - insuranceCoverageId, - onChange, - ...props -}) => { - const { t } = useTranslation(); - const [enabled, setEnabled] = useState(false); - - const handleSwitch = (_: ChangeEvent, checked: boolean) => { - setEnabled(checked); - onChange?.(checked); - }; - - return ( - - - - - - {status === RouteExecutionStatus.Idle - ? t('main.tags.insurance') - : t('main.tags.insured')} - - - - - - - - - {t('format.currency', { - value: feeAmountUsd, - })} - - - - - - ]} - /> - - - - - {t('insurance.bridgeExploits')} - - - {t('insurance.slippageError')} - - - - - - {status === RouteExecutionStatus.Idle - ? t('button.learnMore') - : t('button.viewCoverage')} - - - - - - - ); -}; diff --git a/packages/widget/src/components/Insurance/InsuranceCollapsed.tsx b/packages/widget/src/components/Insurance/InsuranceCollapsed.tsx deleted file mode 100644 index bd050a272..000000000 --- a/packages/widget/src/components/Insurance/InsuranceCollapsed.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { Collapse } from '@mui/material'; -import { useRoutes } from '../../hooks/useRoutes.js'; -import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'; -import { RouteExecutionStatus } from '../../stores/routes/types.js'; -import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js'; -import { formatTokenAmount } from '../../utils/format.js'; -import { InsuranceCard } from './InsuranceCard.js'; -import type { InsuranceProps } from './types.js'; - -export const InsuranceCollapsed: React.FC = ({ - status, - insurableRouteId, - onChange, - ...props -}) => { - const setExecutableRoute = useSetExecutableRoute(); - const routeExecution = useRouteExecutionStore( - (state) => state.routes[insurableRouteId], - ); - const { routes } = useRoutes({ - insurableRoute: routeExecution?.route, - }); - - const insuredRoute = routes?.[0]; - - const toggleInsurance = (checked: boolean) => { - if (insuredRoute) { - if (checked) { - setExecutableRoute(insuredRoute, insurableRouteId); - } - onChange?.(checked ? insuredRoute.id : insurableRouteId); - } - }; - - if (!insuredRoute) { - return null; - } - - return ( - - - - ); -}; diff --git a/packages/widget/src/components/Insurance/types.ts b/packages/widget/src/components/Insurance/types.ts deleted file mode 100644 index 8a80757e2..000000000 --- a/packages/widget/src/components/Insurance/types.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type { CardProps } from '@mui/material'; -import type { RouteExecutionStatus } from '../../stores/routes/types.js'; - -export interface InsuredAmount { - insuredAmount: string; - insuredTokenSymbol: string; -} - -interface Insurance extends InsuredAmount { - feeAmountUsd: string; - insuranceCoverageId?: string; - status?: RouteExecutionStatus; -} - -export interface InsuranceProps extends Insurance, Omit { - insurableRouteId: string; - onChange?: (routeId: string) => void; -} - -export interface InsuranceCardProps - extends Insurance, - Omit { - onChange?: (checked: boolean) => void; -} diff --git a/packages/widget/src/components/RouteCard/RouteCard.tsx b/packages/widget/src/components/RouteCard/RouteCard.tsx index 601462b29..35da23ec1 100644 --- a/packages/widget/src/components/RouteCard/RouteCard.tsx +++ b/packages/widget/src/components/RouteCard/RouteCard.tsx @@ -1,17 +1,14 @@ import type { TokenAmount } from '@lifi/sdk'; -import { ExpandLess, ExpandMore, VerifiedUser } from '@mui/icons-material'; -import type { TooltipProps } from '@mui/material'; -import { Box, Collapse, Tooltip, Typography } from '@mui/material'; +import { ExpandLess, ExpandMore } from '@mui/icons-material'; +import { Box, Collapse } from '@mui/material'; import type { MouseEventHandler } from 'react'; import { useState } from 'react'; -import { Trans, useTranslation } from 'react-i18next'; +import { useTranslation } from 'react-i18next'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; -import { formatTokenAmount } from '../../utils/format.js'; import type { CardProps } from '../Card/Card.js'; import { Card } from '../Card/Card.js'; import { CardIconButton } from '../Card/CardIconButton.js'; import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'; -import type { InsuredAmount } from '../Insurance/types.js'; import { StepActions } from '../StepActions/StepActions.js'; import { Token } from '../Token/Token.js'; import { TokenContainer } from './RouteCard.style.js'; @@ -37,8 +34,6 @@ export const RouteCard: React.FC< setCardExpanded((expanded) => !expanded); }; - const insurable = route.insurance?.state === 'INSURABLE'; - const token: TokenAmount = subvariant === 'custom' ? { ...route.fromToken, amount: BigInt(route.fromAmount) } @@ -50,7 +45,7 @@ export const RouteCard: React.FC< const cardContent = ( - {subvariant !== 'refuel' && (insurable || route.tags?.length) ? ( + {subvariant !== 'refuel' && route.tags?.length ? ( {tags?.length ? ( @@ -59,22 +54,6 @@ export const RouteCard: React.FC< ) : null} - {insurable ? ( - - - - - {t(`main.tags.insurable`)} - - - - ) : null} ) : null} @@ -114,45 +93,3 @@ export const RouteCard: React.FC< ); }; - -const InsuranceTooltip: React.FC< - InsuredAmount & Pick -> = ({ insuredAmount, insuredTokenSymbol, children }) => { - const { t } = useTranslation(); - return ( - - - ]} - /> - - - - {t('insurance.bridgeExploits')} - - - {t('insurance.slippageError')} - - - - } - placement="top" - enterDelay={400} - arrow - > - {children} - - ); -}; diff --git a/packages/widget/src/hooks/useRoutes.ts b/packages/widget/src/hooks/useRoutes.ts index 0fdcd2b77..c1e20ea5c 100644 --- a/packages/widget/src/hooks/useRoutes.ts +++ b/packages/widget/src/hooks/useRoutes.ts @@ -19,12 +19,8 @@ import { useWidgetEvents } from './useWidgetEvents.js'; const refetchTime = 60_000; -interface RoutesProps { - insurableRoute?: Route; -} - -export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => { - const { subvariant, sdkConfig, insurance, contractTool, bridges, exchanges } = +export const useRoutes = () => { + const { subvariant, sdkConfig, contractTool, bridges, exchanges } = useWidgetConfig(); const queryClient = useQueryClient(); const emitter = useWidgetEvents(); @@ -135,8 +131,6 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => { sdkConfig?.routeOptions?.allowSwitchChain, enabledRefuel && enabledAutoRefuel, gasRecommendationFromAmount, - insurance, - insurableRoute?.id, ] as const; const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = @@ -165,8 +159,6 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => { allowSwitchChain, enabledRefuel, gasRecommendationFromAmount, - insurance, - insurableRouteId, ], signal, }) => { @@ -176,29 +168,9 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => { ).toString(); const formattedSlippage = parseFloat(slippage) / 100; - const allowBridges = swapOnly - ? [] - : insurableRoute - ? insurableRoute.steps.flatMap((step) => - step.includedSteps.reduce((toolKeys, includedStep) => { - if (includedStep.type === 'cross') { - toolKeys.push(includedStep.toolDetails.key); - } - return toolKeys; - }, [] as string[]), - ) - : allowedBridges; + const allowBridges = swapOnly ? [] : allowedBridges; - const allowExchanges = insurableRoute - ? insurableRoute.steps.flatMap((step) => - step.includedSteps.reduce((toolKeys, includedStep) => { - if (includedStep.type === 'swap') { - toolKeys.push(includedStep.toolDetails.key); - } - return toolKeys; - }, [] as string[]), - ) - : allowedExchanges; + const allowExchanges = allowedExchanges; if (subvariant === 'custom' && contractCalls && toTokenAmount) { const contractCallQuote = await getContractCallsQuote( @@ -299,7 +271,6 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => { : undefined, } : undefined, - insurance: insurance ? Boolean(insurableRoute) : undefined, order: routePriority, slippage: formattedSlippage, }, diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json index f681e9ee0..6317f0280 100644 --- a/packages/widget/src/i18n/en.json +++ b/packages/widget/src/i18n/en.json @@ -251,10 +251,7 @@ "swapStepDetails": "Swap on {{chain}} via {{tool}}", "tags": { "cheapest": "Best Return", - "fastest": "Fastest", - "insurable": "Insurable", - "insurance": "Insurance", - "insured": "Insured" + "fastest": "Fastest" }, "to": "To", "tokenOnChain": "{{tokenSymbol}} on {{chainName}}", @@ -262,12 +259,6 @@ "tokenSearch": "Search by token name or address", "valueLoss": "Value loss" }, - "insurance": { - "bridgeExploits": "Bridge malfunctions, hacks or exploits", - "insure": "Insure <0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} in transit.", - "insured": "You've insured <0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} in transit:", - "slippageError": "Error in slippage for tokens received" - }, "settings": { "theme": "Theme", "enabledBridges": "Bridges", diff --git a/packages/widget/src/icons/InsuraceLogo.tsx b/packages/widget/src/icons/InsuraceLogo.tsx deleted file mode 100644 index 1fbe4351d..000000000 --- a/packages/widget/src/icons/InsuraceLogo.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useTheme } from '@mui/material'; -import type { SVGProps } from 'react'; - -export const InsuraceLogo = (props: SVGProps) => { - const theme = useTheme(); - const insurColor = - theme.palette.mode === 'light' ? '#1C4332' : theme.palette.common.white; - return ( - - - - - - - - - ); -}; diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx index 7d96c2824..4a990c67b 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx @@ -7,7 +7,6 @@ import { useLocation } from 'react-router-dom'; import { Card } from '../../components/Card/Card.js'; import { CardTitle } from '../../components/Card/CardTitle.js'; import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'; -import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; import { useHeader } from '../../hooks/useHeader.js'; @@ -18,7 +17,6 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'; import { getSourceTxHash } from '../../stores/routes/utils.js'; import { buildRouteFromTxHistory } from '../../utils/converters.js'; -import { formatTokenAmount } from '../../utils/format.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { ContactSupportButton } from './ContactSupportButton.js'; import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'; @@ -71,8 +69,6 @@ export const TransactionDetailsPage: React.FC = () => { const sourceTxHash = getSourceTxHash(routeExecution?.route); - const insuranceCoverageId = sourceTxHash ?? routeExecution?.route.fromAddress; - let supportId = sourceTxHash ?? routeExecution?.route.id ?? ''; if (process.env.NODE_ENV === 'development') { @@ -113,20 +109,6 @@ export const TransactionDetailsPage: React.FC = () => { {contractSecondaryComponent} ) : null} - {routeExecution?.route?.insurance?.state === 'INSURED' ? ( - - ) : null} = ({ @@ -30,25 +28,3 @@ export const StartTransactionButton: React.FC = ({ /> ); }; - -export const StartInsurableTransactionButton: React.FC< - StartTransactionButtonProps -> = ({ onClick, text, route, loading, disabled, insurableRouteId }) => { - const routeExecution = useRouteExecutionStore( - (state) => state.routes[insurableRouteId], - ); - const { isFetching } = useRoutes({ - insurableRoute: routeExecution?.route, - }); - - return ( - - ); -}; diff --git a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx index 8377f2605..111afdcf9 100644 --- a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx +++ b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx @@ -1,13 +1,12 @@ import type { ExchangeRateUpdateParams } from '@lifi/sdk'; import { Delete } from '@mui/icons-material'; import { Box, Button, Tooltip } from '@mui/material'; -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation } from 'react-router-dom'; import type { BottomSheetBase } from '../../components/BottomSheet/types.js'; import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'; import { GasMessage } from '../../components/GasMessage/GasMessage.js'; -import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; import { useHeader } from '../../hooks/useHeader.js'; @@ -18,13 +17,9 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { RouteExecutionStatus } from '../../stores/routes/types.js'; import { WidgetEvent } from '../../types/events.js'; -import { formatTokenAmount } from '../../utils/format.js'; import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'; import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'; -import { - StartInsurableTransactionButton, - StartTransactionButton, -} from './StartTransactionButton.js'; +import { StartTransactionButton } from './StartTransactionButton.js'; import { StatusBottomSheet } from './StatusBottomSheet.js'; import { TokenValueBottomSheet, @@ -37,11 +32,8 @@ export const TransactionPage: React.FC = () => { const { setFieldValue } = useFieldActions(); const emitter = useWidgetEvents(); const { navigateBack } = useNavigateBack(); - const { subvariant, insurance, contractSecondaryComponent } = - useWidgetConfig(); + const { subvariant, contractSecondaryComponent } = useWidgetConfig(); const { state }: any = useLocation(); - const stateRouteId = state?.routeId; - const [routeId, setRouteId] = useState(stateRouteId); const tokenValueBottomSheetRef = useRef(null); const exchangeRateBottomSheetRef = useRef(null); @@ -55,7 +47,7 @@ export const TransactionPage: React.FC = () => { const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution({ - routeId: routeId, + routeId: state?.routeId, onAcceptExchangeRateUpdate, }); @@ -150,24 +142,6 @@ export const TransactionPage: React.FC = () => { } }; - const insuredRoute = route.insurance?.state === 'INSURED'; - const insurableRoute = - insurance && - subvariant !== 'refuel' && - status === RouteExecutionStatus.Idle && - route.insurance?.state === 'INSURABLE'; - - const insuranceAvailable = insuredRoute || insurableRoute; - - const StartButton = insurableRoute - ? StartInsurableTransactionButton - : StartTransactionButton; - - const getInsuranceCoverageId = () => - route.steps[0].execution?.process - .filter((process) => process.type !== 'TOKEN_ALLOWANCE') - .find((process) => process.txHash)?.txHash ?? route.fromAddress; - return ( {getStepList(route, subvariant)} @@ -176,31 +150,15 @@ export const TransactionPage: React.FC = () => { {contractSecondaryComponent} ) : null} - {insuranceAvailable ? ( - - ) : null} {status === RouteExecutionStatus.Idle || status === RouteExecutionStatus.Failed ? ( <> - {status === RouteExecutionStatus.Failed ? ( persist( (set, get) => ({ routes: {}, - setExecutableRoute: (route: Route, insurableRouteId?: string) => { + setExecutableRoute: (route: Route) => { if (!get().routes[route.id]) { set((state: RouteExecutionState) => { const routes = { ...state.routes }; @@ -26,11 +26,10 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) => Object.keys(routes) .filter( (routeId) => - (routeId !== insurableRouteId && - hasEnumFlag( - routes[routeId]!.status, - RouteExecutionStatus.Idle, - )) || + hasEnumFlag( + routes[routeId]!.status, + RouteExecutionStatus.Idle, + ) || hasEnumFlag( routes[routeId]!.status, RouteExecutionStatus.Done, diff --git a/packages/widget/src/stores/routes/types.ts b/packages/widget/src/stores/routes/types.ts index 0be646aa2..62bb888b7 100644 --- a/packages/widget/src/stores/routes/types.ts +++ b/packages/widget/src/stores/routes/types.ts @@ -7,7 +7,7 @@ export interface RouteExecution { export interface RouteExecutionState { routes: Partial>; - setExecutableRoute: (route: Route, insurableRouteId?: string) => void; + setExecutableRoute: (route: Route) => void; updateRoute: (route: Route) => void; restartRoute: (routeId: string) => void; deleteRoute: (routeId: string) => void; diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts index 6cfe0ac7a..6452673b0 100644 --- a/packages/widget/src/types/widget.ts +++ b/packages/widget/src/types/widget.ts @@ -106,7 +106,7 @@ export interface WidgetSDKConfig | 'routeOptions' | 'widgetVersion' > { - routeOptions?: Omit; + routeOptions?: Omit; } export interface WidgetContractTool { @@ -149,7 +149,6 @@ export interface WidgetConfig { routePriority?: Order; slippage?: number; - insurance?: boolean; variant?: WidgetVariant; subvariant?: WidgetSubvariant;