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

package/components/NFT/NFT.tsx

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { NFTBase } from './NFTBase';
+import type { NFTProps } from './types';
+import { useFieldActions } from '../../stores';
+
+export const NFT: React.FC<NFTProps> = ({
+  imageUrl,
+  isLoading,
+  collectionName,
+  assetName,
+  owner,
+  token,
+  contract,
+}) => {
+  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 (contract) {
+      setFieldValue('toContractAddress', contract.address, {
+        isTouched: true,
+      });
+      setFieldValue('toContractCallData', contract.callData, {
+        isTouched: true,
+      });
+      setFieldValue('toContractGasLimit', contract.gasLimit, {
+        isTouched: true,
+      });
+    }
+  }, [contract, setFieldValue, token]);
+  return (
+    <NFTBase
+      isLoading={isLoading}
+      imageUrl={imageUrl}
+      collectionName={collectionName}
+      assetName={assetName}
+      owner={owner}
+      token={token}
+    />
+  );
+};

package/components/NFT/index.ts

@@ -0,0 +1,3 @@
+export * from './NFT';
+export * from './NFTBase';
+export * from './types';

package/components/PageContainer.ts

@@ -0,0 +1,18 @@
+import { Container } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export interface PageContainerProps {
+  halfGutters?: boolean;
+  topBottomGutters?: boolean;
+}
+
+export const PageContainer = styled(Container, {
+  shouldForwardProp: (prop) =>
+    !['halfGutters', 'topBottomGutters'].includes(prop as string),
+})<PageContainerProps>(
+  ({ theme, disableGutters, halfGutters, topBottomGutters }) => ({
+    padding: disableGutters
+      ? 0
+      : theme.spacing(topBottomGutters ? 1 : 0, halfGutters ? 1.5 : 3),
+  }),
+);

package/components/PoweredBy/PoweredBy.style.ts

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

package/components/PoweredBy/index.ts

@@ -0,0 +1 @@
+export { PoweredBy } from './PoweredBy';

package/components/ProgressToNextUpdate/index.ts

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

package/components/ReverseTokensButton/ReverseTokensButton.style.tsx

@@ -0,0 +1,22 @@
+import { IconButton as MuiIconButton } from '@mui/material';
+import { darken, lighten, styled } from '@mui/material/styles';
+
+export const IconButton = styled(MuiIconButton)(({ theme }) => ({
+  height: 32,
+  width: 32,
+  fontSize: 16,
+  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/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -0,0 +1,42 @@
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { useAvailableChains, useToAddressReset } from '../../hooks';
+import { useFieldActions } from '../../stores';
+import { IconButton } from './ReverseTokensButton.style';
+
+export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
+  vertical,
+}) => {
+  const { setFieldValue, getFieldValues } = useFieldActions();
+  const { getChainById } = useAvailableChains();
+  const { tryResetToAddress } = useToAddressReset();
+
+  const handleClick = () => {
+    const [fromChainId, fromToken, toChainId, toToken] = getFieldValues(
+      'fromChain',
+      'fromToken',
+      'toChain',
+      'toToken',
+    );
+    setFieldValue('fromAmount', '', { isTouched: true });
+    setFieldValue('fromChain', toChainId, { isTouched: true });
+    setFieldValue('fromToken', toToken, { isTouched: true });
+    setFieldValue('toChain', fromChainId, { isTouched: true });
+    setFieldValue('toToken', fromToken, { isTouched: true });
+
+    // fromChainId becomes toChainId after using reverse
+    const toChain = getChainById(fromChainId);
+    if (toChain) {
+      tryResetToAddress(toChain);
+    }
+  };
+  return (
+    <IconButton onClick={handleClick} size="medium">
+      {vertical ? (
+        <ArrowDownwardIcon fontSize="inherit" />
+      ) : (
+        <ArrowForwardIcon fontSize="inherit" />
+      )}
+    </IconButton>
+  );
+};

package/components/ReverseTokensButton/index.ts

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

package/components/RouteCard/RouteCard.style.ts

@@ -0,0 +1,17 @@
+import { Box, 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,
+}));
+
+export const TokenContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: 40,
+}));

package/components/RouteCard/RouteCard.tsx

@@ -0,0 +1,175 @@
+import type { TokenAmount } from '@lifi/sdk';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import type { TooltipProps } from '@mui/material';
+import { Box, Collapse, Tooltip, Typography } from '@mui/material';
+import type { MouseEventHandler } from 'react';
+import { Fragment, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useWidgetConfig } from '../../providers';
+import { formatTokenAmount } from '../../utils';
+import type { CardProps } from '../Card';
+import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
+import type { InsuredAmount } from '../Insurance';
+import { StepActions } from '../StepActions';
+import { Token } from '../Token';
+import { TokenContainer } from './RouteCard.style';
+import { RouteCardEssentials } from './RouteCardEssentials';
+import { RouteCardEssentialsExpanded } from './RouteCardEssentialsExpanded';
+import type { RouteCardProps } from './types';
+
+export const RouteCard: React.FC<
+  RouteCardProps & Omit<CardProps, 'variant'>
+> = ({
+  route,
+  active,
+  variant = 'default',
+  expanded: defaulExpanded,
+  ...other
+}) => {
+  const { t } = useTranslation();
+  const { subvariant } = useWidgetConfig();
+  const [cardExpanded, setCardExpanded] = useState(defaulExpanded);
+
+  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setCardExpanded((expanded) => !expanded);
+  };
+
+  const insurable = route.insurance?.state === 'INSURABLE';
+
+  const token: TokenAmount =
+    subvariant === 'nft'
+      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
+      : { ...route.toToken, amount: BigInt(route.toAmount) };
+
+  const RecommendedTagTooltip =
+    route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : Fragment;
+
+  const cardContent = (
+    <Box flex={1}>
+      {subvariant !== 'refuel' && (insurable || route.tags?.length) ? (
+        <Box display="flex" alignItems="center" mb={2}>
+          {route.tags?.length ? (
+            <RecommendedTagTooltip>
+              <CardLabel type={active ? 'active' : undefined}>
+                <CardLabelTypography>
+                  {t(`main.tags.${route.tags[0].toLowerCase()}` as any)}
+                </CardLabelTypography>
+              </CardLabel>
+            </RecommendedTagTooltip>
+          ) : null}
+          {insurable ? (
+            <InsuranceTooltip
+              insuredAmount={formatTokenAmount(
+                BigInt(route.toAmountMin),
+                route.toToken.decimals,
+              )}
+              insuredTokenSymbol={route.toToken.symbol}
+            >
+              <CardLabel type={'insurance'}>
+                <VerifiedUserIcon fontSize="inherit" />
+                <CardLabelTypography type="icon">
+                  {t(`main.tags.insurable`)}
+                </CardLabelTypography>
+              </CardLabel>
+            </InsuranceTooltip>
+          ) : null}
+        </Box>
+      ) : null}
+      <TokenContainer>
+        <Token
+          token={token}
+          step={route.steps[0]}
+          stepVisible={!cardExpanded}
+        />
+        {!defaulExpanded ? (
+          <CardIconButton onClick={handleExpand} size="small">
+            {cardExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          </CardIconButton>
+        ) : null}
+      </TokenContainer>
+      <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
+        {route.steps.map((step) => (
+          <StepActions key={step.id} step={step} mt={2} />
+        ))}
+        <RouteCardEssentialsExpanded route={route} />
+      </Collapse>
+      <Collapse timeout={225} in={!cardExpanded} mountOnEnter unmountOnExit>
+        <RouteCardEssentials route={route} />
+      </Collapse>
+    </Box>
+  );
+
+  return subvariant === 'refuel' || variant === 'cardless' ? (
+    cardContent
+  ) : (
+    <Card
+      variant={active ? 'selected' : 'default'}
+      selectionColor="secondary"
+      indented
+      {...other}
+    >
+      {cardContent}
+    </Card>
+  );
+};
+
+const InsuranceTooltip: React.FC<
+  InsuredAmount & Pick<TooltipProps, 'children'>
+> = ({ insuredAmount, insuredTokenSymbol, children }) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip
+      title={
+        <Box component="span">
+          <Typography fontSize={12} fontWeight="500">
+            <Trans
+              i18nKey="insurance.insure"
+              values={{
+                amount: insuredAmount,
+                tokenSymbol: insuredTokenSymbol,
+              }}
+              components={[<strong />]}
+            />
+          </Typography>
+          <Box
+            sx={{
+              listStyleType: 'disc',
+              pl: 2,
+            }}
+          >
+            <Typography fontSize={12} fontWeight="500" display="list-item">
+              {t('insurance.bridgeExploits')}
+            </Typography>
+            <Typography fontSize={12} fontWeight="500" display="list-item">
+              {t('insurance.slippageError')}
+            </Typography>
+          </Box>
+        </Box>
+      }
+      placement="top"
+      enterDelay={400}
+      arrow
+    >
+      {children}
+    </Tooltip>
+  );
+};
+
+const RecommendedTooltip: React.FC<Pick<TooltipProps, 'children'>> = ({
+  children,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip
+      title={t('tooltip.recommended')}
+      placement="top"
+      enterDelay={400}
+      arrow
+    >
+      {children}
+    </Tooltip>
+  );
+};

package/components/RouteCard/RouteCardEssentials.tsx

@@ -0,0 +1,99 @@
+import AccessTimeIcon from '@mui/icons-material/AccessTimeFilled';
+import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
+import { Box, Tooltip, Typography } from '@mui/material';
+import type { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import { getFeeCostsBreakdown, getGasCostsBreakdown } from '../../utils';
+import { IconTypography } from './RouteCard.style';
+import type { FeesBreakdown, RouteCardEssentialsProps } from './types';
+
+export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
+  route,
+}) => {
+  const { t, i18n } = useTranslation();
+  const executionTimeMinutes = Math.ceil(
+    route.steps
+      .map((step) => step.estimate.executionDuration)
+      .reduce((duration, x) => duration + x, 0) / 60,
+  );
+  const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
+  const gasCosts = getGasCostsBreakdown(route);
+  const feeCosts = getFeeCostsBreakdown(route, false);
+  const fees =
+    gasCostUSD + feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0);
+  return (
+    <Box display="flex" justifyContent={'space-between'} flex={1} mt={2}>
+      <Tooltip
+        title={
+          <Box component="span">
+            {t('main.fees.networkEstimated')}
+            {getFeeBreakdownTypography(gasCosts, t)}
+            {feeCosts.length ? (
+              <Box mt={1}>
+                {t('main.fees.providerEstimated')}
+                {getFeeBreakdownTypography(feeCosts, t)}
+              </Box>
+            ) : null}
+          </Box>
+        }
+        placement="top"
+        enterDelay={400}
+        arrow
+      >
+        <Box display="flex" alignItems="center">
+          <IconTypography mr={0.5}>
+            <MonetizationOnIcon fontSize="small" />
+          </IconTypography>
+          <Typography
+            fontSize={14}
+            color="text.primary"
+            fontWeight="500"
+            lineHeight={1}
+          >
+            {t(`format.currency`, {
+              value: fees,
+            })}
+          </Typography>
+        </Box>
+      </Tooltip>
+      <Tooltip
+        title={t(`tooltip.estimatedTime`)}
+        placement="top"
+        enterDelay={400}
+        arrow
+      >
+        <Box display="flex" alignItems="center">
+          <IconTypography mr={0.5}>
+            <AccessTimeIcon fontSize="small" />
+          </IconTypography>
+          <Typography
+            fontSize={14}
+            color="text.primary"
+            fontWeight="500"
+            lineHeight={1}
+          >
+            {new Intl.NumberFormat(i18n.language, {
+              style: 'unit',
+              unit: 'minute',
+              unitDisplay: 'narrow',
+            }).format(executionTimeMinutes)}
+          </Typography>
+        </Box>
+      </Tooltip>
+    </Box>
+  );
+};
+
+const getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>
+  fees.map((fee, index) => (
+    <Typography
+      fontSize={12}
+      fontWeight="500"
+      key={`${fee.token.address}${index}`}
+    >
+      {t(`format.currency`, { value: fee.amountUSD })} (
+      {parseFloat(formatUnits(fee.amount, fee.token.decimals))?.toFixed(9)}{' '}
+      {fee.token.symbol})
+    </Typography>
+  ));

package/components/RouteCard/RouteCardEssentialsExpanded.tsx

@@ -0,0 +1,127 @@
+import AccessTimeIcon from '@mui/icons-material/AccessTimeFilled';
+import LayersIcon from '@mui/icons-material/Layers';
+import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
+import { Box, Typography } from '@mui/material';
+import type { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import { getFeeCostsBreakdown, getGasCostsBreakdown } from '../../utils';
+import { IconTypography } from './RouteCard.style';
+import type { FeesBreakdown, RouteCardEssentialsProps } from './types';
+
+export const RouteCardEssentialsExpanded: React.FC<
+  RouteCardEssentialsProps
+> = ({ route }) => {
+  const { t, i18n } = useTranslation();
+  const executionTimeMinutes = Math.ceil(
+    route.steps
+      .map((step) => step.estimate.executionDuration)
+      .reduce((duration, x) => duration + x, 0) / 60,
+  );
+  const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
+  const gasCosts = getGasCostsBreakdown(route);
+  const feeCosts = getFeeCostsBreakdown(route, false);
+  const fees =
+    gasCostUSD + feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0);
+  return (
+    <Box flex={1} mt={2}>
+      <Box>
+        <Box display="flex" alignItems="center">
+          <IconTypography ml={1} mr={3}>
+            <MonetizationOnIcon />
+          </IconTypography>
+          <Typography
+            fontSize={16}
+            color="text.primary"
+            fontWeight="600"
+            lineHeight={1.125}
+          >
+            {t(`format.currency`, {
+              value: fees,
+            })}
+          </Typography>
+        </Box>
+        <Box mt={0.5} ml={7}>
+          <Typography
+            fontSize={12}
+            color="text.secondary"
+            fontWeight="500"
+            lineHeight={1.125}
+          >
+            {t('main.fees.networkEstimated')}
+          </Typography>
+          {getFeeBreakdownTypography(gasCosts, t)}
+          {feeCosts.length ? (
+            <Box mt={0.5}>
+              <Typography
+                fontSize={12}
+                color="text.secondary"
+                fontWeight="500"
+                lineHeight={1.125}
+              >
+                {t('main.fees.providerEstimated')}
+              </Typography>
+              {getFeeBreakdownTypography(feeCosts, t)}
+            </Box>
+          ) : null}
+        </Box>
+      </Box>
+      <Box mt={2}>
+        <Box display="flex" alignItems="center">
+          <IconTypography ml={1} mr={3}>
+            <LayersIcon />
+          </IconTypography>
+          <Typography
+            fontSize={16}
+            color="text.primary"
+            fontWeight="600"
+            lineHeight={1.125}
+          >
+            {route.steps.length}
+          </Typography>
+        </Box>
+        <Box mt={0.5} ml={7}>
+          <Typography
+            fontSize={12}
+            color="text.secondary"
+            fontWeight="500"
+            lineHeight={1.125}
+          >
+            {t(`tooltip.numberOfSteps`)}
+          </Typography>
+        </Box>
+      </Box>
+      <Box display="flex" alignItems="center" mt={2}>
+        <IconTypography ml={1} mr={3}>
+          <AccessTimeIcon />
+        </IconTypography>
+        <Typography
+          fontSize={16}
+          color="text.primary"
+          fontWeight="600"
+          lineHeight={1.125}
+        >
+          {new Intl.NumberFormat(i18n.language, {
+            style: 'unit',
+            unit: 'minute',
+            unitDisplay: 'long',
+          }).format(executionTimeMinutes)}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+const getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>
+  fees.map((fee, index) => (
+    <Typography
+      fontSize={12}
+      fontWeight="500"
+      color="text.secondary"
+      key={`${fee.token.address}${index}`}
+    >
+      {t(`format.currency`, { value: fee.amountUSD })} (
+      {parseFloat(formatUnits(fee.amount, fee.token.decimals))?.toFixed(9)}{' '}
+      {fee.token.symbol})
+    </Typography>
+  ));

package/components/RouteCard/RouteCardSkeleton.tsx

@@ -0,0 +1,43 @@
+import type { BoxProps } from '@mui/material';
+import { Box, Skeleton } from '@mui/material';
+import { useWidgetConfig } from '../../providers';
+import { Card } from '../Card';
+import { TokenSkeleton } from '../Token';
+import type { RouteCardSkeletonProps } from './types';
+
+export const RouteCardSkeleton: React.FC<RouteCardSkeletonProps & BoxProps> = ({
+  variant,
+  ...other
+}) => {
+  const { subvariant } = useWidgetConfig();
+
+  const cardContent = (
+    <Box flex={1}>
+      {subvariant !== 'refuel' && subvariant !== 'nft' ? (
+        <Box display="flex" alignItems="center" mb={2}>
+          <Skeleton
+            variant="rectangular"
+            width={112}
+            height={24}
+            sx={(theme) => ({
+              borderRadius: `${theme.shape.borderRadius}px`,
+            })}
+          />
+        </Box>
+      ) : null}
+      <TokenSkeleton />
+      <Box mt={2} display="flex" justifyContent="space-between">
+        <Skeleton variant="text" width={64} height={20} />
+        <Skeleton variant="text" width={56} height={20} />
+      </Box>
+    </Box>
+  );
+
+  return subvariant === 'refuel' || variant === 'cardless' ? (
+    cardContent
+  ) : (
+    <Card indented {...other}>
+      {cardContent}
+    </Card>
+  );
+};

package/components/RouteCard/index.ts

@@ -0,0 +1,3 @@
+export * from './RouteCard';
+export * from './RouteCardSkeleton';
+export * from './RouteNotFoundCard';

package/components/RouteCard/types.ts

@@ -0,0 +1,22 @@
+import type { Route, Token } from '@lifi/sdk';
+
+export interface RouteCardProps {
+  route: Route;
+  variant?: 'default' | 'cardless';
+  active?: boolean;
+  expanded?: boolean;
+}
+
+export interface RouteCardEssentialsProps {
+  route: Route;
+}
+
+export interface RouteCardSkeletonProps {
+  variant?: 'default' | 'cardless';
+}
+
+export interface FeesBreakdown {
+  amount: bigint;
+  amountUSD: number;
+  token: Token;
+}