@rango-dev/widget-embedded 0.17.1-next.2 → 0.17.1-next.21

package/src/components/{NoRoutes/NoRoutes.types.ts → NoResult/NoResult.types.ts}

@@ -1,7 +1,8 @@
+import type { NoResultError, QuoteRequestFailed } from '../../types';
+
 export interface PropTypes {
   fetch: () => void;
-  error: boolean;
-  diagnosisMessage?: string;
+  error: NoResultError | QuoteRequestFailed | null;
 }
 
 type AlertAction = {

package/src/components/NoResult/index.ts

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

package/src/components/NotificationContent/NotificationContent.tsx

@@ -10,7 +10,8 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useMetaStore } from '../../store/meta';
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useUiStore } from '../../store/ui';
 
@@ -26,14 +27,15 @@ export function NotificationContent() {
   const { getUnreadNotifications } = useNotificationStore();
 
   const notifications: Notification[] = getUnreadNotifications();
-  const { tokens, blockchains } = useMetaStore.use.meta();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
   const sortedNotification = notifications
     .sort((a, b) => b.creationTime - a.creationTime)
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
   const handleOnClick = (requestId: Notification['requestId']) => {
     setSelectedSwap(requestId);
-    navigate(`/swaps/${requestId}`);
+    navigate(`${navigationRoutes.swaps}/${requestId}`);
   };
 
   return (

package/src/components/Quote/Quote.styles.ts

@@ -0,0 +1,239 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { darkTheme, Image, styled } from '@rango-dev/ui';
+
+import { CollapsibleContent } from '../ConfirmWalletsModal/ConfirmWallets.styles';
+
+export const EXPANDABLE_QUOTE_TRANSITION_DURATION = 300;
+
+export const QuoteContainer = styled(Collapsible.Root, {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  width: '100%',
+  borderRadius: '$xm',
+  cursor: 'default',
+  variants: {
+    recommended: {
+      true: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+      false: {
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+  '& .steps-details': {
+    padding: '$10 $15',
+  },
+});
+
+export const SummaryContainer = styled('div', {
+  borderRadius: '$xm',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  justifyContent: 'space-between',
+  color: '$foreground',
+  cursor: 'pointer',
+  boxSizing: 'border-box',
+  position: 'relative',
+  variants: {
+    recommended: {
+      true: {
+        $$color: '$colors$info100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary600',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+      false: {
+        $$color: '$colors$neutral200',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral500',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+    },
+    basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
+    listItem: {
+      true: {},
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      listItem: true,
+      recommended: true,
+      css: {
+        '&:hover': {
+          $$color: '$colors$secondary200',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$secondary700',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+    {
+      listItem: true,
+      recommended: false,
+      css: {
+        '&:hover': {
+          $$color: '$colors$neutral300',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral400',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+  ],
+  '& .summary': {
+    width: '100%',
+    padding: '$15 $15 $10 $15',
+    cursor: 'default',
+  },
+  '& .basic-info': {
+    paddingTop: '$10',
+    display: 'flex',
+    alignItems: 'center',
+    '.usd-value': {
+      $$color: '$colors$neutral600',
+      [`.${darkTheme} &`]: {
+        $$color: '$colors$neutral700',
+      },
+      color: '$$color',
+    },
+  },
+});
+
+export const Chains = styled(Collapsible.Trigger, {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: '$36',
+  padding: '$10 $15',
+  boxSizing: 'border-box',
+  cursor: 'pointer',
+  border: 'none',
+  outline: 'none',
+  backgroundColor: 'transparent',
+  variants: {
+    error: {
+      true: {
+        [`& ${Image}`]: {
+          border: '1px $warning500 solid',
+          borderRadius: '100%',
+        },
+      },
+      false: {
+        [`& ${Image}`]: {
+          border: '1px transparent solid',
+          borderRadius: '100%',
+        },
+      },
+    },
+    recommended: {
+      true: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+      false: {
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+  '& div:nth-child(1)': { display: 'flex' },
+});
+
+export const ChainImageContainer = styled('div', {
+  width: '18px',
+  height: '18px',
+  borderRadius: '100%',
+  border: '1.5px transparent solid',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    state: {
+      error: {
+        borderColor: '$error500',
+      },
+      warning: { borderColor: '$warning500' },
+    },
+  },
+});
+
+export const Content = styled(CollapsibleContent, {
+  width: '100%',
+});
+
+export const IconContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '$2',
+  transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
+  variants: {
+    orientation: {
+      down: {
+        transform: 'rotate(0)',
+      },
+      up: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});
+
+export const Separator = styled('div', {
+  height: '$12',
+  marginLeft: '$10',
+  marginRight: '$10',
+  borderLeft: '1px solid $foreground',
+});
+
+export const HorizontalSeparator = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  margin: '0 $15',
+  borderTop: '1px solid',
+  $$color: '$colors$neutral300',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral400',
+  },
+  borderColor: '$$color',
+});
+
+export const FrameIcon = styled('div', {
+  width: '$16',
+  height: '$16',
+  justifyContent: 'center',
+  alignItems: 'center',
+  display: 'flex',
+});

package/src/components/Quote/Quote.tsx

@@ -0,0 +1,413 @@
+import type { QuoteProps } from './Quote.types';
+import type { Step } from '@rango-dev/ui';
+import type { SwapResult } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  Divider,
+  Image,
+  InfoIcon,
+  QuoteCost,
+  StepDetails,
+  TokenAmount,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import {
+  FooterAlert,
+  FooterStepAlarm,
+} from '../../containers/QuoteInfo/QuoteInfo.styles';
+import { useAppStore } from '../../store/AppStore';
+import { QuoteErrorType, QuoteWarningType } from '../../types';
+import { getContainer } from '../../utils/common';
+import {
+  getBlockchainShortNameFor,
+  getSwapperDisplayName,
+} from '../../utils/meta';
+import {
+  numberToString,
+  secondsToString,
+  totalArrivalTime,
+} from '../../utils/numbers';
+import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
+import { getTotalFeeInUsd } from '../../utils/swap';
+
+import {
+  ChainImageContainer,
+  Chains,
+  Content,
+  EXPANDABLE_QUOTE_TRANSITION_DURATION,
+  FrameIcon,
+  HorizontalSeparator,
+  IconContainer,
+  QuoteContainer,
+  SummaryContainer,
+} from './Quote.styles';
+import { QuoteSummary } from './QuoteSummary';
+
+export function Quote(props: QuoteProps) {
+  const {
+    quote,
+    input,
+    output,
+    error,
+    warning,
+    type,
+    recommended = true,
+  } = props;
+  const tokens = useAppStore().tokens();
+  const blockchains = useAppStore().blockchains();
+  const swappers = useAppStore().swappers();
+
+  const [expanded, setExpanded] = useState(props.expanded);
+  const quoteRef = useRef<HTMLButtonElement | null>(null);
+  const prevExpanded = useRef(expanded);
+  const totalFee = numberToString(
+    getTotalFeeInUsd(quote.result?.swaps ?? [], tokens),
+    GAS_FEE_MIN_DECIMALS,
+    GAS_FEE_MAX_DECIMALS
+  );
+  const totalTime = secondsToString(totalArrivalTime(quote.result?.swaps));
+  const roundedInput = numberToString(
+    input.value,
+    TOKEN_AMOUNT_MIN_DECIMALS,
+    TOKEN_AMOUNT_MAX_DECIMALS
+  );
+  const roundedOutput = numberToString(
+    output.value,
+    TOKEN_AMOUNT_MIN_DECIMALS,
+    TOKEN_AMOUNT_MAX_DECIMALS
+  );
+  const roundedOutputUsdValue = output.usdValue
+    ? numberToString(
+        output.usdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      )
+    : '';
+  const priceImpact = getPriceImpact(input.usdValue, output.usdValue ?? null);
+  const percentageChange = numberToString(
+    priceImpact,
+    PERCENTAGE_CHANGE_MIN_DECIMALS,
+    PERCENTAGE_CHANGE_MAX_DECIMALS
+  );
+  const priceImpactWarningLevel = getPriceImpactLevel(priceImpact ?? 0);
+
+  const getQuoteSteps = (swaps: SwapResult[]): Step[] => {
+    return swaps.map((swap, index) => {
+      let stepState: 'error' | 'warning' | undefined = undefined;
+      const stepHasError =
+        (error?.type === QuoteErrorType.BRIDGE_LIMIT &&
+          error.swap.swapperId === swap.swapperId) ||
+        (error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE &&
+          error.recommendedSlippages?.has(index));
+      const stepHasWarning =
+        warning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE &&
+        warning.recommendedSlippages?.has(index);
+
+      if (stepHasError) {
+        stepState = 'error';
+      } else if (stepHasWarning) {
+        stepState = 'warning';
+      }
+
+      return {
+        swapper: {
+          displayName: getSwapperDisplayName(swap.swapperId, swappers),
+          image: swap.swapperLogo,
+        },
+        from: {
+          token: { displayName: swap.from.symbol, image: swap.from.logo },
+          chain: {
+            displayName: getBlockchainShortNameFor(
+              swap.from.blockchain,
+              blockchains
+            ),
+            image: swap.from.blockchainLogo,
+          },
+          price: {
+            value:
+              index === 0
+                ? numberToString(
+                    input.value,
+                    TOKEN_AMOUNT_MIN_DECIMALS,
+                    TOKEN_AMOUNT_MAX_DECIMALS
+                  )
+                : numberToString(
+                    swap.fromAmount,
+                    TOKEN_AMOUNT_MIN_DECIMALS,
+                    TOKEN_AMOUNT_MAX_DECIMALS
+                  ),
+            usdValue: numberToString(
+              (swap.from.usdPrice ?? 0) * parseFloat(swap.fromAmount),
+              USD_VALUE_MIN_DECIMALS,
+              USD_VALUE_MAX_DECIMALS
+            ),
+          },
+        },
+        to: {
+          token: { displayName: swap.to.symbol, image: swap.to.logo },
+          chain: {
+            displayName: getBlockchainShortNameFor(
+              swap.to.blockchain,
+              blockchains
+            ),
+            image: swap.to.blockchainLogo,
+          },
+          price: {
+            value: numberToString(
+              swap.toAmount,
+              TOKEN_AMOUNT_MIN_DECIMALS,
+              TOKEN_AMOUNT_MAX_DECIMALS
+            ),
+            usdValue: numberToString(
+              (swap.to.usdPrice ?? 0) * parseFloat(swap.toAmount),
+              USD_VALUE_MIN_DECIMALS,
+              USD_VALUE_MAX_DECIMALS
+            ),
+          },
+        },
+        state: stepState,
+        alerts:
+          stepHasError || stepHasWarning ? (
+            <FooterStepAlarm>
+              <Alert
+                type={stepHasError ? 'error' : 'warning'}
+                title={
+                  error?.type === QuoteErrorType.BRIDGE_LIMIT
+                    ? error?.recommendation
+                    : i18n.t('Slippage Error:')
+                }
+                footer={
+                  <FooterAlert>
+                    {error?.type === QuoteErrorType.BRIDGE_LIMIT && (
+                      <>
+                        <Typography
+                          size="xsmall"
+                          variant="body"
+                          color="neutral900">
+                          {error.fromAmountRangeError}
+                        </Typography>
+                        <Divider direction="horizontal" size={8} />
+                        <Typography
+                          size="xsmall"
+                          variant="body"
+                          color="neutral900">
+                          |
+                        </Typography>
+                        <Divider direction="horizontal" size={8} />
+                        <Typography
+                          size="xsmall"
+                          variant="body"
+                          color="neutral900">
+                          {i18n.t({
+                            id: 'Yours: {amount} {symbol}',
+                            values: {
+                              amount: numberToString(
+                                swap.fromAmount,
+                                TOKEN_AMOUNT_MIN_DECIMALS,
+                                TOKEN_AMOUNT_MAX_DECIMALS
+                              ),
+                              symbol: swap?.from.symbol,
+                            },
+                          })}
+                        </Typography>
+                      </>
+                    )}
+                    {(error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE ||
+                      warning?.type ===
+                        QuoteWarningType.INSUFFICIENT_SLIPPAGE) && (
+                      <Typography
+                        size="xsmall"
+                        variant="body"
+                        color="neutral900">
+                        {i18n.t({
+                          id: 'Minimum required slippage is {minRequiredSlippage}',
+                          values: {
+                            ...(error?.type ===
+                              QuoteErrorType.INSUFFICIENT_SLIPPAGE && {
+                              minRequiredSlippage:
+                                error.recommendedSlippages?.get(index),
+                            }),
+                            ...(warning?.type ===
+                              QuoteWarningType.INSUFFICIENT_SLIPPAGE && {
+                              minRequiredSlippage:
+                                warning.recommendedSlippages?.get(index),
+                            }),
+                          },
+                        })}
+                      </Typography>
+                    )}
+                  </FooterAlert>
+                }
+              />
+            </FooterStepAlarm>
+          ) : undefined,
+      };
+    });
+  };
+  const steps = getQuoteSteps(quote.result?.swaps ?? []);
+  const numberOfSteps = steps.length;
+  const tooltipContainer = getContainer();
+
+  useLayoutEffect(() => {
+    if (expanded && !prevExpanded.current && quoteRef.current) {
+      setTimeout(() => {
+        quoteRef?.current?.scrollIntoView({ behavior: 'smooth' });
+      }, EXPANDABLE_QUOTE_TRANSITION_DURATION);
+    }
+    prevExpanded.current = expanded;
+  }, [expanded, prevExpanded]);
+
+  return (
+    <>
+      <SummaryContainer
+        recommended={recommended}
+        listItem={type === 'list-item'}
+        basic={type === 'basic'}>
+        <div className="summary">
+          <QuoteCost fee={totalFee} time={totalTime} steps={numberOfSteps} />
+          {type === 'basic' && (
+            <div className="basic-info">
+              <FrameIcon>
+                <InfoIcon size={12} color="gray" />
+              </FrameIcon>
+              <Typography
+                size="small"
+                variant="body"
+                style={{ letterSpacing: 0.4 }}>
+                {`${roundedInput} ${
+                  steps[0].from.token.displayName
+                } = ${roundedOutput} ${
+                  steps[steps.length - 1].to.token.displayName
+                }`}
+              </Typography>
+              <Typography
+                color="$neutral600"
+                ml={2}
+                size="xsmall"
+                variant="body">
+                {`($${roundedOutputUsdValue})`}
+              </Typography>
+            </div>
+          )}
+          {type === 'list-item' && (
+            <TokenAmount
+              type="output"
+              direction="vertical"
+              price={{ value: roundedOutput, usdValue: roundedOutputUsdValue }}
+              token={{
+                displayName: steps[numberOfSteps - 1].to.token.displayName,
+                image: steps[numberOfSteps - 1].to.token.image,
+              }}
+              chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
+              percentageChange={percentageChange}
+              warningLevel={priceImpactWarningLevel}
+            />
+          )}
+          {type === 'swap-preview' && (
+            <>
+              <QuoteSummary
+                from={steps[0].from}
+                to={steps[numberOfSteps - 1].to}
+                percentageChange={percentageChange}
+                warningLevel={priceImpactWarningLevel}
+              />
+              <Divider size={4} />
+            </>
+          )}
+        </div>
+        <QuoteContainer
+          recommended={recommended}
+          open={expanded}
+          onOpenChange={setExpanded}>
+          <Chains
+            ref={(ref) => (quoteRef.current = ref)}
+            recommended={recommended}
+            onClick={() => setExpanded((prevState) => !prevState)}>
+            <div>
+              {steps.map((step, index) => {
+                const key = `item-${index}`;
+                const arrow = (
+                  <IconContainer>
+                    <ChevronRightIcon
+                      size={12}
+                      color="black"
+                      {...(step.state && {
+                        color: step.state === 'error' ? 'error' : 'warning',
+                      })}
+                    />
+                  </IconContainer>
+                );
+                return (
+                  <React.Fragment key={key}>
+                    <Tooltip
+                      container={tooltipContainer}
+                      side="bottom"
+                      sideOffset={4}
+                      content={step.from.chain.displayName}>
+                      <ChainImageContainer
+                        state={step.state || steps[index - 1]?.state}>
+                        <Image src={step.from.chain.image} size={16} />
+                      </ChainImageContainer>
+                    </Tooltip>
+                    {index === numberOfSteps - 1 && (
+                      <>
+                        {arrow}
+                        <Tooltip
+                          container={tooltipContainer}
+                          side="bottom"
+                          sideOffset={4}
+                          content={step.to.chain.displayName}>
+                          <ChainImageContainer state={step.state}>
+                            <Image src={step.to.chain.image} size={16} />
+                          </ChainImageContainer>
+                        </Tooltip>
+                      </>
+                    )}
+                    {index !== numberOfSteps - 1 && <>{arrow}</>}
+                  </React.Fragment>
+                );
+              })}
+            </div>
+            <IconContainer orientation={expanded ? 'up' : 'down'}>
+              <ChevronDownIcon size={12} color="black" />
+            </IconContainer>
+          </Chains>
+          <Content open={expanded}>
+            <HorizontalSeparator />
+            <div className="steps-details">
+              {steps.map((step, index) => {
+                const key = `item-${index}`;
+                return (
+                  <StepDetails
+                    type="quote-details"
+                    key={key}
+                    step={step}
+                    hasSeparator={index !== steps.length - 1}
+                    state={step.state}
+                  />
+                );
+              })}
+            </div>
+          </Content>
+        </QuoteContainer>
+      </SummaryContainer>
+    </>
+  );
+}