@rango-dev/widget-embedded 0.21.1-next.3 → 0.21.1-next.4

package/dist/utils/date.d.ts

@@ -1,3 +1,3 @@
-import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
+import type { GroupBy } from '../components/HistoryGroupedList/HistoryGroupedList.types';
 export declare const groupSwapsByDate: GroupBy;
 //# sourceMappingURL=date.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2CAA2C,CAAC;AAMzE,eAAO,MAAM,gBAAgB,EAAE,OAmE9B,CAAC"}
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2DAA2D,CAAC;AAMzF,eAAO,MAAM,gBAAgB,EAAE,OA0E9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.21.1-next.3",
+  "version": "0.21.1-next.4",
   "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.26.0",
     "@rango-dev/queue-manager-react": "^0.25.0",
-    "@rango-dev/ui": "^0.27.1-next.1",
+    "@rango-dev/ui": "^0.27.1-next.3",
     "@rango-dev/wallets-react": "^0.12.0",
     "@rango-dev/wallets-shared": "^0.26.0",
     "bignumber.js": "^9.1.1",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/HistoryGroupedList/HistoryGroupedList.helpers.ts

@@ -0,0 +1,17 @@
+/*
+ * The calculateGroupsSoFar Slices the total groups into the groups which contain the items so far.
+ * For example, if you have [10, 10, 10, 10] groups in total,
+ * slicing them to 23 will result in [10, 10, 3] :
+ * https://virtuoso.dev/grouped-with-load-on-demand/
+ */
+export function calculateGroupsSoFar(totalGroups: number[], count: number) {
+  const groups: number[] = [];
+  let index = 0;
+  do {
+    const group = totalGroups[index];
+    groups.push(Math.min(group, count));
+    count -= group;
+    index++;
+  } while (count > 0 && index <= totalGroups.length);
+  return groups;
+}

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

@@ -2,10 +2,19 @@ import { css, darkTheme, styled } from '@rango-dev/ui';
 
 export const groupStyles = css();
 
+export const SwapItemContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '$5',
+});
+
 export const Group = styled('div', {
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
+  backgroundColor: '$background',
+  padding: '$10 $5 0 $5',
   [`& .${groupStyles}`]: {
     $$color: '$colors$neutral600',
     [`.${darkTheme} &`]: {

package/src/components/HistoryGroupedList/HistoryGroupedList.tsx

@@ -0,0 +1,168 @@
+import type { PropTypes } from './HistoryGroupedList.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Divider,
+  GroupedVirtualizedList,
+  SwapListItem,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../../constants/routing';
+import { getContainer } from '../../utils/common';
+import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+
+import { calculateGroupsSoFar } from './HistoryGroupedList.helpers';
+import {
+  Group,
+  groupStyles,
+  SwapItemContainer,
+  SwapList,
+  Time,
+} from './HistoryGroupedList.styles';
+
+const ITEMS_PER_PAGE = 10;
+
+export function HistoryGroupedList(props: PropTypes) {
+  const { list, onSwapClick, groupBy, isLoading } = props;
+  const [currentGroupCounts, setCurrentGroupCounts] = useState<number[]>([]);
+  const loadedItems = useRef(0);
+  const { swaps, groupCounts, groups } = groupBy(list);
+
+  const calculateGroups = useCallback(calculateGroupsSoFar, []);
+
+  const loadMore = useCallback(() => {
+    const remainedItems = list.length - loadedItems.current;
+    if (remainedItems) {
+      loadedItems.current += Math.min(remainedItems, ITEMS_PER_PAGE);
+      setCurrentGroupCounts(calculateGroups(groupCounts, loadedItems.current));
+    }
+  }, [list.length]);
+
+  useEffect(() => {
+    if (!isLoading) {
+      loadMore();
+    }
+  }, [isLoading, loadMore]);
+
+  if (isLoading) {
+    const swaps = [{}, {}];
+
+    const loadingGroups = [
+      {
+        title: i18n.t('Today'),
+        swaps,
+      },
+      {
+        title: i18n.t('This month'),
+        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>
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <GroupedVirtualizedList
+      endReached={() => {
+        if (loadedItems.current < list.length) {
+          loadMore();
+        }
+      }}
+      groupCounts={currentGroupCounts}
+      groupContent={(index) => {
+        return (
+          <Group>
+            <Time>
+              <Typography
+                variant="label"
+                size="medium"
+                className={groupStyles()}>
+                {groups[index]}
+              </Typography>
+            </Time>
+          </Group>
+        );
+      }}
+      itemContent={(index, groupIndex) => {
+        const swap = swaps[index];
+        const firstStep = swap.steps[0];
+        const lastStep = swap.steps[swap.steps.length - 1];
+        return (
+          <SwapItemContainer key={swap.requestId}>
+            <SwapListItem
+              requestId={swap.requestId}
+              creationTime={swap.creationTime}
+              status={swap.status}
+              onClick={onSwapClick}
+              tooltipContainer={getContainer()}
+              onlyShowTime={groups[groupIndex] === i18n.t('Today')}
+              swapTokenData={{
+                from: {
+                  token: {
+                    image: firstStep.fromLogo,
+                    displayName: firstStep.fromSymbol,
+                  },
+                  blockchain: {
+                    image: firstStep.fromBlockchainLogo || '',
+                  },
+                  amount: numberToString(
+                    swap.inputAmount,
+                    TOKEN_AMOUNT_MIN_DECIMALS,
+                    TOKEN_AMOUNT_MAX_DECIMALS
+                  ),
+                  realAmount: formatTooltipNumbers(swap.inputAmount),
+                },
+                to: {
+                  token: {
+                    image: lastStep.toLogo,
+                    displayName: lastStep.toSymbol,
+                  },
+                  blockchain: {
+                    image: lastStep.toBlockchainLogo || '',
+                  },
+                  amount: numberToString(
+                    lastStep.outputAmount ||
+                      lastStep.expectedOutputAmountHumanReadable ||
+                      '',
+                    TOKEN_AMOUNT_MIN_DECIMALS,
+                    TOKEN_AMOUNT_MAX_DECIMALS
+                  ),
+                  realAmount: formatTooltipNumbers(
+                    lastStep.outputAmount ||
+                      lastStep.expectedOutputAmountHumanReadable
+                  ),
+                },
+              }}
+            />
+          </SwapItemContainer>
+        );
+      }}
+    />
+  );
+}

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/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}`}
       />
     );

package/src/pages/HistoryPage.tsx

@@ -6,15 +6,15 @@ import { Divider, NotFound, styled } from '@rango-dev/ui';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { HistoryGroupedList } from '../components/HistoryGroupedList';
+import { NotFoundContainer } from '../components/HistoryGroupedList/HistoryGroupedList.styles';
 import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
-import { SwapsGroup } from '../components/SwapsGroup';
-import { NotFoundContainer } from '../components/SwapsGroup/SwapsGroup.styles';
 import { groupSwapsByDate } from '../utils/date';
 import { containsText } from '../utils/numbers';
 import { getPendingSwaps } from '../utils/queue';
 
-const SwapsGroupContainer = styled('div', {
+const HistoryGroupedListContainer = styled('div', {
   overflowY: 'visible',
   width: '100%',
   display: 'flex',
@@ -77,7 +77,7 @@ export function HistoryPage() {
           value={searchedFor}
         />
         <Divider size="16" />
-        <SwapsGroupContainer>
+        <HistoryGroupedListContainer>
           {isEmpty && (
             <NotFoundContainer>
               <Divider size={32} />
@@ -90,14 +90,14 @@ export function HistoryPage() {
             </NotFoundContainer>
           )}
           {!isEmpty && (
-            <SwapsGroup
+            <HistoryGroupedList
               list={filteredList}
               onSwapClick={navigate}
               groupBy={groupSwapsByDate}
               isLoading={loading}
             />
           )}
-        </SwapsGroupContainer>
+        </HistoryGroupedListContainer>
       </PageContainer>
     </Layout>
   );

package/src/utils/date.ts

@@ -1,4 +1,4 @@
-import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
+import type { GroupBy } from '../components/HistoryGroupedList/HistoryGroupedList.types';
 import type { PendingSwap } from 'rango-types';
 
 import { i18n } from '@lingui/core';
@@ -70,5 +70,12 @@ export const groupSwapsByDate: GroupBy = (swaps) => {
     }
   });
 
-  return Array.from(output.values());
+  const groupedSwaps = Array.from(output.values()).filter(
+    (item) => item.swaps.length > 0
+  );
+  const items = groupedSwaps.flatMap((group) => group.swaps);
+  const groupCounts = groupedSwaps.map((group) => group.swaps.length);
+  const groups = groupedSwaps.map((group) => group.title);
+
+  return { swaps: items, groupCounts, groups };
 };

package/dist/components/SwapsGroup/SwapsGroup.d.ts

@@ -1,4 +0,0 @@
-import type { PropTypes } from './SwapsGroup.types';
-import React from 'react';
-export declare function SwapsGroup(props: PropTypes): React.JSX.Element;
-//# sourceMappingURL=SwapsGroup.d.ts.map

package/dist/components/SwapsGroup/SwapsGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwapsGroup.d.ts","sourceRoot":"","sources":["../../../src/components/SwapsGroup/SwapsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,qBA6H1C"}

package/dist/components/SwapsGroup/SwapsGroup.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwapsGroup.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SwapsGroup/SwapsGroup.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAAQ,CAAC;AAEjC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAWhB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIf,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAInB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAK5B,CAAC"}

package/dist/components/SwapsGroup/SwapsGroup.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwapsGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/SwapsGroup/SwapsGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB,EAAE,CAAC;AAEJ,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/SwapsGroup/index.d.ts

@@ -1,2 +0,0 @@
-export { SwapsGroup } from './SwapsGroup';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/SwapsGroup/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwapsGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -1,141 +0,0 @@
-import type { PropTypes } from './SwapsGroup.types';
-
-import { i18n } from '@lingui/core';
-import { Divider, SwapListItem, Typography } from '@rango-dev/ui';
-import React from 'react';
-
-import {
-  TOKEN_AMOUNT_MAX_DECIMALS,
-  TOKEN_AMOUNT_MIN_DECIMALS,
-} from '../../constants/routing';
-import { getContainer } from '../../utils/common';
-import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
-
-import { Group, groupStyles, SwapList, Time } from './SwapsGroup.styles';
-
-export function SwapsGroup(props: PropTypes) {
-  const { list, onSwapClick, groupBy, isLoading } = props;
-  const groups = groupBy ? groupBy(list) : [{ title: 'History', swaps: list }];
-
-  if (isLoading) {
-    const swaps = [{}, {}];
-
-    const loadingGroups = [
-      {
-        title: i18n.t('Today'),
-        swaps,
-      },
-      {
-        title: i18n.t('This month'),
-        swaps,
-      },
-    ];
-    return (
-      <>
-        {loadingGroups.map((group) => (
-          <React.Fragment key={group.title}>
-            <Group>
-              <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 (
-                    <React.Fragment key={key}>
-                      <SwapListItem isLoading={true} />
-                    </React.Fragment>
-                  );
-                })}
-              </SwapList>
-            </Group>
-          </React.Fragment>
-        ))}
-      </>
-    );
-  }
-
-  return (
-    <>
-      {groups
-        .filter((group) => group.swaps.length > 0)
-        .map((group) => (
-          <React.Fragment key={group.title}>
-            <Group>
-              <Time>
-                <Typography
-                  variant="label"
-                  size="medium"
-                  className={groupStyles()}>
-                  {group.title}
-                </Typography>
-              </Time>
-              <Divider size={4} />
-              <SwapList>
-                {group.swaps.map((swap) => {
-                  const firstStep = swap.steps[0];
-
-                  const lastStep = swap.steps[swap.steps.length - 1];
-                  return (
-                    <React.Fragment key={swap.requestId}>
-                      <SwapListItem
-                        requestId={swap.requestId}
-                        creationTime={swap.creationTime}
-                        status={swap.status}
-                        onClick={onSwapClick}
-                        tooltipContainer={getContainer()}
-                        onlyShowTime={group.title === i18n.t('Today')}
-                        swapTokenData={{
-                          from: {
-                            token: {
-                              image: firstStep.fromLogo,
-                              displayName: firstStep.fromSymbol,
-                            },
-                            blockchain: {
-                              image: firstStep.fromBlockchainLogo || '',
-                            },
-                            amount: numberToString(
-                              swap.inputAmount,
-                              TOKEN_AMOUNT_MIN_DECIMALS,
-                              TOKEN_AMOUNT_MAX_DECIMALS
-                            ),
-                            realAmount: formatTooltipNumbers(swap.inputAmount),
-                          },
-                          to: {
-                            token: {
-                              image: lastStep.toLogo,
-                              displayName: lastStep.toSymbol,
-                            },
-                            blockchain: {
-                              image: lastStep.toBlockchainLogo || '',
-                            },
-                            amount: numberToString(
-                              lastStep.outputAmount ||
-                                lastStep.expectedOutputAmountHumanReadable ||
-                                '',
-                              TOKEN_AMOUNT_MIN_DECIMALS,
-                              TOKEN_AMOUNT_MAX_DECIMALS
-                            ),
-                            realAmount: formatTooltipNumbers(
-                              lastStep.outputAmount ||
-                                lastStep.expectedOutputAmountHumanReadable
-                            ),
-                          },
-                        }}
-                      />
-                    </React.Fragment>
-                  );
-                })}
-              </SwapList>
-            </Group>
-          </React.Fragment>
-        ))}
-    </>
-  );
-}

package/src/components/SwapsGroup/index.ts

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