chore: remove mobile layout from config and check height is 100%

lifinance · Aug 6, 2024 · b52165d · b52165d
1 parent 56eb8fa
commit b52165d
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 51 deletions.
diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx
@@ -18,13 +18,13 @@ export const FloatingToolsContainer = styled(Box)(({ theme }) => ({
 }));
 
 interface WidgetContainerProps extends BoxProps {
-  fullHeightView?: boolean;
+  removePaddingTop?: boolean;
   alignTop?: boolean;
 }
 
 export const WidgetContainer = styled(Box)<WidgetContainerProps>(({
   theme,
-  fullHeightView,
+  removePaddingTop,
   alignTop,
 }) => {
   return {
@@ -33,7 +33,7 @@ export const WidgetContainer = styled(Box)<WidgetContainerProps>(({
     justifyContent: alignTop ? 'flex-start' : 'center',
     alignItems: 'center',
     flexDirection: 'column',
-    paddingTop: fullHeightView ? 0 : theme.spacing(6),
+    paddingTop: removePaddingTop ? 0 : theme.spacing(6),
   };
 });
 

diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx
@@ -32,6 +32,9 @@ export function WidgetViewContainer({
 
   const isWalletManagementExternal = !!config?.walletConfig;
 
+  const showMockHeader = config?.theme?.container?.height === '100%' && true;
+  const showMockFooter = config?.theme?.container?.height === '100%' && true;
+
   return (
     <Main open={isDrawerOpen} drawerWidth={drawerWidth}>
       <ExternalWalletProvider isExternalProvider={isWalletManagementExternal}>
@@ -52,15 +55,13 @@ export function WidgetViewContainer({
         </FloatingToolsContainer>
         <WidgetContainer
           id="widget-container"
-          fullHeightView={
-            (config?.theme?.container?.height === '100%' &&
-              !config.mobileLayout) ||
-            (config?.theme?.container?.display === 'flex' &&
-              !config.mobileLayout)
+          removePaddingTop={
+            (config?.theme?.container?.height === '100%' && !showMockHeader) ||
+            (config?.theme?.container?.display === 'flex' && !showMockHeader)
           }
           alignTop={config?.theme?.container?.display === 'flex'}
         >
-          {config?.mobileLayout ? (
+          {showMockHeader ? (
             <MockElement sx={{ position: 'fixed', zIndex: 1, top: 0 }}>
               Mock header
             </MockElement>
@@ -71,7 +72,7 @@ export function WidgetViewContainer({
           >
             {children}
           </WidgetContainerRow>
-          {config?.mobileLayout ? <MockElement>Mock footer</MockElement> : null}
+          {showMockFooter ? <MockElement>Mock footer</MockElement> : null}
         </WidgetContainer>
       </ExternalWalletProvider>
     </Main>

diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts
@@ -206,7 +206,6 @@ export const widgetBaseConfig: WidgetConfig = {
 export const defaultWidgetConfig: Partial<WidgetConfig> = {
   ...widgetBaseConfig,
   appearance: 'auto',
-  mobileLayout: true,
   theme: {
     palette: {
       primary: {

diff --git a/packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts b/packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts
@@ -1,7 +1,7 @@
+import { useTheme } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import { useLayoutEffect, useState } from 'react';
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { ElementId, createElementId } from '../../utils/elements.js';
 
 const getContentHeight = (
@@ -59,7 +59,7 @@ export const useTokenListHeight = ({
 }: UseContentHeightProps) => {
   const elementId = useDefaultElementId();
   const [contentHeight, setContentHeight] = useState<number>(0);
-  const { mobileLayout } = useWidgetConfig();
+  const theme = useTheme();
 
   useLayoutEffect(() => {
     const handleResize = () => {
@@ -75,9 +75,10 @@ export const useTokenListHeight = ({
     };
   }, [elementId, listParentRef]);
 
-  const minListHeight = mobileLayout
-    ? minMobileTokenListHeight
-    : minTokenListHeight;
+  const minListHeight =
+    theme.container?.height === '100%'
+      ? minMobileTokenListHeight
+      : minTokenListHeight;
 
   return Math.max(
     contentHeight - (headerRef.current?.offsetHeight ?? 0),

diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx
@@ -9,7 +9,6 @@ import { Button, ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
 import { useId, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 
 import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
@@ -19,6 +18,7 @@ import { Menu } from '../../components/Menu.js';
 import { useChains } from '../../hooks/useChains.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import type { Bookmark } from '../../stores/bookmarks/types.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
@@ -30,16 +30,13 @@ import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
 import { EmptyListIndicator } from './EmptyListIndicator.js';
 import {
   BookmarkButtonContainer,
-  ListContainer,
+  BookmarksListContainer,
+  FullHeightAdjustablePageContainer,
   OptionsMenuButton,
-  SendToWalletPageContainer,
 } from './SendToWalletPage.style.js';
 
-const mobileMinListHeight = 360;
-
 export const BookmarksPage = () => {
   const { t } = useTranslation();
-  const { mobileLayout } = useWidgetConfig();
   const [bookmark, setBookmark] = useState<Bookmark>();
   const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null);
   const { bookmarks } = useBookmarks();
@@ -50,6 +47,7 @@ export const BookmarksPage = () => {
   const navigate = useNavigate();
   const { setFieldValue } = useFieldActions();
   const { setSendToWallet } = useSendToWalletActions();
+  const { variant } = useWidgetConfig();
 
   useHeader(t(`header.bookmarkedWallets`));
 
@@ -107,29 +105,11 @@ export const BookmarksPage = () => {
   };
 
   return (
-    <SendToWalletPageContainer
+    <FullHeightAdjustablePageContainer
       disableGutters
-      sx={
-        mobileLayout
-          ? {
-              justifyContent: 'space-between',
-              height: '100%',
-            }
-          : undefined
-      }
+      enableFullHeight={variant !== 'drawer'}
     >
-      <ListContainer
-        sx={
-          mobileLayout && bookmarks.length
-            ? {
-                minHeight: mobileMinListHeight,
-                height: mobileMinListHeight,
-                flexGrow: 1,
-                overflow: 'auto',
-              }
-            : { minHeight: 440 }
-        }
-      >
+      <BookmarksListContainer>
         {bookmarks.map((bookmark) => (
           <ListItem key={bookmark.address} sx={{ position: 'relative' }}>
             <ListItemButton
@@ -204,7 +184,7 @@ export const BookmarksPage = () => {
             {t('button.delete')}
           </MenuItem>
         </Menu>
-      </ListContainer>
+      </BookmarksListContainer>
       <BookmarkButtonContainer>
         <Button variant="contained" onClick={handleAddBookmark}>
           {t('sendToWallet.addBookmark')}
@@ -214,6 +194,6 @@ export const BookmarksPage = () => {
         ref={bookmarkAddressSheetRef}
         onAddBookmark={addBookmark}
       />
-    </SendToWalletPageContainer>
+    </FullHeightAdjustablePageContainer>
   );
 };
diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx
@@ -38,6 +38,21 @@ export const SendToWalletPageContainer = styled(
   gap: theme.spacing(1),
 }));
 
+interface FullHeightAdjustablePageContainerProps extends PageContainerProps {
+  enableFullHeight?: boolean;
+}
+
+export const FullHeightAdjustablePageContainer = styled(
+  SendToWalletPageContainer,
+)<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({
+  ...(enableFullHeight && theme.container?.height === '100%'
+    ? {
+        justifyContent: 'space-between',
+        height: '100%',
+      }
+    : {}),
+}));
+
 export const SendToWalletCard = styled(InputCard)({
   display: 'flex',
   flexDirection: 'column',
@@ -96,6 +111,12 @@ export const ListContainer = styled(List)(({ theme }) => ({
   minHeight: 400,
 }));
 
+export const BookmarksListContainer = styled(ListContainer)(({ theme }) => ({
+  ...(theme.container?.height === '100%'
+    ? { minHeight: 360, height: 360, flexGrow: 1, overflow: 'auto' }
+    : { minHeight: 440 }),
+}));
+
 export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
   background: theme.palette.background.default,
   display: 'flex',

diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx
@@ -26,17 +26,16 @@ import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
 import { ConfirmAddressSheet } from './ConfirmAddressSheet.js';
 import {
   AddressInput,
+  FullHeightAdjustablePageContainer,
   SendToWalletButtonRow,
   SendToWalletCard,
   SendToWalletIconButton,
-  SendToWalletPageContainer,
   ValidationAlert,
 } from './SendToWalletPage.style.js';
 
 export const SendToWalletPage = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { mobileLayout } = useWidgetConfig();
   const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null);
   const confirmAddressSheetRef = useRef<BottomSheetBase>(null);
   const { bookmarks, recentWallets } = useBookmarks();
@@ -61,6 +60,7 @@ export const SendToWalletPage = () => {
   const { chain: toChain } = useChain(toChainId);
   const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false);
   const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false);
+  const { variant } = useWidgetConfig();
 
   useHeader(t(`header.sendToWallet`));
 
@@ -183,9 +183,9 @@ export const SendToWalletPage = () => {
   });
 
   return (
-    <SendToWalletPageContainer
+    <FullHeightAdjustablePageContainer
       bottomGutters
-      sx={mobileLayout ? { justifyContent: 'space-between' } : undefined}
+      enableFullHeight={variant !== 'drawer'}
     >
       <SendToWalletCard
         type={errorMessage ? 'error' : 'default'}
@@ -276,6 +276,6 @@ export const SendToWalletPage = () => {
           )}
         </CardButton>
       </Box>
-    </SendToWalletPageContainer>
+    </FullHeightAdjustablePageContainer>
   );
 };
diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts
@@ -128,7 +128,6 @@ export interface AllowDeny<T> {
 }
 
 export interface WidgetConfig {
-  mobileLayout?: boolean;
   fromChain?: number;
   toChain?: number;
   fromToken?: string;