feat: misc hooks improvements (#5079)

cowprotocol · Nov 14, 2024 · adec6fe · adec6fe
1 parent 38aae71
commit adec6fe
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 30 deletions.
diff --git a/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx b/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx
@@ -7,7 +7,7 @@ import { InfoTooltip } from '@cowprotocol/ui'
 import { ChevronDown, ChevronUp } from 'react-feather'
 
 import { AppDataInfo, decodeAppData } from 'modules/appData'
-import { useCustomHookDapps, useHooks, useHooksStateWithSimulatedGas } from 'modules/hooksStore'
+import { useCustomHookDapps, useHooksStateWithSimulatedGas } from 'modules/hooksStore'
 import { useTenderlyBundleSimulation } from 'modules/tenderly/hooks/useTenderlyBundleSimulation'
 
 import { HookItem } from './HookItem'
@@ -34,7 +34,7 @@ export function OrderHooksDetails({ appData, children, margin }: OrderHooksDetai
 
   useEffect(() => {
     mutate()
-  }, [])
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   if (!appDataDoc) return null
 

diff --git a/apps/cowswap-frontend/src/common/hooks/useMenuItems.ts b/apps/cowswap-frontend/src/common/hooks/useMenuItems.ts
@@ -3,9 +3,10 @@ import { useMemo } from 'react'
 import { useFeatureFlags } from '@cowprotocol/common-hooks'
 import { isLocal } from '@cowprotocol/common-utils'
 
-import { HOOKS_STORE_MENU_ITEM, MENU_ITEMS, YIELD_MENU_ITEM } from '../constants/routes'
 import { useHooksEnabled } from 'legacy/state/user/hooks'
 
+import { HOOKS_STORE_MENU_ITEM, MENU_ITEMS, YIELD_MENU_ITEM } from '../constants/routes'
+
 export function useMenuItems() {
   const isHooksEnabled = useHooksEnabled()
   const { isYieldEnabled } = useFeatureFlags()

diff --git a/apps/cowswap-frontend/src/modules/combinedBalances/updater/BalancesCombinedUpdater.tsx b/apps/cowswap-frontend/src/modules/combinedBalances/updater/BalancesCombinedUpdater.tsx
@@ -1,3 +1,4 @@
+import { useSetAtom } from 'jotai'
 import { useEffect } from 'react'
 
 import { BalancesState, useTokensBalances } from '@cowprotocol/balances-and-allowances'
@@ -8,7 +9,7 @@ import { BigNumber } from 'ethers'
 import { useHooks } from 'modules/hooksStore'
 import { usePreHookBalanceDiff } from 'modules/hooksStore/hooks/useBalancesDiff'
 import { useIsHooksTradeType } from 'modules/trade'
-import { useSetAtom } from 'jotai'
+
 import { balancesCombinedAtom } from '../state/balanceCombinedAtom'
 
 export function BalancesCombinedUpdater() {
@@ -26,7 +27,7 @@ export function BalancesCombinedUpdater() {
     }
     const accountBalancesDiff = preHooksBalancesDiff[account.toLowerCase()] || {}
     setBalancesCombined(applyBalanceDiffs(tokenBalances, accountBalancesDiff))
-  }, [account, preHooksBalancesDiff, isHooksTradeType, tokenBalances])
+  }, [account, preHooksBalancesDiff, isHooksTradeType, tokenBalances, preHooks.length, setBalancesCombined])
 
   return null
 }

diff --git a/apps/cowswap-frontend/src/modules/hooksStore/containers/HookDappContainer/index.tsx b/apps/cowswap-frontend/src/modules/hooksStore/containers/HookDappContainer/index.tsx
@@ -82,6 +82,7 @@ export function HookDappContainer({ dapp, isPreHook, onDismiss, hookToEdit }: Ho
     outputCurrencyId,
     isDarkMode,
     orderParams,
+    balancesDiff,
   ])
 
   const dappProps = useMemo(() => ({ context, dapp, isPreHook }), [context, dapp, isPreHook])

diff --git a/apps/cowswap-frontend/src/modules/hooksStore/containers/HookRegistryList/index.tsx b/apps/cowswap-frontend/src/modules/hooksStore/containers/HookRegistryList/index.tsx
@@ -110,13 +110,21 @@ export function HookRegistryList({ onDismiss, isPreHook, hookToEdit, walletType
   const DappsListContent = useMemo(
     () => (
       <>
+        <HookSearchInput
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value?.trim())}
+          placeholder="Search hooks by title or description"
+          ariaLabel="Search hooks"
+          onClear={handleClearSearch}
+        />
+
         {isAllHooksTab && (
           <DismissableInlineBanner
             orientation={BannerOrientation.Horizontal}
             customIcon={ICON_HOOK}
             iconSize={36}
             bannerId="hooks-store-banner-tradeContainer-customHooks"
-            margin="0 10px 10px"
+            margin="10px 10px 0"
             width="auto"
           >
             <p>
@@ -128,14 +136,6 @@ export function HookRegistryList({ onDismiss, isPreHook, hookToEdit, walletType
           </DismissableInlineBanner>
         )}
 
-        <HookSearchInput
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value?.trim())}
-          placeholder="Search hooks by title or description"
-          ariaLabel="Search hooks"
-          onClear={handleClearSearch}
-        />
-
         {sortedFilteredDapps.length > 0 ? (
           <HookDappsList>
             {sortedFilteredDapps.map((dapp) => (
@@ -154,7 +154,16 @@ export function HookRegistryList({ onDismiss, isPreHook, hookToEdit, walletType
         )}
       </>
     ),
-    [isAllHooksTab, searchQuery, sortedFilteredDapps, handleAddCustomHook, handleClearSearch, emptyListMessage, removeCustomHookDapp, walletType],
+    [
+      isAllHooksTab,
+      searchQuery,
+      sortedFilteredDapps,
+      handleAddCustomHook,
+      handleClearSearch,
+      emptyListMessage,
+      removeCustomHookDapp,
+      walletType,
+    ],
   )
 
   return (
@@ -166,7 +175,7 @@ export function HookRegistryList({ onDismiss, isPreHook, hookToEdit, walletType
         contentPadding="0"
         justifyContent="flex-start"
       >
-        {!dappDetails && !hookToEditDetails && (
+        {!dappDetails && !hookToEditDetails && !selectedDapp && (
           <HookListsTabs
             isAllHooksTab={isAllHooksTab}
             setIsAllHooksTab={setIsAllHooksTab}

diff --git a/apps/cowswap-frontend/src/modules/hooksStore/dapps/ClaimGnoHookApp/index.tsx b/apps/cowswap-frontend/src/modules/hooksStore/dapps/ClaimGnoHookApp/index.tsx
@@ -88,7 +88,7 @@ export function ClaimGnoHookApp({ context }: HookDappProps) {
 
   return (
     <Wrapper>
-      <ContentWrapper>
+      <ContentWrapper minHeight={150}>
         {context.chainId !== SupportedChainId.GNOSIS_CHAIN ? (
           'Unsupported network. Please change to Gnosis Chain'
         ) : !account ? (

diff --git a/apps/cowswap-frontend/src/modules/hooksStore/dapps/styled.tsx b/apps/cowswap-frontend/src/modules/hooksStore/dapps/styled.tsx
@@ -6,24 +6,25 @@ export const Wrapper = styled.div`
   display: flex;
   flex-flow: column wrap;
   width: 100%;
-  padding: 24px 8px 16px;
+  padding: 10px;
   justify-content: flex-end;
   flex: 1 1 auto;
-  gap: 24px;
+  gap: 10px;
   font-size: 14px;
 `
 
-export const ContentWrapper = styled.div`
+export const ContentWrapper = styled.div<{ minHeight?: number }>`
   flex-flow: column wrap;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   align-items: center;
   padding: 0;
   text-align: center;
-  gap: 16px;
+  gap: 10px;
   flex: 1 1 auto;
   color: var(${UI.COLOR_TEXT});
   font-size: inherit;
+  min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : 'initial')};
 `
 
 export const Row = styled.div`
@@ -42,7 +43,7 @@ export const Row = styled.div`
     width: 100%;
     padding: 14px 16px;
     border: 1px solid transparent;
-    border-radius: 9px;
+    border-radius: 16px;
     font-size: 16px;
     background: var(${UI.COLOR_PAPER_DARKER});
     color: inherit;

diff --git a/apps/cowswap-frontend/src/modules/hooksStore/hooks/useBalancesDiff.ts b/apps/cowswap-frontend/src/modules/hooksStore/hooks/useBalancesDiff.ts
@@ -58,7 +58,7 @@ export function useHookBalancesDiff(isPreHook: boolean, hookToEditUid?: string):
 
     const lastPostHook = postHooks[postHooks.length - 1]
     return data[lastPostHook?.uuid]?.cumulativeBalancesDiff || firstPostHookBalanceDiff
-  }, [data, postHooks, orderExpectedBalanceDiff, preHookBalanceDiff])
+  }, [data, firstPostHookBalanceDiff, postHooks])
 
   const hookToEditBalanceDiff = useMemo(() => {
     if (!data || !hookToEditUid) return EMPTY_BALANCE_DIFF
@@ -83,7 +83,7 @@ export function useHookBalancesDiff(isPreHook: boolean, hookToEditUid?: string):
     if (hookToEditUid) return hookToEditBalanceDiff
     if (isPreHook) return preHookBalanceDiff
     return postHookBalanceDiff
-  }, [data, orderParams, preHooks, postHooks])
+  }, [hookToEditBalanceDiff, hookToEditUid, isPreHook, postHookBalanceDiff, preHookBalanceDiff])
 }
 
 function mergeBalanceDiffs(first: BalancesDiff, second: BalancesDiff): BalancesDiff {

diff --git a/apps/cowswap-frontend/src/modules/hooksStore/pure/HookListItem/index.tsx b/apps/cowswap-frontend/src/modules/hooksStore/pure/HookListItem/index.tsx
@@ -44,7 +44,7 @@ export function HookListItem({ dapp, walletType, onSelect, onOpenDetails, onRemo
       <span>
         {isCompatible ? (
           <styled.LinkButton onClick={onSelect} className="link-button">
-            Add
+            Open
           </styled.LinkButton>
         ) : (
           <styled.LinkButton disabled title="Not compatible with current wallet type">

diff --git a/apps/cowswap-frontend/src/modules/tradeFlow/hooks/useTradeFlowContext.ts b/apps/cowswap-frontend/src/modules/tradeFlow/hooks/useTradeFlowContext.ts
@@ -25,7 +25,6 @@ import { useGP2SettlementContract } from 'common/hooks/useContract'
 
 import { TradeTypeToUiOrderType } from '../../trade/const/common'
 import { TradeFlowContext } from '../types/TradeFlowContext'
-import { UiOrderType } from '@cowprotocol/types'
 
 export interface TradeFlowParams {
   deadline: number

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,6 +1,7 @@
 import { useAtom } from 'jotai'
 import { ReactElement, RefObject, useCallback, useEffect, useRef } from 'react'
 
+import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { StatefulValue } from '@cowprotocol/types'
 import { HelpTooltip, RowBetween, RowFixed } from '@cowprotocol/ui'
 
@@ -19,7 +20,6 @@ import * as styledEl from './styled'
 
 import { settingsTabStateAtom } from '../../state/settingsTabState'
 import { TransactionSettings } from '../TransactionSettings'
-import { isInjectedWidget } from '@cowprotocol/common-utils'
 
 interface SettingsTabProps {
   className?: string
@@ -50,7 +50,7 @@ export function SettingsTab({ className, recipientToggleState, hooksEnabledState
       toggleHooksEnabledAnalytics(isEnabled)
       toggleHooksEnabledAux(isEnabled)
     },
-    [toggleRecipientVisibilityAux, hooksEnabled],
+    [hooksEnabled, toggleHooksEnabledAux],
   )
 
   return (

diff --git a/apps/cowswap-frontend/src/modules/yield/containers/YieldWidget/index.tsx b/apps/cowswap-frontend/src/modules/yield/containers/YieldWidget/index.tsx
@@ -35,7 +35,6 @@ import {
   useYieldSettings,
   useYieldUnlockState,
 } from '../../hooks/useYieldSettings'
-
 import { useYieldWidgetActions } from '../../hooks/useYieldWidgetActions'
 import { PoolApyPreview } from '../../pure/PoolApyPreview'
 import { TargetPoolPreviewInfo } from '../../pure/TargetPoolPreviewInfo'