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

package/src/hooks/useExplorer.ts

@@ -6,6 +6,13 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 
 const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '')
 
+const explorerPathOverrides: Partial<
+  Record<ChainType | ChainId, { txPath: string; addressPath: string }>
+> = {
+  [ChainId.SUI]: { txPath: 'txblock', addressPath: 'coin' },
+  [ChainType.TVM]: { txPath: '#/transaction', addressPath: '#/address' },
+}
+
 type TransactionLinkProps = { chain?: Chain | number } & (
   | {
       txHash: string
@@ -35,11 +42,15 @@ export const useExplorer = (): {
           resolvedChain.metamask.blockExplorerUrls[0])
         : explorerUrls?.internal?.[0]) || internalExplorerUrl
 
-    const url = typeof explorerUrl === 'string' ? explorerUrl : explorerUrl.url
+    const baseUrl =
+      typeof explorerUrl === 'string' ? explorerUrl : explorerUrl.url
+
+    const overrides =
+      explorerPathOverrides[resolvedChain?.id as ChainId] ??
+      explorerPathOverrides[resolvedChain?.chainType as ChainType]
 
-    const defaultTxPath = resolvedChain?.id === ChainId.SUI ? 'txblock' : 'tx'
-    const defaultAddressPath =
-      resolvedChain?.id === ChainId.SUI ? 'coin' : 'address'
+    const defaultTxPath = overrides?.txPath ?? 'tx'
+    const defaultAddressPath = overrides?.addressPath ?? 'address'
     const txPath =
       typeof explorerUrl === 'string'
         ? defaultTxPath
@@ -50,7 +61,7 @@ export const useExplorer = (): {
         : explorerUrl.addressPath || defaultAddressPath
 
     return {
-      url: sanitiseBaseUrl(url),
+      url: sanitiseBaseUrl(baseUrl),
       txPath,
       addressPath,
       resolvedChain,

package/src/hooks/useTokens.ts

@@ -48,6 +48,7 @@ export const useTokens = (
         ChainType.SVM,
         ChainType.UTXO,
         ChainType.MVM,
+        ChainType.TVM,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(
@@ -90,6 +91,7 @@ export const useTokens = (
         ChainType.SVM,
         ChainType.UTXO,
         ChainType.MVM,
+        ChainType.TVM,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(

package/src/pages/ActivitiesPage/ActivitiesPageMenuButton.tsx

@@ -1,5 +1,5 @@
 import { useAccount } from '@lifi/wallet-management'
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutlined'
 import { Button } from '@mui/material'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/MainPage/MainPage.tsx

@@ -49,14 +49,14 @@ export const MainPage: React.FC = () => {
       {custom ? (
         <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>
       ) : null}
-      <SelectChainAndToken mb={2} />
+      <SelectChainAndToken sx={marginSx} />
       {!custom || subvariantOptions?.custom === 'deposit' ? (
         <AmountInput formType="from" sx={marginSx} />
       ) : null}
       {!wideVariant ? <Routes sx={marginSx} /> : null}
       <SendToWalletButton sx={marginSx} />
-      {showGasRefuelMessage ? <GasRefuelMessage mb={2} /> : null}
-      <MainWarningMessages mb={2} />
+      {showGasRefuelMessage ? <GasRefuelMessage sx={marginSx} /> : null}
+      <MainWarningMessages sx={marginSx} />
       <Box
         sx={{
           display: 'flex',

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -69,7 +69,12 @@ export const RoutesPage = (): JSX.Element => {
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
   return (
-    <Stack className="long-list" direction="column" spacing={2} flex={1}>
+    <Stack
+      className="long-list"
+      direction="column"
+      spacing={2}
+      sx={{ flex: 1 }}
+    >
       {routeNotFound ? (
         <RouteNotFoundCard />
       ) : isLoading && !routes?.length ? (

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/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"}