@lifi/widget 4.0.0-alpha.3 → 4.0.0-alpha.5

package/src/components/Token/Token.style.tsx

@@ -1,13 +1,19 @@
 import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
 
-export const TextSecondaryContainer = styled(Box)(() => ({
+export const TextSecondaryContainer: React.FC<
+  React.ComponentProps<typeof Box> & { dot?: boolean }
+> = styled(Box)(() => ({
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
   flex: 1,
+  height: 16,
 }))
 
-export const TextSecondary = styled(Typography, {
+export const TextSecondary: React.FC<
+  React.ComponentProps<typeof Typography> & { dot?: boolean }
+> = styled(Typography, {
   shouldForwardProp: (prop: string) => !['dot'].includes(prop),
 })<{ dot?: boolean }>(({ theme }) => ({
   fontSize: 12,
@@ -19,13 +25,15 @@ export const TextSecondary = styled(Typography, {
     {
       props: ({ dot }) => dot,
       style: {
-        color: `rgba(${theme.vars.palette.text.secondaryChannel} / 0.56)`,
+        color: `color-mix(in srgb, ${theme.vars.palette.text.secondary} 56%, transparent)`,
       },
     },
   ],
 }))
 
-export const TokenDivider = styled(Box)(({ theme }) => ({
+export const TokenDivider: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
   height: 16,
   borderLeftWidth: 2,
   borderLeftStyle: 'solid',

package/src/components/Token/Token.tsx

@@ -144,7 +144,7 @@ const TokenBase: FC<TokenProps & BoxProps> = ({
             })}
           </TextFitter>
         </Box>
-        <TextSecondaryContainer as="span">
+        <TextSecondaryContainer>
           <TextSecondary>
             {t('format.currency', {
               value: tokenPrice,
@@ -293,8 +293,8 @@ export const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({
             flex: 1,
           }}
         >
-          <Skeleton width={112} height={24} variant="text" />
-          <TextSecondaryContainer as="span">
+          <Skeleton width={112} height={28} variant="text" />
+          <TextSecondaryContainer>
             <Skeleton
               width={48}
               height={12}

package/src/components/TokenList/PinTokenButton.tsx

@@ -1,6 +1,7 @@
 import PushPinIcon from '@mui/icons-material/PushPin'
 import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'
 import { IconButton } from '@mui/material'
+import type { JSX } from 'react'
 import { usePinnedTokensStore } from '../../stores/pinnedTokens/PinnedTokensStore.js'
 
 interface PinTokenButtonProps {
@@ -11,7 +12,7 @@ interface PinTokenButtonProps {
 export const PinTokenButton = ({
   chainId,
   tokenAddress,
-}: PinTokenButtonProps) => {
+}: PinTokenButtonProps): JSX.Element => {
   const [pinnedTokens, pinToken, unpinToken] = usePinnedTokensStore((state) => [
     state.pinnedTokens,
     state.pinToken,

package/src/components/TokenList/TokenDetailsSheet.tsx

@@ -1,10 +1,13 @@
+import type React from 'react'
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { BottomSheet } from '../BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../BottomSheet/types.js'
 import { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'
 import type { TokenDetailsSheetBase } from './types.js'
 
-export const TokenDetailsSheet = forwardRef<TokenDetailsSheetBase>((_, ref) => {
+export const TokenDetailsSheet: React.ForwardRefExoticComponent<
+  React.RefAttributes<TokenDetailsSheetBase>
+> = forwardRef<TokenDetailsSheetBase>((_, ref) => {
   const bottomSheetRef = useRef<BottomSheetBase>(null)
   const [tokenAddress, setTokenAddress] = useState<string | undefined>(
     undefined

package/src/components/TokenList/TokenDetailsSheetContent.style.tsx

@@ -1,10 +1,11 @@
 import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
 import type { PageContainerProps } from '../PageContainer.js'
 import { PageContainer } from '../PageContainer.js'
 
-export const TokenDetailsSheetContainer = styled(
-  PageContainer
-)<PageContainerProps>(({ theme }) => ({
+export const TokenDetailsSheetContainer: React.FC<
+  React.ComponentProps<typeof PageContainer> & PageContainerProps
+> = styled(PageContainer)<PageContainerProps>(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spacing(2),
@@ -12,7 +13,9 @@ export const TokenDetailsSheetContainer = styled(
   paddingBottom: theme.spacing(3),
 }))
 
-export const TokenDetailsSheetHeader = styled(Box)(({ theme }) => ({
+export const TokenDetailsSheetHeader: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'flex-start',
@@ -20,15 +23,18 @@ export const TokenDetailsSheetHeader = styled(Box)(({ theme }) => ({
   gap: theme.spacing(2),
 }))
 
-export const Label = styled(Typography)(({ theme }) => ({
+export const Label: React.FC<React.ComponentProps<typeof Typography>> = styled(
+  Typography
+)(({ theme }) => ({
   fontWeight: 500,
   fontSize: '12px',
   lineHeight: '16px',
   color: theme.vars.palette.text.secondary,
 }))
 
-export const MetricContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.spacing(1),
-}))
+export const MetricContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+  }))

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -2,6 +2,7 @@ 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 React from 'react'
 import { forwardRef, type PropsWithChildren, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
@@ -26,195 +27,196 @@ interface TokenDetailsSheetContentProps {
 
 const noDataLabel = '-'
 
-export const TokenDetailsSheetContent = forwardRef<
-  TokenDetailsSheetBase,
-  TokenDetailsSheetContentProps
->(({ tokenAddress, chainId, withoutContractAddress }, ref) => {
-  const { t } = useTranslation()
-  const { getAddressLink } = useExplorer()
-  const { getChainById } = useAvailableChains()
+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()
 
-  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
-                  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?.priceUSD
-            ? t('format.currency', {
-                value: token.priceUSD,
-              })
-            : noDataLabel}
-        </Typography>
-      </MetricWithSkeleton>
-      {!withoutContractAddress && (
-        <MetricWithSkeleton
-          isLoading={isLoading}
-          label={t('tokenMetric.contractAddress')}
-          width={200}
-          height={24}
-        >
+    return (
+      <TokenDetailsSheetContainer>
+        <TokenDetailsSheetHeader>
           <Box
             sx={{
               display: 'flex',
               flexDirection: 'row',
               alignItems: 'center',
-              gap: 1,
+              gap: 3,
             }}
           >
-            <Typography
+            <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?.priceUSD
+              ? t('format.currency', {
+                  value: token.priceUSD,
+                })
+              : noDataLabel}
+          </Typography>
+        </MetricWithSkeleton>
+        {!withoutContractAddress && (
+          <MetricWithSkeleton
+            isLoading={isLoading}
+            label={t('tokenMetric.contractAddress')}
+            width={200}
+            height={24}
+          >
+            <Box
               sx={{
-                fontWeight: 700,
-                fontSize: '18px',
-                lineHeight: '24px',
-                color: 'text.primary',
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 1,
               }}
             >
-              {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()}
+              <Typography
+                sx={{
+                  fontWeight: 700,
+                  fontSize: '18px',
+                  lineHeight: '24px',
+                  color: 'text.primary',
+                }}
               >
-                <OpenInNewRounded fontSize="inherit" />
-              </CardIconButton>
-            )}
-          </Box>
-        </MetricWithSkeleton>
-      )}
-      <MetricWithSkeleton
-        isLoading={isLoading}
-        label={t('tokenMetric.marketCap')}
-        width={200}
-        height={24}
-      >
-        <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>
+        )}
+        <MetricWithSkeleton
+          isLoading={isLoading}
+          label={t('tokenMetric.marketCap')}
+          width={200}
+          height={24}
         >
-          {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',
-          }}
+          <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}
         >
-          {token?.volumeUSD24H
-            ? t('format.currency', {
-                value: token.volumeUSD24H,
-                notation: 'compact',
-                compactDisplay: 'short',
-                maximumFractionDigits: 2,
-              })
-            : noDataLabel}
-        </Typography>
-      </MetricWithSkeleton>
-    </TokenDetailsSheetContainer>
-  )
-})
+          <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/TokenList.style.tsx

@@ -4,36 +4,41 @@ import {
   List as MuiList,
   styled,
 } from '@mui/material'
+import type React from 'react'
 import { ListItem as ListItemBase } from '../ListItem/ListItem.js'
 
-export const ListItem = styled(ListItemBase)(() => ({
+export const ListItem: React.FC<
+  React.ComponentProps<typeof ListItemBase> & IconButtonProps & LinkProps
+> = styled(ListItemBase)(() => ({
   position: 'absolute',
   top: 0,
   left: 0,
 }))
 
-export const List = styled(MuiList)(({ theme }) => ({
+export const List: React.FC<
+  React.ComponentProps<typeof MuiList> & IconButtonProps & LinkProps
+> = styled(MuiList)(({ theme }) => ({
   cursor: 'pointer',
   marginLeft: theme.spacing(1.5),
   marginRight: theme.spacing(1.5),
 }))
 
-export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
-  ({ theme }) => ({
-    lineHeight: 1,
-    fontSize: 12,
-    fontWeight: 400,
-    padding: theme.spacing(0.375, 0.375),
-    margin: theme.spacing(0, 0, 0, 0.25),
-    color: 'inherit',
-    backgroundColor: 'unset',
-    minWidth: 'unset',
-    borderRadius: theme.vars.shape.borderRadiusTertiary,
-    '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-    },
-    svg: {
-      fontSize: 14,
-    },
-  })
-)
+export const IconButton: React.FC<
+  React.ComponentProps<typeof MuiIconButton> & IconButtonProps & LinkProps
+> = styled(MuiIconButton)<IconButtonProps & LinkProps>(({ theme }) => ({
+  lineHeight: 1,
+  fontSize: 12,
+  fontWeight: 400,
+  padding: theme.spacing(0.375, 0.375),
+  margin: theme.spacing(0, 0, 0, 0.25),
+  color: 'inherit',
+  backgroundColor: 'unset',
+  minWidth: 'unset',
+  borderRadius: theme.vars.shape.borderRadiusTertiary,
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  },
+  svg: {
+    fontSize: 14,
+  },
+}))

package/src/components/TokenList/TokenListItem.tsx

@@ -13,7 +13,7 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material'
-import type { MouseEventHandler } from 'react'
+import type { JSX, MouseEventHandler } from 'react'
 import { memo, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLongPress } from '../../hooks/useLongPress.js'
@@ -371,7 +371,7 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
   }
 )
 
-export const TokenListItemSkeleton = () => {
+export const TokenListItemSkeleton = (): JSX.Element => {
   return (
     <ListItem
       secondaryAction={<TokenAmountSkeleton />}

package/src/components/TokenList/useTokenSelect.ts

@@ -11,13 +11,19 @@ import { WidgetEvent } from '../../types/events.js'
 import type { DisabledUI } from '../../types/widget.js'
 import { isItemAllowed } from '../../utils/item.js'
 
-export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
+export const useTokenSelect = (
+  formType: FormType,
+  onClick?: () => void
+): ((tokenAddress: string, chainId?: number) => void) => {
   const { subvariant, disabledUI, chains: chainsConfig } = useWidgetConfig()
   const splitSubvariant = useSplitSubvariantStore((store) => store.state)
   const emitter = useWidgetEvents()
   const { setFieldValue, getFieldValues } = useFieldActions()
   const autoPopulateToAddress = useToAddressAutoPopulate()
-  const setChain = useChainOrderStore((state) => state.setChain)
+  const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [
+    state.setChain,
+    state.setIsAllNetworks,
+  ])
 
   const tokenKey = FormKeyHelper.getTokenKey(formType)
 
@@ -67,12 +73,18 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       }
 
       // If no opposite token is selected, synchronize the opposite chain
-      // to match the currently selected chain (if allowed)
+      // to match the currently selected chain (if allowed).
+      // In default exchange mode, also collapse "All Networks" on the opposite
+      // side - same-chain swap is the most common action.
       if (
         !selectedOppositeTokenAddress &&
         selectedChainId &&
         isItemAllowed(selectedChainId, chainsConfig?.[oppositeFormType])
       ) {
+        const isDefaultExchange = !subvariant || subvariant === 'default'
+        if (isDefaultExchange) {
+          setIsAllNetworks(false, oppositeFormType)
+        }
         setFieldValue(
           FormKeyHelper.getChainKey(oppositeFormType),
           selectedChainId,
@@ -115,6 +127,7 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       getFieldValues,
       onClick,
       setChain,
+      setIsAllNetworks,
       setFieldValue,
       subvariant,
       splitSubvariant,

package/src/components/TokenRate/TokenRate.style.ts

@@ -1,6 +1,9 @@
 import { styled, Typography } from '@mui/material'
+import type React from 'react'
 
-export const TokenRateTypography = styled(Typography)(({ theme }) => ({
+export const TokenRateTypography: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
   fontSize: 14,
   lineHeight: 1.429,
   fontWeight: 500,