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

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;AAmD5E,wBAAgB,eAAe,sBA2T9B"}

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;AAkCxC,wBAAgB,WAAW,sBAqE1B"}

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;AAuCnD,wBAAgB,IAAI,sBAmPnB"}

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/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/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.21",
   "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",

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,8 +1,8 @@
-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';
@@ -14,17 +14,11 @@ 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 },
@@ -49,12 +43,24 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
   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 +78,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 +93,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/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>
   );
 }

package/src/containers/App/App.styles.ts

@@ -6,6 +6,8 @@ export const MainContainer = styled('div', {
   alignItems: 'center',
   fontFamily: '$widget',
   boxSizing: 'border-box',
+  textAlign: 'left',
+
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
   },

package/src/containers/QuoteInfo/QuoteInfo.styles.ts

@@ -1,26 +1,11 @@
 import { styled } from '@rango-dev/ui';
 
-export const PositionTopAlerts = styled('div', {
-  paddingBottom: '$10',
-});
-
 export const QuoteContainer = styled('div', {
   width: '100%',
   '& .position-top__skeleton': {
     paddingTop: '$10',
   },
 });
-
-export const SkeletonContainer = styled('div', {
-  variants: {
-    paddingTop: {
-      true: {
-        paddingTop: '$10',
-      },
-    },
-  },
-});
-
 export const FooterStepAlarm = styled('div', {
   paddingBottom: '$15',
 });