EIP-1559 V2: : Advanced Gas Fee Modal - Updating the trend arrows (#13196)

app/images/down-arrow.svg

@@ -1 +1,3 @@
-<svg width="13" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.296 8.42c0-.276-.22-.47-.483-.483l-3.26.083 3.964-3.964a.451.451 0 0 0 0-.663l-.442-.442a.463.463 0 0 0-.662 0L4.449 6.915l.083-3.232a.49.49 0 0 0-.47-.497h-.607a.484.484 0 0 0-.47.47v5.386a.46.46 0 0 0 .456.456h5.386a.484.484 0 0 0 .47-.47V8.42Z" fill="#D73A49"/></svg>
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.66555 3.36981C8.38934 3.36981 8.19599 3.59078 8.18218 3.85319L8.26504 7.11251L4.30138 3.14884C4.10803 2.95549 3.83181 2.95549 3.63846 3.14884L3.19652 3.59078C3.01698 3.77032 3.00317 4.06035 3.19652 4.2537L7.16019 8.21736L3.92849 8.1345C3.65227 8.1345 3.44511 8.34166 3.4313 8.60406V9.21173C3.44511 9.47413 3.65227 9.68129 3.90087 9.68129H9.28703C9.53562 9.68129 9.74278 9.47413 9.74278 9.22554V3.83938C9.74278 3.59078 9.53562 3.38362 9.27322 3.36981H8.66555Z" fill="#D73A49"/>
+</svg>

app/images/level-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.12476 0.974243C3.92944 1.16956 3.94897 1.46252 4.12476 1.65784L6.48804 3.90393L0.882568 3.90393C0.609131 3.90393 0.413818 4.09924 0.413818 4.37268L0.413818 4.99768C0.413818 5.25159 0.609131 5.46643 0.882568 5.46643L6.48804 5.46643L4.14429 7.69299C3.94897 7.88831 3.94897 8.18127 4.12476 8.37659L4.55444 8.80627C4.74976 8.98206 5.04272 8.98206 5.21851 8.80627L9.0271 4.99768C9.20288 4.8219 9.20288 4.52893 9.0271 4.35315L5.21851 0.544555C5.04272 0.368774 4.74976 0.368774 4.55444 0.544555L4.12476 0.974243Z" fill="#BBC0C5"/>
+</svg>

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js

@@ -16,7 +16,9 @@ const AdvancedGasFeeInputSubtext = ({ latest, historical, feeTrend }) => {
           <LoadingHeartBeat />
           {latest}
         </span>
-        <img src={`./images/${feeTrend}-arrow.svg`} alt="feeTrend-arrow" />
+        <span className={`advanced-gas-fee-input-subtext__${feeTrend}`}>
+          <img src={`./images/${feeTrend}-arrow.svg`} alt="feeTrend-arrow" />
+        </span>
       </Box>
       <Box>
         <span className="advanced-gas-fee-input-subtext__label">

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss

@@ -14,8 +14,16 @@
     position: relative;
   }
 
+  &__level {
+    margin-left: 2px;
+  }
+
+  &__up,
+  &__down {
+    padding-top: 2px;
+  }
+
   img {
-    height: 16px;
     margin-right: 8px;
   }
 }

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js

@@ -90,7 +90,6 @@ const BaseFeeInput = () => {
     historicalBaseFeeRange,
     baseFeeTrend,
   } = gasFeeEstimates;
-  const [feeTrend, setFeeTrend] = useState(baseFeeTrend);
   const [baseFeeError, setBaseFeeError] = useState();
   const {
     numberOfDecimals: numberOfDecimalsPrimary,
@@ -175,14 +174,9 @@ const BaseFeeInput = () => {
       error === 'editGasMaxBaseFeeGWEIImbalance' ||
         error === 'editGasMaxBaseFeeMultiplierImbalance',
     );
-    if (baseFeeTrend !== 'level' && baseFeeTrend !== feeTrend) {
-      setFeeTrend(baseFeeTrend);
-    }
     setBaseFeeMultiplier(maxBaseFeeMultiplier);
   }, [
-    feeTrend,
     editingInGwei,
-    baseFeeTrend,
     gasFeeEstimates,
     maxBaseFeeGWEI,
     maxPriorityFeePerGas,
@@ -190,7 +184,6 @@ const BaseFeeInput = () => {
     setBaseFeeError,
     setErrorValue,
     setMaxFeePerGas,
-    setFeeTrend,
     setBaseFeeMultiplier,
   ]);
 
@@ -223,7 +216,7 @@ const BaseFeeInput = () => {
           2,
         )} GWEI`}
         historical={renderFeeRange(historicalBaseFeeRange)}
-        feeTrend={feeTrend}
+        feeTrend={baseFeeTrend}
       />
     </Box>
   );

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js

@@ -58,7 +58,6 @@ const PriorityFeeInput = () => {
     historicalPriorityFeeRange,
     priorityFeeTrend,
   } = gasFeeEstimates;
-  const [feeTrend, setFeeTrend] = useState(priorityFeeTrend);
   const [priorityFeeError, setPriorityFeeError] = useState();
 
   const [priorityFee, setPriorityFee] = useState(() => {
@@ -90,18 +89,12 @@ const PriorityFeeInput = () => {
       error === 'editGasMaxPriorityFeeBelowMinimumV2',
     );
     setPriorityFeeError(error);
-    if (priorityFeeTrend !== 'level' && priorityFeeTrend !== feeTrend) {
-      setFeeTrend(priorityFeeTrend);
-    }
   }, [
-    feeTrend,
-    priorityFeeTrend,
     gasFeeEstimates,
     priorityFee,
     setErrorValue,
     setMaxPriorityFeePerGas,
     setPriorityFeeError,
-    setFeeTrend,
   ]);
 
   return (
@@ -119,7 +112,7 @@ const PriorityFeeInput = () => {
       <AdvancedGasFeeInputSubtext
         latest={renderFeeRange(latestPriorityFeeRange)}
         historical={renderFeeRange(historicalPriorityFeeRange)}
-        feeTrend={feeTrend}
+        feeTrend={priorityFeeTrend}
       />
     </Box>
   );