@rango-dev/widget-embedded 0.51.1-next.7 → 0.51.1-next.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.51.1-next.7",
+  "version": "0.51.1-next.9",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.53.1-next.2",
     "@rango-dev/queue-manager-react": "^0.32.1-next.0",
     "@rango-dev/signer-solana": "^0.44.0",
-    "@rango-dev/ui": "^0.54.1-next.3",
+    "@rango-dev/ui": "^0.54.1-next.4",
     "@rango-dev/wallets-core": "^0.50.1-next.1",
     "@rango-dev/wallets-react": "^0.37.1-next.2",
     "@rango-dev/wallets-shared": "^0.51.1-next.1",

package/src/components/Layout/Layout.constants.ts

@@ -1,3 +1,5 @@
-export const WIDGET_MAX_HEIGHT = 700;
-export const WIDGET_MIN_HEIGHT = 425;
-export const COMPACT_TOKEN_SELECTOR_THRESHOLD = 640;
+export const WIDGET_MAX_HEIGHT = '700px';
+export const WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS = '425px';
+export const WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS = '550px';
+export const COMPACT_TOKEN_SELECTOR_THRESHOLD = '640px';
+export const LARGE_SCREEN_MIN_HEIGHT = '800px';

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

@@ -1,6 +1,11 @@
 import { css, styled } from '@rango-dev/ui';
 
-import { WIDGET_MAX_HEIGHT, WIDGET_MIN_HEIGHT } from './Layout.constants';
+import {
+  LARGE_SCREEN_MIN_HEIGHT,
+  WIDGET_MAX_HEIGHT,
+  WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS,
+  WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS,
+} from './Layout.constants';
 
 export const LayoutContainer = css({
   borderRadius: '$primary',
@@ -16,16 +21,18 @@ export const Container = styled('div', {
   minWidth: '300px',
   maxWidth: '390px',
   backgroundColor: '$background',
+  maxHeight: WIDGET_MAX_HEIGHT,
   variants: {
     height: {
       auto: {
         height: 'auto',
-        maxHeight: WIDGET_MAX_HEIGHT,
       },
       fixed: {
-        minHeight: WIDGET_MIN_HEIGHT,
-        maxHeight: WIDGET_MAX_HEIGHT,
-        height: WIDGET_MAX_HEIGHT,
+        height: '100%',
+        minHeight: WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS,
+        [`@media screen and (min-height: ${LARGE_SCREEN_MIN_HEIGHT})`]: {
+          minHeight: WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS,
+        },
       },
     },
     showBanner: {

package/src/components/Layout/Layout.tsx

@@ -10,7 +10,6 @@ import { WIDGET_UI_ID } from '../../constants';
 import { useIframe } from '../../hooks/useIframe';
 import { isAppLoadedIntoIframe } from '../../hooks/useIframe/useIframe.helpers';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
-import useScreenDetect from '../../hooks/useScreenDetect';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
 import { tabManager, useUiStore } from '../../store/ui';
@@ -22,10 +21,7 @@ import { ActivateTabModal } from '../common/ActivateTabModal';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 import { RefreshModal } from '../RefreshModal';
 
-import {
-  COMPACT_TOKEN_SELECTOR_THRESHOLD,
-  WIDGET_MAX_HEIGHT,
-} from './Layout.constants';
+import { COMPACT_TOKEN_SELECTOR_THRESHOLD } from './Layout.constants';
 import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
 import {
   BannerContainer,
@@ -47,7 +43,7 @@ function Layout(props: PropsWithChildren<PropTypes>) {
   const {
     config: { features, theme },
   } = useAppStore();
-  const { watermark, setShowCompactTokenSelector } = useUiStore();
+  const { watermark } = useUiStore();
 
   const hasWatermark = watermark === 'FULL';
   const { activeTheme } = useTheme(theme || {});
@@ -64,10 +60,10 @@ function Layout(props: PropsWithChildren<PropTypes>) {
     showActivateTabModal,
     setShowActivateTabModal,
     activateCurrentTab,
+    setShowCompactTokenSelector,
   } = useUiStore();
   const navigateBack = useNavigateBack();
   const { manager } = useManager();
-  const { isTablet, isMobile } = useScreenDetect();
   const pendingSwaps: PendingSwap[] = getPendingSwaps(manager).map(
     ({ swap }) => swap
   );
@@ -134,35 +130,25 @@ function Layout(props: PropsWithChildren<PropTypes>) {
   }, [fetchStatus]);
 
   useLayoutEffect(() => {
-    const isFixedHeight =
-      height === 'auto' || !containerRef.current || isAppLoadedIntoIframe();
-    const isSmallScreen = isMobile || isTablet;
-
-    const handler = () => {
-      if (isFixedHeight) {
-        return;
-      }
+    if (!containerRef.current) {
+      return;
+    }
 
-      if (isSmallScreen) {
-        containerRef.current.style.height = `${
-          window.innerHeight - containerRef.current.offsetTop
-        }px`;
-      } else {
-        containerRef.current.style.height = `${WIDGET_MAX_HEIGHT}px`;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.contentRect) {
+          setShowCompactTokenSelector(
+            entry.contentRect.height <
+              parseInt(COMPACT_TOKEN_SELECTOR_THRESHOLD)
+          );
+        }
       }
+    });
 
-      setShowCompactTokenSelector(
-        parseFloat(containerRef.current.style.height) <
-          COMPACT_TOKEN_SELECTOR_THRESHOLD
-      );
-    };
-
-    handler();
+    observer.observe(containerRef.current);
 
-    window.addEventListener('resize', handler);
-
-    return () => window.removeEventListener('resize', handler);
-  }, [height, isMobile, isTablet]);
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <Container

package/src/components/WalletStatefulConnect/Detached.tsx

@@ -75,7 +75,10 @@ export function Detached(props: PropTypes) {
     if (!!singleSelection) {
       return (
         <>
-          <Divider size={20} />
+          <Divider
+            size={20}
+            className="_detached_namespace_list_header_alert_top_divider"
+          />
           <Alert
             id="widget-wallet-stateful-connect-alert"
             variant="alarm"
@@ -84,13 +87,19 @@ export function Detached(props: PropTypes) {
               'This wallet can only connect to one chain at a time.'
             )}
           />
-          <Divider size={30} />
+          <Divider
+            size={30}
+            className="_detached_namespace_list_header_alert_bottom_divider"
+          />
         </>
       );
     }
     return (
       <>
-        <Divider size={30} />
+        <Divider
+          size={30}
+          className="_detached_namespace_list_header_button_top_divider"
+        />
         <NamespacesHeader>
           <Button
             id="widget-detached-disconnect-wallet-btn"
@@ -102,7 +111,10 @@ export function Detached(props: PropTypes) {
             {i18n.t('Disconnect wallet')}
           </Button>
         </NamespacesHeader>
-        <Divider size={16} />
+        <Divider
+          size={16}
+          className="_detached_namespace_list_header_button_bottom_divider"
+        />
       </>
     );
   };

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -120,7 +120,10 @@ export function Namespaces(props: PropTypes) {
       />
       {singleNamespace ? (
         <>
-          <Divider size={20} />
+          <Divider
+            size={20}
+            className="_initial_namespace_list_header_alert_top_divider"
+          />
           <Alert
             id="widget-wallet-stateful-connect-alert"
             variant="alarm"
@@ -129,11 +132,17 @@ export function Namespaces(props: PropTypes) {
               'This wallet can only connect to one chain at a time. '
             )}
           />
-          <Divider size={30} />
+          <Divider
+            size={30}
+            className="_initial_namespace_list_header_alert_bottom_divider"
+          />
         </>
       ) : (
         <>
-          <Divider size={30} />
+          <Divider
+            size={30}
+            className="_initial_namespace_list_header_button_top_divider"
+          />
           <Button
             style={{ marginLeft: 'auto' }}
             id="widget-name-space-select-all-btn"
@@ -145,7 +154,10 @@ export function Namespaces(props: PropTypes) {
               ? i18n.t('Deselect all')
               : i18n.t('Select all')}
           </Button>
-          <Divider size={10} />
+          <Divider
+            size={10}
+            className="_initial_namespace_list_header_button_bottom_divider"
+          />
         </>
       )}
       <NamespaceList>

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

@@ -4,6 +4,7 @@ export const MainContainer = styled('div', {
   fontFamily: '$widget',
   boxSizing: 'border-box',
   textAlign: 'left',
+  height: '100%',
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
   },

package/src/hooks/useScreenDetect.ts

@@ -43,7 +43,13 @@ const useScreenDetect = () => {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  return { isMobile, isTablet, isNotebook, isLargeScreen, isExtraLargeScreen };
+  return {
+    isMobile,
+    isTablet,
+    isNotebook,
+    isLargeScreen,
+    isExtraLargeScreen,
+  };
 };
 
 export default useScreenDetect;