@lifi/widget 3.24.0-alpha.0 → 3.24.1

package/dist/esm/index.d.ts

@@ -21,10 +21,12 @@ export { watermelonLightTheme } from './themes/watermelonLight.js';
 export { windows95Theme } from './themes/windows95.js';
 export * from './themes/palettes.js';
 export * from './themes/types.js';
+export { createTheme } from './themes/createTheme.js';
 export * from './types/events.js';
 export type { TokenAmount } from './types/token.js';
 export * from './types/widget.js';
 export { getPriceImpact } from './utils/getPriceImpact.js';
+export * from './utils/format.js';
 export { percentFormatter } from './utils/percentFormatter.js';
 export { compactNumberFormatter } from './utils/compactNumberFormatter.js';
 export { currencyExtendedFormatter } from './utils/currencyExtendedFormatter.js';

package/dist/esm/index.js

@@ -19,9 +19,11 @@ export { watermelonLightTheme } from './themes/watermelonLight.js';
 export { windows95Theme } from './themes/windows95.js';
 export * from './themes/palettes.js';
 export * from './themes/types.js';
+export { createTheme } from './themes/createTheme.js';
 export * from './types/events.js';
 export * from './types/widget.js';
 export { getPriceImpact } from './utils/getPriceImpact.js';
+export * from './utils/format.js';
 export { percentFormatter } from './utils/percentFormatter.js';
 export { compactNumberFormatter } from './utils/compactNumberFormatter.js';
 export { currencyExtendedFormatter } from './utils/currencyExtendedFormatter.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACvD,OAAO,EAAE,GAAG,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAE5C,cAAc,6CAA6C,CAAA;AAC3D,cAAc,2CAA2C,CAAA;AACzD,cAAc,+CAA+C,CAAA;AAC7D,cAAc,6CAA6C,CAAA;AAC3D,cAAc,yCAAyC,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,qBAAqB,CAAA;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC1E,cAAc,wBAAwB,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAChE,cAAc,6BAA6B,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,sCAAsC,CAAA;AAChF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACvD,OAAO,EAAE,GAAG,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAE5C,cAAc,6CAA6C,CAAA;AAC3D,cAAc,2CAA2C,CAAA;AACzD,cAAc,+CAA+C,CAAA;AAC7D,cAAc,6CAA6C,CAAA;AAC3D,cAAc,yCAAyC,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,qBAAqB,CAAA;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC1E,cAAc,wBAAwB,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAChE,cAAc,6BAA6B,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACrD,cAAc,mBAAmB,CAAA;AAEjC,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,sCAAsC,CAAA;AAChF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA"}

package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js

@@ -6,13 +6,15 @@ const getStatusColor = (status, theme) => {
             return {
                 color: theme.vars.palette.success.mainChannel,
                 alpha: 0.12,
-                darken: 0,
+                lightDarken: 0,
+                darkDarken: 0,
             };
         case RouteExecutionStatus.Failed:
             return {
                 color: theme.vars.palette.error.mainChannel,
                 alpha: 0.12,
-                darken: 0,
+                lightDarken: 0,
+                darkDarken: 0,
             };
         case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
         case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
@@ -20,13 +22,15 @@ const getStatusColor = (status, theme) => {
             return {
                 color: theme.vars.palette.warning.mainChannel,
                 alpha: 0.48,
-                darken: theme.palette.mode === 'light' ? 0.32 : 0,
+                lightDarken: 0.32,
+                darkDarken: 0,
             };
         default:
             return {
                 color: theme.vars.palette.primary.mainChannel,
                 alpha: 0.12,
-                darken: 0,
+                lightDarken: 0,
+                darkDarken: 0,
             };
     }
 };
@@ -38,9 +42,9 @@ export const CenterContainer = styled(Box)(() => ({
 export const IconCircle = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'status',
 })(({ theme, status }) => {
-    const { color, alpha: alphaValue, darken: darkenValue, } = getStatusColor(status, theme);
+    const statusConfig = getStatusColor(status, theme);
     return {
-        backgroundColor: `rgba(${color} / ${alphaValue})`,
+        backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,
         borderRadius: '50%',
         width: 72,
         height: 72,
@@ -48,10 +52,17 @@ export const IconCircle = styled(Box, {
         position: 'relative',
         placeItems: 'center',
         '& > svg': {
-            color: `color-mix(in srgb, rgb(${color}) ${(1 - darkenValue) * 100}%, black)`,
+            color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,
             width: 36,
             height: 36,
         },
+        ...theme.applyStyles('dark', {
+            '& > svg': {
+                color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,
+                width: 36,
+                height: 36,
+            },
+        }),
     };
 });
 //# sourceMappingURL=StatusBottomSheet.style.js.map

package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBottomSheet.style.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.style.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AAInE,MAAM,cAAc,GAAG,CAAC,MAAmB,EAAE,KAAY,EAAE,EAAE;IAC3D,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,oBAAoB,CAAC,IAAI;YAC5B,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW;gBAC7C,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,CAAC;aACV,CAAA;QACH,KAAK,oBAAoB,CAAC,MAAM;YAC9B,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW;gBAC3C,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,CAAC;aACV,CAAA;QACH,KAAK,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,OAAO,CAAC;QAC9D,KAAK,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,QAAQ,CAAC;QAC/D,KAAK,SAAS;YACZ,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW;gBAC7C,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aAClD,CAAA;QACH;YACE,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW;gBAC7C,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,CAAC;aACV,CAAA;IACL,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,EAAE;IACpC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ;CAC/C,CAAC,CAA0B,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IAChD,MAAM,EACJ,KAAK,EACL,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,WAAW,GACpB,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IACjC,OAAO;QACL,eAAe,EAAE,QAAQ,KAAK,MAAM,UAAU,GAAG;QACjD,YAAY,EAAE,KAAK;QACnB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE;YACT,KAAK,EAAE,0BAA0B,KAAK,KAAK,CAAC,CAAC,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW;YAC7E,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX;KACF,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"StatusBottomSheet.style.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.style.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AAInE,MAAM,cAAc,GAAG,CAAC,MAAmB,EAAE,KAAY,EAAE,EAAE;IAC3D,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,oBAAoB,CAAC,IAAI;YAC5B,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW;gBAC7C,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,CAAC;aACd,CAAA;QACH,KAAK,oBAAoB,CAAC,MAAM;YAC9B,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW;gBAC3C,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,CAAC;aACd,CAAA;QACH,KAAK,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,OAAO,CAAC;QAC9D,KAAK,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,QAAQ,CAAC;QAC/D,KAAK,SAAS;YACZ,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW;gBAC7C,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,IAAI;gBACjB,UAAU,EAAE,CAAC;aACd,CAAA;QACH;YACE,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW;gBAC7C,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,CAAC;aACd,CAAA;IACL,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,EAAE;IACpC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ;CAC/C,CAAC,CAA0B,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IAChD,MAAM,YAAY,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IAElD,OAAO;QACL,eAAe,EAAE,QAAQ,YAAY,CAAC,KAAK,MAAM,YAAY,CAAC,KAAK,GAAG;QACtE,YAAY,EAAE,KAAK;QACnB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE;YACT,KAAK,EAAE,0BAA0B,YAAY,CAAC,KAAK,KAAK,CAAC,CAAC,GAAG,YAAY,CAAC,WAAW,CAAC,GAAG,GAAG,WAAW;YACvG,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX;QACD,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;YAC3B,SAAS,EAAE;gBACT,KAAK,EAAE,0BAA0B,YAAY,CAAC,KAAK,KAAK,CAAC,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,GAAG,GAAG,WAAW;gBACtG,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,EAAE;aACX;SACF,CAAC;KACH,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isRelayerStep } from '@lifi/sdk';
+import { isGaslessStep } from '@lifi/sdk';
 import WarningRounded from '@mui/icons-material/WarningRounded';
 import { Box, Button, Typography } from '@mui/material';
 import { forwardRef, useRef } from 'react';
@@ -25,7 +25,7 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
     const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
     const toAmountUSD = Number.parseFloat(route.toAmountUSD);
-    const hasRelayerSupport = route.steps.every(isRelayerStep);
+    const hasGaslessSupport = route.steps.some(isGaslessStep);
     return (_jsxs(Box, { ref: ref, sx: {
             p: 3,
         }, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRounded, { color: "warning" }) }), _jsx(Typography, { sx: {
@@ -44,9 +44,9 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
                     display: 'flex',
                     justifyContent: 'space-between',
                     mt: 0.25,
-                }, children: [_jsx(Typography, { children: t('main.fees.network') }), _jsx(FeeBreakdownTooltip, { gasCosts: gasCosts, relayerSupport: hasRelayerSupport, children: _jsx(Typography, { sx: {
+                }, children: [_jsx(Typography, { children: t('main.fees.network') }), _jsx(FeeBreakdownTooltip, { gasCosts: gasCosts, relayerSupport: hasGaslessSupport, children: _jsx(Typography, { sx: {
                                 fontWeight: 600,
-                            }, children: hasRelayerSupport
+                            }, children: hasGaslessSupport
                                 ? t('main.fees.free')
                                 : t('format.currency', { value: gasCostUSD }) }) })] }), feeCostUSD ? (_jsxs(Box, { sx: {
                     display: 'flex',

package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenValueBottomSheet.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TokenValueBottomSheet.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"names":[],"mappings":"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"}

package/dist/esm/types/widget.d.ts

@@ -160,6 +160,8 @@ export type WidgetTokens = {
     featured?: StaticToken[];
     include?: Token[];
     popular?: StaticToken[];
+    from?: AllowDeny<BaseToken>;
+    to?: AllowDeny<BaseToken>;
 } & AllowDeny<BaseToken>;
 export type WidgetLanguages = {
     default?: LanguageKey;

package/dist/esm/utils/item.d.ts

@@ -1,2 +1,7 @@
-import type { AllowDeny } from '../types/widget.js';
-export declare const isItemAllowed: <T>(itemId: T, items?: AllowDeny<T>) => boolean;
+import type { BaseToken } from '@lifi/sdk';
+import type { FormType } from '../stores/form/types.js';
+import type { AllowDeny, WidgetTokens } from '../types/widget.js';
+type IncludesFn<T> = (list: T[], item: T) => boolean;
+export declare const isItemAllowed: <T>(item: T, items?: AllowDeny<T>, includes?: IncludesFn<T>) => boolean;
+export declare const isTokenAllowed: (token: BaseToken, configTokens: WidgetTokens | undefined, formType: FormType | undefined) => boolean;
+export {};

package/dist/esm/utils/item.js

@@ -1,7 +1,14 @@
-export const isItemAllowed = (itemId, items) => {
+export const isItemAllowed = (item, items, includes = (list, val) => list.includes(val)) => {
     if (items?.allow?.length) {
-        return items.allow.includes(itemId);
+        return includes(items.allow, item);
     }
-    return !items?.deny?.includes(itemId);
+    return !includes(items?.deny ?? [], item);
+};
+const tokenIncludes = (list, item) => list.some((t) => t.address === item.address && t.chainId === item.chainId);
+export const isTokenAllowed = (token, configTokens, formType) => {
+    return (isItemAllowed(token, configTokens, tokenIncludes) &&
+        (formType
+            ? isItemAllowed(token, configTokens?.[formType], tokenIncludes)
+            : true));
 };
 //# sourceMappingURL=item.js.map

package/dist/esm/utils/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/utils/item.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAI,MAAS,EAAE,KAAoB,EAAE,EAAE;IAClE,IAAI,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IACD,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;AACvC,CAAC,CAAA"}
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/utils/item.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,IAAO,EACP,KAAoB,EACpB,WAA0B,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAClD,EAAE;IACX,IAAI,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACzB,OAAO,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;IACpC,CAAC;IAED,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,CAAA;AAC3C,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,IAAiB,EAAE,IAAe,EAAE,EAAE,CAC3D,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC,CAAA;AAE5E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAgB,EAChB,YAAsC,EACtC,QAA8B,EAC9B,EAAE;IACF,OAAO,CACL,aAAa,CAAC,KAAK,EAAE,YAAY,EAAE,aAAa,CAAC;QACjD,CAAC,QAAQ;YACP,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;YAC/D,CAAC,CAAC,IAAI,CAAC,CACV,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.24.0-alpha.0",
+  "version": "3.24.1",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -30,31 +30,31 @@
     "lifi"
   ],
   "dependencies": {
-    "@bigmi/client": "^0.4.0-beta.2",
-    "@bigmi/core": "^0.4.0-beta.1",
+    "@bigmi/client": "^0.4.1",
+    "@bigmi/core": "^0.4.0",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "^3.8.0-alpha.1",
-    "@mui/icons-material": "^7.1.2",
-    "@mui/material": "^7.1.2",
-    "@mui/system": "^7.1.0",
+    "@emotion/styled": "^11.14.1",
+    "@lifi/sdk": "^3.7.10",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
+    "@mui/system": "^7.2.0",
     "@mysten/sui": "^1.34.0",
     "@solana/wallet-adapter-base": "^0.9.27",
     "@solana/wallet-adapter-coinbase": "^0.1.23",
     "@solana/web3.js": "^1.98.2",
-    "@tanstack/react-virtual": "^3.13.11",
-    "i18next": "^25.2.1",
+    "@tanstack/react-virtual": "^3.13.12",
+    "i18next": "^25.3.0",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
     "react-i18next": "^15.5.3",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.30.0",
-    "viem": "^2.31.4",
-    "zustand": "^5.0.5",
-    "@lifi/wallet-management": "^3.12.0-alpha.0"
+    "viem": "^2.31.6",
+    "zustand": "^5.0.6",
+    "@lifi/wallet-management": "^3.12.0"
   },
   "peerDependencies": {
-    "@bigmi/react": "^0.4.0-beta.2",
+    "@bigmi/react": ">=0.4.0",
     "@mysten/dapp-kit": ">=0.16.0",
     "@solana/wallet-adapter-react": ">=0.15.35",
     "@tanstack/react-query": ">=5.68.0",

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.24.0-alpha.0",
+  "version": "3.24.1",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./src/index.ts",
@@ -49,28 +49,28 @@
     "lifi"
   ],
   "dependencies": {
-    "@bigmi/client": "^0.4.0-beta.2",
-    "@bigmi/core": "^0.4.0-beta.1",
+    "@bigmi/client": "^0.4.1",
+    "@bigmi/core": "^0.4.0",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "^3.8.0-alpha.1",
+    "@emotion/styled": "^11.14.1",
+    "@lifi/sdk": "^3.7.10",
     "@lifi/wallet-management": "workspace:^",
-    "@mui/icons-material": "^7.1.2",
-    "@mui/material": "^7.1.2",
-    "@mui/system": "^7.1.0",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
+    "@mui/system": "^7.2.0",
     "@mysten/sui": "^1.34.0",
     "@solana/wallet-adapter-base": "^0.9.27",
     "@solana/wallet-adapter-coinbase": "^0.1.23",
     "@solana/web3.js": "^1.98.2",
-    "@tanstack/react-virtual": "^3.13.11",
-    "i18next": "^25.2.1",
+    "@tanstack/react-virtual": "^3.13.12",
+    "i18next": "^25.3.0",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
     "react-i18next": "^15.5.3",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.30.0",
-    "viem": "^2.31.4",
-    "zustand": "^5.0.5"
+    "viem": "^2.31.6",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "cpy-cli": "^5.0.0",
@@ -81,7 +81,7 @@
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "@bigmi/react": "^0.4.0-beta.2",
+    "@bigmi/react": ">=0.4.0",
     "@mysten/dapp-kit": ">=0.16.0",
     "@solana/wallet-adapter-react": ">=0.15.35",
     "@tanstack/react-query": ">=5.68.0",

package/src/components/Header/Header.style.ts

@@ -34,6 +34,7 @@ export const Container = styled(Box, {
     gap: theme.spacing(0.5),
     padding: theme.spacing(1.5, 3, 1.5, 3),
     overflow: 'auto',
+    borderRadius: theme.container?.borderRadius ?? 0,
     ...theme.header,
     ...(theme.header?.position === 'fixed'
       ? {

package/src/components/RouteCard/RouteCard.tsx

@@ -1,5 +1,5 @@
 import type { TokenAmount } from '@lifi/sdk'
-import { isRelayerStep } from '@lifi/sdk'
+import { isGaslessStep } from '@lifi/sdk'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
 import { Box, Collapse } from '@mui/material'
@@ -53,8 +53,8 @@ export const RouteCard: React.FC<
     (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'
   )
   const tags: string[] = mainTag ? [mainTag] : []
-  const hasRelayerSupport = route.steps.every(isRelayerStep)
-  if (hasRelayerSupport) {
+  const hasGaslessSupport = route.steps.some(isGaslessStep)
+  if (hasGaslessSupport) {
     tags.push('GASLESS')
   }
 

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -1,4 +1,4 @@
-import { isRelayerStep } from '@lifi/sdk'
+import { isGaslessStep } from '@lifi/sdk'
 import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
 import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
 import { Box, Tooltip, Typography } from '@mui/material'
@@ -22,7 +22,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
   )
   const { gasCosts, feeCosts, combinedFeesUSD } =
     getAccumulatedFeeCostsBreakdown(route)
-  const hasRelayerSupport = route.steps.every(isRelayerStep)
+  const hasGaslessSupport = route.steps.some(isGaslessStep)
   return (
     <Box
       sx={{
@@ -43,7 +43,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
         <FeeBreakdownTooltip
           gasCosts={gasCosts}
           feeCosts={feeCosts}
-          relayerSupport={hasRelayerSupport}
+          relayerSupport={hasGaslessSupport}
         >
           <Box
             sx={{
@@ -56,7 +56,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
               <LocalGasStationRounded fontSize="inherit" />
             </IconTypography>
             <Typography
-              data-value={hasRelayerSupport ? 0 : combinedFeesUSD}
+              data-value={hasGaslessSupport ? 0 : combinedFeesUSD}
               sx={{
                 fontSize: 14,
                 color: 'text.primary',
@@ -64,7 +64,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
                 lineHeight: 1,
               }}
             >
-              {hasRelayerSupport
+              {hasGaslessSupport
                 ? t('main.fees.free')
                 : t('format.currency', {
                     value: combinedFeesUSD,

package/src/components/Step/CircularProgress.style.tsx

@@ -24,29 +24,37 @@ const getStatusColor = (
     case 'FAILED':
       return `rgba(${theme.vars.palette.error.mainChannel} / 0.12)`
     default:
-      return theme.vars.palette.grey[theme.palette.mode === 'light' ? 300 : 800]
+      return null
   }
 }
 
 export const CircularIcon = styled(Box, {
   shouldForwardProp: (prop: string) => !['status', 'substatus'].includes(prop),
 })<{ status?: ProcessStatus; substatus?: Substatus }>(
-  ({ theme, status, substatus }) => ({
-    backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
-      ? getStatusColor(theme, status, substatus)
-      : theme.vars.palette.background.paper,
-    borderStyle: 'solid',
-    borderColor: getStatusColor(theme, status, substatus),
-    borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
-      ? 3
-      : 0,
-    display: 'grid',
-    position: 'relative',
-    placeItems: 'center',
-    width: 40,
-    height: 40,
-    borderRadius: '50%',
-  })
+  ({ theme, status, substatus }) => {
+    const statusColor = getStatusColor(theme, status, substatus)
+    const isSpecialStatus = ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(
+      status!
+    )
+
+    return {
+      backgroundColor: isSpecialStatus
+        ? statusColor!
+        : theme.vars.palette.background.paper,
+      borderStyle: 'solid',
+      borderColor: statusColor || theme.vars.palette.grey[300],
+      borderWidth: !isSpecialStatus ? 3 : 0,
+      display: 'grid',
+      position: 'relative',
+      placeItems: 'center',
+      width: 40,
+      height: 40,
+      borderRadius: '50%',
+      ...theme.applyStyles('dark', {
+        borderColor: statusColor || theme.vars.palette.grey[800],
+      }),
+    }
+  }
 )
 
 const circleAnimation = keyframes`

package/src/components/StepActions/StepActions.tsx

@@ -1,5 +1,5 @@
 import type { LiFiStep, StepExtended } from '@lifi/sdk'
-import { isRelayerStep } from '@lifi/sdk'
+import { isGaslessStep } from '@lifi/sdk'
 import ArrowForward from '@mui/icons-material/ArrowForward'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
@@ -162,7 +162,7 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
     ) : null
   }
 
-  const hasRelayerSupport = isRelayerStep(step)
+  const hasGaslessSupport = isGaslessStep(step)
 
   return (
     <Box
@@ -194,7 +194,7 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
                 <ProtocolStepDetailsLabel
                   step={step}
                   feeConfig={feeConfig}
-                  relayerSupport={hasRelayerSupport}
+                  relayerSupport={hasGaslessSupport}
                 />
               ) : (
                 <SwapStepDetailsLabel step={step} />

package/src/components/TokenList/TokenList.tsx

@@ -42,7 +42,7 @@ export const TokenList: FC<TokenListProps> = ({
     isBalanceLoading,
     featuredTokens,
     popularTokens,
-  } = useTokenBalances(selectedChainId)
+  } = useTokenBalances(selectedChainId, formType)
 
   let filteredTokens = (tokensWithBalance ?? chainTokens ?? []) as TokenAmount[]
   const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')
@@ -70,7 +70,12 @@ export const TokenList: FC<TokenListProps> = ({
     !!selectedChainId
 
   const { token: searchedToken, isLoading: isSearchedTokenLoading } =
-    useTokenSearch(selectedChainId, normalizedSearchFilter, tokenSearchEnabled)
+    useTokenSearch(
+      selectedChainId,
+      normalizedSearchFilter,
+      tokenSearchEnabled,
+      formType
+    )
 
   const isLoading =
     isTokensLoading ||

package/src/components/TransactionDetails.tsx

@@ -1,5 +1,5 @@
 import type { RouteExtended } from '@lifi/sdk'
-import { isRelayerStep } from '@lifi/sdk'
+import { isGaslessStep } from '@lifi/sdk'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
 import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
@@ -71,10 +71,10 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       ) ?? 0
   }
 
-  const hasRelayerSupport = route.steps.every(isRelayerStep)
+  const hasGaslessSupport = route.steps.some(isGaslessStep)
 
   const showIntegratorFeeCollectionDetails =
-    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasRelayerSupport
+    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport
 
   return (
     <Card selectionColor="secondary" {...props}>
@@ -100,7 +100,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           <FeeBreakdownTooltip
             gasCosts={gasCosts}
             feeCosts={feeCosts}
-            relayerSupport={hasRelayerSupport}
+            relayerSupport={hasGaslessSupport}
           >
             <Box
               onClick={toggleCard}
@@ -117,7 +117,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 <LocalGasStationRounded fontSize="inherit" />
               </IconTypography>
               <Typography
-                data-value={hasRelayerSupport ? 0 : combinedFeesUSD}
+                data-value={hasGaslessSupport ? 0 : combinedFeesUSD}
                 sx={{
                   fontSize: 14,
                   color: 'text.primary',
@@ -125,7 +125,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                   lineHeight: 1.429,
                 }}
               >
-                {hasRelayerSupport
+                {hasGaslessSupport
                   ? t('main.fees.free')
                   : t('format.currency', { value: combinedFeesUSD })}
               </Typography>
@@ -157,13 +157,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             <Typography variant="body2">{t('main.fees.network')}</Typography>
             <FeeBreakdownTooltip
               gasCosts={gasCosts}
-              relayerSupport={hasRelayerSupport}
+              relayerSupport={hasGaslessSupport}
             >
               <Typography
                 variant="body2"
                 sx={{ fontWeight: 600, cursor: 'help' }}
               >
-                {hasRelayerSupport
+                {hasGaslessSupport
                   ? t('main.fees.free')
                   : t('format.currency', {
                       value: gasCostUSD,

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.24.0-alpha.0'
+export const version = '3.24.1'

package/src/hooks/useTokenBalances.ts

@@ -3,15 +3,21 @@ import { useAccount } from '@lifi/wallet-management'
 import { useQuery } from '@tanstack/react-query'
 import { formatUnits } from 'viem'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { FormType } from '../stores/form/types.js'
 import type { TokenAmount } from '../types/token.js'
 import { getQueryKey } from '../utils/queries.js'
 import { useTokens } from './useTokens.js'
 
 const defaultRefetchInterval = 32_000
 
-export const useTokenBalances = (selectedChainId?: number) => {
-  const { tokens, featuredTokens, popularTokens, chain, isLoading } =
-    useTokens(selectedChainId)
+export const useTokenBalances = (
+  selectedChainId?: number,
+  formType?: FormType
+) => {
+  const { tokens, featuredTokens, popularTokens, chain, isLoading } = useTokens(
+    selectedChainId,
+    formType
+  )
   const { account } = useAccount({ chainType: chain?.chainType })
   const { keyPrefix } = useWidgetConfig()
 

package/src/hooks/useTokenSearch.ts

@@ -1,16 +1,20 @@
 import { type ChainId, type TokensResponse, getToken } from '@lifi/sdk'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { FormType } from '../stores/form/types.js'
 import type { TokenAmount } from '../types/token.js'
+import { isTokenAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
 export const useTokenSearch = (
   chainId?: number,
   tokenQuery?: string,
-  enabled?: boolean
+  enabled?: boolean,
+  formType?: FormType
 ) => {
   const queryClient = useQueryClient()
-  const { keyPrefix } = useWidgetConfig()
+  const { tokens: configTokens, keyPrefix } = useWidgetConfig()
+
   const { data, isLoading } = useQuery({
     queryKey: [getQueryKey('token-search', keyPrefix), chainId, tokenQuery],
     queryFn: async ({ queryKey: [, chainId, tokenQuery], signal }) => {
@@ -19,6 +23,11 @@ export const useTokenSearch = (
       })
 
       if (token) {
+        // Return undefined if the token is denied
+        if (!isTokenAllowed(token, configTokens, formType)) {
+          return undefined
+        }
+
         queryClient.setQueriesData<TokensResponse>(
           { queryKey: [getQueryKey('tokens', keyPrefix)] },
           (data) => {