@lifi/widget 4.0.0 → 4.1.0

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -3,7 +3,7 @@ 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 React from 'react'
-import { forwardRef, type PropsWithChildren, useMemo } from 'react'
+import { type JSX, type PropsWithChildren, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
@@ -17,208 +17,207 @@ import {
   TokenDetailsSheetContainer,
   TokenDetailsSheetHeader,
 } from './TokenDetailsSheetContent.style.js'
-import type { TokenDetailsSheetBase } from './types.js'
 
 interface TokenDetailsSheetContentProps {
   tokenAddress: string | undefined
   chainId: number | undefined
   withoutContractAddress: boolean
+  onClose: () => void
 }
 
 const noDataLabel = '-'
 
-export const TokenDetailsSheetContent: React.ForwardRefExoticComponent<
-  TokenDetailsSheetContentProps & React.RefAttributes<TokenDetailsSheetBase>
-> = forwardRef<TokenDetailsSheetBase, TokenDetailsSheetContentProps>(
-  ({ tokenAddress, chainId, withoutContractAddress }, ref) => {
-    const { t } = useTranslation()
-    const { getAddressLink } = useExplorer()
-    const { getChainById } = useAvailableChains()
+export const TokenDetailsSheetContent = ({
+  tokenAddress,
+  chainId,
+  withoutContractAddress,
+  onClose,
+}: TokenDetailsSheetContentProps): JSX.Element => {
+  const { t } = useTranslation()
+  const { getAddressLink } = useExplorer()
+  const { getChainById } = useAvailableChains()
 
-    const { token, isLoading } = useToken(chainId, tokenAddress, true)
-    const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])
+  const { token, isLoading } = useToken(chainId, tokenAddress, true)
+  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
-      }
+  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
-                    sx={{
-                      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}
+  return (
+    <TokenDetailsSheetContainer>
+      <TokenDetailsSheetHeader>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 3,
+          }}
         >
-          <Typography
-            sx={{
-              fontWeight: 700,
-              fontSize: '32px',
-              lineHeight: '40px',
-              color: 'text.primary',
-            }}
-          >
-            {token?.priceUSD
-              ? t('format.currency', {
-                  value: token.priceUSD,
-                })
-              : noDataLabel}
-          </Typography>
-        </MetricWithSkeleton>
-        {!withoutContractAddress && (
-          <MetricWithSkeleton
+          <TokenAvatar
+            token={token}
+            chain={chain}
+            tokenAvatarSize={72}
+            chainAvatarSize={28}
             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()}
+          />
+          <MetricContainer>
+            {isLoading ? (
+              <>
+                <Skeleton variant="rounded" width={80} height={24} />
+                <Skeleton variant="rounded" width={80} height={16} />
+              </>
+            ) : (
+              <>
+                <Typography
+                  sx={{
+                    fontWeight: 700,
+                    fontSize: '24px',
+                    lineHeight: '24px',
+                    color: 'text.primary',
+                  }}
                 >
-                  <OpenInNewRounded fontSize="inherit" />
-                </CardIconButton>
-              )}
-            </Box>
-          </MetricWithSkeleton>
-        )}
-        <MetricWithSkeleton
-          isLoading={isLoading}
-          label={t('tokenMetric.marketCap')}
-          width={200}
-          height={24}
+                  {token?.symbol || noDataLabel}
+                </Typography>
+                <Label>{token?.name || noDataLabel}</Label>
+              </>
+            )}
+          </MetricContainer>
+        </Box>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation()
+            onClose()
+          }}
+          sx={{ mt: '-8px', mr: '-8px' }}
         >
-          <Typography
-            sx={{
-              fontWeight: 700,
-              fontSize: '18px',
-              lineHeight: '24px',
-              color: 'text.primary',
-            }}
-          >
-            {token?.marketCapUSD
-              ? t('format.currency', {
-                  value: token.marketCapUSD,
-                  notation: 'compact',
-                  compactDisplay: 'short',
-                  maximumFractionDigits: 2,
-                })
-              : noDataLabel}
-          </Typography>
-        </MetricWithSkeleton>
+          <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?.priceUSD
+            ? t('format.currency', {
+                value: token.priceUSD,
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
+      {!withoutContractAddress && (
         <MetricWithSkeleton
           isLoading={isLoading}
-          label={t('tokenMetric.volume24h')}
+          label={t('tokenMetric.contractAddress')}
           width={200}
           height={24}
         >
-          <Typography
+          <Box
             sx={{
-              fontWeight: 700,
-              fontSize: '18px',
-              lineHeight: '24px',
-              color: 'text.primary',
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 1,
             }}
           >
-            {token?.volumeUSD24H
-              ? t('format.currency', {
-                  value: token.volumeUSD24H,
-                  notation: 'compact',
-                  compactDisplay: 'short',
-                  maximumFractionDigits: 2,
-                })
-              : noDataLabel}
-          </Typography>
+            <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>
-    )
-  }
-)
+      )}
+      <MetricWithSkeleton
+        isLoading={isLoading}
+        label={t('tokenMetric.marketCap')}
+        width={200}
+        height={24}
+      >
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '18px',
+            lineHeight: '24px',
+            color: 'text.primary',
+          }}
+        >
+          {token?.marketCapUSD
+            ? t('format.currency', {
+                value: token.marketCapUSD,
+                notation: 'compact',
+                compactDisplay: 'short',
+                maximumFractionDigits: 2,
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
+      <MetricWithSkeleton
+        isLoading={isLoading}
+        label={t('tokenMetric.volume24h')}
+        width={200}
+        height={24}
+      >
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '18px',
+            lineHeight: '24px',
+            color: 'text.primary',
+          }}
+        >
+          {token?.volumeUSD24H
+            ? t('format.currency', {
+                value: token.volumeUSD24H,
+                notation: 'compact',
+                compactDisplay: 'short',
+                maximumFractionDigits: 2,
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
+    </TokenDetailsSheetContainer>
+  )
+}
 
 interface MetricWithSkeletonProps {
   label: string

package/src/components/TokenList/useTokenSelect.ts

@@ -6,7 +6,7 @@ import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
 import type { FormType } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { useSplitModeStore } from '../../stores/settings/useSplitModeStore.js'
+import { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'
 import { WidgetEvent } from '../../types/events.js'
 import type { DisabledUIConfig } from '../../types/widget.js'
 import { isItemAllowed } from '../../utils/item.js'
@@ -16,7 +16,7 @@ export const useTokenSelect = (
   onClick?: () => void
 ): ((tokenAddress: string, chainId?: number) => void) => {
   const { mode, disabledUI, chains: chainsConfig } = useWidgetConfig()
-  const splitMode = useSplitModeStore((store) => store.state)
+  const splitMode = useSplitMode()
   const emitter = useWidgetEvents()
   const { setFieldValue, getFieldValues } = useFieldActions()
   const autoPopulateToAddress = useToAddressAutoPopulate()

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.0.0'
+export const version = '4.1.0'

package/src/hooks/useSwapOnly.ts

@@ -1,6 +1,3 @@
-import { useSplitModeStore } from '../stores/settings/useSplitModeStore.js'
+import { useSplitMode } from '../stores/navigationTabs/useNavigationTabsStore.js'
 
-export const useSwapOnly = (): boolean => {
-  const state = useSplitModeStore((state) => state.state)
-  return state === 'swap'
-}
+export const useSwapOnly = (): boolean => useSplitMode() === 'swap'

package/src/hooks/useToAddressRequirements.ts

@@ -48,12 +48,12 @@ export const useToAddressRequirements = (
     contractCode: fromContractCode,
     isLoading: isFromContractLoading,
     isFetched: isFromContractFetched,
-  } = useIsContractAddress(account.address, fromChainId, account.chainType)
+  } = useIsContractAddress(account.address, fromChain?.id, account.chainType)
   const {
     isContractAddress: isToContractAddress,
     isLoading: isToContractLoading,
     isFetched: isToContractFetched,
-  } = useIsContractAddress(toAddress, toChainId, toChain?.chainType)
+  } = useIsContractAddress(toAddress, toChain?.id, toChain?.chainType)
 
   const isDifferentChainType =
     fromChain && toChain && fromChain.chainType !== toChain.chainType

package/src/pages/MainPage/ReviewButton.tsx

@@ -5,7 +5,7 @@ import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useSplitModeStore } from '../../stores/settings/useSplitModeStore.js'
+import { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'
 import { WidgetEvent } from '../../types/events.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 
@@ -14,7 +14,7 @@ export const ReviewButton: React.FC = () => {
   const navigate = useNavigate()
   const emitter = useWidgetEvents()
   const { mode, modeOptions } = useWidgetConfig()
-  const splitState = useSplitModeStore((state) => state.state)
+  const splitState = useSplitMode()
   const { toAddress, requiredToAddress } = useToAddressRequirements()
   const { routes, setReviewableRoute } = useRoutes()