Fix allow gas price value below current base fee (#16810)

* chore: rename edit-gas component files; re-export

* fix: allow gas value below base fee

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[] = {
+    {"braveWalletGasFeeLimitLowerThanBaseFeeWarning",
+     IDS_BRAVE_WALLET_GAS_FEE_LIMIT_LOWER_THAN_BASE_FEE_WARNING},
     {"braveWalletTokenMintAddress", IDS_BRAVE_WALLET_TOKEN_MINT_ADDRESS},
     {"braveWalletActivity", IDS_BRAVE_WALLET_ACTIVITY},
     {"braveWalletTokenDecimalsIsRequiredError",

components/brave_wallet_ui/common/async/handlers.ts

@@ -553,8 +553,8 @@ handler.on(WalletActions.updateUnapprovedTransactionGasFields.type, async (store
   if (isEIP1559) {
     const result = await apiProxy.ethTxManagerProxy.setGasFeeAndLimitForUnapprovedTransaction(
       payload.txMetaId,
-      payload.maxPriorityFeePerGas || '',
-      payload.maxFeePerGas || '',
+      payload.maxPriorityFeePerGas || '0x0',
+      payload.maxFeePerGas || '0x0',
       payload.gasLimit
     )
 

components/brave_wallet_ui/components/extension/confirm-transaction-panel/common/gas.tsx

@@ -4,11 +4,16 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
+import { useSelector } from 'react-redux'
 
-import EditGas, { MaxPriorityPanels } from '../../edit-gas'
+// hooks
 import { usePendingTransactions } from '../../../../common/hooks/use-pending-transaction'
-import { useSelector } from 'react-redux'
-import { WalletState } from '../../../../constants/types'
+
+// components
+import EditGas, { MaxPriorityPanels } from '../../edit-gas/edit-gas'
+
+// selectors
+import { WalletSelectors } from '../../../../common/selectors'
 
 interface Props {
   onCancel: () => void
@@ -18,8 +23,8 @@ export function EditPendingTransactionGas (props: Props) {
   const { onCancel } = props
 
   // redux
-  const { selectedPendingTransaction: transactionInfo } = useSelector(
-    ({ wallet }: { wallet: WalletState }) => wallet
+  const transactionInfo = useSelector(
+    WalletSelectors.selectedPendingTransaction
   )
 
   const [suggestedSliderStep, setSuggestedSliderStep] = React.useState<string>('1')

components/brave_wallet_ui/components/extension/edit-gas/style.ts → components/brave_wallet_ui/components/extension/edit-gas/edit-gas.styles.ts

@@ -1,8 +1,10 @@
 // Copyright (c) 2021 The Brave Authors. All rights reserved.
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
-// you can obtain one at https://mozilla.org/MPL/2.0/.
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
 import styled from 'styled-components'
+import { LeoColors } from '../../leo/alert-inline/leo-colors'
 
 export const StyledWrapper = styled.div`
   display: flex;
@@ -12,6 +14,7 @@ export const StyledWrapper = styled.div`
   width: 100%;
   height: 100%;
   padding: 5px 15px 15px 15px;
+  overflow-y: auto;
 `
 
 export const FormColumn = styled.div`
@@ -41,7 +44,12 @@ export const Input = styled.input<{
   background-image: none;
   background-color: ${(p) => p.theme.color.background02};
   box-shadow: none;
-  border: ${(p) => `1px solid ${p.theme.color.interactive08}`};
+  border-style: solid;
+  border-width: 1px;
+  border-color: ${(p) =>
+    p.hasError
+      ? LeoColors['light.system.feedback.error.icon']
+      : p.theme.color.interactive08};
   border-radius: 4px;
   font-family: Poppins;
   font-style: normal;
@@ -50,9 +58,7 @@ export const Input = styled.input<{
   letter-spacing: 0.01em;
   padding: 10px;
   margin-bottom: 8px;
-  color: ${(p) => p.hasError
-    ? p.theme.color.errorText
-    : p.theme.color.text01};
+  color: ${(p) => p.theme.color.text01};
   ::placeholder {
     font-family: Poppins;
     font-style: normal;
@@ -72,6 +78,12 @@ export const Input = styled.input<{
     -webkit-appearance: none;
     margin: 0;
   }
+  @media (prefers-color-scheme: dark) {
+    border-color: ${(p) =>
+      p.hasError
+        ? LeoColors['light.system.feedback.error.icon']
+        : p.theme.color.interactive08};
+  }
 `
 
 export const ButtonRow = styled.div`
@@ -125,7 +137,6 @@ export const MaximumFeeRow = styled.div`
   justify-content: space-between;
   flex-direction: row;
   width: 100%;
-  margin-bottom: 8px;
 `
 
 export const SliderWrapper = styled.div`