@rango-dev/widget-embedded 0.20.1-next.8 → 0.21.0

package/src/components/Layout/Layout.tsx

@@ -1,30 +1,29 @@
-import type { PropTypes, Ref } from './Layout.types';
+import type { PropTypes } from './Layout.types';
+import type { PendingSwap } from 'rango-types';
 import type { PropsWithChildren } from 'react';
 
+import { useManager } from '@rango-dev/queue-manager-react';
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { RANGO_SWAP_BOX_ID } from '../../constants';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
-import { useUiStore } from '../../store/ui';
+import { setCurrentTabAsActive, useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
+import { getPendingSwaps } from '../../utils/queue';
 import { isFeatureHidden } from '../../utils/settings';
+import { ActivateTabAlert } from '../common/ActivateTabAlert';
+import { ActivateTabModal } from '../common/ActivateTabModal';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 
+import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
 import { Container, Content, Footer } from './Layout.styles';
 
-function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
-  const {
-    children,
-    header,
-    footer,
-    noPadding,
-    hasLogo = true,
-    fixedHeight = true,
-  } = props;
+function Layout(props: PropsWithChildren<PropTypes>) {
+  const { children, header, footer, hasLogo = true, height = 'fixed' } = props;
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
     config: { features, theme },
@@ -36,25 +35,48 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     features
   );
 
-  const connectWalletsButtonDisabled =
-    useUiStore.use.connectWalletsButtonDisabled();
+  const {
+    isActiveTab,
+    tabManagerInitiated,
+    showActivateTabModal,
+    setShowActivateTabModal,
+    activateCurrentTab,
+  } = useUiStore();
   const navigateBack = useNavigateBack();
+  const { manager } = useManager();
+  const pendingSwaps: PendingSwap[] = getPendingSwaps(manager).map(
+    ({ swap }) => swap
+  );
+  const hasRunningSwap = pendingSwaps.some((swap) => swap.status === 'running');
+
+  const onActivateTab = () =>
+    activateCurrentTab(setCurrentTabAsActive, hasRunningSwap);
 
   const onConnectWallet = () => {
-    if (!connectWalletsButtonDisabled && header.onWallet) {
-      header.onWallet();
-    }
+    header.onWallet?.();
   };
 
   const showBackButton =
     typeof header.hasBackButton === 'undefined' || header.hasBackButton;
 
+  const scrollViewRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    scrollViewRef.current?.addEventListener(
+      'scroll',
+      onScrollContentAttachStatusToContainer
+    );
+
+    return () => {
+      scrollViewRef.current?.removeEventListener(
+        'scroll',
+        onScrollContentAttachStatusToContainer
+      );
+    };
+  }, []);
+
   return (
-    <Container
-      ref={ref}
-      fixedHeight={fixedHeight}
-      id={RANGO_SWAP_BOX_ID}
-      className={activeTheme()}>
+    <Container height={height} id={RANGO_SWAP_BOX_ID} className={activeTheme()}>
       <Header
         prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}
@@ -72,13 +94,26 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
           </>
         }
       />
-      <Content noPadding={noPadding}>{children}</Content>
+      <Content ref={scrollViewRef}>{children}</Content>
+      <ActivateTabModal
+        open={showActivateTabModal}
+        onClose={() => setShowActivateTabModal(false)}
+        onConfirm={onActivateTab}
+      />
       {(hasLogo || footer) && (
         <Footer>
-          <div className="footer__content">{footer}</div>
+          <div className="footer__content">
+            {footer}
+            {tabManagerInitiated && !isActiveTab && (
+              <>
+                <Divider size={12} />
+                <ActivateTabAlert onActivateTab={onActivateTab} />
+              </>
+            )}
+          </div>
+          <Divider size={12} />
           {hasLogo && (
             <div className="footer__logo">
-              <Divider size={12} />
               <BottomLogo />
             </div>
           )}
@@ -87,8 +122,4 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     </Container>
   );
 }
-
-const Layout = React.forwardRef(LayoutComponent);
-Layout.displayName = 'Layout';
-
 export { Layout };

package/src/components/Layout/Layout.types.ts

@@ -1,3 +1,11 @@
+import type { Container } from './Layout.styles';
+import type * as Stitches from '@stitches/react';
+
+type ContainerProps = Stitches.VariantProps<typeof Container>;
+type ContainerHeightProp = NonNullable<
+  Exclude<ContainerProps['height'], object>
+>;
+
 export interface PropTypes {
   header: {
     title: string;
@@ -9,12 +17,5 @@ export interface PropTypes {
   };
   hasLogo?: boolean;
   footer?: React.ReactNode;
-  noPadding?: boolean;
-  fixedHeight?: boolean;
+  height?: ContainerHeightProp;
 }
-
-export type Ref =
-  | ((instance: HTMLDivElement | null) => void)
-  | React.RefObject<HTMLDivElement>
-  | null
-  | undefined;

package/src/components/Layout/PageContainer.tsx

@@ -0,0 +1,24 @@
+import { styled } from '@rango-dev/ui';
+
+const PageContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '20px 20px 10px',
+  flexGrow: 1,
+
+  variants: {
+    view: {
+      true: {
+        flexGrow: 1,
+        overflow: 'hidden',
+      },
+    },
+    compact: {
+      true: {
+        padding: 0,
+      },
+    },
+  },
+});
+
+export { PageContainer };

package/src/components/Layout/ScrollableArea.tsx

@@ -0,0 +1,11 @@
+import { styled } from '@rango-dev/ui';
+
+const CONTENT_PADDING = '$20 $20 $10 $20';
+
+const ScrollableArea = styled('div', {
+  padding: CONTENT_PADDING,
+  overflowY: 'auto',
+  flexGrow: 1,
+});
+
+export { ScrollableArea, CONTENT_PADDING };

package/src/components/Layout/index.ts

@@ -1 +1,3 @@
 export { Layout } from './Layout';
+export { ScrollableArea, CONTENT_PADDING } from './ScrollableArea';
+export { PageContainer } from './PageContainer';

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,
@@ -13,7 +14,6 @@ import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
-import { useUiStore } from '../../store/ui';
 
 import { Container, Images, List } from './NotificationContent.styles';
 import { NotificationNotFound } from './NotificationNotFound';
@@ -22,7 +22,6 @@ const MAX_NOTIFICATIONS_DISPLAYED = 4;
 
 export function NotificationContent() {
   const navigate = useNavigate();
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
 
   const { getUnreadNotifications } = useNotificationStore();
 
@@ -34,7 +33,6 @@ export function NotificationContent() {
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
   const handleOnClick = (requestId: Notification['requestId']) => {
-    setSelectedSwap(requestId);
     navigate(`${navigationRoutes.swaps}/${requestId}`);
   };
 
@@ -74,7 +72,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',
+    },
+  },
+});