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

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/HeaderButtons/HeaderButtons.styles.ts

@@ -23,7 +23,10 @@ export const ConnectedIcon = styled('div', {
 export const SuffixContainer = styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
-  width: '$40',
+  minWidth: '$40',
+  button: {
+    padding: 0,
+  },
 });
 
 export const NotificationsBadgeContainer = styled('div', {
@@ -38,3 +41,15 @@ export const NotificationsBadgeContainer = styled('div', {
   top: '$0',
   right: '$0',
 });
+
+export const ProgressIcon = styled('div', {
+  padding: '$2',
+  variants: {
+    isRefetched: {
+      true: {
+        transform: `rotate(360deg)`,
+        transition: 'transform 1s ease-in-out',
+      },
+    },
+  },
+});

package/src/components/HeaderButtons/HeaderButtons.types.ts

@@ -8,5 +8,4 @@ export interface HomeButtonsPropTypes {
   onClickRefresh?: () => void;
   onClickHistory?: () => void;
   onClickSettings?: () => void;
-  onClickNotifications?: () => void;
 }

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -4,7 +4,6 @@ import { i18n } from '@lingui/core';
 import {
   NotificationsIcon,
   Popover,
-  RefreshIcon,
   SettingsIcon,
   Tooltip,
   TransactionIcon,
@@ -17,16 +16,11 @@ import { isFeatureHidden } from '../../utils/settings';
 import { NotificationContent } from '../NotificationContent';
 
 import { HeaderButton } from './HeaderButtons.styles';
+import { RefreshButton } from './RefreshButton';
 import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
 
 export function HomeButtons(props: HomeButtonsPropTypes) {
-  const {
-    layoutRef,
-    onClickRefresh,
-    onClickHistory,
-    onClickSettings,
-    onClickNotifications,
-  } = props;
+  const { layoutRef, onClickRefresh, onClickHistory, onClickSettings } = props;
 
   const {
     config: { features },
@@ -40,35 +34,28 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
         container={getContainer()}
         side="top"
         content={i18n.t('Refresh')}>
-        <HeaderButton
-          variant="ghost"
-          size="small"
-          onClick={onClickRefresh}
-          disabled={!onClickRefresh}>
-          <RefreshIcon size={16} color={!onClickRefresh ? 'gray' : 'black'} />
-        </HeaderButton>
+        <RefreshButton onClick={onClickRefresh} />
       </Tooltip>
 
       {!isNotificationsHidden && (
-        <Tooltip
+        <Popover
+          align="center"
+          collisionBoundary={layoutRef}
+          collisionPadding={{ right: 20, left: 20 }}
           container={getContainer()}
-          side="top"
-          content={i18n.t('Notifications')}>
-          <Popover
-            align="center"
-            collisionBoundary={layoutRef}
-            collisionPadding={{ right: 20, left: 20 }}
-            container={getContainer()}
-            content={<NotificationContent />}>
-            <HeaderButton
-              size="small"
-              variant="ghost"
-              onClick={onClickNotifications}>
-              <NotificationsIcon size={18} color="black" />
-              <UnreadNotificationsBadge />
-            </HeaderButton>
-          </Popover>
-        </Tooltip>
+          content={<NotificationContent />}>
+          <div>
+            <Tooltip
+              container={getContainer()}
+              side="top"
+              content={i18n.t('Notifications')}>
+              <HeaderButton size="small" variant="ghost">
+                <NotificationsIcon size={18} color="black" />
+                <UnreadNotificationsBadge />
+              </HeaderButton>
+            </Tooltip>
+          </div>
+        </Popover>
       )}
       <Tooltip
         container={getContainer()}

package/src/components/HeaderButtons/RefreshButton.tsx

@@ -0,0 +1,81 @@
+import { RefreshProgressButton } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { HeaderButton, ProgressIcon } from './HeaderButtons.styles';
+
+const REFRESH_INTERVAL = 1000;
+const MAX_ELAPSED_TIME = 60;
+const MAX_PERCENTAGE = 100;
+
+function RefreshButton({ onClick }: { onClick: (() => void) | undefined }) {
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [isRefetched, setIsRefetched] = useState(false);
+
+  const handleVisibilityChange = (interval?: number) => {
+    if (document.hidden && interval) {
+      // Tab is inactive, clear the interval
+      clearTimeout(interval);
+    }
+  };
+
+  useEffect(() => {
+    let interval: number | undefined;
+    if (onClick) {
+      interval = window.setInterval(() => {
+        setElapsedTime((prevTime) => prevTime + 1);
+
+        if (elapsedTime === MAX_ELAPSED_TIME) {
+          handleRefreshClick();
+        }
+      }, REFRESH_INTERVAL);
+    } else {
+      clearTimeout(interval);
+    }
+
+    document.addEventListener('visibilitychange', () =>
+      handleVisibilityChange(interval)
+    );
+
+    return () => {
+      document.removeEventListener('visibilitychange', () =>
+        handleVisibilityChange(interval)
+      );
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [elapsedTime, onClick]);
+
+  const clearTimeout = (interval?: number) => {
+    if (interval) {
+      clearInterval(interval);
+    }
+    setElapsedTime(0);
+  };
+
+  const handleRefreshClick = () => {
+    onClick?.();
+    setElapsedTime(0);
+    setIsRefetched(true);
+  };
+
+  return (
+    <HeaderButton
+      variant="ghost"
+      size="small"
+      onClick={handleRefreshClick}
+      disabled={!onClick}>
+      <ProgressIcon
+        onTransitionEnd={() => setIsRefetched(false)}
+        isRefetched={isRefetched}>
+        <RefreshProgressButton
+          size={24}
+          color={!onClick ? 'gray' : 'black'}
+          progress={(elapsedTime / MAX_ELAPSED_TIME) * MAX_PERCENTAGE}
+        />
+      </ProgressIcon>
+    </HeaderButton>
+  );
+}
+
+export { RefreshButton };

package/src/components/NotificationContent/NotificationContent.tsx

@@ -1,6 +1,7 @@
 import type { Notification } from '../../types/notification';
 
 import { i18n } from '@lingui/core';
+import { EventSeverity } from '@rango-dev/queue-manager-rango-preset';
 import {
   ChainToken,
   ChevronRightIcon,
@@ -74,7 +75,15 @@ export function NotificationContent() {
                 key={notificationItem.requestId}
                 onClick={() => handleOnClick(notificationItem.requestId)}
                 title={
-                  <Typography variant="body" size="small" color="$neutral700">
+                  <Typography
+                    variant="body"
+                    size="small"
+                    color={
+                      notificationItem.event.messageSeverity ===
+                      EventSeverity.WARNING
+                        ? '$foreground'
+                        : '$neutral700'
+                    }>
                     {i18n.t(notificationItem.event.message)}
                   </Typography>
                 }

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;
 
@@ -114,6 +114,15 @@ export const summaryStyles = css({
   cursor: 'default',
 });
 
+export const rowStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '.blockchainImage': {
+    marginLeft: '-$8',
+  },
+});
 export const basicInfoStyles = css({
   paddingTop: '$10',
   display: 'flex',
@@ -127,7 +136,7 @@ export const basicInfoStyles = css({
   },
 });
 
-export const Chains = styled(Collapsible.Trigger, {
+export const Trigger = styled(Collapsible.Trigger, {
   display: 'flex',
   width: '100%',
   justifyContent: 'space-between',
@@ -171,17 +180,27 @@ export const Chains = styled(Collapsible.Trigger, {
       },
     },
   },
-  '& div:nth-child(1)': { display: 'flex' },
+  '.blockchains_section': {
+    display: 'none',
+  },
+  '@xs': {
+    '.blockchains_section': {
+      display: 'block',
+    },
+  },
 });
 
-export const ChainImageContainer = styled('div', {
+export const ImageContainer = styled('div', {
   width: '18px',
   height: '18px',
   borderRadius: '100%',
-  border: '1.5px transparent solid',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  border: '1.5px transparent solid',
+  img: {
+    borderRadius: '100%',
+  },
   variants: {
     state: {
       error: {
@@ -252,3 +271,23 @@ export const ContainerInfoOutput = styled('div', {
   display: 'flex',
   flexWrap: 'wrap',
 });
+
+export const MoreStep = styled('div', {
+  width: '18px',
+  height: '18px',
+  borderRadius: '100%',
+  backgroundColor: '$background',
+  cursor: 'default',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: '1.5px transparent solid',
+  variants: {
+    state: {
+      error: {
+        borderColor: '$error500',
+      },
+      warning: { borderColor: '$warning500' },
+    },
+  },
+});

package/src/components/Quote/Quote.tsx

@@ -5,12 +5,8 @@ import type { SwapResult } from 'rango-sdk';
 import { i18n } from '@lingui/core';
 import {
   Alert,
-  ChevronDownIcon,
-  ChevronRightIcon,
   Divider,
-  Image,
   InfoIcon,
-  QuoteCost,
   StepDetails,
   TokenAmount,
   Tooltip,
@@ -20,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,
@@ -40,32 +34,25 @@ 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,
   basicInfoStyles,
-  ChainImageContainer,
-  Chains,
   ContainerInfoOutput,
   Content,
   EXPANDABLE_QUOTE_TRANSITION_DURATION,
   FrameIcon,
   HorizontalSeparator,
-  IconContainer,
   QuoteContainer,
   stepsDetailsStyles,
   SummaryContainer,
   summaryStyles,
 } from './Quote.styles';
+import { QuoteCostDetails } from './QuoteCostDetails';
 import { QuoteSummary } from './QuoteSummary';
+import { QuoteTrigger } from './QuoteTrigger ';
 
 export function Quote(props: QuoteProps) {
   const {
@@ -77,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,
@@ -283,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(() => {
@@ -300,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>
@@ -374,59 +353,13 @@ export function Quote(props: QuoteProps) {
           recommended={recommended}
           open={expanded}
           onOpenChange={setExpanded}>
-          <Chains
-            ref={(ref) => (quoteRef.current = ref)}
+          <QuoteTrigger
+            quoteRef={quoteRef}
             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>
+            setExpanded={setExpanded}
+            expanded={expanded}
+            steps={steps}
+          />
           <Content open={expanded}>
             <HorizontalSeparator />
             <div className={stepsDetailsStyles()}>

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

@@ -1,4 +1,5 @@
 import type { QuoteError, QuoteWarning } from '../../types';
+import type { Step } from '@rango-dev/ui';
 import type { BestRouteResponse } from 'rango-sdk';
 import type { ReactNode } from 'react';
 
@@ -13,3 +14,24 @@ export type QuoteProps = {
   output: { value: string; usdValue?: string };
   expanded?: boolean;
 };
+
+export type QuoteTriggerProps = {
+  quoteRef: React.MutableRefObject<HTMLButtonElement | null>;
+  recommended: boolean;
+  setExpanded: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+  steps: Step[];
+  expanded?: boolean;
+};
+
+export type QuoteTriggerImagesProps = {
+  content: ReactNode;
+  state?: 'error' | 'warning' | undefined;
+  src: string;
+  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',
+    },
+  },
+});