From f32b5da8a1da1a7d2c4e58376425bf1889da6e24 Mon Sep 17 00:00:00 2001 From: Anirudha Bose Date: Thu, 23 Dec 2021 17:21:14 +0530 Subject: [PATCH] chore(wallet): add useExplorer hook --- .../brave_wallet_ui/common/hooks/explorer.ts | 34 +++++++++++++++++++ .../brave_wallet_ui/common/hooks/index.ts | 4 ++- .../desktop/portfolio-account-item/index.tsx | 20 +++++------ .../portfolio-transaction-item/index.tsx | 22 +++--------- .../add-suggested-token-panel/index.tsx | 25 ++++++-------- .../extension/connected-panel/index.tsx | 20 ++++------- .../transaction-detail-panel/index.tsx | 16 +++------ components/brave_wallet_ui/constants/types.ts | 5 +++ 8 files changed, 77 insertions(+), 69 deletions(-) create mode 100644 components/brave_wallet_ui/common/hooks/explorer.ts diff --git a/components/brave_wallet_ui/common/hooks/explorer.ts b/components/brave_wallet_ui/common/hooks/explorer.ts new file mode 100644 index 000000000000..6beb7f3ad70b --- /dev/null +++ b/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] + ) +} diff --git a/components/brave_wallet_ui/common/hooks/index.ts b/components/brave_wallet_ui/common/hooks/index.ts index 8cfbd5906212..3eeb37b1664f 100644 --- a/components/brave_wallet_ui/common/hooks/index.ts +++ b/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 } diff --git a/components/brave_wallet_ui/components/desktop/portfolio-account-item/index.tsx b/components/brave_wallet_ui/components/desktop/portfolio-account-item/index.tsx index c620af86e86a..a614c1a1bb23 100644 --- a/components/brave_wallet_ui/components/desktop/portfolio-account-item/index.tsx +++ b/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 && diff --git a/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx b/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx index b43056b0e8dd..8e781bb1a5f5 100644 --- a/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx +++ b/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) => { {[BraveWallet.TransactionStatus.Approved, BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Confirmed] && } diff --git a/components/brave_wallet_ui/components/extension/add-suggested-token-panel/index.tsx b/components/brave_wallet_ui/components/extension/add-suggested-token-panel/index.tsx index 475ce9615ebe..29f5e7b3b901 100644 --- a/components/brave_wallet_ui/components/extension/add-suggested-token-panel/index.tsx +++ b/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 ( @@ -65,7 +58,11 @@ function AddSuggestedTokenPanel (props: Props) { - {reduceAddress(token?.contractAddress ?? '')} + + {reduceAddress(token?.contractAddress ?? '')} + diff --git a/components/brave_wallet_ui/components/extension/connected-panel/index.tsx b/components/brave_wallet_ui/components/extension/connected-panel/index.tsx index d02ffcf16042..daeef51f0c26 100644 --- a/components/brave_wallet_ui/components/extension/connected-panel/index.tsx +++ b/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 ( @@ -140,7 +132,7 @@ const ConnectedPanel = (props: Props) => { onClickLock={onLockWallet} onClickSetting={onOpenSettings} onClickMore={onShowMore} - onClickViewOnBlockExplorer={onClickViewOnBlockExplorer} + onClickViewOnBlockExplorer={onClickViewOnBlockExplorer('address', selectedAccount.address)} showMore={showMore} /> diff --git a/components/brave_wallet_ui/components/extension/transaction-detail-panel/index.tsx b/components/brave_wallet_ui/components/extension/transaction-detail-panel/index.tsx index 3256c38f371d..4207666b1776 100644 --- a/components/brave_wallet_ui/components/extension/transaction-detail-panel/index.tsx +++ b/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) => { {getLocale('braveWalletTransactionDetailHash')} - + {reduceAddress(transaction.txHash)} diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts index 5522a3b0134c..94ef9e11756c 100644 --- a/components/brave_wallet_ui/constants/types.ts +++ b/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'