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

package/dist/types/notification.d.ts

@@ -2,13 +2,13 @@ import { type Route, type RouteEvent, type Step, type StepEvent } from '@rango-d
 type NotificationRoute = {
     from: {
         blockchain: Step['fromBlockchain'];
-        tokenSymbol: Step['fromSymbol'];
-        tokenAddress: Step['fromSymbolAddress'];
+        symbol: Step['fromSymbol'];
+        address: Step['fromSymbolAddress'];
     };
     to: {
         blockchain: Step['toBlockchain'];
-        tokenSymbol: Step['toSymbol'];
-        tokenAddress: Step['toSymbolAddress'];
+        symbol: Step['toSymbol'];
+        address: Step['toSymbolAddress'];
     };
 };
 export type Notification = Pick<Route, 'requestId'> & {

package/dist/types/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../src/types/notification.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EACV,KAAK,UAAU,EACf,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,uCAAuC,CAAC;AAE/C,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACnC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,YAAY,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACzC,CAAC;IACF,EAAE,EAAE;QACF,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACjC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC9B,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACvC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG;IACpD,KAAK,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../src/types/notification.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EACV,KAAK,UAAU,EACf,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,uCAAuC,CAAC;AAE/C,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACnC,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3B,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACpC,CAAC;IACF,EAAE,EAAE;QACF,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACjC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG;IACpD,KAAK,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC"}

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/dist/utils/wallets.d.ts

@@ -18,7 +18,7 @@ export declare const isExperimentalChain: (blockchains: BlockchainMeta[], wallet
 export declare const getKeplrCompatibleConnectedWallets: (selectableWallets: Wallet[]) => WalletType[];
 export declare function formatBalance(balance: Balance | null): Balance | null;
 export declare function sortTokens(tokens: Token[], getBalanceFor: (token: Token) => Balance | null, isTokenPinned: (token: Token) => boolean): Token[];
-export declare function tokensAreEqual(tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null, tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null): boolean;
+export declare function areTokensEqual(tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null, tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null): boolean;
 export declare function sortWalletsBasedOnConnectionState(wallets: ModalWalletInfo[]): ModalWalletInfo[];
 export declare function getConciseAddress(address: string, maxChars?: number, ellipsisLength?: number): string;
 export declare function getAddress({ chain, connectedWallets, walletType, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.21.1-next.2",
+  "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",

package/readme.md

@@ -1,3 +1,4 @@
 # @rango-dev/widget-embedded
 
 Rango Embedded Widget
+

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/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/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/hooks/useSwapInput.ts

@@ -11,7 +11,7 @@ import { isPositiveNumber } from '../utils/numbers';
 import { generateQuoteWarnings } from '../utils/quote';
 import { isFeatureEnabled } from '../utils/settings';
 import { createQuoteRequestBody } from '../utils/swap';
-import { tokensAreEqual } from '../utils/wallets';
+import { areTokensEqual } from '../utils/wallets';
 
 import {
   handleQuoteErrors,
@@ -68,7 +68,7 @@ export function useSwapInput(): UseSwapInput {
   const tokensValueInvalid = !fromToken || !toToken;
   const shouldSkipRequest =
     tokensValueInvalid ||
-    tokensAreEqual(fromToken, toToken) ||
+    areTokensEqual(fromToken, toToken) ||
     !isPositiveNumber(inputAmount);
 
   const resetState = (loading: boolean) => {

package/src/hooks/useSyncStoresWithConfig.ts

@@ -8,7 +8,7 @@ import {
   isBlockchainExcludedInConfig,
   isTokenExcludedInConfig,
 } from '../utils/configs';
-import { tokensAreEqual } from '../utils/wallets';
+import { areTokensEqual } from '../utils/wallets';
 
 export function useSyncStoresWithConfig() {
   const {
@@ -50,7 +50,7 @@ export function useSyncStoresWithConfig() {
         (chain) => chain.name === config?.from?.blockchain
       );
       const token = tokens.find((t) =>
-        tokensAreEqual(t, config?.from?.token || null)
+        areTokensEqual(t, config?.from?.token || null)
       );
 
       if (chain || (!chain && prevConfigFromBlockchain.current)) {
@@ -99,7 +99,7 @@ export function useSyncStoresWithConfig() {
         (chain) => chain.name === config?.to?.blockchain
       );
       const token = tokens.find((t) =>
-        tokensAreEqual(t, config?.to?.token || null)
+        areTokensEqual(t, config?.to?.token || null)
       );
 
       if (chain || (!chain && prevConfigToBlockchain.current)) {

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/store/notification.ts

@@ -34,13 +34,13 @@ export const useNotificationStore = createSelectors(
             route: {
               from: {
                 blockchain: fromStep.fromBlockchain,
-                tokenAddress: fromStep.fromSymbolAddress,
-                tokenSymbol: fromStep.fromSymbol,
+                address: fromStep.fromSymbolAddress,
+                symbol: fromStep.fromSymbol,
               },
               to: {
                 blockchain: toStep.toBlockchain,
-                tokenSymbol: toStep.toSymbol,
-                tokenAddress: toStep.toSymbolAddress,
+                address: toStep.toSymbolAddress,
+                symbol: toStep.toSymbol,
               },
             },
           };

package/src/store/slices/data.ts

@@ -8,7 +8,7 @@ import { httpService as sdk } from '../../services/httpService';
 import { containsText } from '../../utils/common';
 import { isTokenExcludedInConfig } from '../../utils/configs';
 import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
-import { tokensAreEqual } from '../../utils/wallets';
+import { areTokensEqual } from '../../utils/wallets';
 
 type BlockchainOptions = {
   type?: 'source' | 'destination';
@@ -163,7 +163,7 @@ export const createDataSlice: StateCreator<
         ? get().config.from?.pinnedTokens
         : get().config.to?.pinnedTokens;
     const pinned = !!pinnedTokens?.some((pinnedToken) =>
-      tokensAreEqual(pinnedToken, token)
+      areTokensEqual(pinnedToken, token)
     );
     return pinned;
   },

package/src/types/notification.ts

@@ -8,13 +8,13 @@ import {
 type NotificationRoute = {
   from: {
     blockchain: Step['fromBlockchain'];
-    tokenSymbol: Step['fromSymbol'];
-    tokenAddress: Step['fromSymbolAddress'];
+    symbol: Step['fromSymbol'];
+    address: Step['fromSymbolAddress'];
   };
   to: {
     blockchain: Step['toBlockchain'];
-    tokenSymbol: Step['toSymbol'];
-    tokenAddress: Step['toSymbolAddress'];
+    symbol: Step['toSymbol'];
+    address: Step['toSymbolAddress'];
   };
 };
 

package/src/utils/configs.ts

@@ -3,7 +3,7 @@ import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 
 import { RANGO_PUBLIC_API_KEY } from '../constants';
 
-import { tokensAreEqual } from './wallets';
+import { areTokensEqual } from './wallets';
 
 export interface Configs {
   API_KEY: string;
@@ -57,10 +57,10 @@ export const isTokenExcludedInConfig = (
   let result = false;
   if (tokensConfig && token) {
     if (Array.isArray(tokensConfig)) {
-      result = !tokensConfig.some((asset) => tokensAreEqual(asset, token));
+      result = !tokensConfig.some((asset) => areTokensEqual(asset, token));
     } else if (!Array.isArray(tokensConfig) && tokensConfig[token.blockchain]) {
       result = tokensConfig[token.blockchain].tokens.some((asset) =>
-        tokensAreEqual(asset, token)
+        areTokensEqual(asset, token)
       );
       const isExcluded = tokensConfig[token.blockchain].isExcluded;
       return (!isExcluded && !result) || (isExcluded && result);

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/src/utils/meta.ts

@@ -1,6 +1,6 @@
 import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
-import { tokensAreEqual } from './wallets';
+import { areTokensEqual } from './wallets';
 
 export function getBlockchainDisplayNameFor(
   blockchainName: string,
@@ -25,7 +25,7 @@ export function getSwapperDisplayName(
 }
 
 export function findToken(t: Asset, tokens: Token[]) {
-  return tokens.find((token) => tokensAreEqual(token, t)) ?? null;
+  return tokens.find((token) => areTokensEqual(token, t)) ?? null;
 }
 
 export function findBlockchain(name: string, blockchains: BlockchainMeta[]) {