@rango-dev/widget-embedded 0.20.1-next.2 → 0.20.1-next.20

package/src/components/Quote/QuoteCostDetails.tsx

@@ -0,0 +1,218 @@
+import type { QuoteCostDetailsProps } from './Quote.types';
+import type { NameOfFees } from '../../constants/quote';
+
+import { i18n } from '@lingui/core';
+import {
+  ChevronDownIcon,
+  CloseIcon,
+  Divider,
+  IconButton,
+  Modal,
+  QuoteCost,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import BigNumber from 'bignumber.js';
+import React, { useState } from 'react';
+
+import { NAME_OF_FEES } from '../../constants/quote';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { useAppStore } from '../../store/AppStore';
+import { getContainer } from '../../utils/common';
+import {
+  formatTooltipNumbers,
+  numberToString,
+  secondsToString,
+  totalArrivalTime,
+} from '../../utils/numbers';
+import {
+  getFeesGroup,
+  getTotalFeeInUsd,
+  getTotalFeesInUsd,
+  getUsdFee,
+} from '../../utils/swap';
+import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
+import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
+
+import {
+  FeeSection,
+  Line,
+  ModalContainer,
+  ModalHeader,
+  trigger,
+} from './QuoteCostDetails.styles';
+
+const GAS_FEE_MAX = 30;
+
+const NonPayableFee = (props: { fee: BigNumber; label: string }) => {
+  return !props.fee.isZero() ? (
+    <FeeSection>
+      <Typography variant="label" size="medium" color="neutral600">
+        {props.label}
+      </Typography>
+      <Typography variant="label" size="medium">
+        $
+        {numberToString(
+          props.fee,
+          USD_VALUE_MIN_DECIMALS,
+          USD_VALUE_MAX_DECIMALS
+        )}
+      </Typography>
+    </FeeSection>
+  ) : null;
+};
+
+export function QuoteCostDetails(props: QuoteCostDetailsProps) {
+  const [open, setOpen] = useState<boolean>(false);
+  const [openCollapse, setOpenCollapse] = useState<boolean>(false);
+  const { steps, quote } = props;
+  const tokens = useAppStore().tokens();
+  const totalTime = secondsToString(totalArrivalTime(quote.result?.swaps));
+  const swaps = quote.result?.swaps ?? [];
+  const container = getContainer();
+
+  const totalFee = getTotalFeeInUsd(swaps, tokens);
+
+  const feesGroup = getFeesGroup(swaps);
+
+  return (
+    <>
+      <QuoteCost
+        onClickFee={() => setOpen(!open)}
+        fee={numberToString(
+          totalFee,
+          GAS_FEE_MIN_DECIMALS,
+          GAS_FEE_MAX_DECIMALS
+        )}
+        feeWarning={totalFee.gte(new BigNumber(GAS_FEE_MAX))}
+        time={totalTime}
+        steps={steps}
+        tooltipGas={i18n.t('View more info')}
+        tooltipContainer={container}
+      />
+
+      <Modal
+        container={container}
+        open={open}
+        header={
+          <ModalHeader>
+            <Typography variant="title" size="medium">
+              {i18n.t('Gas & Fee Explanation')}
+            </Typography>
+
+            <IconButton onClick={() => setOpen(false)} variant="ghost">
+              <CloseIcon color="gray" size={14} />
+            </IconButton>
+          </ModalHeader>
+        }
+        onClose={() => setOpen(false)}>
+        <ModalContainer>
+          <Typography variant="title" size="small">
+            {i18n.t('Details')}
+          </Typography>
+          <Divider size={10} />
+          {Object.entries(feesGroup.payable).flatMap(
+            ([payableFeesKey, feeArray]) =>
+              feeArray.map((fee, index) => {
+                const key = `payable-fee-${index}`;
+                const usdValue = getUsdFee(fee);
+                return (
+                  <FeeSection key={key}>
+                    <Typography
+                      variant="label"
+                      size="medium"
+                      color="neutral600">
+                      {NAME_OF_FEES[payableFeesKey as NameOfFees]}
+                    </Typography>
+                    <Tooltip
+                      content={formatTooltipNumbers(fee.amount)}
+                      container={container}>
+                      <Typography variant="label" size="medium">
+                        {numberToString(
+                          fee.amount,
+                          GAS_FEE_MIN_DECIMALS,
+                          GAS_FEE_MAX_DECIMALS
+                        )}{' '}
+                        {fee.asset.symbol} ($
+                        {numberToString(
+                          usdValue,
+                          USD_VALUE_MIN_DECIMALS,
+                          USD_VALUE_MAX_DECIMALS
+                        )}
+                        )
+                      </Typography>
+                    </Tooltip>
+                  </FeeSection>
+                );
+              })
+          )}
+
+          <FeeSection className="total_payable_fee">
+            <Typography variant="label" size="medium">
+              {i18n.t('Total Payable Fee')}
+            </Typography>
+            <Typography variant="label" size="medium">
+              $
+              {numberToString(
+                totalFee,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              )}
+            </Typography>
+          </FeeSection>
+          <Line />
+          {Object.keys(feesGroup.nonePayable).length && (
+            <CustomCollapsible
+              triggerAnchor="bottom"
+              onClickTrigger={() => setOpenCollapse((prev) => !prev)}
+              trigger={
+                <div className={trigger()}>
+                  <Typography size="small" variant="body" color="neutral700">
+                    {openCollapse
+                      ? i18n.t('Hide non-payable fees')
+                      : i18n.t('Show non-payable fees')}
+                  </Typography>
+                  <Divider size={4} direction="horizontal" />
+                  <ExpandedIcon orientation={openCollapse ? 'up' : 'down'}>
+                    <ChevronDownIcon size={12} color="gray" />
+                  </ExpandedIcon>
+                </div>
+              }
+              open={openCollapse}>
+              <Typography size="small" variant="title">
+                {i18n.t('Description')}
+              </Typography>
+              <Divider size={4} />
+              <Typography size="small" variant="body" color="neutral700">
+                {i18n.t(`The following fees are considered in the transaction output and
+                you won’t need to pay extra gas for them.`)}
+              </Typography>
+              <Divider size={10} />
+              {Object.entries(feesGroup.nonePayable).map(
+                ([nonPayableFeesKey, fees], index) => {
+                  const totalFeeInUsd = getTotalFeesInUsd(fees);
+                  const label = NAME_OF_FEES[nonPayableFeesKey as NameOfFees];
+                  const key = `non-payable-fee-${index}`;
+                  return (
+                    <NonPayableFee
+                      key={key}
+                      fee={totalFeeInUsd}
+                      label={label}
+                    />
+                  );
+                }
+              )}
+
+              <Line />
+            </CustomCollapsible>
+          )}
+        </ModalContainer>
+      </Modal>
+    </>
+  );
+}

package/src/components/Quote/QuoteSummary.tsx

@@ -1,5 +1,6 @@
 import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 
+import { i18n } from '@lingui/core';
 import { TokenAmount } from '@rango-dev/ui';
 import React from 'react';
 
@@ -21,7 +22,7 @@ export function QuoteSummary(props: PropTypes) {
     <Container>
       <TokenAmount
         direction="horizontal"
-        label="Swap input"
+        label={i18n.t('Swap input')}
         type="input"
         tooltipContainer={getContainer()}
         price={{
@@ -39,8 +40,8 @@ export function QuoteSummary(props: PropTypes) {
       <div className={separatorStyles()} />
       <TokenAmount
         direction="horizontal"
-        label="Estimated output"
         tooltipContainer={getContainer()}
+        label={i18n.t('Estimated output')}
         type="output"
         price={{
           value: to.price.value,

package/src/components/Quote/QuoteTrigger .tsx

@@ -0,0 +1,215 @@
+import type { QuoteTriggerImagesProps, QuoteTriggerProps } from './Quote.types';
+
+import { i18n } from '@lingui/core';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  Divider,
+  Image,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { getContainer } from '../../utils/common';
+import { getUniqueBlockchains } from '../../utils/quote';
+
+import {
+  IconContainer,
+  ImageContainer,
+  MoreStep,
+  rowStyles,
+  Trigger,
+} from './Quote.styles';
+
+const MAX_STEPS = 4;
+const MAX_BLOCKCHAINS = 6;
+const MIN_WIDTH_WINDOW = 375;
+
+const ImageComponent = (props: QuoteTriggerImagesProps) => {
+  const tooltipContainer = getContainer();
+  const { content, src, className, open, state } = props;
+  return (
+    <Tooltip
+      container={tooltipContainer}
+      side="bottom"
+      sideOffset={4}
+      open={open}
+      content={content}>
+      <ImageContainer className={className} state={state}>
+        <Image src={src} size={16} />
+      </ImageContainer>
+    </Tooltip>
+  );
+};
+
+export function QuoteTrigger(props: QuoteTriggerProps) {
+  const { quoteRef, recommended, setExpanded, steps, expanded } = props;
+  const tooltipContainer = getContainer();
+  const numberOfSteps = steps.length;
+  const blockchains = getUniqueBlockchains(steps);
+  const [isMobile, setIsMobile] = useState(false);
+
+  //choose the screen size
+  const handleResize = () => {
+    if (window.innerWidth < MIN_WIDTH_WINDOW) {
+      setIsMobile(true);
+    } else {
+      setIsMobile(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+  });
+
+  return (
+    <Trigger
+      ref={(ref) => (quoteRef.current = ref)}
+      recommended={recommended}
+      onClick={() => setExpanded((prevState) => !prevState)}>
+      <div className={rowStyles()}>
+        <Typography variant="body" size="xsmall">
+          {i18n.t('Via:')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        {steps.map((step, index) => {
+          const key = `item-${index}`;
+          const arrow = (
+            <IconContainer>
+              <ChevronRightIcon size={12} color="black" />
+            </IconContainer>
+          );
+
+          return isMobile ? (
+            <>
+              <ImageComponent
+                content={step.swapper.displayName}
+                src={step.swapper.image}
+                state={step.state}
+              />
+              {index !== numberOfSteps - 1 && <>{arrow}</>}
+            </>
+          ) : (
+            <React.Fragment key={key}>
+              {numberOfSteps <= MAX_STEPS ||
+              (numberOfSteps > MAX_STEPS && index < MAX_STEPS - 1) ? (
+                <>
+                  <ImageComponent
+                    content={step.swapper.displayName}
+                    src={step.swapper.image}
+                    state={step.state}
+                  />
+                  {index !== numberOfSteps - 1 && <>{arrow}</>}
+                </>
+              ) : (
+                index === MAX_STEPS - 1 && (
+                  <Tooltip
+                    container={tooltipContainer}
+                    side="bottom"
+                    align="right"
+                    sideOffset={4}
+                    content={
+                      <div className={rowStyles()}>
+                        {arrow}
+                        {steps.map((step, i) => {
+                          const key = `image-${i}`;
+                          return (
+                            i >= index && (
+                              <React.Fragment key={key}>
+                                <ImageComponent
+                                  content={step.swapper.displayName}
+                                  src={step.swapper.image}
+                                  state={step.state}
+                                  open={false}
+                                />
+                                {i !== numberOfSteps - 1 && <>{arrow}</>}
+                              </React.Fragment>
+                            )
+                          );
+                        })}
+                      </div>
+                    }>
+                    <MoreStep
+                      state={
+                        steps.find(
+                          (step, i) =>
+                            i >= index &&
+                            (step.state === 'error' || step.state === 'warning')
+                        )?.state
+                      }>
+                      <Typography size="xsmall" variant="body">
+                        +{numberOfSteps - index}
+                      </Typography>
+                    </MoreStep>
+                  </Tooltip>
+                )
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+      <div className={rowStyles()}>
+        <div className="blockchains_section">
+          <div className={rowStyles()}>
+            <Typography variant="body" size="xsmall">
+              {i18n.t('Chains:')}
+            </Typography>
+            <Divider direction="horizontal" size={4} />
+            {blockchains.map((blockchain, index) => (
+              <>
+                {blockchains.length <= MAX_BLOCKCHAINS ||
+                (blockchains.length > MAX_BLOCKCHAINS &&
+                  index < MAX_BLOCKCHAINS - 1) ? (
+                  <ImageComponent
+                    key={blockchain.displayName}
+                    content={''}
+                    src={blockchain.image}
+                    open={false}
+                    className={index !== 0 ? 'blockchainImage' : ''}
+                  />
+                ) : (
+                  index === MAX_BLOCKCHAINS - 1 && (
+                    <Tooltip
+                      container={tooltipContainer}
+                      side="bottom"
+                      align="right"
+                      sideOffset={4}
+                      content={
+                        <div className={rowStyles()}>
+                          {blockchains.map(
+                            (chain, i) =>
+                              i >= index && (
+                                <ImageComponent
+                                  key={chain.displayName}
+                                  content={''}
+                                  src={chain.image}
+                                  open={false}
+                                  className={i > index ? 'blockchainImage' : ''}
+                                />
+                              )
+                          )}
+                        </div>
+                      }>
+                      <MoreStep className={'blockchainImage'}>
+                        <Typography size="xsmall" variant="body">
+                          +{blockchains.length - index}
+                        </Typography>
+                      </MoreStep>
+                    </Tooltip>
+                  )
+                )}
+              </>
+            ))}
+
+            <Divider direction="horizontal" size={32} />
+          </div>
+        </div>
+
+        <IconContainer orientation={expanded ? 'up' : 'down'}>
+          <ChevronDownIcon size={12} color="black" />
+        </IconContainer>
+      </div>
+    </Trigger>
+  );
+}

package/src/components/Slippage/Slippage.tsx

@@ -72,12 +72,12 @@ export function Slippage() {
           value={customSlippage || ''}
           color="dark"
           onChange={(event) => {
-            const parsedValue = parseFloat(event.target.value);
-            if (
-              !parsedValue ||
-              (parsedValue >= MIN_SLIPPGAE && parsedValue <= MAX_SLIPPAGE)
-            ) {
+            const value = event.target.value;
+            const parsedValue = parseFloat(value);
+            if (parsedValue >= MIN_SLIPPGAE && parsedValue <= MAX_SLIPPAGE) {
               setCustomSlippage(parsedValue);
+            } else {
+              setCustomSlippage(null);
             }
           }}
           suffix={

package/src/components/Slippage/SlippageTooltipContent.tsx

@@ -15,7 +15,7 @@ export function SlippageTooltipContent() {
         <br />
         <b>{i18n.t('Warning')}</b>:
         {i18n.t(
-          'This setting is applied per step, e.g. 1Inch, Thorchain, etc. and only that step will be reverted, not the whole transaction'
+          'This setting is applied per step (e.g. 1Inch, Thorchain, etc) which means only the step will be reverted, not the whole transaction.'
         )}
       </Typography>
     </SlippageTooltipContainer>

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -1,13 +1,7 @@
 import type { SwapDetailsPlaceholderPropTypes } from './SwapDetails.types';
 
 import { i18n } from '@lingui/core';
-import {
-  CopyIcon,
-  IconButton,
-  NotFound,
-  Skeleton,
-  Typography,
-} from '@rango-dev/ui';
+import { Divider, NotFound, Skeleton, Typography } from '@rango-dev/ui';
 import React from 'react';
 
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
@@ -16,6 +10,7 @@ import { LoadingSwapDetails } from '../LoadingSwapDetails';
 
 import {
   Container,
+  datePlaceholderStyles,
   HeaderDetails,
   PlaceholderContainer,
   requestIdStyles,
@@ -42,14 +37,19 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
                 <Typography variant="label" size="small" color="neutral700">
                   <Skeleton width={60} height={10} variant="rounded" />
                 </Typography>
-                <IconButton variant="ghost">
-                  <CopyIcon size={16} color="gray" />
-                </IconButton>
+                <Divider direction="horizontal" size={4} />
+                <Skeleton width={16} height={16} variant="rectangular" />
+                <Divider direction="horizontal" size={4} />
+                <Skeleton width={16} height={16} variant="rectangular" />
               </div>
             </div>
             <div className={rowStyles()}>
-              <Typography variant="label" size="large" color="neutral700">
-                {`${i18n.t('Created at')}:`}
+              <Typography
+                className={datePlaceholderStyles()}
+                variant="label"
+                size="large"
+                color="neutral700">
+                <Skeleton width={60} height={10} variant="rounded" />
               </Typography>
               <Typography variant="label" size="small" color="neutral700">
                 <Skeleton width={60} height={10} variant="rounded" />

package/src/components/SwapDetails/SwapDetails.helpers.tsx

@@ -8,7 +8,10 @@ import {
   TOKEN_AMOUNT_MAX_DECIMALS,
   TOKEN_AMOUNT_MIN_DECIMALS,
 } from '../../constants/routing';
-import { getBlockchainShortNameFor } from '../../utils/meta';
+import {
+  getBlockchainShortNameFor,
+  getSwapperDisplayName,
+} from '../../utils/meta';
 import { numberToString } from '../../utils/numbers';
 import { isNetworkStatusInWarningState } from '../../utils/swap';
 import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
@@ -16,7 +19,12 @@ import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
 export const RESET_INTERVAL = 2_000;
 export const SECONDS = 60;
 
-export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
+export const getSteps = ({
+  swap,
+  blockchains,
+  swappers,
+  ...args
+}: GetStep): Step[] => {
   const hasAlreadyProceededToSign = swap.hasAlreadyProceededToSign !== false;
   return swap.steps.map((step, index) => {
     const amountToConvert =
@@ -58,7 +66,39 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
             step.outputAmount || step.expectedOutputAmountHumanReadable,
         },
       },
-      swapper: { displayName: step.swapperId, image: step.swapperLogo ?? '' },
+      swapper: {
+        displayName: getSwapperDisplayName(step.swapperId, swappers),
+        image: step.swapperLogo ?? '',
+        type: step.swapperType,
+      },
+      internalSwaps: step.internalSwaps
+        ? step.internalSwaps.map((internalSwap) => {
+            return {
+              from: {
+                blockchain:
+                  getBlockchainShortNameFor(
+                    internalSwap.fromBlockchain,
+                    blockchains
+                  ) ?? '',
+              },
+              to: {
+                blockchain:
+                  getBlockchainShortNameFor(
+                    internalSwap.toBlockchain,
+                    blockchains
+                  ) ?? '',
+              },
+              swapper: {
+                displayName: getSwapperDisplayName(
+                  internalSwap.swapperId,
+                  swappers
+                ),
+                image: internalSwap.swapperLogo ?? '',
+                type: internalSwap.swapperType,
+              },
+            };
+          })
+        : [],
       alerts: (
         <SwapDetailsAlerts
           step={step}

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -54,6 +54,10 @@ export const rowStyles = css({
   color: '$neutral500',
 });
 
+export const datePlaceholderStyles = css({
+  padding: '$5 0',
+});
+
 export const requestIdStyles = css({
   display: 'flex',
   justifyContent: 'center',
@@ -73,3 +77,12 @@ export const titleStepsStyles = css({
   width: '100%',
   padding: '0 $20 $10',
 });
+
+export const StyledLink = styled('a', {
+  fontSize: '$16',
+  fontWeight: '$400',
+  color: '$neutral700',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});

package/src/components/SwapDetails/SwapDetails.tsx

@@ -12,6 +12,7 @@ import {
   CopyIcon,
   Divider,
   IconButton,
+  LinkIcon,
   QuoteCost,
   StepDetails,
   Typography,
@@ -23,6 +24,7 @@ import { PendingSwapNetworkStatus } from 'rango-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { SCANNER_BASE_URL } from '../../constants';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -67,6 +69,7 @@ import {
   requestIdStyles,
   rowStyles,
   StepsList,
+  StyledLink,
   titleStepsStyles,
 } from './SwapDetails.styles';
 
@@ -74,6 +77,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
   const blockchains = useAppStore().blockchains();
+  const swappers = useAppStore().swappers();
   const tokens = useAppStore().tokens();
   const retry = useQuoteStore.use.retry();
   const navigate = useNavigate();
@@ -158,6 +162,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     setNetworkModal: setModalState,
     message: stepMessage,
     blockchains: blockchains,
+    swappers: swappers,
   });
   const numberOfSteps = steps.length;
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];
@@ -289,6 +294,11 @@ export function SwapDetails(props: SwapDetailsProps) {
                 onClick={handleCopy.bind(null, requestId || '')}>
                 <CopyIcon size={16} color="gray" />
               </IconButton>
+              <StyledLink
+                target="_blank"
+                href={`${SCANNER_BASE_URL}/swap/${requestId}`}>
+                <LinkIcon size={16} />
+              </StyledLink>
             </div>
           </div>
           <div className={rowStyles()}>