@rango-dev/widget-embedded 0.21.1-next.7 → 0.21.1-next.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.21.1-next.7",
+  "version": "0.21.1-next.9",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/CustomCollapsible/CustomCollapsible.tsx

@@ -1,12 +1,11 @@
 import type { PropTypes } from './CustomCollapsible.types';
 import type { PropsWithChildren } from 'react';
 
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 
 import {
   CollapsibleContent,
   CollapsibleRoot,
-  EXPANDABLE_TRANSITION_DURATION,
   Trigger,
 } from './CustomCollapsible.styles';
 
@@ -22,14 +21,6 @@ export function CustomCollapsible(props: PropsWithChildren<PropTypes>) {
   } = 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}

package/src/components/HistoryGroupedList/HistoryGroupedList.tsx

@@ -4,6 +4,7 @@ import { i18n } from '@lingui/core';
 import {
   Divider,
   GroupedVirtualizedList,
+  Skeleton,
   SwapListItem,
   Typography,
 } from '@rango-dev/ui';
@@ -50,39 +51,29 @@ export function HistoryGroupedList(props: PropTypes) {
   }, [isLoading, loadMore]);
 
   if (isLoading) {
-    const swaps = [{}, {}];
-
-    const loadingGroups = [
-      {
-        title: i18n.t('Today'),
-        swaps,
-      },
-      {
-        title: i18n.t('This month'),
-        swaps,
-      },
-    ];
+    // The number of items presented in each group.
+    const swaps = [1, 2];
+    const loadingGroups = [swaps, swaps];
     return (
       <>
-        {loadingGroups.map((group) => (
-          <Group key={group.title}>
-            <Time>
-              <Typography
-                variant="label"
-                size="medium"
-                className={groupStyles()}>
-                {group.title}
-              </Typography>
-            </Time>
-            <Divider size={4} />
-            <SwapList>
-              {group.swaps.map((_, index) => {
-                const key = index + group.title;
-                return <SwapListItem isLoading={true} key={key} />;
-              })}
-            </SwapList>
-          </Group>
-        ))}
+        {loadingGroups.map((group, index) => {
+          const key = index;
+          return (
+            <Group key={key}>
+              <Time>
+                <Skeleton variant="text" width={60} size="small" />
+                <Divider size={16} />
+              </Time>
+              <Divider size={4} />
+              <SwapList>
+                {group.map((_, index) => {
+                  const key = index;
+                  return <SwapListItem isLoading={true} key={key} />;
+                })}
+              </SwapList>
+            </Group>
+          );
+        })}
       </>
     );
   }
@@ -111,6 +102,9 @@ export function HistoryGroupedList(props: PropTypes) {
       }}
       itemContent={(index, groupIndex) => {
         const swap = swaps[index];
+        if (!swap) {
+          return null;
+        }
         const firstStep = swap.steps[0];
         const lastStep = swap.steps[swap.steps.length - 1];
         return (

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,
@@ -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 (
     <>