@lifi/widget 3.24.3 → 3.25.0-beta.1

package/src/types/widget.ts

@@ -36,9 +36,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'
@@ -117,6 +121,7 @@ export type RequiredUIType = `${RequiredUI}`
 
 export type DefaultUI = {
   transactionDetailsExpanded?: boolean
+  navigationHeaderTitleNoWrap?: boolean
 }
 
 export interface WidgetWalletConfig {
@@ -209,19 +214,31 @@ export interface AllowDeny<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
@@ -364,3 +381,9 @@ export interface WidgetDrawerProps extends WidgetConfigPartialProps {
    */
   onClose?(): void
 }
+
+export enum ExpansionType {
+  Routes = 'routes',
+  FromChain = 'fromChain',
+  ToChain = 'toChain',
+}

package/src/utils/deepEqual.ts

@@ -40,7 +40,7 @@ export function deepEqual(a: any, b: any) {
     }
 
     for (i = length; i-- !== 0; ) {
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i]!)) {
+      if (!Object.hasOwn(b, keys[i]!)) {
         return false
       }
     }
@@ -57,6 +57,6 @@ export function deepEqual(a: any, b: any) {
   }
 
   // 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
 }

package/src/utils/item.ts

@@ -1,59 +1,65 @@
-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
+import type {
+  AllowDeny,
+  AllowDenyItems,
+  AllowDenySet,
+  AllowDenySetItem,
+  AllowDenySets,
+} from '../types/widget.js'
 
+// Use for a single item check
 export const isItemAllowed = <T>(
   item: T,
-  items?: AllowDeny<T>,
-  includes: IncludesFn<T> = (list, val) => list.includes(val)
+  items: AllowDeny<T> | undefined
 ): boolean => {
   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: BaseToken[], item: BaseToken) =>
-  list.some((t) => t.address === item.address && t.chainId === item.chainId)
-
-export const isTokenAllowed = (
-  token: BaseToken,
-  configTokens: WidgetTokens | undefined,
-  formType: FormType | undefined
-) => {
-  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 = <T>(
+  item: T,
+  items: AllowDenySet | undefined,
+  getKey?: (item: T) => AllowDenySetItem
+): boolean => {
+  if (items?.allow?.size) {
+    return items.allow.has(getKey?.(item) ?? (item as AllowDenySetItem))
+  }
+  return !items?.deny?.has(getKey?.(item) ?? (item as AllowDenySetItem))
 }
 
-export const filterConfigTokensByChain = (
-  configTokens: WidgetTokens | undefined,
-  formType: FormType | undefined,
-  chainId: number
-) => {
-  if (!configTokens) {
-    return configTokens
+export const getConfigItemSets = <T>(
+  items: AllowDenyItems<T> | undefined,
+  getSet: (items: T[]) => Set<AllowDenySetItem>,
+  formType?: FormType
+): AllowDenySets | undefined => {
+  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 = <T>(
+  item: T,
+  configTokens: AllowDenySets | undefined,
+  formType?: FormType,
+  getKey?: (item: T) => AllowDenySetItem
+) => {
+  return (
+    isItemAllowedForSets(item, configTokens, getKey) &&
+    (formType
+      ? isItemAllowedForSets(item, configTokens?.[formType], getKey)
+      : true)
+  )
+}

package/src/utils/widgetSize.ts

@@ -0,0 +1,17 @@
+import type { Theme } from '@mui/material'
+import { defaultMaxHeight } from '../config/constants'
+import type { WidgetTheme } from '../types/widget'
+
+export const getWidgetMaxHeight = (
+  theme: Theme | WidgetTheme | undefined
+): number | string => {
+  if (theme?.container?.maxHeight) {
+    return theme?.container?.maxHeight
+  }
+
+  if (theme?.container?.height && theme?.container?.height !== 'fit-content') {
+    return theme?.container?.height
+  }
+
+  return defaultMaxHeight
+}