@lifi/widget 3.23.3 → 3.24.0

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -0,0 +1,200 @@
+import Close from '@mui/icons-material/Close'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'
+import { type PropsWithChildren, forwardRef, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { useTokenSearch } from '../../hooks/useTokenSearch.js'
+import { formatTokenPrice } from '../../utils/format.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+import { CardIconButton } from '../Card/CardIconButton.js'
+import {
+  Label,
+  MetricContainer,
+  TokenDetailsSheetContainer,
+  TokenDetailsSheetHeader,
+} from './TokenDetailsSheetContent.style.js'
+import type { TokenDetailsSheetBase } from './types.js'
+
+interface TokenDetailsSheetContentProps {
+  tokenAddress: string | undefined
+  chainId: number | undefined
+  withoutContractAddress: boolean
+}
+
+const noDataLabel = '-'
+
+export const TokenDetailsSheetContent = forwardRef<
+  TokenDetailsSheetBase,
+  TokenDetailsSheetContentProps
+>(({ tokenAddress, chainId, withoutContractAddress }, ref) => {
+  const { t } = useTranslation()
+  const { getAddressLink } = useExplorer()
+  const { getChainById } = useAvailableChains()
+
+  const { token, isLoading } = useTokenSearch(
+    chainId,
+    tokenAddress,
+    !!tokenAddress
+  )
+  const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])
+
+  const copyContractAddress = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    try {
+      // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)
+      await navigator.clipboard.writeText(tokenAddress || '')
+    } catch {
+      // Silently fail to avoid crashing the UI if clipboard write fails
+    }
+  }
+
+  return (
+    <TokenDetailsSheetContainer>
+      <TokenDetailsSheetHeader>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 3,
+          }}
+        >
+          <TokenAvatar
+            token={token}
+            chain={chain}
+            tokenAvatarSize={72}
+            chainAvatarSize={28}
+            isLoading={isLoading}
+          />
+          <MetricContainer>
+            {isLoading ? (
+              <>
+                <Skeleton variant="rounded" width={80} height={24} />
+                <Skeleton variant="rounded" width={80} height={16} />
+              </>
+            ) : (
+              <>
+                <Typography
+                  fontWeight={700}
+                  fontSize="24px"
+                  lineHeight="24px"
+                  color="text.primary"
+                >
+                  {token?.symbol || noDataLabel}
+                </Typography>
+                <Label>{token?.name || noDataLabel}</Label>
+              </>
+            )}
+          </MetricContainer>
+        </Box>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation()
+            if (ref && typeof ref !== 'function') {
+              ref.current?.close()
+            }
+          }}
+          sx={{ mt: '-8px', mr: '-8px' }}
+        >
+          <Close />
+        </IconButton>
+      </TokenDetailsSheetHeader>
+      <MetricWithSkeleton
+        isLoading={isLoading}
+        label={t('tokenMetric.currentPrice')}
+        width={200}
+        height={40}
+      >
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '32px',
+            lineHeight: '40px',
+            color: 'text.primary',
+          }}
+        >
+          {token
+            ? t('format.currency', {
+                value: formatTokenPrice('1', token.priceUSD, token.decimals),
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
+      {!withoutContractAddress && (
+        <MetricWithSkeleton
+          isLoading={isLoading}
+          label={t('tokenMetric.contractAddress')}
+          width={200}
+          height={24}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 1,
+            }}
+          >
+            <Typography
+              sx={{
+                fontWeight: 700,
+                fontSize: '18px',
+                lineHeight: '24px',
+                color: 'text.primary',
+              }}
+            >
+              {shortenAddress(tokenAddress)}
+            </Typography>
+            {tokenAddress && (
+              <CardIconButton size="small" onClick={copyContractAddress}>
+                <ContentCopyRounded fontSize="inherit" />
+              </CardIconButton>
+            )}
+            {tokenAddress && (
+              <CardIconButton
+                size="small"
+                LinkComponent={Link}
+                href={getAddressLink(tokenAddress, chainId)}
+                target="_blank"
+                rel="nofollow noreferrer"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <OpenInNewRounded fontSize="inherit" />
+              </CardIconButton>
+            )}
+          </Box>
+        </MetricWithSkeleton>
+      )}
+    </TokenDetailsSheetContainer>
+  )
+})
+
+interface MetricWithSkeletonProps {
+  label: string
+  isLoading: boolean
+  width: number
+  height: number
+}
+
+const MetricWithSkeleton = ({
+  label,
+  width,
+  height,
+  isLoading,
+  children,
+}: PropsWithChildren<MetricWithSkeletonProps>) => {
+  return (
+    <MetricContainer>
+      <Label>{label}</Label>
+      {isLoading ? (
+        <Skeleton variant="rounded" width={width} height={height} />
+      ) : (
+        children
+      )}
+    </MetricContainer>
+  )
+}

package/src/components/TokenList/TokenList.tsx

@@ -42,7 +42,7 @@ export const TokenList: FC<TokenListProps> = ({
     isBalanceLoading,
     featuredTokens,
     popularTokens,
-  } = useTokenBalances(selectedChainId)
+  } = useTokenBalances(selectedChainId, formType)
 
   let filteredTokens = (tokensWithBalance ?? chainTokens ?? []) as TokenAmount[]
   const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')
@@ -70,7 +70,12 @@ export const TokenList: FC<TokenListProps> = ({
     !!selectedChainId
 
   const { token: searchedToken, isLoading: isSearchedTokenLoading } =
-    useTokenSearch(selectedChainId, normalizedSearchFilter, tokenSearchEnabled)
+    useTokenSearch(
+      selectedChainId,
+      normalizedSearchFilter,
+      tokenSearchEnabled,
+      formType
+    )
 
   const isLoading =
     isTokensLoading ||

package/src/components/TokenList/TokenListItem.tsx

@@ -1,9 +1,8 @@
 import { ChainType } from '@lifi/sdk'
-import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
 import {
   Avatar,
   Box,
-  Link,
   ListItemAvatar,
   ListItemText,
   Skeleton,
@@ -13,7 +12,6 @@ import {
 import type { MouseEventHandler } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useExplorer } from '../../hooks/useExplorer.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { ListItemButton } from '../ListItem/ListItemButton.js'
@@ -34,6 +32,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = ({
   isBalanceLoading,
   startAdornment,
   endAdornment,
+  onShowTokenDetails,
 }) => {
   const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
     e.stopPropagation()
@@ -53,6 +52,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = ({
         accountAddress={accountAddress}
         isBalanceLoading={isBalanceLoading}
         onClick={handleClick}
+        onShowTokenDetails={onShowTokenDetails}
       />
       {endAdornment}
     </ListItem>
@@ -77,26 +77,51 @@ export const TokenListItemAvatar: React.FC<TokenListItemAvatarProps> = ({
   )
 }
 
+interface OpenTokenDetailsButtonProps {
+  tokenAddress: string | undefined
+  withoutContractAddress: boolean
+  onClick: (tokenAddress: string, withoutContractAddress: boolean) => void
+}
+
+const OpenTokenDetailsButton = ({
+  tokenAddress,
+  withoutContractAddress,
+  onClick,
+}: OpenTokenDetailsButtonProps) => {
+  if (!tokenAddress) {
+    return null
+  }
+  return (
+    <IconButton
+      size="small"
+      onClick={(e) => {
+        e.stopPropagation()
+        onClick(tokenAddress, withoutContractAddress)
+      }}
+    >
+      <InfoOutlinedIcon />
+    </IconButton>
+  )
+}
+
 export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   onClick,
   token,
   chain,
   accountAddress,
   isBalanceLoading,
+  onShowTokenDetails,
 }) => {
   const { t } = useTranslation()
-  const { getAddressLink } = useExplorer()
-
   const container = useRef(null)
   const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
   const [showAddress, setShowAddress] = useState(false)
 
-  const tokenAddress =
-    chain?.chainType === ChainType.UTXO ? accountAddress : token.address
+  const withoutContractAddress = chain?.chainType === ChainType.UTXO
 
   const onMouseEnter = () => {
     timeoutId.current = setTimeout(() => {
-      if (tokenAddress) {
+      if (token.address) {
         setShowAddress(true)
       }
     }, 350)
@@ -108,6 +133,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
       setShowAddress(false)
     }
   }
+
   const tokenAmount = formatTokenAmount(token.amount, token.decimals)
   const tokenPrice = formatTokenPrice(
     token.amount,
@@ -133,21 +159,13 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
           },
         }}
         secondary={
-          <Box
-            ref={container}
-            sx={{
-              position: 'relative',
-              height: 20,
-            }}
-          >
-            <Slide
-              direction="down"
-              in={!showAddress}
-              container={container.current}
-              style={{
-                position: 'absolute',
+          withoutContractAddress ? (
+            <Box
+              ref={container}
+              sx={{
+                height: 20,
+                display: 'flex',
               }}
-              appear={false}
             >
               <Box
                 sx={{
@@ -156,44 +174,93 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
               >
                 {token.name}
               </Box>
-            </Slide>
-            <Slide
-              direction="up"
-              in={showAddress}
-              container={container.current}
-              style={{
-                position: 'absolute',
-              }}
-              appear={false}
-              mountOnEnter
-            >
               <Box
                 sx={{
-                  display: 'flex',
+                  position: 'relative',
                 }}
+              >
+                <Slide
+                  direction="up"
+                  in={showAddress}
+                  container={container.current}
+                  style={{
+                    position: 'absolute',
+                  }}
+                  appear={false}
+                  mountOnEnter
+                >
+                  <Box
+                    sx={{
+                      display: 'flex',
+                    }}
+                  >
+                    <OpenTokenDetailsButton
+                      tokenAddress={token.address}
+                      withoutContractAddress={withoutContractAddress}
+                      onClick={onShowTokenDetails}
+                    />
+                  </Box>
+                </Slide>
+              </Box>
+            </Box>
+          ) : (
+            <Box
+              ref={container}
+              sx={{
+                position: 'relative',
+                height: 20,
+              }}
+            >
+              <Slide
+                direction="down"
+                in={!showAddress}
+                container={container.current}
+                style={{
+                  position: 'absolute',
+                }}
+                appear={false}
               >
                 <Box
                   sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    pt: 0.125,
+                    pt: 0.25,
                   }}
                 >
-                  {shortenAddress(tokenAddress)}
+                  {token.name}
                 </Box>
-                <IconButton
-                  size="small"
-                  LinkComponent={Link}
-                  href={getAddressLink(tokenAddress!, chain)}
-                  target="_blank"
-                  rel="nofollow noreferrer"
-                  onClick={(e) => e.stopPropagation()}
+              </Slide>
+              <Slide
+                direction="up"
+                in={showAddress}
+                container={container.current}
+                style={{
+                  position: 'absolute',
+                }}
+                appear={false}
+                mountOnEnter
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                  }}
                 >
-                  <OpenInNewRounded />
-                </IconButton>
-              </Box>
-            </Slide>
-          </Box>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      pt: 0.125,
+                    }}
+                  >
+                    {shortenAddress(token.address)}
+                  </Box>
+                  <OpenTokenDetailsButton
+                    tokenAddress={token.address}
+                    withoutContractAddress={withoutContractAddress}
+                    onClick={onShowTokenDetails}
+                  />
+                </Box>
+              </Slide>
+            </Box>
+          )
         }
       />
       {accountAddress ? (

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -1,11 +1,15 @@
 import { List, Typography } from '@mui/material'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import type { FC } from 'react'
-import { useEffect } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { TokenAmount } from '../../types/token.js'
+import { TokenDetailsSheet } from './TokenDetailsSheet.js'
 import { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js'
-import type { VirtualizedTokenListProps } from './types.js'
+import type {
+  TokenDetailsSheetBase,
+  VirtualizedTokenListProps,
+} from './types.js'
 
 export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   account,
@@ -20,6 +24,15 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
 }) => {
   const { t } = useTranslation()
 
+  const tokenDetailsSheetRef = useRef<TokenDetailsSheetBase>(null)
+
+  const onShowTokenDetails = useCallback(
+    (tokenAddress: string, noContractAddress: boolean) => {
+      tokenDetailsSheetRef.current?.open(tokenAddress, noContractAddress)
+    },
+    []
+  )
+
   const { getVirtualItems, getTotalSize, scrollToIndex } = useVirtualizer({
     count: tokens.length,
     overscan: 10,
@@ -75,78 +88,86 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   }
 
   return (
-    <List style={{ height: getTotalSize() }} disablePadding>
-      {getVirtualItems().map((item) => {
-        const currentToken = tokens[item.index]
-        const previousToken: TokenAmount | undefined = tokens[item.index - 1]
-
-        const isFirstFeaturedToken = currentToken.featured && item.index === 0
-
-        const isTransitionFromFeaturedTokens =
-          previousToken?.featured && !currentToken.featured
-
-        const isTransitionFromMyTokens =
-          previousToken?.amount && !currentToken.amount
-
-        const isTransitionToMyTokens =
-          isTransitionFromFeaturedTokens && currentToken.amount
-
-        const isTransitionToPopularTokens =
-          (isTransitionFromFeaturedTokens || isTransitionFromMyTokens) &&
-          currentToken.popular
-
-        const shouldShowAllTokensCategory =
-          isTransitionFromMyTokens ||
-          isTransitionFromFeaturedTokens ||
-          (previousToken?.popular && !currentToken.popular)
-
-        const startAdornmentLabel = showCategories
-          ? (() => {
-              if (isFirstFeaturedToken) {
-                return t('main.featuredTokens')
-              }
-              if (isTransitionToMyTokens) {
-                return t('main.myTokens')
+    <>
+      <List
+        className="long-list"
+        style={{ height: getTotalSize() }}
+        disablePadding
+      >
+        {getVirtualItems().map((item) => {
+          const currentToken = tokens[item.index]
+          const previousToken: TokenAmount | undefined = tokens[item.index - 1]
+
+          const isFirstFeaturedToken = currentToken.featured && item.index === 0
+
+          const isTransitionFromFeaturedTokens =
+            previousToken?.featured && !currentToken.featured
+
+          const isTransitionFromMyTokens =
+            previousToken?.amount && !currentToken.amount
+
+          const isTransitionToMyTokens =
+            isTransitionFromFeaturedTokens && currentToken.amount
+
+          const isTransitionToPopularTokens =
+            (isTransitionFromFeaturedTokens || isTransitionFromMyTokens) &&
+            currentToken.popular
+
+          const shouldShowAllTokensCategory =
+            isTransitionFromMyTokens ||
+            isTransitionFromFeaturedTokens ||
+            (previousToken?.popular && !currentToken.popular)
+
+          const startAdornmentLabel = showCategories
+            ? (() => {
+                if (isFirstFeaturedToken) {
+                  return t('main.featuredTokens')
+                }
+                if (isTransitionToMyTokens) {
+                  return t('main.myTokens')
+                }
+                if (isTransitionToPopularTokens) {
+                  return t('main.popularTokens')
+                }
+                if (shouldShowAllTokensCategory) {
+                  return t('main.allTokens')
+                }
+                return null
+              })()
+            : null
+
+          return (
+            <TokenListItem
+              key={item.key}
+              onClick={onClick}
+              size={item.size}
+              start={item.start}
+              token={currentToken}
+              chain={chain}
+              isBalanceLoading={isBalanceLoading}
+              accountAddress={account.address}
+              startAdornment={
+                startAdornmentLabel ? (
+                  <Typography
+                    sx={{
+                      fontSize: 14,
+                      fontWeight: 600,
+                      lineHeight: '16px',
+                      px: 1.5,
+                      pt: isFirstFeaturedToken ? 0 : 1,
+                      pb: 1,
+                    }}
+                  >
+                    {startAdornmentLabel}
+                  </Typography>
+                ) : null
               }
-              if (isTransitionToPopularTokens) {
-                return t('main.popularTokens')
-              }
-              if (shouldShowAllTokensCategory) {
-                return t('main.allTokens')
-              }
-              return null
-            })()
-          : null
-
-        return (
-          <TokenListItem
-            key={item.key}
-            onClick={onClick}
-            size={item.size}
-            start={item.start}
-            token={currentToken}
-            chain={chain}
-            isBalanceLoading={isBalanceLoading}
-            accountAddress={account.address}
-            startAdornment={
-              startAdornmentLabel ? (
-                <Typography
-                  sx={{
-                    fontSize: 14,
-                    fontWeight: 600,
-                    lineHeight: '16px',
-                    px: 1.5,
-                    pt: isFirstFeaturedToken ? 0 : 1,
-                    pb: 1,
-                  }}
-                >
-                  {startAdornmentLabel}
-                </Typography>
-              ) : null
-            }
-          />
-        )
-      })}
-    </List>
+              onShowTokenDetails={onShowTokenDetails}
+            />
+          )
+        })}
+      </List>
+      <TokenDetailsSheet ref={tokenDetailsSheetRef} chainId={chainId} />
+    </>
   )
 }

package/src/components/TokenList/types.ts

@@ -32,6 +32,7 @@ export interface TokenListItemBaseProps {
 export interface TokenListItemProps extends TokenListItemBaseProps {
   accountAddress?: string
   token: TokenAmount
+  onShowTokenDetails: (tokenAddress: string, noContractAddress: boolean) => void
   chain?: ExtendedChain
   isBalanceLoading?: boolean
   startAdornment?: React.ReactNode
@@ -39,6 +40,7 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
 }
 
 export interface TokenListItemButtonProps {
+  onShowTokenDetails: (tokenAddress: string, noContractAddress: boolean) => void
   onClick?: MouseEventHandler<HTMLDivElement>
   accountAddress?: string
   token: TokenAmount
@@ -49,3 +51,9 @@ export interface TokenListItemButtonProps {
 export interface TokenListItemAvatarProps {
   token: TokenAmount
 }
+
+export interface TokenDetailsSheetBase {
+  isOpen(): void
+  open(address: string, noContractAddress: boolean): void
+  close(): void
+}

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.23.3'
+export const version = '3.24.0'