fix: add tx fee value loading indicators to panel

Author: josheleonard

components/brave_wallet/browser/brave_wallet_constants.h

@@ -42,6 +42,8 @@ constexpr char kTransakURL[] = "https://global.transak.com/";
 constexpr char kTransakApiKey[] = "985d14f0-4cf5-4a4c-8917-78107620d3b7";
 
 constexpr webui::LocalizedString kLocalizedStrings[] = {
+    {"braveWalletTransactionHasFeeEstimatesError",
+     IDS_BRAVE_WALLET_TRANSACTION_HAS_FEE_ESTIMATES_ERROR},
     {"braveWalletGasFeeLimitLowerThanBaseFeeWarning",
      IDS_BRAVE_WALLET_GAS_FEE_LIMIT_LOWER_THAN_BASE_FEE_WARNING},
     {"braveWalletTokenMintAddress", IDS_BRAVE_WALLET_TOKEN_MINT_ADDRESS},

components/brave_wallet_ui/common/actions/wallet_actions.ts

@@ -14,7 +14,6 @@
   addFilecoinAccount,
   addSitePermission,
   addUserAsset,
-  updateUserAsset,
   addUserAssetError,
   approveERC20Allowance,
   approveTransaction,
@@ -41,8 +40,8 @@
   keyringCreated,
   keyringReset,
   keyringRestored,
-  lockWallet,
   locked,
+  lockWallet,
   nativeAssetBalancesUpdated,
   newUnapprovedTxAdded,
   portfolioPriceHistoryUpdated,
@@ -52,8 +51,8 @@
   refreshAccountInfo,
   refreshBalancesAndPriceHistory,
   refreshBalancesAndPrices,
-  refreshNetworksAndTokens,
   refreshGasEstimates,
+  refreshNetworksAndTokens,
   rejectAllTransactions,
   rejectTransaction,
   removeFavoriteApp,
@@ -62,22 +61,23 @@
   retryTransaction,
   selectAccount,
   selectCurrency,
+  selectedAccountChanged,
   selectNetwork,
   selectPortfolioTimeline,
-  selectedAccountChanged,
   sendERC20Transfer,
   sendERC721TransferFrom,
   sendSPLTransfer,
   sendTransaction,
   setAccountTransactions,
-  setAllNetworks,
   setAllHiddenNetworks,
+  setAllNetworks,
   setAllTokensList,
   setAssetAutoDiscoveryCompleted,
   setCoinMarkets,
   setDefaultAccounts,
   setDefaultNetworks,
   setGasEstimates,
+  setHasFeeEstimatesError,
   setMetaMaskInstalled,
   setNetwork,
   setOnRampCurrencies,
@@ -95,10 +95,11 @@
   tokenBalancesUpdated,
   transactionStatusChanged,
   unapprovedTxUpdated,
-  unlockWallet,
   unlocked,
+  unlockWallet,
+  updateTokenPinStatus,
   updateUnapprovedTransactionGasFields,
   updateUnapprovedTransactionNonce,
   updateUnapprovedTransactionSpendAllowance,
-  updateTokenPinStatus
+  updateUserAsset
  } = WalletActions

components/brave_wallet_ui/common/async/handlers.ts

@@ -520,12 +520,15 @@ handler.on(WalletActions.refreshGasEstimates.type, async (store: Store, txInfo:
   const { ethTxManagerProxy, solanaTxManagerProxy } = getAPIProxy()
 
   if (isSolanaTransaction(txInfo)) {
-    const getSolFee = await solanaTxManagerProxy.getEstimatedTxFee(txInfo.id)
-    if (!getSolFee.fee) {
-      console.error('Failed to fetch SOL Fee estimates')
+    const { fee, errorMessage } = await solanaTxManagerProxy.getEstimatedTxFee(
+      txInfo.id
+    )
+    if (!fee) {
+      console.error('Failed to fetch SOL Fee estimates: ' + errorMessage)
+      store.dispatch(WalletActions.setHasFeeEstimatesError(true))
       return
     }
-    store.dispatch(WalletActions.setSolFeeEstimates({ fee: getSolFee.fee }))
+    store.dispatch(WalletActions.setSolFeeEstimates({ fee }))
     return
   }
 
@@ -537,13 +540,14 @@ handler.on(WalletActions.refreshGasEstimates.type, async (store: Store, txInfo:
     return
   }
 
-  const basicEstimates = await ethTxManagerProxy.getGasEstimation1559()
-  if (!basicEstimates.estimation) {
+  const { estimation } = await ethTxManagerProxy.getGasEstimation1559()
+  if (!estimation) {
     console.error('Failed to fetch gas estimates')
+    store.dispatch(WalletActions.setHasFeeEstimatesError(true))
     return
   }
 
-  store.dispatch(WalletActions.setGasEstimates(basicEstimates.estimation))
+  store.dispatch(WalletActions.setGasEstimates(estimation))
 })
 
 handler.on(WalletActions.updateUnapprovedTransactionGasFields.type, async (store: Store, payload: UpdateUnapprovedTransactionGasFieldsType) => {

components/brave_wallet_ui/common/hooks/use-pending-transaction.ts

@@ -16,12 +16,14 @@ import { findAccountName } from '../../utils/account-utils'
 import { getLocale } from '../../../common/locale'
 import { getNetworkFromTXDataUnion } from '../../utils/network-utils'
 import { reduceAddress } from '../../utils/reduce-address'
+import { WalletSelectors } from '../selectors'
 
 // Custom Hooks
 import { useTransactionParser } from './transaction-parser'
 import usePricing from './pricing'
 import useTokenInfo from './token'
 import { useLib } from './useLib'
+import { useSafeWalletSelector } from './use-safe-selector'
 
 // Constants
 import { WalletState, BraveWallet } from '../../constants/types'
@@ -46,6 +48,10 @@ export const usePendingTransactions = () => {
     pendingTransactions,
     defaultNetworks
   } = useSelector((state: { wallet: WalletState }) => state.wallet)
+  const hasFeeEstimatesError = useSafeWalletSelector(
+    WalletSelectors.hasFeeEstimatesError
+  )
+
   const transactionGasEstimates = transactionInfo?.txDataUnion.ethTxData1559?.gasEstimation
 
   const transactionsNetwork = React.useMemo(() => {
@@ -174,7 +180,13 @@ export const usePendingTransactions = () => {
           : getLocale('braveWalletSend')
     , [isSolanaDappTransaction, transactionDetails?.isSwap])
 
+  const isLoadingGasFee = transactionDetails?.gasFee === ''
+
   const isConfirmButtonDisabled = React.useMemo(() => {
+    if (hasFeeEstimatesError || isLoadingGasFee) {
+      return true
+    }
+
     if (!transactionDetails) {
       return true
     }
@@ -189,7 +201,7 @@ export const usePendingTransactions = () => {
       !!transactionDetails?.missingGasLimitError ||
       !canSelectedPendingTransactionBeApproved
     )
-  }, [transactionDetails])
+  }, [transactionDetails, hasFeeEstimatesError, isLoadingGasFee])
 
   // effects
   React.useEffect(() => {
@@ -279,6 +291,8 @@ export const usePendingTransactions = () => {
     updateUnapprovedTransactionGasFields,
     updateUnapprovedTransactionNonce,
     groupTransactions,
-    selectedPendingTransactionGroupIndex
+    selectedPendingTransactionGroupIndex,
+    hasFeeEstimatesError,
+    selectedPendingTransaction: transactionInfo
   }
 }

components/brave_wallet_ui/common/selectors/wallet-selectors.ts

@@ -26,6 +26,8 @@ export const isWalletLocked = ({ wallet }: State) => wallet.isWalletLocked
 export const passwordAttempts = ({ wallet }: State) => wallet.passwordAttempts
 export const selectedPortfolioTimeline = ({ wallet }: State) => wallet.selectedPortfolioTimeline
 export const assetAutoDiscoveryCompleted = ({ wallet }: State) => wallet.assetAutoDiscoveryCompleted
+export const hasFeeEstimatesError = ({ wallet }: State) =>
+  wallet.hasFeeEstimatesError
 
 // unsafe selectors (will cause re-render if not strictly equal "===") (objects and lists)
 export const accounts = ({ wallet }: State) => wallet.accounts

components/brave_wallet_ui/common/slices/wallet.slice.ts

@@ -442,6 +442,7 @@ export const createWalletSlice = (initialState: WalletState = defaultState) => {
       },
 
       setGasEstimates (state: WalletState, { payload }: PayloadAction<BraveWallet.GasEstimation1559>) {
+        state.hasFeeEstimatesError = false
         state.gasEstimates = payload
       },
 
@@ -474,9 +475,17 @@ export const createWalletSlice = (initialState: WalletState = defaultState) => {
       },
 
       setSolFeeEstimates (state: WalletState, { payload }: PayloadAction<SolFeeEstimates>) {
+        state.hasFeeEstimatesError = false
         state.solFeeEstimates = payload
       },
 
+      setHasFeeEstimatesError: (
+        state: WalletState,
+        { payload }: PayloadAction<boolean>
+      ) => {
+        state.hasFeeEstimatesError = payload
+      },
+
       setTransactionProviderError (state: WalletState, { payload }: PayloadAction<SetTransactionProviderErrorType>) {
         state.transactionProviderErrorRegistry[payload.transaction.id] = payload.providerError
       },