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

package/dist/utils/swap.d.ts

@@ -1,7 +1,8 @@
+import type { FeesGroup } from '../constants/quote';
 import type { FetchStatus } from '../store/slices/data';
 import type { ConvertedToken, QuoteError, QuoteWarning, RecommendedSlippages, SwapButtonState, Wallet } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
-import type { BestRouteRequest, BestRouteResponse, BlockchainMeta, RecommendedSlippage, SwapResult, Token } from 'rango-sdk';
+import type { BestRouteRequest, BestRouteResponse, BlockchainMeta, RecommendedSlippage, SwapFee, SwapResult, Token } from 'rango-sdk';
 import type { PendingSwap, PendingSwapStep } from 'rango-types';
 import BigNumber from 'bignumber.js';
 export declare function getOutputRatio(inputUsdValue: BigNumber | null, outputUsdValue: BigNumber | null): number;
@@ -27,6 +28,9 @@ export declare function requiredWallets(quote: BestRouteResponse | null): string
 export declare const getUsdPrice: (blockchain: string, symbol: string, address: string | null, allTokens: Token[]) => number | null;
 export declare function getUsdFeeOfStep(step: SwapResult, allTokens: Token[]): BigNumber;
 export declare function getTotalFeeInUsd(swaps: SwapResult[], allTokens: Token[]): BigNumber;
+export declare function getUsdFee(fee: SwapFee): BigNumber;
+export declare function getTotalFeesInUsd(fees: SwapFee[]): BigNumber;
+export declare function getFeesGroup(swaps: SwapResult[]): FeesGroup;
 export declare function hasHighFee(totalFeeInUsd: BigNumber | null): boolean;
 export declare function hasSlippageError(slippages: (RecommendedSlippage | null)[] | undefined): boolean;
 export declare function checkSlippageErrors(quote: BestRouteResponse): RecommendedSlippages | null;

package/dist/utils/swap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/utils/swap.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/utils/swap.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.20.1-next.17",
+  "version": "0.20.1-next.18",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.25.0",
     "@rango-dev/queue-manager-rango-preset": "^0.25.1-next.1",
     "@rango-dev/queue-manager-react": "^0.24.0",
-    "@rango-dev/ui": "^0.26.1-next.9",
+    "@rango-dev/ui": "^0.26.1-next.10",
     "@rango-dev/wallets-react": "^0.11.1-next.1",
     "@rango-dev/wallets-shared": "^0.25.1-next.1",
     "bignumber.js": "^9.1.1",

package/src/components/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -1,34 +1,12 @@
-import * as Collapsible from '@radix-ui/react-collapsible';
 import {
   Button,
   css,
   darkTheme,
   IconButton,
-  keyframes,
   styled,
   TextField,
 } from '@rango-dev/ui';
 
-export const EXPANDABLE_TRANSITION_DURATION = 300;
-
-const slideDown = keyframes({
-  from: {
-    height: 0,
-  },
-  to: {
-    height: 'var(--radix-collapsible-content-height)',
-  },
-});
-
-const slideUp = keyframes({
-  from: {
-    height: 'var(--radix-collapsible-content-height)',
-  },
-  to: {
-    height: 0,
-  },
-});
-
 export const Title = styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -93,16 +71,6 @@ export const ShowMoreWallets = styled(WalletButton, {
   alignSelf: 'stretch',
   minHeight: '93px',
 });
-
-export const Trigger = styled(Collapsible.Trigger, {
-  padding: '$0',
-  border: 'none',
-  outline: 'none',
-  width: '100%',
-  backgroundColor: 'transparent',
-  fontFamily: 'inherit',
-});
-
 export const ShowMoreHeader = styled('div', {
   padding: '$20',
   display: 'flex',
@@ -132,20 +100,36 @@ export const walletsListStyles = css({
   height: '100%',
 });
 
-export const CollapsibleRoot = styled(Collapsible.Root, {
-  backgroundColor: '$neutral200',
-  borderRadius: '$sm',
-  variants: {
-    selected: {
-      true: {
-        outlineWidth: 1,
-        outlineColor: '$secondary500',
-        outlineStyle: 'solid',
-      },
-    },
+export const CustomDestination = styled('div', {
+  padding: '$10 $0',
+  '& .button__content': {
+    display: 'flex',
+    alignItems: 'center',
   },
+  '& .alarms': { paddingTop: '$5' },
+  '& .collapsible_content': {
+    backgroundColor: '$neutral100',
+  },
+  '& .collapsible_root': {
+    backgroundColor: '$neutral200',
+  },
+});
+
+export const alarmsStyles = css({
+  paddingTop: '$5',
+});
+
+export const ConfirmButton = styled('div', {
+  display: 'flex',
+});
+
+export const StyledTextField = styled(TextField, {
+  backgroundColor: '$neutral100',
+  padding: '$0 $15 $15 $15',
 });
 
+export const Wallets = styled('div', { overflow: 'visible', width: '100%' });
+
 export const CustomDestinationButton = styled(Button, {
   width: '100%',
   borderRadius: '$sm !important',
@@ -174,56 +158,3 @@ export const CustomDestinationButton = styled(Button, {
     outline: 0,
   },
 });
-
-export const CustomDestination = styled('div', {
-  padding: '$10 $0',
-  '& .button__content': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .alarms': { paddingTop: '5px' },
-});
-
-export const alarmsStyles = css({
-  paddingTop: '5px',
-});
-
-export const ExpandedIcon = styled('div', {
-  transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
-  variants: {
-    orientation: {
-      down: {
-        transform: 'rotate(0)',
-      },
-      up: {
-        transform: 'rotate(180deg)',
-      },
-    },
-  },
-});
-
-export const ConfirmButton = styled('div', {
-  display: 'flex',
-});
-
-export const StyledTextField = styled(TextField, {
-  backgroundColor: '$neutral100',
-  padding: '$0 $15 $15 $15',
-});
-
-export const CollapsibleContent = styled(Collapsible.Content, {
-  backgroundColor: '$neutral100',
-  overflow: 'hidden',
-  variants: {
-    open: {
-      true: {
-        animation: `${slideDown} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
-      },
-      false: {
-        animation: `${slideUp} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
-      },
-    },
-  },
-});
-
-export const Wallets = styled('div', { overflow: 'visible', width: '100%' });

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -15,7 +15,7 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { RANGO_SWAP_BOX_ID } from '../../constants';
@@ -26,23 +26,20 @@ import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainShortNameFor } from '../../utils/meta';
 import { confirmSwapDisabled } from '../../utils/swap';
+import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
+import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
 
 import { getRequiredWallets, isValidAddress } from './ConfirmWallets.helpers';
 import {
   alarmsStyles,
-  CollapsibleContent,
-  CollapsibleRoot,
   ConfirmButton,
   CustomDestination,
   CustomDestinationButton,
-  EXPANDABLE_TRANSITION_DURATION,
-  ExpandedIcon,
   ListContainer,
   NavigateBack,
   ShowMoreHeader,
   StyledTextField,
   Title,
-  Trigger,
   Wallets,
   WalletsContainer,
   walletsListStyles,
@@ -76,7 +73,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const [showCustomDestination, setShowCustomDestination] = useState(
     !!customDestination
   );
-  const customDestinationRef = useRef<HTMLDivElement | null>(null);
 
   const requiredWallets = getRequiredWallets(quote);
 
@@ -231,14 +227,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
     );
   }, [connectedWallets.length]);
 
-  useLayoutEffect(() => {
-    if (showCustomDestination && customDestinationRef.current) {
-      setTimeout(() => {
-        customDestinationRef?.current?.scrollIntoView({ behavior: 'smooth' });
-      }, EXPANDABLE_TRANSITION_DURATION);
-    }
-  }, [showCustomDestination]);
-
   const modalContainer = document.getElementById(
     RANGO_SWAP_BOX_ID
   ) as HTMLDivElement;
@@ -394,10 +382,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                   {!isLastWallet && <Divider size={32} />}
                   {isLastWallet && config?.customDestination && (
                     <CustomDestination>
-                      <CollapsibleRoot
-                        ref={customDestinationRef}
-                        selected={showCustomDestination}
-                        open={showCustomDestination}
+                      <CustomCollapsible
                         onOpenChange={(checked) => {
                           if (!checked) {
                             resetCustomDestination();
@@ -423,11 +408,11 @@ export function ConfirmWalletsModal(props: PropTypes) {
                               );
                             }
                           }
-                        }}>
-                        <Trigger
-                          onClick={() =>
-                            setShowCustomDestination((prevState) => !prevState)
-                          }>
+                        }}
+                        hasSelected
+                        open={showCustomDestination}
+                        triggerAnchor="top"
+                        trigger={
                           <CustomDestinationButton
                             fullWidth
                             variant="default"
@@ -447,21 +432,21 @@ export function ConfirmWalletsModal(props: PropTypes) {
                               </Typography>
                             </div>
                           </CustomDestinationButton>
-                        </Trigger>
-                        <CollapsibleContent open={showCustomDestination}>
-                          <>
-                            <Divider size={4} />
-                            <StyledTextField
-                              autoFocus
-                              placeholder={i18n.t('Your destination address')}
-                              value={destination}
-                              onChange={(e) => {
-                                setDestination(e.target.value);
-                              }}
-                            />
-                          </>
-                        </CollapsibleContent>
-                      </CollapsibleRoot>
+                        }
+                        onClickTrigger={() =>
+                          setShowCustomDestination((prev) => !prev)
+                        }>
+                        <Divider size={4} />
+                        <StyledTextField
+                          autoFocus
+                          placeholder={i18n.t('Your destination address')}
+                          value={destination}
+                          onChange={(e) => {
+                            setDestination(e.target.value);
+                          }}
+                        />
+                      </CustomCollapsible>
+
                       {isAddressMatched && (
                         <div className={alarmsStyles()}>
                           <Alert

package/src/components/CustomCollapsible/CustomCollapsible.styles.ts

@@ -0,0 +1,75 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { keyframes, styled } from '@rango-dev/ui';
+
+export const EXPANDABLE_TRANSITION_DURATION = 300;
+
+const slideDown = keyframes({
+  from: {
+    height: 0,
+  },
+  to: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+});
+
+const slideUp = keyframes({
+  from: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+  to: {
+    height: 0,
+  },
+});
+
+export const CollapsibleRoot = styled(Collapsible.Root, {
+  borderRadius: '$sm',
+  variants: {
+    selected: {
+      true: {
+        outlineWidth: 1,
+        outlineColor: '$secondary500',
+        outlineStyle: 'solid',
+      },
+    },
+  },
+});
+
+export const Trigger = styled(Collapsible.Trigger, {
+  padding: '$0',
+  border: 'none',
+  outline: 'none',
+  width: '100%',
+  backgroundColor: 'transparent',
+  fontFamily: 'inherit',
+  cursor: 'pointer',
+});
+
+export const CollapsibleContent = styled(Collapsible.Content, {
+  overflow: 'hidden',
+  variants: {
+    open: {
+      true: {
+        animation: `${slideDown} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
+      },
+      false: {
+        animation: `${slideUp} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
+      },
+    },
+  },
+});
+
+export const ExpandedIcon = styled('div', {
+  transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
+  display: 'flex',
+  alignItems: 'center',
+  variants: {
+    orientation: {
+      down: {
+        transform: 'rotate(0)',
+      },
+      up: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});

package/src/components/CustomCollapsible/CustomCollapsible.tsx

@@ -0,0 +1,55 @@
+import type { PropTypes } from './CustomCollapsible.types';
+import type { PropsWithChildren } from 'react';
+
+import React, { useLayoutEffect, useRef } from 'react';
+
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  EXPANDABLE_TRANSITION_DURATION,
+  Trigger,
+} from './CustomCollapsible.styles';
+
+export function CustomCollapsible(props: PropsWithChildren<PropTypes>) {
+  const {
+    open,
+    hasSelected,
+    onOpenChange,
+    children,
+    onClickTrigger,
+    trigger,
+    triggerAnchor,
+  } = props;
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    if (open && ref.current) {
+      setTimeout(() => {
+        ref?.current?.scrollIntoView({ behavior: 'smooth' });
+      }, EXPANDABLE_TRANSITION_DURATION);
+    }
+  }, [open]);
+
+  return (
+    <CollapsibleRoot
+      ref={ref}
+      className="collapsible_root"
+      selected={hasSelected && open}
+      open={open}
+      onOpenChange={onOpenChange}>
+      {triggerAnchor === 'top' && (
+        <Trigger className="collapsible_trigger" onClick={onClickTrigger}>
+          {trigger}
+        </Trigger>
+      )}
+      <CollapsibleContent className="collapsible_content" open={open}>
+        {children}
+      </CollapsibleContent>
+      {triggerAnchor === 'bottom' && (
+        <Trigger className="collapsible_trigger" onClick={onClickTrigger}>
+          {trigger}
+        </Trigger>
+      )}
+    </CollapsibleRoot>
+  );
+}

package/src/components/CustomCollapsible/CustomCollapsible.types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type PropTypes = {
+  open: boolean;
+  hasSelected?: boolean;
+  onOpenChange?: (checked: boolean) => void;
+  onClickTrigger: () => void;
+  trigger: ReactNode;
+  triggerAnchor: 'top' | 'bottom';
+};

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

@@ -1,7 +1,7 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { css, darkTheme, Image, styled, Typography } from '@rango-dev/ui';
 
-import { CollapsibleContent } from '../ConfirmWalletsModal/ConfirmWallets.styles';
+import { CollapsibleContent } from '../CustomCollapsible/CustomCollapsible.styles';
 
 export const EXPANDABLE_QUOTE_TRANSITION_DURATION = 300;
 

package/src/components/Quote/Quote.tsx

@@ -7,7 +7,6 @@ import {
   Alert,
   Divider,
   InfoIcon,
-  QuoteCost,
   StepDetails,
   TokenAmount,
   Tooltip,
@@ -17,8 +16,6 @@ import BigNumber from 'bignumber.js';
 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,
@@ -37,14 +34,8 @@ import {
   getBlockchainShortNameFor,
   getSwapperDisplayName,
 } from '../../utils/meta';
-import {
-  formatTooltipNumbers,
-  numberToString,
-  secondsToString,
-  totalArrivalTime,
-} from '../../utils/numbers';
+import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
-import { getTotalFeeInUsd } from '../../utils/swap';
 
 import {
   BasicInfoOutput,
@@ -59,6 +50,7 @@ import {
   SummaryContainer,
   summaryStyles,
 } from './Quote.styles';
+import { QuoteCostDetails } from './QuoteCostDetails';
 import { QuoteSummary } from './QuoteSummary';
 import { QuoteTrigger } from './QuoteTrigger ';
 
@@ -72,19 +64,12 @@ export function Quote(props: QuoteProps) {
     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,
@@ -278,7 +263,6 @@ export function Quote(props: QuoteProps) {
   const steps = getQuoteSteps(quote.result?.swaps ?? []);
   const numberOfSteps = steps.length;
   const tooltipContainer = getContainer();
-
   useLayoutEffect(() => {
     if (expanded && !prevExpanded.current && quoteRef.current) {
       setTimeout(() => {
@@ -295,7 +279,7 @@ export function Quote(props: QuoteProps) {
         listItem={type === 'list-item'}
         basic={type === 'basic'}>
         <div className={summaryStyles()}>
-          <QuoteCost fee={totalFee} time={totalTime} steps={numberOfSteps} />
+          <QuoteCostDetails steps={numberOfSteps} quote={quote} />
           {type === 'basic' && (
             <div className={basicInfoStyles()}>
               <FrameIcon>

package/src/components/Quote/Quote.types.ts

@@ -30,3 +30,8 @@ export type QuoteTriggerImagesProps = {
   open?: boolean;
   className?: string;
 };
+
+export type QuoteCostDetailsProps = {
+  quote: BestRouteResponse;
+  steps: number;
+};

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

@@ -0,0 +1,50 @@
+import { css, styled } from '@rango-dev/ui';
+
+export const FeeSection = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$5 0',
+  '&.total_payable_fee': {
+    padding: '$12 0',
+  },
+});
+
+export const Line = styled('div', {
+  width: '100%',
+  borderTop: '1px solid $neutral300',
+  margin: '$10 0',
+});
+
+export const ModalContainer = styled('div', {
+  padding: '$20 0',
+  display: 'flex',
+  flexDirection: 'column',
+  '& .collapsible_trigger': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export const ModalHeader = styled('div', {
+  padding: '$20 $20 $10',
+  textAlign: 'center',
+  position: 'relative',
+  '._icon-button': {
+    position: 'absolute',
+    zIndex: 10,
+    top: '$16',
+    right: '$16',
+  },
+});
+export const trigger = css({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  padding: '$5',
+  '&:hover': {
+    '& ._typography, & svg': {
+      color: '$secondary',
+    },
+  },
+});