EIP-1559 V2: Advanced gas fee modal - base fee and priority fee trends (#13025)

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

@@ -5,7 +5,7 @@ import Box from '../../../ui/box';
 import I18nValue from '../../../ui/i18n-value';
 import LoadingHeartBeat from '../../../ui/loading-heartbeat';
 
-const AdvancedGasFeeInputSubtext = ({ latest, historical }) => {
+const AdvancedGasFeeInputSubtext = ({ latest, historical, feeTrend }) => {
   return (
     <Box className="advanced-gas-fee-input-subtext">
       <Box display="flex" alignItems="center">
@@ -16,7 +16,7 @@ const AdvancedGasFeeInputSubtext = ({ latest, historical }) => {
           <LoadingHeartBeat />
           {latest}
         </span>
-        <img src="./images/high-arrow.svg" alt="" />
+        <img src={`./images/${feeTrend}-arrow.svg`} alt="feeTrend-arrow" />
       </Box>
       <Box>
         <span className="advanced-gas-fee-input-subtext__label">
@@ -34,6 +34,7 @@ const AdvancedGasFeeInputSubtext = ({ latest, historical }) => {
 AdvancedGasFeeInputSubtext.propTypes = {
   latest: PropTypes.string,
   historical: PropTypes.string,
+  feeTrend: PropTypes.string.isRequired,
 };
 
 export default AdvancedGasFeeInputSubtext;

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

@@ -38,6 +38,7 @@ const render = () => {
     <AdvancedGasFeeInputSubtext
       latest="Latest Value"
       historical="Historical value"
+      feeTrend="up"
     />,
     store,
   );
@@ -45,14 +46,10 @@ const render = () => {
 
 describe('AdvancedGasFeeInputSubtext', () => {
   it('should renders latest and historical values passed', () => {
-    render(
-      <AdvancedGasFeeInputSubtext
-        latest="Latest Value"
-        historical="Historical value"
-      />,
-    );
+    render();
 
     expect(screen.queryByText('Latest Value')).toBeInTheDocument();
     expect(screen.queryByText('Historical value')).toBeInTheDocument();
+    expect(screen.queryByAltText('feeTrend-arrow')).toBeInTheDocument();
   });
 });

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

@@ -84,7 +84,12 @@ const BaseFeeInput = () => {
     setMaxFeePerGas,
   } = useAdvancedGasFeePopoverContext();
 
-  const { estimatedBaseFee, historicalBaseFeeRange } = gasFeeEstimates;
+  const {
+    estimatedBaseFee,
+    historicalBaseFeeRange,
+    baseFeeTrend,
+  } = gasFeeEstimates;
+  const [feeTrend, setFeeTrend] = useState(baseFeeTrend);
   const [baseFeeError, setBaseFeeError] = useState();
   const {
     numberOfDecimals: numberOfDecimalsPrimary,
@@ -169,14 +174,20 @@ const BaseFeeInput = () => {
       error === 'editGasMaxBaseFeeGWEIImbalance' ||
         error === 'editGasMaxBaseFeeMultiplierImbalance',
     );
+    if (baseFeeTrend !== 'level' && baseFeeTrend !== feeTrend) {
+      setFeeTrend(baseFeeTrend);
+    }
   }, [
+    feeTrend,
     editingInGwei,
+    baseFeeTrend,
     gasFeeEstimates,
     maxBaseFeeGWEI,
     maxPriorityFeePerGas,
     setBaseFeeError,
     setErrorValue,
     setMaxFeePerGas,
+    setFeeTrend,
   ]);
 
   return (
@@ -208,6 +219,7 @@ const BaseFeeInput = () => {
           2,
         )} GWEI`}
         historical={renderFeeRange(historicalBaseFeeRange)}
+        feeTrend={feeTrend}
       />
     </Box>
   );

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

@@ -55,7 +55,9 @@ const PriorityFeeInput = () => {
   const {
     latestPriorityFeeRange,
     historicalPriorityFeeRange,
+    priorityFeeTrend,
   } = gasFeeEstimates;
+  const [feeTrend, setFeeTrend] = useState(priorityFeeTrend);
   const [priorityFeeError, setPriorityFeeError] = useState();
 
   const [priorityFee, setPriorityFee] = useState(() => {
@@ -86,12 +88,18 @@ const PriorityFeeInput = () => {
       error === 'editGasMaxPriorityFeeBelowMinimumV2',
     );
     setPriorityFeeError(error);
+    if (priorityFeeTrend !== 'level' && priorityFeeTrend !== feeTrend) {
+      setFeeTrend(priorityFeeTrend);
+    }
   }, [
+    feeTrend,
+    priorityFeeTrend,
     gasFeeEstimates,
     priorityFee,
     setErrorValue,
     setMaxPriorityFeePerGas,
     setPriorityFeeError,
+    setFeeTrend,
   ]);
 
   return (
@@ -109,6 +117,7 @@ const PriorityFeeInput = () => {
       <AdvancedGasFeeInputSubtext
         latest={renderFeeRange(latestPriorityFeeRange)}
         historical={renderFeeRange(historicalPriorityFeeRange)}
+        feeTrend={feeTrend}
       />
     </>
   );