feat: open settings menu on slippage click

cowprotocol · Oct 14, 2024 · 1678557 · 1678557
1 parent 78c0b89
commit 1678557
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 36 deletions.
diff --git a/apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/SettingsTab/index.tsx b/apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/SettingsTab/index.tsx
@@ -1,10 +1,11 @@
-import { useCallback } from 'react'
+import { useAtom } from 'jotai'
+import { ReactElement, RefObject, useCallback, useEffect, useRef } from 'react'
 
 import { StatefulValue } from '@cowprotocol/types'
 import { HelpTooltip, RowBetween, RowFixed } from '@cowprotocol/ui'
 
 import { Trans } from '@lingui/macro'
-import { Menu } from '@reach/menu-button'
+import { Menu, useMenuButtonContext } from '@reach/menu-button'
 import { Text } from 'rebass'
 import { ThemedText } from 'theme'
 
@@ -16,6 +17,7 @@ import { SettingsIcon } from 'modules/trade/pure/Settings'
 
 import * as styledEl from './styled'
 
+import { settingsTabStateAtom } from '../../state/settingsTabState'
 import { TransactionSettings } from '../TransactionSettings'
 
 interface SettingsTabProps {
@@ -25,6 +27,8 @@ interface SettingsTabProps {
 }
 
 export function SettingsTab({ className, recipientToggleState, deadlineState }: SettingsTabProps) {
+  const menuButtonRef = useRef<HTMLButtonElement>(null)
+
   const [recipientToggleVisible, toggleRecipientVisibilityAux] = recipientToggleState
   const toggleRecipientVisibility = useCallback(
     (value?: boolean) => {
@@ -37,40 +41,76 @@ export function SettingsTab({ className, recipientToggleState, deadlineState }:
 
   return (
     <Menu>
-      <styledEl.StyledMenu className={className}>
-        <styledEl.StyledMenuButton id="open-settings-dialog-button">
-          <SettingsIcon />
-        </styledEl.StyledMenuButton>
-        <styledEl.MenuFlyout portal={false}>
-          <AutoColumn gap="md" style={{ padding: '1rem' }}>
-            <Text fontWeight={600} fontSize={14}>
-              <Trans>Transaction Settings</Trans>
-            </Text>
-            <TransactionSettings deadlineState={deadlineState} />
-            <Text fontWeight={600} fontSize={14}>
-              <Trans>Interface Settings</Trans>
-            </Text>
-
-            <RowBetween>
-              <RowFixed>
-                <ThemedText.Black fontWeight={400} fontSize={14}>
-                  <Trans>Custom Recipient</Trans>
-                </ThemedText.Black>
-                <HelpTooltip
-                  text={
-                    <Trans>Allows you to choose a destination address for the swap other than the connected one.</Trans>
-                  }
+      <SettingsTabController buttonRef={menuButtonRef}>
+        <styledEl.StyledMenu className={className}>
+          <styledEl.StyledMenuButton ref={menuButtonRef} id="open-settings-dialog-button">
+            <SettingsIcon />
+          </styledEl.StyledMenuButton>
+          <styledEl.MenuFlyout portal={false}>
+            <AutoColumn gap="md" style={{ padding: '1rem' }}>
+              <Text fontWeight={600} fontSize={14}>
+                <Trans>Transaction Settings</Trans>
+              </Text>
+              <TransactionSettings deadlineState={deadlineState} />
+              <Text fontWeight={600} fontSize={14}>
+                <Trans>Interface Settings</Trans>
+              </Text>
+
+              <RowBetween>
+                <RowFixed>
+                  <ThemedText.Black fontWeight={400} fontSize={14}>
+                    <Trans>Custom Recipient</Trans>
+                  </ThemedText.Black>
+                  <HelpTooltip
+                    text={
+                      <Trans>
+                        Allows you to choose a destination address for the swap other than the connected one.
+                      </Trans>
+                    }
+                  />
+                </RowFixed>
+                <Toggle
+                  id="toggle-recipient-mode-button"
+                  isActive={recipientToggleVisible}
+                  toggle={toggleRecipientVisibility}
                 />
-              </RowFixed>
-              <Toggle
-                id="toggle-recipient-mode-button"
-                isActive={recipientToggleVisible}
-                toggle={toggleRecipientVisibility}
-              />
-            </RowBetween>
-          </AutoColumn>
-        </styledEl.MenuFlyout>
-      </styledEl.StyledMenu>
+              </RowBetween>
+            </AutoColumn>
+          </styledEl.MenuFlyout>
+        </styledEl.StyledMenu>
+      </SettingsTabController>
     </Menu>
   )
 }
+
+interface SettingsTabControllerProps {
+  buttonRef: RefObject<HTMLButtonElement>
+  children: ReactElement
+}
+
+/**
+ * https://stackoverflow.com/questions/70596487/how-to-programmatically-expand-react-reach-ui-reach-menu-button-menu
+ */
+function SettingsTabController({ buttonRef, children }: SettingsTabControllerProps) {
+  const [settingsTabState, setSettingsTabState] = useAtom(settingsTabStateAtom)
+  const { isExpanded } = useMenuButtonContext()
+
+  const toggleMenu = () => {
+    buttonRef.current?.dispatchEvent(new Event('mousedown', { bubbles: true }))
+  }
+
+  useEffect(() => {
+    if (settingsTabState.open) {
+      toggleMenu()
+    }
+  }, [settingsTabState.open])
+
+  useEffect(() => {
+    if (settingsTabState.open && !isExpanded) {
+      toggleMenu()
+      setSettingsTabState({ open: false })
+    }
+  }, [settingsTabState.open, isExpanded])
+
+  return children
+}
diff --git a/apps/cowswap-frontend/src/modules/tradeWidgetAddons/pure/Row/RowSlippageContent/index.tsx b/apps/cowswap-frontend/src/modules/tradeWidgetAddons/pure/Row/RowSlippageContent/index.tsx
@@ -1,3 +1,5 @@
+import { useSetAtom } from 'jotai'
+
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { Command } from '@cowprotocol/types'
 import { CenteredDots, HoverTooltip, LinkStyledButton, RowFixed, UI } from '@cowprotocol/ui'
@@ -8,6 +10,7 @@ import styled from 'styled-components/macro'
 
 import { getNativeSlippageTooltip, getNonNativeSlippageTooltip } from 'common/utils/tradeSettingsTooltips'
 
+import { settingsTabStateAtom } from '../../../state/settingsTabState'
 import { StyledRowBetween, TextWrapper, StyledInfoIcon, TransactionText, RowStyleProps } from '../styled'
 
 const DefaultSlippage = styled.span`
@@ -62,6 +65,8 @@ export function RowSlippageContent(props: RowSlippageContentProps) {
     isSmartSlippageLoading,
   } = props
 
+  const setSettingTabState = useSetAtom(settingsTabStateAtom)
+
   const tooltipContent =
     slippageTooltip || (isEoaEthFlow ? getNativeSlippageTooltip(chainId, symbols) : getNonNativeSlippageTooltip())
 
@@ -99,7 +104,7 @@ export function RowSlippageContent(props: RowSlippageContentProps) {
   return (
     <StyledRowBetween {...styleProps}>
       <RowFixed>
-        <TextWrapper>
+        <TextWrapper onClick={() => setSettingTabState({ open: true })}>
           <SlippageTextContents
             isEoaEthFlow={isEoaEthFlow}
             slippageLabel={slippageLabel}

diff --git a/apps/cowswap-frontend/src/modules/tradeWidgetAddons/state/settingsTabState.ts b/apps/cowswap-frontend/src/modules/tradeWidgetAddons/state/settingsTabState.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const settingsTabStateAtom = atom({ open: false })
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { atom } from 'jotai'

		export const settingsTabStateAtom = atom({ open: false })