@lifi/widget 3.23.3 → 3.24.0-alpha.0

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/components/TransactionDetails.tsx

@@ -1,5 +1,5 @@
 import type { RouteExtended } from '@lifi/sdk'
-import { isGaslessStep } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
 import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
@@ -71,10 +71,10 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       ) ?? 0
   }
 
-  const hasGaslessSupport = route.steps.some(isGaslessStep)
+  const hasRelayerSupport = route.steps.every(isRelayerStep)
 
   const showIntegratorFeeCollectionDetails =
-    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport
+    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasRelayerSupport
 
   return (
     <Card selectionColor="secondary" {...props}>
@@ -100,7 +100,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           <FeeBreakdownTooltip
             gasCosts={gasCosts}
             feeCosts={feeCosts}
-            relayerSupport={hasGaslessSupport}
+            relayerSupport={hasRelayerSupport}
           >
             <Box
               onClick={toggleCard}
@@ -117,7 +117,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 <LocalGasStationRounded fontSize="inherit" />
               </IconTypography>
               <Typography
-                data-value={hasGaslessSupport ? 0 : combinedFeesUSD}
+                data-value={hasRelayerSupport ? 0 : combinedFeesUSD}
                 sx={{
                   fontSize: 14,
                   color: 'text.primary',
@@ -125,7 +125,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                   lineHeight: 1.429,
                 }}
               >
-                {hasGaslessSupport
+                {hasRelayerSupport
                   ? t('main.fees.free')
                   : t('format.currency', { value: combinedFeesUSD })}
               </Typography>
@@ -157,13 +157,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             <Typography variant="body2">{t('main.fees.network')}</Typography>
             <FeeBreakdownTooltip
               gasCosts={gasCosts}
-              relayerSupport={hasGaslessSupport}
+              relayerSupport={hasRelayerSupport}
             >
               <Typography
                 variant="body2"
                 sx={{ fontWeight: 600, cursor: 'help' }}
               >
-                {hasGaslessSupport
+                {hasRelayerSupport
                   ? t('main.fees.free')
                   : t('format.currency', {
                       value: gasCostUSD,

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-alpha.0'

package/src/i18n/bn.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "আপনার {{chainName}} গ্যাস কম। চালিয়ে যাওয়ার মাধ্যমে, আপনি সোওয়াপ সম্পূর্ণ করার জন্য পর্যাপ্ত গ্যাস পাবেন।",
       "emptyActiveTransactions": "",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "",
     "noConnectedWallets": "",
     "noRecentWallets": ""
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/de.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "Sie haben nicht genug Gas auf {{chainName}}. Wenn Sie fortfahren, erhalten Sie zusätzlich genug Gas um den Swap abzuschließen.",
       "emptyActiveTransactions": "Laufende Swaps werden hier angezeigt. Sobald Sie fertig sind, finden Sie sie in der Transaktionshistorie.",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "",
     "noConnectedWallets": "",
     "noRecentWallets": ""
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/en.json

@@ -341,5 +341,9 @@
     "noBookmarkedWallets": "No bookmarked wallets",
     "noConnectedWallets": "No connected wallets",
     "noRecentWallets": "No recent wallets"
+  },
+  "tokenMetric": {
+    "currentPrice": "Current price",
+    "contractAddress": "Contract address"
   }
 }

package/src/i18n/es.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "Tienes poco gas en {{chainName}}. Al continuar, obtendrás suficiente gas para completar la transacción.",
       "emptyActiveTransactions": "Las transacciones en progreso aparecerán aquí. Una vez completadas, encuéntralas en el historial de transacciones.",
       "emptyBridgesList": "No pudimos encontrar ningún puente que coincida con tu búsqueda",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "No hay billeteras preferidas",
     "noConnectedWallets": "No hay billeteras conectadas",
     "noRecentWallets": "No hay billeteras recientes"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/fr.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "Vous avez peu de gaz sur {{chainName}}. En continuant, vous aurez assez de gaz pour compléter l'échange.",
       "emptyActiveTransactions": "Les transactions en cours apparaîtront ici. Une fois terminées, retrouvez-les dans l'historique des transactions.",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "Aucun portefeuille favori",
     "noConnectedWallets": "Aucun portefeuille connecté",
     "noRecentWallets": "Aucun portefeuille récent"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/hi.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "",
       "emptyActiveTransactions": "",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "",
     "noConnectedWallets": "",
     "noRecentWallets": ""
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/id.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "Gas anda hampir habis {{chainName}}. Dengan melanjutkan, anda akan mendapatkan cukup gas untuk menyelesaikan penukaran.",
       "emptyActiveTransactions": "Transaksi yang sedang berlangsung akan muncul di sini. Setelah selesai, temukan di riwayat transaksi.",
       "emptyBridgesList": "Kami tidak dapat menemukan bridge yang sesuai dengan pencarian Anda",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "Tidak ada dompet yang ditandai",
     "noConnectedWallets": "Tida ada dompet yang di hubungkan",
     "noRecentWallets": "Tidak ada dompet terakhir yang digunakan"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/it.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "Livello basso di gas su {{chainName}}. Continuando avrai abbastanza gas per completare lo scambio.",
       "emptyActiveTransactions": "Le transazioni in corso appariranno qui. Una volta completate, potrai trovarle nella cronologia delle transazioni.",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "",
     "noConnectedWallets": "",
     "noRecentWallets": ""
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }