@lifi/widget 3.25.0 → 3.26.0

package/src/stores/routes/useExecutingRoutesIds.ts

@@ -1,5 +1,4 @@
 import { useAccount } from '@lifi/wallet-management'
-import { shallow } from 'zustand/shallow'
 import { useRouteExecutionStore } from './RouteExecutionStore.js'
 import type { RouteExecution } from './types.js'
 import { RouteExecutionStatus } from './types.js'
@@ -7,21 +6,19 @@ import { RouteExecutionStatus } from './types.js'
 export const useExecutingRoutesIds = () => {
   const { accounts } = useAccount()
   const accountAddresses = accounts.map((account) => account.address)
-  return useRouteExecutionStore(
-    (state) =>
-      (Object.values(state.routes) as RouteExecution[])
-        .filter(
-          (item) =>
-            accountAddresses.includes(item.route.fromAddress) &&
-            (item.status === RouteExecutionStatus.Pending ||
-              item.status === RouteExecutionStatus.Failed)
-        )
-        .sort(
-          (a, b) =>
-            (b?.route.steps[0].execution?.process[0]?.startedAt ?? 0) -
-            (a?.route.steps[0].execution?.process[0]?.startedAt ?? 0)
-        )
-        .map(({ route }) => route.id),
-    shallow
+  return useRouteExecutionStore((state) =>
+    (Object.values(state.routes) as RouteExecution[])
+      .filter(
+        (item) =>
+          accountAddresses.includes(item.route.fromAddress) &&
+          (item.status === RouteExecutionStatus.Pending ||
+            item.status === RouteExecutionStatus.Failed)
+      )
+      .sort(
+        (a, b) =>
+          (b?.route.steps[0].execution?.process[0]?.startedAt ?? 0) -
+          (a?.route.steps[0].execution?.process[0]?.startedAt ?? 0)
+      )
+      .map(({ route }) => route.id)
   )
 }

package/src/stores/settings/useSendToWalletStore.ts

@@ -1,8 +1,8 @@
-import { shallow } from 'zustand/shallow'
+import { useShallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type { SendToWalletStore } from './types.js'
 
-export const useSendToWalletStore = createWithEqualityFn<SendToWalletStore>(
+export const sendToWalletStore = createWithEqualityFn<SendToWalletStore>(
   (set) => ({
     showSendToWallet: false,
     setSendToWallet: (value) =>
@@ -13,13 +13,16 @@ export const useSendToWalletStore = createWithEqualityFn<SendToWalletStore>(
   Object.is
 )
 
+export const useSendToWalletStore = <T>(
+  selector: (state: SendToWalletStore) => T
+): T => {
+  return sendToWalletStore(useShallow(selector))
+}
+
 export const useSendToWalletActions = () => {
-  const actions = useSendToWalletStore(
-    (store) => ({
-      setSendToWallet: store.setSendToWallet,
-    }),
-    shallow
-  )
+  const actions = useSendToWalletStore((store) => ({
+    setSendToWallet: store.setSendToWallet,
+  }))
 
   return actions
 }

package/src/stores/settings/useSettings.ts

@@ -1,19 +1,16 @@
-import { shallow } from 'zustand/shallow'
 import type { SettingsState } from './types.js'
 import { useSettingsStore } from './useSettingsStore.js'
 
 export const useSettings = <K extends keyof SettingsState>(
   keys: Array<K>
 ): Pick<SettingsState, (typeof keys)[number]> => {
-  return useSettingsStore(
-    (state) =>
-      keys.reduce(
-        (values, key) => {
-          values[key] = state[key]
-          return values
-        },
-        {} as Pick<SettingsState, (typeof keys)[number]>
-      ),
-    shallow
+  return useSettingsStore((state) =>
+    keys.reduce(
+      (values, key) => {
+        values[key] = state[key]
+        return values
+      },
+      {} as Pick<SettingsState, (typeof keys)[number]>
+    )
   )
 }

package/src/stores/settings/useSettingsActions.ts

@@ -1,5 +1,4 @@
 import { useCallback } from 'react'
-import { shallow } from 'zustand/shallow'
 import type { widgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { WidgetEvent } from '../../types/events.js'
@@ -47,17 +46,14 @@ const emitEventOnChange = <T extends (...args: any[]) => any>(
 
 export const useSettingsActions = () => {
   const emitter = useWidgetEvents()
-  const actions = useSettingsStore(
-    (state) => ({
-      setValue: state.setValue,
-      getValue: state.getValue,
-      getSettings: state.getSettings,
-      reset: state.reset,
-      setToolValue: state.setToolValue,
-      toggleToolKeys: state.toggleToolKeys,
-    }),
-    shallow
-  )
+  const actions = useSettingsStore((state) => ({
+    setValue: state.setValue,
+    getValue: state.getValue,
+    getSettings: state.getSettings,
+    reset: state.reset,
+    setToolValue: state.setToolValue,
+    toggleToolKeys: state.toggleToolKeys,
+  }))
 
   const setValueWithEmittedEvent = useCallback<ValueSetter<SettingsProps>>(
     (value, newValue) => {

package/src/stores/settings/useSettingsStore.ts

@@ -1,6 +1,7 @@
 /** biome-ignore-all lint/correctness/noUnusedVariables: allowed in this store */
 import type { StateCreator } from 'zustand'
 import { persist } from 'zustand/middleware'
+import { useShallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type { SettingsProps, SettingsState } from './types.js'
 import { SettingsToolTypes } from './types.js'
@@ -28,7 +29,7 @@ export const defaultSettings: SettingsProps = {
   _enabledExchanges: {},
 }
 
-export const useSettingsStore = createWithEqualityFn<SettingsState>(
+export const settingsStore = createWithEqualityFn<SettingsState>(
   persist(
     (set, get) => ({
       ...defaultSettings,
@@ -176,3 +177,9 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
   ) as StateCreator<SettingsState, [], [], SettingsState>,
   Object.is
 )
+
+export const useSettingsStore = <T>(
+  selector: (state: SettingsState) => T
+): T => {
+  return settingsStore(useShallow(selector))
+}

package/src/stores/settings/useSplitSubvariantStore.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useRef } from 'react'
+import { useShallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type {
   SplitSubvariantProps,
@@ -47,7 +48,7 @@ export function useSplitSubvariantStore<T>(
   selector: (state: SplitSubvariantState) => T
 ): T {
   const useStore = useSplitSubvariantStoreContext()
-  return useStore(selector)
+  return useStore(useShallow(selector))
 }
 
 export const createSplitSubvariantStore = ({ state }: SplitSubvariantProps) =>

package/src/themes/createTheme.ts

@@ -76,7 +76,11 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
       : darken(secondaryMainColorDark, 0.2)
 
   const theme = createMuiTheme({
-    cssVariables: { cssVarPrefix: 'lifi', colorSchemeSelector: 'class' },
+    cssVariables: {
+      cssVarPrefix: 'lifi',
+      colorSchemeSelector: 'class',
+      nativeColor: true,
+    },
     colorSchemes: {
       light: {
         palette: {

package/src/types/widget.ts

@@ -112,6 +112,7 @@ export enum HiddenUI {
   ChainSelect = 'chainSelect',
   BridgesSettings = 'bridgesSettings',
   AddressBookConnectedWallets = 'addressBookConnectedWallets',
+  LowAddressActivityConfirmation = 'lowAddressActivityConfirmation',
 }
 export type HiddenUIType = `${HiddenUI}`
 

package/src/utils/format.ts

@@ -96,6 +96,39 @@ export function formatTokenPrice(
   return Number.parseFloat(formattedAmount) * Number.parseFloat(price)
 }
 
+/**
+ * Formatter for price value to token amount
+ */
+const formatter = new Intl.NumberFormat('en', {
+  notation: 'standard',
+  roundingPriority: 'morePrecision',
+  maximumSignificantDigits: 21,
+  maximumFractionDigits: 21,
+  useGrouping: false,
+})
+
+/**
+ * Convert price value to token amount
+ */
+export function priceToTokenAmount(priceValue: string, priceUSD?: string) {
+  if (!priceValue || !priceUSD) {
+    return '0'
+  }
+
+  const numericPriceValue = Number.parseFloat(priceValue)
+  const numericPrice = Number.parseFloat(priceUSD)
+
+  if (
+    Number.isNaN(numericPriceValue) ||
+    Number.isNaN(numericPrice) ||
+    !numericPrice
+  ) {
+    return '0'
+  }
+
+  return formatter.format(numericPriceValue / numericPrice)
+}
+
 const units = [
   ['day', 86400],
   ['hour', 3600],

package/src/utils/getPriceImpact.ts

@@ -1,7 +1,7 @@
 import type { Token } from '@lifi/sdk'
 import { formatTokenPrice } from './format.js'
 
-interface GetPriceImpractProps {
+interface GetPriceImpactProps {
   fromToken: Token
   toToken: Token
   fromAmount?: bigint
@@ -13,7 +13,7 @@ export const getPriceImpact = ({
   toToken,
   fromAmount,
   toAmount,
-}: GetPriceImpractProps) => {
+}: GetPriceImpactProps) => {
   const fromTokenPrice = formatTokenPrice(
     fromAmount,
     fromToken.priceUSD,