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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.51.1-next.7",
+  "version": "0.51.1-next.8",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

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/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;