m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

Browse Source
This commit is contained in:
Niranjana Binoy 2022-01-10 08:08:26 -05:00 committed by GitHub
parent 4af7f250a2
commit 0d1e79dda5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/images/down-arrow.svg
View File

@ -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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 592 B

3
app/images/level-arrow.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 637 B

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

@ -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">

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

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

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

@ -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>
);

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

@ -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>
);