chore(wallet): add useExplorer hook

components/brave_wallet_ui/common/hooks/explorer.ts

@@ -0,0 +1,34 @@
+// Copyright (c) 2021 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+import { getLocale } from '../../../common/locale'
+import { BraveWallet, BlockExplorerUrlTypes } from '../../constants/types'
+
+export default function useExplorer (network: BraveWallet.EthereumChain) {
+  return React.useCallback(
+    (type: BlockExplorerUrlTypes, value?: string) => () => {
+      const explorerURL = network.blockExplorerUrls[0]
+      if (!explorerURL || !value) {
+        alert(getLocale('braveWalletTransactionExplorerMissing'))
+        return
+      }
+
+      const url = `${explorerURL}/${type}/${value}`
+
+      if (!chrome.tabs) {
+        window.open(url, '_blank')
+      } else {
+        chrome.tabs.create({ url: url }, () => {
+          if (chrome.runtime.lastError) {
+            console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
+          }
+        })
+      }
+    },
+    [network]
+  )
+}

components/brave_wallet_ui/common/hooks/index.ts

@@ -12,6 +12,7 @@ import useAddressLabels from './address-labels'
 import usePricing from './pricing'
 import usePreset from './select-preset'
 import useTokenInfo from './token'
+import useExplorer from './explorer'
 
 export {
   useAssets,
@@ -23,5 +24,6 @@ export {
   useAddressLabels,
   useSend,
   usePreset,
-  useTokenInfo
+  useTokenInfo,
+  useExplorer
 }

components/brave_wallet_ui/components/desktop/portfolio-account-item/index.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react'
+import { create } from 'ethereum-blockies'
+
+// Hooks
+import { useExplorer } from '../../../common/hooks'
+
+// Utils
 import { reduceAddress } from '../../../utils/reduce-address'
 import { copyToClipboard } from '../../../utils/copy-to-clipboard'
 import {
   formatFiatAmountWithCommasAndDecimals,
   formatTokenAmountWithCommasAndDecimals
 } from '../../../utils/format-prices'
-import { create } from 'ethereum-blockies'
+
 import { Tooltip } from '../../shared'
 import { getLocale } from '../../../../common/locale'
 import { BraveWallet, DefaultCurrencies } from '../../../constants/types'
@@ -56,15 +62,7 @@ const PortfolioAccountItem = (props: Props) => {
     return create({ seed: address.toLowerCase(), size: 8, scale: 16 }).toDataURL()
   }, [address])
 
-  const onClickViewOnBlockExplorer = () => {
-    const exporerURL = selectedNetwork.blockExplorerUrls[0]
-    if (exporerURL && address) {
-      const url = `${exporerURL}/address/${address}`
-      window.open(url, '_blank')
-    } else {
-      alert(getLocale('braveWalletTransactionExplorerMissing'))
-    }
-  }
+  const onClickViewOnBlockExplorer = useExplorer(selectedNetwork)
 
   const onShowTransactionPopup = () => {
     setShowAccountPopup(true)
@@ -98,7 +96,7 @@ const PortfolioAccountItem = (props: Props) => {
         {showAccountPopup &&
           <TransactionPopup>
             <TransactionPopupItem
-              onClick={onClickViewOnBlockExplorer}
+              onClick={onClickViewOnBlockExplorer('address', address)}
               text={getLocale('braveWalletTransactionExplorer')}
             />
           </TransactionPopup>

components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx

@@ -14,7 +14,7 @@ import { mojoTimeDeltaToJSDate, formatDateAsRelative } from '../../../utils/date
 import { formatFiatAmountWithCommasAndDecimals } from '../../../utils/format-prices'
 
 // Hooks
-import { useTransactionParser } from '../../../common/hooks'
+import { useExplorer, useTransactionParser } from '../../../common/hooks'
 import { SwapExchangeProxy } from '../../../common/hooks/address-labels'
 
 // Styled Components
@@ -103,15 +103,7 @@ const PortfolioTransactionItem = (props: Props) => {
     }
   }
 
-  const onClickViewOnBlockExplorer = () => {
-    const explorerURL = selectedNetwork.blockExplorerUrls[0]
-    if (explorerURL && transaction.txHash) {
-      const url = `${explorerURL}/tx/${transaction.txHash}`
-      window.open(url, '_blank')
-    } else {
-      alert(getLocale('braveWalletTransactionExplorerMissing'))
-    }
-  }
+  const onClickViewOnBlockExplorer = useExplorer(selectedNetwork)
 
   const onClickRetryTransaction = () => {
     onRetryTransaction(transaction)
@@ -141,13 +133,7 @@ const PortfolioTransactionItem = (props: Props) => {
       return
     }
 
-    const explorerUrl = selectedNetwork.blockExplorerUrls[0]
-    if (explorerUrl) {
-      const url = `${explorerUrl}/address/${address}`
-      window.open(url, '_blank')
-    } else {
-      alert(getLocale('braveWalletTransactionExplorerMissing'))
-    }
+    onClickViewOnBlockExplorer('address', address)
   }
 
   const findToken = React.useCallback((symbol: string) => {
@@ -347,7 +333,7 @@ const PortfolioTransactionItem = (props: Props) => {
           <TransactionPopup>
             {[BraveWallet.TransactionStatus.Approved, BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Confirmed] &&
               <TransactionPopupItem
-                onClick={onClickViewOnBlockExplorer}
+                onClick={onClickViewOnBlockExplorer('tx', transaction.txHash)}
                 text={getLocale('braveWalletTransactionExplorer')}
               />
             }

components/brave_wallet_ui/components/extension/add-suggested-token-panel/index.tsx

@@ -17,8 +17,13 @@ import {
 import { withPlaceholderIcon, Tooltip } from '../../shared'
 import { NavButton } from '..'
 import { getLocale } from '../../../../common/locale'
+
+// Utils
 import { reduceAddress } from '../../../utils/reduce-address'
 
+// Hooks
+import { useExplorer } from '../../../common/hooks'
+
 export interface Props {
   onCancel: () => void
   onAddToken: () => void
@@ -38,19 +43,7 @@ function AddSuggestedTokenPanel (props: Props) {
     return withPlaceholderIcon(AssetIcon, { size: 'big', marginLeft: 0, marginRight: 0 })
   }, [])
 
-  const onClickViewOnBlockExplorer = () => {
-    const exporerURL = selectedNetwork.blockExplorerUrls[0]
-    if (exporerURL && token?.contractAddress) {
-      const url = `${exporerURL}/token/${token?.contractAddress ?? ''}`
-      chrome.tabs.create({ url: url }, () => {
-        if (chrome.runtime.lastError) {
-          console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
-        }
-      })
-    } else {
-      alert(getLocale('braveWalletTransactionExplorerMissing'))
-    }
-  }
+  const onClickViewOnBlockExplorer = useExplorer(selectedNetwork)
 
   return (
     <StyledWrapper>
@@ -65,7 +58,11 @@ function AddSuggestedTokenPanel (props: Props) {
         <Tooltip
           text={getLocale('braveWalletTransactionExplorer')}
         >
-          <ContractAddress onClick={onClickViewOnBlockExplorer}>{reduceAddress(token?.contractAddress ?? '')}</ContractAddress>
+          <ContractAddress
+            onClick={onClickViewOnBlockExplorer('token', token?.contractAddress)}
+          >
+            {reduceAddress(token?.contractAddress ?? '')}
+          </ContractAddress>
         </Tooltip>
       </TopWrapper>
       <ButtonWrapper>

components/brave_wallet_ui/components/extension/connected-panel/index.tsx

@@ -35,6 +35,10 @@ import {
 import { reduceAddress } from '../../../utils/reduce-address'
 import { reduceNetworkDisplayName } from '../../../utils/network-utils'
 import { copyToClipboard } from '../../../utils/copy-to-clipboard'
+
+// Hooks
+import { useExplorer } from '../../../common/hooks'
+
 import {
   WalletAccountType,
   PanelTypes,
@@ -119,19 +123,7 @@ const ConnectedPanel = (props: Props) => {
     ? formatTokenAmountWithCommasAndDecimals(formatedAssetBalance, selectedNetwork.symbol)
     : ''
 
-  const onClickViewOnBlockExplorer = () => {
-    const exporerURL = selectedNetwork.blockExplorerUrls[0]
-    if (exporerURL && selectedAccount.address) {
-      const url = `${exporerURL}/address/${selectedAccount.address}`
-      chrome.tabs.create({ url: url }, () => {
-        if (chrome.runtime.lastError) {
-          console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
-        }
-      })
-    } else {
-      alert(getLocale('braveWalletTransactionExplorerMissing'))
-    }
-  }
+  const onClickViewOnBlockExplorer = useExplorer(selectedNetwork)
 
   return (
     <StyledWrapper onClick={onHideMore} panelBackground={bg}>
@@ -140,7 +132,7 @@ const ConnectedPanel = (props: Props) => {
         onClickLock={onLockWallet}
         onClickSetting={onOpenSettings}
         onClickMore={onShowMore}
-        onClickViewOnBlockExplorer={onClickViewOnBlockExplorer}
+        onClickViewOnBlockExplorer={onClickViewOnBlockExplorer('address', selectedAccount.address)}
         showMore={showMore}
       />
       <CenterColumn>

components/brave_wallet_ui/components/extension/transaction-detail-panel/index.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import * as EthereumBlockies from 'ethereum-blockies'
-import { useTransactionParser } from '../../../common/hooks'
+
+// Hooks
+import { useExplorer, useTransactionParser } from '../../../common/hooks'
 
 // Utils
 import { reduceAddress } from '../../../utils/reduce-address'
@@ -84,15 +86,7 @@ const TransactionDetailPanel = (props: Props) => {
     return EthereumBlockies.create({ seed: transactionDetails.recipient.toLowerCase(), size: 8, scale: 16 }).toDataURL()
   }, [transactionDetails.recipient])
 
-  const onClickViewOnBlockExplorer = () => {
-    const explorerURL = selectedNetwork.blockExplorerUrls[0]
-    if (explorerURL && transaction?.txHash) {
-      const url = `${explorerURL}/tx/${transaction.txHash}`
-      window.open(url, '_blank')
-    } else {
-      alert(getLocale('braveWalletTransactionExplorerMissing'))
-    }
-  }
+  const onClickViewOnBlockExplorer = useExplorer(selectedNetwork)
 
   const onClickRetryTransaction = () => {
     if (transaction) {
@@ -179,7 +173,7 @@ const TransactionDetailPanel = (props: Props) => {
           <DetailTitle>
             {getLocale('braveWalletTransactionDetailHash')}
           </DetailTitle>
-          <DetailButton onClick={onClickViewOnBlockExplorer}>
+          <DetailButton onClick={onClickViewOnBlockExplorer('tx', transaction?.txHash)}>
             {reduceAddress(transaction.txHash)}
           </DetailButton>
         </DetailRow>

components/brave_wallet_ui/constants/types.ts

@@ -532,3 +532,8 @@ export enum WalletRoutes {
 }
 
 export const WalletOrigin = 'chrome://wallet'
+
+export type BlockExplorerUrlTypes =
+  | 'tx'
+  | 'address'
+  | 'token'