From 3244631f04f14df66aed37a69b37f3b0058961c9 Mon Sep 17 00:00:00 2001
From: Josh Leonard <30185185+josheleonard@users.noreply.github.com>
Date: Fri, 1 Dec 2023 12:36:29 +0000
Subject: [PATCH 1/6] chore: consolidate tx confirmation panels

---
 .../common/hooks/use-pending-transaction.ts   |   8 +-
 .../confirm-bitcoin-transaction-panel.tsx     | 193 --------------
 ...nfirm-solana-transaction-panel.stories.tsx |  32 ---
 .../confirm-solana-transaction-panel.tsx      | 235 ------------------
 .../confirm-transaction-panel.tsx             | 124 ++++++---
 .../confirm_zcash_transaction_panel.tsx       | 193 --------------
 .../brave_wallet_ui/panel/container.tsx       |  26 +-
 7 files changed, 90 insertions(+), 721 deletions(-)
 delete mode 100644 components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-bitcoin-transaction-panel.tsx
 delete mode 100644 components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-solana-transaction-panel.stories.tsx
 delete mode 100644 components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-solana-transaction-panel.tsx
 delete mode 100644 components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm_zcash_transaction_panel.tsx

diff --git a/components/brave_wallet_ui/common/hooks/use-pending-transaction.ts b/components/brave_wallet_ui/common/hooks/use-pending-transaction.ts
index 4694aa29877d..02c7919e9910 100644
--- a/components/brave_wallet_ui/common/hooks/use-pending-transaction.ts
+++ b/components/brave_wallet_ui/common/hooks/use-pending-transaction.ts
@@ -27,7 +27,9 @@ import {
   isSolanaTransaction,
   parseTransactionWithPrices,
   findTransactionToken,
-  isEthereumTransaction
+  isEthereumTransaction,
+  isZCashTransaction,
+  isBitcoinTransaction
 } from '../../utils/tx-utils'
 import { makeNetworkAsset } from '../../options/asset-options'
 
@@ -654,6 +656,8 @@ export const usePendingTransactions = () => {
     onConfirm,
     onReject,
     insufficientFundsError,
-    insufficientFundsForGasError
+    insufficientFundsForGasError,
+    isZCashTransaction: isZCashTransaction(transactionInfo),
+    isBitcoinTransaction: isBitcoinTransaction(transactionInfo)
   }
 }
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-bitcoin-transaction-panel.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-bitcoin-transaction-panel.tsx
deleted file mode 100644
index 1b95400e5aa3..000000000000
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-bitcoin-transaction-panel.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-// Copyright (c) 2023 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'
-
-// Utils
-import Amount from '../../../utils/amount'
-import { WalletSelectors } from '../../../common/selectors'
-
-// Hooks
-import { usePendingTransactions } from '../../../common/hooks/use-pending-transaction'
-import {
-  useUnsafeWalletSelector //
-} from '../../../common/hooks/use-safe-selector'
-import {
-  useGetDefaultFiatCurrencyQuery //
-} from '../../../common/slices/api.slice'
-
-// Components
-import Tooltip from '../../shared/tooltip/index'
-import CreateSiteOrigin from '../../shared/create-site-origin/index'
-import PanelTab from '../panel-tab'
-import { BitcoinTransactionInfo } from './bitcoin-transaction-info'
-import { BitcoinTransactionDetailBox } from '../transaction-box/bitcoin-transaction-detail-box'
-import { TransactionQueueSteps } from './common/queue'
-import { Footer } from './common/footer'
-
-// Styles
-import { Skeleton } from '../../shared/loading-skeleton/styles'
-import { TabRow, URLText } from '../shared-panel-styles'
-import {
-  StyledWrapper,
-  FromCircle,
-  ToCircle,
-  AccountNameText,
-  TopRow,
-  NetworkText,
-  TransactionAmountBig,
-  TransactionFiatAmountBig,
-  MessageBox,
-  TransactionTypeText,
-  AccountCircleWrapper,
-  ArrowIcon,
-  FromToRow
-} from './style'
-
-type confirmPanelTabs = 'transaction' | 'details'
-
-export const ConfirmBitcoinTransactionPanel = () => {
-  // redux
-  const activeOrigin = useUnsafeWalletSelector(WalletSelectors.activeOrigin)
-
-  // queries
-  const { data: defaultFiatCurrency = 'usd' } = useGetDefaultFiatCurrencyQuery()
-
-  // custom hooks
-  const {
-    fromAccount,
-    fromOrb,
-    toOrb,
-    transactionDetails,
-    transactionsNetwork,
-    transactionTitle,
-    selectedPendingTransaction,
-    onConfirm,
-    onReject,
-    queueNextTransaction,
-    transactionQueueNumber,
-    transactionsQueueLength
-  } = usePendingTransactions()
-  const originInfo = selectedPendingTransaction?.originInfo ?? activeOrigin
-
-  // state
-  const [selectedTab, setSelectedTab] =
-    React.useState<confirmPanelTabs>('transaction')
-
-  // methods
-  const onSelectTab = React.useCallback(
-    (tab: confirmPanelTabs) => () => setSelectedTab(tab),
-    []
-  )
-
-  // render
-  if (
-    !transactionDetails ||
-    !selectedPendingTransaction ||
-    !transactionsNetwork ||
-    !fromAccount
-  ) {
-    return (
-      <StyledWrapper>
-        <Skeleton
-          width={'100%'}
-          height={'100%'}
-          enableAnimation
-        />
-      </StyledWrapper>
-    )
-  }
-
-  return (
-    <StyledWrapper>
-      <TopRow>
-        <NetworkText>{transactionsNetwork.chainName}</NetworkText>
-        <TransactionQueueSteps
-          queueNextTransaction={queueNextTransaction}
-          transactionQueueNumber={transactionQueueNumber}
-          transactionsQueueLength={transactionsQueueLength}
-        />
-      </TopRow>
-
-      <AccountCircleWrapper>
-        <FromCircle orb={fromOrb} />
-        <ToCircle orb={toOrb} />
-      </AccountCircleWrapper>
-      <URLText>
-        <CreateSiteOrigin
-          originSpec={originInfo.originSpec}
-          eTldPlusOne={originInfo.eTldPlusOne}
-        />
-      </URLText>
-      <FromToRow>
-        <Tooltip
-          text={fromAccount.name}
-          isAddress={true}
-          position='left'
-        >
-          <AccountNameText>{fromAccount.name}</AccountNameText>
-        </Tooltip>
-
-        {transactionDetails.recipient &&
-          transactionDetails.recipient !== fromAccount.address && (
-            <>
-              <ArrowIcon />
-              <Tooltip
-                text={transactionDetails.recipient}
-                isAddress={true}
-                position='right'
-              >
-                <AccountNameText>
-                  {transactionDetails.recipientLabel}
-                </AccountNameText>
-              </Tooltip>
-            </>
-          )}
-      </FromToRow>
-
-      <TransactionTypeText>{transactionTitle}</TransactionTypeText>
-      <TransactionAmountBig>
-        {new Amount(transactionDetails.valueExact).formatAsAsset(
-          undefined,
-          transactionDetails.symbol
-        )}
-      </TransactionAmountBig>
-      <TransactionFiatAmountBig>
-        {new Amount(transactionDetails.fiatValue).formatAsFiat(
-          defaultFiatCurrency
-        )}
-      </TransactionFiatAmountBig>
-
-      <TabRow>
-        <PanelTab
-          isSelected={selectedTab === 'transaction'}
-          onSubmit={onSelectTab('transaction')}
-          text='Transaction'
-        />
-        <PanelTab
-          isSelected={selectedTab === 'details'}
-          onSubmit={onSelectTab('details')}
-          text='Details'
-        />
-      </TabRow>
-
-      <MessageBox isDetails={selectedTab === 'details'}>
-        {selectedTab === 'transaction' ? (
-          <BitcoinTransactionInfo />
-        ) : (
-          <BitcoinTransactionDetailBox
-            data={selectedPendingTransaction?.txDataUnion?.btcTxData}
-          />
-        )}
-      </MessageBox>
-      <Footer
-        onConfirm={onConfirm}
-        onReject={onReject}
-      />
-    </StyledWrapper>
-  )
-}
-
-export default ConfirmBitcoinTransactionPanel
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-solana-transaction-panel.stories.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-solana-transaction-panel.stories.tsx
deleted file mode 100644
index 4805df6c2d5b..000000000000
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-solana-transaction-panel.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// 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 https://mozilla.org/MPL/2.0/.
-
-import * as React from 'react'
-
-// components
-import { WalletPanelStory } from '../../../stories/wrappers/wallet-panel-story-wrapper'
-import { ConfirmSolanaTransactionPanel } from './confirm-solana-transaction-panel'
-
-export const _ConfirmSolanaTransactionPanel = () => {
-  return (
-    <WalletPanelStory
-      walletStateOverride={{
-        hasInitialized: true,
-        isWalletCreated: true
-      }}
-      panelStateOverride={{
-        hasInitialized: true
-      }}
-    >
-      <ConfirmSolanaTransactionPanel />
-    </WalletPanelStory>
-  )
-}
-
-_ConfirmSolanaTransactionPanel.story = {
-  name: 'Confirm Solana Transaction Panel (Sign & Send)'
-}
-
-export default _ConfirmSolanaTransactionPanel
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-solana-transaction-panel.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-solana-transaction-panel.tsx
deleted file mode 100644
index 1ae3d46a75d6..000000000000
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-solana-transaction-panel.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-// 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 https://mozilla.org/MPL/2.0/.
-
-import * as React from 'react'
-
-// Utils
-import Amount from '../../../utils/amount'
-import { getLocale } from '../../../../common/locale'
-import { WalletSelectors } from '../../../common/selectors'
-
-// Hooks
-import { usePendingTransactions } from '../../../common/hooks/use-pending-transaction'
-import {
-  useUnsafeWalletSelector //
-} from '../../../common/hooks/use-safe-selector'
-import {
-  useGetDefaultFiatCurrencyQuery //
-} from '../../../common/slices/api.slice'
-
-// Components
-import Tooltip from '../../shared/tooltip/index'
-import CreateSiteOrigin from '../../shared/create-site-origin/index'
-import PanelTab from '../panel-tab'
-import { TransactionInfo } from './transaction-info'
-import { SolanaTransactionDetailBox } from '../transaction-box/solana-transaction-detail-box'
-import { TransactionQueueSteps } from './common/queue'
-import { Footer } from './common/footer'
-
-// Styles
-import { Skeleton } from '../../shared/loading-skeleton/styles'
-import {
-  TabRow,
-  URLText,
-  WarningBox,
-  WarningTitle,
-  LearnMoreButton,
-  WarningBoxTitleRow
-} from '../shared-panel-styles'
-import {
-  StyledWrapper,
-  FromCircle,
-  ToCircle,
-  AccountNameText,
-  TopRow,
-  NetworkText,
-  TransactionAmountBig,
-  TransactionFiatAmountBig,
-  MessageBox,
-  TransactionTypeText,
-  AccountCircleWrapper,
-  ArrowIcon,
-  FromToRow
-} from './style'
-
-type confirmPanelTabs = 'transaction' | 'details'
-
-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 ConfirmSolanaTransactionPanel = () => {
-  // redux
-  const activeOrigin = useUnsafeWalletSelector(WalletSelectors.activeOrigin)
-
-  // queries
-  const { data: defaultFiatCurrency = 'usd' } = useGetDefaultFiatCurrencyQuery()
-
-  // custom hooks
-  const {
-    fromAccount,
-    fromOrb,
-    isAssociatedTokenAccountCreation,
-    toOrb,
-    transactionDetails,
-    transactionsNetwork,
-    transactionTitle,
-    isSolanaDappTransaction,
-    selectedPendingTransaction,
-    onConfirm,
-    onReject,
-    queueNextTransaction,
-    transactionQueueNumber,
-    transactionsQueueLength
-  } = usePendingTransactions()
-  const originInfo = selectedPendingTransaction?.originInfo ?? activeOrigin
-
-  // state
-  const [selectedTab, setSelectedTab] =
-    React.useState<confirmPanelTabs>('transaction')
-
-  // methods
-  const onSelectTab = React.useCallback(
-    (tab: confirmPanelTabs) => () => setSelectedTab(tab),
-    []
-  )
-
-  // render
-  if (
-    !transactionDetails ||
-    !selectedPendingTransaction ||
-    !transactionsNetwork ||
-    !fromAccount
-  ) {
-    return (
-      <StyledWrapper>
-        <Skeleton
-          width={'100%'}
-          height={'100%'}
-          enableAnimation
-        />
-      </StyledWrapper>
-    )
-  }
-
-  return (
-    <StyledWrapper>
-      <TopRow>
-        <NetworkText>{transactionsNetwork.chainName}</NetworkText>
-        <TransactionQueueSteps
-          queueNextTransaction={queueNextTransaction}
-          transactionQueueNumber={transactionQueueNumber}
-          transactionsQueueLength={transactionsQueueLength}
-        />
-      </TopRow>
-
-      <AccountCircleWrapper>
-        <FromCircle orb={fromOrb} />
-        <ToCircle orb={toOrb} />
-      </AccountCircleWrapper>
-      <URLText>
-        <CreateSiteOrigin
-          originSpec={originInfo.originSpec}
-          eTldPlusOne={originInfo.eTldPlusOne}
-        />
-      </URLText>
-      <FromToRow>
-        <Tooltip
-          text={fromAccount.address}
-          isAddress={true}
-          position='left'
-        >
-          <AccountNameText>{fromAccount.name}</AccountNameText>
-        </Tooltip>
-
-        {transactionDetails.recipient &&
-          transactionDetails.recipient !== fromAccount.address && (
-            <>
-              <ArrowIcon />
-              <Tooltip
-                text={transactionDetails.recipient}
-                isAddress={true}
-                position='right'
-              >
-                <AccountNameText>
-                  {transactionDetails.recipientLabel}
-                </AccountNameText>
-              </Tooltip>
-            </>
-          )}
-      </FromToRow>
-
-      <TransactionTypeText>{transactionTitle}</TransactionTypeText>
-
-      {!isSolanaDappTransaction && (
-        <>
-          <TransactionAmountBig>
-            {new Amount(transactionDetails.valueExact).formatAsAsset(
-              undefined,
-              transactionDetails.symbol
-            )}
-          </TransactionAmountBig>
-
-          <TransactionFiatAmountBig>
-            {new Amount(transactionDetails.fiatValue).formatAsFiat(
-              defaultFiatCurrency
-            )}
-          </TransactionFiatAmountBig>
-        </>
-      )}
-
-      {isAssociatedTokenAccountCreation && (
-        <WarningBox warningType='warning'>
-          <WarningBoxTitleRow>
-            <WarningTitle warningType='warning'>
-              {getLocale('braveWalletConfirmTransactionAccountCreationFee')}
-              <LearnMoreButton onClick={onClickLearnMore}>
-                {getLocale('braveWalletAllowAddNetworkLearnMoreButton')}
-              </LearnMoreButton>
-            </WarningTitle>
-          </WarningBoxTitleRow>
-        </WarningBox>
-      )}
-
-      <TabRow>
-        <PanelTab
-          isSelected={selectedTab === 'transaction'}
-          onSubmit={onSelectTab('transaction')}
-          text='Transaction'
-        />
-        <PanelTab
-          isSelected={selectedTab === 'details'}
-          onSubmit={onSelectTab('details')}
-          text='Details'
-        />
-      </TabRow>
-
-      <MessageBox isDetails={selectedTab === 'details'}>
-        {selectedTab === 'transaction' ? (
-          <TransactionInfo />
-        ) : (
-          <SolanaTransactionDetailBox
-            data={selectedPendingTransaction?.txDataUnion?.solanaTxData}
-            instructions={transactionDetails.instructions}
-            txType={selectedPendingTransaction.txType}
-          />
-        )}
-      </MessageBox>
-      <Footer
-        onConfirm={onConfirm}
-        onReject={onReject}
-      />
-    </StyledWrapper>
-  )
-}
-
-export default ConfirmSolanaTransactionPanel
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
index 53f4bad76664..301e64a3debc 100644
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
+++ b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
@@ -4,6 +4,7 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
+import { skipToken } from '@reduxjs/toolkit/query'
 
 // Utils
 import { reduceAddress } from '../../../utils/reduce-address'
@@ -38,6 +39,11 @@ import { Footer } from './common/footer'
 import { TransactionQueueSteps } from './common/queue'
 import { Origin } from './common/origin'
 import { EditPendingTransactionGas } from './common/gas'
+import { BitcoinTransactionInfo } from './bitcoin-transaction-info'
+import { ZCashTransactionInfo } from './zcash_transaction_info'
+import {
+  SolanaTransactionDetailBox //
+} from '../transaction-box/solana-transaction-detail-box'
 
 // Styled Components
 import {
@@ -67,13 +73,14 @@ import {
   AccountCircle,
   AddressAndOrb,
   AddressText,
-  URLText,
   WarningBox,
   WarningTitle,
   LearnMoreButton,
-  WarningBoxTitleRow
+  WarningBoxTitleRow,
+  URLText
 } from '../shared-panel-styles'
 import { Column, Row } from '../../shared/style'
+import { BitcoinTransactionDetailBox } from '../transaction-box/bitcoin-transaction-detail-box'
 
 type confirmPanelTabs = 'transaction' | 'details'
 
@@ -124,17 +131,21 @@ export const ConfirmTransactionPanel = () => {
     insufficientFundsForGasError,
     queueNextTransaction,
     transactionQueueNumber,
-    transactionsQueueLength
+    transactionsQueueLength,
+    isSolanaTransaction,
+    isBitcoinTransaction,
+    isZCashTransaction
   } = usePendingTransactions()
 
   // queries
   const { data: byteCode, isLoading } = useGetAddressByteCodeQuery(
-    {
-      address: transactionDetails?.recipient ?? '',
-      coin: transactionDetails?.coinType ?? -1,
-      chainId: transactionDetails?.chainId ?? ''
-    },
-    { skip: !transactionDetails }
+    transactionDetails && isEthereumTransaction
+      ? {
+          address: transactionDetails?.recipient ?? '',
+          coin: transactionDetails?.coinType ?? -1,
+          chainId: transactionDetails?.chainId ?? ''
+        }
+      : skipToken
   )
 
   // computed
@@ -273,6 +284,8 @@ export const ConfirmTransactionPanel = () => {
               eTldPlusOne={originInfo.eTldPlusOne}
             />
           </URLText>
+
+          {/* TODO: Compare with FromToRow */}
           <Row
             marginBottom={8}
             maxWidth={isContract ? '90%' : 'unset'}
@@ -290,35 +303,42 @@ export const ConfirmTransactionPanel = () => {
                 <AccountNameText>{fromAccount.name}</AccountNameText>
               </Tooltip>
             </Row>
-            <ArrowIcon />
-            {isContract ? (
-              <Column
-                alignItems={'flex-start'}
-                justifyContent={'flex-start'}
-              >
-                <NetworkText>
-                  {getLocale('braveWalletNFTDetailContractAddress')}
-                </NetworkText>
-                <ContractButton
-                  onClick={onClickViewOnBlockExplorer(
-                    'contract',
-                    `${transactionDetails.recipient}`
+
+            {transactionDetails.recipient &&
+              transactionDetails.recipient !== fromAccount.address && (
+                <>
+                  <ArrowIcon />
+                  {isContract ? (
+                    <Column
+                      alignItems={'flex-start'}
+                      justifyContent={'flex-start'}
+                    >
+                      <NetworkText>
+                        {getLocale('braveWalletNFTDetailContractAddress')}
+                      </NetworkText>
+                      <ContractButton
+                        onClick={onClickViewOnBlockExplorer(
+                          'contract',
+                          `${transactionDetails.recipient}`
+                        )}
+                      >
+                        {reduceAddress(transactionDetails.recipient)}{' '}
+                        <ExplorerIcon />
+                      </ContractButton>
+                    </Column>
+                  ) : (
+                    <Tooltip
+                      text={transactionDetails.recipient}
+                      isAddress={true}
+                      position='right'
+                    >
+                      <AccountNameText>
+                        {reduceAddress(transactionDetails.recipient)}
+                      </AccountNameText>
+                    </Tooltip>
                   )}
-                >
-                  {reduceAddress(transactionDetails.recipient)} <ExplorerIcon />
-                </ContractButton>
-              </Column>
-            ) : (
-              <Tooltip
-                text={transactionDetails.recipient}
-                isAddress={true}
-                position='right'
-              >
-                <AccountNameText>
-                  {reduceAddress(transactionDetails.recipient)}
-                </AccountNameText>
-              </Tooltip>
-            )}
+                </>
+              )}
           </Row>
 
           <TransactionTypeText>{transactionTitle}</TransactionTypeText>
@@ -348,6 +368,7 @@ export const ConfirmTransactionPanel = () => {
               )}
             </TransactionFiatAmountBig>
           )}
+
           {isAssociatedTokenAccountCreation && (
             <WarningBox warningType={'warning'}>
               <WarningBoxTitleRow>
@@ -384,7 +405,7 @@ export const ConfirmTransactionPanel = () => {
       <MessageBox isDetails={selectedTab === 'details'}>
         {selectedTab === 'transaction' ? (
           <>
-            {isERC20Approve && (
+            {isERC20Approve ? (
               <Erc20ApproveTransactionInfo
                 onToggleEditGas={onToggleEditGas}
                 isCurrentAllowanceUnlimited={isCurrentAllowanceUnlimited}
@@ -395,12 +416,33 @@ export const ConfirmTransactionPanel = () => {
                 insufficientFundsError={insufficientFundsError}
                 insufficientFundsForGasError={insufficientFundsForGasError}
               />
-            )}
-            {!isERC20Approve && (
-              <TransactionInfo onToggleEditGas={onToggleEditGas} />
+            ) : isZCashTransaction ? (
+              <ZCashTransactionInfo />
+            ) : isBitcoinTransaction ? (
+              <BitcoinTransactionInfo />
+            ) : (
+              // ETH, FIL, SOL
+              <TransactionInfo
+                onToggleEditGas={
+                  isSolanaTransaction ? undefined : onToggleEditGas
+                }
+              />
             )}
           </>
+        ) : isSolanaTransaction ? (
+          <SolanaTransactionDetailBox
+            data={selectedPendingTransaction?.txDataUnion?.solanaTxData}
+            instructions={transactionDetails.instructions}
+            txType={selectedPendingTransaction.txType}
+          />
+        ) : isBitcoinTransaction ? (
+          <BitcoinTransactionDetailBox
+            data={selectedPendingTransaction?.txDataUnion?.btcTxData}
+          />
+        ) : isZCashTransaction ? (
+          <ZCashTransactionInfo />
         ) : (
+          // EVM of FIL
           <TransactionDetailBox transactionInfo={selectedPendingTransaction} />
         )}
       </MessageBox>
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm_zcash_transaction_panel.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm_zcash_transaction_panel.tsx
deleted file mode 100644
index cae06e22cce6..000000000000
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm_zcash_transaction_panel.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-// Copyright (c) 2023 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'
-
-// Utils
-import Amount from '../../../utils/amount'
-import { WalletSelectors } from '../../../common/selectors'
-
-// Hooks
-import { usePendingTransactions } from '../../../common/hooks/use-pending-transaction'
-import {
-  useUnsafeWalletSelector //
-} from '../../../common/hooks/use-safe-selector'
-import {
-  useGetDefaultFiatCurrencyQuery //
-} from '../../../common/slices/api.slice'
-
-// Components
-import Tooltip from '../../shared/tooltip/index'
-import CreateSiteOrigin from '../../shared/create-site-origin/index'
-import PanelTab from '../panel-tab'
-import { TransactionQueueSteps } from './common/queue'
-import { Footer } from './common/footer'
-
-// Styles
-import { Skeleton } from '../../shared/loading-skeleton/styles'
-import { TabRow, URLText } from '../shared-panel-styles'
-import {
-  StyledWrapper,
-  FromCircle,
-  ToCircle,
-  AccountNameText,
-  TopRow,
-  NetworkText,
-  TransactionAmountBig,
-  TransactionFiatAmountBig,
-  MessageBox,
-  TransactionTypeText,
-  AccountCircleWrapper,
-  ArrowIcon,
-  FromToRow
-} from './style'
-import { ZCashTransactionInfo } from './zcash_transaction_info'
-import { ZCashTransactionDetailBox } from '../transaction-box/zcash_transaction_detail_box'
-
-type confirmPanelTabs = 'transaction' | 'details'
-
-export const ConfirmZCashTransactionPanel = () => {
-  // redux
-  const activeOrigin = useUnsafeWalletSelector(WalletSelectors.activeOrigin)
-
-  // queries
-  const { data: defaultFiatCurrency = 'usd' } = useGetDefaultFiatCurrencyQuery()
-
-  // custom hooks
-  const {
-    fromAccount,
-    fromOrb,
-    toOrb,
-    transactionDetails,
-    transactionsNetwork,
-    transactionTitle,
-    selectedPendingTransaction,
-    onConfirm,
-    onReject,
-    queueNextTransaction,
-    transactionQueueNumber,
-    transactionsQueueLength
-  } = usePendingTransactions()
-  const originInfo = selectedPendingTransaction?.originInfo ?? activeOrigin
-
-  // state
-  const [selectedTab, setSelectedTab] =
-    React.useState<confirmPanelTabs>('transaction')
-
-  // methods
-  const onSelectTab = React.useCallback(
-    (tab: confirmPanelTabs) => () => setSelectedTab(tab),
-    []
-  )
-
-  // render
-  if (
-    !transactionDetails ||
-    !selectedPendingTransaction ||
-    !transactionsNetwork ||
-    !fromAccount
-  ) {
-    return (
-      <StyledWrapper>
-        <Skeleton
-          width={'100%'}
-          height={'100%'}
-          enableAnimation
-        />
-      </StyledWrapper>
-    )
-  }
-
-  return (
-    <StyledWrapper>
-      <TopRow>
-        <NetworkText>{transactionsNetwork.chainName}</NetworkText>
-        <TransactionQueueSteps
-          queueNextTransaction={queueNextTransaction}
-          transactionQueueNumber={transactionQueueNumber}
-          transactionsQueueLength={transactionsQueueLength}
-        />
-      </TopRow>
-
-      <AccountCircleWrapper>
-        <FromCircle orb={fromOrb} />
-        <ToCircle orb={toOrb} />
-      </AccountCircleWrapper>
-      <URLText>
-        <CreateSiteOrigin
-          originSpec={originInfo.originSpec}
-          eTldPlusOne={originInfo.eTldPlusOne}
-        />
-      </URLText>
-      <FromToRow>
-        <Tooltip
-          text={fromAccount.name}
-          isAddress={true}
-          position='left'
-        >
-          <AccountNameText>{fromAccount.name}</AccountNameText>
-        </Tooltip>
-
-        {transactionDetails.recipient &&
-          transactionDetails.recipient !== fromAccount.address && (
-            <>
-              <ArrowIcon />
-              <Tooltip
-                text={transactionDetails.recipient}
-                isAddress={true}
-                position='right'
-              >
-                <AccountNameText>
-                  {transactionDetails.recipientLabel}
-                </AccountNameText>
-              </Tooltip>
-            </>
-          )}
-      </FromToRow>
-
-      <TransactionTypeText>{transactionTitle}</TransactionTypeText>
-      <TransactionAmountBig>
-        {new Amount(transactionDetails.valueExact).formatAsAsset(
-          undefined,
-          transactionDetails.symbol
-        )}
-      </TransactionAmountBig>
-      <TransactionFiatAmountBig>
-        {new Amount(transactionDetails.fiatValue).formatAsFiat(
-          defaultFiatCurrency
-        )}
-      </TransactionFiatAmountBig>
-
-      <TabRow>
-        <PanelTab
-          isSelected={selectedTab === 'transaction'}
-          onSubmit={onSelectTab('transaction')}
-          text='Transaction'
-        />
-        <PanelTab
-          isSelected={selectedTab === 'details'}
-          onSubmit={onSelectTab('details')}
-          text='Details'
-        />
-      </TabRow>
-
-      <MessageBox isDetails={selectedTab === 'details'}>
-        {selectedTab === 'transaction' ? (
-          <ZCashTransactionInfo />
-        ) : (
-          <ZCashTransactionDetailBox
-            data={selectedPendingTransaction.txDataUnion?.zecTxData}
-          />
-        )}
-      </MessageBox>
-      <Footer
-        onConfirm={onConfirm}
-        onReject={onReject}
-      />
-    </StyledWrapper>
-  )
-}
-
-export default ConfirmZCashTransactionPanel
diff --git a/components/brave_wallet_ui/panel/container.tsx b/components/brave_wallet_ui/panel/container.tsx
index 73e8c30ba9ef..695f99c44313 100644
--- a/components/brave_wallet_ui/panel/container.tsx
+++ b/components/brave_wallet_ui/panel/container.tsx
@@ -41,16 +41,6 @@ import { PanelWrapper, WelcomePanelWrapper } from './style'
 
 import { BraveWallet, WalletRoutes } from '../constants/types'
 
-import {
-  isBitcoinTransaction,
-  isEthereumTransaction,
-  isFilecoinTransaction,
-  isSolanaTransaction,
-  isZCashTransaction
-} from '../utils/tx-utils'
-import { ConfirmSolanaTransactionPanel } from '../components/extension/confirm-transaction-panel/confirm-solana-transaction-panel'
-import { ConfirmBitcoinTransactionPanel } from '../components/extension/confirm-transaction-panel/confirm-bitcoin-transaction-panel'
-import { ConfirmZCashTransactionPanel } from '../components/extension/confirm-transaction-panel/confirm_zcash_transaction_panel'
 import { SignTransactionPanel } from '../components/extension/sign-panel/sign-transaction-panel'
 import { ConfirmSwapTransaction } from '../components/extension/confirm-transaction-panel/swap'
 import { TransactionStatus } from '../components/extension/post-confirmation'
@@ -232,21 +222,7 @@ function Container() {
         height={650}
       >
         <LongWrapper>
-          {isBitcoinTransaction(selectedPendingTransaction) && (
-            <ConfirmBitcoinTransactionPanel />
-          )}
-          {isSolanaTransaction(selectedPendingTransaction) && (
-            <ConfirmSolanaTransactionPanel />
-          )}
-          {isEthereumTransaction(selectedPendingTransaction) && (
-            <ConfirmTransactionPanel />
-          )}
-          {isFilecoinTransaction(selectedPendingTransaction) && (
-            <ConfirmTransactionPanel />
-          )}
-          {isZCashTransaction(selectedPendingTransaction) && (
-            <ConfirmZCashTransactionPanel />
-          )}
+          <ConfirmTransactionPanel />
         </LongWrapper>
       </PanelWrapper>
     )

From 4bd91ce895aff5e6e414d5a67679df799554fbc4 Mon Sep 17 00:00:00 2001
From: Josh Leonard <30185185+josheleonard@users.noreply.github.com>
Date: Fri, 1 Dec 2023 14:27:00 +0000
Subject: [PATCH 2/6] chore: combine transaction-info components

---
 .../common/hooks/use-pending-transaction.ts   |  38 +-
 .../bitcoin-transaction-info.tsx              | 164 ---------
 .../confirm-transaction-panel.tsx             |  64 ++--
 .../erc-twenty-transaction-info.tsx           | 122 -------
 .../transaction-info.tsx                      | 337 ++++++++++--------
 .../zcash_transaction_info.tsx                | 219 ------------
 6 files changed, 244 insertions(+), 700 deletions(-)
 delete mode 100644 components/brave_wallet_ui/components/extension/confirm-transaction-panel/bitcoin-transaction-info.tsx
 delete mode 100644 components/brave_wallet_ui/components/extension/confirm-transaction-panel/erc-twenty-transaction-info.tsx
 delete mode 100644 components/brave_wallet_ui/components/extension/confirm-transaction-panel/zcash_transaction_info.tsx

diff --git a/components/brave_wallet_ui/common/hooks/use-pending-transaction.ts b/components/brave_wallet_ui/common/hooks/use-pending-transaction.ts
index 02c7919e9910..207d6287b4f4 100644
--- a/components/brave_wallet_ui/common/hooks/use-pending-transaction.ts
+++ b/components/brave_wallet_ui/common/hooks/use-pending-transaction.ts
@@ -24,7 +24,6 @@ import {
   accountHasInsufficientFundsForGas,
   accountHasInsufficientFundsForTransaction,
   getTransactionGasFee,
-  isSolanaTransaction,
   parseTransactionWithPrices,
   findTransactionToken,
   isEthereumTransaction,
@@ -293,7 +292,7 @@ export const usePendingTransactions = () => {
           sellTokenBalance: sellTokenBalance || '',
           tx: transactionInfo
         })
-      : undefined
+      : false
   }, [
     gasFee,
     nativeBalance,
@@ -335,23 +334,18 @@ export const usePendingTransactions = () => {
   const isERC721TransferFrom =
     transactionInfo?.txType === BraveWallet.TransactionType.ERC721TransferFrom
 
-  const isSolanaTxn = transactionInfo && isSolanaTransaction(transactionInfo)
-  const isSolanaDappTransaction =
-    transactionInfo?.txType &&
-    [
-      BraveWallet.TransactionType.SolanaDappSignAndSendTransaction,
-      BraveWallet.TransactionType.SolanaDappSignTransaction
-    ].includes(transactionInfo.txType)
+  const isSolanaDappTransaction = transactionInfo?.txType
+    ? [
+        BraveWallet.TransactionType.SolanaDappSignAndSendTransaction,
+        BraveWallet.TransactionType.SolanaDappSignTransaction
+      ].includes(transactionInfo.txType)
+    : false
 
   const isAssociatedTokenAccountCreation =
     transactionInfo?.txType ===
     BraveWallet.TransactionType
       .SolanaSPLTokenTransferWithAssociatedTokenAccountCreation
 
-  const isFilecoinTransaction =
-    transactionInfo?.txType === BraveWallet.TransactionType.Other &&
-    transactionInfo?.txDataUnion?.filTxData
-
   // methods
   const onEditAllowanceSave = React.useCallback(
     (allowance: string) => {
@@ -529,14 +523,12 @@ export const usePendingTransactions = () => {
       return true
     }
 
-    return (
-      !!transactionDetails?.sameAddressError ||
-      !!transactionDetails?.contractAddressError ||
-      insufficientFundsForGasError === undefined ||
-      insufficientFundsError === undefined ||
-      !!insufficientFundsForGasError ||
-      !!insufficientFundsError ||
-      !!transactionDetails?.missingGasLimitError
+    return Boolean(
+      transactionDetails?.sameAddressError ||
+        transactionDetails?.contractAddressError ||
+        insufficientFundsForGasError ||
+        insufficientFundsError ||
+        transactionDetails?.missingGasLimitError
     )
   }, [
     transactionDetails,
@@ -633,9 +625,9 @@ export const usePendingTransactions = () => {
     isERC721SafeTransferFrom,
     isERC721TransferFrom,
     isSolanaDappTransaction,
-    isSolanaTransaction: isSolanaTxn,
+    isSolanaTransaction: transactionDetails?.isSolanaTransaction || false,
     isAssociatedTokenAccountCreation,
-    isFilecoinTransaction,
+    isFilecoinTransaction: transactionDetails?.isFilecoinTransaction || false,
     onEditAllowanceSave,
     queueNextTransaction,
     rejectAllTransactions,
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/bitcoin-transaction-info.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/bitcoin-transaction-info.tsx
deleted file mode 100644
index 6b30f8de349e..000000000000
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/bitcoin-transaction-info.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-// Copyright (c) 2023 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'
-
-// utils
-import Amount from '../../../utils/amount'
-import { getLocale } from '../../../../common/locale'
-
-// hooks
-import { usePendingTransactions } from '../../../common/hooks/use-pending-transaction'
-import {
-  useGetDefaultFiatCurrencyQuery //
-} from '../../../common/slices/api.slice'
-
-// style
-import {
-  TransactionTitle,
-  TransactionTypeText,
-  TransactionText,
-  Divider,
-  SectionRow
-} from './style'
-import { WarningBoxTitleRow } from '../shared-panel-styles'
-import { Skeleton } from '../../shared/loading-skeleton/styles'
-import { Column } from '../../shared/style'
-
-interface TransactionInfoProps {}
-export const BitcoinTransactionInfo = (props: TransactionInfoProps) => {
-  const {
-    transactionDetails,
-    transactionsNetwork,
-    gasFee: fee,
-    insufficientFundsError,
-    insufficientFundsForGasError
-  } = usePendingTransactions()
-
-  // queries
-  const {
-    isLoading: isLoadingDefaultFiatCurrency,
-    data: defaultFiatCurrency = 'usd'
-  } = useGetDefaultFiatCurrencyQuery()
-
-  // exit early if no details
-  if (!transactionDetails) {
-    return null
-  }
-
-  const isLoadingGasFeeFiat = isLoadingDefaultFiatCurrency
-
-  /**
-   * This will need updating if we ever switch to using per-locale formatting,
-   * since `.` isn't always the decimal separator
-   */
-  const transactionValueParts = new Amount(transactionDetails.valueExact)
-    .format(undefined, true)
-    .split('.')
-
-  /**
-   * Inserts a <wbr /> tag between the integer and decimal portions of the value
-   * for wrapping
-   * This will need updating if we ever switch to using per-locale formatting
-   */
-  const transactionValueText = (
-    <span>
-      {transactionValueParts.map((part, i, { length }) => [
-        part,
-        ...(i < length - 1 ? ['.'] : []),
-        <wbr key={part} />
-      ])}
-    </span>
-  )
-
-  // render
-  return (
-    <>
-      <SectionRow>
-        <TransactionTitle>
-          {getLocale('braveWalletConfirmTransactionTransactionFee')}
-        </TransactionTitle>
-      </SectionRow>
-
-      <TransactionTypeText>
-        {(transactionsNetwork &&
-          new Amount(fee)
-            .divideByDecimals(transactionsNetwork.decimals)
-            .formatAsAsset(6, transactionsNetwork.symbol)) ||
-          ''}
-      </TransactionTypeText>
-
-      {isLoadingGasFeeFiat ? (
-        <Column
-          fullHeight
-          fullWidth
-          alignItems={'flex-start'}
-          justifyContent='flex-start'
-        >
-          <Skeleton
-            width={'40px'}
-            height={'12px'}
-            enableAnimation
-          />
-        </Column>
-      ) : (
-        <TransactionText>
-          {new Amount(transactionDetails.gasFeeFiat).formatAsFiat(
-            defaultFiatCurrency
-          )}
-        </TransactionText>
-      )}
-      <Divider />
-      <WarningBoxTitleRow>
-        <TransactionTitle>
-          {getLocale('braveWalletConfirmTransactionTotal')}{' '}
-          {getLocale('braveWalletConfirmTransactionAmountFee')}
-        </TransactionTitle>
-      </WarningBoxTitleRow>
-      <TransactionTypeText>
-        {transactionValueText} {transactionDetails.symbol}
-      </TransactionTypeText>
-      <TransactionTypeText>
-        +{' '}
-        {transactionsNetwork &&
-          new Amount(fee)
-            .divideByDecimals(transactionsNetwork.decimals)
-            .formatAsAsset(6, transactionsNetwork.symbol)}
-      </TransactionTypeText>
-
-      {isLoadingGasFeeFiat ? (
-        <Column
-          fullHeight
-          fullWidth
-          alignItems={'flex-start'}
-          justifyContent='flex-start'
-        >
-          <Skeleton
-            width={'40px'}
-            height={'12px'}
-            enableAnimation
-          />
-        </Column>
-      ) : (
-        <TransactionText hasError={false}>
-          {new Amount(transactionDetails.fiatTotal).formatAsFiat(
-            defaultFiatCurrency
-          )}
-        </TransactionText>
-      )}
-
-      {insufficientFundsForGasError && (
-        <TransactionText hasError={true}>
-          {getLocale('braveWalletSwapInsufficientFundsForGas')}
-        </TransactionText>
-      )}
-      {!insufficientFundsForGasError && insufficientFundsError && (
-        <TransactionText hasError={true}>
-          {getLocale('braveWalletSwapInsufficientBalance')}
-        </TransactionText>
-      )}
-    </>
-  )
-}
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
index 301e64a3debc..15565b823bb3 100644
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
+++ b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
@@ -32,18 +32,21 @@ import { TransactionDetailBox } from '../transaction-box/index'
 import EditAllowance from '../edit-allowance'
 import AdvancedTransactionSettingsButton from '../advanced-transaction-settings/button'
 import AdvancedTransactionSettings from '../advanced-transaction-settings'
-import { Erc20ApproveTransactionInfo } from './erc-twenty-transaction-info'
 import { TransactionInfo } from './transaction-info'
 import { NftIcon } from '../../shared/nft-icon/nft-icon'
 import { Footer } from './common/footer'
 import { TransactionQueueSteps } from './common/queue'
 import { Origin } from './common/origin'
 import { EditPendingTransactionGas } from './common/gas'
-import { BitcoinTransactionInfo } from './bitcoin-transaction-info'
-import { ZCashTransactionInfo } from './zcash_transaction_info'
 import {
   SolanaTransactionDetailBox //
 } from '../transaction-box/solana-transaction-detail-box'
+import {
+  BitcoinTransactionDetailBox //
+} from '../transaction-box/bitcoin-transaction-detail-box'
+import {
+  ZCashTransactionDetailBox //
+} from '../transaction-box/zcash_transaction_detail_box'
 
 // Styled Components
 import {
@@ -80,7 +83,6 @@ import {
   URLText
 } from '../shared-panel-styles'
 import { Column, Row } from '../../shared/style'
-import { BitcoinTransactionDetailBox } from '../transaction-box/bitcoin-transaction-detail-box'
 
 type confirmPanelTabs = 'transaction' | 'details'
 
@@ -134,7 +136,9 @@ export const ConfirmTransactionPanel = () => {
     transactionsQueueLength,
     isSolanaTransaction,
     isBitcoinTransaction,
-    isZCashTransaction
+    isZCashTransaction,
+    hasFeeEstimatesError,
+    isLoadingGasFee
   } = usePendingTransactions()
 
   // queries
@@ -404,31 +408,27 @@ export const ConfirmTransactionPanel = () => {
 
       <MessageBox isDetails={selectedTab === 'details'}>
         {selectedTab === 'transaction' ? (
-          <>
-            {isERC20Approve ? (
-              <Erc20ApproveTransactionInfo
-                onToggleEditGas={onToggleEditGas}
-                isCurrentAllowanceUnlimited={isCurrentAllowanceUnlimited}
-                currentTokenAllowance={currentTokenAllowance}
-                transactionDetails={transactionDetails}
-                transactionsNetwork={transactionsNetwork}
-                gasFee={gasFee}
-                insufficientFundsError={insufficientFundsError}
-                insufficientFundsForGasError={insufficientFundsForGasError}
-              />
-            ) : isZCashTransaction ? (
-              <ZCashTransactionInfo />
-            ) : isBitcoinTransaction ? (
-              <BitcoinTransactionInfo />
-            ) : (
-              // ETH, FIL, SOL
-              <TransactionInfo
-                onToggleEditGas={
-                  isSolanaTransaction ? undefined : onToggleEditGas
-                }
-              />
-            )}
-          </>
+          <TransactionInfo
+            onToggleEditGas={
+              isSolanaTransaction || isBitcoinTransaction
+                ? undefined
+                : onToggleEditGas
+            }
+            isZCashTransaction={isZCashTransaction}
+            isBitcoinTransaction={isBitcoinTransaction}
+            transactionDetails={transactionDetails}
+            isERC721SafeTransferFrom={isERC721SafeTransferFrom}
+            isERC721TransferFrom={isERC721TransferFrom}
+            transactionsNetwork={transactionsNetwork}
+            hasFeeEstimatesError={Boolean(hasFeeEstimatesError)}
+            isLoadingGasFee={isLoadingGasFee}
+            gasFee={gasFee}
+            insufficientFundsError={insufficientFundsError}
+            insufficientFundsForGasError={insufficientFundsForGasError}
+            isERC20Approve={isERC20Approve}
+            currentTokenAllowance={currentTokenAllowance}
+            isCurrentAllowanceUnlimited={isCurrentAllowanceUnlimited}
+          />
         ) : isSolanaTransaction ? (
           <SolanaTransactionDetailBox
             data={selectedPendingTransaction?.txDataUnion?.solanaTxData}
@@ -440,7 +440,9 @@ export const ConfirmTransactionPanel = () => {
             data={selectedPendingTransaction?.txDataUnion?.btcTxData}
           />
         ) : isZCashTransaction ? (
-          <ZCashTransactionInfo />
+          <ZCashTransactionDetailBox
+            data={selectedPendingTransaction?.txDataUnion?.zecTxData}
+          />
         ) : (
           // EVM of FIL
           <TransactionDetailBox transactionInfo={selectedPendingTransaction} />
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/erc-twenty-transaction-info.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/erc-twenty-transaction-info.tsx
deleted file mode 100644
index 86aab5669e06..000000000000
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/erc-twenty-transaction-info.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-// 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 https://mozilla.org/MPL/2.0/.
-
-import * as React from 'react'
-
-// utils
-import Amount from '../../../utils/amount'
-import { getLocale } from '../../../../common/locale'
-import {
-  useGetDefaultFiatCurrencyQuery //
-} from '../../../common/slices/api.slice'
-
-// types
-import type { ParsedTransaction } from '../../../utils/tx-utils'
-import type { BraveWallet } from '../../../constants/types'
-
-// style
-import {
-  TransactionTitle,
-  TransactionTypeText,
-  TransactionText,
-  Divider,
-  SectionRow,
-  EditButton
-} from './style'
-
-interface Erc20TransactionInfoProps {
-  currentTokenAllowance?: string
-  isCurrentAllowanceUnlimited: boolean
-  onToggleEditGas: () => void
-  transactionDetails?: ParsedTransaction
-  transactionsNetwork?: BraveWallet.NetworkInfo
-  gasFee: string
-  insufficientFundsError?: boolean
-  insufficientFundsForGasError?: boolean
-}
-
-export const Erc20ApproveTransactionInfo = ({
-  currentTokenAllowance,
-  isCurrentAllowanceUnlimited,
-  onToggleEditGas,
-  transactionDetails,
-  transactionsNetwork,
-  gasFee,
-  insufficientFundsError,
-  insufficientFundsForGasError
-}: Erc20TransactionInfoProps) => {
-  // queries
-  const { data: defaultFiatCurrency = 'usd' } = useGetDefaultFiatCurrencyQuery()
-
-  // exit early if no details
-  if (!transactionDetails) {
-    return null
-  }
-
-  // render
-  return (
-    <>
-      <SectionRow>
-        <TransactionTitle>
-          {getLocale('braveWalletAllowSpendTransactionFee')}
-        </TransactionTitle>
-        <EditButton onClick={onToggleEditGas}>
-          {getLocale('braveWalletAllowSpendEditButton')}
-        </EditButton>
-      </SectionRow>
-
-      <TransactionTypeText>
-        {transactionsNetwork &&
-          new Amount(gasFee)
-            .divideByDecimals(transactionsNetwork.decimals)
-            .formatAsAsset(6, transactionsNetwork.symbol)}
-      </TransactionTypeText>
-
-      <TransactionText hasError={false}>
-        {new Amount(transactionDetails.gasFeeFiat).formatAsFiat(
-          defaultFiatCurrency
-        )}
-      </TransactionText>
-
-      {insufficientFundsForGasError && (
-        <TransactionText hasError={true}>
-          {getLocale('braveWalletSwapInsufficientFundsForGas')}
-        </TransactionText>
-      )}
-
-      {!!insufficientFundsForGasError && insufficientFundsError && (
-        <TransactionText hasError={true}>
-          {getLocale('braveWalletSwapInsufficientBalance')}
-        </TransactionText>
-      )}
-
-      <Divider />
-
-      <TransactionTitle>
-        {getLocale('braveWalletAllowSpendCurrentAllowance')}
-      </TransactionTitle>
-      <TransactionTypeText>
-        {isCurrentAllowanceUnlimited
-          ? getLocale('braveWalletTransactionApproveUnlimited')
-          : currentTokenAllowance}{' '}
-        {transactionDetails.symbol}
-      </TransactionTypeText>
-
-      <Divider />
-
-      <TransactionTitle>
-        {getLocale('braveWalletAllowSpendProposedAllowance')}
-      </TransactionTitle>
-      <TransactionTypeText>
-        {transactionDetails.isApprovalUnlimited
-          ? getLocale('braveWalletTransactionApproveUnlimited')
-          : new Amount(transactionDetails.valueExact).formatAsAsset(
-              undefined,
-              transactionDetails.symbol
-            )}
-      </TransactionTypeText>
-    </>
-  )
-}
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/transaction-info.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/transaction-info.tsx
index 9df84c096a26..16ff8cc0176a 100644
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/transaction-info.tsx
+++ b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/transaction-info.tsx
@@ -5,12 +5,14 @@
 
 import * as React from 'react'
 
+// Types
+import { ParsedTransaction } from '../../../utils/tx-utils'
+
 // utils
 import Amount from '../../../utils/amount'
 import { getLocale } from '../../../../common/locale'
 
 // hooks
-import { usePendingTransactions } from '../../../common/hooks/use-pending-transaction'
 import {
   useGetDefaultFiatCurrencyQuery //
 } from '../../../common/slices/api.slice'
@@ -28,26 +30,50 @@ import {
 import { WarningBoxTitleRow } from '../shared-panel-styles'
 import { Skeleton } from '../../shared/loading-skeleton/styles'
 import { Column } from '../../shared/style'
+import {
+  BraveWallet,
+  SerializableSolanaTxDataSendOptions
+} from '../../../constants/types'
 
 interface TransactionInfoProps {
   onToggleEditGas?: () => void
+  transactionDetails: ParsedTransaction | undefined
+  isZCashTransaction: boolean
+  isBitcoinTransaction: boolean
+  isERC721SafeTransferFrom: boolean
+  isERC721TransferFrom: boolean
+  transactionsNetwork: BraveWallet.NetworkInfo | undefined
+  solanaSendOptions?: SerializableSolanaTxDataSendOptions
+  hasFeeEstimatesError: boolean
+  isLoadingGasFee: boolean
+  gasFee: string
+  insufficientFundsError: boolean
+  insufficientFundsForGasError: boolean
+
+  // ERC20 Approve
+  isERC20Approve?: boolean
+  currentTokenAllowance?: string
+  isCurrentAllowanceUnlimited?: boolean
 }
-export const TransactionInfo = ({ onToggleEditGas }: TransactionInfoProps) => {
-  const {
-    transactionDetails,
-    isERC721SafeTransferFrom,
-    isERC721TransferFrom,
-    isSolanaTransaction,
-    isFilecoinTransaction,
-    transactionsNetwork,
-    solanaSendOptions,
-    hasFeeEstimatesError,
-    isLoadingGasFee,
-    gasFee,
-    insufficientFundsError,
-    insufficientFundsForGasError
-  } = usePendingTransactions()
 
+export const TransactionInfo = ({
+  onToggleEditGas,
+  transactionDetails,
+  isERC721SafeTransferFrom,
+  isERC721TransferFrom,
+  transactionsNetwork,
+  solanaSendOptions,
+  hasFeeEstimatesError,
+  isLoadingGasFee,
+  gasFee,
+  insufficientFundsError,
+  insufficientFundsForGasError,
+  isZCashTransaction,
+  isBitcoinTransaction,
+  isERC20Approve,
+  isCurrentAllowanceUnlimited,
+  currentTokenAllowance
+}: TransactionInfoProps) => {
   // queries
   const {
     isLoading: isLoadingDefaultFiatCurrency,
@@ -61,51 +87,16 @@ export const TransactionInfo = ({ onToggleEditGas }: TransactionInfoProps) => {
 
   const isLoadingGasFeeFiat = isLoadingDefaultFiatCurrency || isLoadingGasFee
 
-  /**
-   * This will need updating if we ever switch to using per-locale formatting,
-   * since `.` isn't always the decimal separator
-   */
-  const transactionValueParts = (
-    !isERC721SafeTransferFrom && !isERC721TransferFrom
-      ? new Amount(transactionDetails.valueExact).format(undefined, true)
-      : transactionDetails.valueExact
-  ).split('.')
-
-  /**
-   * Inserts a <wbr /> tag between the integer and decimal portions of the value
-   * for wrapping
-   * This will need updating if we ever switch to using per-locale formatting
-   */
-  const transactionValueText = (
-    <span>
-      {transactionValueParts.map((part, i, { length }) => [
-        part,
-        ...(i < length - 1 ? ['.'] : []),
-        <wbr key={part} />
-      ])}
-    </span>
-  )
+  const { isSolanaTransaction, isFilecoinTransaction } = transactionDetails
+  const feeLocale =
+    isSolanaTransaction || isZCashTransaction || isBitcoinTransaction
+      ? 'braveWalletConfirmTransactionTransactionFee'
+      : 'braveWalletConfirmTransactionGasFee'
 
   // render
   return (
     <>
-      {!isFilecoinTransaction && (
-        <SectionRow>
-          <TransactionTitle>
-            {isSolanaTransaction
-              ? getLocale('braveWalletConfirmTransactionTransactionFee')
-              : getLocale('braveWalletConfirmTransactionGasFee')}
-          </TransactionTitle>
-
-          {!isSolanaTransaction && onToggleEditGas && (
-            <EditButton onClick={onToggleEditGas}>
-              {getLocale('braveWalletAllowSpendEditButton')}
-            </EditButton>
-          )}
-        </SectionRow>
-      )}
-
-      {isFilecoinTransaction && (
+      {isFilecoinTransaction ? (
         <>
           {transactionDetails.gasPremium && (
             <SectionColumn>
@@ -149,6 +140,20 @@ export const TransactionInfo = ({ onToggleEditGas }: TransactionInfoProps) => {
             </SectionColumn>
           )}
         </>
+      ) : (
+        <SectionRow>
+          <TransactionTitle>
+            {getLocale(
+              isERC20Approve ? 'braveWalletAllowSpendTransactionFee' : feeLocale
+            )}
+          </TransactionTitle>
+
+          {onToggleEditGas && (
+            <EditButton onClick={onToggleEditGas}>
+              {getLocale('braveWalletAllowSpendEditButton')}
+            </EditButton>
+          )}
+        </SectionRow>
       )}
 
       {hasFeeEstimatesError ? (
@@ -156,18 +161,7 @@ export const TransactionInfo = ({ onToggleEditGas }: TransactionInfoProps) => {
           {getLocale('braveWalletTransactionHasFeeEstimatesError')}
         </TransactionText>
       ) : isLoadingGasFee ? (
-        <Column
-          fullHeight
-          fullWidth
-          alignItems={'flex-start'}
-          justifyContent='flex-start'
-        >
-          <Skeleton
-            width={'40px'}
-            height={'12px'}
-            enableAnimation
-          />
-        </Column>
+        <FeeSkeleton />
       ) : (
         <TransactionTypeText>
           {(transactionsNetwork &&
@@ -179,18 +173,7 @@ export const TransactionInfo = ({ onToggleEditGas }: TransactionInfoProps) => {
       )}
 
       {hasFeeEstimatesError ? null : isLoadingGasFeeFiat ? (
-        <Column
-          fullHeight
-          fullWidth
-          alignItems={'flex-start'}
-          justifyContent='flex-start'
-        >
-          <Skeleton
-            width={'40px'}
-            height={'12px'}
-            enableAnimation
-          />
-        </Column>
+        <FeeSkeleton />
       ) : (
         <TransactionText>
           {new Amount(transactionDetails.gasFeeFiat).formatAsFiat(
@@ -198,69 +181,51 @@ export const TransactionInfo = ({ onToggleEditGas }: TransactionInfoProps) => {
           )}
         </TransactionText>
       )}
-      <Divider />
-      <WarningBoxTitleRow>
-        <TransactionTitle>
-          {getLocale('braveWalletConfirmTransactionTotal')}{' '}
-          {!isFilecoinTransaction && (
-            <>
-              {isSolanaTransaction
-                ? getLocale('braveWalletConfirmTransactionAmountFee')
-                : getLocale('braveWalletConfirmTransactionAmountGas')}
-            </>
-          )}
-        </TransactionTitle>
-      </WarningBoxTitleRow>
-      <TransactionTypeText>
-        {transactionValueText} {transactionDetails.symbol}
-      </TransactionTypeText>
-      {!isFilecoinTransaction &&
-        (hasFeeEstimatesError ? (
-          <TransactionText hasError={true}>
-            {getLocale('braveWalletTransactionHasFeeEstimatesError')}
-          </TransactionText>
-        ) : isLoadingGasFee ? (
-          <Column
-            fullHeight
-            fullWidth
-            alignItems={'flex-start'}
-            justifyContent='flex-start'
-          >
-            <Skeleton
-              width={'40px'}
-              height={'12px'}
-              enableAnimation
-            />
-          </Column>
-        ) : (
-          <TransactionTypeText>
-            +{' '}
-            {transactionsNetwork &&
-              new Amount(gasFee)
-                .divideByDecimals(transactionsNetwork.decimals)
-                .formatAsAsset(6, transactionsNetwork.symbol)}
-          </TransactionTypeText>
-        ))}
 
-      {hasFeeEstimatesError ? null : isLoadingGasFeeFiat ? (
-        <Column
-          fullHeight
-          fullWidth
-          alignItems={'flex-start'}
-          justifyContent='flex-start'
-        >
-          <Skeleton
-            width={'40px'}
-            height={'12px'}
-            enableAnimation
+      {/* TODO: ERC allowance checks */}
+
+      {!isERC20Approve && (
+        <>
+          <Divider />
+
+          <WarningBoxTitleRow>
+            <TransactionTitle>
+              {getLocale('braveWalletConfirmTransactionTotal')}{' '}
+              {!isFilecoinTransaction && getLocale(feeLocale)}
+            </TransactionTitle>
+          </WarningBoxTitleRow>
+          <TransactionValue
+            isErc721Transfer={isERC721SafeTransferFrom || isERC721TransferFrom}
+            symbol={transactionDetails.symbol}
+            valueExact={transactionDetails.valueExact}
           />
-        </Column>
-      ) : (
-        <TransactionText hasError={false}>
-          {new Amount(transactionDetails.fiatTotal).formatAsFiat(
-            defaultFiatCurrency
+
+          {isFilecoinTransaction ? null : hasFeeEstimatesError ? (
+            <TransactionText hasError>
+              {getLocale('braveWalletTransactionHasFeeEstimatesError')}
+            </TransactionText>
+          ) : isLoadingGasFee ? (
+            <FeeSkeleton />
+          ) : (
+            <TransactionTypeText>
+              +{' '}
+              {transactionsNetwork &&
+                new Amount(gasFee)
+                  .divideByDecimals(transactionsNetwork.decimals)
+                  .formatAsAsset(6, transactionsNetwork.symbol)}
+            </TransactionTypeText>
           )}
-        </TransactionText>
+
+          {hasFeeEstimatesError ? null : isLoadingGasFeeFiat ? (
+            <FeeSkeleton />
+          ) : (
+            <TransactionText>
+              {new Amount(transactionDetails.fiatTotal).formatAsFiat(
+                defaultFiatCurrency
+              )}
+            </TransactionText>
+          )}
+        </>
       )}
 
       {insufficientFundsForGasError && (
@@ -273,6 +238,37 @@ export const TransactionInfo = ({ onToggleEditGas }: TransactionInfoProps) => {
           {getLocale('braveWalletSwapInsufficientBalance')}
         </TransactionText>
       )}
+
+      {isERC20Approve && (
+        <>
+          <Divider />
+
+          <TransactionTitle>
+            {getLocale('braveWalletAllowSpendCurrentAllowance')}
+          </TransactionTitle>
+          <TransactionTypeText>
+            {isCurrentAllowanceUnlimited
+              ? getLocale('braveWalletTransactionApproveUnlimited')
+              : currentTokenAllowance}{' '}
+            {transactionDetails.symbol}
+          </TransactionTypeText>
+
+          <Divider />
+
+          <TransactionTitle>
+            {getLocale('braveWalletAllowSpendProposedAllowance')}
+          </TransactionTitle>
+          <TransactionTypeText>
+            {transactionDetails.isApprovalUnlimited
+              ? getLocale('braveWalletTransactionApproveUnlimited')
+              : new Amount(transactionDetails.valueExact).formatAsAsset(
+                  undefined,
+                  transactionDetails.symbol
+                )}
+          </TransactionTypeText>
+        </>
+      )}
+
       {solanaSendOptions && <Divider />}
       {!!Number(solanaSendOptions?.maxRetries?.maxRetries) && (
         <>
@@ -307,3 +303,62 @@ export const TransactionInfo = ({ onToggleEditGas }: TransactionInfoProps) => {
     </>
   )
 }
+
+const FeeSkeleton = () => {
+  return (
+    <Column
+      fullHeight
+      fullWidth
+      alignItems={'flex-start'}
+      justifyContent='flex-start'
+    >
+      <Skeleton
+        width={'40px'}
+        height={'12px'}
+        enableAnimation
+      />
+    </Column>
+  )
+}
+
+const TransactionValue = ({
+  isErc721Transfer,
+  symbol,
+  valueExact
+}: {
+  isErc721Transfer: boolean
+  valueExact: string
+  symbol: string
+}) => {
+  /**
+   * This will need updating if we ever switch to using per-locale formatting,
+   * since `.` isn't always the decimal separator
+   */
+  const transactionValueParts = (
+    isErc721Transfer
+      ? valueExact
+      : new Amount(valueExact).format(undefined, true)
+  ).split('.')
+
+  /**
+   * Inserts a <wbr /> tag between the integer and decimal portions of the value
+   * for wrapping
+   * This will need updating if we ever switch to using per-locale formatting
+   */
+  const transactionValueText = (
+    <span>
+      {transactionValueParts.map((part, i, { length }) => [
+        part,
+        ...(i < length - 1 ? ['.'] : []),
+        <wbr key={part} />
+      ])}
+    </span>
+  )
+
+  // render
+  return (
+    <TransactionTypeText>
+      {transactionValueText} {symbol}
+    </TransactionTypeText>
+  )
+}
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/zcash_transaction_info.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/zcash_transaction_info.tsx
deleted file mode 100644
index 2e14f6a373fa..000000000000
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/zcash_transaction_info.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-// Copyright (c) 2023 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'
-
-// utils
-import Amount from '../../../utils/amount'
-import { getLocale } from '../../../../common/locale'
-
-// hooks
-import {
-  usePendingTransactions //
-} from '../../../common/hooks/use-pending-transaction'
-import {
-  useGetDefaultFiatCurrencyQuery //
-} from '../../../common/slices/api.slice'
-
-// style
-import {
-  TransactionTitle,
-  TransactionTypeText,
-  TransactionText,
-  Divider,
-  SectionRow,
-  EditButton
-} from './style'
-import { WarningBoxTitleRow } from '../shared-panel-styles'
-import { Skeleton } from '../../shared/loading-skeleton/styles'
-import { Column } from '../../shared/style'
-
-interface TransactionInfoProps {
-  onToggleEditGas?: () => void
-}
-export const ZCashTransactionInfo = ({
-  onToggleEditGas
-}: TransactionInfoProps) => {
-  const {
-    transactionDetails,
-    transactionsNetwork,
-    hasFeeEstimatesError,
-    isLoadingGasFee,
-    gasFee,
-    insufficientFundsError,
-    insufficientFundsForGasError
-  } = usePendingTransactions()
-
-  // queries
-  const {
-    isLoading: isLoadingDefaultFiatCurrency,
-    data: defaultFiatCurrency = 'usd'
-  } = useGetDefaultFiatCurrencyQuery()
-
-  // exit early if no details
-  if (!transactionDetails) {
-    return null
-  }
-
-  const isLoadingGasFeeFiat = isLoadingDefaultFiatCurrency || isLoadingGasFee
-
-  /**
-   * This will need updating if we ever switch to using per-locale formatting,
-   * since `.` isn't always the decimal separator
-   */
-  const transactionValueParts = new Amount(transactionDetails.valueExact)
-    .format(undefined, true)
-    .split('.')
-
-  /**
-   * Inserts a <wbr /> tag between the integer and decimal portions of the value
-   * for wrapping
-   * This will need updating if we ever switch to using per-locale formatting
-   */
-  const transactionValueText = (
-    <span>
-      {transactionValueParts.map((part, i, { length }) => [
-        part,
-        ...(i < length - 1 ? ['.'] : []),
-        <wbr key={part} />
-      ])}
-    </span>
-  )
-
-  // render
-  return (
-    <>
-      {
-        <SectionRow>
-          <TransactionTitle>
-            {getLocale('braveWalletConfirmTransactionTransactionFee')}
-          </TransactionTitle>
-
-          {onToggleEditGas && (
-            <EditButton onClick={onToggleEditGas}>
-              {getLocale('braveWalletAllowSpendEditButton')}
-            </EditButton>
-          )}
-        </SectionRow>
-      }
-
-      {hasFeeEstimatesError ? (
-        <TransactionText hasError={true}>
-          {getLocale('braveWalletTransactionHasFeeEstimatesError')}
-        </TransactionText>
-      ) : isLoadingGasFee ? (
-        <Column
-          fullHeight
-          fullWidth
-          alignItems={'flex-start'}
-          justifyContent='flex-start'
-        >
-          <Skeleton
-            width={'40px'}
-            height={'12px'}
-            enableAnimation
-          />
-        </Column>
-      ) : (
-        <TransactionTypeText>
-          {(transactionsNetwork &&
-            new Amount(gasFee)
-              .divideByDecimals(transactionsNetwork.decimals)
-              .formatAsAsset(6, transactionsNetwork.symbol)) ||
-            ''}
-        </TransactionTypeText>
-      )}
-
-      {hasFeeEstimatesError ? null : isLoadingGasFeeFiat ? (
-        <Column
-          fullHeight
-          fullWidth
-          alignItems={'flex-start'}
-          justifyContent='flex-start'
-        >
-          <Skeleton
-            width={'40px'}
-            height={'12px'}
-            enableAnimation
-          />
-        </Column>
-      ) : (
-        <TransactionText>
-          {new Amount(transactionDetails.gasFeeFiat).formatAsFiat(
-            defaultFiatCurrency
-          )}
-        </TransactionText>
-      )}
-      <Divider />
-      <WarningBoxTitleRow>
-        <TransactionTitle>
-          {getLocale('braveWalletConfirmTransactionTotal')}{' '}
-          {getLocale('braveWalletConfirmTransactionAmountFee')}
-        </TransactionTitle>
-      </WarningBoxTitleRow>
-      <TransactionTypeText>
-        {transactionValueText} {transactionDetails.symbol}
-      </TransactionTypeText>
-      {hasFeeEstimatesError ? (
-        <TransactionText hasError={true}>
-          {getLocale('braveWalletTransactionHasFeeEstimatesError')}
-        </TransactionText>
-      ) : isLoadingGasFee ? (
-        <Column
-          fullHeight
-          fullWidth
-          alignItems={'flex-start'}
-          justifyContent='flex-start'
-        >
-          <Skeleton
-            width={'40px'}
-            height={'12px'}
-            enableAnimation
-          />
-        </Column>
-      ) : (
-        <TransactionTypeText>
-          +{' '}
-          {transactionsNetwork &&
-            new Amount(gasFee)
-              .divideByDecimals(transactionsNetwork.decimals)
-              .formatAsAsset(6, transactionsNetwork.symbol)}
-        </TransactionTypeText>
-      )}
-
-      {hasFeeEstimatesError ? null : isLoadingGasFeeFiat ? (
-        <Column
-          fullHeight
-          fullWidth
-          alignItems={'flex-start'}
-          justifyContent='flex-start'
-        >
-          <Skeleton
-            width={'40px'}
-            height={'12px'}
-            enableAnimation
-          />
-        </Column>
-      ) : (
-        <TransactionText hasError={false}>
-          {new Amount(transactionDetails.fiatTotal).formatAsFiat(
-            defaultFiatCurrency
-          )}
-        </TransactionText>
-      )}
-
-      {insufficientFundsForGasError && (
-        <TransactionText hasError={true}>
-          {getLocale('braveWalletSwapInsufficientFundsForGas')}
-        </TransactionText>
-      )}
-      {!insufficientFundsForGasError && insufficientFundsError && (
-        <TransactionText hasError={true}>
-          {getLocale('braveWalletSwapInsufficientBalance')}
-        </TransactionText>
-      )}
-    </>
-  )
-}

From a7f042b4c4d4cf6b29c7a6718465899d27aabcc0 Mon Sep 17 00:00:00 2001
From: Josh Leonard <30185185+josheleonard@users.noreply.github.com>
Date: Fri, 1 Dec 2023 15:34:37 +0000
Subject: [PATCH 3/6] chore: combine transaction-detail components

---
 .../confirm-transaction-panel.tsx             |  28 +--
 .../confirm-transaction-panel/style.ts        |   9 -
 .../bitcoin-transaction-detail-box.tsx        |  72 --------
 .../extension/transaction-box/index.tsx       | 173 ++++++++++++++----
 .../solana-transaction-detail-box.tsx         |  70 -------
 .../zcash_transaction_detail_box.tsx          |  58 ------
 6 files changed, 139 insertions(+), 271 deletions(-)
 delete mode 100644 components/brave_wallet_ui/components/extension/transaction-box/bitcoin-transaction-detail-box.tsx
 delete mode 100644 components/brave_wallet_ui/components/extension/transaction-box/solana-transaction-detail-box.tsx
 delete mode 100644 components/brave_wallet_ui/components/extension/transaction-box/zcash_transaction_detail_box.tsx

diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
index 15565b823bb3..3dcae68fc1ac 100644
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
+++ b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
@@ -38,15 +38,6 @@ import { Footer } from './common/footer'
 import { TransactionQueueSteps } from './common/queue'
 import { Origin } from './common/origin'
 import { EditPendingTransactionGas } from './common/gas'
-import {
-  SolanaTransactionDetailBox //
-} from '../transaction-box/solana-transaction-detail-box'
-import {
-  BitcoinTransactionDetailBox //
-} from '../transaction-box/bitcoin-transaction-detail-box'
-import {
-  ZCashTransactionDetailBox //
-} from '../transaction-box/zcash_transaction_detail_box'
 
 // Styled Components
 import {
@@ -289,7 +280,6 @@ export const ConfirmTransactionPanel = () => {
             />
           </URLText>
 
-          {/* TODO: Compare with FromToRow */}
           <Row
             marginBottom={8}
             maxWidth={isContract ? '90%' : 'unset'}
@@ -429,23 +419,11 @@ export const ConfirmTransactionPanel = () => {
             currentTokenAllowance={currentTokenAllowance}
             isCurrentAllowanceUnlimited={isCurrentAllowanceUnlimited}
           />
-        ) : isSolanaTransaction ? (
-          <SolanaTransactionDetailBox
-            data={selectedPendingTransaction?.txDataUnion?.solanaTxData}
+        ) : (
+          <TransactionDetailBox
+            transactionInfo={selectedPendingTransaction}
             instructions={transactionDetails.instructions}
-            txType={selectedPendingTransaction.txType}
           />
-        ) : isBitcoinTransaction ? (
-          <BitcoinTransactionDetailBox
-            data={selectedPendingTransaction?.txDataUnion?.btcTxData}
-          />
-        ) : isZCashTransaction ? (
-          <ZCashTransactionDetailBox
-            data={selectedPendingTransaction?.txDataUnion?.zecTxData}
-          />
-        ) : (
-          // EVM of FIL
-          <TransactionDetailBox transactionInfo={selectedPendingTransaction} />
         )}
       </MessageBox>
 
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts
index 35e1bf163b7a..810aa5342ab9 100644
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts
+++ b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts
@@ -140,15 +140,6 @@ export const TransactionTypeText = styled.span`
   text-align: left;
 `
 
-export const FromToRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  width: 100%;
-  margin-bottom: 8px;
-`
-
 export const ArrowIcon = styled(ArrowRightIcon)`
   width: auto;
   height: 16px;
diff --git a/components/brave_wallet_ui/components/extension/transaction-box/bitcoin-transaction-detail-box.tsx b/components/brave_wallet_ui/components/extension/transaction-box/bitcoin-transaction-detail-box.tsx
deleted file mode 100644
index 2a6b711ace97..000000000000
--- a/components/brave_wallet_ui/components/extension/transaction-box/bitcoin-transaction-detail-box.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// Copyright (c) 2023 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'
-
-// utils
-import { getLocale } from '../../../../common/locale'
-
-// types
-import { BraveWallet } from '../../../constants/types'
-
-import {
-  BitcoinDetailColumn,
-  BitcoinDetailLine,
-  CodeSnippet,
-  CodeSnippetText
-} from './style'
-
-interface Props {
-  data: BraveWallet.BtcTxData | undefined
-}
-
-// TODO(apaymyshev): better design for this
-// TODO(apaymyshev): strings localization.
-export const BitcoinTransactionDetailBox = ({ data }: Props) => {
-  if (!data) {
-    return (
-      <CodeSnippet>
-        <code>
-          <CodeSnippetText>
-            {getLocale('braveWalletConfirmTransactionNoData')}
-          </CodeSnippetText>
-        </code>
-      </CodeSnippet>
-    )
-  }
-
-  return (
-    <>
-      {
-        <BitcoinDetailColumn>
-          {data.inputs?.map((input, index) => {
-            return (
-              <div key={'input' + index}>
-                <BitcoinDetailLine>{`Input: ${index}`}</BitcoinDetailLine>
-                <BitcoinDetailLine>{`Value: ${input.value}`}</BitcoinDetailLine>
-                <BitcoinDetailLine>
-                  {`Address: ${input.address}`}
-                </BitcoinDetailLine>
-              </div>
-            )
-          })}
-          {data.outputs?.map((output, index) => {
-            return (
-              <div key={'output' + index}>
-                <BitcoinDetailLine>{`Output: ${index}`}</BitcoinDetailLine>
-                <BitcoinDetailLine>
-                  {`Value: ${output.value}`}
-                </BitcoinDetailLine>
-                <BitcoinDetailLine>
-                  {`Address: ${output.address}`}
-                </BitcoinDetailLine>
-              </div>
-            )
-          })}
-        </BitcoinDetailColumn>
-      }
-    </>
-  )
-}
diff --git a/components/brave_wallet_ui/components/extension/transaction-box/index.tsx b/components/brave_wallet_ui/components/extension/transaction-box/index.tsx
index 1010372f5075..93f6a8b43ed3 100644
--- a/components/brave_wallet_ui/components/extension/transaction-box/index.tsx
+++ b/components/brave_wallet_ui/components/extension/transaction-box/index.tsx
@@ -5,13 +5,28 @@
 
 import * as React from 'react'
 
-import { getLocale } from '../../../../common/locale'
-import { numberArrayToHexStr } from '../../../utils/hex-utils'
+// types
 import {
   BraveWallet,
   SerializableTransactionInfo
 } from '../../../constants/types'
 import {
+  TypedSolanaInstructionWithParams //
+} from '../../../utils/solana-instruction-utils'
+
+// utils
+import { getLocale } from '../../../../common/locale'
+import { numberArrayToHexStr } from '../../../utils/hex-utils'
+
+// components
+import {
+  SolanaTransactionInstruction //
+} from '../../shared/solana-transaction-instruction/solana-transaction-instruction'
+
+// style
+import {
+  BitcoinDetailColumn,
+  BitcoinDetailLine,
   CodeSnippet,
   CodeSnippetText,
   DetailColumn,
@@ -21,54 +36,138 @@ import {
 
 export interface Props {
   transactionInfo: SerializableTransactionInfo
+  instructions?: TypedSolanaInstructionWithParams[]
 }
 
 const txKeys = Object.keys(BraveWallet.TransactionType)
 
-export const TransactionDetailBox = (props: Props) => {
-  const { transactionInfo } = props
-  const { txArgs, txParams, txType } = transactionInfo
-  const data = transactionInfo.txDataUnion.ethTxData1559?.baseData.data || []
+export const TransactionDetailBox = ({
+  transactionInfo,
+  instructions
+}: Props) => {
+  const { txArgs, txParams, txType, txDataUnion } = transactionInfo
+
+  const solData = txDataUnion.solanaTxData
+  const btcData = txDataUnion.btcTxData
+  const zecData = txDataUnion.zecTxData
+  const dataArray = txDataUnion.ethTxData1559?.baseData.data || []
+
+  // render
+  // No Data
+  if (dataArray.length === 0 && !btcData && !zecData && !solData) {
+    return (
+      <CodeSnippet>
+        <code>
+          <CodeSnippetText>
+            {getLocale('braveWalletConfirmTransactionNoData')}
+          </CodeSnippetText>
+        </code>
+      </CodeSnippet>
+    )
+  }
+
+  // BTC
+  // TODO(apaymyshev): strings localization.
+  if (btcData) {
+    return (
+      <BitcoinDetailColumn>
+        {btcData.inputs?.map((input, index) => {
+          return (
+            <div key={'input' + index}>
+              <BitcoinDetailLine>{`Input: ${index}`}</BitcoinDetailLine>
+              <BitcoinDetailLine>{`Value: ${input.value}`}</BitcoinDetailLine>
+              <BitcoinDetailLine>{`Address: ${
+                input.address //
+              }`}</BitcoinDetailLine>
+            </div>
+          )
+        })}
+        {btcData.outputs?.map((output, index) => {
+          return (
+            <div key={'output' + index}>
+              <BitcoinDetailLine>{`Output: ${index}`}</BitcoinDetailLine>
+              <BitcoinDetailLine>{`Value: ${output.value}`}</BitcoinDetailLine>
+              <BitcoinDetailLine>
+                {`Address: ${output.address}`}
+              </BitcoinDetailLine>
+            </div>
+          )
+        })}
+      </BitcoinDetailColumn>
+    )
+  }
+
+  // ZEC
+  if (zecData) {
+    return (
+      <>
+        <DetailColumn>
+          {zecData.inputs?.map((input, index) => {
+            return (
+              <code key={index}>{`input-${input.value}-${input.address}`}</code>
+            )
+          })}
+        </DetailColumn>
+
+        <DetailColumn>
+          {zecData.outputs?.map((output, index) => {
+            return (
+              <code
+                key={index}
+              >{`output-${output.value}-${output.address}`}</code>
+            )
+          })}
+        </DetailColumn>
+      </>
+    )
+  }
+
+  // SOL, EVM & FIL
   return (
     <>
-      {data.length === 0 ? (
-        <CodeSnippet>
-          <code>
-            <CodeSnippetText>
-              {getLocale('braveWalletConfirmTransactionNoData')}
-            </CodeSnippetText>
-          </code>
-        </CodeSnippet>
-      ) : (
-        <>
+      {solData || dataArray ? (
+        <DetailColumn>
+          <TransactionText>
+            {getLocale('braveWalletTransactionDetailBoxFunction')}:
+          </TransactionText>
+          <DetailText>{txKeys[txType]}</DetailText>
+        </DetailColumn>
+      ) : null}
+
+      {
+        // SOL
+        instructions?.length ? (
           <DetailColumn>
-            <TransactionText>
-              {getLocale('braveWalletTransactionDetailBoxFunction')}:
-            </TransactionText>
-            <DetailText>{txKeys[txType]}</DetailText>
+            {instructions?.map((instruction, index) => {
+              return (
+                <SolanaTransactionInstruction
+                  key={index}
+                  typedInstructionWithParams={instruction}
+                />
+              )
+            })}
           </DetailColumn>
-          {txType !== BraveWallet.TransactionType.Other &&
-            txParams.map((param, i) => (
-              <CodeSnippet key={i}>
-                <code>
-                  <CodeSnippetText>
-                    {param}: {txArgs[i]}
-                  </CodeSnippetText>
-                </code>
-              </CodeSnippet>
-            ))}
-
-          {txType === BraveWallet.TransactionType.Other && (
-            <CodeSnippet>
+        ) : // FIL & EVM
+        txType === BraveWallet.TransactionType.Other ? (
+          <CodeSnippet>
+            <code>
+              <CodeSnippetText>
+                {`0x${numberArrayToHexStr(dataArray)}`}
+              </CodeSnippetText>
+            </code>
+          </CodeSnippet>
+        ) : (
+          txParams.map((param, i) => (
+            <CodeSnippet key={i}>
               <code>
                 <CodeSnippetText>
-                  {`0x${numberArrayToHexStr(data)}`}
+                  {param}: {txArgs[i]}
                 </CodeSnippetText>
               </code>
             </CodeSnippet>
-          )}
-        </>
-      )}
+          ))
+        )
+      }
     </>
   )
 }
diff --git a/components/brave_wallet_ui/components/extension/transaction-box/solana-transaction-detail-box.tsx b/components/brave_wallet_ui/components/extension/transaction-box/solana-transaction-detail-box.tsx
deleted file mode 100644
index 8604604cfd81..000000000000
--- a/components/brave_wallet_ui/components/extension/transaction-box/solana-transaction-detail-box.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-// 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 https://mozilla.org/MPL/2.0/.
-
-import * as React from 'react'
-
-// utils
-import { getLocale } from '../../../../common/locale'
-
-// types
-import { BraveWallet, SerializableSolanaTxData } from '../../../constants/types'
-import { TypedSolanaInstructionWithParams } from '../../../utils/solana-instruction-utils'
-
-import {
-  CodeSnippet,
-  CodeSnippetText,
-  DetailColumn,
-  DetailText,
-  TransactionText
-} from './style'
-import SolanaTransactionInstruction from '../../shared/solana-transaction-instruction/solana-transaction-instruction'
-
-export interface Props {
-  data: SerializableSolanaTxData | undefined
-  instructions: TypedSolanaInstructionWithParams[] | undefined
-  txType: BraveWallet.TransactionType
-}
-
-const txKeys = Object.keys(BraveWallet.TransactionType)
-
-export const SolanaTransactionDetailBox = ({
-  data,
-  instructions,
-  txType
-}: Props) => {
-  if (!data) {
-    return (
-      <CodeSnippet>
-        <code>
-          <CodeSnippetText>
-            {getLocale('braveWalletConfirmTransactionNoData')}
-          </CodeSnippetText>
-        </code>
-      </CodeSnippet>
-    )
-  }
-
-  return (
-    <>
-      <DetailColumn>
-        <TransactionText>
-          {getLocale('braveWalletTransactionDetailBoxFunction')}:
-        </TransactionText>
-        <DetailText>{txKeys[txType]}</DetailText>
-      </DetailColumn>
-
-      <DetailColumn>
-        {instructions?.map((instruction, index) => {
-          return (
-            <SolanaTransactionInstruction
-              key={index}
-              typedInstructionWithParams={instruction}
-            />
-          )
-        })}
-      </DetailColumn>
-    </>
-  )
-}
diff --git a/components/brave_wallet_ui/components/extension/transaction-box/zcash_transaction_detail_box.tsx b/components/brave_wallet_ui/components/extension/transaction-box/zcash_transaction_detail_box.tsx
deleted file mode 100644
index 6817e05d6717..000000000000
--- a/components/brave_wallet_ui/components/extension/transaction-box/zcash_transaction_detail_box.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-// Copyright (c) 2023 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'
-
-// utils
-import { getLocale } from '../../../../common/locale'
-
-// types
-import { BraveWallet } from '../../../constants/types'
-
-import { CodeSnippet, CodeSnippetText, DetailColumn } from './style'
-
-interface Props {
-  data: BraveWallet.ZecTxData | undefined
-}
-
-// TODO(cypt4): better design for this
-export const ZCashTransactionDetailBox = ({ data }: Props) => {
-  if (!data) {
-    return (
-      <CodeSnippet>
-        <code>
-          <CodeSnippetText>
-            {getLocale('braveWalletConfirmTransactionNoData')}
-          </CodeSnippetText>
-        </code>
-      </CodeSnippet>
-    )
-  }
-
-  return (
-    <>
-      {
-        <DetailColumn>
-          {data.inputs?.map((input, index) => {
-            return (
-              <code key={index}>{`input-${input.value}-${input.address}`}</code>
-            )
-          })}
-        </DetailColumn>
-      }
-      {
-        <DetailColumn>
-          {data.outputs?.map((output, index) => {
-            return (
-              <code
-                key={index}
-              >{`output-${output.value}-${output.address}`}</code>
-            )
-          })}
-        </DetailColumn>
-      }
-    </>
-  )
-}

From 99390ef0eeaaf7a769a269a0241a49ffe6e53d39 Mon Sep 17 00:00:00 2001
From: Josh Leonard <30185185+josheleonard@users.noreply.github.com>
Date: Fri, 1 Dec 2023 15:58:23 +0000
Subject: [PATCH 4/6] fix: allow rows to wrap content

---
 components/brave_wallet_ui/components/shared/style.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/brave_wallet_ui/components/shared/style.tsx b/components/brave_wallet_ui/components/shared/style.tsx
index 06dbec74865b..7b6aca42ee69 100644
--- a/components/brave_wallet_ui/components/shared/style.tsx
+++ b/components/brave_wallet_ui/components/shared/style.tsx
@@ -110,11 +110,13 @@ export const Row = styled.div<
     padding?: number | string
     width?: '100%' | 'unset'
     marginBottom?: number | string
+    wrap?: boolean
   }
 >`
   font-family: 'Poppins';
   display: flex;
   flex-direction: row;
+  flex-wrap: ${(p) => (p.wrap ? 'wrap' : 'unset')};
   flex: ${(p) => p.flex ?? 'unset'};
   align-items: ${(p) => p.alignItems ?? 'center'};
   justify-content: ${(p) => p.justifyContent ?? 'center'};
@@ -138,6 +140,7 @@ export const Row = styled.div<
 export const Column = styled.div<
   FlexProps & {
     width?: string
+    maxWidth?: string
     height?: string
     fullWidth?: boolean
     fullHeight?: boolean
@@ -149,6 +152,7 @@ export const Column = styled.div<
   font-family: 'Poppins';
   height: ${(p) => (p.fullHeight ? '100%' : p?.height || 'unset')};
   width: ${(p) => (p.fullWidth ? '100%' : p?.width || 'unset')};
+  max-width: ${(p) => p.maxWidth || 'unset'};
   flex: ${(p) => p.flex ?? 'unset'};
   display: flex;
   flex-direction: column;

From cc2107c52d72b97b561cbb8a81403cb76540fef4 Mon Sep 17 00:00:00 2001
From: Josh Leonard <30185185+josheleonard@users.noreply.github.com>
Date: Fri, 1 Dec 2023 15:59:13 +0000
Subject: [PATCH 5/6] fix: allow tx confirm to-from row to wrap

---
 .../confirm-transaction-panel.stories.tsx     |  8 ++++++-
 .../confirm-transaction-panel.tsx             | 21 ++++++++-----------
 .../confirm-transaction-panel/style.ts        |  5 ++---
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.stories.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.stories.tsx
index ac27297f3a74..abb20f4eaf7a 100644
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.stories.tsx
+++ b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.stories.tsx
@@ -4,6 +4,8 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
+import { PanelWrapper } from '../../../panel/style'
+import { LongWrapper } from '../../../stories/style'
 import WalletPanelStory from '../../../stories/wrappers/wallet-panel-story-wrapper'
 
 import { ConfirmTransactionPanel } from './confirm-transaction-panel'
@@ -11,7 +13,11 @@ import { ConfirmTransactionPanel } from './confirm-transaction-panel'
 export const _ConfirmTransactionPanel = () => {
   return (
     <WalletPanelStory>
-      <ConfirmTransactionPanel />
+      <PanelWrapper isLonger>
+        <LongWrapper>
+          <ConfirmTransactionPanel />
+        </LongWrapper>
+      </PanelWrapper>
     </WalletPanelStory>
   )
 }
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
index 3dcae68fc1ac..84354288f2ec 100644
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
+++ b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx
@@ -283,20 +283,17 @@ export const ConfirmTransactionPanel = () => {
           <Row
             marginBottom={8}
             maxWidth={isContract ? '90%' : 'unset'}
-            width={'unset'}
+            width={'100%'}
+            gap={'8px'}
+            wrap
           >
-            <Row
-              maxWidth={isContract ? '70px' : 'unset'}
-              width={'unset'}
+            <Tooltip
+              text={fromAccount.address}
+              isAddress={true}
+              position={'left'}
             >
-              <Tooltip
-                text={fromAccount.address}
-                isAddress={true}
-                position={'left'}
-              >
-                <AccountNameText>{fromAccount.name}</AccountNameText>
-              </Tooltip>
-            </Row>
+              <AccountNameText>{fromAccount.name}</AccountNameText>
+            </Tooltip>
 
             {transactionDetails.recipient &&
               transactionDetails.recipient !== fromAccount.address && (
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts
index 810aa5342ab9..0b63f2f24479 100644
--- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts
+++ b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts
@@ -141,10 +141,9 @@ export const TransactionTypeText = styled.span`
 `
 
 export const ArrowIcon = styled(ArrowRightIcon)`
-  width: auto;
+  display: inline-block;
+  width: 16px;
   height: 16px;
-  margin-right: 6px;
-  margin-left: 6px;
   color: ${(p) => p.theme.color.text03};
 `
 

From a332123a2dc04ce38b9e938bb4df83eb13e61851 Mon Sep 17 00:00:00 2001
From: Josh Leonard <30185185+josheleonard@users.noreply.github.com>
Date: Fri, 1 Dec 2023 16:07:55 +0000
Subject: [PATCH 6/6] chore: remove max-width prop from column component

---
 components/brave_wallet_ui/components/shared/style.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/brave_wallet_ui/components/shared/style.tsx b/components/brave_wallet_ui/components/shared/style.tsx
index 7b6aca42ee69..fc8bb0fa146c 100644
--- a/components/brave_wallet_ui/components/shared/style.tsx
+++ b/components/brave_wallet_ui/components/shared/style.tsx
@@ -140,7 +140,6 @@ export const Row = styled.div<
 export const Column = styled.div<
   FlexProps & {
     width?: string
-    maxWidth?: string
     height?: string
     fullWidth?: boolean
     fullHeight?: boolean
@@ -152,7 +151,6 @@ export const Column = styled.div<
   font-family: 'Poppins';
   height: ${(p) => (p.fullHeight ? '100%' : p?.height || 'unset')};
   width: ${(p) => (p.fullWidth ? '100%' : p?.width || 'unset')};
-  max-width: ${(p) => p.maxWidth || 'unset'};
   flex: ${(p) => p.flex ?? 'unset'};
   display: flex;
   flex-direction: column;