fix: clean SwapProps and standardize event handler logic (#177)

* refactor: standardize conditional handler logic

* fix: swap props

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 (

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<ActionButtonProps> | 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 }

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

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) => {

src/hooks/useConditionalHandler.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'react'
+
+export function useConditionalHandler<T extends (...args: any[]) => void | boolean | Promise<boolean>>(
+  handler?: T
+): (...params: Parameters<T>) => Promise<boolean> {
+  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]
+  )
+}