Merge pull request #26967 from brave/fix-wallet-speedup-transaction

fix(wallet): Speedup Transaction

components/brave_wallet_ui/components/extension/post-confirmation/common/speed_up_alert.tsx

@@ -4,29 +4,56 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 import * as React from 'react'
 import Button from '@brave/leo/react/button'
+import { useDispatch } from 'react-redux'
+
+// Actions
+import * as WalletPanelActions from '../../../../panel/actions/wallet_panel_actions'
 
 // Utils
 import { getLocale } from '$web-common/locale'
+import { getCoinFromTxDataUnion } from '../../../../utils/network-utils'
+
+// Types
+import { SerializableTransactionInfo } from '../../../../constants/types'
+
+// Hooks
+import {
+  useSpeedupTransactionMutation //
+} from '../../../../common/slices/api.slice'
 
 // Styled Components
 import { Alert } from './common.style'
 
 interface Props {
-  onSpeedUp?: () => void
+  transaction: SerializableTransactionInfo
 }
 
 export const SpeedUpAlert = (props: Props) => {
-  const { onSpeedUp } = props
+  const { transaction } = props
+
+  // Computed
+  const txCoinType = getCoinFromTxDataUnion(transaction.txDataUnion)
+
+  // Hooks
+  const [speedupTx] = useSpeedupTransactionMutation()
+  const dispatch = useDispatch()
+
+  // Methods
+  const onClickSpeedUpTransaction = () => {
+    speedupTx({
+      coinType: txCoinType,
+      chainId: transaction.chainId,
+      transactionId: transaction.id
+    })
+    dispatch(WalletPanelActions.setSelectedTransactionId(undefined))
+  }
 
   return (
-    <Alert
-      type='info'
-      mode='simple'
-    >
+    <Alert type='info'>
       {getLocale('braveWalletTransactionTakingLongTime')}
       <div slot='content-after'>
         <Button
-          onClick={onSpeedUp}
+          onClick={onClickSpeedUpTransaction}
           kind='outline'
           size='tiny'
         >

components/brave_wallet_ui/components/extension/post-confirmation/submitted_or_signed/submitted_or_signed.tsx

@@ -94,7 +94,7 @@ export const TransactionSubmittedOrSigned = (props: Props) => {
           padding='0px 24px'
         >
           {txCoinType === BraveWallet.CoinType.ETH && showSpeedUpAlert ? (
-            <SpeedUpAlert />
+            <SpeedUpAlert transaction={transaction} />
           ) : (
             <VerticalSpace space='114px' />
           )}