fix: explain a rejected dust threshold instead of silently snapping back (closes #233)
All checks were successful
check / check (push) Successful in 33s
All checks were successful
check / check (push) Successful in 33s
The dust-threshold field was the only validated input in Settings that rejected without saying anything: the value silently changed back to the stored one with no explanation. It now flashes "Please enter a whole number of gwei, zero or greater." alongside the existing resync, matching the idiom the RPC URL field already uses. The parse moves to its own module and accepts plain decimal digits only, zero or greater. Hex and exponent notation are refused rather than accepted: Number() reads "0x10" as 16 and "1e3" as 1000, neither of which the previous parseInt produced, and storing a number the user did not type is the same silent substitution this change exists to remove. The message must fit one line of the reserved flash area -- a wrapped message pushes the settings view down, which the No Layout Shift policy forbids. That is pinned by an end-to-end test measuring the rendered line height and the position of the elements below it, in a single round trip because the flash clears after two seconds.
This commit was merged in pull request #243.
This commit is contained in:
42
src/popup/dustThreshold.js
Normal file
42
src/popup/dustThreshold.js
Normal file
@@ -0,0 +1,42 @@
|
||||
// Parsing for the dust threshold field in Settings.
|
||||
//
|
||||
// Pure: no DOM, no state, so the accepted set can be unit tested directly
|
||||
// instead of through the settings view.
|
||||
//
|
||||
// Accepted input is plain decimal digits only, meaning a whole number of
|
||||
// gwei, zero or greater. Zero is a real setting: it hides nothing.
|
||||
//
|
||||
// Deliberately rejected, not coerced:
|
||||
// "" nothing to save
|
||||
// "-1" a negative threshold has no meaning
|
||||
// "1.5" fractional gwei is not a threshold the filter can use
|
||||
// "100 gwei" the unit is already printed beside the field
|
||||
// "0x10" hex, which Number() would silently read as 16
|
||||
// "1e3" exponent notation, which Number() would silently read as 1000
|
||||
//
|
||||
// The last two are the reason this is a digit test and not a Number() test.
|
||||
// Number() accepts both, and accepting them would put a number in the field
|
||||
// that the user did not type — the same silent substitution the visible
|
||||
// rejection message exists to end.
|
||||
|
||||
// Must render on ONE line of #flash-msg, whose reserved height
|
||||
// (min-h-[1.25rem]) is exactly one line at text-xs. A string long enough to
|
||||
// wrap to two lines pushes the settings view down, which the No Layout Shift
|
||||
// policy forbids. Do not lengthen this without re-running the layout test in
|
||||
// tests/e2e/run.js, which measures the flash line and goes red on a shift.
|
||||
const DUST_THRESHOLD_MESSAGE =
|
||||
"Please enter a whole number of gwei, zero or greater.";
|
||||
|
||||
// Returns the threshold in gwei, or null if the input is not one.
|
||||
function parseDustThresholdGwei(raw) {
|
||||
if (typeof raw !== "string") return null;
|
||||
const trimmed = raw.trim();
|
||||
if (!/^[0-9]+$/.test(trimmed)) return null;
|
||||
const val = Number(trimmed);
|
||||
// A run of digits long enough to exceed Number's exact integer range
|
||||
// would round on the way in, so it is not a threshold we can store.
|
||||
if (!Number.isSafeInteger(val)) return null;
|
||||
return val;
|
||||
}
|
||||
|
||||
module.exports = { DUST_THRESHOLD_MESSAGE, parseDustThresholdGwei };
|
||||
@@ -9,6 +9,10 @@ const {
|
||||
pushCurrentView,
|
||||
} = require("./helpers");
|
||||
const { applyTheme } = require("../theme");
|
||||
const {
|
||||
DUST_THRESHOLD_MESSAGE,
|
||||
parseDustThresholdGwei,
|
||||
} = require("../dustThreshold");
|
||||
const { state, saveState, currentNetwork } = require("../../shared/state");
|
||||
const { NETWORKS, SUPPORTED_CHAIN_IDS } = require("../../shared/networks");
|
||||
const { onChainSwitch } = require("../../shared/chainSwitch");
|
||||
@@ -329,13 +333,14 @@ function init(ctx) {
|
||||
|
||||
$("settings-dust-threshold").value = state.dustThresholdGwei;
|
||||
$("settings-dust-threshold").addEventListener("change", async () => {
|
||||
const raw = $("settings-dust-threshold").value.trim();
|
||||
const val = Number(raw);
|
||||
// 0 is accepted and means "hide nothing". Empty, negative,
|
||||
// fractional and non-numeric input is rejected outright rather than
|
||||
// coerced, and the field is put back to the stored threshold so it
|
||||
// never shows a value the wallet is not using.
|
||||
if (raw !== "" && Number.isInteger(val) && val >= 0) {
|
||||
const val = parseDustThresholdGwei($("settings-dust-threshold").value);
|
||||
// Rejected input is never coerced. The field is put back to the
|
||||
// stored threshold so it never shows a value the wallet is not
|
||||
// using, and the message says what the field wants so the snap-back
|
||||
// is explained rather than silent.
|
||||
if (val === null) {
|
||||
showFlash(DUST_THRESHOLD_MESSAGE);
|
||||
} else {
|
||||
state.dustThresholdGwei = val;
|
||||
await saveState();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user