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

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuCnD,wBAAgB,IAAI,sBAyPnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuCnD,wBAAgB,IAAI,sBAwPnB"}

package/dist/store/slices/config.d.ts

@@ -1,9 +1,17 @@
 import type { WidgetConfig } from '../../types';
 import type { StateCreatorWithInitialData } from '../app';
 export declare const DEFAULT_CONFIG: WidgetConfig;
+interface IframeConfigs {
+    clientUrl?: string;
+}
 export type ConfigSlice = {
     config: WidgetConfig;
     updateConfig: (config: WidgetConfig) => void;
+    iframe: {
+        clientUrl?: string;
+    };
+    updateIframe: <K extends keyof IframeConfigs>(name: K, value: IframeConfigs[K]) => void;
 };
 export declare const createConfigSlice: StateCreatorWithInitialData<WidgetConfig, ConfigSlice, ConfigSlice>;
+export {};
 //# sourceMappingURL=config.d.ts.map

package/dist/store/slices/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/store/slices/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,eAAO,MAAM,cAAc,EAAE,YAK5B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,YAAY,CAAC;IAErB,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,2BAA2B,CACzD,YAAY,EACZ,WAAW,EACX,WAAW,CAiBZ,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/store/slices/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,eAAO,MAAM,cAAc,EAAE,YAM5B,CAAC;AAEF,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,MAAM,MAAM,WAAW,GAAG;IAExB,MAAM,EAAE,YAAY,CAAC;IACrB,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAG7C,MAAM,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,YAAY,EAAE,CAAC,CAAC,SAAS,MAAM,aAAa,EAC1C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KACpB,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,2BAA2B,CACzD,YAAY,EACZ,WAAW,EACX,WAAW,CA6BZ,CAAC"}

package/dist/store/ui.d.ts

@@ -1,9 +1,12 @@
+import type { Watermark } from '../hooks/useFetchApiConfig';
 interface UiState {
     isActiveTab: boolean;
     tabManagerInitiated: boolean;
     showActivateTabModal: boolean;
+    watermark: Watermark;
     activateCurrentTab: (setCurrentTabAsActive: () => void, hasRunningSwaps: boolean) => void;
     setShowActivateTabModal: (flag: boolean) => void;
+    setWatermark: (watermark: Watermark) => void;
 }
 export declare const useUiStore: {
     (): UiState;
@@ -14,8 +17,10 @@ export declare const useUiStore: {
         isActiveTab: () => boolean;
         tabManagerInitiated: () => boolean;
         showActivateTabModal: () => boolean;
+        watermark: () => Watermark;
         activateCurrentTab: () => (setCurrentTabAsActive: () => void, hasRunningSwaps: boolean) => void;
         setShowActivateTabModal: () => (flag: boolean) => void;
+        setWatermark: () => (watermark: Watermark) => void;
     };
 };
 export declare const setCurrentTabAsActive: () => void;

package/dist/store/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/store/ui.ts"],"names":[],"mappings":"AAQA,UAAU,OAAO;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,kBAAkB,EAAE,CAClB,qBAAqB,EAAE,MAAM,IAAI,EACjC,eAAe,EAAE,OAAO,KACrB,IAAI,CAAC;IACV,uBAAuB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,UAAU;;;;;;;;;0DANI,MAAM,IAAI,mBAChB,OAAO,KACrB,IAAI;8CACuB,OAAO,KAAK,IAAI;;CAqBjD,CAAC;AASF,eAAO,MAAM,qBAAqB,YAAwB,CAAC;AAE3D,eAAO,MAAM,iBAAiB,YAAqB,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/store/ui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAS5D,UAAU,OAAO;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,kBAAkB,EAAE,CAClB,qBAAqB,EAAE,MAAM,IAAI,EACjC,eAAe,EAAE,OAAO,KACrB,IAAI,CAAC;IACV,uBAAuB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,YAAY,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,UAAU;;;;;;;;;;0DAPI,MAAM,IAAI,mBAChB,OAAO,KACrB,IAAI;8CACuB,OAAO,KAAK,IAAI;wCACtB,SAAS,KAAK,IAAI;;CA0B7C,CAAC;AASF,eAAO,MAAM,qBAAqB,YAAwB,CAAC;AAE3D,eAAO,MAAM,iBAAiB,YAAqB,CAAC"}

package/dist/types/config.d.ts

@@ -172,6 +172,7 @@ export type Features = Partial<Record<'theme' | 'language' | 'connectWalletButto
 export type WidgetConfig = {
     apiKey: string;
     apiUrl?: string;
+    title?: string;
     walletConnectProjectId?: string;
     affiliate?: WidgetAffiliate;
     amount?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"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"}

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/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,YAAY,mBACkC,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,YAAY,mBACyC,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.1",
+  "version": "0.21.1-next.10",
   "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.0",
+    "@rango-dev/ui": "^0.27.1-next.6",
     "@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/readme.md

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

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -11,14 +11,13 @@ import {
   ChevronLeftIcon,
   Divider,
   MessageBox,
-  Modal,
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
 import { getQuoteErrorMessage } from '../../constants/errors';
 import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
@@ -26,6 +25,7 @@ import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainShortNameFor } from '../../utils/meta';
 import { confirmSwapDisabled } from '../../utils/swap';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
 import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
 
@@ -52,6 +52,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
   //TODO: move component's logics to a custom hook
   const { open, onClose, onCancel, onCheckBalance, loading } = props;
   const config = useAppStore().config;
+
   const blockchains = useAppStore().blockchains();
   const {
     quote,
@@ -228,12 +229,13 @@ export function ConfirmWalletsModal(props: PropTypes) {
   }, [connectedWallets.length]);
 
   const modalContainer = document.getElementById(
-    RANGO_SWAP_BOX_ID
+    WIDGET_UI_ID.SWAP_BOX_ID
   ) as HTMLDivElement;
 
   const navigate = useNavigate();
+
   return (
-    <Modal
+    <WatermarkedModal
       open={open}
       onClose={() => {
         if (!quoteWalletsConfirmed) {
@@ -291,7 +293,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
         ),
       })}
       anchor="center">
-      <Modal
+      <WatermarkedModal
         open={balanceWarnings.length > 0}
         onClose={setBalanceWarnings.bind(null, [])}
         container={modalContainer}>
@@ -308,7 +310,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
             {i18n.t('Proceed anyway')}
           </Button>
         </MessageBox>
-      </Modal>
+      </WatermarkedModal>
       {showMoreWalletFor && (
         <WalletsContainer>
           <div className={walletsListStyles()}>
@@ -467,6 +469,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
           </Wallets>
         </>
       )}
-    </Modal>
+    </WatermarkedModal>
   );
 }

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { PropTypes } from './WalletList.type';
 import type { Wallet } from '../../types';
 import type { WalletInfo } from '@rango-dev/ui';
@@ -10,7 +9,6 @@ import {
   Divider,
   Image,
   MessageBox,
-  Modal,
   SelectableWallet,
   Typography,
   WalletState,
@@ -18,7 +16,7 @@ import {
 import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
-import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
 import { useWalletList } from '../../hooks/useWalletList';
 import {
   TIME_TO_CLOSE_MODAL,
@@ -33,6 +31,7 @@ import {
   getConciseAddress,
   isExperimentalChain,
 } from '../../utils/wallets';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 import { WalletModal } from '../WalletModal';
 
 import { ShowMoreWallets } from './ConfirmWallets.styles';
@@ -42,6 +41,7 @@ import {
   WalletImageContainer,
 } from './WalletList.styles';
 
+const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
 export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore } = props;
   const { config } = useAppStore();
@@ -112,7 +112,7 @@ export function WalletList(props: PropTypes) {
   }, [JSON.stringify(list)]);
 
   const modalContainer = document.getElementById(
-    RANGO_SWAP_BOX_ID
+    WIDGET_UI_ID.SWAP_BOX_ID
   ) as HTMLDivElement;
 
   useEffect(() => {
@@ -147,7 +147,9 @@ export function WalletList(props: PropTypes) {
           walletType: wallet.type,
           chain,
         });
-        const conciseAddress = address ? getConciseAddress(address) : '';
+        const conciseAddress = address
+          ? getConciseAddress(address, ACCOUNT_ADDRESS_MAX_CHARACTERS)
+          : '';
 
         const experimentalChain = isExperimentalChain(blockchains(), chain);
 
@@ -205,7 +207,7 @@ export function WalletList(props: PropTypes) {
               error={error}
             />
             {!!experimentalChainWallet && (
-              <Modal
+              <WatermarkedModal
                 open={!!experimentalChainWallet && showExperimentalChainModal}
                 container={modalContainer}
                 onClose={() => {
@@ -235,10 +237,10 @@ export function WalletList(props: PropTypes) {
                     {i18n.t('Confirm')}
                   </Button>
                 </MessageBox>
-              </Modal>
+              </WatermarkedModal>
             )}
             {addingExperimentalChainStatus && (
-              <Modal
+              <WatermarkedModal
                 open={!!addingExperimentalChainStatus}
                 onClose={setAddingExperimentalChainStatus.bind(null, null)}
                 container={modalContainer}>
@@ -290,7 +292,7 @@ export function WalletList(props: PropTypes) {
                 )}
 
                 <Divider direction="vertical" size={32} />
-              </Modal>
+              </WatermarkedModal>
             )}
             <SelectableWallet
               key={wallet.type}

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/HeaderButtons/HomeButtons.tsx

@@ -39,7 +39,8 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
 
       {!isNotificationsHidden && (
         <Popover
-          align="center"
+          align="end"
+          alignOffset={-88}
           collisionPadding={{ right: 20, left: 20 }}
           container={getContainer()}
           content={<NotificationContent />}>

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,162 @@
+import type { PropTypes } from './HistoryGroupedList.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Divider,
+  GroupedVirtualizedList,
+  Skeleton,
+  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) {
+    // The number of items presented in each group.
+    const swaps = [1, 2];
+    const loadingGroups = [swaps, swaps];
+    return (
+      <>
+        {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>
+          );
+        })}
+      </>
+    );
+  }
+
+  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];
+        if (!swap) {
+          return null;
+        }
+        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/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',
+    },
   },
 });