Repository: busyorg/busy (js)

Issue:
[suggestion] 3-digit precision for less than $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**.

#### Proposed payout information
- For the amount less than $0.02, show up to 3-digit precision.

##### Why $0.02?
This is 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 https://busy.org/@blockchainstudio/effect-of-haircut-early-voting-beneficiary-on-dust-payout

#### Mockups / Examples
![](https://cdn.steemitimages.com/DQmfYm6pZ5MjMWQReh7iaM1M8acMUDTjEzStPLStT17VXzS)
> before

![](https://cdn.steemitimages.com/DQmabD6eXc91JXZUHWrczTRX2uTwPYVktCpwBSroSBQrYdE)
> after

![](https://cdn.steemitimages.com/DQmQ6KGnmd9xypasiZEFguxuDW2mCrkoHA6Nxdd6zfUDJ8Q)
> but still 2-digit for >= $0.02

![](https://cdn.steemitimages.com/DQmWC6GSECYdmznQHV6H94pnyWKJxvkURCHvr5mhFVnMPTJ)
> voting details


#### Benefits
- Prevent dust payout. Pending <= $0.02 can easily be recognized.
- Provide a better user experience for newbies, which I believe very important. Why their votings should be shown as $0.00 all the time?


Pull request:
Fix 2175: 3-digit precision
Fixes #2175 

### Changes

* 3-digit precision when 0 < STU < $0.02
* 2-digit precision for all negative values
* negative values always have - sign.
* Test codes are added and modified for these.

### Test plan

* [ ] Pick any user whose voting value is less than $0.02, it should be shown up to 3-digit. For users whose voting value is at least $0.02, it should still be shown up to 2-digit.
* [ ] Do the same test for vote details for upvote and downvote

### Demo (optional)

![](https://cdn.steemitimages.com/DQmfYm6pZ5MjMWQReh7iaM1M8acMUDTjEzStPLStT17VXzS)
> before

![](https://cdn.steemitimages.com/DQmabD6eXc91JXZUHWrczTRX2uTwPYVktCpwBSroSBQrYdE)
> after

![](https://cdn.steemitimages.com/DQmQ6KGnmd9xypasiZEFguxuDW2mCrkoHA6Nxdd6zfUDJ8Q)
> but still 2-digit for >= $0.02

![](https://cdn.steemitimages.com/DQmWC6GSECYdmznQHV6H94pnyWKJxvkURCHvr5mhFVnMPTJ)
> voting details


Patch:
diff --git a/src/client/components/Utils/USDDisplay.js b/src/client/components/Utils/USDDisplay.js
index 3e0f484a..5d886446 100644
--- a/src/client/components/Utils/USDDisplay.js
+++ b/src/client/components/Utils/USDDisplay.js
@@ -3,13 +3,19 @@ import PropTypes from 'prop-types';
 import { FormattedNumber } from 'react-intl';
 
 const USDDisplay = ({ value }) => {
-  const negative = value.toFixed(2) < 0;
+  const negative = value < 0;
   const absValue = Math.abs(value);
+  // 0.02 is dust payout threshold (STEEM_MIN_PAYOUT_SBD)
+  const precision = absValue < 0.02 && absValue > 0 ? 3 : 2;
   return (
     <span>
       {negative && '-'}
       {'$'}
-      <FormattedNumber value={absValue} minimumFractionDigits={2} maximumFractionDigits={2} />
+      <FormattedNumber
+        value={absValue}
+        minimumFractionDigits={precision}
+        maximumFractionDigits={precision}
+      />
     </span>
   );
 };


Test patch:
diff --git a/src/client/components/__tests__/USSDDisplay.js b/src/client/components/__tests__/USSDDisplay.js
index a6490b53..6d0b2622 100644
--- a/src/client/components/__tests__/USSDDisplay.js
+++ b/src/client/components/__tests__/USSDDisplay.js
@@ -16,13 +16,28 @@ describe('<USSDDisplay />', () => {
     expect(wrapper.text()).toEqual('$44.36');
   });
 
+  it('handle small positive numbers < $0.02 properly', () => {
+    const wrapper = getWrapper(0.017);
+    expect(wrapper.text()).toEqual('$0.017');
+  });
+
   it('handles negative values properly', () => {
     const wrapper = getWrapper(-1.33);
     expect(wrapper.text()).toEqual('-$1.33');
   });
 
-  it('skips - for number small negative numebrs', () => {
+  it('handle small negative numbers properly.', () => {
     const wrapper = getWrapper(-0.001);
+    expect(wrapper.text()).toEqual('-$0.001');
+  });
+
+  it('handle zero properly.', () => {
+    const wrapper = getWrapper(0);
+    expect(wrapper.text()).toEqual('$0.00');
+  });
+
+  it('handle negative zero properly.', () => {
+    const wrapper = getWrapper(-0);
     expect(wrapper.text()).toEqual('$0.00');
   });
 });