@lifi/widget 3.0.0-alpha.7 → 3.0.0-alpha.8

package/components/Header/NavigationTabs.tsx

@@ -0,0 +1,35 @@
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { FormKey } from '../../providers';
+import { useSplitSubvariantStore } 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 { setValue } = useFormContext();
+  const handleChange = (_: React.SyntheticEvent, value: number) => {
+    setValue(FormKey.FromAmount, '');
+    setValue(FormKey.FromToken, '');
+    setValue(FormKey.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/SettingsButton.style.tsx

@@ -0,0 +1,48 @@
+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 }) => {
+  const variantStyles = {
+    info: {
+      backgroundColor: getInfoBackgroundColor(theme),
+      '&:hover': {
+        backgroundColor: darken(getInfoBackgroundColor(theme), 0.2),
+      },
+    },
+    warning: {
+      backgroundColor: getWarningBackgroundColor(theme),
+      '&:hover': {
+        backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
+      },
+    },
+    default: {
+      marginRight: theme.spacing(-1.25),
+    },
+  };
+
+  return {
+    borderRadius: 20,
+    ...variantStyles[variant ?? 'default'],
+  };
+});

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/WalletHeader.tsx

@@ -0,0 +1,149 @@
+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 { navigationRoutes, shortenAddress } from '../../utils';
+import { SmallAvatar } from '../SmallAvatar';
+import {
+  DrawerWalletContainer,
+  HeaderAppBar,
+  WalletButton,
+} from './Header.style';
+import { WalletMenu } from './WalletMenu';
+import { WalletMenuContainer } from './WalletMenu.style';
+
+export const WalletHeader: React.FC = () => {
+  return (
+    <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>
+      <WalletMenuButton />
+    </HeaderAppBar>
+  );
+};
+
+export const WalletMenuButton: React.FC = () => {
+  const { account } = useAccount();
+  const { variant } = useWidgetConfig();
+
+  if (variant === 'drawer') {
+    return (
+      <DrawerWalletContainer>
+        {account.isConnected ? (
+          <ConnectedButton account={account} />
+        ) : (
+          <ConnectButton />
+        )}
+      </DrawerWalletContainer>
+    );
+  }
+  return account.isConnected ? (
+    <ConnectedButton account={account} />
+  ) : (
+    <ConnectButton />
+  );
+};
+
+const ConnectButton = () => {
+  const { t } = useTranslation();
+  const { pathname } = useLocation();
+  const { walletManagement, subvariant, variant } = useWidgetConfig();
+  const navigate = useNavigate();
+  const connect = async () => {
+    if (walletManagement) {
+      await walletManagement.connect();
+      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={account.connector?.icon}
+      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}>
+                  {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.style.tsx

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

package/components/Header/WalletMenu.tsx

@@ -0,0 +1,150 @@
+import { ChainType } from '@lifi/sdk';
+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 { useWallet } from '@solana/wallet-adapter-react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import type { Connector } from 'wagmi';
+import { useDisconnect } from 'wagmi';
+import { useAccount, useAvailableChains } from '../../hooks';
+import { navigationRoutes, shortenAddress } from '../../utils';
+import { SmallAvatar } from '../SmallAvatar';
+
+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
+          .filter((account) => account.isConnected)
+          .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={account.connector?.icon}
+                alt={account.connector?.name}
+                sx={{
+                  width: 32,
+                  height: 32,
+                  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.filter((account) => account.isConnected).length > 1
+            ? t(`button.changeWallet`)
+            : t(`button.connectWallet`)}
+        </Button>
+      ) : null}
+    </Box>
+  );
+};
+
+const EVMDisconnectIconButton = ({ connector }: { connector?: Connector }) => {
+  const { disconnect } = useDisconnect();
+
+  return (
+    <IconButton
+      size="medium"
+      onClick={(e) => {
+        e.stopPropagation();
+        disconnect({ connector });
+      }}
+    >
+      <PowerSettingsNewIcon />
+    </IconButton>
+  );
+};
+
+const SVMDisconnectIconButton = () => {
+  const { disconnect } = useWallet();
+
+  return (
+    <IconButton
+      size="medium"
+      onClick={(e) => {
+        e.stopPropagation();
+        disconnect();
+      }}
+    >
+      <PowerSettingsNewIcon />
+    </IconButton>
+  );
+};

package/components/Header/index.ts

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

package/components/Initializer.tsx

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

package/components/Input.tsx

@@ -0,0 +1,16 @@
+import { InputBase } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
+
+export const Input = styled(InputBase)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.common.white
+      : theme.palette.background.paper,
+  paddingRight: theme.spacing(2),
+  [`.${inputBaseClasses.input}`]: {
+    padding: theme.spacing(1.5, 1, 1.5, 2),
+    height: '2.875em',
+    boxSizing: 'inherit',
+  },
+}));

package/components/Insurance/Insurance.tsx

@@ -0,0 +1,22 @@
+import { RouteExecutionStatus } from '../../stores';
+import { InsuranceCard } from './InsuranceCard';
+import { InsuranceCollapsed } from './InsuranceCollapsed';
+import type { InsuranceProps } from './types';
+
+export const Insurance: React.FC<InsuranceProps> = ({
+  status,
+  insurableRouteId,
+  onChange,
+  ...props
+}) => {
+  return status === RouteExecutionStatus.Idle ? (
+    <InsuranceCollapsed
+      status={status}
+      insurableRouteId={insurableRouteId}
+      onChange={onChange}
+      {...props}
+    />
+  ) : (
+    <InsuranceCard status={status} {...props} />
+  );
+};

package/components/Insurance/InsuranceCard.tsx

@@ -0,0 +1,136 @@
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import { Box, Collapse, Link, Typography } from '@mui/material';
+import type { ChangeEvent, MouseEventHandler } from 'react';
+import { useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { InsuraceLogo } from '../../icons';
+import { RouteExecutionStatus } from '../../stores';
+import { Card, CardIconButton, 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 [cardExpanded, setCardExpanded] = useState(
+    status === RouteExecutionStatus.Idle,
+  );
+
+  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setCardExpanded((expanded) => !expanded);
+  };
+
+  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>
+        {status === RouteExecutionStatus.Idle ? (
+          <Switch onChange={handleSwitch} value={enabled} />
+        ) : (
+          <Box my={-0.5}>
+            <CardIconButton onClick={handleExpand} size="small">
+              {cardExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            </CardIconButton>
+          </Box>
+        )}
+      </Box>
+      <Collapse timeout={225} in={cardExpanded} 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>
+  );
+};