@lifi/widget 3.24.0-alpha.0 → 3.24.0

package/src/hooks/useTokens.ts

@@ -2,11 +2,13 @@ import { ChainType, getTokens } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 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'
 import { useChains } from './useChains.js'
 
-export const useTokens = (selectedChainId?: number) => {
+export const useTokens = (selectedChainId?: number, formType?: FormType) => {
   const { tokens: configTokens, keyPrefix } = useWidgetConfig()
   const { data, isLoading } = useQuery({
     queryKey: [getQueryKey('tokens', keyPrefix)],
@@ -45,27 +47,13 @@ export const useTokens = (selectedChainId?: number) => {
       filteredTokens = [...includedTokens, ...filteredTokens]
     }
 
-    if (configTokens?.allow?.length || configTokens?.deny?.length) {
-      const allowedTokensSet = new Set(
-        configTokens?.allow
-          ?.filter((token) => token.chainId === selectedChainId)
-          .map((token) => token.address)
-      )
-
-      const deniedTokenAddressesSet = new Set(
-        configTokens?.deny
-          ?.filter((token) => token.chainId === selectedChainId)
-          .map((token) => token.address)
-      )
+    // Get the appropriate allow/deny lists based on formType
+    filteredTokens = filteredTokens.filter(
+      (token) =>
+        token.chainId === selectedChainId &&
+        isTokenAllowed(token, configTokens, formType)
+    )
 
-      if (allowedTokensSet.size || deniedTokenAddressesSet.size) {
-        filteredTokens = filteredTokens.filter(
-          (token) =>
-            (!allowedTokensSet.size || allowedTokensSet.has(token.address)) &&
-            !deniedTokenAddressesSet.has(token.address)
-        )
-      }
-    }
     const filteredTokensMap = new Map(
       filteredTokens.map((token) => [token.address, token])
     )
@@ -118,6 +106,7 @@ export const useTokens = (selectedChainId?: number) => {
     getChainById,
     isSupportedChainsLoading,
     selectedChainId,
+    formType,
   ])
 
   return {

package/src/index.ts

@@ -25,6 +25,7 @@ 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/src/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -10,13 +10,15 @@ const getStatusColor = (status: StatusColor, theme: 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:
@@ -24,13 +26,15 @@ const getStatusColor = (status: StatusColor, theme: 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,
       }
   }
 }
@@ -44,13 +48,10 @@ export const CenterContainer = styled(Box)(() => ({
 export const IconCircle = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'status',
 })<{ status: StatusColor }>(({ 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,
@@ -58,9 +59,16 @@ 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,
+      },
+    }),
   }
 })

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,5 +1,5 @@
 import type { Route } from '@lifi/sdk'
-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 type { RefObject } from 'react'
@@ -51,7 +51,7 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
     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 (
     <Box
       ref={ref}
@@ -106,14 +106,14 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
         <Typography>{t('main.fees.network')}</Typography>
         <FeeBreakdownTooltip
           gasCosts={gasCosts}
-          relayerSupport={hasRelayerSupport}
+          relayerSupport={hasGaslessSupport}
         >
           <Typography
             sx={{
               fontWeight: 600,
             }}
           >
-            {hasRelayerSupport
+            {hasGaslessSupport
               ? t('main.fees.free')
               : t('format.currency', { value: gasCostUSD })}
           </Typography>

package/src/types/widget.ts

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

package/src/utils/item.ts

@@ -1,8 +1,33 @@
-import type { AllowDeny } from '../types/widget.js'
+import type { BaseToken } from '@lifi/sdk'
+import type { FormType } from '../stores/form/types.js'
+import type { AllowDeny, WidgetTokens } from '../types/widget.js'
 
-export const isItemAllowed = <T>(itemId: T, items?: AllowDeny<T>) => {
+type IncludesFn<T> = (list: T[], item: T) => boolean
+
+export const isItemAllowed = <T>(
+  item: T,
+  items?: AllowDeny<T>,
+  includes: IncludesFn<T> = (list, val) => list.includes(val)
+): boolean => {
   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: 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)
+  )
 }