@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.41

package/components/ContractComponent/ItemPrice.tsx

@@ -0,0 +1,33 @@
+import type { ContractCall } from '@lifi/sdk';
+import { useEffect } from 'react';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import type { TokenAmount } from '../../types/token.js';
+import { Token } from '../Token/Token.js';
+
+export interface ItemPriceProps {
+  token: TokenAmount;
+  contractCalls?: ContractCall[];
+}
+
+export const ItemPrice: React.FC<ItemPriceProps> = ({
+  token,
+  contractCalls,
+}) => {
+  const { setFieldValue } = useFieldActions();
+
+  useEffect(() => {
+    if (token) {
+      setFieldValue('toChain', token.chainId, { isTouched: true });
+      setFieldValue('toToken', token.address, { isTouched: true });
+      setFieldValue('toAmount', token.amount?.toString(), {
+        isTouched: true,
+      });
+    }
+    if (contractCalls) {
+      setFieldValue('contractCalls', contractCalls, {
+        isTouched: true,
+      });
+    }
+  }, [contractCalls, setFieldValue, token]);
+  return <Token token={token} p={2} />;
+};

package/components/ContractComponent/NFT/NFT.style.ts

@@ -0,0 +1,8 @@
+import { Avatar, styled } from '@mui/material';
+
+export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  width: 96,
+  height: 96,
+  borderRadius: theme.shape.borderRadius,
+}));

package/components/ContractComponent/NFT/NFT.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useFieldActions } from '../../../stores/form/useFieldActions.js';
+import { NFTBase } from './NFTBase.js';
+import type { NFTProps } from './types.js';
+
+export const NFT: React.FC<NFTProps> = ({
+  imageUrl,
+  isLoading,
+  collectionName,
+  assetName,
+  owner,
+  token,
+  contractCall,
+}) => {
+  const { setFieldValue } = useFieldActions();
+
+  useEffect(() => {
+    if (token) {
+      setFieldValue('toChain', token.chainId, { isTouched: true });
+      setFieldValue('toToken', token.address, { isTouched: true });
+      setFieldValue('toAmount', token.amount?.toString(), {
+        isTouched: true,
+      });
+    }
+    if (contractCall) {
+      setFieldValue('contractCalls', [contractCall], {
+        isTouched: true,
+      });
+    }
+  }, [contractCall, setFieldValue, token]);
+  return (
+    <NFTBase
+      isLoading={isLoading}
+      imageUrl={imageUrl}
+      collectionName={collectionName}
+      assetName={assetName}
+      owner={owner}
+      token={token}
+    />
+  );
+};

package/components/ContractComponent/NFT/NFTBase.tsx

@@ -0,0 +1,64 @@
+import { Box, Link, Skeleton, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Token } from '../../Token/Token.js';
+import { PreviewAvatar } from './NFT.style.js';
+import type { NFTProps } from './types.js';
+
+export const NFTBase: React.FC<NFTProps> = ({
+  imageUrl,
+  isLoading,
+  collectionName,
+  assetName,
+  owner,
+  token,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Box p={2}>
+      <Box display="flex">
+        {isLoading ? (
+          <Skeleton
+            width={96}
+            height={96}
+            variant="rectangular"
+            sx={{ borderRadius: 1 }}
+          />
+        ) : (
+          <PreviewAvatar src={imageUrl} />
+        )}
+        <Box ml={2}>
+          {isLoading ? (
+            <Skeleton width={144} height={21} variant="text" />
+          ) : (
+            <Typography fontSize={14} color="text.secondary">
+              {collectionName}
+            </Typography>
+          )}
+          {isLoading ? (
+            <Skeleton width={112} height={27} variant="text" />
+          ) : (
+            <Typography fontSize={18} fontWeight={600}>
+              {assetName}
+            </Typography>
+          )}
+          {isLoading ? (
+            <Skeleton width={128} height={21} variant="text" />
+          ) : owner ? (
+            <Typography fontSize={14} color="text.secondary">
+              {t('main.ownedBy')}{' '}
+              <Link
+                href={owner.url}
+                target="_blank"
+                underline="none"
+                color="primary"
+              >
+                {owner.name}
+              </Link>
+            </Typography>
+          ) : null}
+        </Box>
+      </Box>
+      <Token token={token} isLoading={isLoading} mt={2} />
+    </Box>
+  );
+};

package/components/ContractComponent/NFT/types.ts

@@ -0,0 +1,19 @@
+import type { ContractCall, TokenAmount } from '@lifi/sdk';
+
+export interface NFTBaseProps {
+  imageUrl?: string;
+  collectionName?: string;
+  assetName?: string;
+  isLoading?: boolean;
+  owner?: NFTOwner;
+  token: TokenAmount;
+}
+
+export interface NFTProps extends NFTBaseProps {
+  contractCall?: ContractCall;
+}
+
+export interface NFTOwner {
+  name?: string;
+  url?: string;
+}

package/components/Dialog.tsx

@@ -0,0 +1,51 @@
+import type { DialogProps, PaperProps, Theme } from '@mui/material';
+import { Dialog as MuiDialog } from '@mui/material';
+import type { PropsWithChildren } from 'react';
+import { useGetScrollableContainer } from '../hooks/useScrollableContainer.js';
+
+export const modalProps = {
+  sx: {
+    position: 'absolute',
+    overflow: 'hidden',
+  },
+};
+
+export const paperProps: Partial<PaperProps> = {
+  sx: (theme: Theme) => ({
+    position: 'absolute',
+    backgroundImage: 'none',
+    backgroundColor: theme.palette.background.default,
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius,
+  }),
+};
+
+export const slotProps = {
+  backdrop: {
+    sx: {
+      position: 'absolute',
+      backgroundColor: 'rgb(0 0 0 / 32%)',
+      backdropFilter: 'blur(3px)',
+    },
+  },
+};
+
+export const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({
+  children,
+  open,
+  onClose,
+}) => {
+  const getContainer = useGetScrollableContainer();
+  return (
+    <MuiDialog
+      container={getContainer}
+      open={open}
+      onClose={onClose}
+      sx={modalProps.sx}
+      PaperProps={paperProps}
+      slotProps={slotProps}
+    >
+      {children}
+    </MuiDialog>
+  );
+};

package/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -0,0 +1,20 @@
+import { WarningRounded } from '@mui/icons-material';
+import { Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { AlertMessage } from '../AlertMessage/AlertMessage.js';
+
+export const FundsSufficiencyMessage = () => {
+  const { t } = useTranslation();
+  return (
+    <AlertMessage
+      severity="warning"
+      icon={<WarningRounded />}
+      title={
+        <Typography variant="body2" px={1} color="text.primary">
+          {t(`warning.message.insufficientFunds`)}
+        </Typography>
+      }
+      multilineTitle
+    />
+  );
+};

package/components/GasMessage/GasMessage.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:
+          theme.palette.mode === 'light'
+            ? theme.palette.info.main
+            : alpha(theme.palette.info.main, 0.84),
+      },
+    },
+    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
+      color:
+        theme.palette.mode === 'light'
+          ? theme.palette.info.main
+          : alpha(theme.palette.info.main, 0.84),
+    },
+  },
+}));

package/components/GasMessage/GasMessage.tsx

@@ -0,0 +1,35 @@
+import type { Route } from '@lifi/sdk';
+import type { BoxProps } from '@mui/material';
+import { Box, Collapse } from '@mui/material';
+import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js';
+import { useGasSufficiency } from '../../hooks/useGasSufficiency.js';
+import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js';
+import { GasSufficiencyMessage } from './GasSufficiencyMessage.js';
+
+interface GasMessageProps extends BoxProps {
+  route?: Route;
+}
+
+export const GasMessage: React.FC<GasMessageProps> = ({ route, ...props }) => {
+  const { insufficientGas } = useGasSufficiency(route);
+  const { insufficientFromToken } = useFromTokenSufficiency(route);
+
+  const validInsufficientGas = insufficientGas?.length;
+
+  return (
+    <Collapse
+      timeout={225}
+      in={Boolean(insufficientFromToken || validInsufficientGas)}
+      unmountOnExit
+      mountOnEnter
+    >
+      <Box {...props}>
+        {insufficientFromToken ? (
+          <FundsSufficiencyMessage />
+        ) : validInsufficientGas ? (
+          <GasSufficiencyMessage insufficientGas={insufficientGas} />
+        ) : null}
+      </Box>
+    </Collapse>
+  );
+};

package/components/GasMessage/GasRefuelMessage.tsx

@@ -0,0 +1,67 @@
+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 { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
+import { AlertMessage } from '../AlertMessage/AlertMessage.js';
+import { InfoMessageSwitch } from './GasMessage.style.js';
+
+export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
+  const { t } = useTranslation();
+  const setValue = useSettingsStore((state) => state.setValue);
+  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
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+            flexGrow={1}
+          >
+            <Typography variant="body2" fontWeight={700}>
+              {t(`info.title.autoRefuel`)}
+            </Typography>
+            <InfoMessageSwitch
+              checked={enabledAutoRefuel}
+              onChange={onChange}
+            />
+          </Box>
+        }
+        {...props}
+      >
+        <Collapse
+          timeout={225}
+          in={enabledAutoRefuel}
+          unmountOnExit
+          mountOnEnter
+        >
+          <Typography variant="body2" px={2} pt={1}>
+            {t(`info.message.autoRefuel`, {
+              chainName: chain?.name,
+            })}
+          </Typography>
+        </Collapse>
+      </AlertMessage>
+    </Collapse>
+  );
+};

package/components/GasMessage/GasSufficiencyMessage.tsx

@@ -0,0 +1,43 @@
+import { EvStation } from '@mui/icons-material';
+import { Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import type { GasSufficiency } from '../../hooks/useGasSufficiency.js';
+import { AlertMessage } from '../AlertMessage/AlertMessage.js';
+
+interface GasSufficiencyMessageProps {
+  insufficientGas?: GasSufficiency[];
+}
+
+export const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({
+  insufficientGas,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <AlertMessage
+      severity="warning"
+      icon={<EvStation />}
+      title={
+        <Typography variant="body2" fontWeight={700}>
+          {t(`warning.title.insufficientGas`)}
+        </Typography>
+      }
+    >
+      <Typography variant="body2" px={2} pt={1}>
+        {t(`warning.message.insufficientGas`)}
+      </Typography>
+      {insufficientGas?.map((item, index) => (
+        <Typography key={index} variant="body2" 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/components/Header/BackButton.tsx

@@ -0,0 +1,17 @@
+import { ArrowBack } from '@mui/icons-material';
+import type { IconButtonProps } from '@mui/material';
+import { IconButton, useTheme } from '@mui/material';
+
+export const BackButton: React.FC<IconButtonProps> = ({ onClick }) => {
+  const theme = useTheme();
+
+  return (
+    <IconButton
+      size="medium"
+      edge={theme?.navigation?.edge ? 'start' : false}
+      onClick={onClick}
+    >
+      <ArrowBack />
+    </IconButton>
+  );
+};

package/components/Header/CloseDrawerButton.tsx

@@ -0,0 +1,30 @@
+import { CloseRounded } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useDrawer } from '../../AppDrawerContext.js';
+import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+
+interface CloseDrawerButtonProps {
+  header?: 'navigation' | 'wallet';
+}
+
+export const CloseDrawerButton = ({ header }: CloseDrawerButtonProps) => {
+  const { t } = useTranslation();
+  const { subvariant } = useWidgetConfig();
+  const { closeDrawer } = useDrawer();
+  const { hasExternalProvider } = useHasExternalWalletProvider();
+
+  const showInNavigationHeader =
+    header === 'navigation' && (hasExternalProvider || subvariant === 'split');
+
+  const showInWalletHeader = header === 'wallet' && subvariant !== 'split';
+
+  return showInNavigationHeader || showInWalletHeader ? (
+    <Tooltip title={t('button.close')} enterDelay={400} arrow>
+      <IconButton size="medium" onClick={closeDrawer}>
+        <CloseRounded />
+      </IconButton>
+    </Tooltip>
+  ) : null;
+};

package/components/Header/EVMDisconnectIconButton.tsx

@@ -0,0 +1,24 @@
+import { PowerSettingsNewRounded } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import type { Connector } from 'wagmi';
+import { useDisconnect } from 'wagmi';
+
+export const EVMDisconnectIconButton = ({
+  connector,
+}: {
+  connector?: Connector;
+}) => {
+  const { disconnect } = useDisconnect();
+
+  return (
+    <IconButton
+      size="medium"
+      onClick={(e) => {
+        e.stopPropagation();
+        disconnect({ connector });
+      }}
+    >
+      <PowerSettingsNewRounded />
+    </IconButton>
+  );
+};

package/components/Header/Header.style.ts

@@ -0,0 +1,89 @@
+import {
+  AppBar,
+  Avatar,
+  Box,
+  Button,
+  buttonClasses,
+  styled,
+} from '@mui/material';
+import type { WidgetSubvariant } from '../../types/widget.js';
+import { getContrastAlphaColor } from '../../utils/colors.js';
+import { avatarMask12 } from '../Avatar/utils.js';
+
+export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
+  backgroundColor: 'transparent',
+  color: theme.palette.text.primary,
+  flexDirection: 'row',
+  alignItems: 'center',
+  position: 'relative',
+}));
+
+export const Container = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'sticky',
+})<{ sticky?: boolean }>(({ theme, sticky }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: theme.palette.background.default,
+  backdropFilter: 'blur(12px)',
+  position: sticky ? 'sticky' : 'relative',
+  top: 0,
+  zIndex: 1200,
+  gap: theme.spacing(0.5),
+  padding: theme.spacing(1.5, 3, 1.5, 3),
+}));
+
+export const WalletButton = styled(Button, {
+  shouldForwardProp: (prop) => prop !== 'subvariant',
+})<{ subvariant?: WidgetSubvariant }>(({ subvariant, theme }) => ({
+  color: theme.palette.text.primary,
+  backgroundColor: 'transparent',
+  padding: theme.spacing(1, 1.5),
+  maxHeight: 40,
+  fontSize: '0.875rem',
+  fontWeight: 600,
+  borderRadius: theme.shape.borderRadius * 2,
+  '&:hover': {
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
+  },
+  [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+    fontSize: '24px',
+  },
+  [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {
+    fontSize: '24px',
+  },
+  ...(theme.navigation.edge && {
+    marginRight: subvariant === 'split' ? 0 : theme.spacing(-1.25),
+    marginLeft: subvariant === 'split' ? theme.spacing(-1) : 0,
+  }),
+}));
+
+export const DrawerWalletContainer = styled(Box)(({ theme }) => ({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
+
+  ...(theme.navigation.edge && {
+    '& button:first-of-type': {
+      marginLeft: theme.spacing(-1),
+    },
+    '& button:last-of-type': {
+      marginRight: theme.spacing(-1.25),
+    },
+  }),
+}));
+
+export const HeaderControlsContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  gap: theme.spacing(0.5),
+  ...(theme.navigation.edge && {
+    '& button:last-of-type': {
+      marginRight: theme.spacing(-1.25),
+    },
+  }),
+}));
+
+export const WalletAvatar = styled(Avatar)(({ theme }) => ({
+  mask: avatarMask12,
+  width: 24,
+  height: 24,
+}));

package/components/Header/Header.tsx

@@ -0,0 +1,30 @@
+import type { FC, PropsWithChildren } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
+import { ElementId, createElementId } from '../../utils/elements.js';
+import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js';
+import { Container } from './Header.style.js';
+import { NavigationHeader } from './NavigationHeader.js';
+import { WalletHeader } from './WalletHeader.js';
+
+export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const { pathname } = useLocation();
+  const elementId = useDefaultElementId();
+  return (
+    <Container
+      id={createElementId(ElementId.Header, elementId)}
+      sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}
+    >
+      {children}
+    </Container>
+  );
+};
+
+export const Header: FC = () => {
+  return (
+    <HeaderContainer>
+      <WalletHeader />
+      <NavigationHeader />
+    </HeaderContainer>
+  );
+};