@lifi/widget 3.24.3 → 3.25.0-beta.1

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

@@ -10,9 +10,13 @@ export type WidgetVariant = 'compact' | 'wide' | 'drawer';
 export type WidgetSubvariant = 'default' | 'split' | 'custom' | 'refuel';
 export type SplitSubvariant = 'bridge' | 'swap';
 export type CustomSubvariant = 'checkout' | 'deposit';
+export type WideSubvariant = {
+    enableChainSidebar?: boolean;
+};
 export interface SubvariantOptions {
     split?: SplitSubvariant;
     custom?: CustomSubvariant;
+    wide?: WideSubvariant;
 }
 export type Appearance = PaletteMode | 'system';
 export interface NavigationProps {
@@ -74,6 +78,7 @@ export declare enum RequiredUI {
 export type RequiredUIType = `${RequiredUI}`;
 export type DefaultUI = {
     transactionDetailsExpanded?: boolean;
+    navigationHeaderTitleNoWrap?: boolean;
 };
 export interface WidgetWalletConfig {
     onConnect?(args?: WalletMenuOpenArgs): void;
@@ -152,18 +157,27 @@ export interface AllowDeny<T> {
     allow?: T[];
     deny?: T[];
 }
+export type AllowDenySetItem = string | number;
+export interface AllowDenySet {
+    allow?: Set<AllowDenySetItem>;
+    deny?: Set<AllowDenySetItem>;
+}
+export type AllowDenySets = {
+    from?: AllowDenySet;
+    to?: AllowDenySet;
+} & AllowDenySet;
+export type AllowDenyItems<T> = {
+    from?: AllowDeny<T>;
+    to?: AllowDeny<T>;
+} & AllowDeny<T>;
 export type WidgetChains = {
-    from?: AllowDeny<number>;
-    to?: AllowDeny<number>;
     types?: AllowDeny<ChainType>;
-} & AllowDeny<number>;
+} & AllowDenyItems<number>;
 export type WidgetTokens = {
     featured?: StaticToken[];
     include?: Token[];
     popular?: StaticToken[];
-    from?: AllowDeny<BaseToken>;
-    to?: AllowDeny<BaseToken>;
-} & AllowDeny<BaseToken>;
+} & AllowDenyItems<BaseToken>;
 export type WidgetLanguages = {
     default?: LanguageKey;
 } & AllowDeny<LanguageKey>;
@@ -268,3 +282,8 @@ export interface WidgetDrawerProps extends WidgetConfigPartialProps {
      */
     onClose?(): void;
 }
+export declare enum ExpansionType {
+    Routes = "routes",
+    FromChain = "fromChain",
+    ToChain = "toChain"
+}

package/dist/esm/types/widget.js

@@ -27,4 +27,10 @@ export var RequiredUI;
     RequiredUI["ToAddress"] = "toAddress";
     RequiredUI["AccountDeployedMessage"] = "accountDeployedMessage";
 })(RequiredUI || (RequiredUI = {}));
+export var ExpansionType;
+(function (ExpansionType) {
+    ExpansionType["Routes"] = "routes";
+    ExpansionType["FromChain"] = "fromChain";
+    ExpansionType["ToChain"] = "toChain";
+})(ExpansionType || (ExpansionType = {}));
 //# sourceMappingURL=widget.js.map

package/dist/esm/types/widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../../src/types/widget.ts"],"names":[],"mappings":"AAqFA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,uCAAyB,CAAA;IACzB,qCAAuB,CAAA;IACvB,qCAAuB,CAAA;IACvB,iCAAmB,CAAA;AACrB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAGD,MAAM,CAAN,IAAY,QAeX;AAfD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,mDAAuC,CAAA;IACvC,+BAAmB,CAAA;IACnB,iCAAqB,CAAA;IACrB,mCAAuB,CAAA;IACvB,mCAAuB,CAAA;IACvB,+BAAmB,CAAA;IACnB,qCAAyB,CAAA;IACzB,2DAA+C,CAAA;IAC/C,uDAA2C,CAAA;IAC3C,2DAA+C,CAAA;IAC/C,uCAA2B,CAAA;IAC3B,+CAAmC,CAAA;IACnC,uEAA2D,CAAA;AAC7D,CAAC,EAfW,QAAQ,KAAR,QAAQ,QAenB;AAGD,MAAM,CAAN,IAAY,UAGX;AAHD,WAAY,UAAU;IACpB,qCAAuB,CAAA;IACvB,+DAAiD,CAAA;AACnD,CAAC,EAHW,UAAU,KAAV,UAAU,QAGrB"}
+{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../../src/types/widget.ts"],"names":[],"mappings":"AAyFA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,uCAAyB,CAAA;IACzB,qCAAuB,CAAA;IACvB,qCAAuB,CAAA;IACvB,iCAAmB,CAAA;AACrB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAGD,MAAM,CAAN,IAAY,QAeX;AAfD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,mDAAuC,CAAA;IACvC,+BAAmB,CAAA;IACnB,iCAAqB,CAAA;IACrB,mCAAuB,CAAA;IACvB,mCAAuB,CAAA;IACvB,+BAAmB,CAAA;IACnB,qCAAyB,CAAA;IACzB,2DAA+C,CAAA;IAC/C,uDAA2C,CAAA;IAC3C,2DAA+C,CAAA;IAC/C,uCAA2B,CAAA;IAC3B,+CAAmC,CAAA;IACnC,uEAA2D,CAAA;AAC7D,CAAC,EAfW,QAAQ,KAAR,QAAQ,QAenB;AAGD,MAAM,CAAN,IAAY,UAGX;AAHD,WAAY,UAAU;IACpB,qCAAuB,CAAA;IACvB,+DAAiD,CAAA;AACnD,CAAC,EAHW,UAAU,KAAV,UAAU,QAGrB;AA0QD,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,kCAAiB,CAAA;IACjB,wCAAuB,CAAA;IACvB,oCAAmB,CAAA;AACrB,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB"}

package/dist/esm/utils/deepEqual.js

@@ -33,7 +33,7 @@ export function deepEqual(a, b) {
             return false;
         }
         for (i = length; i-- !== 0;) {
-            if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
+            if (!Object.hasOwn(b, keys[i])) {
                 return false;
             }
         }
@@ -46,7 +46,7 @@ export function deepEqual(a, b) {
         return true;
     }
     // true if both NaN, false otherwise
-    // biome-ignore lint/suspicious/noSelfCompare: <explanation>
+    // biome-ignore lint/suspicious/noSelfCompare: allowed in typescript
     return a !== a && b !== b;
 }
 //# sourceMappingURL=deepEqual.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"deepEqual.js","sourceRoot":"","sources":["../../../src/utils/deepEqual.ts"],"names":[],"mappings":"AAAA,iEAAiE;AAEjE,MAAM,UAAU,SAAS,CAAC,CAAM,EAAE,CAAM;IACtC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACZ,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;QAC7D,IAAI,CAAC,CAAC,WAAW,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;YACpC,OAAO,KAAK,CAAA;QACd,CAAC;QAED,IAAI,MAAc,CAAA;QAClB,IAAI,CAAS,CAAA;QAEb,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACzC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAA;YACjB,IAAI,MAAM,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC;gBACxB,OAAO,KAAK,CAAA;YACd,CAAC;YACD,KAAK,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,GAAI,CAAC;gBAC7B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC3B,OAAO,KAAK,CAAA;gBACd,CAAC;YACH,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC;QAED,IAAI,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YAC3C,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,OAAO,EAAE,CAAA;QACpC,CAAC;QACD,IAAI,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;YAC7C,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAA;QACtC,CAAC;QAED,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAC3B,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QACpB,IAAI,MAAM,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;YACrC,OAAO,KAAK,CAAA;QACd,CAAC;QAED,KAAK,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,GAAI,CAAC;YAC7B,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAE,CAAC,EAAE,CAAC;gBACvD,OAAO,KAAK,CAAA;YACd,CAAC;QACH,CAAC;QAED,KAAK,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,GAAI,CAAC;YAC7B,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;YAEnB,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;gBACtC,OAAO,KAAK,CAAA;YACd,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;IACb,CAAC;IAED,oCAAoC;IACpC,4DAA4D;IAC5D,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC3B,CAAC"}
+{"version":3,"file":"deepEqual.js","sourceRoot":"","sources":["../../../src/utils/deepEqual.ts"],"names":[],"mappings":"AAAA,iEAAiE;AAEjE,MAAM,UAAU,SAAS,CAAC,CAAM,EAAE,CAAM;IACtC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACZ,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;QAC7D,IAAI,CAAC,CAAC,WAAW,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;YACpC,OAAO,KAAK,CAAA;QACd,CAAC;QAED,IAAI,MAAc,CAAA;QAClB,IAAI,CAAS,CAAA;QAEb,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACzC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAA;YACjB,IAAI,MAAM,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC;gBACxB,OAAO,KAAK,CAAA;YACd,CAAC;YACD,KAAK,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,GAAI,CAAC;gBAC7B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC3B,OAAO,KAAK,CAAA;gBACd,CAAC;YACH,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC;QAED,IAAI,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YAC3C,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,OAAO,EAAE,CAAA;QACpC,CAAC;QACD,IAAI,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;YAC7C,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAA;QACtC,CAAC;QAED,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAC3B,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QACpB,IAAI,MAAM,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;YACrC,OAAO,KAAK,CAAA;QACd,CAAC;QAED,KAAK,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,GAAI,CAAC;YAC7B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAE,CAAC,EAAE,CAAC;gBAChC,OAAO,KAAK,CAAA;YACd,CAAC;QACH,CAAC;QAED,KAAK,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,GAAI,CAAC;YAC7B,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;YAEnB,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;gBACtC,OAAO,KAAK,CAAA;YACd,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;IACb,CAAC;IAED,oCAAoC;IACpC,oEAAoE;IACpE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC3B,CAAC"}

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

@@ -1,16 +1,6 @@
-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 declare const filterConfigTokensByChain: (configTokens: WidgetTokens | undefined, formType: FormType | undefined, chainId: number) => {
-    allow: BaseToken[];
-    deny: BaseToken[];
-    featured?: import("@lifi/sdk").StaticToken[];
-    include?: import("@lifi/sdk").Token[];
-    popular?: import("@lifi/sdk").StaticToken[];
-    from?: AllowDeny<BaseToken>;
-    to?: AllowDeny<BaseToken>;
-} | undefined;
-export {};
+import type { AllowDeny, AllowDenyItems, AllowDenySet, AllowDenySetItem, AllowDenySets } from '../types/widget.js';
+export declare const isItemAllowed: <T>(item: T, items: AllowDeny<T> | undefined) => boolean;
+export declare const isItemAllowedForSets: <T>(item: T, items: AllowDenySet | undefined, getKey?: (item: T) => AllowDenySetItem) => boolean;
+export declare const getConfigItemSets: <T>(items: AllowDenyItems<T> | undefined, getSet: (items: T[]) => Set<AllowDenySetItem>, formType?: FormType) => AllowDenySets | undefined;
+export declare const isFormItemAllowed: <T>(item: T, configTokens: AllowDenySets | undefined, formType?: FormType, getKey?: (item: T) => AllowDenySetItem) => boolean;

package/dist/esm/utils/item.js

@@ -1,32 +1,36 @@
-export const isItemAllowed = (item, items, includes = (list, val) => list.includes(val)) => {
+// Use for a single item check
+export const isItemAllowed = (item, items) => {
     if (items?.allow?.length) {
-        return includes(items.allow, item);
+        return items.allow.includes(item);
     }
-    return !includes(items?.deny ?? [], item);
+    return !items?.deny?.includes(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));
+// Use for a O(1) set lookup of multiple items check
+export const isItemAllowedForSets = (item, items, getKey) => {
+    if (items?.allow?.size) {
+        return items.allow.has(getKey?.(item) ?? item);
+    }
+    return !items?.deny?.has(getKey?.(item) ?? item);
 };
-export const filterConfigTokensByChain = (configTokens, formType, chainId) => {
-    if (!configTokens) {
-        return configTokens;
+export const getConfigItemSets = (items, getSet, formType) => {
+    if (!items) {
+        return undefined;
     }
     return {
-        ...configTokens,
-        allow: configTokens.allow?.filter((t) => t.chainId === chainId) ?? [],
-        deny: configTokens.deny?.filter((t) => t.chainId === chainId) ?? [],
+        allow: getSet(items.allow ?? []),
+        deny: getSet(items.deny ?? []),
         ...(formType && {
             [formType]: {
-                allow: configTokens[formType]?.allow?.filter((t) => t.chainId === chainId) ??
-                    [],
-                deny: configTokens[formType]?.deny?.filter((t) => t.chainId === chainId) ??
-                    [],
+                allow: getSet(items[formType]?.allow ?? []),
+                deny: getSet(items[formType]?.deny ?? []),
             },
         }),
     };
 };
+export const isFormItemAllowed = (item, configTokens, formType, getKey) => {
+    return (isItemAllowedForSets(item, configTokens, getKey) &&
+        (formType
+            ? isItemAllowedForSets(item, configTokens?.[formType], getKey)
+            : 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":"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;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,CACvC,YAAsC,EACtC,QAA8B,EAC9B,OAAe,EACf,EAAE;IACF,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,YAAY,CAAA;IACrB,CAAC;IAED,OAAO;QACL,GAAG,YAAY;QACf,KAAK,EAAE,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,EAAE;QACrE,IAAI,EAAE,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,EAAE;QACnE,GAAG,CAAC,QAAQ,IAAI;YACd,CAAC,QAAQ,CAAC,EAAE;gBACV,KAAK,EACH,YAAY,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC;oBACnE,EAAE;gBACJ,IAAI,EACF,YAAY,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC;oBAClE,EAAE;aACL;SACF,CAAC;KACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/utils/item.ts"],"names":[],"mappings":"AASA,8BAA8B;AAC9B,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,IAAO,EACP,KAA+B,EACtB,EAAE;IACX,IAAI,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IACnC,CAAC;IACD,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAA;AACrC,CAAC,CAAA;AAED,oDAAoD;AACpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,IAAO,EACP,KAA+B,EAC/B,MAAsC,EAC7B,EAAE;IACX,IAAI,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,IAAK,IAAyB,CAAC,CAAA;IACtE,CAAC;IACD,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,IAAK,IAAyB,CAAC,CAAA;AACxE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAoC,EACpC,MAA6C,EAC7C,QAAmB,EACQ,EAAE;IAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,SAAS,CAAA;IAClB,CAAC;IACD,OAAO;QACL,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;QAChC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;QAC9B,GAAG,CAAC,QAAQ,IAAI;YACd,CAAC,QAAQ,CAAC,EAAE;gBACV,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC;gBAC3C,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC;aAC1C;SACF,CAAC;KACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,IAAO,EACP,YAAuC,EACvC,QAAmB,EACnB,MAAsC,EACtC,EAAE;IACF,OAAO,CACL,oBAAoB,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,CAAC;QAChD,CAAC,QAAQ;YACP,CAAC,CAAC,oBAAoB,CAAC,IAAI,EAAE,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;YAC9D,CAAC,CAAC,IAAI,CAAC,CACV,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,3 @@
+import type { Theme } from '@mui/material';
+import type { WidgetTheme } from '../types/widget';
+export declare const getWidgetMaxHeight: (theme: Theme | WidgetTheme | undefined) => number | string;

package/dist/esm/utils/widgetSize.js

@@ -0,0 +1,11 @@
+import { defaultMaxHeight } from '../config/constants';
+export const getWidgetMaxHeight = (theme) => {
+    if (theme?.container?.maxHeight) {
+        return theme?.container?.maxHeight;
+    }
+    if (theme?.container?.height && theme?.container?.height !== 'fit-content') {
+        return theme?.container?.height;
+    }
+    return defaultMaxHeight;
+};
+//# sourceMappingURL=widgetSize.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"widgetSize.js","sourceRoot":"","sources":["../../../src/utils/widgetSize.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAGtD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,KAAsC,EACrB,EAAE;IACnB,IAAI,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;QAChC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,CAAA;IACpC,CAAC;IAED,IAAI,KAAK,EAAE,SAAS,EAAE,MAAM,IAAI,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,aAAa,EAAE,CAAC;QAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,CAAA;IACjC,CAAC;IAED,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.24.3",
+  "version": "3.25.0-beta.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,11 +30,11 @@
     "lifi"
   ],
   "dependencies": {
-    "@bigmi/client": "^0.4.1",
-    "@bigmi/core": "^0.4.0",
+    "@bigmi/client": "^0.4.2",
+    "@bigmi/core": "^0.4.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "^3.7.11",
+    "@lifi/sdk": "^3.8.1",
     "@mui/icons-material": "^7.2.0",
     "@mui/material": "^7.2.0",
     "@mui/system": "^7.2.0",
@@ -49,9 +49,10 @@
     "react-i18next": "^15.6.0",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.30.0",
-    "viem": "^2.31.6",
+    "react-transition-group": "^4.4.5",
+    "viem": "^2.32.0",
     "zustand": "^5.0.6",
-    "@lifi/wallet-management": "^3.12.1"
+    "@lifi/wallet-management": "^3.13.0-beta.1"
   },
   "peerDependencies": {
     "@bigmi/react": ">=0.4.0",

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.24.3",
+  "version": "3.25.0-beta.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,11 +49,11 @@
     "lifi"
   ],
   "dependencies": {
-    "@bigmi/client": "^0.4.1",
-    "@bigmi/core": "^0.4.0",
+    "@bigmi/client": "^0.4.2",
+    "@bigmi/core": "^0.4.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "^3.7.11",
+    "@lifi/sdk": "^3.8.1",
     "@lifi/wallet-management": "workspace:^",
     "@mui/icons-material": "^7.2.0",
     "@mui/material": "^7.2.0",
@@ -69,10 +69,12 @@
     "react-i18next": "^15.6.0",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.30.0",
-    "viem": "^2.31.6",
+    "react-transition-group": "^4.4.5",
+    "viem": "^2.32.0",
     "zustand": "^5.0.6"
   },
   "devDependencies": {
+    "@types/react-transition-group": "^4.4.12",
     "cpy-cli": "^5.0.0",
     "madge": "^8.0.0",
     "react": "^19.1.0",
@@ -89,5 +91,9 @@
     "react-dom": ">=18",
     "wagmi": ">=2.14.0"
   },
-  "files": ["dist/**", "src/**", "!tsconfig.json"]
+  "files": [
+    "dist/**",
+    "src/**",
+    "!tsconfig.json"
+  ]
 }

package/src/AppDefault.tsx

@@ -5,12 +5,12 @@ import {
   AppExpandedContainer,
   FlexContainer,
 } from './components/AppContainer.js'
+import { Expansion } from './components/Expansion/Expansion.js'
 import { Header } from './components/Header/Header.js'
 import { Initializer } from './components/Initializer.js'
-import { RoutesExpanded } from './components/Routes/RoutesExpanded.js'
 import { useWideVariant } from './hooks/useWideVariant.js'
 import { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'
-import { ElementId, createElementId } from './utils/elements.js'
+import { createElementId, ElementId } from './utils/elements.js'
 
 export const AppDefault = () => {
   const { elementId } = useWidgetConfig()
@@ -27,7 +27,7 @@ export const AppDefault = () => {
         </FlexContainer>
         <Initializer />
       </AppContainer>
-      {wideVariant ? <RoutesExpanded /> : null}
+      {wideVariant && <Expansion />}
     </AppExpandedContainer>
   )
 }

package/src/AppProvider.tsx

@@ -11,11 +11,11 @@ import { QueryClientProvider } from './providers/QueryClientProvider.js'
 import { ThemeProvider } from './providers/ThemeProvider/ThemeProvider.js'
 import { WalletProvider } from './providers/WalletProvider/WalletProvider.js'
 import {
-  WidgetProvider,
   useWidgetConfig,
+  WidgetProvider,
 } from './providers/WidgetProvider/WidgetProvider.js'
-import { StoreProvider } from './stores/StoreProvider.js'
 import { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'
+import { StoreProvider } from './stores/StoreProvider.js'
 import type { WidgetConfigProps } from './types/widget.js'
 
 export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({

package/src/components/ActiveTransactions/ActiveTransactions.style.ts

@@ -1,7 +1,7 @@
 import {
+  listItemSecondaryActionClasses,
   ListItem as MuiListItem,
   ListItemButton as MuiListItemButton,
-  listItemSecondaryActionClasses,
   styled,
 } from '@mui/material'
 

package/src/components/AmountInput/AmountInput.style.tsx

@@ -1,8 +1,8 @@
 import {
   Box,
   InputBase,
-  FormControl as MuiFormControl,
   inputBaseClasses,
+  FormControl as MuiFormControl,
   styled,
 } from '@mui/material'
 

package/src/components/AppContainer.tsx

@@ -4,7 +4,8 @@ import { defaultMaxHeight } from '../config/constants.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useHeaderHeight } from '../stores/header/useHeaderStore.js'
 import type { WidgetVariant } from '../types/widget.js'
-import { ElementId, createElementId } from '../utils/elements.js'
+import { createElementId, ElementId } from '../utils/elements.js'
+import { getWidgetMaxHeight } from '../utils/widgetSize.js'
 
 // NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can
 //  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height
@@ -45,9 +46,7 @@ export const RelativeContainer = styled(Box, {
   const maxHeight =
     theme.container?.height === 'fit-content'
       ? 'none'
-      : theme.container?.maxHeight ||
-        theme.container?.height ||
-        defaultMaxHeight
+      : getWidgetMaxHeight(theme)
   return {
     position: 'relative',
     boxSizing: 'content-box',
@@ -57,12 +56,12 @@ export const RelativeContainer = styled(Box, {
     background: theme.vars.palette.background.default,
     overflow: 'auto',
     flex: 1,
-    zIndex: 0,
     ...theme.container,
     maxHeight:
       theme.container?.display === 'flex' && !theme.container?.height
         ? '100%'
         : maxHeight,
+    zIndex: 1, // NB: higher than of expansion containers
     variants: [
       {
         props: {
@@ -91,9 +90,7 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
   const maxHeight =
     theme.container?.height === 'fit-content'
       ? 'none'
-      : theme.container?.maxHeight ||
-        theme.container?.height ||
-        defaultMaxHeight
+      : getWidgetMaxHeight(theme)
   return {
     display: 'flex',
     flex: 1,
@@ -116,12 +113,7 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
         defaultMaxHeight,
     },
     '&:has(.long-list)': {
-      maxHeight:
-        theme.container?.maxHeight ||
-        (theme.container?.height !== 'fit-content'
-          ? theme.container?.height
-          : undefined) ||
-        defaultMaxHeight,
+      maxHeight: getWidgetMaxHeight(theme),
     },
   }
 })

package/src/components/Avatar/Avatar.style.tsx

@@ -1,10 +1,10 @@
 import type { CSSObject } from '@mui/material'
 import {
   AvatarGroup,
-  Box,
-  Avatar as MuiAvatar,
   avatarClasses,
+  Box,
   badgeClasses,
+  Avatar as MuiAvatar,
   styled,
 } from '@mui/material'
 import { getAvatarMask } from './utils.js'

package/src/components/Card/CardButton.style.tsx

@@ -1,4 +1,4 @@
-import { Box, ButtonBase, Typography, styled } from '@mui/material'
+import { Box, ButtonBase, styled, Typography } from '@mui/material'
 
 export const CardRowButton = styled(ButtonBase)(({ theme }) => ({
   background: 'none',

package/src/components/Card/CardHeader.tsx

@@ -1,6 +1,6 @@
 import {
-  CardHeader as MuiCardHeader,
   cardHeaderClasses,
+  CardHeader as MuiCardHeader,
   styled,
 } from '@mui/material'
 

package/src/components/Card/CardLabel.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, styled } from '@mui/material'
+import { Box, styled, Typography } from '@mui/material'
 
 export const CardLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',

package/src/components/Card/CardTitle.tsx

@@ -1,4 +1,4 @@
-import { Typography, styled } from '@mui/material'
+import { styled, Typography } from '@mui/material'
 
 export const CardTitle = styled(Typography, {
   shouldForwardProp: (prop) => !['required'].includes(prop as string),

package/src/components/ChainSelect/ChainSelect.tsx

@@ -71,7 +71,7 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
                 component="button"
                 onClick={() => setCurrentChain(chain.id)}
                 type={chainId === chain.id ? 'selected' : 'default'}
-                selectionColor="primary"
+                selectionColor="secondary"
               >
                 <Avatar
                   src={chain.logoURI}

package/src/components/ChainSelect/useChainSelect.ts

@@ -1,4 +1,5 @@
 import type { EVMChain } from '@lifi/sdk'
+import { useCallback } from 'react'
 import { useChains } from '../../hooks/useChains.js'
 import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useToAddressReset } from '../../hooks/useToAddressReset.js'
@@ -42,30 +43,43 @@ export const useChainSelect = (formType: FormType) => {
     return selectedChains
   }
 
-  const setCurrentChain = (chainId: number) => {
-    onChange(chainId)
-    if (swapOnly) {
-      setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
-        isTouched: true,
-      })
-    }
-    const tokenKey = FormKeyHelper.getTokenKey(formType)
-    if (!disabledUI?.includes(tokenKey as DisabledUI)) {
-      setFieldValue(tokenKey, '')
-    }
-    const amountKey = FormKeyHelper.getAmountKey(formType)
-    if (!disabledUI?.includes(amountKey as DisabledUI)) {
-      setFieldValue(amountKey, '')
-    }
-    setFieldValue('tokenSearchFilter', '')
+  const setCurrentChain = useCallback(
+    (chainId: number) => {
+      onChange(chainId)
+      if (swapOnly) {
+        setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
+          isTouched: true,
+        })
+      }
+      const tokenKey = FormKeyHelper.getTokenKey(formType)
+      if (!disabledUI?.includes(tokenKey as DisabledUI)) {
+        setFieldValue(tokenKey, '')
+      }
+      const amountKey = FormKeyHelper.getAmountKey(formType)
+      if (!disabledUI?.includes(amountKey as DisabledUI)) {
+        setFieldValue(amountKey, '')
+      }
+      setFieldValue('tokenSearchFilter', '')
 
-    const [toChainId] = getFieldValues('toChain')
-    const toChain = getChainById(toChainId)
-    if (toChain) {
-      tryResetToAddress(toChain)
-    }
-    setChainOrder(chainId, formType)
-  }
+      const [toChainId] = getFieldValues('toChain')
+      const toChain = getChainById(toChainId)
+      if (toChain) {
+        tryResetToAddress(toChain)
+      }
+      setChainOrder(chainId, formType)
+    },
+    [
+      onChange,
+      swapOnly,
+      setFieldValue,
+      disabledUI,
+      formType,
+      getChainById,
+      tryResetToAddress,
+      setChainOrder,
+      getFieldValues,
+    ]
+  )
 
   return {
     chainOrder,

package/src/components/Chains/ChainList.style.tsx

@@ -0,0 +1,59 @@
+import {
+  ListItem as ListItemBase,
+  listItemTextClasses,
+  Avatar as MuiAvatar,
+  List as MuiList,
+  ListItemAvatar as MuiListItemAvatar,
+  ListItemText as MuiListItemText,
+  styled,
+} from '@mui/material'
+import { ListItemButton as ListItemButtonBase } from '../ListItem/ListItemButton.js'
+
+export const Avatar = styled(MuiAvatar)<{
+  size?: 'small' | 'medium'
+}>(({ size = 'medium' }) => ({
+  width: size === 'small' ? 32 : 40,
+  height: size === 'small' ? 32 : 40,
+}))
+
+export const ListItemAvatar = styled(MuiListItemAvatar)<{
+  size?: 'small' | 'medium'
+}>(({ size = 'medium' }) => ({
+  minWidth: size === 'small' ? 44 : 56,
+}))
+
+export const ListItemText = styled(MuiListItemText)<{
+  size?: 'small' | 'medium'
+}>(({ size = 'medium' }) => ({
+  [`.${listItemTextClasses.primary}`]: {
+    fontWeight: 500,
+    fontSize: size === 'small' ? '1rem' : '1.125rem',
+  },
+}))
+
+export const ListItemButton = styled(ListItemButtonBase)<{
+  size?: 'small' | 'medium'
+}>(({ size = 'medium', theme }) => {
+  return {
+    borderRadius: theme.vars.shape.borderRadius,
+    paddingLeft: size === 'small' ? theme.spacing(1) : theme.spacing(1.5),
+    height: size === 'small' ? 44 : 56,
+  }
+})
+
+export const List = styled(MuiList)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(0.5),
+  padding: 0,
+  marginLeft: theme.spacing(1.5),
+  marginRight: theme.spacing(1.5),
+  marginBottom: theme.spacing(1.5),
+  cursor: 'pointer',
+}))
+
+export const ListItem = styled(ListItemBase)(() => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+}))