feat(wallet): View on Block Explorer Modal

components/brave_wallet/browser/brave_wallet_constants.h

@@ -412,6 +412,8 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletAccountsEditVisibleAssets",
      IDS_BRAVE_WALLET_ACCOUNTS_EDIT_VISIBLE_ASSETS},
     {"braveWalletAccountBalance", IDS_BRAVE_WALLET_ACCOUNT_BALANCE},
+    {"braveWalletViewAddressOn", IDS_BRAVE_WALLET_VIEW_ADDRESS_ON},
+    {"braveWalletNetworkExplorer", IDS_BRAVE_WALLET_NETWORK_EXPLORER},
     {"braveWalletAddAccountCreate", IDS_BRAVE_WALLET_ADD_ACCOUNT_CREATE},
     {"braveWalletCreateAccount", IDS_BRAVE_WALLET_CREATE_ACCOUNT},
     {"braveWalletCreateAccountButton", IDS_BRAVE_WALLET_CREATE_ACCOUNT_BUTTON},

components/brave_wallet_ui/components/desktop/card-headers/account-details-header.tsx

@@ -192,6 +192,17 @@ export const AccountDetailsHeader = (props: Props) => {
         (option: AccountButtonOptionsObjectType) => option.id !== 'privateKey'
       )
     }
+    // We are currently not able to support viewing a
+    // BTC or ZEC account on a block explorer.
+    // Link to issue https://github.com/brave/brave-browser/issues/39699
+    if (
+      account.accountId.coin === BraveWallet.CoinType.BTC ||
+      account.accountId.coin === BraveWallet.CoinType.ZEC
+    ) {
+      options = options.filter(
+        (option: AccountButtonOptionsObjectType) => option.id !== 'explorer'
+      )
+    }
     return options
   }, [account])
 

components/brave_wallet_ui/components/desktop/popup-modals/style.ts

@@ -75,6 +75,9 @@ export const Header = styled.div<{
 export const Title = styled.span`
   color: ${leo.color.text.primary};
   font: ${leo.font.heading.h2};
+  @media screen and (max-width: ${layoutPanelWidth}px) {
+    font: ${leo.font.heading.h4};
+  }
 `
 
 export const HeaderButton = styled(WalletButton)`

components/brave_wallet_ui/components/desktop/popup-modals/view_on_block_explorer_modal/network_button.tsx

@@ -0,0 +1,56 @@
+// Copyright (c) 2024 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 https://mozilla.org/MPL/2.0/.
+import * as React from 'react'
+
+// Types
+import { BraveWallet } from '../../../../constants/types'
+
+// Custom hooks
+import { useExplorer } from '../../../../common/hooks/explorer'
+
+// Utils
+import { getLocale } from '../../../../../common/locale'
+
+// Components
+import { CreateNetworkIcon } from '../../../shared/create-network-icon'
+
+// Styles
+import { Button, LaunchIcon } from './view_on_block_explorer_modal.style'
+import { Text, Row } from '../../../shared/style'
+
+interface Props {
+  network: BraveWallet.NetworkInfo
+  address: string
+}
+
+export const NetworkButton = (props: Props) => {
+  const { network, address } = props
+
+  // Hooks
+  const onClickViewOnBlockExplorer = useExplorer(network)
+
+  return (
+    <Button onClick={onClickViewOnBlockExplorer('address', address)}>
+      <Row width='unset'>
+        <CreateNetworkIcon
+          network={network}
+          marginRight={12}
+          size='big'
+        />
+        <Text
+          isBold={true}
+          textColor='primary'
+          textSize='14px'
+        >
+          {getLocale('braveWalletNetworkExplorer').replace(
+            '$1',
+            network.chainName
+          )}
+        </Text>
+      </Row>
+      <LaunchIcon />
+    </Button>
+  )
+}

components/brave_wallet_ui/components/desktop/popup-modals/view_on_block_explorer_modal/view_on_block_explorer_modal.style.ts

@@ -0,0 +1,52 @@
+// Copyright (c) 2024 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 https://mozilla.org/MPL/2.0/.
+import styled from 'styled-components'
+import * as leo from '@brave/leo/tokens/css/variables'
+import Icon from '@brave/leo/react/icon'
+
+// Shared Styled
+import { Row, WalletButton, Column, Text } from '../../../shared/style'
+
+export const StyledWrapper = styled(Column)`
+  overflow: hidden;
+`
+
+export const AccountInfoRow = styled(Row)`
+  background-color: ${leo.color.container.highlight};
+  border-radius: ${leo.radius.xl};
+  padding: 8px;
+`
+
+export const AddressText = styled(Text)`
+  word-break: break-all;
+`
+
+export const Button = styled(WalletButton)`
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background: none;
+  background-color: none;
+  outline: none;
+  border: none;
+  border-radius: ${leo.radius.m};
+  width: 100%;
+  padding: 16px;
+  --icon-display: none;
+  &:hover {
+    background-color: ${leo.color.container.highlight};
+    --icon-display: block;
+  }
+`
+
+export const LaunchIcon = styled(Icon).attrs({
+  name: 'launch'
+})`
+  display: var(--icon-display);
+  --leo-icon-size: 16px;
+  color: ${leo.color.icon.interactive};
+`

components/brave_wallet_ui/components/desktop/popup-modals/view_on_block_explorer_modal/view_on_block_explorer_modal.tsx

@@ -0,0 +1,118 @@
+// Copyright (c) 2024 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 https://mozilla.org/MPL/2.0/.
+import * as React from 'react'
+
+// Types
+import { BraveWallet } from '../../../../constants/types'
+
+// Queries
+import {
+  useGetVisibleNetworksQuery //
+} from '../../../../common/slices/api.slice'
+
+// Utils
+import { getLocale } from '../../../../../common/locale'
+import {
+  getNetworkId //
+} from '../../../../common/slices/entities/network.entity'
+
+// Components
+import { PopupModal } from '../../popup-modals/index'
+import {
+  CreateAccountIcon //
+} from '../../../shared/create-account-icon/create-account-icon'
+import { NetworkButton } from './network_button'
+
+// Styles
+import {
+  AccountInfoRow,
+  StyledWrapper,
+  AddressText
+} from './view_on_block_explorer_modal.style'
+import { Column, Text, Row, ScrollableColumn } from '../../../shared/style'
+
+interface Props {
+  account: BraveWallet.AccountInfo
+  onClose: () => void
+}
+
+export const ViewOnBlockExplorerModal = (props: Props) => {
+  const { account, onClose } = props
+
+  // Queries
+  const { data: visibleNetworks = [] } = useGetVisibleNetworksQuery()
+
+  // Memos
+  const networksByAccountCoinType = React.useMemo(() => {
+    return visibleNetworks.filter(
+      (network) => network.coin === account.accountId.coin
+    )
+  }, [visibleNetworks, account])
+
+  return (
+    <PopupModal
+      title={getLocale('braveWalletTransactionExplorer')}
+      onClose={onClose}
+      width='520px'
+    >
+      <StyledWrapper
+        fullWidth={true}
+        fullHeight={true}
+        alignItems='flex-start'
+        justifyContent='flex-start'
+        padding='0px 16px 16px 16px'
+      >
+        <AccountInfoRow
+          justifyContent='flex-start'
+          marginBottom={16}
+        >
+          <CreateAccountIcon
+            account={account}
+            size='huge'
+            marginRight={16}
+          />
+          <Column alignItems='flex-start'>
+            <Text
+              isBold={true}
+              textColor='primary'
+              textSize='14px'
+            >
+              {account.name}
+            </Text>
+            <AddressText
+              isBold={false}
+              textColor='secondary'
+              textSize='12px'
+              textAlign='left'
+            >
+              {account.address}
+            </AddressText>
+          </Column>
+        </AccountInfoRow>
+        <Row
+          padding='16px'
+          justifyContent='flex-start'
+        >
+          <Text
+            isBold={true}
+            textColor='primary'
+            textSize='14px'
+          >
+            {getLocale('braveWalletViewAddressOn')}
+          </Text>
+        </Row>
+        <ScrollableColumn>
+          {networksByAccountCoinType.map((network) => (
+            <NetworkButton
+              key={getNetworkId(network)}
+              network={network}
+              address={account.accountId.address}
+            />
+          ))}
+        </ScrollableColumn>
+      </StyledWrapper>
+    </PopupModal>
+  )
+}