Merge pull request #13234 from brave/pr13232_fix-confirm-hardware-wal…

…let-transaction_1.39.x

fix(wallet): Confirm Hardware Wallet Transaction (uplift to 1.39.x)

components/brave_wallet_ui/common/hooks/interval.ts

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useRef } from 'react'
 
-function useInterval (callback: () => void, delay: number | null) {
+function useInterval (callback: () => void, delay: number | null, initialDelay?: number | null) {
   const savedCallback = useRef(callback)
 
   // Remember the latest callback if it changes.
@@ -15,9 +15,9 @@ function useInterval (callback: () => void, delay: number | null) {
       return
     }
 
-    const id = setInterval(() => savedCallback.current(), delay)
+    const id = setInterval(() => savedCallback.current(), initialDelay ?? delay)
     return () => clearInterval(id)
-  }, [delay])
+  }, [delay, initialDelay])
 }
 
 export default useInterval

components/brave_wallet_ui/components/extension/connect-hardware-wallet-panel/index.tsx

@@ -32,7 +32,9 @@ function ConnectHardwareWalletPanel (props: Props) {
     onClickInstructions
   } = props
 
-  const isConnected = hardwareWalletCode !== undefined && hardwareWalletCode !== 'deviceNotConnected'
+  const isConnected = React.useMemo((): boolean => {
+    return hardwareWalletCode !== undefined && hardwareWalletCode !== 'deviceNotConnected'
+  }, [hardwareWalletCode])
 
   const title = React.useMemo(() => {
     if (hardwareWalletCode === 'deviceBusy') {
@@ -46,7 +48,7 @@ function ConnectHardwareWalletPanel (props: Props) {
     return getLocale('braveWalletConnectHardwarePanelConnect').replace('$1', walletName)
   }, [hardwareWalletCode])
 
-  useInterval(retryCallable, 3000)
+  useInterval(retryCallable, 3000, !isConnected ? 5000 : null)
 
   return (
     <StyledWrapper>

components/brave_wallet_ui/constants/types.ts

@@ -242,6 +242,7 @@ export interface PanelState {
   switchChainRequest: BraveWallet.SwitchChainRequest
   hardwareWalletCode?: HardwareWalletResponseCodeType
   suggestedTokenRequest?: BraveWallet.AddSuggestTokenRequest
+  selectedTransaction: BraveWallet.TransactionInfo | undefined
 }
 
 export interface PageState {

components/brave_wallet_ui/panel/actions/wallet_panel_actions.ts

@@ -51,3 +51,4 @@ export const getEncryptionPublicKey = createAction<BraveWallet.GetEncryptionPubl
 export const getEncryptionPublicKeyProcessed = createAction<GetEncryptionPublicKeyProcessedPayload>('getEncryptionPublicKeyProcessed')
 export const decrypt = createAction<BraveWallet.DecryptRequest>('decrypt')
 export const decryptProcessed = createAction<DecryptProcessedPayload>('decryptProcessed')
+export const setSelectedTransaction = createAction<BraveWallet.TransactionInfo | undefined>('setSelectedTransaction')

components/brave_wallet_ui/panel/async/wallet_panel_async_handler.ts

@@ -259,11 +259,13 @@ handler.on(PanelActions.approveHardwareTransaction.getType(), async (store: Stor
   const hardwareAccount: HardwareInfo = found.hardware
   await navigateToConnectHardwareWallet(store)
   const apiProxy = getWalletPanelApiProxy()
-  await store.dispatch(PanelActions.navigateToMain())
   if (hardwareAccount.vendor === BraveWallet.LEDGER_HARDWARE_VENDOR) {
     const { success, error, code } = await signLedgerTransaction(apiProxy, hardwareAccount.path, txInfo)
     if (success) {
       refreshTransactionHistory(txInfo.fromAddress)
+      await store.dispatch(PanelActions.setSelectedTransaction(txInfo))
+      await store.dispatch(PanelActions.navigateTo('transactionDetails'))
+      apiProxy.panelHandler.setCloseOnDeactivate(true)
       return
     }
 
@@ -288,7 +290,9 @@ handler.on(PanelActions.approveHardwareTransaction.getType(), async (store: Stor
     const { success, error, deviceError } = await signTrezorTransaction(apiProxy, hardwareAccount.path, txInfo)
     if (success) {
       refreshTransactionHistory(txInfo.fromAddress)
-      await store.dispatch(PanelActions.navigateToMain())
+      await store.dispatch(PanelActions.setSelectedTransaction(txInfo))
+      await store.dispatch(PanelActions.navigateTo('transactionDetails'))
+      apiProxy.panelHandler.setCloseOnDeactivate(true)
       return
     }
 

components/brave_wallet_ui/panel/container.tsx

@@ -119,7 +119,8 @@ function Container (props: Props) {
     suggestedTokenRequest,
     getEncryptionPublicKeyRequest,
     decryptRequest,
-    connectingAccounts
+    connectingAccounts,
+    selectedTransaction
   } = props.panel
 
   // TODO(petemill): If initial data or UI takes a noticeable amount of time to arrive
@@ -128,7 +129,6 @@ function Container (props: Props) {
   // that loading indicator ASAP.
   const [selectedAccounts, setSelectedAccounts] = React.useState<WalletAccountType[]>([])
   const [filteredAppsList, setFilteredAppsList] = React.useState<AppsListType[]>(AppsList)
-  const [selectedTransaction, setSelectedTransaction] = React.useState<BraveWallet.TransactionInfo | undefined>()
   const [showSelectAsset, setShowSelectAsset] = React.useState<boolean>(false)
   const [buyAmount, setBuyAmount] = React.useState('')
 
@@ -358,15 +358,11 @@ function Container (props: Props) {
     }
   }
 
-  const retryHardwareOperation = () => {
-    // signMessageData by default initialized as [{ id: -1, address: '', message: '' }]
-    if (signMessageData && signMessageData.length && signMessageData[0].id !== -1) {
-      onSignData()
-    }
-    if (selectedPendingTransaction) {
-      onConfirmTransaction()
-    }
+  const onSelectTransaction = (transaction: BraveWallet.TransactionInfo) => {
+    props.walletPanelActions.setSelectedTransaction(transaction)
+    props.walletPanelActions.navigateTo('transactionDetails')
   }
+
   const onConfirmTransaction = () => {
     if (!selectedPendingTransaction) {
       return
@@ -375,9 +371,18 @@ function Container (props: Props) {
       props.walletPanelActions.approveHardwareTransaction(selectedPendingTransaction)
     } else {
       props.walletActions.approveTransaction(selectedPendingTransaction)
+      onSelectTransaction(selectedPendingTransaction)
     }
+  }
 
-    onSelectTransaction(selectedPendingTransaction)
+  const retryHardwareOperation = () => {
+    // signMessageData by default initialized as [{ id: -1, address: '', message: '' }]
+    if (signMessageData && signMessageData.length && signMessageData[0].id !== -1) {
+      onSignData()
+    }
+    if (selectedPendingTransaction) {
+      onConfirmTransaction()
+    }
   }
 
   const onOpenSettings = () => {
@@ -443,11 +448,6 @@ function Container (props: Props) {
     })
   }
 
-  const onSelectTransaction = (transaction: BraveWallet.TransactionInfo) => {
-    setSelectedTransaction(transaction)
-    props.walletPanelActions.navigateTo('transactionDetails')
-  }
-
   const onRetryTransaction = (transaction: BraveWallet.TransactionInfo) => {
     props.walletActions.retryTransaction(transaction)
   }

components/brave_wallet_ui/panel/reducers/panel_reducer.ts

@@ -75,15 +75,15 @@ const defaultState: PanelState = {
     chainId: ''
   },
   hardwareWalletCode: undefined,
-  suggestedTokenRequest: undefined
+  suggestedTokenRequest: undefined,
+  selectedTransaction: undefined
 }
 
 export const createPanelReducer = (initialState: PanelState) => {
   const reducer = createReducer<PanelState>({}, initialState)
   reducer.on(PanelActions.navigateTo, (state: any, selectedPanel: string) => {
     const foundTitle = PanelTitles().find((title) => selectedPanel === title.id)
     const panelTitle = foundTitle ? foundTitle.title : ''
-
     return {
       ...state,
       selectedPanel,
@@ -154,6 +154,12 @@ export const createPanelReducer = (initialState: PanelState) => {
       suggestedTokenRequest: payload
     }
   })
+  reducer.on(PanelActions.setSelectedTransaction, (state: PanelState, payload: BraveWallet.TransactionInfo | undefined): PanelState => {
+    return {
+      ...state,
+      selectedTransaction: payload
+    }
+  })
   return reducer
 }