fix: show full network name in confirm tx panel

components/brave_wallet_ui/common/async/__mocks__/lib.ts

@@ -4,7 +4,7 @@
 // you can obtain one at http://mozilla.org/MPL/2.0/.
 
 import { mockBasicAttentionToken, mockEthToken } from '../../../stories/mock-data/mock-asset-options'
-import { BraveWallet, GetChecksumEthAddressReturnInfo, GetEthAddrReturnInfo } from '../../../constants/types'
+import { BraveWallet, GetBlockchainTokenInfoReturnInfo, GetChecksumEthAddressReturnInfo, GetEthAddrReturnInfo } from '../../../constants/types'
 import { HardwareWalletConnectOpts } from '../../../components/desktop/popup-modals/add-account-modal/hardware-wallet-connect/types'
 
 let mockedAllowance = '1000000000000000000' // 1 unit
@@ -122,3 +122,9 @@ export const getBalance = (): Promise<string> => {
 export const getBuyAssetUrl = () => {
   return 'brave.com'
 }
+
+export const getBlockchainTokenInfo = async (contractAddress: string): Promise<GetBlockchainTokenInfoReturnInfo> => {
+  return {
+    token: mockBasicAttentionToken
+  }
+}

components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.stories.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) 2022 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 WalletPanelStory from '../../../stories/wrappers/wallet-panel-story-wrapper'
+
+import { ConfirmTransactionPanel } from './confirm-transaction-panel'
+
+export const _ConfirmTransactionPanel = () => {
+  return <WalletPanelStory>
+    <ConfirmTransactionPanel
+      onConfirm={() => ''}
+      onReject={() => ''}
+    />
+  </WalletPanelStory>
+}
+
+_ConfirmTransactionPanel.storyName = 'Confirm Transaction Panel'
+
+export default _ConfirmTransactionPanel

components/brave_wallet_ui/components/extension/confirm-transaction-panel/index.tsx → components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx

@@ -10,7 +10,6 @@ import { WalletState } from '../../../constants/types'
 
 // Utils
 import { reduceAddress } from '../../../utils/reduce-address'
-import { reduceNetworkDisplayName } from '../../../utils/network-utils'
 import Amount from '../../../utils/amount'
 import { getLocale } from '../../../../common/locale'
 
@@ -23,7 +22,7 @@ import Tooltip from '../../shared/tooltip/index'
 import withPlaceholderIcon from '../../shared/create-placeholder-icon'
 
 // Components
-import { PanelTab, TransactionDetailBox } from '../'
+import { PanelTab, TransactionDetailBox } from '..'
 import EditAllowance from '../edit-allowance'
 import AdvancedTransactionSettingsButton from '../advanced-transaction-settings/button'
 import AdvancedTransactionSettings from '../advanced-transaction-settings'
@@ -79,16 +78,22 @@ export interface Props {
 
 const AssetIconWithPlaceholder = withPlaceholderIcon(AssetIcon, { size: 'big', marginLeft: 0, marginRight: 0 })
 
-function ConfirmTransactionPanel ({
+const onClickLearnMore = () => {
+  chrome.tabs.create({ url: 'https://support.brave.com/hc/en-us/articles/5546517853325' }, () => {
+    if (chrome.runtime.lastError) {
+      console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
+    }
+  })
+}
+
+export const ConfirmTransactionPanel = ({
   onConfirm,
   onReject
-}: Props) {
+}: Props) => {
   // redux
-  const {
-    activeOrigin,
-    defaultCurrencies,
-    selectedPendingTransaction: transactionInfo
-  } = useSelector(({ wallet }: { wallet: WalletState }) => wallet)
+  const activeOrigin = useSelector(({ wallet }: { wallet: WalletState }) => wallet.activeOrigin)
+  const defaultCurrencies = useSelector(({ wallet }: { wallet: WalletState }) => wallet.defaultCurrencies)
+  const transactionInfo = useSelector(({ wallet }: { wallet: WalletState }) => wallet.selectedPendingTransaction)
 
   const originInfo = transactionInfo?.originInfo ?? activeOrigin
 
@@ -118,22 +123,15 @@ function ConfirmTransactionPanel ({
   const [isEditingAllowance, setIsEditingAllowance] = React.useState<boolean>(false)
   const [showAdvancedTransactionSettings, setShowAdvancedTransactionSettings] = React.useState<boolean>(false)
 
+  // methods
   const onSelectTab = (tab: confirmPanelTabs) => () => setSelectedTab(tab)
 
-  const onToggleEditGas = () => setIsEditing(!isEditing)
+  const onToggleEditGas = () => setIsEditing(prev => !prev)
 
-  const onToggleEditAllowance = () => setIsEditingAllowance(!isEditingAllowance)
+  const onToggleEditAllowance = () => setIsEditingAllowance(prev => !prev)
 
   const onToggleAdvancedTransactionSettings = () => {
-    setShowAdvancedTransactionSettings(!showAdvancedTransactionSettings)
-  }
-
-  const onClickLearnMore = () => {
-    chrome.tabs.create({ url: 'https://support.brave.com/hc/en-us/articles/5546517853325' }, () => {
-      if (chrome.runtime.lastError) {
-        console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
-      }
-    })
+    setShowAdvancedTransactionSettings(prev => !prev)
   }
 
   // render
@@ -176,7 +174,7 @@ function ConfirmTransactionPanel ({
   return (
     <StyledWrapper>
       <TopRow>
-        <NetworkText>{reduceNetworkDisplayName(transactionsNetwork.chainName)}</NetworkText>
+        <NetworkText>{transactionsNetwork.chainName}</NetworkText>
         {isERC20Approve &&
           <AddressAndOrb>
             <Tooltip

components/brave_wallet_ui/components/extension/index.ts

@@ -12,7 +12,7 @@ import PanelHeader from './panel-header'
 import { PanelHeaderSlim } from './panel-header-slim'
 import SignPanel from './sign-panel'
 import AllowAddChangeNetworkPanel from './allow-add-change-network-panel'
-import ConfirmTransactionPanel from './confirm-transaction-panel'
+import ConfirmTransactionPanel from './confirm-transaction-panel/confirm-transaction-panel'
 import PanelTab from './panel-tab'
 import ConnectHardwareWalletPanel from './connect-hardware-wallet-panel'
 import TransactionDetailBox from './transaction-box'

components/brave_wallet_ui/stories/mock-data/mock-wallet-state.ts

@@ -12,6 +12,7 @@ import { AllAssetsFilterOption } from '../../options/asset-filter-options'
 
 // mocks
 import { mockNetwork } from '../../common/constants/mocks'
+import { mockedErc20ApprovalTransaction } from './mock-transaction-info'
 
 const mockAccount: WalletAccountType = {
   accountType: 'Primary',
@@ -279,7 +280,7 @@ export const mockWalletState: WalletState = {
   portfolioPriceHistory: [],
   selectedAccount: mockAccount,
   selectedNetwork: mockNetworkList[0],
-  selectedPendingTransaction: undefined,
+  selectedPendingTransaction: mockedErc20ApprovalTransaction,
   selectedPortfolioTimeline: BraveWallet.AssetPriceTimeframe.OneDay,
   transactions: {},
   transactionSpotPrices: [