@rango-dev/widget-embedded 0.20.1-next.17 → 0.20.1-next.19

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/constants/quote.ts

@@ -0,0 +1,23 @@
+import type { SwapFee } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+
+export type NameOfFees =
+  | 'Swapper Fee'
+  | 'Affiliate Fee'
+  | 'Outbound network fee'
+  | 'Rango Fee'
+  | 'Network Fee';
+
+export const NAME_OF_FEES: Record<NameOfFees, string> = {
+  'Network Fee': i18n.t('Network Fee'),
+  'Swapper Fee': i18n.t('Protocol Fee'),
+  'Affiliate Fee': i18n.t('Affiliate Fee'),
+  'Outbound network fee': i18n.t('Outbound Fee'),
+  'Rango Fee': i18n.t('Rango Fee'),
+};
+
+export type FeesGroup = {
+  payable: { [key in NameOfFees]?: SwapFee[] };
+  nonePayable: { [key in NameOfFees]?: SwapFee[] };
+};

package/src/utils/swap.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { FeesGroup, NameOfFees } from '../constants/quote';
 import type { FetchStatus } from '../store/slices/data';
 import type {
   ConvertedToken,
@@ -14,6 +15,7 @@ import type {
   BestRouteResponse,
   BlockchainMeta,
   RecommendedSlippage,
+  SwapFee,
   SwapResult,
   Token,
 } from 'rango-sdk';
@@ -328,6 +330,39 @@ export function getTotalFeeInUsd(
   );
 }
 
+export function getUsdFee(fee: SwapFee): BigNumber {
+  let totalFeeInUsd = ZERO;
+  totalFeeInUsd = totalFeeInUsd.plus(
+    new BigNumber(fee.amount).multipliedBy(fee.price || 0)
+  );
+
+  return totalFeeInUsd;
+}
+
+export function getTotalFeesInUsd(fees: SwapFee[]): BigNumber {
+  return fees.reduce(
+    (totalFee: BigNumber, fee) => totalFee.plus(getUsdFee(fee)),
+    ZERO
+  );
+}
+export function getFeesGroup(swaps: SwapResult[]): FeesGroup {
+  return swaps.reduce(
+    (result, swap) => {
+      for (const fee of swap.fee) {
+        const name = fee.name as NameOfFees;
+        const feeGroup =
+          fee.expenseType !== 'DECREASE_FROM_OUTPUT'
+            ? result.payable
+            : result.nonePayable;
+
+        feeGroup[name] = [...(feeGroup[name] || []), fee];
+      }
+      return result;
+    },
+    { payable: {}, nonePayable: {} } as FeesGroup
+  );
+}
+
 export function hasHighFee(totalFeeInUsd: BigNumber | null) {
   if (!totalFeeInUsd) {
     return false;