@lifi/widget 3.0.0-alpha.2 → 3.0.0-alpha.21

package/components/Header/NavigationTabs.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next';
+import { useSplitSubvariantStore, useFieldActions } from '../../stores';
+import { HeaderAppBar, SplitTabs } from './Header.style';
+import { Tab } from '../Tabs';
+
+export const NavigationTabs = () => {
+  const { t } = useTranslation();
+  const [state, setState] = useSplitSubvariantStore((state) => [
+    state.state,
+    state.setState,
+  ]);
+
+  const { setFieldValue } = useFieldActions();
+  const handleChange = (_: React.SyntheticEvent, value: number) => {
+    setFieldValue('fromAmount', '');
+    setFieldValue('fromToken', '');
+    setFieldValue('toToken', '');
+    setState(value === 0 ? 'swap' : 'bridge');
+  };
+
+  return (
+    <HeaderAppBar elevation={0} sx={{ py: 1 }}>
+      <SplitTabs
+        value={state === 'swap' ? 0 : 1}
+        onChange={handleChange}
+        aria-label="tabs"
+        indicatorColor="primary"
+      >
+        <Tab label={t('header.swap')} disableRipple />
+        <Tab label={t('header.bridge')} disableRipple />
+      </SplitTabs>
+    </HeaderAppBar>
+  );
+};

package/components/Header/SVMDisconnectIconButton.tsx

@@ -0,0 +1,19 @@
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
+import { IconButton } from '@mui/material';
+import { useWallet } from '@solana/wallet-adapter-react';
+
+export const SVMDisconnectIconButton = () => {
+  const { disconnect } = useWallet();
+
+  return (
+    <IconButton
+      size="medium"
+      onClick={(e) => {
+        e.stopPropagation();
+        disconnect();
+      }}
+    >
+      <PowerSettingsNewIcon />
+    </IconButton>
+  );
+};

package/components/Header/SettingsButton.style.tsx

@@ -0,0 +1,44 @@
+import { Badge as MuiBadge } from '@mui/material';
+import { badgeClasses } from '@mui/material/Badge';
+import IconButton from '@mui/material/IconButton';
+import { darken, styled } from '@mui/material/styles';
+import { getInfoBackgroundColor, getWarningBackgroundColor } from '../../utils';
+
+export const SettingsIconBadge = styled(MuiBadge)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1.25),
+  [`.${badgeClasses.badge}`]: {
+    width: 10,
+    height: 10,
+    borderRadius: '50%',
+    transform: 'translate(70%, -70%)',
+  },
+}));
+
+interface SettingsIconButtonProps {
+  variant?: 'info' | 'warning';
+}
+
+export const SettingsIconButton = styled(IconButton, {
+  shouldForwardProp: (props) => props !== 'variant',
+})<SettingsIconButtonProps>(({ theme, variant }) => {
+  switch (variant) {
+    case 'info':
+      return {
+        backgroundColor: getInfoBackgroundColor(theme),
+        '&:hover': {
+          backgroundColor: darken(getInfoBackgroundColor(theme), 0.2),
+        },
+      };
+    case 'warning':
+      return {
+        backgroundColor: getWarningBackgroundColor(theme),
+        '&:hover': {
+          backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
+        },
+      };
+    default:
+      break;
+  }
+});

package/components/Header/SettingsButton.tsx

@@ -0,0 +1,42 @@
+import SettingsIcon from '@mui/icons-material/Settings';
+import { Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigateBack, useSettingMonitor } from '../../hooks';
+import { navigationRoutes } from '../../utils';
+import { SettingsIconBadge, SettingsIconButton } from './SettingsButton.style';
+
+export const SettingsButton = () => {
+  const { t } = useTranslation();
+  const { navigate } = useNavigateBack();
+
+  const { isCustomRouteSettings, isRouteSettingsWithWarnings } =
+    useSettingMonitor();
+
+  const variant = isRouteSettingsWithWarnings
+    ? 'warning'
+    : isCustomRouteSettings
+      ? 'info'
+      : undefined;
+
+  const tooltipMessage = variant
+    ? t(`tooltip.settingsModified`)
+    : t(`header.settings`);
+
+  return (
+    <Tooltip title={tooltipMessage} enterDelay={400} arrow>
+      <SettingsIconButton
+        size="medium"
+        onClick={() => navigate(navigationRoutes.settings)}
+        variant={variant}
+      >
+        {variant ? (
+          <SettingsIconBadge variant="dot" color={variant}>
+            <SettingsIcon />
+          </SettingsIconBadge>
+        ) : (
+          <SettingsIcon />
+        )}
+      </SettingsIconButton>
+    </Tooltip>
+  );
+};

package/components/Header/TransactionHistoryButton.tsx

@@ -0,0 +1,23 @@
+import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
+import { Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import { useTranslation } from 'react-i18next';
+import { useNavigateBack } from '../../hooks';
+import { navigationRoutes } from '../../utils';
+
+export const TransactionHistoryButton = () => {
+  const { t } = useTranslation();
+  const { navigate } = useNavigateBack();
+
+  return (
+    <Tooltip title={t(`header.transactionHistory`)} enterDelay={400} arrow>
+      <IconButton
+        size="medium"
+        edge="start"
+        onClick={() => navigate(navigationRoutes.transactionHistory)}
+      >
+        <ReceiptLongIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};

package/components/Header/WalletHeader.tsx

@@ -0,0 +1,173 @@
+import { getConnectorIcon } from '@lifi/wallet-management';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import WalletIcon from '@mui/icons-material/Wallet';
+import { Avatar, Badge } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import type { Account } from '../../hooks';
+import { useAccount, useChain } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { useHasExternalWalletProvider } from '../../providers/WalletProvider';
+import { HiddenUI } from '../../types';
+import { navigationRoutes, shortenAddress } from '../../utils';
+import { SmallAvatar } from '../SmallAvatar';
+import { CloseDrawerButton } from './CloseDrawerButton';
+import {
+  DrawerWalletContainer,
+  HeaderAppBar,
+  WalletButton,
+} from './Header.style';
+import { WalletMenu } from './WalletMenu';
+import { WalletMenuContainer } from './WalletMenu.style';
+
+export const WalletHeader: React.FC = () => {
+  const { subvariant, hiddenUI } = useWidgetConfig();
+  const { hasExternalProvider } = useHasExternalWalletProvider();
+  return !hasExternalProvider &&
+    subvariant !== 'split' &&
+    !hiddenUI?.includes(HiddenUI.WalletMenu) ? (
+    <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>
+      <WalletMenuButton />
+    </HeaderAppBar>
+  ) : null;
+};
+
+export const SplitWalletMenuButton: React.FC = () => {
+  const { hiddenUI } = useWidgetConfig();
+  const { hasExternalProvider } = useHasExternalWalletProvider();
+  return !hasExternalProvider && !hiddenUI?.includes(HiddenUI.WalletMenu) ? (
+    <WalletMenuButton />
+  ) : null;
+};
+
+export const WalletMenuButton: React.FC = () => {
+  const { account } = useAccount();
+  const { variant, subvariant, hiddenUI } = useWidgetConfig();
+
+  if (variant === 'drawer') {
+    return (
+      <DrawerWalletContainer>
+        {account.isConnected ? (
+          <ConnectedButton account={account} />
+        ) : (
+          <ConnectButton />
+        )}
+        {subvariant !== 'split' &&
+        !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (
+          <CloseDrawerButton />
+        ) : null}
+      </DrawerWalletContainer>
+    );
+  }
+  return account.isConnected ? (
+    <ConnectedButton account={account} />
+  ) : (
+    <ConnectButton />
+  );
+};
+
+const ConnectButton = () => {
+  const { t } = useTranslation();
+  const { pathname } = useLocation();
+  const { walletConfig, subvariant, variant } = useWidgetConfig();
+  const navigate = useNavigate();
+  const connect = async () => {
+    if (walletConfig?.onConnect) {
+      walletConfig.onConnect();
+      return;
+    }
+    navigate(navigationRoutes.selectWallet);
+  };
+  return (
+    <WalletButton
+      endIcon={
+        variant !== 'drawer' && subvariant !== 'split' ? (
+          <WalletIcon />
+        ) : undefined
+      }
+      startIcon={
+        variant === 'drawer' || subvariant === 'split' ? (
+          <WalletIcon sx={{ marginLeft: -0.25 }} />
+        ) : undefined
+      }
+      onClick={
+        !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined
+      }
+      sx={{
+        marginRight: subvariant === 'split' ? 0 : -1.25,
+        marginLeft: subvariant === 'split' ? -1.25 : 0,
+      }}
+    >
+      {t(`button.connectWallet`)}
+    </WalletButton>
+  );
+};
+
+const ConnectedButton = ({ account }: { account: Account }) => {
+  const { subvariant } = useWidgetConfig();
+  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);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const avatar = (
+    <Avatar
+      src={getConnectorIcon(account.connector)}
+      alt={account.connector?.name}
+      sx={{ width: 24, height: 24 }}
+    >
+      {account.connector?.name[0]}
+    </Avatar>
+  );
+
+  return (
+    <>
+      <WalletButton
+        endIcon={<ExpandMoreIcon />}
+        startIcon={
+          chain?.logoURI ? (
+            <Badge
+              overlap="circular"
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              badgeContent={
+                <SmallAvatar
+                  src={chain?.logoURI}
+                  alt={chain?.name}
+                  sx={{ width: 16, height: 16 }}
+                >
+                  {chain?.name[0]}
+                </SmallAvatar>
+              }
+            >
+              {avatar}
+            </Badge>
+          ) : (
+            avatar
+          )
+        }
+        sx={{
+          marginRight: subvariant === 'split' ? 0 : -1.25,
+          marginLeft: subvariant === 'split' ? -1 : 0,
+        }}
+        onClick={handleClick}
+      >
+        {walletAddress}
+      </WalletButton>
+      <WalletMenuContainer
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <WalletMenu onClose={handleClose} />
+      </WalletMenuContainer>
+    </>
+  );
+};

package/components/Header/WalletMenu.tsx

@@ -0,0 +1,114 @@
+import { ChainType } from '@lifi/sdk';
+import { getConnectorIcon } from '@lifi/wallet-management';
+import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
+import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  IconButton,
+  MenuItem,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useAccount, useAvailableChains } from '../../hooks';
+import { navigationRoutes, shortenAddress } from '../../utils';
+import { SmallAvatar } from '../SmallAvatar';
+import { EVMDisconnectIconButton } from './EVMDisconnectIconButton';
+import { SVMDisconnectIconButton } from './SVMDisconnectIconButton';
+
+export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const { accounts } = useAccount();
+  const { getChainById } = useAvailableChains();
+  const connect = async () => {
+    navigate(navigationRoutes.selectWallet);
+    onClose();
+  };
+
+  return (
+    <Box>
+      <Box 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();
+          };
+          const avatar = (
+            <Avatar
+              src={getConnectorIcon(account.connector)}
+              alt={account.connector?.name}
+              sx={{
+                marginRight: chain?.logoURI ? 0 : 1.5,
+              }}
+            >
+              {account.connector?.name[0]}
+            </Avatar>
+          );
+          return (
+            <MenuItem key={account.address}>
+              <Box 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 }}
+                  >
+                    {avatar}
+                  </Badge>
+                ) : (
+                  avatar
+                )}
+                {walletAddress}
+              </Box>
+              <Box ml={1}>
+                <IconButton size="medium" onClick={handleCopyAddress}>
+                  <ContentCopyIcon />
+                </IconButton>
+                <IconButton
+                  size="medium"
+                  component="a"
+                  onClick={onClose}
+                  href={`${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`}
+                  target="_blank"
+                >
+                  <OpenInNewIcon />
+                </IconButton>
+                {account.chainType === ChainType.EVM ? (
+                  <EVMDisconnectIconButton connector={account.connector} />
+                ) : account.chainType === ChainType.SVM ? (
+                  <SVMDisconnectIconButton />
+                ) : null}
+              </Box>
+            </MenuItem>
+          );
+        })}
+      </Box>
+      {!pathname.includes(navigationRoutes.selectWallet) ? (
+        <Button
+          onClick={connect}
+          fullWidth
+          startIcon={<PowerSettingsNewIcon />}
+          sx={{
+            marginTop: 1,
+          }}
+        >
+          {accounts.length > 1
+            ? t(`button.changeWallet`)
+            : t(`button.connectWallet`)}
+        </Button>
+      ) : null}
+    </Box>
+  );
+};

package/components/Header/index.ts

@@ -0,0 +1 @@
+export * from './Header';

package/components/Insurance/InsuranceCard.tsx

@@ -0,0 +1,118 @@
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import { Box, Collapse, Link, Typography } from '@mui/material';
+import type { ChangeEvent } from 'react';
+import { useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { InsuraceLogo } from '../../icons';
+import { RouteExecutionStatus } from '../../stores';
+import { Card, CardLabel, CardLabelTypography } from '../Card';
+import { Switch } from '../Switch';
+import type { InsuranceCardProps } from './types';
+
+export const InsuranceCard: React.FC<InsuranceCardProps> = ({
+  status,
+  feeAmountUsd,
+  insuredAmount,
+  insuredTokenSymbol,
+  insuranceCoverageId,
+  onChange,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const [enabled, setEnabled] = useState(false);
+
+  const handleSwitch = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+    setEnabled(checked);
+    onChange?.(checked);
+  };
+
+  return (
+    <Card selectionColor="secondary" indented {...props}>
+      <Box display="flex" alignItems="center" justifyContent="space-between">
+        <CardLabel type={'insurance'}>
+          <VerifiedUserIcon fontSize="inherit" />
+          <CardLabelTypography type="icon">
+            {status === RouteExecutionStatus.Idle
+              ? t('main.tags.insurance')
+              : t('main.tags.insured')}
+          </CardLabelTypography>
+        </CardLabel>
+        <Switch onChange={handleSwitch} value={enabled} />
+      </Box>
+      <Collapse timeout={225} in={enabled} mountOnEnter unmountOnExit>
+        <Box mt={2}>
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+            mb={2}
+          >
+            <Typography fontSize={24} fontWeight={700} lineHeight={1}>
+              {t('format.currency', {
+                value: feeAmountUsd,
+              })}
+            </Typography>
+            <InsuraceLogo />
+          </Box>
+          <Box>
+            <Typography fontSize={14}>
+              <Trans
+                i18nKey={
+                  status === RouteExecutionStatus.Idle
+                    ? 'insurance.insure'
+                    : 'insurance.insured'
+                }
+                values={{
+                  amount: insuredAmount,
+                  tokenSymbol: insuredTokenSymbol,
+                }}
+                components={[<strong />]}
+              />
+            </Typography>
+            <Collapse
+              timeout={225}
+              in={enabled || status !== RouteExecutionStatus.Idle}
+              mountOnEnter
+              unmountOnExit
+            >
+              <Box
+                sx={{
+                  listStyleType: 'disc',
+                  pl: 2,
+                }}
+              >
+                <Typography fontSize={14} display="list-item">
+                  {t('insurance.bridgeExploits')}
+                </Typography>
+                <Typography fontSize={14} display="list-item">
+                  {t('insurance.slippageError')}
+                </Typography>
+              </Box>
+            </Collapse>
+            <Link
+              href={
+                status === RouteExecutionStatus.Idle
+                  ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
+                  : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`
+              }
+              target="_blank"
+              underline="none"
+              color="text.primary"
+            >
+              <Typography
+                pt={0.5}
+                color="primary"
+                fontSize={14}
+                fontWeight={600}
+              >
+                {status === RouteExecutionStatus.Idle
+                  ? t('button.learnMore')
+                  : t('button.viewCoverage')}
+              </Typography>
+            </Link>
+          </Box>
+        </Box>
+      </Collapse>
+    </Card>
+  );
+};

package/components/Insurance/index.ts

@@ -0,0 +1,2 @@
+export * from './Insurance';
+export * from './types';

package/components/ListItem/ListItem.tsx

@@ -0,0 +1,24 @@
+import { styled } from '@mui/material/styles';
+import { ListItem as MuiListItem } from '@mui/material';
+import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { listItemTextClasses } from '@mui/material/ListItemText';
+
+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/components/ListItem/ListItemButton.tsx

@@ -0,0 +1,9 @@
+import { styled } from '@mui/material/styles';
+import { ListItemButton as ListItemButtonBase } from '../ListItemButton';
+
+export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
+  height: 64,
+  width: '100%',
+}));

package/components/ListItem/index.ts

@@ -0,0 +1,2 @@
+export * from './ListItem';
+export * from './ListItemButton';

package/components/ListItemButton.tsx

@@ -0,0 +1,16 @@
+import { ListItemButton as MuiListItemButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../utils';
+
+export const ListItemButton = styled(MuiListItemButton)(
+  ({ theme, disabled }) => ({
+    borderRadius: theme.shape.borderRadius,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    ...(disabled ? { opacity: 0.5, cursor: 'auto' } : {}),
+    '&:hover': {
+      backgroundColor:
+        !disabled && getContrastAlphaColor(theme.palette.mode, '4%'),
+    },
+  }),
+);

package/components/Menu.tsx

@@ -0,0 +1,27 @@
+import { styled } from '@mui/material/styles';
+import {
+  Menu as MuiMenu,
+  menuClasses,
+  menuItemClasses,
+  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),
+      },
+    },
+  },
+}));