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

package/src/components/Header/WalletHeader.tsx

@@ -1,149 +0,0 @@
-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/src/components/Header/WalletMenu.tsx

@@ -1,150 +0,0 @@
-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/src/components/Insurance/InsuranceCard.tsx

@@ -1,136 +0,0 @@
-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>
-  );
-};

package/src/components/ListItemButton.tsx

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

package/src/components/NFT/NFT.tsx

@@ -1,47 +0,0 @@
-import { useEffect } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { FormKey } from '../../providers';
-import { NFTBase } from './NFTBase';
-import type { NFTProps } from './types';
-
-export const NFT: React.FC<NFTProps> = ({
-  imageUrl,
-  isLoading,
-  collectionName,
-  assetName,
-  owner,
-  token,
-  contract,
-}) => {
-  const { setValue } = useFormContext();
-  useEffect(() => {
-    if (token) {
-      setValue(FormKey.ToChain, token.chainId, { shouldTouch: true });
-      setValue(FormKey.ToToken, token.address, { shouldTouch: true });
-      setValue(FormKey.ToAmount, token.amount?.toString(), {
-        shouldTouch: true,
-      });
-    }
-    if (contract) {
-      setValue(FormKey.ToContractAddress, contract.address, {
-        shouldTouch: true,
-      });
-      setValue(FormKey.ToContractCallData, contract.callData, {
-        shouldTouch: true,
-      });
-      setValue(FormKey.ToContractGasLimit, contract.gasLimit, {
-        shouldTouch: true,
-      });
-    }
-  }, [contract, setValue, token]);
-  return (
-    <NFTBase
-      isLoading={isLoading}
-      imageUrl={imageUrl}
-      collectionName={collectionName}
-      assetName={assetName}
-      owner={owner}
-      token={token}
-    />
-  );
-};

package/src/components/PoweredBy/PoweredBy.style.ts

@@ -1,15 +0,0 @@
-import type { StyledComponent } from '@emotion/styled';
-import type { LinkProps } from '@mui/material';
-import { Link as MuiLink } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-export const Link: StyledComponent<LinkProps> = styled(MuiLink)(
-  ({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    border: 'none',
-    ':hover': {
-      color: theme.palette.primary.main,
-    },
-  }),
-);

package/src/components/ReverseTokensButton/ReverseTokensButton.style.tsx

@@ -1,19 +0,0 @@
-import { IconButton as MuiIconButton } from '@mui/material';
-import { darken, lighten, styled } from '@mui/material/styles';
-
-export const IconButton = styled(MuiIconButton)(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  border: `1px solid`,
-  borderColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800],
-  zIndex: 1100,
-  padding: theme.spacing(0.5),
-  '&:hover': {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? darken(theme.palette.background.paper, 0.02)
-        : lighten(theme.palette.background.paper, 0.02),
-  },
-}));

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,29 +0,0 @@
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
-import SwapVertIcon from '@mui/icons-material/SwapVert';
-import { useFormContext } from 'react-hook-form';
-import { FormKey } from '../../providers';
-import { IconButton } from './ReverseTokensButton.style';
-
-export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
-  vertical,
-}) => {
-  const { setValue, getValues } = useFormContext();
-  const handleClick = () => {
-    const [fromChain, fromToken, toChain, toToken] = getValues([
-      FormKey.FromChain,
-      FormKey.FromToken,
-      FormKey.ToChain,
-      FormKey.ToToken,
-    ]);
-    setValue(FormKey.FromAmount, '', { shouldTouch: true });
-    setValue(FormKey.FromChain, toChain, { shouldTouch: true });
-    setValue(FormKey.FromToken, toToken, { shouldTouch: true });
-    setValue(FormKey.ToChain, fromChain, { shouldTouch: true });
-    setValue(FormKey.ToToken, fromToken, { shouldTouch: true });
-  };
-  return (
-    <IconButton onClick={handleClick} size="small">
-      {vertical ? <SwapVertIcon /> : <SwapHorizIcon />}
-    </IconButton>
-  );
-};

package/src/components/RouteCard/RouteCard.style.ts

@@ -1,11 +0,0 @@
-import { Typography } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
-
-export const IconTypography = styled(Typography)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? alpha(theme.palette.common.black, 0.24)
-      : alpha(theme.palette.common.white, 0.32),
-  lineHeight: 0,
-  marginRight: theme.spacing(0.5),
-}));