From 74590b5ae9c4a93d1e282819a5ebda4b14c7ef15 Mon Sep 17 00:00:00 2001
From: Douglas Daniel <douglashdaniel@gmail.com>
Date: Thu, 16 Jan 2025 11:02:49 -0600
Subject: [PATCH] fix(wallet): Transaction Details Modal Outside Click

---
 .../transaction_details_modal/transaction_details_modal.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/transaction_details_modal/transaction_details_modal.tsx b/components/brave_wallet_ui/components/desktop/popup-modals/transaction_details_modal/transaction_details_modal.tsx
index bb4bb980a4a2..3c1eef922ff5 100644
--- a/components/brave_wallet_ui/components/desktop/popup-modals/transaction_details_modal/transaction_details_modal.tsx
+++ b/components/brave_wallet_ui/components/desktop/popup-modals/transaction_details_modal/transaction_details_modal.tsx
@@ -30,6 +30,7 @@ import {
 // Hooks
 import { useExplorer } from '../../../../common/hooks/explorer'
 import { useSwapTransactionParser } from '../../../../common/hooks/use-swap-tx-parser'
+import { useOnClickOutside } from '../../../../common/hooks/useOnClickOutside'
 
 // Types
 import {
@@ -177,6 +178,9 @@ export const TransactionDetailsModal = ({ onClose, transaction }: Props) => {
   const recipient = getTransactionToAddress(transaction)
   const approvalTarget = getTransactionApprovalTargetAddress(transaction)
 
+  // Refs
+  const transactionDetailsModalRef = React.useRef<HTMLDivElement>(null)
+
   // Queries
   const { data: defaultFiatCurrency = '' } =
     useGetDefaultFiatCurrencyQuery(undefined)
@@ -246,6 +250,7 @@ export const TransactionDetailsModal = ({ onClose, transaction }: Props) => {
   const [speedupTx] = useSpeedupTransactionMutation()
   const [retryTx] = useRetryTransactionMutation()
   const [cancelTx] = useCancelTransactionMutation()
+  useOnClickOutside(transactionDetailsModalRef, () => onClose(), true)
 
   // Methods
   const onClickRetryTransaction = () => {
@@ -413,6 +418,7 @@ export const TransactionDetailsModal = ({ onClose, transaction }: Props) => {
       onClose={onClose}
       title='Transaction Details'
       width='630px'
+      ref={transactionDetailsModalRef}
     >
       <ContentWrapper
         fullWidth={true}