@rango-dev/widget-embedded 0.21.1-next.0 → 0.21.1-next.10

package/src/components/{SwapsGroup/SwapsGroup.types.ts → HistoryGroupedList/HistoryGroupedList.types.ts}

@@ -1,13 +1,14 @@
 import type { PendingSwap } from 'rango-types';
 
 export type GroupBy = (list: PendingSwap[]) => {
-  title: string;
   swaps: PendingSwap[];
-}[];
+  groups: string[];
+  groupCounts: number[];
+};
 
 export interface PropTypes {
   list: PendingSwap[];
   onSwapClick: (requestId: string) => void;
-  groupBy?: GroupBy;
+  groupBy: GroupBy;
   isLoading: boolean;
 }

package/src/components/HistoryGroupedList/index.ts

@@ -0,0 +1 @@
+export { HistoryGroupedList } from './HistoryGroupedList';

package/src/components/Layout/Layout.styles.ts

@@ -1,12 +1,13 @@
 import { styled } from '@rango-dev/ui';
 
 const WIDGET_HEIGHT = '700px';
+
 export const Container = styled('div', {
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '$primary',
-  width: '100vh',
+  width: '100vw',
   minWidth: '300px',
   maxWidth: '390px',
   boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
@@ -35,12 +36,17 @@ export const Content = styled('div', {
   padding: 0,
   overflowY: 'auto',
 });
+
 export const Footer = styled('div', {
-  backgroundColor: '$background',
-  '& .footer__content': {
-    padding: '$0 $20',
-  },
+  padding: '0 $20 $10',
   '& .footer__logo': {
-    padding: '$0 $20 $10 $20',
+    opacity: 0,
+    transition: 'opacity 1s ease-in-out',
+    '&.logo__show': {
+      opacity: 1,
+    },
+    '&.logo__hidden': {
+      visibility: 'hidden',
+    },
   },
 });

package/src/components/Layout/Layout.tsx

@@ -6,7 +6,9 @@ import { useManager } from '@rango-dev/queue-manager-react';
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React, { useEffect, useRef } from 'react';
 
-import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
+import { useIframe } from '../../hooks/useIframe';
+import { isAppLoadedIntoIframe } from '../../hooks/useIframe/useIframe.helpers';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
@@ -23,11 +25,15 @@ import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
 import { Container, Content, Footer } from './Layout.styles';
 
 function Layout(props: PropsWithChildren<PropTypes>) {
-  const { children, header, footer, hasLogo = true, height = 'fixed' } = props;
+  const { connectHeightObserver, disconnectHeightObserver } = useIframe();
+  const { children, header, footer, height = 'fixed' } = props;
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
     config: { features, theme },
   } = useAppStore();
+  const { watermark } = useUiStore();
+
+  const hasWatermark = watermark === 'FULL';
   const { activeTheme } = useTheme(theme || {});
 
   const isConnectWalletHidden = isFeatureHidden(
@@ -60,13 +66,26 @@ function Layout(props: PropsWithChildren<PropTypes>) {
     typeof header.hasBackButton === 'undefined' || header.hasBackButton;
 
   const scrollViewRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const isIframe = isAppLoadedIntoIframe();
+
+    // This feature only will be available in an iframe context.
+    if (isIframe && containerRef.current) {
+      connectHeightObserver(containerRef.current);
+    }
+
+    return () => {
+      disconnectHeightObserver();
+    };
+  }, []);
 
   useEffect(() => {
     scrollViewRef.current?.addEventListener(
       'scroll',
       onScrollContentAttachStatusToContainer
     );
-
     return () => {
       scrollViewRef.current?.removeEventListener(
         'scroll',
@@ -76,7 +95,11 @@ function Layout(props: PropsWithChildren<PropTypes>) {
   }, []);
 
   return (
-    <Container height={height} id={RANGO_SWAP_BOX_ID} className={activeTheme()}>
+    <Container
+      height={height}
+      id={WIDGET_UI_ID.SWAP_BOX_ID}
+      className={activeTheme()}
+      ref={containerRef}>
       <Header
         prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}
@@ -100,25 +123,27 @@ function Layout(props: PropsWithChildren<PropTypes>) {
         onClose={() => setShowActivateTabModal(false)}
         onConfirm={onActivateTab}
       />
-      {(hasLogo || footer) && (
-        <Footer>
-          <div className="footer__content">
-            {footer}
-            {tabManagerInitiated && !isActiveTab && (
-              <>
-                <Divider size={12} />
-                <ActivateTabAlert onActivateTab={onActivateTab} />
-              </>
-            )}
-          </div>
-          <Divider size={12} />
-          {hasLogo && (
-            <div className="footer__logo">
-              <BottomLogo />
-            </div>
+
+      <Footer>
+        <div className="footer__content">
+          {footer}
+          {tabManagerInitiated && !isActiveTab && (
+            <>
+              <Divider size={12} />
+              <ActivateTabAlert onActivateTab={onActivateTab} />
+            </>
           )}
-        </Footer>
-      )}
+        </div>
+
+        <Divider size={12} />
+
+        <div
+          className={`footer__logo ${
+            hasWatermark ? 'logo__show' : 'logo__hidden'
+          }`}>
+          <BottomLogo />
+        </div>
+      </Footer>
     </Container>
   );
 }

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

@@ -15,7 +15,6 @@ export interface PropTypes {
     hasBackButton?: boolean;
     onCancel?: () => void;
   };
-  hasLogo?: boolean;
   footer?: React.ReactNode;
   height?: ContainerHeightProp;
 }

package/src/components/NotificationContent/NotificationContent.styles.ts

@@ -3,6 +3,7 @@ import { styled } from '@rango-dev/ui';
 export const Container = styled('div', {
   padding: '$10',
   width: '350px',
+  maxWidth: '90vw',
   minHeight: '150px',
 });
 

package/src/components/NotificationContent/NotificationContent.tsx

@@ -14,6 +14,7 @@ import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
+import { areTokensEqual } from '../../utils/wallets';
 
 import { Container, Images, List } from './NotificationContent.styles';
 import { NotificationNotFound } from './NotificationNotFound';
@@ -41,50 +42,40 @@ export function NotificationContent() {
       {sortedNotification.length ? (
         <List>
           {sortedNotification.map((notificationItem) => {
-            const fromToken = tokens.find(
-              (tokenItem) =>
-                tokenItem.address ===
-                  notificationItem.route.from.tokenAddress &&
-                tokenItem.blockchain ===
-                  notificationItem.route.from.blockchain &&
-                tokenItem.symbol === notificationItem.route.from.tokenSymbol
+            const { route, requestId, event } = notificationItem;
+            const fromToken = tokens.find((tokenItem) =>
+              areTokensEqual(tokenItem, route.from)
             );
 
             const fromBlockchain = blockchains.find(
-              (blockchainItem) =>
-                blockchainItem.name === notificationItem.route.from.blockchain
+              (blockchainItem) => blockchainItem.name === route.from.blockchain
             );
 
-            const toToken = tokens.find(
-              (tokenItem) =>
-                tokenItem.address === notificationItem.route.to.tokenAddress &&
-                tokenItem.blockchain === notificationItem.route.to.blockchain &&
-                tokenItem.symbol === notificationItem.route.to.tokenSymbol
+            const toToken = tokens.find((tokenItem) =>
+              areTokensEqual(tokenItem, route.to)
             );
 
             const toBlockchain = blockchains.find(
-              (blockchainItem) =>
-                blockchainItem.name === notificationItem.route.to.blockchain
+              (blockchainItem) => blockchainItem.name === route.to.blockchain
             );
 
             return (
               <ListItemButton
-                key={notificationItem.requestId}
-                onClick={() => handleOnClick(notificationItem.requestId)}
+                key={requestId}
+                onClick={() => handleOnClick(requestId)}
                 title={
                   <Typography
                     variant="body"
                     size="small"
                     color={
-                      notificationItem.event.messageSeverity ===
-                      EventSeverity.WARNING
+                      event.messageSeverity === EventSeverity.WARNING
                         ? '$foreground'
                         : '$neutral700'
                     }>
-                    {i18n.t(notificationItem.event.message)}
+                    {i18n.t(event.message)}
                   </Typography>
                 }
-                id={notificationItem.requestId}
+                id={requestId}
                 start={
                   <Images>
                     <div className="from-chain-token">

package/src/components/NotificationContent/NotificationNotFound.tsx

@@ -10,7 +10,7 @@ export function NotificationNotFound() {
       <NoNotificationIcon color="secondary" size={26} />
       <Divider size={12} />
       <Typography variant="body" size="medium" color="neutral700">
-        {i18n.t('You have no notification')}
+        {i18n.t('There are no notifications.')}
       </Typography>
     </NotFoundContainer>
   );

package/src/components/Quote/Quote.tsx

@@ -13,7 +13,7 @@ import {
   Typography,
 } from '@rango-dev/ui';
 import BigNumber from 'bignumber.js';
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import {
   PERCENTAGE_CHANGE_MAX_DECIMALS,
@@ -42,7 +42,6 @@ import {
   basicInfoStyles,
   ContainerInfoOutput,
   Content,
-  EXPANDABLE_QUOTE_TRANSITION_DURATION,
   FrameIcon,
   HorizontalSeparator,
   QuoteContainer,
@@ -69,7 +68,6 @@ export function Quote(props: QuoteProps) {
 
   const [expanded, setExpanded] = useState(props.expanded);
   const quoteRef = useRef<HTMLButtonElement | null>(null);
-  const prevExpanded = useRef(expanded);
   const roundedInput = numberToString(
     input.value,
     TOKEN_AMOUNT_MIN_DECIMALS,
@@ -190,7 +188,7 @@ export function Quote(props: QuoteProps) {
                 title={
                   error?.type === QuoteErrorType.BRIDGE_LIMIT
                     ? error?.recommendation
-                    : i18n.t('Slippage Error:')
+                    : i18n.t(`Slippage ${stepHasError ? 'Error' : 'Warning'}:`)
                 }
                 footer={
                   <FooterAlert>
@@ -263,14 +261,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(() => {
-        quoteRef?.current?.scrollIntoView({ behavior: 'smooth' });
-      }, EXPANDABLE_QUOTE_TRANSITION_DURATION);
-    }
-    prevExpanded.current = expanded;
-  }, [expanded, prevExpanded]);
 
   return (
     <>

package/src/components/Quote/QuoteCostDetails.tsx

@@ -7,7 +7,6 @@ import {
   CloseIcon,
   Divider,
   IconButton,
-  Modal,
   QuoteCost,
   Tooltip,
   Typography,
@@ -36,6 +35,7 @@ import {
   getTotalFeesInUsd,
   getUsdFee,
 } from '../../utils/swap';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
 import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
 
@@ -96,7 +96,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
         tooltipContainer={container}
       />
 
-      <Modal
+      <WatermarkedModal
         container={container}
         open={open}
         header={
@@ -212,7 +212,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
             </CustomCollapsible>
           )}
         </ModalContainer>
-      </Modal>
+      </WatermarkedModal>
     </>
   );
 }

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -5,7 +5,6 @@ import {
   Button,
   Divider,
   MessageBox,
-  Modal,
   Typography,
   WarningIcon,
 } from '@rango-dev/ui';
@@ -22,6 +21,7 @@ import {
 } from '../../constants/routing';
 import { getContainer } from '../../utils/common';
 import { numberToString } from '../../utils/numbers';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { QuoteErrorsModalItem } from './QuoteErrorsModalItem';
 import { Flex } from './QuoteWarningsAndErrors.styles';
@@ -37,6 +37,7 @@ type Props = {
 export function HighValueLossWarningModal(props: Props) {
   const { open, onClose, onConfirm, warning, confirmationDisabled } = props;
   const type = warning.warningLevel === 'high' ? 'error' : 'warning';
+
   const highValueLossData = [
     {
       title: i18n.t('Swapping'),
@@ -74,7 +75,7 @@ export function HighValueLossWarningModal(props: Props) {
   ];
 
   return (
-    <Modal open={open} onClose={onClose} container={getContainer()}>
+    <WatermarkedModal open={open} onClose={onClose} container={getContainer()}>
       <MessageBox
         type={type}
         title={errorMessages().highValueLossError.impactTitle}
@@ -104,6 +105,6 @@ export function HighValueLossWarningModal(props: Props) {
         onClick={onConfirm}>
         {errorMessages().highValueLossError.confirmMessage}
       </Button>
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -4,7 +4,7 @@ import type {
 } from '../../types';
 
 import { i18n } from '@lingui/core';
-import { Button, Divider, MessageBox, Modal, Typography } from '@rango-dev/ui';
+import { Button, Divider, MessageBox, Typography } from '@rango-dev/ui';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -12,6 +12,7 @@ import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useAppStore } from '../../store/AppStore';
 import { QuoteWarningType } from '../../types';
 import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 type PropsTypes = {
   open: boolean;
@@ -26,8 +27,9 @@ export function SlippageWarningModal(props: PropsTypes) {
   const { open, onClose, onConfirm, warning, confirmationDisabled } = props;
   const navigate = useNavigate();
   const userSlippage = customSlippage ?? slippage;
+
   return (
-    <Modal
+    <WatermarkedModal
       anchor="bottom"
       open={open}
       prefix={
@@ -74,6 +76,6 @@ export function SlippageWarningModal(props: PropsTypes) {
           {i18n.t('Confirm anyway')}
         </Button>
       </MessageBox>
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -1,10 +1,11 @@
 import type { UnknownPriceWarning } from '../../types';
 
-import { Button, Divider, MessageBox, Modal, WarningIcon } from '@rango-dev/ui';
+import { Button, Divider, MessageBox, WarningIcon } from '@rango-dev/ui';
 import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
 import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 type Props = {
   open: boolean;
@@ -16,9 +17,8 @@ type Props = {
 
 export function UnknownPriceWarningModal(props: Props) {
   const { open, onClose, onConfirm, confirmationDisabled } = props;
-
   return (
-    <Modal open={open} onClose={onClose} container={getContainer()}>
+    <WatermarkedModal open={open} onClose={onClose} container={getContainer()}>
       <MessageBox
         type="warning"
         title={errorMessages().unknownPriceError.impactTitle}
@@ -35,6 +35,6 @@ export function UnknownPriceWarningModal(props: Props) {
         onClick={onConfirm}>
         {errorMessages().unknownPriceError.confirmMessage}
       </Button>
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -5,15 +5,15 @@ import {
   Button,
   Divider,
   MessageBox,
-  Modal,
   TokenAmount,
   Typography,
 } from '@rango-dev/ui';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
 import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
@@ -33,10 +33,12 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const navigate = useNavigate();
 
   return (
-    <Modal
+    <WatermarkedModal
       open={open}
       onClose={onClose}
-      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
       {status === 'success' ? (
         <MessageBox type="success" title={i18n.t('Swap Successful')}>
           <TokenAmount
@@ -105,6 +107,6 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           {i18n.t('See Details')}
         </Typography>
       </Button>
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -1,8 +1,8 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
 
-import { MessageBox, Wallet } from '@rango-dev/ui';
+import { MessageBox, Wallet, WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { getContainer } from '../../utils/common';
 import { mapStatusToWalletState } from '../../utils/wallets';
@@ -18,14 +18,40 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
     showWalletButton,
     walletButtonDisabled,
   } = props;
-  const { connect, getWalletInfo, state } = useWallets();
+  const { connect, getWalletInfo, state, disconnect } = useWallets();
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
     ? mapStatusToWalletState(state(walletType))
     : null;
+  const componentWillUnmount = useRef(false);
+
   const walletInfo = walletType ? getWalletInfo(walletType) : null;
   const shouldShowWallet =
     showWalletButton && !!walletType && !!walletState && !!walletInfo;
+
+  /*
+   * The order of useEffects is crucial.
+   * 1- The first useEffect for componentWillUnmount sets its value to true
+   */
+  useEffect(() => {
+    return () => {
+      componentWillUnmount.current = true;
+    };
+  }, []);
+
+  // 2- The second useEffect checks if componentWillUnmount is true then it disconnects connecting wallet
+  useEffect(() => {
+    return () => {
+      if (
+        componentWillUnmount.current &&
+        walletType &&
+        walletState === WalletState.CONNECTING
+      ) {
+        void disconnect(walletType);
+      }
+    };
+  }, [walletState]);
+
   return (
     <>
       <MessageBox type={type} title={title} description={message} />

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -1,10 +1,10 @@
 import type { ModalPropTypes } from './SwapDetailsModal.types';
 
-import { Modal } from '@rango-dev/ui';
 import { PendingSwapNetworkStatus } from 'rango-types';
 import React from 'react';
 
-import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { CancelContent } from './SwapDetailsModal.Cancel';
 import { DeleteContent } from './SwapDetailsModal.Delete';
@@ -28,10 +28,12 @@ export function SwapDetailsModal(props: ModalPropTypes) {
     state === PendingSwapNetworkStatus.NetworkChanged;
 
   return (
-    <Modal
+    <WatermarkedModal
       open={!!state}
       onClose={onClose}
-      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
       {showWalletStateContent && (
         <WalletStateContent
           type={modalNetworkValues[state].type}
@@ -50,6 +52,6 @@ export function SwapDetailsModal(props: ModalPropTypes) {
       {state === 'cancel' && (
         <CancelContent onClose={onClose} onCancel={onCancel} />
       )}
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/TokenList/TokenList.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { PropTypes, RenderDescProps } from './TokenList.types';
 import type { Token } from 'rango-sdk';
-import type { CommonProps } from 'react-window';
 
 import { i18n } from '@lingui/core';
 import {
@@ -16,7 +15,7 @@ import {
   Typography,
   VirtualizedList,
 } from '@rango-dev/ui';
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
@@ -100,20 +99,6 @@ export function TokenList(props: PropTypes) {
   const { getBalanceFor, loading: loadingWallet } = useWalletsStore();
   const { isTokenPinned } = useAppStore();
 
-  // eslint-disable-next-line react/display-name
-  const innerElementType: React.FC<CommonProps> = forwardRef((render, ref) => {
-    return (
-      <div
-        {...render}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ref={ref as any}
-        style={{
-          ...render.style,
-          height: `${parseFloat(render.style?.height as string) + 8 * 2}px`,
-        }}
-      />
-    );
-  });
   const loadNextPage = () => {
     setTokens(list.slice(0, tokens.length + PAGE_SIZE));
   };
@@ -140,7 +125,8 @@ export function TokenList(props: PropTypes) {
     }
     return (
       <VirtualizedList
-        Item={({ index, style }) => {
+        endReached={hasNextPage ? loadNextPage : undefined}
+        itemContent={(index) => {
           const token = tokens[index];
           const tokenBalance = formatBalance(getBalanceFor(token));
           const address = token.address || '';
@@ -171,12 +157,10 @@ export function TokenList(props: PropTypes) {
           return (
             <div
               style={{
-                ...style,
                 paddingRight: 5,
               }}>
               <ListItemButton
                 style={{
-                  height: style?.height,
                   width: '100%',
                   overflow: 'hidden',
                 }}
@@ -261,11 +245,7 @@ export function TokenList(props: PropTypes) {
             </div>
           );
         }}
-        hasNextPage={hasNextPage}
-        itemCount={tokens.length}
-        loadNextPage={loadNextPage}
-        innerElementType={innerElementType}
-        size={60}
+        totalCount={tokens.length}
         key={`${selectedBlockchain}-${searchedFor}`}
       />
     );