fix: add close button on mobile

packages/widget/src/AppDrawer.style.tsx

@@ -1,4 +1,4 @@
-import { Button, Typography } from '@mui/material';
+import { Button, IconButton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
 const getButtonTransformWidth = (
@@ -96,3 +96,14 @@ export const DrawerButtonTypography = styled(Typography)(({ theme }) => ({
   transform: 'rotateZ(180deg)',
   writingMode: 'vertical-rl',
 }));
+
+export const CloseButtonLayout = styled(IconButton)(() => ({
+  position: 'absolute',
+  top: '12px',
+  right: '16px',
+  zIndex: 1,
+  height: '40px',
+  width: '40px',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));

packages/widget/src/AppDrawer.tsx

@@ -11,10 +11,15 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AppDefault } from './App';
-import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
+import {
+  CloseButtonLayout,
+  DrawerButton,
+  DrawerButtonTypography,
+} from './AppDrawer.style';
 import { AppProvider } from './AppProvider';
 import type { WidgetConfig, WidgetProps, WidgetSubvariant } from './types';
 import { HiddenUI } from './types';
+import CloseIcon from '@mui/icons-material/CloseRounded';
 
 export interface WidgetDrawer {
   isOpen(): void;
@@ -103,6 +108,9 @@ export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
           }}
           keepMounted
         >
+          <CloseButtonLayout onClick={closeDrawer} size="medium" edge="start">
+            <CloseIcon />
+          </CloseButtonLayout>
           <AppDefault />
         </Drawer>
       </AppProvider>

packages/widget/src/components/Header/Header.style.ts

@@ -47,3 +47,13 @@ export const WalletButton = styled(Button)(({ theme }) => ({
     fontSize: '24px',
   },
 }));
+
+export const DrawerWalletContainer = styled(Box)(() => ({
+  width: '100%',
+  display: 'flex',
+  justifyItems: 'start',
+
+  '& > button': {
+    marginLeft: '-0.75rem',
+  },
+}));

packages/widget/src/components/Header/NavigationHeader.tsx

@@ -19,7 +19,7 @@ import { WalletMenuButton } from './WalletHeader';
 
 export const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
-  const { subvariant, hiddenUI } = useWidgetConfig();
+  const { subvariant, hiddenUI, variant } = useWidgetConfig();
   const { navigate, navigateBack } = useNavigateBack();
   const { account } = useWallet();
   const { element, title } = useHeaderStore((state) => state);
@@ -115,7 +115,11 @@ export const NavigationHeader: React.FC = () => {
           <Route
             path={navigationRoutes.home}
             element={
-              <>
+              <Box
+                paddingRight={
+                  variant === 'drawer' && subvariant === 'split' ? 6 : 0
+                }
+              >
                 {account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (
                   <Tooltip
                     title={t(`header.transactionHistory`)}
@@ -144,7 +148,7 @@ export const NavigationHeader: React.FC = () => {
                     <SettingsIcon />
                   </IconButton>
                 </Tooltip>
-              </>
+              </Box>
             }
           />
           <Route path="*" element={element || <Box width={28} height={40} />} />

packages/widget/src/components/Header/WalletHeader.tsx

@@ -10,7 +10,11 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useChain } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes, shortenAddress } from '../../utils';
-import { HeaderAppBar, WalletButton } from './Header.style';
+import {
+  DrawerWalletContainer,
+  HeaderAppBar,
+  WalletButton,
+} from './Header.style';
 import { WalletMenu } from './WalletMenu';
 
 export const WalletHeader: React.FC = () => {
@@ -23,6 +27,15 @@ export const WalletHeader: React.FC = () => {
 
 export const WalletMenuButton: React.FC = () => {
   const { account } = useWallet();
+  const { variant } = useWidgetConfig();
+
+  if (variant === 'drawer') {
+    return (
+      <DrawerWalletContainer>
+        {account.isActive ? <ConnectedButton /> : <ConnectButton />}
+      </DrawerWalletContainer>
+    );
+  }
   return account.isActive ? <ConnectedButton /> : <ConnectButton />;
 };