@rango-dev/widget-embedded 0.20.1-next.20 → 0.20.1-next.22

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AA0D5E,wBAAgB,eAAe,sBA6S9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAkD5E,wBAAgB,eAAe,sBA0T9B"}

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

@@ -1 +1 @@
-{"version":3,"file":"HistoryPage.d.ts","sourceRoot":"","sources":["../../src/pages/HistoryPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA0CxC,wBAAgB,WAAW,sBAoE1B"}
+{"version":3,"file":"HistoryPage.d.ts","sourceRoot":"","sources":["../../src/pages/HistoryPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAiCxC,wBAAgB,WAAW,sBAiE1B"}

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,KAAsC,MAAM,OAAO,CAAC;AA+C3D,wBAAgB,IAAI,sBA6OnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAsCnD,wBAAgB,IAAI,sBAuPnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"LanguagePage.d.ts","sourceRoot":"","sources":["../../src/pages/LanguagePage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,YAAY,sBAwC3B"}
+{"version":3,"file":"LanguagePage.d.ts","sourceRoot":"","sources":["../../src/pages/LanguagePage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,wBAAgB,YAAY,sBAwC3B"}

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

@@ -1 +1 @@
-{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAexC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBAwH5D"}
+{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBAwH5D"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBAmGnD"}
+{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBAqGnD"}

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,wBAAgB,YAAY,sBA4K3B"}
+{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,wBAAgB,YAAY,sBA4K3B"}

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

@@ -1 +1 @@
-{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,wBAAgB,eAAe,sBAoD9B"}
+{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,wBAAgB,eAAe,sBAgE9B"}

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

@@ -1 +1 @@
-{"version":3,"file":"ThemePage.d.ts","sourceRoot":"","sources":["../../src/pages/ThemePage.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,wBAAgB,SAAS,sBAiExB"}
+{"version":3,"file":"ThemePage.d.ts","sourceRoot":"","sources":["../../src/pages/ThemePage.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,SAAS,sBAiExB"}

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,KAA6B,MAAM,OAAO,CAAC;AAsBlD,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAmE1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAsBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAkE1B"}

package/dist/utils/quote.d.ts

@@ -4,7 +4,6 @@ import type { SimulationAssetAndAmount, SimulationValidationStatus } from '@rang
 import type { Asset, BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import type { PendingSwap } from 'rango-types';
 import BigNumber from 'bignumber.js';
-export declare function searchParamsToToken(tokens: Token[], searchParams: string | null, chain: BlockchainMeta | null): Token | null;
 export declare function getQuoteToTokenUsdPrice(quote: BestRouteResponse | null): number | null | undefined;
 export declare function isNumberOfSwapsChanged(quoteA: BestRouteResponse, quoteB: BestRouteResponse): boolean;
 export declare function isQuoteSwappersUpdated(quoteA: BestRouteResponse, quoteB: BestRouteResponse): boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/utils/quote.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EACV,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,KAAK,EACN,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,SAAS,MAAM,cAAc,CAAC;AAqBrC,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAqBd;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAC9B,MAAM,GAAG,IAAI,GAAG,SAAS,CAE3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAAE,EAAE,CAAC,SAAS,KAAK,EAAE,EACnE,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,CAAC,KAUT;AAED,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,cAAc,EAAE,EAC7B,MAAM,EAAE,KAAK,EAAE,GACd;IACD,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,OAAO,EAAE,KAAK,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CA4CA;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE;IACN,SAAS,EAAE,KAAK,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,GACA,YAAY,GAAG,IAAI,CAiDrB;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,iBAAiB,GACvB,UAAU,GAAG,IAAI,CA+BnB;AAED,wBAAgB,cAAc,CAC5B,aAAa,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,EACxC,cAAc,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GACxC,MAAM,GAAG,IAAI,CAcf;AAED,eAAO,MAAM,oBAAoB,UAAW,IAAI,EAAE;iBAEnB,MAAM;WAAS,MAAM;GAanD,CAAC"}
+{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/utils/quote.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EACV,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,KAAK,EACN,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,SAAS,MAAM,cAAc,CAAC;AAqBrC,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAC9B,MAAM,GAAG,IAAI,GAAG,SAAS,CAE3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAAE,EAAE,CAAC,SAAS,KAAK,EAAE,EACnE,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,CAAC,KAUT;AAED,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,cAAc,EAAE,EAC7B,MAAM,EAAE,KAAK,EAAE,GACd;IACD,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,OAAO,EAAE,KAAK,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CA4CA;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE;IACN,SAAS,EAAE,KAAK,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,GACA,YAAY,GAAG,IAAI,CAiDrB;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,iBAAiB,GACvB,UAAU,GAAG,IAAI,CA+BnB;AAED,wBAAgB,cAAc,CAC5B,aAAa,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,EACxC,cAAc,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GACxC,MAAM,GAAG,IAAI,CAcf;AAED,eAAO,MAAM,oBAAoB,UAAW,IAAI,EAAE;iBAEnB,MAAM;WAAS,MAAM;GAanD,CAAC"}

package/dist/utils/ui.d.ts

@@ -1,5 +1,6 @@
 import type { WidgetTheme } from '../types';
 import type { createTheme } from '@rango-dev/ui';
+import type React from 'react';
 interface CustomizedThemeValues {
     id: string;
     tokens: Parameters<typeof createTheme>[0];
@@ -9,5 +10,6 @@ interface CustomizedTheme {
     dark: undefined | CustomizedThemeValues;
 }
 export declare function customizedThemeTokens(colors: WidgetTheme['colors']): CustomizedTheme;
+export declare function joinList(list: React.JSX.Element[], divider: React.JSX.Element): React.JSX.Element[];
 export {};
 //# sourceMappingURL=ui.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAYjD,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC3C;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,GAAG,qBAAqB,CAAC;IACzC,IAAI,EAAE,SAAS,GAAG,qBAAqB,CAAC;CACzC;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC5B,eAAe,CA6CjB"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC3C;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,GAAG,qBAAqB,CAAC;IACzC,IAAI,EAAE,SAAS,GAAG,qBAAqB,CAAC;CACzC;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC5B,eAAe,CA6CjB;AAED,wBAAgB,QAAQ,CACtB,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,EACzB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,uBAe3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.20.1-next.20",
+  "version": "0.20.1-next.22",
   "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.25.1-next.2",
     "@rango-dev/queue-manager-react": "^0.24.0",
-    "@rango-dev/ui": "^0.26.1-next.11",
+    "@rango-dev/ui": "^0.26.1-next.12",
     "@rango-dev/wallets-react": "^0.11.1-next.1",
     "@rango-dev/wallets-shared": "^0.25.1-next.1",
     "bignumber.js": "^9.1.1",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/AppRouter.tsx

@@ -10,8 +10,6 @@ import { MemoryRouter, useInRouterContext } from 'react-router';
 import { useForceAutoConnect } from '../hooks/useForceAutoConnect';
 import { useAppStore } from '../store/AppStore';
 
-import { UpdateUrl } from './UpdateUrl';
-
 export function AppRouter({
   children,
   ...props
@@ -37,10 +35,5 @@ export function AppRouter({
     canSwitchNetworkTo,
   });
 
-  return (
-    <>
-      <Router>{children}</Router>
-      {isRouterInContext && <UpdateUrl />}
-    </>
-  );
+  return <Router>{children}</Router>;
 }

package/src/components/AppRoutes.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { useRoutes } from 'react-router-dom';
 
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
+import { useSyncUrlAndStore } from '../hooks/useSyncUrlAndStore';
 import { ConfirmSwapPage } from '../pages/ConfirmSwapPage';
 import { HistoryPage } from '../pages/HistoryPage';
 import { Home } from '../pages/Home';
@@ -15,6 +17,15 @@ import { ThemePage } from '../pages/ThemePage';
 import { WalletsPage } from '../pages/WalletsPage';
 
 export function AppRoutes() {
+  /**
+   * The configuration of the widget should initially be applied to the widget state.
+   * If search parameters exist in the URL,
+   * they should be applied later and take precedence over the widget configuration.
+   * To achieve this, it is crucial to execute these hooks in the correct sequence.
+   */
+  useSyncStoresWithConfig();
+  useSyncUrlAndStore();
+
   return useRoutes([
     {
       path: navigationRoutes.home,

package/src/components/BlockchainList/BlockchainList.styles.ts

@@ -1,17 +1,18 @@
 import { ImageContainer, styled } from '@rango-dev/ui';
 
+import { ScrollableArea } from '../Layout';
+
 export const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden',
 });
 
-export const List = styled('ul', {
+export const List = styled(ScrollableArea, {
   padding: 0,
   margin: 0,
   listStyle: 'none',
-  overflowY: 'auto',
-  paddingRight: '$5',
+
   [`& ${ImageContainer}`]: {
     borderRadius: '$xm',
     overflow: 'hidden',

package/src/components/BlockchainList/BlockchainList.tsx

@@ -41,7 +41,7 @@ export function BlockchainList(props: PropTypes) {
       );
     }
     return (
-      <List key={`${blockchainCategory}-${searchedFor}`}>
+      <List as="ul" key={`${blockchainCategory}-${searchedFor}`}>
         {blockchains.map((item) => (
           <ListItemButton
             key={`${item.name}-${item.chainId}`}

package/src/components/HeaderButtons/HeaderButtons.types.ts

@@ -4,7 +4,6 @@ export interface PropTypes {
   container?: HTMLElement;
 }
 export interface HomeButtonsPropTypes {
-  layoutRef: HTMLDivElement | null;
   onClickRefresh?: () => void;
   onClickHistory?: () => void;
   onClickSettings?: () => void;

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -20,7 +20,7 @@ import { RefreshButton } from './RefreshButton';
 import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
 
 export function HomeButtons(props: HomeButtonsPropTypes) {
-  const { layoutRef, onClickRefresh, onClickHistory, onClickSettings } = props;
+  const { onClickRefresh, onClickHistory, onClickSettings } = props;
 
   const {
     config: { features },
@@ -40,7 +40,6 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
       {!isNotificationsHidden && (
         <Popover
           align="center"
-          collisionBoundary={layoutRef}
           collisionPadding={{ right: 20, left: 20 }}
           container={getContainer()}
           content={<NotificationContent />}>

package/src/components/Layout/Layout.helpers.ts

@@ -0,0 +1,16 @@
+import { getContainer } from '../../utils/common';
+
+export function onScrollContentAttachStatusToContainer(e: Event) {
+  const contentElement = e.target as HTMLElement | null;
+
+  if (contentElement) {
+    const fromTop = contentElement.scrollTop;
+    const container = getContainer();
+
+    if (fromTop > 1) {
+      container.classList.add('rng-scrolled');
+    } else {
+      container.classList.remove('rng-scrolled');
+    }
+  }
+}

package/src/components/Layout/Layout.styles.ts

@@ -1,54 +1,40 @@
-import { darkTheme, styled } from '@rango-dev/ui';
+import { styled } from '@rango-dev/ui';
 
+const WIDGET_HEIGHT = '700px';
 export const Container = styled('div', {
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '$primary',
-  overflow: 'hidden !important',
-  boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
-  width: '100vw',
+  width: '100vh',
   minWidth: '300px',
   maxWidth: '390px',
-  maxHeight: '700px',
-  textAlign: 'left',
-  $$color: '$colors$neutral100',
-  [`.${darkTheme} &`]: {
-    $$color: '$colors$neutral300',
-  },
-  backgroundColor: '$$color',
+  boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
+  overflow: 'hidden',
+  backgroundColor: '$background',
+
   variants: {
-    fixedHeight: {
-      true: {
-        height: '100vh',
+    height: {
+      auto: {
+        height: 'auto',
+        maxHeight: WIDGET_HEIGHT,
       },
-      false: {
-        height: 'auto !important',
+      fixed: {
+        height: WIDGET_HEIGHT,
       },
     },
   },
 });
 
 export const Content = styled('div', {
-  borderTopLeftRadius: '20px',
-  borderTopRightRadius: '20px',
+  position: 'relative',
+  overflow: 'hidden',
+  flexGrow: 1,
   display: 'flex',
   flexDirection: 'column',
-  flex: 1,
-  padding: '$20 $20 $10 $20',
-  backgroundColor: '$background',
-  position: 'relative',
+  padding: 0,
   overflowY: 'auto',
-  overflowX: 'hidden',
-  variants: {
-    noPadding: {
-      true: {
-        padding: '0',
-      },
-    },
-  },
 });
-
 export const Footer = styled('div', {
   backgroundColor: '$background',
   '& .footer__content': {

package/src/components/Layout/Layout.tsx

@@ -1,30 +1,23 @@
-import type { PropTypes, Ref } from './Layout.types';
+import type { PropTypes } from './Layout.types';
 import type { PropsWithChildren } from 'react';
 
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { RANGO_SWAP_BOX_ID } from '../../constants';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
-import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
 import { isFeatureHidden } from '../../utils/settings';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 
+import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
 import { Container, Content, Footer } from './Layout.styles';
 
-function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
-  const {
-    children,
-    header,
-    footer,
-    noPadding,
-    hasLogo = true,
-    fixedHeight = true,
-  } = props;
+function Layout(props: PropsWithChildren<PropTypes>) {
+  const { children, header, footer, hasLogo = true, height = 'fixed' } = props;
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
     config: { features, theme },
@@ -36,25 +29,33 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     features
   );
 
-  const connectWalletsButtonDisabled =
-    useUiStore.use.connectWalletsButtonDisabled();
   const navigateBack = useNavigateBack();
 
   const onConnectWallet = () => {
-    if (!connectWalletsButtonDisabled && header.onWallet) {
-      header.onWallet();
-    }
+    header.onWallet?.();
   };
 
   const showBackButton =
     typeof header.hasBackButton === 'undefined' || header.hasBackButton;
 
+  const scrollViewRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    scrollViewRef.current?.addEventListener(
+      'scroll',
+      onScrollContentAttachStatusToContainer
+    );
+
+    return () => {
+      scrollViewRef.current?.removeEventListener(
+        'scroll',
+        onScrollContentAttachStatusToContainer
+      );
+    };
+  }, []);
+
   return (
-    <Container
-      ref={ref}
-      fixedHeight={fixedHeight}
-      id={RANGO_SWAP_BOX_ID}
-      className={activeTheme()}>
+    <Container height={height} id={RANGO_SWAP_BOX_ID} className={activeTheme()}>
       <Header
         prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}
@@ -72,7 +73,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
           </>
         }
       />
-      <Content noPadding={noPadding}>{children}</Content>
+      <Content ref={scrollViewRef}>{children}</Content>
       {(hasLogo || footer) && (
         <Footer>
           <div className="footer__content">{footer}</div>
@@ -87,8 +88,4 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     </Container>
   );
 }
-
-const Layout = React.forwardRef(LayoutComponent);
-Layout.displayName = 'Layout';
-
 export { Layout };

package/src/components/Layout/Layout.types.ts

@@ -1,3 +1,11 @@
+import type { Container } from './Layout.styles';
+import type * as Stitches from '@stitches/react';
+
+type ContainerProps = Stitches.VariantProps<typeof Container>;
+type ContainerHeightProp = NonNullable<
+  Exclude<ContainerProps['height'], object>
+>;
+
 export interface PropTypes {
   header: {
     title: string;
@@ -9,12 +17,5 @@ export interface PropTypes {
   };
   hasLogo?: boolean;
   footer?: React.ReactNode;
-  noPadding?: boolean;
-  fixedHeight?: boolean;
+  height?: ContainerHeightProp;
 }
-
-export type Ref =
-  | ((instance: HTMLDivElement | null) => void)
-  | React.RefObject<HTMLDivElement>
-  | null
-  | undefined;

package/src/components/Layout/PageContainer.tsx

@@ -0,0 +1,24 @@
+import { styled } from '@rango-dev/ui';
+
+const PageContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '20px 20px 10px',
+  flexGrow: 1,
+
+  variants: {
+    view: {
+      true: {
+        flexGrow: 1,
+        overflow: 'hidden',
+      },
+    },
+    compact: {
+      true: {
+        padding: 0,
+      },
+    },
+  },
+});
+
+export { PageContainer };

package/src/components/Layout/ScrollableArea.tsx

@@ -0,0 +1,11 @@
+import { styled } from '@rango-dev/ui';
+
+const CONTENT_PADDING = '$20 $20 $10 $20';
+
+const ScrollableArea = styled('div', {
+  padding: CONTENT_PADDING,
+  overflowY: 'auto',
+  flexGrow: 1,
+});
+
+export { ScrollableArea, CONTENT_PADDING };

package/src/components/Layout/index.ts

@@ -1 +1,3 @@
 export { Layout } from './Layout';
+export { ScrollableArea, CONTENT_PADDING } from './ScrollableArea';
+export { PageContainer } from './PageContainer';

package/src/components/NotificationContent/NotificationContent.tsx

@@ -14,7 +14,6 @@ import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
-import { useUiStore } from '../../store/ui';
 
 import { Container, Images, List } from './NotificationContent.styles';
 import { NotificationNotFound } from './NotificationNotFound';
@@ -23,7 +22,6 @@ const MAX_NOTIFICATIONS_DISPLAYED = 4;
 
 export function NotificationContent() {
   const navigate = useNavigate();
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
 
   const { getUnreadNotifications } = useNotificationStore();
 
@@ -35,7 +33,6 @@ export function NotificationContent() {
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
   const handleOnClick = (requestId: Notification['requestId']) => {
-    setSelectedSwap(requestId);
     navigate(`${navigationRoutes.swaps}/${requestId}`);
   };
 

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.styles.ts

@@ -2,7 +2,6 @@ import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
-  paddingTop: '$10',
 });
 
 export const Flex = styled('div', {

package/src/components/SettingsContainer/SettingsContainer.style.ts

@@ -1,10 +1,5 @@
 import { styled } from '@rango-dev/ui';
 
-export const SettingsContainer = styled('div', {
-  height: '100%',
-  overflow: 'hidden',
-});
-
 export const LiquiditySourceList = styled('ul', {
   padding: '$15 $5 0',
   margin: 0,

package/src/components/SettingsContainer/index.ts

@@ -1,5 +1,4 @@
 export {
-  SettingsContainer,
   LiquiditySourceList,
   LiquiditySourceSuffix,
   NotFoundContainer,

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -21,7 +21,6 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
   const { requestId, showSkeleton } = props;
   return (
     <Layout
-      noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
         suffix: <SuffixContainer />,

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -1,23 +1,22 @@
 import { css, darkTheme, styled } from '@rango-dev/ui';
 
+import { ScrollableArea } from '../Layout';
+
 export const Container = styled('div', {
   display: 'flex',
-  width: '100%',
   flexDirection: 'column',
-  alignItems: 'center',
-  height: '0',
   flexGrow: 1,
+  overflow: 'hidden',
 });
 
 export const HeaderDetails = styled('div', {
   width: '100%',
 });
 
-export const StepsList = styled('div', {
+export const StepsList = styled(ScrollableArea, {
   padding: '$0 $20 $20 $20',
-  width: '100%',
-  overflow: 'auto',
 });
+
 export const Alerts = styled('div', {
   display: 'flex',
   flexDirection: 'column',

package/src/components/SwapDetails/SwapDetails.tsx

@@ -54,7 +54,7 @@ import {
 import { getSwapDate } from '../../utils/time';
 import { getConciseAddress } from '../../utils/wallets';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
-import { Layout } from '../Layout';
+import { Layout, PageContainer } from '../Layout';
 import { QuoteSummary } from '../Quote';
 import {
   SwapDetailsCompleteModal,
@@ -63,7 +63,6 @@ import {
 
 import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
 import {
-  Container,
   HeaderDetails,
   outputStyles,
   requestIdStyles,
@@ -241,7 +240,6 @@ export function SwapDetails(props: SwapDetailsProps) {
 
   return (
     <Layout
-      noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
         onCancel:
@@ -279,7 +277,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </Button>
         )
       }>
-      <Container>
+      <PageContainer compact view>
         <HeaderDetails>
           <div className={rowStyles()}>
             <Typography variant="label" size="large" color="neutral700">
@@ -400,7 +398,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             );
           })}
         </StepsList>
-      </Container>
+      </PageContainer>
 
       <SwapDetailsModal
         state={modalState}

package/src/components/TokenList/TokenList.styles.ts

@@ -51,6 +51,7 @@ export const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   flexGrow: 1,
+  overflow: 'hidden',
 });
 
 export const Title = styled('div', {
@@ -68,6 +69,7 @@ export const List = styled('ul', {
   padding: 0,
   margin: 0,
   listStyle: 'none',
+
   '& li': {
     alignItems: 'none',
 

package/src/components/TokenList/TokenList.tsx

@@ -278,7 +278,7 @@ export function TokenList(props: PropTypes) {
       </Typography>
       <Divider size={4} />
       {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
-      {fetchStatus === 'success' && <List>{renderList()}</List>}
+      {fetchStatus === 'success' && <List as="ul">{renderList()}</List>}
     </Container>
   );
 }