Repository
https://github.com/busyorg/busy
3 new feature and 2 fixes for Busy.
Note: for comments, I followed the PO's comment practice. Comments were rarely used in the original code, so I only made a comment when it's really needed. In addition, I wrote the details in commit/issue/PR.
New Features
Powerdown information
https://github.com/busyorg/busy/pull/2147
- Show the powerdown amount in the wallet
- Show the tooltip with next powerdown schedule
Previously, Busy doesn't show any powerdown information in the wallet.
Before: Busy shows nothing!
After: Busy shows both powerdown and delegation in a compact form.
const getFormattedPendingWithdrawalSP = (user, totalVestingShares, totalVestingFundSteem) => {
const pendingWithdrawalSP = calculatePendingWithdrawalSP(
user,
totalVestingShares,
totalVestingFundSteem,
);
if (pendingWithdrawalSP !== 0) {
return (
<BTooltip
title={
<span>
<FormattedMessage
id="steem_power_pending_withdrawal_tooltip"
defaultMessage="The next power down is scheduled to happen on "
/>
<FormattedDate value={`${user.next_vesting_withdrawal}Z`} />{' '}
<FormattedTime value={`${user.next_vesting_withdrawal}Z`} />
</span>
}
>
<span>
{' - '}
<FormattedNumber value={pendingWithdrawalSP} />
</span>
</BTooltip>
);
}
Note: Probably the more important thing about this powerdown is the powerdown amount should be excluded for voting value calculations. Many UIs had/have such bugs. I've fixed some on my own.
Benefits
Hacking prevention
There are many cases where hackers start the powerdown and victims even don't recognize it! If the information is properly shown, this hacking can be prevented.Vote value consistency
Powerdown amount is excluded for vote value, but without powerdown amount information, users may wonder why their vote value is quite low. Note that around the end of 13 weeks of powerdown, the difference can be huge.Stopping powerdown
Users may change their mind to stop the powerdown if the information is clearly shown everyday. Especially when it's almost done, the powerdown amount can be quite big compared to the remaining so the chance of changing their mind might be pretty high :)
Show zero payout
https://github.com/busyorg/busy/pull/2174
- Show
$0.00for payout-declined post all the time - Show $0.00 or
$0.00depending on the declined status even for posts with pending payout lower than $0.005.
Before: Busy shows nothing when payout is zero. So it's hard to tell whether it's due to downvoting or decline.
After: Busy shows it as
$0.00for both posts just posted and paid out.
https://github.com/busyorg/busy/pull/2174/commits/2a52cbc59776a4763d4b3c54017d9f734409733e#diff-63ae944f92a07351d09d0b828b70223eR16
Benefits
- For a payout-declined post, you can easily tell if it's declined or not in the beginning
- When a post is paid out with $0, you can easily tell if it was due to decline or downvoting. (But maybe due to both :)
- Easy to understand for newbies. Newbie may not even understand why some post is paid out with zero.
3-digit precision for small values of votings
https://github.com/busyorg/busy/pull/2176
- 3-digit precision when 0 < abs(STU) < $0.02
Currently, Busy shows only up to 2-digit precision, while SBD has 3-digit precision.
This might be an aesthetical choice. While many people like 3-digit on Steempeak, for instance, I still prefer 2-digit when the amount is large enough. But currently $0.01 needs a full voting with about 500 SP, which means even $0.005 needs 250 SP. As you know, most newbies are much below than that. Their voting always marks as $0.00 which can't be a good user experience.
Why $0.02?
This is not a random pick, but related to dust payout threshold (STEEM_MIN_PAYOUT_SBD), if payout is less than $0.02, it is not actually paid out. It just disappears! See my Utopian post for more details: Effect of haircut, early voting, beneficiary on dust payout
But still 0 is better to be shown as $0.00 instead of $0.000. That's why 3-digit precision when 0 < abs(STU) < $0.02, 2-dight precision otherwise, which made the following final decision:
const USDDisplay = ({ value }) => {
const negative = value < 0;
const absValue = Math.abs(value);
// 0.02 is dust payout threshold (STEEM_MIN_PAYOUT_SBD)
const precision = absValue < 0.02 && value > 0 ? 3 : 2;
return (
<span>
{negative && '-'}
{'$'}
<FormattedNumber
value={absValue}
minimumFractionDigits={precision}
maximumFractionDigits={precision}
/>
</span>
);
};
Note: See the bug fix "Remove US from US$ in non-English locales" for the reason why style={'currency'} is avoided.
before
after
but still 2-digit for >= $0.02, which is better aesthetically :)
voting details
voting details for downvoting
Bug Fixes
Remove US from US$ in non-English locales
This is a common mistake in using FormattedNumber.
<FormattedNumber
value={value}
style={'currency'}
currency={'USD'}
currencyDisplay={'symbol'}
/>
This show
US$instead of$in non-en locales as below,
before
Thus, it should be wrapped with en locale
<IntlProvider locale='en'>
<FormattedNumber
value={value}
style={'currency'}
currency={'USD'}
currencyDisplay={'symbol'}
minimumFractionDigits={precision}
maximumFractionDigits={precision}
/>
</IntlProvider>
after
While this resolves the problem, lint will complain about the code. See a walk-around, e.g, https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md). But for vote detail list, this way may lead to slow performance, it's better to be handled by USDDisplay class in the above.
Fix no negative sign for small values
https://github.com/busyorg/busy/pull/2176
Previously there was no - sign for small negative values, i.e., no way to tell if it's + or -.