diff --git a/src/components/ConnectWallet/ConnectWallet.tsx b/src/components/ConnectWallet/ConnectWallet.tsx index f172edc4f..fecd1f022 100644 --- a/src/components/ConnectWallet/ConnectWallet.tsx +++ b/src/components/ConnectWallet/ConnectWallet.tsx @@ -1,4 +1,5 @@ import { Trans } from '@lingui/macro' +import { useConditionalHandler } from 'hooks/useConditionalHandler' import { Wallet as WalletIcon } from 'icons' import { useAtomValue } from 'jotai/utils' import { useCallback, useState } from 'react' @@ -25,10 +26,9 @@ export default function ConnectWallet({ disabled }: ConnectWalletProps) { const [open, setOpen] = useState(false) const onClose = () => setOpen(false) - const onConnectWalletClick = useAtomValue(onConnectWalletClickAtom) + const onConnectWalletClick = useConditionalHandler(useAtomValue(onConnectWalletClickAtom)) const onClick = useCallback(async () => { - const open = await Promise.resolve(onConnectWalletClick?.()).catch(() => false) - setOpen(open ?? true) + setOpen(await onConnectWalletClick()) }, [onConnectWalletClick]) return ( diff --git a/src/components/Swap/SwapButton/index.tsx b/src/components/Swap/SwapButton/index.tsx index 7e2f89b86..cb012c411 100644 --- a/src/components/Swap/SwapButton/index.tsx +++ b/src/components/Swap/SwapButton/index.tsx @@ -6,6 +6,7 @@ import { useSwapApprovalOptimizedTrade } from 'hooks/swap/useSwapApproval' import { useSwapCallback } from 'hooks/swap/useSwapCallback' import useWrapCallback from 'hooks/swap/useWrapCallback' import { useAddTransactionInfo } from 'hooks/transactions' +import { useConditionalHandler } from 'hooks/useConditionalHandler' import { useSetOldestValidBlock } from 'hooks/useIsValidBlock' import useNativeCurrency from 'hooks/useNativeCurrency' import useTransactionDeadline from 'hooks/useTransactionDeadline' @@ -154,7 +155,7 @@ export default memo(function SwapButton({ disabled }: SwapButtonProps) { inputCurrencyBalance.lessThan(inputCurrencyAmount), [disabled, isWrap, chainId, optimizedTrade, inputCurrencyAmount, inputCurrencyBalance] ) - const { onReviewSwapClick } = useAtomValue(swapEventHandlersAtom) + const onReviewSwapClick = useConditionalHandler(useAtomValue(swapEventHandlersAtom).onReviewSwapClick) const actionProps = useMemo((): Partial | undefined => { if (disableSwap) { return { disabled: true } @@ -168,8 +169,7 @@ export default memo(function SwapButton({ disabled }: SwapButtonProps) { : trade.state === TradeState.VALID ? { onClick: async () => { - const open = await Promise.resolve(onReviewSwapClick?.())?.catch(() => false) - setOpen(open ?? true) + setOpen(await onReviewSwapClick()) }, } : { disabled: true } diff --git a/src/components/Swap/index.tsx b/src/components/Swap/index.tsx index bd3dcd9d3..90cf1f15f 100644 --- a/src/components/Swap/index.tsx +++ b/src/components/Swap/index.tsx @@ -33,13 +33,7 @@ import useValidate from './useValidate' // since the wallet connection component exists within the Swap component. // This includes useSyncWidgetEventHandlers. // TODO(zzmp): refactor WalletConnection outside of Swap component -export interface SwapProps - extends BrandingSettings, - FeeOptions, - SwapController, - SwapEventHandlers, - TokenDefaults, - WidgetEventHandlers { +export interface SwapProps extends BrandingSettings, FeeOptions, SwapEventHandlers, TokenDefaults, WidgetEventHandlers { hideConnectionUI?: boolean provider?: Eip1193Provider | JsonRpcProvider routerUrl?: string diff --git a/src/components/TokenSelect/index.tsx b/src/components/TokenSelect/index.tsx index 09c8d77fc..1b9edb78b 100644 --- a/src/components/TokenSelect/index.tsx +++ b/src/components/TokenSelect/index.tsx @@ -1,6 +1,7 @@ import { t, Trans } from '@lingui/macro' import { Currency } from '@uniswap/sdk-core' import { useWeb3React } from '@web3-react/core' +import { useConditionalHandler } from 'hooks/useConditionalHandler' import { useCurrencyBalances } from 'hooks/useCurrencyBalance' import useNativeCurrency from 'hooks/useNativeCurrency' import useTokenList, { useIsTokenListLoaded, useQueryTokens } from 'hooks/useTokenList' @@ -131,10 +132,9 @@ export default memo(function TokenSelect({ collapsed, disabled, field, onSelect, usePrefetchBalances() const [open, setOpen] = useState(false) - const { onTokenSelectorClick } = useAtomValue(swapEventHandlersAtom) + const onTokenSelectorClick = useConditionalHandler(useAtomValue(swapEventHandlersAtom).onTokenSelectorClick) const onOpen = useCallback(async () => { - const open = await Promise.resolve(onTokenSelectorClick?.(field)).catch(() => false) - setOpen(open ?? true) + setOpen(await onTokenSelectorClick(field)) }, [field, onTokenSelectorClick]) const selectAndClose = useCallback( (value: Currency) => { diff --git a/src/hooks/useConditionalHandler.ts b/src/hooks/useConditionalHandler.ts new file mode 100644 index 000000000..2becf0de1 --- /dev/null +++ b/src/hooks/useConditionalHandler.ts @@ -0,0 +1,20 @@ +import { useCallback } from 'react' + +export function useConditionalHandler void | boolean | Promise>( + handler?: T +): (...params: Parameters) => Promise { + return useCallback( + async (...params) => { + if (!handler) return true + + try { + const result = await handler(...params) + if (result === false) return false + } catch { + return false + } + return true + }, + [handler] + ) +}