fix: approval action button (#3297)

src/lib/components/ActionButton.tsx

@@ -54,10 +54,17 @@ export const Overlay = styled(Row)<{ action?: boolean }>`
   ${({ action }) => action && actionCss}
 `
 
+export interface Action {
+  message: ReactNode
+  icon?: Icon
+  onClick: () => void
+  children: ReactNode
+}
+
 export interface ActionButtonProps {
   color?: Color
   disabled?: boolean
-  action?: { message: ReactNode; icon?: Icon; onClick: () => void; children: ReactNode }
+  action?: Action
   onClick: () => void
   children: ReactNode
 }

src/lib/components/Swap/Summary/index.tsx

@@ -16,7 +16,7 @@ import { formatCurrencyAmount, formatPrice } from 'utils/formatCurrencyAmount'
 import { computeRealizedPriceImpact } from 'utils/prices'
 import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
 
-import ActionButton from '../../ActionButton'
+import ActionButton, { Action } from '../../ActionButton'
 import Column from '../../Column'
 import { Header } from '../../Dialog'
 import Row from '../../Row'
@@ -112,7 +112,7 @@ export function SummaryDialog({ trade, allowedSlippage, onConfirm }: SummaryDial
     [confirmedTrade, trade]
   )
 
-  const action = useMemo(() => {
+  const action = useMemo((): Action | undefined => {
     if (doesTradeDiffer) {
       return {
         message: <Trans>Price updated</Trans>,

src/lib/components/Swap/SwapButton.tsx

@@ -22,7 +22,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import invariant from 'tiny-invariant'
 import { ExplorerDataType } from 'utils/getExplorerLink'
 
-import ActionButton from '../ActionButton'
+import ActionButton, { ActionButtonProps } from '../ActionButton'
 import Dialog from '../Dialog'
 import EtherscanLink from '../EtherscanLink'
 import Row from '../Row'
@@ -76,7 +76,7 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
     })
   }, [addTransaction, getApproval])
 
-  const actionProps = useMemo(() => {
+  const actionProps = useMemo((): Partial<ActionButtonProps> | undefined => {
     if (disabled) return { disabled: true }
 
     if (chainId && inputCurrencyAmount) {
@@ -85,7 +85,7 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
       } else if (approval === ApprovalState.PENDING) {
         return {
           disabled: true,
-          update: {
+          action: {
             message: (
               <EtherscanLink type={ExplorerDataType.TRANSACTION} data={approvalHash}>
                 <Row gap={0.25}>
@@ -102,9 +102,10 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
         }
       } else if (approval === ApprovalState.NOT_APPROVED) {
         return {
-          update: {
+          action: {
             message: <Trans>Approve {inputCurrencyAmount.currency.symbol} first</Trans>,
-            action: <Trans>Approve</Trans>,
+            onClick: addApprovalTransaction,
+            children: <Trans>Approve</Trans>,
           },
         }
       }