Busy - 3 new features and 2 bug fixes - powerdown information, zero payout, 3-digit precision, etc

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

https://github.com/busyorg/busy/pull/2147/commits/0f8419ea58204e5bfd18443832e0367543d36605#diff-12b05106e0ae36b4c39ad614cc8dda47R48

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

1. 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.

2. 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.

3. 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.00 for payout-declined post all the time
• Show $0.00 or $0.00 depending 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.00 for 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>
  );
};

https://github.com/busyorg/busy/pull/2176/files/ac56c90e8f89470303b56d56cf650174cd5acc80#diff-29f54067f30b79acefc4a03bb52b3acdR9

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

GitHub Account

https://github.com/economicstudio