@lifi/widget 4.5.0 → 4.6.0

package/src/pages/TransactionPage/TokenVerificationBottomSheet.tsx

@@ -0,0 +1,93 @@
+import type { Token } from '@lifi/sdk'
+import { Button, Checkbox, FormControlLabel } from '@mui/material'
+import type { JSX, Ref, RefObject } from 'react'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { IconCircle } from '../../components/IconCircle/IconCircle.js'
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
+import {
+  ButtonRow,
+  CenterContainer,
+  ContentContainer,
+  WarningMessage,
+  WarningTitle,
+} from './TokenValueBottomSheet.style.js'
+
+interface TokenVerificationBottomSheetProps {
+  /** Source and/or destination tokens the screening provider flagged. */
+  tokens: Token[]
+  onContinue(): void
+  onCancel?(): void
+}
+
+export const TokenVerificationBottomSheet = ({
+  tokens,
+  onContinue,
+  onCancel,
+  ref,
+}: TokenVerificationBottomSheetProps & {
+  ref?: Ref<BottomSheetBase>
+}): JSX.Element => {
+  const handleCancel = () => {
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
+    onCancel?.()
+  }
+
+  return (
+    <BottomSheet ref={ref} onClose={onCancel}>
+      <TokenVerificationBottomSheetContent
+        tokens={tokens}
+        onContinue={onContinue}
+        onCancel={handleCancel}
+      />
+    </BottomSheet>
+  )
+}
+
+const TokenVerificationBottomSheetContent: React.FC<
+  TokenVerificationBottomSheetProps
+> = ({ tokens, onCancel, onContinue }) => {
+  const [accepted, setAccepted] = useState(false)
+  const { t } = useTranslation()
+  const ref = useRef<HTMLElement>(null)
+  useSetContentHeight(ref)
+
+  return (
+    <ContentContainer ref={ref}>
+      <CenterContainer>
+        <IconCircle status="error" sx={{ mb: 2.5 }} />
+        <WarningTitle>{t('warning.title.tokenFlagged')}</WarningTitle>
+      </CenterContainer>
+      {tokens.map((token) => (
+        <WarningMessage key={`${token.chainId}-${token.address}`}>
+          {t('warning.message.tokenFlagged', { tokenSymbol: token.symbol })}
+        </WarningMessage>
+      ))}
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={accepted}
+            onChange={(_, checked) => setAccepted(checked)}
+          />
+        }
+        label={t('warning.checkbox.tokenFlagged')}
+        sx={{ mt: 1 }}
+      />
+      <ButtonRow>
+        <Button variant="text" onClick={onCancel} fullWidth>
+          {t('button.cancel')}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={onContinue}
+          disabled={!accepted}
+          fullWidth
+        >
+          {t('button.continue')}
+        </Button>
+      </ButtonRow>
+    </ContentContainer>
+  )
+}

package/src/pages/TransactionPage/TransactionReview.tsx

@@ -8,6 +8,7 @@ import { Card } from '../../components/Card/Card.js'
 import { WarningMessages } from '../../components/Messages/WarningMessages.js'
 import { RouteTokens } from '../../components/RouteCard/RouteTokens.js'
 import { useAddressActivity } from '../../hooks/useAddressActivity.js'
+import { useFlaggedTokenGuard } from '../../hooks/useFlaggedTokenGuard.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
@@ -18,6 +19,7 @@ import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
 import { StartTransactionButton } from './StartTransactionButton.js'
 import { TokenValueBottomSheet } from './TokenValueBottomSheet.js'
+import { TokenVerificationBottomSheet } from './TokenVerificationBottomSheet.js'
 import {
   calculateValueLossPercentage,
   getTokenValueLossThreshold,
@@ -44,6 +46,8 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
   const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)
   const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)
 
+  const { flaggedTokens, flaggedTokenSheetRef } = useFlaggedTokenGuard(route)
+
   const {
     toAddress,
     hasActivity,
@@ -70,6 +74,7 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
       })
     }
     tokenValueBottomSheetRef.current?.close()
+    flaggedTokenSheetRef.current?.close()
     executeRoute()
     setFieldValue('fromAmount', '')
     if (mode === 'custom') {
@@ -81,7 +86,9 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
     })
   }
 
-  const handleStartClick = () => {
+  // Runs the remaining gates. The flagged-token sheet continues into this
+  // rather than executing, so accepting it does not skip the others.
+  const handleStartAfterTokenCheck = () => {
     if (
       toAddress &&
       !hasActivity &&
@@ -109,6 +116,19 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
     }
   }
 
+  const handleStartClick = () => {
+    if (flaggedTokens.length) {
+      flaggedTokenSheetRef.current?.open()
+      return
+    }
+    handleStartAfterTokenCheck()
+  }
+
+  const handleFlaggedTokensContinue = () => {
+    flaggedTokenSheetRef.current?.close()
+    handleStartAfterTokenCheck()
+  }
+
   const getButtonText = (): string => {
     switch (mode) {
       case 'custom':
@@ -150,6 +170,13 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
           onContinue={handleExecuteRoute}
         />
       ) : null}
+      {flaggedTokens.length ? (
+        <TokenVerificationBottomSheet
+          ref={flaggedTokenSheetRef}
+          tokens={flaggedTokens}
+          onContinue={handleFlaggedTokensContinue}
+        />
+      ) : null}
       {!hiddenUI?.lowAddressActivityConfirmation ? (
         <ConfirmToAddressSheet
           ref={confirmToAddressSheetRef}

package/src/providers/WalletProvider/useExternalWalletProvider.ts

@@ -3,6 +3,7 @@ import {
   useBitcoinContext,
   useEthereumContext,
   useSolanaContext,
+  useStellarContext,
   useSuiContext,
   useTronContext,
 } from '@lifi/widget-provider'
@@ -21,6 +22,7 @@ const internalChainTypes = [
   ChainType.UTXO,
   ChainType.MVM,
   ChainType.TVM,
+  ChainType.STL,
 ]
 
 export function useExternalWalletProvider(): ExternalWalletProvider {
@@ -30,6 +32,7 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
   const { isExternalContext: hasExternalBitcoinContext } = useBitcoinContext()
   const { isExternalContext: hasExternalSuiContext } = useSuiContext()
   const { isExternalContext: hasExternalTronContext } = useTronContext()
+  const { isExternalContext: hasExternalStellarContext } = useStellarContext()
   const data = useMemo(() => {
     const providers: ChainType[] = []
     if (hasExternalEthereumContext) {
@@ -47,12 +50,16 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
     if (hasExternalTronContext) {
       providers.push(ChainType.TVM)
     }
+    if (hasExternalStellarContext) {
+      providers.push(ChainType.STL)
+    }
     const hasExternalProvider =
       hasExternalEthereumContext ||
       hasExternalSolanaContext ||
       hasExternalBitcoinContext ||
       hasExternalSuiContext ||
-      hasExternalTronContext
+      hasExternalTronContext ||
+      hasExternalStellarContext
 
     const useExternalWalletProvidersOnly =
       hasExternalProvider &&
@@ -71,6 +78,7 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
     hasExternalBitcoinContext,
     hasExternalSuiContext,
     hasExternalTronContext,
+    hasExternalStellarContext,
     walletConfig?.usePartialWalletManagement,
     walletConfig?.forceInternalWalletManagement,
   ])

package/src/types/token.ts

@@ -4,11 +4,14 @@ import type {
   TokenExtended,
 } from '@lifi/sdk'
 
-interface TokenFlags {
+export interface TokenFlags {
   featured?: boolean
   popular?: boolean
   pinned?: boolean
   verified?: boolean
+  native?: boolean
+  /** Came from the main token list rather than from a search. */
+  listed?: boolean
 }
 
 export interface TokenAmount extends SDKTokenAmount, TokenFlags {}
@@ -17,5 +20,5 @@ export interface TokenAmountExtended
   extends SDKTokenAmountExtended,
     TokenFlags {}
 
-export type TokenWithVerified = TokenExtended & { verified?: boolean }
-export type TokensByChain = Record<number, TokenWithVerified[]>
+export type TokenWithFlags = TokenExtended & TokenFlags
+export type TokensByChain = Record<number, TokenWithFlags[]>

package/src/utils/customReceiver.ts

@@ -0,0 +1,7 @@
+import { ChainType } from '@lifi/sdk'
+
+// Stellar routes always settle to the account that signs them.
+export const isCustomReceiverUnsupported = (
+  fromChainType?: ChainType,
+  toChainType?: ChainType
+): boolean => fromChainType === ChainType.STL && toChainType === ChainType.STL

package/src/utils/gas.ts

@@ -0,0 +1,41 @@
+import type { LiFiStepExtended, RouteExtended } from '@lifi/sdk'
+import { ChainType } from '@lifi/sdk'
+
+/**
+ * Returns how much of a step's gas token the route itself delivers before that
+ * step runs. The previous step must output the gas token on the same chain, and
+ * whatever this step consumes as input is not available for gas.
+ * Stellar routes only — they bridge XLM to the receiver and hold back a buffer
+ * for the account reserve and the destination step fees.
+ */
+export const getSelfFundedGasAmount = (
+  route: RouteExtended,
+  step: LiFiStepExtended,
+  gasChainType?: ChainType
+): bigint => {
+  // TODO: remove the chain gate when the backend reserves gas on every chain
+  if (gasChainType !== ChainType.STL) {
+    return 0n
+  }
+  const gasToken = step.estimate.gasCosts?.[0]?.token
+  const previousStep = route.steps[route.steps.indexOf(step) - 1]
+  if (!gasToken || !previousStep) {
+    return 0n
+  }
+  const { toToken } = previousStep.action
+  if (
+    toToken.chainId !== gasToken.chainId ||
+    toToken.address.toLowerCase() !== gasToken.address.toLowerCase()
+  ) {
+    return 0n
+  }
+  const deliveredAmount = BigInt(previousStep.estimate.toAmountMin)
+  const consumedAmount =
+    step.action.fromToken.address.toLowerCase() ===
+    gasToken.address.toLowerCase()
+      ? BigInt(step.action.fromAmount)
+      : 0n
+  return deliveredAmount > consumedAmount
+    ? deliveredAmount - consumedAmount
+    : 0n
+}

package/src/utils/token.ts

@@ -1,6 +1,14 @@
-import type { BaseToken, RouteExtended, Token, TokenAmount } from '@lifi/sdk'
+import type {
+  BaseToken,
+  ExtendedChain,
+  RouteExtended,
+  StaticToken,
+  Token,
+  TokenAmount,
+} from '@lifi/sdk'
+import { ChainId } from '@lifi/sdk'
 import type { FormType } from '../stores/form/types.js'
-import type { TokensByChain, TokenWithVerified } from '../types/token.js'
+import type { TokensByChain, TokenWithFlags } from '../types/token.js'
 import type { WidgetChains, WidgetTokens } from '../types/widget.js'
 import { getConfigItemSets, isFormItemAllowed } from './item.js'
 
@@ -94,7 +102,8 @@ export const filterAllowedTokens = (
   dataTokens: TokensByChain | undefined,
   configTokens?: WidgetTokens,
   chainsConfig?: WidgetChains,
-  formType?: FormType
+  formType?: FormType,
+  nativeTokenAddresses?: Map<number, string>
 ): TokensByChain | undefined => {
   if (!dataTokens) {
     return
@@ -143,13 +152,14 @@ export const filterAllowedTokens = (
     )
 
     const verifiedAddresses = verifiedTokensSets?.get(chainId)
+    const nativeAddress = nativeTokenAddresses?.get(chainId)?.toLowerCase()
 
-    const chainTokens: TokenWithVerified[] = [
+    const chainTokens: TokenWithFlags[] = [
       ...(dataTokens[chainId] ?? []),
       ...chainIncludedTokens,
     ]
 
-    const filtered: TokenWithVerified[] = []
+    const filtered: TokenWithFlags[] = []
     const seenAddresses = new Set<string>()
     for (const token of chainTokens) {
       const address = token.address.toLowerCase()
@@ -167,12 +177,18 @@ export const filterAllowedTokens = (
         continue
       }
       // Include and verified-allowlist tokens are explicitly set by the
-      // integrator, mark them as verified
-      if (
+      // integrator, mark them as verified. Flags are only ever set to true,
+      // so a token that earns none keeps its cached object.
+      const markVerified =
         !token.verified &&
         (includedAddresses.has(address) || verifiedAddresses?.has(address))
-      ) {
-        filtered.push({ ...token, verified: true })
+      const markNative = !!nativeAddress && nativeAddress === address
+      if (markVerified || markNative) {
+        filtered.push({
+          ...token,
+          ...(markVerified ? { verified: true } : {}),
+          ...(markNative ? { native: true } : {}),
+        })
       } else {
         filtered.push(token)
       }
@@ -192,3 +208,31 @@ export const getExecutionToToken = (route: RouteExtended): TokenAmount => ({
       route.toAmount
   ),
 })
+
+/** Capitalized name of the first provider that verified the token. */
+export const getTokenVerificationProvider = (
+  token: Pick<StaticToken, 'verificationStatusBreakdown'>
+): string | undefined => {
+  const provider = token.verificationStatusBreakdown?.find(
+    (entry) => entry.result === 'verified'
+  )?.provider
+  return provider
+    ? `${provider.charAt(0).toUpperCase()}${provider.slice(1)}`
+    : undefined
+}
+
+/**
+ * Hyperliquid declares Arbitrum USDC as its native token, Lighter declares
+ * Ethereum USDC. Neither is a gas token you hold there. A chain-local
+ * stablecoin gas token, as on Arc or Stable, is genuine and stays.
+ */
+const chainIdsWithoutNativeToken = new Set([ChainId.HPL, ChainId.LTR])
+
+export const getNativeTokenAddresses = (
+  chains?: ExtendedChain[]
+): Map<number, string> =>
+  new Map(
+    chains
+      ?.filter((chain) => !chainIdsWithoutNativeToken.has(chain.id))
+      .map((chain) => [chain.id, chain.nativeToken.address])
+  )

package/src/utils/tokenList.ts

@@ -274,3 +274,31 @@ export const isSearchMatch = (
     token.address?.toLowerCase().includes(searchLowerCase)
   )
 }
+
+/**
+ * Moves the chain's native token to the top of its own chain's list, unless an
+ * external list already places it. Returns the array unchanged when nothing
+ * moves, so a memo downstream keeps its reference.
+ */
+export const hoistNativeToken = (
+  tokens: TokenAmount[],
+  selectedChainId?: number
+): TokenAmount[] => {
+  if (!selectedChainId) {
+    return tokens
+  }
+  const index = tokens.findIndex(
+    (token) =>
+      token.native &&
+      token.chainId === selectedChainId &&
+      !token.featured &&
+      !token.popular &&
+      !token.pinned &&
+      !token.verified
+  )
+  // -1 is no native token, 0 is already first
+  if (index < 1) {
+    return tokens
+  }
+  return [tokens[index], ...tokens.slice(0, index), ...tokens.slice(index + 1)]
+}