@openocean.finance/widget 1.0.0

package/src/components/Header/WalletMenu.tsx

@@ -0,0 +1,126 @@
+import {
+  ContentCopyRounded,
+  OpenInNewRounded,
+  PowerSettingsNewRounded,
+} from '@mui/icons-material'
+import { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'
+import {
+  getConnectorIcon,
+  useAccount,
+  useWalletMenu,
+} from '@openocean.finance/wallet-management'
+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 }) => {
+  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/IconTypography.ts

@@ -0,0 +1,9 @@
+import { Box, alpha, styled } from '@mui/material'
+
+export const IconTypography = styled(Box)(({ theme }) => ({
+  color: alpha(theme.palette.common.white, 0.4),
+  lineHeight: 0,
+  ...theme.applyStyles('light', {
+    color: alpha(theme.palette.common.black, 0.32),
+  }),
+}))

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,11 @@
+import { InputBase, inputBaseClasses, styled } from '@mui/material'
+
+export const Input = 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,26 @@
+import {
+  ListItem as MuiListItem,
+  listItemSecondaryActionClasses,
+  listItemTextClasses,
+  styled,
+} from '@mui/material'
+
+export const ListItem = 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,9 @@
+import { styled } from '@mui/material'
+import { ListItemButton as ListItemButtonBase } from '../ListItemButton.js'
+
+export const ListItemButton = 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,26 @@
+import { ListItemButton as MuiListItemButton, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../utils/colors.js'
+
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => {
+  const backgroundHoverColor = getContrastAlphaColor(theme, 0.04)
+  return {
+    borderRadius: theme.shape.borderRadius,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    '&:hover': {
+      backgroundColor: backgroundHoverColor,
+    },
+    variants: [
+      {
+        props: ({ disabled }) => disabled,
+        style: {
+          opacity: 0.5,
+          cursor: 'auto',
+          '&:hover': {
+            backgroundColor: 'none',
+          },
+        },
+      },
+    ],
+  }
+})

package/src/components/ListItemText.tsx

@@ -0,0 +1,11 @@
+import {
+  ListItemText as MuiListItemText,
+  listItemTextClasses,
+  styled,
+} from '@mui/material'
+
+export const ListItemText = styled(MuiListItemText)(() => ({
+  [`.${listItemTextClasses.primary}`]: {
+    fontWeight: 500,
+  },
+}))

package/src/components/Menu.tsx

@@ -0,0 +1,27 @@
+import {
+  Menu as MuiMenu,
+  menuClasses,
+  menuItemClasses,
+  styled,
+  svgIconClasses,
+} from '@mui/material'
+
+export const Menu = styled(MuiMenu)(({ theme }) => ({
+  [`& .${menuClasses.paper}`]: {
+    borderRadius: theme.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.shape.borderRadiusSecondary,
+      padding: theme.spacing(1, 2, 1, 1),
+      [`& .${svgIconClasses.root}`]: {
+        fontSize: 20,
+        color: theme.palette.text.primary,
+        marginRight: theme.spacing(1.5),
+      },
+    },
+  },
+}))

package/src/components/Messages/AccountNotDeployedMessage.tsx

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

package/src/components/Messages/AlertMessage.style.tsx

@@ -0,0 +1,58 @@
+import { Box, alpha, darken, lighten, styled } from '@mui/material'
+import {
+  getInfoBackgroundColor,
+  getWarningBackgroundColor,
+} from '../../utils/colors.js'
+import type { Severity } from './types.js'
+
+interface AlertSeverityProps {
+  severity: Severity
+}
+
+export const AlertMessageCard = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'severity',
+})<AlertSeverityProps>(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  position: 'relative',
+  whiteSpace: 'pre-line',
+  width: '100%',
+  paddingBottom: theme.spacing(2),
+  backgroundColor: getInfoBackgroundColor(theme),
+  variants: [
+    {
+      props: {
+        severity: 'warning',
+      },
+      style: {
+        backgroundColor: getWarningBackgroundColor(theme),
+      },
+    },
+  ],
+}))
+
+export const AlertMessageCardTitle = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'severity',
+})<AlertSeverityProps>(({ theme }) => ({
+  display: 'flex',
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  paddingTop: theme.spacing(2),
+  gap: theme.spacing(1),
+  color: lighten(theme.palette.info.main, 0.24),
+  variants: [
+    {
+      props: {
+        severity: 'warning',
+      },
+      style: {
+        color:
+          theme.palette.mode === 'light'
+            ? darken(theme.palette.warning.main, 0.36)
+            : alpha(theme.palette.warning.main, 1),
+      },
+    },
+  ],
+  ...theme.applyStyles('light', {
+    color: theme.palette.info.main,
+  }),
+}))

package/src/components/Messages/AlertMessage.tsx

@@ -0,0 +1,34 @@
+import type { BoxProps } from '@mui/material'
+import type { PropsWithChildren, ReactNode } from 'react'
+import {
+  AlertMessageCard,
+  AlertMessageCardTitle,
+} from './AlertMessage.style.js'
+import type { Severity } from './types.js'
+
+interface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {
+  icon: ReactNode
+  title: ReactNode
+  multiline?: boolean
+  severity?: Severity
+}
+
+export const AlertMessage = ({
+  title,
+  icon,
+  children,
+  multiline,
+  severity = 'info',
+  ...rest
+}: AlertMessageProps) => (
+  <AlertMessageCard severity={severity} {...rest}>
+    <AlertMessageCardTitle
+      severity={severity}
+      alignItems={multiline ? 'start' : 'center'}
+    >
+      {icon}
+      {title}
+    </AlertMessageCardTitle>
+    {children}
+  </AlertMessageCard>
+)

package/src/components/Messages/FundsSufficiencyMessage.tsx

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

package/src/components/Messages/GasRefuelMessage.style.ts

@@ -0,0 +1,21 @@
+import { alpha, styled, switchClasses } from '@mui/material'
+import { Switch } from '../Switch.js'
+
+export const InfoMessageSwitch = styled(Switch)(({ theme }) => ({
+  [`.${switchClasses.switchBase}`]: {
+    [`&.${switchClasses.checked}`]: {
+      [`& + .${switchClasses.track}`]: {
+        backgroundColor: alpha(theme.palette.info.main, 0.84),
+        ...theme.applyStyles('light', {
+          backgroundColor: theme.palette.info.main,
+        }),
+      },
+    },
+    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
+      color: alpha(theme.palette.info.main, 0.84),
+      ...theme.applyStyles('light', {
+        color: theme.palette.info.main,
+      }),
+    },
+  },
+}))

package/src/components/Messages/GasRefuelMessage.tsx

@@ -0,0 +1,81 @@
+import { EvStation } from '@mui/icons-material'
+import type { BoxProps } from '@mui/material'
+import { Box, Collapse, Typography } from '@mui/material'
+import type { ChangeEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useGasRefuel } from '../../hooks/useGasRefuel.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { AlertMessage } from './AlertMessage.js'
+import { InfoMessageSwitch } from './GasRefuelMessage.style.js'
+
+export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
+  const { t } = useTranslation()
+
+  const { setValue } = useSettingsActions()
+  const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel'])
+
+  const { enabled, chain, isLoading: isRefuelLoading } = useGasRefuel()
+
+  const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+    setValue('enabledAutoRefuel', checked)
+  }
+
+  const showGasRefuelMessage = chain && enabled && !isRefuelLoading
+
+  return (
+    <Collapse
+      timeout={225}
+      in={showGasRefuelMessage}
+      unmountOnExit
+      mountOnEnter
+    >
+      <AlertMessage
+        icon={<EvStation />}
+        title={
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              flexGrow: 1,
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: 700,
+              }}
+            >
+              {t('info.title.autoRefuel', { chainName: chain?.name ?? '' })}
+            </Typography>
+            <InfoMessageSwitch
+              checked={enabledAutoRefuel}
+              onChange={onChange}
+            />
+          </Box>
+        }
+        {...props}
+      >
+        <Collapse
+          timeout={225}
+          in={enabledAutoRefuel}
+          unmountOnExit
+          mountOnEnter
+        >
+          <Typography
+            variant="body2"
+            sx={{
+              px: 2,
+              pt: 1,
+            }}
+          >
+            {t('info.message.autoRefuel', {
+              chainName: chain?.name,
+            })}
+          </Typography>
+        </Collapse>
+      </AlertMessage>
+    </Collapse>
+  )
+}

package/src/components/Messages/GasSufficiencyMessage.tsx

@@ -0,0 +1,63 @@
+import { EvStation } from '@mui/icons-material'
+import { type BoxProps, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { formatUnits } from 'viem'
+import type { GasSufficiency } from '../../hooks/useGasSufficiency.js'
+import { AlertMessage } from './AlertMessage.js'
+
+interface GasSufficiencyMessageProps extends BoxProps {
+  insufficientGas?: GasSufficiency[]
+}
+
+export const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({
+  insufficientGas,
+  ...props
+}) => {
+  const { t } = useTranslation()
+  return (
+    <AlertMessage
+      severity="warning"
+      icon={<EvStation />}
+      title={
+        <Typography
+          variant="body2"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
+          {t('warning.title.insufficientGas')}
+        </Typography>
+      }
+      {...props}
+    >
+      <Typography
+        variant="body2"
+        sx={{
+          px: 2,
+          pt: 1,
+        }}
+      >
+        {t('warning.message.insufficientGas')}
+      </Typography>
+      {insufficientGas?.map((item, index) => (
+        <Typography
+          key={index}
+          variant="body2"
+          sx={{
+            px: 2,
+            pt: 0.5,
+          }}
+        >
+          {t('main.tokenOnChainAmount', {
+            amount: formatUnits(
+              item.insufficientAmount ?? 0n,
+              item.token.decimals
+            ),
+            tokenSymbol: item.token.symbol,
+            chainName: item.chain?.name,
+          })}
+        </Typography>
+      ))}
+    </AlertMessage>
+  )
+}

package/src/components/Messages/ToAddressRequiredMessage.tsx

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

package/src/components/Messages/WarningMessages.tsx

@@ -0,0 +1,52 @@
+import type { Route } from '@lifi/sdk'
+import type { BoxProps } from '@mui/material'
+import { Collapse } from '@mui/material'
+import { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'
+import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
+import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
+import { ToAddressRequiredMessage } from './ToAddressRequiredMessage.js'
+import { useMessageQueue } from './useMessageQueue.js'
+
+type WarningMessagesProps = BoxProps & {
+  route?: Route
+  allowInteraction?: boolean
+}
+
+export const WarningMessages: React.FC<WarningMessagesProps> = ({
+  route,
+  allowInteraction,
+  ...props
+}) => {
+  const { messages, hasMessages } = useMessageQueue(route, allowInteraction)
+
+  const getMessage = () => {
+    switch (messages[0]?.id) {
+      case 'INSUFFICIENT_FUNDS':
+        return <FundsSufficiencyMessage {...props} />
+      case 'INSUFFICIENT_GAS':
+        return (
+          <GasSufficiencyMessage
+            insufficientGas={messages[0].props?.insufficientGas}
+            {...props}
+          />
+        )
+      case 'ACCOUNT_NOT_DEPLOYED':
+        return <AccountNotDeployedMessage {...props} />
+      case 'TO_ADDRESS_REQUIRED':
+        const fromChainId = route?.fromChainId;
+        const toChainId = route?.toChainId;
+        if (fromChainId && toChainId && fromChainId !== toChainId) {
+          return <ToAddressRequiredMessage {...props} />;
+        }
+        return null;
+      default:
+        return null
+    }
+  }
+
+  return (
+    <Collapse in={hasMessages} timeout={225} unmountOnExit mountOnEnter>
+      {getMessage()}
+    </Collapse>
+  )
+}

package/src/components/Messages/types.ts

@@ -0,0 +1 @@
+export type Severity = 'info' | 'warning'