fix(wallet): Confirm Hardware Wallet Transaction (uplift to 1.38.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

@@ -235,6 +235,7 @@ export interface PanelState {
   switchChainRequest: BraveWallet.SwitchChainRequest
   hardwareWalletCode?: HardwareWalletResponseCodeType
   suggestedToken?: BraveWallet.BlockchainToken
+  selectedTransaction: BraveWallet.TransactionInfo | undefined
 }
 
 export interface PageState {
@@ -374,7 +375,7 @@ interface BaseTransactionParams {
   coin: BraveWallet.CoinType
 }
 
-interface BaseEthTransactionParams extends BaseTransactionParams{
+interface BaseEthTransactionParams extends BaseTransactionParams {
   gas?: string
 
   // Legacy gas pricing

components/brave_wallet_ui/panel/actions/wallet_panel_actions.ts

@@ -50,3 +50,4 @@ export const setHardwareWalletInteractionError = createAction<HardwareWalletResp
 export const cancelConnectHardwareWallet = createAction<BraveWallet.TransactionInfo>('cancelConnectHardwareWallet')
 export const addSuggestToken = createAction<BraveWallet.AddSuggestTokenRequest>('addSuggestToken')
 export const addSuggestTokenProcessed = createAction<AddSuggestTokenProcessedPayload>('addSuggestTokenProcessed')
+export const setSelectedTransaction = createAction<BraveWallet.TransactionInfo | undefined>('setSelectedTransaction')

components/brave_wallet_ui/panel/async/wallet_panel_async_handler.ts

@@ -215,12 +215,14 @@ handler.on(PanelActions.approveHardwareTransaction.getType(), async (store: Stor
   const hardwareAccount: HardwareInfo = found.hardware
   await navigateToConnectHardwareWallet(store)
   const apiProxy = getWalletPanelApiProxy()
-  await store.dispatch(PanelActions.navigateToMain())
   const coin = getCoinFromTxDataUnion(txInfo.txDataUnion)
   if (hardwareAccount.vendor === BraveWallet.LEDGER_HARDWARE_VENDOR) {
     const { success, error, code } = await signLedgerTransaction(apiProxy, hardwareAccount.path, txInfo)
     if (success) {
       refreshTransactionHistory(coin, txInfo.fromAddress)
+      await store.dispatch(PanelActions.setSelectedTransaction(txInfo))
+      await store.dispatch(PanelActions.navigateTo('transactionDetails'))
+      apiProxy.panelHandler.setCloseOnDeactivate(true)
       return
     }
 
@@ -245,7 +247,9 @@ handler.on(PanelActions.approveHardwareTransaction.getType(), async (store: Stor
     const { success, error, deviceError } = await signTrezorTransaction(apiProxy, hardwareAccount.path, txInfo)
     if (success) {
       refreshTransactionHistory(coin, 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

@@ -127,7 +127,8 @@ function Container (props: Props) {
     signMessageData,
     switchChainRequest,
     suggestedToken,
-    publicEncryptionKeyData
+    publicEncryptionKeyData,
+    selectedTransaction
   } = props.panel
 
   // TODO(petemill): If initial data or UI takes a noticeable amount of time to arrive
@@ -136,7 +137,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('')
 
@@ -461,15 +461,12 @@ function Container (props: Props) {
   const onQueueNextTransaction = () => {
     props.walletActions.queueNextTransaction()
   }
-  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
@@ -478,9 +475,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 = () => {
@@ -546,11 +552,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

@@ -35,9 +35,9 @@ const defaultState: PanelState = {
     decimals: 18,
     coin: BraveWallet.CoinType.ETH,
     data: {
-       ethData: {
+      ethData: {
         isEip1559: true
-       }
+      }
     }
   },
   swapQuote: undefined,
@@ -62,7 +62,8 @@ const defaultState: PanelState = {
     chainId: ''
   },
   hardwareWalletCode: undefined,
-  suggestedToken: undefined
+  suggestedToken: undefined,
+  selectedTransaction: undefined
 }
 
 const reducer = createReducer<PanelState>({}, defaultState)
@@ -135,4 +136,11 @@ reducer.on(PanelActions.addSuggestToken, (state: any, payload: BraveWallet.AddSu
   }
 })
 
+reducer.on(PanelActions.setSelectedTransaction, (state: PanelState, payload: BraveWallet.TransactionInfo | undefined): PanelState => {
+  return {
+    ...state,
+    selectedTransaction: payload
+  }
+})
+
 export default reducer