feat: show token address in token list items

packages/widget/src/components/Header/WalletHeader.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useChain } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
-import { navigationRoutes, shortenWalletAddress } from '../../utils';
+import { navigationRoutes, shortenAddress } from '../../utils';
 import { HeaderAppBar, WalletButton } from './Header.style';
 import { WalletMenu } from './WalletMenu';
 
@@ -60,7 +60,7 @@ const ConnectedButton = () => {
   const { t } = useTranslation();
   const { subvariant } = useWidgetConfig();
   const { account, disconnect } = useWallet();
-  const walletAddress = shortenWalletAddress(account.address);
+  const walletAddress = shortenAddress(account.address);
   const { chain } = useChain(account.chainId);
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 

packages/widget/src/components/Step/Step.tsx

@@ -7,7 +7,7 @@ import { StepActions } from '../../components/StepActions';
 import { Token } from '../../components/Token';
 import { useChains } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { shortenWalletAddress } from '../../utils';
+import { shortenAddress } from '../../utils';
 import { DestinationWalletAddress } from './DestinationWalletAddress';
 import { GasStepProcess } from './GasStepProcess';
 import { StepProcess } from './StepProcess';
@@ -56,7 +56,7 @@ export const Step: React.FC<{
     }
   };
 
-  const formattedToAddress = shortenWalletAddress(toAddress);
+  const formattedToAddress = shortenAddress(toAddress);
   const toAddressLink = toAddress
     ? `${
         getChainById(step.action.toChainId)?.metamask.blockExplorerUrls[0]

packages/widget/src/components/TokenList/TokenList.style.tsx

@@ -1,7 +1,9 @@
-import { ListItem as MuiListItem } from '@mui/material';
+import type { StyledComponent } from '@emotion/styled';
+import type { ButtonProps, LinkProps } from '@mui/material';
+import { Button, ListItem as MuiListItem, buttonClasses } from '@mui/material';
 import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
 import { listItemTextClasses } from '@mui/material/ListItemText';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import { ListItemButton as ListItemButtonBase } from '../ListItemButton';
 
 export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
@@ -28,3 +30,26 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
     whiteSpace: 'nowrap',
   },
 }));
+
+export const LinkButton: StyledComponent<ButtonProps & LinkProps> = styled(
+  Button,
+)<ButtonProps & LinkProps>(({ theme }) => ({
+  lineHeight: 1,
+  fontSize: '0.75rem',
+  fontWeight: 400,
+  padding: theme.spacing(0.375, 0.75),
+  color: 'inherit',
+  backgroundColor: 'unset',
+  '&:hover': {
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? alpha(theme.palette.common.black, 0.04)
+        : alpha(theme.palette.common.white, 0.08),
+  },
+  [`.${buttonClasses.endIcon}`]: {
+    marginLeft: theme.spacing(0.25),
+  },
+  [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+    fontSize: '0.75rem',
+  },
+}));

packages/widget/src/components/TokenList/TokenList.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 import { useRef } from 'react';
 import { useWatch } from 'react-hook-form';
 import {
+  useChain,
   useDebouncedWatch,
   useTokenBalances,
   useTokenSearch,
@@ -29,6 +30,8 @@ export const TokenList: FC<TokenListProps> = ({
     320,
   );
 
+  const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
+
   const {
     tokens: chainTokens,
     tokensWithBalance,
@@ -60,7 +63,9 @@ export const TokenList: FC<TokenListProps> = ({
     useTokenSearch(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
 
   const isLoading =
-    isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);
+    isTokensLoading ||
+    isChainLoading ||
+    (tokenSearchEnabled && isSearchedTokenLoading);
 
   const tokens = filteredTokens.length
     ? filteredTokens
@@ -80,6 +85,7 @@ export const TokenList: FC<TokenListProps> = ({
         featuredTokensLength={featuredTokens?.length}
         scrollElementRef={parentRef}
         chainId={selectedChainId}
+        chain={chain}
         isLoading={isLoading}
         isBalanceLoading={isBalanceLoading}
         showBalance={account.isActive}

packages/widget/src/components/TokenList/TokenListItem.tsx

@@ -1,15 +1,18 @@
+import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
 import {
   Avatar,
   Box,
+  Link,
   ListItemAvatar,
   ListItemText,
   Skeleton,
+  Slide,
   Typography,
 } from '@mui/material';
-import { memo } from 'react';
+import { memo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { formatTokenPrice } from '../../utils';
-import { ListItem, ListItemButton } from './TokenList.style';
+import { formatTokenPrice, shortenAddress } from '../../utils';
+import { LinkButton, ListItem, ListItemButton } from './TokenList.style';
 import type { TokenListItemButtonProps, TokenListItemProps } from './types';
 
 export const TokenListItem: React.FC<TokenListItemProps> = memo(
@@ -18,6 +21,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
     size,
     start,
     token,
+    chain,
     showBalance,
     isBalanceLoading,
     startAdornment,
@@ -35,6 +39,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
         {startAdornment}
         <TokenListItemButton
           token={token}
+          chain={chain}
           showBalance={showBalance}
           isBalanceLoading={isBalanceLoading}
           onClick={handleClick}
@@ -48,19 +53,86 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
 export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   onClick,
   token,
+  chain,
   showBalance,
   isBalanceLoading,
 }) => {
   const { t } = useTranslation();
   const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
+  const container = useRef(null);
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>();
+  const [showAddress, setShowAddress] = useState(false);
+
+  const onMouseEnter = () => {
+    timeoutId.current = setTimeout(() => setShowAddress(true), 350);
+  };
+
+  const onMouseLeave = () => {
+    clearTimeout(timeoutId.current);
+    if (showAddress) {
+      setShowAddress(false);
+    }
+  };
+
   return (
-    <ListItemButton onClick={onClick} dense>
+    <ListItemButton
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      dense
+    >
       <ListItemAvatar>
         <Avatar src={token.logoURI} alt={token.symbol}>
           {token.symbol[0]}
         </Avatar>
       </ListItemAvatar>
-      <ListItemText primary={token.symbol} secondary={token.name} />
+      <ListItemText
+        primary={token.symbol}
+        secondaryTypographyProps={{
+          component: 'div',
+          sx: {
+            overflow: 'auto',
+            marginLeft: -0.75,
+          },
+        }}
+        secondary={
+          <Box position="relative" height={18} ref={container}>
+            <Slide
+              direction="down"
+              in={!showAddress}
+              container={container.current}
+              style={{
+                position: 'absolute',
+              }}
+              appear={false}
+            >
+              <Box pl={0.75}>{token.name}</Box>
+            </Slide>
+            <Slide
+              direction="up"
+              in={showAddress}
+              container={container.current}
+              style={{
+                position: 'absolute',
+              }}
+              appear={false}
+              mountOnEnter
+            >
+              <LinkButton
+                size="small"
+                LinkComponent={Link}
+                href={`${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`}
+                target="_blank"
+                rel="nofollow noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                endIcon={<OpenInNewIcon />}
+              >
+                {shortenAddress(token.address)}
+              </LinkButton>
+            </Slide>
+          </Box>
+        }
+      />
       {showBalance ? (
         isBalanceLoading ? (
           <TokenAmountSkeleton />

packages/widget/src/components/TokenList/VirtualizedTokenList.tsx

@@ -11,6 +11,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   featuredTokensLength,
   scrollElementRef,
   chainId,
+  chain,
   isLoading,
   isBalanceLoading,
   showBalance,
@@ -79,6 +80,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
             size={item.size}
             start={item.start}
             token={token}
+            chain={chain}
             isBalanceLoading={isBalanceLoading}
             showBalance={showBalance}
             startAdornment={

packages/widget/src/components/TokenList/types.ts

@@ -1,3 +1,4 @@
+import type { ExtendedChain } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
 import type { SwapFormType } from '../../providers';
 import type { TokenAmount } from '../../types';
@@ -15,6 +16,7 @@ export interface VirtualizedTokenListProps {
   isLoading: boolean;
   isBalanceLoading: boolean;
   chainId: number;
+  chain?: ExtendedChain;
   showBalance?: boolean;
   showFeatured?: boolean;
   onClick(tokenAddress: string): void;
@@ -29,6 +31,7 @@ export interface TokenListItemBaseProps {
 export interface TokenListItemProps extends TokenListItemBaseProps {
   showBalance?: boolean;
   token: TokenAmount;
+  chain?: ExtendedChain;
   isBalanceLoading?: boolean;
   startAdornment?: React.ReactNode;
   endAdornment?: React.ReactNode;
@@ -38,5 +41,6 @@ export interface TokenListItemButtonProps {
   onClick?(): void;
   showBalance?: boolean;
   token: TokenAmount;
+  chain?: ExtendedChain;
   isBalanceLoading?: boolean;
 }

packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx

@@ -22,7 +22,7 @@ import {
   formatTokenAmount,
   hasEnumFlag,
   navigationRoutes,
-  shortenWalletAddress,
+  shortenAddress,
 } from '../../utils';
 import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
 
@@ -111,7 +111,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
           amount: token.amount,
           tokenSymbol: token.symbol,
           chainName: getChainById(token.chainId)?.name,
-          walletAddress: shortenWalletAddress(route.toAddress),
+          walletAddress: shortenAddress(route.toAddress),
         });
       }
       handlePrimaryButton = handleDone;
@@ -128,7 +128,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
           amount: token.amount,
           tokenSymbol: token.symbol,
           chainName: getChainById(token.chainId)?.name,
-          walletAddress: shortenWalletAddress(route.toAddress),
+          walletAddress: shortenAddress(route.toAddress),
         });
       }
       handlePrimaryButton = handlePartialDone;
@@ -145,7 +145,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
           amount: token.amount,
           tokenSymbol: token.symbol,
           chainName: getChainById(token.chainId)?.name,
-          walletAddress: shortenWalletAddress(route.toAddress),
+          walletAddress: shortenAddress(route.toAddress),
         });
       }
       break;

packages/widget/src/utils/wallet.ts

@@ -1,4 +1,4 @@
-export const shortenWalletAddress = (address?: string) =>
+export const shortenAddress = (address?: string) =>
   address
     ? `${address.substring(0, 5)}...${address.substring(address.length - 4)}`
     : null;