Fix drawer backdrop and filters on address tx tab (#2670)

fix drawer backdrop and filters on address tx tab

toolkit/chakra/drawer.tsx

@@ -7,15 +7,17 @@ interface DrawerContentProps extends ChakraDrawer.ContentProps {
   portalled?: boolean;
   portalRef?: React.RefObject<HTMLElement>;
   offset?: ChakraDrawer.ContentProps['padding'];
+  backdrop?: boolean;
 }
 
 export const DrawerContent = React.forwardRef<
   HTMLDivElement,
   DrawerContentProps
 >(function DrawerContent(props, ref) {
-  const { children, portalled = true, portalRef, offset, ...rest } = props;
+  const { children, portalled = true, portalRef, offset, backdrop = true, ...rest } = props;
   return (
     <Portal disabled={ !portalled } container={ portalRef }>
+      { backdrop && <ChakraDrawer.Backdrop/> }
       <ChakraDrawer.Positioner padding={ offset }>
         <ChakraDrawer.Content ref={ ref } { ...rest } asChild={ false }>
           { children }
@@ -45,8 +47,8 @@ export const DrawerCloseTrigger = React.forwardRef<
 const EMPTY_ELEMENT = () => null;
 
 export const DrawerRoot = (props: ChakraDrawer.RootProps) => {
-  const { initialFocusEl = EMPTY_ELEMENT, ...rest } = props;
-  return <ChakraDrawer.Root { ...rest } initialFocusEl={ initialFocusEl }/>;
+  const { initialFocusEl = EMPTY_ELEMENT, lazyMount = true, unmountOnExit = true, ...rest } = props;
+  return <ChakraDrawer.Root { ...rest } initialFocusEl={ initialFocusEl } lazyMount={ lazyMount } unmountOnExit={ unmountOnExit }/>;
 };
 
 export const DrawerTrigger = (props: ChakraDrawer.TriggerProps) => {
@@ -57,7 +59,6 @@ export const DrawerTrigger = (props: ChakraDrawer.TriggerProps) => {
 export const DrawerFooter = ChakraDrawer.Footer;
 export const DrawerHeader = ChakraDrawer.Header;
 export const DrawerBody = ChakraDrawer.Body;
-export const DrawerBackdrop = ChakraDrawer.Backdrop;
 export const DrawerDescription = ChakraDrawer.Description;
 export const DrawerTitle = ChakraDrawer.Title;
 export const DrawerActionTrigger = ChakraDrawer.ActionTrigger;

ui/address/AddressTxs.tsx

@@ -184,7 +184,7 @@ const AddressTxs = ({ overloadCount = OVERLOAD_COUNT, shouldRender = true, isQue
 
   return (
     <>
-      { !isMobile && addressTxsQuery.pagination.isVisible && (
+      { !isMobile && (
         <ActionBar>
           { filter }
           { currentAddress && csvExportLink }

ui/snippets/header/Burger.tsx

@@ -2,7 +2,7 @@ import { Box, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
-import { DrawerBackdrop, DrawerBody, DrawerContent, DrawerRoot, DrawerTrigger } from 'toolkit/chakra/drawer';
+import { DrawerBody, DrawerContent, DrawerRoot, DrawerTrigger } from 'toolkit/chakra/drawer';
 import { IconButton } from 'toolkit/chakra/icon-button';
 import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import IconSvg from 'ui/shared/IconSvg';
@@ -35,8 +35,8 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
       open={ open }
       onOpenChange={ onOpenChange }
       placement="start"
+      lazyMount={ false }
     >
-      <DrawerBackdrop/>
       <DrawerTrigger>
         <IconButton onClick={ onOpen } p={ 2 } aria-label="Menu button">
           <IconSvg
@@ -48,7 +48,7 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
         </IconButton>
       </DrawerTrigger>
       <DrawerContent >
-        <DrawerBody display="flex" flexDirection="column" overflow="hidden">
+        <DrawerBody display="flex" flexDirection="column" overflowX="hidden" overflowY="auto">
           <TestnetBadge alignSelf="flex-start"/>
           <Flex alignItems="center" justifyContent="space-between">
             <NetworkLogo onClick={ handleNetworkLogoClick }/>

ui/snippets/user/profile/UserProfileMobile.tsx

@@ -6,7 +6,7 @@ import type { Screen } from 'ui/snippets/auth/types';
 import config from 'configs/app';
 import * as mixpanel from 'lib/mixpanel';
 import useAccount from 'lib/web3/useAccount';
-import { DrawerBackdrop, DrawerBody, DrawerContent, DrawerRoot, DrawerTrigger } from 'toolkit/chakra/drawer';
+import { DrawerBody, DrawerContent, DrawerRoot, DrawerTrigger } from 'toolkit/chakra/drawer';
 import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import AuthModal from 'ui/snippets/auth/AuthModal';
 import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
@@ -74,7 +74,6 @@ const UserProfileMobile = () => {
         open={ profileMenu.open }
         onOpenChange={ handleProfileMenuOpenChange }
       >
-        <DrawerBackdrop/>
         <DrawerTrigger>
           <UserProfileButton
             profileQuery={ profileQuery }

ui/snippets/user/wallet/UserWalletMobile.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
 import useWeb3Wallet from 'lib/web3/useWallet';
-import { DrawerTrigger, DrawerRoot, DrawerBackdrop, DrawerContent, DrawerBody } from 'toolkit/chakra/drawer';
+import { DrawerTrigger, DrawerRoot, DrawerContent, DrawerBody } from 'toolkit/chakra/drawer';
 import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 
 import UserWalletButton from './UserWalletButton';
@@ -48,7 +48,6 @@ const UserWalletMobile = () => {
       open={ walletMenu.open }
       onOpenChange={ handleOpenChange }
     >
-      <DrawerBackdrop/>
       <DrawerTrigger>
         <UserWalletButton
           variant="header"