fix: closes settings state when MP is closed (#7065)

* fix: close settings menu on drawer close

* migrate change to default menu

* remove indent

* add cleanup

src/components/AccountDrawer/DefaultMenu.tsx

@@ -1,7 +1,7 @@
 import { useWeb3React } from '@web3-react/core'
 import Column from 'components/Column'
 import WalletModal from 'components/WalletModal'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components/macro'
 
 import AuthenticatedHeader from './AuthenticatedHeader'
@@ -17,7 +17,7 @@ enum MenuState {
   SETTINGS,
 }
 
-function DefaultMenu() {
+function DefaultMenu({ drawerOpen }: { drawerOpen: boolean }) {
   const { account } = useWeb3React()
   const isAuthenticated = !!account
 
@@ -25,6 +25,17 @@ function DefaultMenu() {
   const openSettings = useCallback(() => setMenu(MenuState.SETTINGS), [])
   const closeSettings = useCallback(() => setMenu(MenuState.DEFAULT), [])
 
+  useEffect(() => {
+    if (!drawerOpen && menu === MenuState.SETTINGS) {
+      // wait for the drawer to close before resetting the menu
+      const timer = setTimeout(() => {
+        closeSettings()
+      }, 250)
+      return () => clearTimeout(timer)
+    }
+    return
+  }, [drawerOpen, menu, closeSettings])
+
   return (
     <DefaultMenuWrap>
       {menu === MenuState.DEFAULT &&

src/components/AccountDrawer/index.tsx

@@ -257,7 +257,7 @@ function AccountDrawer() {
       >
         {/* id used for child InfiniteScrolls to reference when it has reached the bottom of the component */}
         <AccountDrawerScrollWrapper ref={scrollRef} id="wallet-dropdown-scroll-wrapper">
-          <DefaultMenu />
+          <DefaultMenu drawerOpen={walletDrawerOpen} />
         </AccountDrawerScrollWrapper>
       </AccountDrawerWrapper>
     </Container>