@rango-dev/widget-embedded 0.21.1-next.0 → 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/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAoE1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBA0E1B"}

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, }: {
@@ -29,4 +29,5 @@ export declare function getAddress({ chain, connectedWallets, walletType, }: {
 export declare function createTokenHash(token: Asset): TokenHash;
 export declare function makeTokensBalance(connectedWallets: ConnectedWallet[]): TokensBalance;
 export declare const isFetchingBalance: (connectedWallets: ConnectedWallet[], blockchain: string) => boolean;
+export declare function hashWalletsState(walletsInfo: ModalWalletInfo[]): string;
 //# sourceMappingURL=wallets.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EACV,KAAK,EACL,OAAO,EACP,UAAU,EACV,WAAW,EACX,UAAU,EAEX,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,KAAK,EACL,YAAY,EACb,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,eAAe,CAAC;AAuB5D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAWvE;AAED,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,WAAW,EAC3C,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,UAAU,EAC/C,IAAI,EAAE,UAAU,EAAE,EAClB,KAAK,CAAC,EAAE,MAAM,GACb,eAAe,EAAE,CA6BnB;AAED,wBAAgB,6BAA6B,CAC3C,oBAAoB,EAAE,cAAc,EAAE,GACrC,OAAO,EAAE,GAAG,IAAI,CAUlB;AAED,wBAAgB,6BAA6B,CAC3C,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,MAAM,EAAE,EAClB,cAAc,EAAE,MAAM,EAAE,EACxB,mBAAmB,EAAE,OAAO,EAAE,GAAG,IAAI,EACrC,gBAAgB,EAAE,OAAO,GACxB,MAAM,EAAE,CAkFV;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,YA4BhE;AAID,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,eAAe,WAOjC;AAED,wBAAgB,cAAc,CAC5B,gBAAgB,EAAE,YAAY,EAC9B,MAAM,EAAE,KAAK,EAAE,GACd,YAAY,EAAE,CAuBhB;AAED,wBAAgB,yBAAyB,CACvC,eAAe,EAAE,eAAe,GAC/B,eAAe,CAEjB;AAED,eAAO,MAAM,uBAAuB,oBAAqB,eAAe,EAAE,WAwCzE,CAAC;AAQF,eAAO,MAAM,WAAW,eACV,MAAM,UACV,MAAM,WACL,MAAM,GAAG,IAAI,aACX,KAAK,EAAE,KACjB,MAAM,GAAG,IAQX,CAAC;AACF,eAAO,MAAM,mBAAmB,gBACjB,cAAc,EAAE,UACrB,MAAM,KACb,OAUF,CAAC;AAEF,eAAO,MAAM,kCAAkC,sBAC1B,MAAM,EAAE,KAC1B,UAAU,EAUZ,CAAC;AAEF,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAkBrE;AA8CD,wBAAgB,UAAU,CACxB,MAAM,EAAE,KAAK,EAAE,EACf,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,GAAG,IAAI,EAC/C,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,WAczC;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG,IAAI,EAC/D,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG,IAAI,WAOhE;AAED,wBAAgB,iCAAiC,CAC/C,OAAO,EAAE,eAAe,EAAE,GACzB,eAAe,EAAE,CAcnB;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,EAEf,QAAQ,SAAI,EAEZ,cAAc,SAAI,GACjB,MAAM,CAOR;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,gBAAgB,EAChB,UAAU,GACX,EAAE;IACD,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,GAAG,SAAS,CAMrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAEvD;AAED,wBAAgB,iBAAiB,CAAC,gBAAgB,EAAE,eAAe,EAAE,iBAmCpE;AAED,eAAO,MAAM,iBAAiB,qBACV,eAAe,EAAE,cACvB,MAAM,YAIjB,CAAC"}
+{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"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"}

package/package.json

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

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();
@@ -59,23 +59,24 @@ export function WalletList(props: PropTypes) {
     useState<'in-progress' | 'completed' | 'rejected' | null>(null);
   const { suggestAndConnect } = useWallets();
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
-  const { list, error, handleClick } = useWalletList({
-    config,
-    chain,
-    onBeforeConnect: (type) => {
-      modalTimerId = setTimeout(() => {
-        setOpenWalletStateModal(type);
-      }, TIME_TO_IGNORE_MODAL);
-    },
-    onConnect: () => {
-      if (modalTimerId) {
-        clearTimeout(modalTimerId);
-      }
-      setTimeout(() => {
-        setOpenWalletStateModal('');
-      }, TIME_TO_CLOSE_MODAL);
-    },
-  });
+  const { list, error, handleClick, disconnectConnectingWallets } =
+    useWalletList({
+      config,
+      chain,
+      onBeforeConnect: (type) => {
+        modalTimerId = setTimeout(() => {
+          setOpenWalletStateModal(type);
+        }, TIME_TO_IGNORE_MODAL);
+      },
+      onConnect: () => {
+        if (modalTimerId) {
+          clearTimeout(modalTimerId);
+        }
+        setTimeout(() => {
+          setOpenWalletStateModal('');
+        }, TIME_TO_CLOSE_MODAL);
+      },
+    });
   const [sortedList, setSortedList] = useState<WalletInfo[]>(list);
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
@@ -111,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(() => {
@@ -133,6 +134,11 @@ export function WalletList(props: PropTypes) {
     };
   }, [addingExperimentalChainStatus]);
 
+  const handleCloseWalletModal = () => {
+    disconnectConnectingWallets();
+    setOpenWalletStateModal('');
+  };
+
   return (
     <>
       {sortedList.slice(0, limit).map((wallet) => {
@@ -141,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);
 
@@ -193,13 +201,13 @@ export function WalletList(props: PropTypes) {
           <>
             <WalletModal
               open={openWalletStateModal === wallet.type}
-              onClose={() => setOpenWalletStateModal('')}
+              onClose={handleCloseWalletModal}
               image={wallet.image}
               state={wallet.state}
               error={error}
             />
             {!!experimentalChainWallet && (
-              <Modal
+              <WatermarkedModal
                 open={!!experimentalChainWallet && showExperimentalChainModal}
                 container={modalContainer}
                 onClose={() => {
@@ -229,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}>
@@ -284,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>
+        );
+      }}
+    />
+  );
+}