@openocean.finance/widget 1.0.0

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

@@ -0,0 +1,72 @@
+import type { CSSObject } from '@mui/material'
+import {
+  AvatarGroup,
+  Box,
+  Avatar as MuiAvatar,
+  avatarClasses,
+  badgeClasses,
+  styled,
+} from '@mui/material'
+import { avatarMask16 } from './utils.js'
+
+export const AvatarMasked = styled(MuiAvatar)(() => ({
+  mask: avatarMask16,
+}))
+
+export const TokenAvatarGroup = 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 = styled(Box)(({ theme }) => {
+  const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: theme.palette.grey[800],
+    borderRadius: '50%',
+    height: root?.height,
+    width: root?.width,
+    color: theme.palette.text.secondary,
+    mask: avatarMask16,
+    ...theme.applyStyles('light', {
+      background: theme.palette.grey[300],
+    }),
+  }
+})
+
+export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
+  return {
+    background: theme.palette.grey[800],
+    borderRadius: '50%',
+    height: 16,
+    width: 16,
+    ...theme.applyStyles('light', {
+      background: theme.palette.grey[300],
+    }),
+  }
+})
+
+export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  borderRadius: '50%',
+}))
+
+export const AvatarSkeletonMaskedContainer = styled(Box)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  borderRadius: '50%',
+  mask: avatarMask16,
+}))

package/src/components/Avatar/Avatar.tsx

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

package/src/components/Avatar/SmallAvatar.tsx

@@ -0,0 +1,16 @@
+import { Avatar, Skeleton, styled } from '@mui/material'
+import { AvatarSkeletonContainer } from './Avatar.style.js'
+
+export const SmallAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  width: 16,
+  height: 16,
+}))
+
+export const SmallAvatarSkeleton = () => {
+  return (
+    <AvatarSkeletonContainer>
+      <Skeleton width={16} height={16} variant="circular" />
+    </AvatarSkeletonContainer>
+  )
+}

package/src/components/Avatar/TokenAvatar.tsx

@@ -0,0 +1,77 @@
+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 { AvatarDefaultBadge, AvatarMasked } from './Avatar.style.js'
+import { SmallAvatar } from './SmallAvatar.js'
+
+export const TokenAvatar: React.FC<{
+  token?: StaticToken
+  chain?: Chain
+  isLoading?: boolean
+  sx?: SxProps<Theme>
+}> = ({ token, chain, isLoading, sx }) => {
+  if (!chain || !token?.logoURI) {
+    return <TokenAvatarFallback token={token} isLoading={isLoading} sx={sx} />
+  }
+  return (
+    <TokenAvatarBase
+      token={token}
+      chain={chain}
+      isLoading={isLoading}
+      sx={sx}
+    />
+  )
+}
+
+export const TokenAvatarFallback: React.FC<{
+  token?: StaticToken
+  isLoading?: boolean
+  sx?: SxProps<Theme>
+}> = ({ token, isLoading, sx }) => {
+  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}
+    />
+  )
+}
+
+export const TokenAvatarBase: React.FC<{
+  token?: StaticToken
+  chain?: Chain
+  isLoading?: boolean
+  sx?: SxProps<Theme>
+}> = ({ token, chain, isLoading, sx }) => {
+  return isLoading ? (
+    <AvatarBadgedSkeleton />
+  ) : (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={
+        chain ? (
+          <SmallAvatar src={chain.logoURI} alt={chain.name}>
+            {chain.name[0]}
+          </SmallAvatar>
+        ) : (
+          <AvatarDefaultBadge />
+        )
+      }
+      sx={sx}
+    >
+      <AvatarMasked src={token?.logoURI} alt={token?.symbol}>
+        {token?.symbol?.[0]}
+      </AvatarMasked>
+    </Badge>
+  )
+}

package/src/components/Avatar/utils.ts

@@ -0,0 +1,11 @@
+/**
+ * Avatar mask for 16px badge
+ */
+export const avatarMask16 =
+  'radial-gradient(circle 10.5px at calc(100% - 5.5px) calc(100% - 5.5px), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat'
+
+/**
+ * Avatar mask for 12px badge
+ */
+export const avatarMask12 =
+  'radial-gradient(circle 8.5px at calc(100% - 3.5px) calc(100% - 3.5px), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat'

package/src/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -0,0 +1,54 @@
+import { Button } from '@mui/material'
+import { useAccount, useWalletMenu } from '@openocean.finance/wallet-management'
+import { useTranslation } from 'react-i18next'
+import { useChain } from '../../hooks/useChain.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,
+}) => {
+  const { t } = useTranslation()
+  const { walletConfig } = useWidgetConfig()
+  const { openWalletMenu } = useWalletMenu()
+  const [fromChainId] = useFieldValues('fromChain')
+  const { chain } = useChain(fromChainId)
+  const { account } = useAccount({ chainType: chain?.chainType })
+
+  const handleClick = async () => {
+    if (account.isConnected) {
+      onClick?.()
+    } else if (walletConfig?.onConnect) {
+      walletConfig.onConnect()
+    } else {
+      openWalletMenu()
+    }
+  }
+
+  const getButtonText = () => {
+    if (account.isConnected) {
+      if (text) {
+        return text
+      }
+    }
+    return t('button.connectWallet')
+  }
+
+  return (
+    <Button
+      variant="contained"
+      color="primary"
+      onClick={handleClick}
+      disabled={account.isConnected && disabled}
+      loading={loading}
+      loadingPosition="center"
+      fullWidth
+    >
+      {getButtonText()}
+    </Button>
+  )
+}

package/src/components/BaseTransactionButton/types.ts

@@ -0,0 +1,6 @@
+export interface BaseTransactionButtonProps {
+  onClick?(): void
+  text?: string
+  disabled?: boolean
+  loading?: boolean
+}

package/src/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,54 @@
+import { Drawer } from '@mui/material'
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'
+import { modalProps, paperProps, slotProps } from '../Dialog.js'
+import type { BottomSheetBase, BottomSheetProps } from './types.js'
+
+export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
+  ({ elementRef, children, open, onClose }, ref) => {
+    const getContainer = useGetScrollableContainer()
+    const openRef = useRef(open)
+    const [drawerOpen, setDrawerOpen] = useState(open)
+
+    const close = useCallback(() => {
+      setDrawerOpen(false)
+      openRef.current = false
+      onClose?.()
+    }, [onClose])
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        isOpen: () => openRef.current,
+        open: () => {
+          setDrawerOpen(true)
+          openRef.current = true
+        },
+        close,
+      }),
+      [close]
+    )
+
+    return (
+      <Drawer
+        container={getContainer}
+        ref={elementRef}
+        anchor="bottom"
+        open={drawerOpen}
+        onClose={close}
+        ModalProps={modalProps}
+        PaperProps={paperProps}
+        slotProps={slotProps}
+        disableAutoFocus
+      >
+        {children}
+      </Drawer>
+    )
+  }
+)

package/src/components/BottomSheet/types.ts

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

package/src/components/ButtonTertiary.tsx

@@ -0,0 +1,18 @@
+import { Button, buttonClasses, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../utils/colors.js'
+
+export const ButtonTertiary = styled(Button)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  height: 40,
+  fontSize: 14,
+  backgroundColor: getContrastAlphaColor(theme, 0.04),
+  '&:hover, &:active': {
+    backgroundColor: getContrastAlphaColor(theme, 0.08),
+  },
+  [`&.${buttonClasses.loading}:disabled`]: {
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
+  },
+  [`.${buttonClasses.loadingIndicator}`]: {
+    color: theme.palette.text.primary,
+  },
+}))

package/src/components/Card/Card.tsx

@@ -0,0 +1,77 @@
+import type { CardProps as MuiCardProps } from '@mui/material'
+import { Card as MuiCard, alpha, darken, lighten, styled } from '@mui/material'
+
+export interface CardProps extends MuiCardProps {
+  type?: 'default' | 'selected' | 'error'
+  selectionColor?: 'primary' | 'secondary'
+  indented?: boolean
+}
+
+export const Card = 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: {
+          backgroundColor: darken(theme.palette.primary.main, 0.65),
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: theme.palette.primary.main,
+          '&:hover': {
+            backgroundColor: darken(theme.palette.primary.main, 0.6),
+            ...theme.applyStyles('light', {
+              backgroundColor: lighten(theme.palette.primary.main, 0.9),
+            }),
+          },
+          ...theme.applyStyles('light', {
+            backgroundColor: lighten(theme.palette.primary.main, 0.95),
+          }),
+        },
+      },
+      {
+        props: {
+          selectionColor: 'secondary',
+          type: 'selected',
+        },
+        style: {
+          backgroundColor: darken(theme.palette.secondary.main, 0.76),
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: alpha(theme.palette.secondary.main, 0.2),
+          '&:hover': {
+            backgroundColor: darken(theme.palette.secondary.main, 0.72),
+            ...theme.applyStyles('light', {
+              backgroundColor: lighten(theme.palette.secondary.main, 0.8),
+            }),
+          },
+          ...theme.applyStyles('light', {
+            backgroundColor: lighten(theme.palette.secondary.main, 0.85),
+          }),
+        },
+      },
+      {
+        props: {
+          type: 'error',
+        },
+        style: {
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: theme.palette.error.main,
+        },
+      },
+    ],
+  }
+})

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

@@ -0,0 +1,35 @@
+import { Box, ButtonBase, Typography, styled } from '@mui/material'
+
+export const CardRowButton = 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.shape.borderRadius,
+}))
+
+export const CardRowContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+}))
+
+export const CardValue = styled(Typography)({
+  lineHeight: '1.25',
+  fontWeight: 500,
+})
+
+export const CardTitleContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1.5),
+}))

package/src/components/Card/CardButton.tsx

@@ -0,0 +1,26 @@
+import type { MouseEventHandler, PropsWithChildren } from 'react'
+import type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types.js'
+import { Card } from './Card.js'
+import {
+  CardRowButton,
+  CardTitleContainer,
+  CardValue,
+} from './CardButton.style.js'
+
+interface SettingCardButtonProps extends SettingCardTitle {
+  onClick: MouseEventHandler
+}
+
+export const CardButton: React.FC<
+  PropsWithChildren<SettingCardButtonProps>
+> = ({ onClick, icon, title, children }) => (
+  <Card>
+    <CardRowButton onClick={onClick} disableRipple>
+      <CardTitleContainer>
+        {icon}
+        <CardValue>{title}</CardValue>
+      </CardTitleContainer>
+      {children}
+    </CardRowButton>
+  </Card>
+)

package/src/components/Card/CardHeader.tsx

@@ -0,0 +1,26 @@
+import {
+  CardHeader as MuiCardHeader,
+  cardHeaderClasses,
+  styled,
+} from '@mui/material'
+
+export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
+  [`.${cardHeaderClasses.action}`]: {
+    marginTop: -2,
+    alignSelf: 'center',
+  },
+  [`.${cardHeaderClasses.title}`]: {
+    fontWeight: 600,
+    fontSize: 18,
+    lineHeight: 1.3334,
+    color: theme.palette.text.primary,
+    textAlign: 'left',
+  },
+  [`.${cardHeaderClasses.subheader}`]: {
+    fontWeight: 500,
+    fontSize: 12,
+    lineHeight: 1.3334,
+    color: theme.palette.text.secondary,
+    textAlign: 'left',
+  },
+}))

package/src/components/Card/CardIconButton.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps, LinkProps } from '@mui/material'
+import { IconButton as MuiIconButton, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../../utils/colors.js'
+
+export const CardIconButton = styled(MuiIconButton)<
+  IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>
+>(({ theme }) => {
+  return {
+    padding: theme.spacing(0.5),
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
+    '&:hover': {
+      backgroundColor: getContrastAlphaColor(theme, 0.08),
+    },
+    fontSize: '1rem',
+  }
+})

package/src/components/Card/CardLabel.tsx

@@ -0,0 +1,106 @@
+import {
+  Box,
+  Typography,
+  getContrastRatio,
+  lighten,
+  styled,
+} from '@mui/material'
+import { blend } from '../../utils/colors.js'
+
+export const CardLabel = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: 'secondary' | 'success' }>(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  padding: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 24,
+  minWidth: 24,
+  userSelect: 'none',
+  fontSize: '1rem',
+  backgroundColor: blend(
+    theme.palette.background.paper,
+    theme.palette.common.white,
+    0.16
+  ),
+  color: theme.palette.text.primary,
+  ...theme.applyStyles('light', {
+    backgroundColor: blend(
+      theme.palette.background.paper,
+      theme.palette.common.black,
+      0.12
+    ),
+  }),
+  variants: [
+    {
+      props: { variant: 'secondary' },
+      style: {
+        backgroundColor: blend(
+          theme.palette.background.paper,
+          theme.palette.secondary.main,
+          0.8
+        ),
+        color:
+          getContrastRatio(
+            theme.palette.common.white,
+            blend(
+              theme.palette.background.paper,
+              theme.palette.secondary.main,
+              0.8
+            )
+          ) >= 3
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+        ...theme.applyStyles('light', {
+          backgroundColor: theme.palette.secondary.main,
+          color:
+            getContrastRatio(
+              theme.palette.common.white,
+              theme.palette.secondary.main
+            ) >= 3
+              ? theme.palette.common.white
+              : theme.palette.common.black,
+        }),
+      },
+    },
+    {
+      props: { variant: 'success' },
+      style: {
+        backgroundColor: blend(
+          theme.palette.background.paper,
+          theme.palette.success.main,
+          0.24
+        ),
+        color: lighten(theme.palette.success.main, 0.24),
+        ...theme.applyStyles('light', {
+          backgroundColor: blend(
+            theme.palette.background.paper,
+            theme.palette.success.main,
+            0.16
+          ),
+          color: lighten(theme.palette.success.main, 0),
+        }),
+      },
+    },
+  ],
+}))
+
+export const CardLabelTypography = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'type',
+})<{ type?: 'icon' }>(({ theme }) => ({
+  padding: theme.spacing(0.75, 1.5),
+  fontSize: 12,
+  lineHeight: 1,
+  fontWeight: '600',
+  variants: [
+    {
+      props: {
+        type: 'icon',
+      },
+      style: {
+        padding: theme.spacing(0.75, 0, 0.75, 0.75),
+      },
+    },
+  ],
+}))

package/src/components/Card/CardTitle.tsx

@@ -0,0 +1,26 @@
+import { Typography, styled } from '@mui/material'
+
+export const CardTitle = styled(Typography, {
+  shouldForwardProp: (prop) => !['required'].includes(prop as string),
+})<{ required?: boolean }>(({ theme }) => ({
+  fontSize: 14,
+  lineHeight: 1,
+  fontWeight: 700,
+  padding: theme.spacing(2, 2, 0, 2),
+  textAlign: 'left',
+  color: theme.palette.text.primary,
+  '&:after': {
+    content: 'none',
+    color: theme.palette.error.main,
+  },
+  variants: [
+    {
+      props: ({ required }) => required,
+      style: {
+        '&:after': {
+          content: '" *"',
+        },
+      },
+    },
+  ],
+}))