add breakdown of payouts

src/components/upvote/container/upvoteContainer.js

@@ -85,6 +85,25 @@ class UpvoteContainer extends PureComponent {
     if (pendingPayout > 0 && pendingPayout < minimumAmountForPayout) {
       warnZeroPayout = true;
     }
+    const { base, quote, sbdPrintRate } = globalProps;
+    const SBD_PRINT_RATE_MAX = 10000;
+    const percent_steem_dollars = get(content, 'percent_steem_dollars') / 20000;
+    const pending_payout_sbd = pendingPayout * percent_steem_dollars;
+    const price_per_steem = base / quote;
+
+    const pending_payout_sp = (pendingPayout - pending_payout_sbd) / price_per_steem;
+    const pending_payout_printed_sbd = pending_payout_sbd * (sbdPrintRate / SBD_PRINT_RATE_MAX);
+    const pending_payout_printed_steem =
+      (pending_payout_sbd - pending_payout_printed_sbd) / price_per_steem;
+
+    const breakdownPayout =
+      pending_payout_printed_sbd.toFixed(3) +
+      ' SBD, ' +
+      pending_payout_printed_steem.toFixed(3) +
+      ' STEEM, ' +
+      pending_payout_sp.toFixed(3) +
+      ' SP';
+
     return (
       <UpvoteView
         author={author}
@@ -108,6 +127,7 @@ class UpvoteContainer extends PureComponent {
         upvotePercent={upvotePercent}
         beneficiaries={beneficiaries}
         warnZeroPayout={warnZeroPayout}
+        breakdownPayout={breakdownPayout}
       />
     );
   }

src/components/upvote/view/upvoteView.js

@@ -202,9 +202,9 @@ class UpvoteView extends Component {
       isDownVoted,
       beneficiaries,
       warnZeroPayout,
+      breakdownPayout,
     } = this.props;
     const { isVoting, amount, sliderValue, isVoted, isShowDetails, downvote } = this.state;
-    console.log('pendingPayout', pendingPayout);
     let iconName = 'upcircleo';
     const iconType = 'AntDesign';
     let downVoteIconName = 'downcircleo';
@@ -314,6 +314,13 @@ class UpvoteView extends Component {
                         })} ${'~'}$${curationPayout}`}
                       </Text>
                     )}
+                    {breakdownPayout && pendingPayout > 0 && (
+                      <Text style={styles.detailsText}>
+                        {`${intl.formatMessage({
+                          id: 'payout.breakdown',
+                        })} ${breakdownPayout}`}
+                      </Text>
+                    )}
                     {beneficiaries.length > 0 && (
                       <Text style={styles.detailsText}>
                         {`${intl.formatMessage({

src/config/locales/en-US.json

@@ -321,7 +321,8 @@
     "curation_payout": "Curation Payout",
     "payout_date": "Payout",
     "beneficiaries": "Beneficiaries",
-    "warn_zero_payout": "Amount must reach $0.02 for payout"
+    "warn_zero_payout": "Amount must reach $0.02 for payout",
+    "breakdown": "Breakdown"
   },
   "post_dropdown": {
     "copy": "copy link",

src/providers/steem/dsteem.js

@@ -70,6 +70,7 @@ export const fetchGlobalProps = async () => {
     (parseToken(get(globalDynamic, 'total_vesting_fund_steem')) /
       parseToken(get(globalDynamic, 'total_vesting_shares'))) *
     1e6;
+  const sbdPrintRate = get(globalDynamic, 'sbd_print_rate');
   const base = parseToken(get(feedHistory, 'current_median_history.base'));
   const quote = parseToken(get(feedHistory, 'current_median_history.quote'));
   const fundRecentClaims = get(rewardFund, 'recent_claims');
@@ -80,6 +81,7 @@ export const fetchGlobalProps = async () => {
     quote,
     fundRecentClaims,
     fundRewardBalance,
+    sbdPrintRate,
   };
 
   return globalProps;