Merge branch 'payout-details' into development

src/components/upvote/container/upvoteContainer.js

@@ -71,6 +71,38 @@ class UpvoteContainer extends PureComponent {
         ? get(content, 'cashout_time')
         : get(content, 'last_payout'),
     );
+    const beneficiaries = [];
+    const beneficiary = get(content, 'beneficiaries');
+    if (beneficiaries) {
+      beneficiary.forEach(key => {
+        beneficiaries.push(
+          get(key, 'account') + ': ' + (parseFloat(get(key, 'weight')) / 100).toFixed(2) + '%',
+        );
+      });
+    }
+    const minimumAmountForPayout = 0.02;
+    let warnZeroPayout = false;
+    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
@@ -93,6 +125,9 @@ class UpvoteContainer extends PureComponent {
         promotedPayout={promotedPayout}
         totalPayout={totalPayout}
         upvotePercent={upvotePercent}
+        beneficiaries={beneficiaries}
+        warnZeroPayout={warnZeroPayout}
+        breakdownPayout={breakdownPayout}
       />
     );
   }

src/components/upvote/view/upvoteView.js

@@ -200,9 +200,11 @@ class UpvoteView extends Component {
       payoutDate,
       intl,
       isDownVoted,
+      beneficiaries,
+      warnZeroPayout,
+      breakdownPayout,
     } = this.props;
     const { isVoting, amount, sliderValue, isVoted, isShowDetails, downvote } = this.state;
-
     let iconName = 'upcircleo';
     const iconType = 'AntDesign';
     let downVoteIconName = 'downcircleo';
@@ -284,31 +286,60 @@ class UpvoteView extends Component {
               <View style={styles.popoverWrapper}>
                 {isShowDetails ? (
                   <View>
+                    {promotedPayout > 0 && (
                       <Text style={styles.detailsText}>
                         {`${intl.formatMessage({
                           id: 'payout.promoted',
-                      })} ${promotedPayout > 0 ? '~' : ''}$${promotedPayout}`}
+                        })} ${'~'}$${promotedPayout}`}
                       </Text>
+                    )}
+                    {pendingPayout > 0 && (
                       <Text style={styles.detailsText}>
                         {`${intl.formatMessage({
                           id: 'payout.potential_payout',
-                      })} ${pendingPayout > 0 ? '~' : ''}$${pendingPayout}`}
+                        })} ${'~'}$${pendingPayout}`}
                       </Text>
+                    )}
+                    {authorPayout > 0 && (
                       <Text style={styles.detailsText}>
                         {`${intl.formatMessage({
                           id: 'payout.author_payout',
-                      })} ${authorPayout > 0 ? '~' : ''}$${authorPayout}`}
+                        })} ${'~'}$${authorPayout}`}
                       </Text>
+                    )}
+                    {curationPayout > 0 && (
                       <Text style={styles.detailsText}>
                         {`${intl.formatMessage({
                           id: 'payout.curation_payout',
-                      })} ${curationPayout > 0 ? '~' : ''}$${curationPayout}`}
+                        })} ${'~'}$${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({
+                          id: 'payout.beneficiaries',
+                        })} ${beneficiaries}`}
+                      </Text>
+                    )}
                     <Text style={styles.detailsText}>
                       {`${intl.formatMessage({
                         id: 'payout.payout_date',
                       })} ${payoutDate}`}
                     </Text>
+                    {warnZeroPayout && (
+                      <Text style={styles.detailsText}>
+                        {`${intl.formatMessage({
+                          id: 'payout.warn_zero_payout',
+                        })}`}
+                      </Text>
+                    )}
                   </View>
                 ) : (
                   <Fragment>

src/config/locales/en-US.json

@@ -330,7 +330,10 @@
     "promoted": "Promoted",
     "author_payout": "Author Payout",
     "curation_payout": "Curation Payout",
-    "payout_date": "Payout"
+    "payout_date": "Payout",
+    "beneficiaries": "Beneficiaries",
+    "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;