@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/Avatar/AccountAvatar.tsx

@@ -0,0 +1,50 @@
+import { getConnectorIcon } from '@lifi/wallet-management'
+import type { Account } from '@lifi/widget-provider'
+import Wallet from '@mui/icons-material/Wallet'
+import { Badge } from '@mui/material'
+import type { JSX } from 'react'
+import { useChain } from '../../hooks/useChain.js'
+import type { ToAddress } from '../../types/widget.js'
+import { AvatarDefault, AvatarMasked } from './Avatar.style.js'
+import { ChainBadgeContent } from './ChainBadgeContent.js'
+
+interface AccountAvatarProps {
+  chainId?: number
+  account?: Account
+  toAddress?: ToAddress
+  empty?: boolean
+}
+
+export const AccountAvatar = ({
+  chainId,
+  account,
+  empty,
+  toAddress,
+}: AccountAvatarProps): JSX.Element => {
+  const { chain } = useChain(chainId)
+
+  const avatar = empty ? (
+    <AvatarDefault />
+  ) : account?.connector || toAddress?.logoURI ? (
+    <AvatarMasked
+      src={toAddress?.logoURI || getConnectorIcon(account?.connector)}
+      alt={toAddress?.name || account?.connector?.name}
+    >
+      {(toAddress?.name || account?.connector?.name)?.[0]}
+    </AvatarMasked>
+  ) : (
+    <AvatarDefault>
+      <Wallet sx={{ fontSize: 20 }} />
+    </AvatarDefault>
+  )
+
+  return (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={<ChainBadgeContent chain={chain} />}
+    >
+      {avatar}
+    </Badge>
+  )
+}

package/src/components/Avatar/Avatar.style.tsx

@@ -0,0 +1,100 @@
+import type { CSSObject } from '@mui/material'
+import {
+  AvatarGroup,
+  avatarClasses,
+  Box,
+  badgeClasses,
+  Avatar as MuiAvatar,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+import { getAvatarMask } from './utils.js'
+
+export const AvatarMasked: React.FC<
+  React.ComponentProps<typeof MuiAvatar> & {
+    avatarSize?: number
+    badgeSize?: number
+  }
+> = styled(MuiAvatar, {
+  shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',
+})<{ avatarSize?: number; badgeSize?: number }>(
+  ({ avatarSize = 40, badgeSize = 16 }) => ({
+    width: avatarSize,
+    height: avatarSize,
+    mask: getAvatarMask(badgeSize),
+  })
+)
+
+export const TokenAvatarGroup: React.FC<
+  React.ComponentProps<typeof AvatarGroup> & { badgeSize?: number }
+> = styled(AvatarGroup)(({ theme }) => ({
+  [`& .${badgeClasses.badge}:last-of-type .${avatarClasses.root}`]: {
+    boxSizing: 'border-box',
+  },
+  [`& .${avatarClasses.root}`]: {
+    border: 'none',
+    marginLeft: 0,
+  },
+  [`& .${badgeClasses.root}:first-of-type`]: {
+    marginLeft: theme.spacing(-1),
+    border: 'none',
+  },
+  [`& .${badgeClasses.root}:last-of-type`]: {
+    border: 'none',
+  },
+}))
+
+export const AvatarDefault: React.FC<
+  React.ComponentProps<typeof Box> & { badgeSize?: number }
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'badgeSize',
+})<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => {
+  const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%',
+    height: root?.height,
+    width: root?.width,
+    color: theme.vars.palette.text.secondary,
+    mask: getAvatarMask(badgeSize),
+    background: theme.vars.palette.grey[300],
+    ...theme.applyStyles('dark', {
+      background: theme.vars.palette.grey[800],
+    }),
+  }
+})
+
+export const AvatarDefaultBadge: React.FC<
+  React.ComponentProps<typeof Box> & { size?: number }
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'size',
+})<{ size?: number }>(({ theme, size = 16 }) => {
+  return {
+    borderRadius: '50%',
+    height: size,
+    width: size,
+    background: theme.vars.palette.grey[300],
+    ...theme.applyStyles('dark', {
+      background: theme.vars.palette.grey[800],
+    }),
+  }
+})
+
+export const AvatarSkeletonContainer: React.FC<
+  React.ComponentProps<typeof Box> & { badgeSize?: number }
+> = styled(Box)(({ theme }) => ({
+  background: theme.vars.palette.background.paper,
+  borderRadius: '50%',
+}))
+
+export const AvatarSkeletonMaskedContainer: React.FC<
+  React.ComponentProps<typeof Box> & { badgeSize?: number }
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'badgeSize',
+})<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => ({
+  background: theme.vars.palette.background.paper,
+  borderRadius: '50%',
+  mask: getAvatarMask(badgeSize),
+}))

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,50 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import type { SxProps, Theme } from '@mui/material'
+import { Badge, Skeleton } from '@mui/material'
+import { AvatarDefault, AvatarSkeletonMaskedContainer } from './Avatar.style.js'
+import { ChainBadgeContent } from './ChainBadgeContent.js'
+import { SmallAvatarSkeleton } from './SmallAvatar.js'
+
+export const AvatarBadgedDefault: React.FC<{
+  sx?: SxProps<Theme>
+  chain?: ExtendedChain
+}> = ({ sx, chain }) => {
+  return (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={<ChainBadgeContent chain={chain} />}
+      sx={sx}
+    >
+      <AvatarDefault />
+    </Badge>
+  )
+}
+
+export const AvatarBadgedSkeleton: React.FC<{
+  sx?: SxProps<Theme>
+  avatarSize?: number
+  badgeSize?: number
+}> = ({ sx, avatarSize = 40, badgeSize = 16 }) => {
+  return (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={<SmallAvatarSkeleton size={badgeSize} />}
+      sx={sx}
+    >
+      <AvatarSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />
+    </Badge>
+  )
+}
+
+const AvatarSkeleton: React.FC<{
+  avatarSize: number
+  badgeSize: number
+}> = ({ avatarSize, badgeSize }) => {
+  return (
+    <AvatarSkeletonMaskedContainer badgeSize={badgeSize}>
+      <Skeleton width={avatarSize} height={avatarSize} variant="circular" />
+    </AvatarSkeletonMaskedContainer>
+  )
+}

package/src/components/Avatar/ChainBadgeContent.tsx

@@ -0,0 +1,22 @@
+import type { Chain, ExtendedChain } from '@lifi/sdk'
+import { AvatarDefaultBadge } from './Avatar.style.js'
+import { SmallAvatar } from './SmallAvatar.js'
+
+interface ChainBadgeContentProps {
+  chain?: Chain | ExtendedChain
+  size?: number
+}
+
+export const ChainBadgeContent: React.FC<ChainBadgeContentProps> = ({
+  chain,
+  size = 16,
+}) => {
+  if (chain?.logoURI) {
+    return (
+      <SmallAvatar src={chain.logoURI} alt={chain.name} size={size}>
+        {chain.name?.[0]}
+      </SmallAvatar>
+    )
+  }
+  return <AvatarDefaultBadge size={size} />
+}

package/src/components/Avatar/SmallAvatar.tsx

@@ -0,0 +1,27 @@
+import { Avatar, Skeleton, styled } from '@mui/material'
+import type React from 'react'
+import { AvatarSkeletonContainer } from './Avatar.style.js'
+
+interface SmallAvatarProps {
+  size?: number
+}
+
+export const SmallAvatar: React.FC<
+  React.ComponentProps<typeof Avatar> & SmallAvatarProps
+> = styled(Avatar, {
+  shouldForwardProp: (prop) => prop !== 'size',
+})<SmallAvatarProps>(({ theme, size = 16 }) => ({
+  background: theme.vars.palette.background.paper,
+  width: size,
+  height: size,
+}))
+
+export const SmallAvatarSkeleton: React.FC<{
+  size?: number
+}> = ({ size = 16 }) => {
+  return (
+    <AvatarSkeletonContainer>
+      <Skeleton width={size} height={size} variant="circular" />
+    </AvatarSkeletonContainer>
+  )
+}

package/src/components/Avatar/TokenAvatar.tsx

@@ -0,0 +1,99 @@
+import type { Chain, StaticToken } from '@lifi/sdk'
+import type { SxProps, Theme } from '@mui/material'
+import { Badge } from '@mui/material'
+import { useChain } from '../../hooks/useChain.js'
+import { useToken } from '../../hooks/useToken.js'
+import { AvatarBadgedSkeleton } from './Avatar.js'
+import { AvatarMasked } from './Avatar.style.js'
+import { ChainBadgeContent } from './ChainBadgeContent.js'
+
+export const TokenAvatar: React.FC<{
+  token?: StaticToken
+  chain?: Chain
+  isLoading?: boolean
+  sx?: SxProps<Theme>
+  tokenAvatarSize?: number
+  chainAvatarSize?: number
+}> = ({
+  token,
+  chain,
+  isLoading,
+  sx,
+  tokenAvatarSize = 40,
+  chainAvatarSize = 16,
+}) => {
+  if (!chain || !token?.logoURI) {
+    return (
+      <TokenAvatarFallback
+        token={token}
+        isLoading={isLoading}
+        sx={sx}
+        tokenAvatarSize={tokenAvatarSize}
+        chainAvatarSize={chainAvatarSize}
+      />
+    )
+  }
+  return (
+    <TokenAvatarBase
+      token={token}
+      chain={chain}
+      isLoading={isLoading}
+      sx={sx}
+      avatarSize={tokenAvatarSize}
+      badgeSize={chainAvatarSize}
+    />
+  )
+}
+
+const TokenAvatarFallback: React.FC<{
+  token?: StaticToken
+  isLoading?: boolean
+  sx?: SxProps<Theme>
+  tokenAvatarSize: number
+  chainAvatarSize: number
+}> = ({ token, isLoading, sx, tokenAvatarSize, chainAvatarSize }) => {
+  const { chain } = useChain(token?.chainId)
+  const { token: chainToken, isLoading: isLoadingToken } = useToken(
+    token?.chainId,
+    token?.address
+  )
+  return (
+    <TokenAvatarBase
+      token={chainToken ?? token}
+      isLoading={isLoading || isLoadingToken}
+      chain={chain}
+      sx={sx}
+      avatarSize={tokenAvatarSize}
+      badgeSize={chainAvatarSize}
+    />
+  )
+}
+
+const TokenAvatarBase: React.FC<{
+  token?: StaticToken
+  chain?: Chain
+  isLoading?: boolean
+  sx?: SxProps<Theme>
+  avatarSize: number
+  badgeSize: number
+}> = ({ token, chain, isLoading, sx, avatarSize, badgeSize }) => {
+  return isLoading ? (
+    <AvatarBadgedSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />
+  ) : (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={<ChainBadgeContent chain={chain} size={badgeSize} />}
+      sx={sx}
+    >
+      <AvatarMasked
+        src={token?.logoURI}
+        alt={token?.symbol}
+        avatarSize={avatarSize}
+        badgeSize={badgeSize}
+      >
+        {token?.symbol?.[0]}
+      </AvatarMasked>
+    </Badge>
+  )
+}

package/src/components/Avatar/utils.ts

@@ -0,0 +1,6 @@
+const borderWidthPx = 2.5
+
+// 14% is the right bottom offset of the MUI's badge (MuiBadge-badge class)
+export const getAvatarMask = (badgeSize: number) => {
+  return `radial-gradient(circle ${badgeSize / 2 + borderWidthPx}px at calc(100% - 14%) calc(100% - 14%), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`
+}

package/src/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -0,0 +1,72 @@
+import { useWalletMenu } from '@lifi/wallet-management'
+import { Button } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useChain } from '../../hooks/useChain.js'
+import { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import type { BaseTransactionButtonProps } from './types.js'
+
+export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
+  onClick,
+  text,
+  disabled,
+  loading,
+  route,
+  sx,
+}) => {
+  const { t } = useTranslation()
+  const { walletConfig } = useWidgetConfig()
+  const { openWalletMenu } = useWalletMenu()
+  const [fromChainId] = useFieldValues('fromChain')
+  const { chain } = useChain(fromChainId)
+  const { connected, missingChain } = useRouteRequiredAccountConnection(
+    route,
+    chain
+  )
+  const handleClick = async (e: React.MouseEvent<HTMLElement>) => {
+    if (connected) {
+      onClick?.()
+      return
+    }
+    const connectionOptions = missingChain ? { chain: missingChain } : undefined
+    if (
+      walletConfig?.onConnect &&
+      !walletConfig?.forceInternalWalletManagement
+    ) {
+      walletConfig.onConnect(connectionOptions)
+    } else {
+      openWalletMenu(connectionOptions)
+      e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer
+    }
+  }
+
+  const getButtonText = () => {
+    if (connected) {
+      if (text) {
+        return text
+      }
+    }
+    return missingChain
+      ? t('button.connectChainWallet', {
+          chain: missingChain.name,
+        })
+      : t('button.connectWallet')
+  }
+
+  return (
+    <Button
+      variant="contained"
+      color="primary"
+      onClick={handleClick}
+      disabled={connected && disabled}
+      loading={loading}
+      loadingPosition="center"
+      fullWidth
+      sx={sx}
+      data-testid="widget-transaction-button"
+    >
+      {getButtonText()}
+    </Button>
+  )
+}

package/src/components/BaseTransactionButton/types.ts

@@ -0,0 +1,11 @@
+import type { RouteExtended } from '@lifi/sdk'
+import type { SxProps, Theme } from '@mui/material'
+
+export interface BaseTransactionButtonProps {
+  onClick?(): void
+  text?: string
+  disabled?: boolean
+  loading?: boolean
+  route?: RouteExtended
+  sx?: SxProps<Theme>
+}

package/src/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,67 @@
+import { Drawer } from '@mui/material'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+import {
+  forwardRef,
+  startTransition,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'
+import { modalProps, slotProps } from '../Dialog/Dialog.js'
+import type { BottomSheetBase, BottomSheetProps } from './types.js'
+
+export const BottomSheet: ForwardRefExoticComponent<
+  Omit<BottomSheetProps, 'ref'> & RefAttributes<BottomSheetBase>
+> = forwardRef<BottomSheetBase, BottomSheetProps>(
+  ({ elementRef, children, open, onClose, keepMounted = false }, ref) => {
+    const getContainer = useGetScrollableContainer()
+    const openRef = useRef(open)
+    const [drawerOpen, setDrawerOpen] = useState(open)
+    const [isInert, setIsInert] = useState(!open)
+
+    const close = useCallback(() => {
+      // Set inert first to prevent focus issues
+      setIsInert(true)
+      // Push the state update to the next event loop tick
+      // to ensure the inert is applied to before the drawer is closed
+      startTransition(() => {
+        setDrawerOpen(false)
+        openRef.current = false
+        onClose?.()
+      })
+    }, [onClose])
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        isOpen: () => openRef.current,
+        open: () => {
+          setIsInert(false)
+          setDrawerOpen(true)
+          openRef.current = true
+        },
+        close,
+      }),
+      [close]
+    )
+
+    return (
+      <Drawer
+        container={getContainer}
+        ref={elementRef}
+        anchor="bottom"
+        open={drawerOpen}
+        onClose={close}
+        ModalProps={modalProps}
+        slotProps={slotProps}
+        disableAutoFocus
+        keepMounted={keepMounted}
+        inert={isInert}
+      >
+        {children}
+      </Drawer>
+    )
+  }
+)

package/src/components/BottomSheet/types.ts

@@ -0,0 +1,14 @@
+import type { DrawerProps } from '@mui/material'
+import type { RefObject } from 'react'
+
+export type BottomSheetProps = Omit<DrawerProps, 'onClose'> & {
+  elementRef?: RefObject<HTMLDivElement>
+  onClose?(): void
+  keepMounted?: boolean
+}
+
+export interface BottomSheetBase {
+  isOpen(): void
+  open(): void
+  close(): void
+}

package/src/components/ButtonTertiary.tsx

@@ -0,0 +1,29 @@
+import { Button, buttonClasses, styled } from '@mui/material'
+import type React from 'react'
+
+export const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>> =
+  styled(Button)(({ theme }) => ({
+    color: theme.vars.palette.text.primary,
+    height: 40,
+    fontSize: 14,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+    '&:hover, &:active': {
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+    },
+    [`&.${buttonClasses.loading}:disabled`]: {
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+    },
+    ...theme.applyStyles('dark', {
+      color: theme.vars.palette.text.primary,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+      '&:hover, &:active': {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+      },
+      [`&.${buttonClasses.loading}:disabled`]: {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+      },
+    }),
+    [`.${buttonClasses.loadingIndicator}`]: {
+      color: theme.vars.palette.text.primary,
+    },
+  }))

package/src/components/Card/Card.tsx

@@ -0,0 +1,81 @@
+import type { CardProps as MuiCardProps } from '@mui/material'
+import { Card as MuiCard, styled } from '@mui/material'
+import type React from 'react'
+
+export interface CardProps extends MuiCardProps {
+  type?: 'default' | 'selected' | 'error'
+  selectionColor?: 'primary' | 'secondary'
+  indented?: boolean
+}
+
+export const Card: React.FC<React.ComponentProps<typeof MuiCard> & CardProps> =
+  styled(MuiCard, {
+    shouldForwardProp: (prop) =>
+      !['type', 'indented', 'selectionColor'].includes(prop as string),
+  })<CardProps>(({ theme }) => {
+    return {
+      padding: 0,
+      variants: [
+        {
+          props: ({ indented }) => indented,
+          style: {
+            padding: theme.spacing(2),
+          },
+        },
+        {
+          props: {
+            selectionColor: 'primary',
+            type: 'selected',
+          },
+          style: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.vars.palette.primary.main,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,
+            '&:hover': {
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,
+            },
+            ...theme.applyStyles('dark', {
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,
+              '&:hover': {
+                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,
+              },
+              borderColor: theme.vars.palette.primary.main,
+            }),
+          },
+        },
+        {
+          props: {
+            selectionColor: 'secondary',
+            type: 'selected',
+          },
+          style: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
+            '&:hover': {
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,
+            },
+            ...theme.applyStyles('dark', {
+              borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
+              '&:hover': {
+                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,
+              },
+            }),
+          },
+        },
+        {
+          props: {
+            type: 'error',
+          },
+          style: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.vars.palette.error.main,
+          },
+        },
+      ],
+    }
+  })

package/src/components/Card/CardButton.style.tsx

@@ -0,0 +1,31 @@
+import { Box, ButtonBase, styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const CardRowButton: React.FC<React.ComponentProps<typeof ButtonBase>> =
+  styled(ButtonBase)(({ theme }) => ({
+    background: 'none',
+    color: 'inherit',
+    border: 'none',
+    font: 'inherit',
+    cursor: 'pointer',
+    outline: 'inherit',
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: theme.spacing(2),
+    borderRadius: theme.vars.shape.borderRadius,
+  }))
+
+export const CardValue: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)({
+    lineHeight: '1.25',
+    fontWeight: 500,
+  })
+
+export const CardTitleContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.5),
+  }))