@lifi/widget 4.0.0-beta.14 → 4.0.0-beta.18

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -1,5 +1,5 @@
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import DeleteOutline from '@mui/icons-material/DeleteOutlined'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import TurnedIn from '@mui/icons-material/TurnedIn'
 import { Button, ListItemAvatar, ListItemText } from '@mui/material'

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -1,5 +1,5 @@
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import DeleteOutline from '@mui/icons-material/DeleteOutlined'
 import History from '@mui/icons-material/History'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import TurnedInNot from '@mui/icons-material/TurnedInNot'

package/src/pages/TransactionDetailsPage/StepActionRow.tsx

@@ -10,8 +10,9 @@ export const StepActionRow: React.FC<{
   step: LiFiStepExtended
   action: ExecutionAction
   href: string
-}> = ({ step, action, href }) => {
-  const { title } = useActionMessage(step, action)
+  defaultLabelsOnly?: boolean
+}> = ({ step, action, href, defaultLabelsOnly }) => {
+  const { title } = useActionMessage(step, action, defaultLabelsOnly)
   const isFailed = action?.status === 'FAILED'
   return (
     <ActionRow

package/src/pages/TransactionDetailsPage/StepActionsList.tsx

@@ -46,20 +46,27 @@ export const StepActionsList: React.FC<StepActionsListProps> = ({
     return null
   }
 
+  const lastStepIndex = stepRows.length - 1
+
   return (
     <TransactionList>
-      {stepRows.map(({ step, rows }) => (
-        <TransactionList key={step.id}>
-          {rows.map(({ action, href }, index) => (
-            <StepActionRow
-              key={index}
-              step={step}
-              action={action!}
-              href={href!}
-            />
-          ))}
-        </TransactionList>
-      ))}
+      {stepRows.map(({ step, rows }, stepIndex) => {
+        const lastRowIndex = rows.length - 1
+        const isLastStep = stepIndex === lastStepIndex
+        return (
+          <TransactionList key={step.id}>
+            {rows.map(({ action, href }, rowIndex) => (
+              <StepActionRow
+                key={rowIndex}
+                step={step}
+                action={action!}
+                href={href!}
+                defaultLabelsOnly={!(isLastStep && rowIndex === lastRowIndex)}
+              />
+            ))}
+          </TransactionList>
+        )
+      })}
       {toAddress ? (
         <SentToWalletRow toAddress={toAddress} toChainId={route.toChainId} />
       ) : null}

package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -112,7 +112,7 @@ const ExchangeRateBottomSheetContent: React.FC<
       }}
     >
       <CenterContainer>
-        <IconCircle status="warning" mb={1}>
+        <IconCircle status="warning" sx={{ mb: 1 }}>
           <WarningRounded color="warning" />
         </IconCircle>
         <Typography

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -219,7 +219,7 @@ const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({
     >
       {!showContractComponent ? (
         <CenterContainer>
-          <IconCircle status={status} mb={1}>
+          <IconCircle status={status} sx={{ mb: 1 }}>
             {status === RouteExecutionStatus.Idle ? (
               <InfoRounded color="primary" />
             ) : null}

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,8 +1,14 @@
 import type { Route } from '@lifi/sdk'
 import WarningRounded from '@mui/icons-material/WarningRounded'
-import { Box, Button, Typography } from '@mui/material'
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  Typography,
+} from '@mui/material'
 import type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'
-import { forwardRef, useRef } from 'react'
+import { forwardRef, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
@@ -44,6 +50,7 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
   onCancel,
   onContinue,
 }) => {
+  const [accepted, setAccepted] = useState(false)
   const { t } = useTranslation()
   const ref = useRef<HTMLElement>(null)
   useSetContentHeight(ref)
@@ -59,7 +66,7 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
       }}
     >
       <CenterContainer>
-        <IconCircle status="warning" mb={1}>
+        <IconCircle status="warning" sx={{ mb: 1 }}>
           <WarningRounded color="warning" />
         </IconCircle>
         <Typography
@@ -173,10 +180,20 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
           %
         </Typography>
       </Box>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={accepted}
+            onChange={(_, checked) => setAccepted(checked)}
+          />
+        }
+        label={t('warning.checkbox.highValueLoss')}
+        sx={{ mt: 1 }}
+      />
       <Box
         sx={{
           display: 'flex',
-          mt: 3,
+          mt: 1,
         }}
       >
         <Button variant="text" onClick={onCancel} fullWidth>
@@ -188,7 +205,12 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
             p: 1,
           }}
         />
-        <Button variant="contained" onClick={onContinue} fullWidth>
+        <Button
+          variant="contained"
+          onClick={onContinue}
+          disabled={!accepted}
+          fullWidth
+        >
           {t('button.continue')}
         </Button>
       </Box>

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -2,7 +2,7 @@ import type { ExchangeRateUpdateParams } from '@lifi/sdk'
 import Delete from '@mui/icons-material/Delete'
 import { Box, Button, Tooltip } from '@mui/material'
 import { useLocation, useNavigate } from '@tanstack/react-router'
-import { type JSX, useEffect, useMemo, useRef, useState } from 'react'
+import { type JSX, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
@@ -106,13 +106,6 @@ export const TransactionPage = (): JSX.Element | null => {
 
   useHeader(getHeaderTitle(), headerAction)
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to emit event only when the page is mounted
-  useEffect(() => {
-    if (status === RouteExecutionStatus.Idle) {
-      emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route)
-    }
-  }, [])
-
   if (!route) {
     return null
   }
@@ -221,7 +214,7 @@ export const TransactionPage = (): JSX.Element | null => {
       {status === RouteExecutionStatus.Idle ||
       status === RouteExecutionStatus.Failed ? (
         <>
-          <WarningMessages mt={2} route={route} allowInteraction />
+          <WarningMessages sx={{ mt: 2 }} route={route} allowInteraction />
           <Box
             sx={{
               mt: 2,

package/src/providers/WalletProvider/useExternalWalletProvider.ts

@@ -4,6 +4,7 @@ import {
   useEthereumContext,
   useSolanaContext,
   useSuiContext,
+  useTronContext,
 } from '@lifi/widget-provider'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
@@ -19,6 +20,7 @@ const internalChainTypes = [
   ChainType.SVM,
   ChainType.UTXO,
   ChainType.MVM,
+  ChainType.TVM,
 ]
 
 export function useExternalWalletProvider(): ExternalWalletProvider {
@@ -27,6 +29,7 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
   const { isExternalContext: hasExternalSolanaContext } = useSolanaContext()
   const { isExternalContext: hasExternalBitcoinContext } = useBitcoinContext()
   const { isExternalContext: hasExternalSuiContext } = useSuiContext()
+  const { isExternalContext: hasExternalTronContext } = useTronContext()
   const data = useMemo(() => {
     const providers: ChainType[] = []
     if (hasExternalEthereumContext) {
@@ -41,11 +44,15 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
     if (hasExternalSuiContext) {
       providers.push(ChainType.MVM)
     }
+    if (hasExternalTronContext) {
+      providers.push(ChainType.TVM)
+    }
     const hasExternalProvider =
       hasExternalEthereumContext ||
       hasExternalSolanaContext ||
       hasExternalBitcoinContext ||
-      hasExternalSuiContext
+      hasExternalSuiContext ||
+      hasExternalTronContext
 
     const useExternalWalletProvidersOnly =
       hasExternalProvider &&
@@ -63,6 +70,7 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
     hasExternalSolanaContext,
     hasExternalBitcoinContext,
     hasExternalSuiContext,
+    hasExternalTronContext,
     walletConfig?.usePartialWalletManagement,
     walletConfig?.forceInternalWalletManagement,
   ])

package/src/stores/settings/createSettingsStore.ts

@@ -177,15 +177,7 @@ export const createSettingsStore = (
           })
           return state
         },
-        migrate: (persistedState: any, version) => {
-          if (version === 1) {
-            persistedState.slippage = defaultConfigurableSettings.slippage
-          }
-          if (version <= 3) {
-            persistedState.routePriority = 'CHEAPEST'
-          }
-          return persistedState as SettingsState
-        },
+        migrate: () => ({}),
         onRehydrateStorage: () => {
           const initializeLanguageSettings = async (
             state: SettingsState,

package/src/themes/createTheme.ts

@@ -38,10 +38,8 @@ const enterKeyframe = keyframes`
 `
 
 export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
-  const configuredPaletteLight =
-    widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette
-  const configuredPaletteDark =
-    widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette
+  const configuredPaletteLight = widgetTheme.colorSchemes?.light?.palette
+  const configuredPaletteDark = widgetTheme.colorSchemes?.dark?.palette
 
   const primaryMainColorLight =
     (configuredPaletteLight?.primary as SimplePaletteColorOptions)?.main ??
@@ -90,7 +88,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
         palette: {
           ...palette,
           ...paletteLight,
-          ...(widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette),
+          ...widgetTheme.colorSchemes?.light?.palette,
           primary: {
             main: primaryMainColorLight,
             light: primaryLightenColorLight,
@@ -107,7 +105,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
         palette: {
           ...palette,
           ...paletteDark,
-          ...(widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette),
+          ...widgetTheme.colorSchemes?.dark?.palette,
           primary: {
             main: primaryMainColorDark,
             light: primaryLightenColorDark,

package/src/types/events.ts

@@ -12,10 +12,6 @@ export enum WidgetEvent {
   FormFieldChanged = 'formFieldChanged',
   LowAddressActivityConfirmed = 'lowAddressActivityConfirmed',
   PageEntered = 'pageEntered',
-  /**
-   * @deprecated Use `PageEntered` event instead.
-   */
-  ReviewTransactionPageEntered = 'reviewTransactionPageEntered',
   RouteExecutionCompleted = 'routeExecutionCompleted',
   RouteExecutionFailed = 'routeExecutionFailed',
   RouteExecutionStarted = 'routeExecutionStarted',
@@ -37,7 +33,6 @@ export type WidgetEvents = {
   formFieldChanged: FormFieldChanged
   lowAddressActivityConfirmed: LowAddressActivityConfirmed
   pageEntered: NavigationRouteType
-  reviewTransactionPageEntered?: Route
   routeExecutionCompleted: Route
   routeExecutionFailed: RouteExecutionUpdate
   routeExecutionStarted: Route

package/src/types/widget.ts

@@ -81,10 +81,6 @@ export type WidgetThemeComponents = Partial<
 >
 
 export type WidgetTheme = {
-  /**
-   * @deprecated Use `colorScheme` instead.
-   */
-  palette?: PaletteOptions
   colorSchemes?: {
     light?: {
       palette: PaletteOptions
@@ -174,6 +170,7 @@ export interface WidgetSDKConfig
     | 'apiKey'
     | 'disableVersionCheck'
     | 'integrator'
+    | 'providers'
     | 'routeOptions'
     | 'widgetVersion'
   > {

package/dist/esm/stores/routes/types.js

@@ -1,14 +0,0 @@
-//#region src/stores/routes/types.ts
-let RouteExecutionStatus = /* @__PURE__ */ function(RouteExecutionStatus) {
-	RouteExecutionStatus[RouteExecutionStatus["Idle"] = 1] = "Idle";
-	RouteExecutionStatus[RouteExecutionStatus["Pending"] = 2] = "Pending";
-	RouteExecutionStatus[RouteExecutionStatus["Done"] = 4] = "Done";
-	RouteExecutionStatus[RouteExecutionStatus["Failed"] = 8] = "Failed";
-	RouteExecutionStatus[RouteExecutionStatus["Partial"] = 16] = "Partial";
-	RouteExecutionStatus[RouteExecutionStatus["Refunded"] = 32] = "Refunded";
-	return RouteExecutionStatus;
-}({});
-//#endregion
-export { RouteExecutionStatus };
-
-//# sourceMappingURL=types.js.map

package/dist/esm/stores/routes/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/stores/routes/types.ts"],"sourcesContent":["import type { Route, RouteExtended } from '@lifi/sdk'\n\nexport interface RouteExecution {\n  route: RouteExtended\n  status: RouteExecutionStatus\n}\n\nexport interface RouteExecutionState {\n  routes: Partial<Record<string, RouteExecution>>\n  setExecutableRoute: (route: Route, observableRouteIds?: string[]) => void\n  updateRoute: (route: Route) => void\n  deleteRoute: (routeId: string) => void\n  deleteRoutes: (\n    type: 'completed' | 'active' | 'failed',\n    accountAddresses?: string[]\n  ) => void\n}\n\nexport enum RouteExecutionStatus {\n  Idle = 1 << 0,\n  Pending = 1 << 1,\n  Done = 1 << 2,\n  Failed = 1 << 3,\n  Partial = 1 << 4,\n  Refunded = 1 << 5,\n}\n"],"mappings":";AAkBA,IAAY,uBAAL,yBAAA,sBAAA;AACL,sBAAA,qBAAA,UAAA,KAAA;AACA,sBAAA,qBAAA,aAAA,KAAA;AACA,sBAAA,qBAAA,UAAA,KAAA;AACA,sBAAA,qBAAA,YAAA,KAAA;AACA,sBAAA,qBAAA,aAAA,MAAA;AACA,sBAAA,qBAAA,cAAA,MAAA;;KACD"}