@lifi/widget 3.25.0-beta.0 → 3.25.0-beta.1

package/src/stores/form/URLSearchParamsBuilder.tsx

@@ -104,7 +104,7 @@ export const URLSearchParamsBuilder = () => {
     addRecentWallet,
   ])
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when pathname changes
   useEffect(() => {
     // set the values on the querysting
     const url = new URL(window.location as any)

package/src/stores/form/useFormRef.ts

@@ -9,58 +9,54 @@ export const useFormRef = (formStore: FormStoreStore, formRef?: FormRef) => {
   const { setSendToWallet } = useSendToWalletActions()
   const { setSelectedBookmark } = useBookmarkActions()
 
-  useImperativeHandle(
-    formRef,
-    () => {
-      const sanitizeValue: {
-        [key: string]: (value: any) => GenericFormValue
-      } = {
-        fromAmount: (value) =>
-          (typeof value === 'number' ? value?.toPrecision() : value) ||
-          formDefaultValues.fromAmount,
-        toAmount: (value) =>
-          (typeof value === 'number' ? value?.toPrecision() : value) ||
-          formDefaultValues.toAmount,
-        toAddress: (value) => {
-          const isToAddressObj = typeof value !== 'string'
-
-          const address =
-            (isToAddressObj ? value?.address : value) ||
-            formDefaultValues.toAddress
-
-          // sets the send to wallet button state to be open
-          // if there is an address to display
-          if (address) {
-            setSendToWallet(address)
-          }
-
-          // we can assume that the toAddress has been passed as ToAddress object
-          // and display it accordingly - this ensures that if a name is included
-          // that it is displayed in the Send To Wallet form field correctly
-          if (isToAddressObj) {
-            setSelectedBookmark(value)
-          }
-
-          return address
-        },
-      }
-
-      return {
-        setFieldValue: (fieldName, value, options) => {
-          const sanitizedValue = (
-            sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value
-          ) as GenericFormValue
-
-          const fieldValueOptions = options?.setUrlSearchParam
-            ? { isTouched: options?.setUrlSearchParam }
-            : undefined
-
-          formStore
-            .getState()
-            .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)
-        },
-      }
-    },
-    [formStore, setSendToWallet, setSelectedBookmark]
-  )
+  useImperativeHandle(formRef, () => {
+    const sanitizeValue: {
+      [key: string]: (value: any) => GenericFormValue
+    } = {
+      fromAmount: (value) =>
+        (typeof value === 'number' ? value?.toPrecision() : value) ||
+        formDefaultValues.fromAmount,
+      toAmount: (value) =>
+        (typeof value === 'number' ? value?.toPrecision() : value) ||
+        formDefaultValues.toAmount,
+      toAddress: (value) => {
+        const isToAddressObj = typeof value !== 'string'
+
+        const address =
+          (isToAddressObj ? value?.address : value) ||
+          formDefaultValues.toAddress
+
+        // sets the send to wallet button state to be open
+        // if there is an address to display
+        if (address) {
+          setSendToWallet(address)
+        }
+
+        // we can assume that the toAddress has been passed as ToAddress object
+        // and display it accordingly - this ensures that if a name is included
+        // that it is displayed in the Send To Wallet form field correctly
+        if (isToAddressObj) {
+          setSelectedBookmark(value)
+        }
+
+        return address
+      },
+    }
+
+    return {
+      setFieldValue: (fieldName, value, options) => {
+        const sanitizedValue = (
+          sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value
+        ) as GenericFormValue
+
+        const fieldValueOptions = options?.setUrlSearchParam
+          ? { isTouched: options?.setUrlSearchParam }
+          : undefined
+
+        formStore
+          .getState()
+          .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)
+      },
+    }
+  }, [formStore, setSendToWallet, setSelectedBookmark])
 }

package/src/stores/routes/createRouteExecutionStore.ts

@@ -140,7 +140,7 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
           } as RouteExecutionState
           try {
             // Remove failed transactions from history after 1 day
-            const currentTime = new Date().getTime()
+            const currentTime = Date.now()
             const oneDay = 1000 * 60 * 60 * 24
             Object.values(state.routes).forEach((routeExecution) => {
               const startedAt =

package/src/stores/settings/useSettingsStore.ts

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/correctness/noUnusedVariables: allowed in this store */
 import type { StateCreator } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { createWithEqualityFn } from 'zustand/traditional'

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