@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/Header/WalletHeader.tsx

@@ -0,0 +1,184 @@
+import {
+  getConnectorIcon,
+  useAccount,
+  useWalletMenu,
+} from '@lifi/wallet-management'
+import type { Account } from '@lifi/widget-provider'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import Wallet from '@mui/icons-material/Wallet'
+import { Avatar, Badge } from '@mui/material'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useChain } from '../../hooks/useChain.js'
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { SmallAvatar } from '../Avatar/SmallAvatar.js'
+import { CloseDrawerButton } from './CloseDrawerButton.js'
+import {
+  DrawerWalletContainer,
+  HeaderAppBar,
+  WalletAvatar,
+  WalletButton,
+} from './Header.style.js'
+import { WalletMenu } from './WalletMenu.js'
+import { WalletMenuContainer } from './WalletMenu.style.js'
+
+const useInternalWalletManagement = () => {
+  const { hiddenUI } = useWidgetConfig()
+  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()
+
+  const isWalletMenuHidden = hiddenUI?.walletMenu
+
+  const shouldShowWalletMenu =
+    !useExternalWalletProvidersOnly && !isWalletMenuHidden
+
+  return {
+    shouldShowWalletMenu,
+  }
+}
+
+export const WalletHeader: React.FC = () => {
+  const { shouldShowWalletMenu } = useInternalWalletManagement()
+
+  return shouldShowWalletMenu ? (
+    <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>
+      <WalletMenuButton />
+    </HeaderAppBar>
+  ) : null
+}
+
+const WalletMenuButton: React.FC = () => {
+  const { variant, hiddenUI } = useWidgetConfig()
+  const { account, accounts } = useAccount()
+
+  const [fromChainId] = useFieldValues('fromChain')
+  const { chain: fromChain } = useChain(fromChainId)
+
+  const activeAccount =
+    (fromChain
+      ? accounts.find((account) => account.chainType === fromChain.chainType)
+      : undefined) || account
+
+  if (variant === 'drawer') {
+    return (
+      <DrawerWalletContainer>
+        {activeAccount.isConnected ? (
+          <ConnectedButton account={activeAccount} />
+        ) : (
+          <ConnectButton />
+        )}
+        {!hiddenUI?.drawerCloseButton ? (
+          <CloseDrawerButton header="wallet" />
+        ) : null}
+      </DrawerWalletContainer>
+    )
+  }
+  return activeAccount.isConnected ? (
+    <ConnectedButton account={activeAccount} />
+  ) : (
+    <ConnectButton />
+  )
+}
+
+const ConnectButton = () => {
+  const { t } = useTranslation()
+  const { walletConfig, variant } = useWidgetConfig()
+  const { openWalletMenu } = useWalletMenu()
+  const connect = async (event: React.MouseEvent<HTMLElement>) => {
+    if (
+      !walletConfig?.usePartialWalletManagement &&
+      !walletConfig?.forceInternalWalletManagement &&
+      walletConfig?.onConnect
+    ) {
+      walletConfig.onConnect()
+      return
+    }
+    openWalletMenu()
+    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer
+  }
+
+  const walletPosition = variant === 'drawer' ? 'start' : 'end'
+
+  return (
+    <WalletButton
+      withOffset={walletPosition === 'end'}
+      endIcon={walletPosition === 'end' ? <Wallet /> : undefined}
+      startIcon={
+        walletPosition === 'start' ? (
+          <Wallet sx={{ marginLeft: -0.25 }} />
+        ) : undefined
+      }
+      onClick={connect}
+    >
+      {t('button.connectWallet')}
+    </WalletButton>
+  )
+}
+
+const ConnectedButton = ({ account }: { account: Account }) => {
+  const { chain } = useChain(account.chainId)
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const walletAddress = shortenAddress(account.address)
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      <WalletButton
+        withOffset
+        endIcon={<ExpandMore />}
+        startIcon={
+          chain?.logoURI ? (
+            <Badge
+              overlap="circular"
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              badgeContent={
+                <SmallAvatar
+                  src={chain?.logoURI}
+                  alt={chain?.name}
+                  sx={{ width: 12, height: 12 }}
+                >
+                  {chain?.name[0]}
+                </SmallAvatar>
+              }
+            >
+              <WalletAvatar
+                src={getConnectorIcon(account.connector)}
+                alt={account.connector?.name}
+              >
+                {account.connector?.name[0]}
+              </WalletAvatar>
+            </Badge>
+          ) : (
+            <Avatar
+              src={getConnectorIcon(account.connector)}
+              alt={account.connector?.name}
+              sx={{ width: 24, height: 24 }}
+            >
+              {account.connector?.name[0]}
+            </Avatar>
+          )
+        }
+        onClick={handleClick}
+      >
+        {walletAddress}
+      </WalletButton>
+      <WalletMenuContainer
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <WalletMenu onClose={handleClose} />
+      </WalletMenuContainer>
+    </>
+  )
+}

package/src/components/Header/WalletMenu.style.tsx

@@ -0,0 +1,34 @@
+import {
+  Menu as MuiMenu,
+  menuClasses,
+  menuItemClasses,
+  styled,
+  svgIconClasses,
+} from '@mui/material'
+import type React from 'react'
+
+export const WalletMenuContainer: React.FC<
+  React.ComponentProps<typeof MuiMenu>
+> = styled(MuiMenu)(({ theme }) => ({
+  [`& .${menuClasses.paper}`]: {
+    borderRadius: theme.vars.shape.borderRadius,
+    color: theme.vars.palette.text.primary,
+    boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
+    padding: theme.spacing(2),
+    [`& .${menuClasses.list}`]: {
+      padding: 0,
+    },
+    [`& .${menuItemClasses.root}`]: {
+      borderRadius: theme.vars.shape.borderRadiusSecondary,
+      padding: theme.spacing(1, 0, 1, 1),
+      [`& .${svgIconClasses.root}`]: {
+        fontSize: 20,
+        color: theme.vars.palette.text.primary,
+      },
+      ':hover': {
+        background: 'none',
+        cursor: 'default',
+      },
+    },
+  },
+}))

package/src/components/Header/WalletMenu.tsx

@@ -0,0 +1,129 @@
+import {
+  getConnectorIcon,
+  useAccount,
+  useWalletMenu,
+} from '@lifi/wallet-management'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'
+import { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { AvatarMasked } from '../Avatar/Avatar.style.js'
+import { SmallAvatar } from '../Avatar/SmallAvatar.js'
+import { DisconnectIconButton } from './DisconnectIconButton.js'
+
+export const WalletMenu = ({
+  onClose,
+}: {
+  onClose: () => void
+}): JSX.Element => {
+  const { t } = useTranslation()
+  const { accounts } = useAccount()
+  const { getChainById } = useAvailableChains()
+  const { openWalletMenu } = useWalletMenu()
+  const connect = async () => {
+    openWalletMenu()
+    onClose()
+  }
+  const { getAddressLink } = useExplorer()
+
+  return (
+    <>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {accounts.map((account) => {
+          const chain = getChainById(account.chainId)
+          const walletAddress = shortenAddress(account.address)
+          const handleCopyAddress = async () => {
+            await navigator.clipboard.writeText(account.address ?? '')
+            onClose()
+          }
+
+          return (
+            <MenuItem key={account.address} disableTouchRipple>
+              <Box
+                sx={{
+                  flex: 1,
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
+                {chain?.logoURI ? (
+                  <Badge
+                    overlap="circular"
+                    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                    badgeContent={
+                      <SmallAvatar src={chain?.logoURI} alt={chain?.name}>
+                        {chain?.name[0]}
+                      </SmallAvatar>
+                    }
+                    sx={{ marginRight: 1.5 }}
+                  >
+                    <AvatarMasked
+                      src={getConnectorIcon(account.connector)}
+                      alt={account.connector?.name}
+                    >
+                      {account.connector?.name[0]}
+                    </AvatarMasked>
+                  </Badge>
+                ) : (
+                  <Avatar
+                    src={getConnectorIcon(account.connector)}
+                    alt={account.connector?.name}
+                    sx={{
+                      marginRight: 1.5,
+                    }}
+                  >
+                    {account.connector?.name[0]}
+                  </Avatar>
+                )}
+                {walletAddress}
+              </Box>
+              <Box
+                sx={{
+                  ml: 2,
+                }}
+              >
+                <IconButton size="medium" onClick={handleCopyAddress}>
+                  <ContentCopyRounded />
+                </IconButton>
+                <IconButton
+                  size="medium"
+                  component="a"
+                  onClick={onClose}
+                  href={
+                    account.address
+                      ? getAddressLink(account.address, chain)
+                      : undefined
+                  }
+                  target="_blank"
+                >
+                  <OpenInNewRounded />
+                </IconButton>
+                <DisconnectIconButton account={account} />
+              </Box>
+            </MenuItem>
+          )
+        })}
+      </Box>
+      <Button
+        onClick={connect}
+        fullWidth
+        startIcon={<PowerSettingsNewRounded />}
+        sx={{
+          marginTop: 1,
+        }}
+      >
+        {t('button.connectAnotherWallet')}
+      </Button>
+    </>
+  )
+}

package/src/components/IconCircle/IconCircle.style.tsx

@@ -0,0 +1,85 @@
+import type { Theme } from '@mui/material'
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+import type { StatusIcon } from './statusIcons'
+
+export const iconCircleSize = 90
+
+interface StatusColorConfig {
+  color: string
+  mixAmount: number
+  lightDarken: number
+  darkDarken: number
+}
+
+export const getStatusColor = (
+  status: StatusIcon,
+  theme: Theme
+): StatusColorConfig => {
+  switch (status) {
+    case 'success':
+      return {
+        color: theme.vars.palette.success.main,
+        mixAmount: 12,
+        lightDarken: 0,
+        darkDarken: 0,
+      }
+    case 'error':
+      return {
+        color: theme.vars.palette.error.main,
+        mixAmount: 12,
+        lightDarken: 0,
+        darkDarken: 0,
+      }
+    case 'warning':
+      return {
+        color: theme.vars.palette.warning.main,
+        mixAmount: 48,
+        lightDarken: 0.32,
+        darkDarken: 0,
+      }
+    case 'info':
+      return {
+        color: theme.vars.palette.info.main,
+        mixAmount: 12,
+        lightDarken: 0,
+        darkDarken: 0,
+      }
+  }
+}
+
+export const iconSizeRatio: number = 48 / 90
+
+export const IconCircleRoot: React.FC<
+  React.ComponentProps<typeof Box> & {
+    colorConfig: StatusColorConfig
+    circleSize: number
+  }
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'colorConfig' && prop !== 'circleSize',
+})<{ colorConfig: StatusColorConfig; circleSize: number }>(
+  ({ theme, colorConfig, circleSize }) => {
+    const svgSize = Math.round(circleSize * iconSizeRatio)
+    return {
+      backgroundColor: `color-mix(in srgb, ${colorConfig.color} ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,
+      borderRadius: '50%',
+      width: circleSize,
+      height: circleSize,
+      display: 'grid',
+      position: 'relative',
+      placeItems: 'center',
+      '& > svg': {
+        color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.lightDarken) * 100}%, black)`,
+        width: svgSize,
+        height: svgSize,
+      },
+      ...theme.applyStyles('dark', {
+        '& > svg': {
+          color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.darkDarken) * 100}%, black)`,
+          width: svgSize,
+          height: svgSize,
+        },
+      }),
+    }
+  }
+)

package/src/components/IconCircle/IconCircle.tsx

@@ -0,0 +1,29 @@
+import type { BoxProps } from '@mui/material'
+import { useTheme } from '@mui/material'
+import {
+  getStatusColor,
+  IconCircleRoot,
+  iconCircleSize,
+} from './IconCircle.style.js'
+import { type StatusIcon, statusIcons } from './statusIcons.js'
+
+interface IconCircleProps extends Omit<BoxProps, 'color'> {
+  status: StatusIcon
+  size?: number
+}
+
+export const IconCircle: React.FC<IconCircleProps> = ({
+  status,
+  size = iconCircleSize,
+  ...rest
+}) => {
+  const theme = useTheme()
+  const colorConfig = getStatusColor(status, theme)
+  const Icon = statusIcons[status]
+
+  return (
+    <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>
+      <Icon />
+    </IconCircleRoot>
+  )
+}

package/src/components/IconCircle/statusIcons.ts

@@ -0,0 +1,14 @@
+import Done from '@mui/icons-material/Done'
+import ErrorRounded from '@mui/icons-material/ErrorRounded'
+import InfoRounded from '@mui/icons-material/InfoRounded'
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import type { SvgIcon } from '@mui/material'
+
+export type StatusIcon = 'success' | 'error' | 'warning' | 'info'
+
+export const statusIcons: Record<StatusIcon, typeof SvgIcon> = {
+  success: Done,
+  error: ErrorRounded,
+  warning: WarningRounded,
+  info: InfoRounded,
+}

package/src/components/IconTypography.ts

@@ -0,0 +1,11 @@
+import type { BoxProps } from '@mui/material'
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+
+export const IconTypography: React.FC<BoxProps> = styled(Box)(({ theme }) => ({
+  color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,
+  lineHeight: 0,
+  ...theme.applyStyles('dark', {
+    color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)`,
+  }),
+}))

package/src/components/Initializer.tsx

@@ -0,0 +1,6 @@
+import { useInitializer } from '../hooks/useInitializer.js'
+
+export const Initializer: React.FC = () => {
+  useInitializer()
+  return null
+}

package/src/components/Input.tsx

@@ -0,0 +1,14 @@
+import { InputBase, inputBaseClasses, styled } from '@mui/material'
+import type React from 'react'
+
+export const Input: React.FC<React.ComponentProps<typeof InputBase>> = styled(
+  InputBase
+)(({ theme }) => ({
+  paddingRight: theme.spacing(2),
+  [`.${inputBaseClasses.input}`]: {
+    padding: theme.spacing(1.5, 1, 1.5, 2),
+    height: '2.875em',
+    boxSizing: 'inherit',
+  },
+  fontWeight: 500,
+}))

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,29 @@
+import {
+  listItemSecondaryActionClasses,
+  listItemTextClasses,
+  ListItem as MuiListItem,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+
+export const ListItem: React.FC<React.ComponentProps<typeof MuiListItem>> =
+  styled(MuiListItem)(({ theme }) => ({
+    height: 64,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    padding: theme.spacing(0, 1.5),
+    [`.${listItemSecondaryActionClasses.root}`]: {
+      right: theme.spacing(3),
+    },
+    [`& .${listItemTextClasses.secondary}`]: {
+      fontSize: 12,
+      fontWeight: 500,
+    },
+    [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]:
+      {
+        lineHeight: 1.3334,
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+      },
+  }))

package/src/components/ListItem/ListItemButton.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material'
+import type React from 'react'
+import { ListItemButton as ListItemButtonBase } from '../ListItemButton.js'
+
+export const ListItemButton: React.FC<
+  React.ComponentProps<typeof ListItemButtonBase>
+> = styled(ListItemButtonBase)(({ theme }) => ({
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
+  height: 64,
+  width: '100%',
+}))

package/src/components/ListItemButton.tsx

@@ -0,0 +1,43 @@
+import {
+  listItemButtonClasses,
+  ListItemButton as MuiListItemButton,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+
+export const ListItemButton: React.FC<
+  React.ComponentProps<typeof MuiListItemButton>
+> = styled(MuiListItemButton)(({ theme }) => {
+  return {
+    borderRadius: theme.vars.shape.borderRadius,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    '&:hover': {
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+    },
+    [`&.${listItemButtonClasses.selected}`]: {
+      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', {
+        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)`,
+        },
+      }),
+    },
+    variants: [
+      {
+        props: ({ disabled }) => disabled,
+        style: {
+          opacity: 0.5,
+          cursor: 'auto',
+          '&:hover': {
+            backgroundColor: 'none',
+          },
+        },
+      },
+    ],
+  }
+})

package/src/components/ListItemText.tsx

@@ -0,0 +1,14 @@
+import {
+  listItemTextClasses,
+  ListItemText as MuiListItemText,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+
+export const ListItemText: React.FC<
+  React.ComponentProps<typeof MuiListItemText>
+> = styled(MuiListItemText)(() => ({
+  [`.${listItemTextClasses.primary}`]: {
+    fontWeight: 500,
+  },
+}))

package/src/components/Menu.tsx

@@ -0,0 +1,30 @@
+import {
+  Menu as MuiMenu,
+  menuClasses,
+  menuItemClasses,
+  styled,
+  svgIconClasses,
+} from '@mui/material'
+import type React from 'react'
+
+export const Menu: React.FC<React.ComponentProps<typeof MuiMenu>> = styled(
+  MuiMenu
+)(({ theme }) => ({
+  [`& .${menuClasses.paper}`]: {
+    borderRadius: theme.vars.shape.borderRadius,
+    boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
+    padding: theme.spacing(2),
+    [`& .${menuClasses.list}`]: {
+      padding: 0,
+    },
+    [`& .${menuItemClasses.root}`]: {
+      borderRadius: theme.vars.shape.borderRadiusSecondary,
+      padding: theme.spacing(1, 2, 1, 1),
+      [`& .${svgIconClasses.root}`]: {
+        fontSize: 20,
+        color: theme.vars.palette.text.primary,
+        marginRight: theme.spacing(1.5),
+      },
+    },
+  },
+}))

package/src/components/Messages/AccountDeployedMessage.tsx

@@ -0,0 +1,28 @@
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import type { BoxProps } from '@mui/material'
+import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { AlertMessage } from './AlertMessage.js'
+
+export const AccountDeployedMessage: React.FC<BoxProps> = ({ ...props }) => {
+  const { t } = useTranslation()
+  return (
+    <AlertMessage
+      title={
+        <Typography
+          variant="body2"
+          sx={{
+            px: 1,
+            color: 'text.primary',
+          }}
+        >
+          {t('info.message.accountDeployedMessage')}
+        </Typography>
+      }
+      icon={<WarningRounded />}
+      severity="warning"
+      multiline
+      {...props}
+    />
+  )
+}