From adec6fecaed225531140ae947801be9d5ee52532 Mon Sep 17 00:00:00 2001 From: fairlight <31534717+fairlighteth@users.noreply.github.com> Date: Thu, 14 Nov 2024 08:18:15 +0000 Subject: [PATCH] feat: misc hooks improvements (#5079) --- .../containers/OrderHooksDetails/index.tsx | 4 +-- .../src/common/hooks/useMenuItems.ts | 3 +- .../updater/BalancesCombinedUpdater.tsx | 5 +-- .../containers/HookDappContainer/index.tsx | 1 + .../containers/HookRegistryList/index.tsx | 31 ++++++++++++------- .../dapps/ClaimGnoHookApp/index.tsx | 2 +- .../src/modules/hooksStore/dapps/styled.tsx | 13 ++++---- .../hooksStore/hooks/useBalancesDiff.ts | 4 +-- .../hooksStore/pure/HookListItem/index.tsx | 2 +- .../tradeFlow/hooks/useTradeFlowContext.ts | 1 - .../containers/SettingsTab/index.tsx | 4 +-- .../yield/containers/YieldWidget/index.tsx | 1 - 12 files changed, 41 insertions(+), 30 deletions(-) diff --git a/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx b/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx index 80c258b294..2199b81928 100644 --- 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 index b916bec12c..aa97c78208 100644 --- 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 index 2058bf8f55..f4c5efb865 100644 --- 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 index d431207b07..7aa1550073 100644 --- 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 index 2741c954a0..8c247a26ff 100644 --- 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( () => ( <> + setSearchQuery(e.target.value?.trim())} + placeholder="Search hooks by title or description" + ariaLabel="Search hooks" + onClear={handleClearSearch} + /> + {isAllHooksTab && (

@@ -128,14 +136,6 @@ export function HookRegistryList({ onDismiss, isPreHook, hookToEdit, walletType )} - setSearchQuery(e.target.value?.trim())} - placeholder="Search hooks by title or description" - ariaLabel="Search hooks" - onClear={handleClearSearch} - /> - {sortedFilteredDapps.length > 0 ? ( {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 && ( - + {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 index 644ffae2b5..71734aa1bd 100644 --- 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 index e701ba1bcc..94509b169a 100644 --- 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 index 87661dc041..c02f264e6d 100644 --- 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 {isCompatible ? ( - Add + Open ) : ( diff --git a/apps/cowswap-frontend/src/modules/tradeFlow/hooks/useTradeFlowContext.ts b/apps/cowswap-frontend/src/modules/tradeFlow/hooks/useTradeFlowContext.ts index 1adf5b628e..fafa6e7594 100644 --- 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 index 283e6eb33d..0e1f7065ea 100644 --- 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 index 1d8092f525..1888b6d921 100644 --- 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'