WIP: allow gas value below base fee

brave · Jan 27, 2023 · 03fb6a6 · 03fb6a6
1 parent 801dbee
commit 03fb6a6
Show file tree

Hide file tree

Showing 17 changed files with 414 additions and 138 deletions.
diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/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",

diff --git a/components/brave_wallet_ui/assets/svg-icons/warning-triangle-filled.svg b/components/brave_wallet_ui/assets/svg-icons/warning-triangle-filled.svg
diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/common/gas.tsx b/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/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')

diff --git a/components/brave_wallet_ui/components/extension/edit-gas/edit-gas.styles.ts b/components/brave_wallet_ui/components/extension/edit-gas/edit-gas.styles.ts
@@ -3,6 +3,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 import styled from 'styled-components'
+import { LeoColors } from '../../leo/alert-inline/leo-colors'
 
 export const StyledWrapper = styled.div`
   display: flex;
@@ -12,6 +13,7 @@ export const StyledWrapper = styled.div`
   width: 100%;
   height: 100%;
   padding: 5px 15px 15px 15px;
+  overflow-y: scroll;
 `
 
 export const FormColumn = styled.div`
@@ -41,7 +43,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 +57,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 +77,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`