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

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,
@@ -130,7 +128,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
       ...widgetTheme.navigation,
     },
     typography: {
-      fontFamily: 'Inter var, Inter, sans-serif',
+      fontFamily: 'Inter, sans-serif',
       ...widgetTheme.typography,
     },
     shape: {
@@ -152,10 +150,6 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
           root: {
             fontFamily: 'Inter, sans-serif',
             ...widgetTheme.typography,
-            '@supports (font-variation-settings: normal)': {
-              fontFamily: 'Inter var, sans-serif',
-              ...widgetTheme.typography,
-            },
           },
         },
       },
@@ -212,9 +206,9 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
                 ownerState.variant === 'elevation' && {
                   '&:hover': {
                     cursor: 'pointer',
-                    filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08))`,
+                    filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent))`,
                     ...theme.applyStyles('dark', {
-                      filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.08))`,
+                      filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 8%, transparent))`,
                     }),
                   },
                 }),
@@ -251,9 +245,9 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
             style: ({ theme }) => ({
               border: 'none',
               boxShadow: 'none',
-              filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04))`,
+              filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent))`,
               ...theme.applyStyles('dark', {
-                filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04))`,
+                filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent))`,
               }),
             }),
           },
@@ -293,7 +287,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
             fontSize: 16,
             fontWeight: 600,
             '&.Mui-disabled, &.Mui-disabled:hover': {
-              color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.56)`,
+              color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 56%, transparent)`,
               cursor: 'not-allowed',
               pointerEvents: 'auto',
             },
@@ -312,18 +306,18 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
             ...getStyleOverrides('MuiButton', 'root', widgetTheme, ownerState),
           }),
           text: ({ theme, ownerState }) => ({
-            backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 8%, transparent)`,
             color: theme.vars.palette.primary.main,
             '&:hover': {
-              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.12)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 12%, transparent)`,
             },
             ...theme.applyStyles('dark', {
-              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.42)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 42%, transparent)`,
               color: theme.palette.getContrastText(
                 alpha(theme.palette.primary.main, 0.08)
               ),
               '&:hover': {
-                backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.56)`,
+                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 56%, transparent)`,
               },
             }),
             ...getStyleOverrides('MuiButton', 'text', widgetTheme, ownerState),
@@ -448,22 +442,22 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
               ownerState
             )
             return {
-              backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
               ...theme.applyStyles('dark', {
-                backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
               }),
               borderRadius: theme.vars.shape.borderRadius,
               ...rootStyleOverrides,
               [`.${tabsClasses.indicator}`]: {
                 backgroundColor: theme.vars.palette.background.paper,
                 ...theme.applyStyles('dark', {
-                  backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
+                  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
                 }),
                 borderRadius:
                   theme.shape.borderRadius > 0
                     ? `calc(${theme.vars.shape.borderRadius} - 4px)`
                     : theme.vars.shape.borderRadius,
-                boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+                boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
                 ...rootStyleOverrides?.[`.${tabsClasses.indicator}`],
               },
             }

package/src/themes/types.ts

@@ -12,12 +12,6 @@ import type { NavigationProps } from '../types/widget.js'
 
 // https://mui.com/customization/palette/
 declare module '@mui/material/styles' {
-  interface TypographyVariants {
-    '@supports (font-variation-settings: normal)': React.CSSProperties
-  }
-  interface TypographyVariantsOptions {
-    '@supports (font-variation-settings: normal)'?: React.CSSProperties
-  }
   interface Shape {
     borderRadius: number
     borderRadiusSecondary: number
@@ -86,9 +80,3 @@ declare module '@mui/material/Paper' {
     filled: true
   }
 }
-
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides {
-    '@supports (font-variation-settings: normal)': true
-  }
-}

package/src/themes/watermelonLight.ts

@@ -52,7 +52,7 @@ export const watermelonLightTheme: WidgetTheme = {
         root: ({ theme }) => ({
           [`.${tabsClasses.indicator}`]: {
             backgroundColor: '#ffffff',
-            filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08))`,
+            filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent))`,
             borderRadius: '16px',
           },
         }),

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