show payments successfully

ui/component/walletFiatPaymentBalance/index.js

@@ -0,0 +1,40 @@
+import { connect } from 'react-redux';
+import {
+  selectBalance,
+  selectClaimsBalance,
+  selectSupportsBalance,
+  selectTipsBalance,
+  selectIsFetchingUtxoCounts,
+  selectUtxoCounts,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+  selectIsConsolidatingUtxos,
+  selectIsMassClaimingTips,
+  selectPendingConsolidateTxid,
+  selectPendingMassClaimTxid,
+} from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
+import { selectSyncHash } from 'redux/selectors/sync';
+import { selectClaimedRewards } from 'redux/selectors/rewards';
+import WalletBalance from './view';
+
+const select = state => ({
+  balance: selectBalance(state),
+  claimsBalance: selectClaimsBalance(state) || 0,
+  supportsBalance: selectSupportsBalance(state) || 0,
+  tipsBalance: selectTipsBalance(state) || 0,
+  rewards: selectClaimedRewards(state),
+  hasSynced: Boolean(selectSyncHash(state)),
+  fetchingUtxoCounts: selectIsFetchingUtxoCounts(state),
+  consolidatingUtxos: selectIsConsolidatingUtxos(state),
+  massClaimingTips: selectIsMassClaimingTips(state),
+  utxoCounts: selectUtxoCounts(state),
+  consolidateIsPending: selectPendingConsolidateTxid(state),
+  massClaimIsPending: selectPendingMassClaimTxid(state),
+});
+
+export default connect(select, {
+  doOpenModal,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+})(WalletBalance);

ui/component/walletFiatPaymentBalance/view.jsx

@@ -0,0 +1,148 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import CreditAmount from 'component/common/credit-amount';
+import Button from 'component/button';
+import HelpLink from 'component/common/help-link';
+import Card from 'component/common/card';
+import Icon from 'component/common/icon';
+import LbcSymbol from 'component/common/lbc-symbol';
+import I18nMessage from 'component/i18nMessage';
+import { formatNumberWithCommas } from 'util/number';
+
+type Props = {
+  balance: number,
+  totalBalance: number,
+  claimsBalance: number,
+  supportsBalance: number,
+  tipsBalance: number,
+  doOpenModal: (string) => void,
+  hasSynced: boolean,
+  doFetchUtxoCounts: () => void,
+  doUtxoConsolidate: () => void,
+  fetchingUtxoCounts: boolean,
+  consolidatingUtxos: boolean,
+  consolidateIsPending: boolean,
+  massClaimingTips: boolean,
+  massClaimIsPending: boolean,
+  utxoCounts: { [string]: number },
+  accountDetails: any,
+};
+
+export const WALLET_CONSOLIDATE_UTXOS = 400;
+const LARGE_WALLET_BALANCE = 100;
+
+const WalletBalance = (props: Props) => {
+  const {
+    balance,
+    claimsBalance,
+    supportsBalance,
+    tipsBalance,
+    doOpenModal,
+    hasSynced,
+    doUtxoConsolidate,
+    doFetchUtxoCounts,
+    consolidatingUtxos,
+    consolidateIsPending,
+    massClaimingTips,
+    massClaimIsPending,
+    utxoCounts,
+    accountDetails,
+  } = props;
+
+  console.log('account details');
+  console.log(accountDetails);
+
+  const [detailsExpanded, setDetailsExpanded] = React.useState(false);
+
+  const { other: otherCount = 0 } = utxoCounts || {};
+
+  const totalBalance = balance + tipsBalance + supportsBalance + claimsBalance;
+  const totalLocked = tipsBalance + claimsBalance + supportsBalance;
+  const operationPending = massClaimIsPending || massClaimingTips || consolidateIsPending || consolidatingUtxos;
+
+  React.useEffect(() => {
+    if (balance > LARGE_WALLET_BALANCE && detailsExpanded) {
+      doFetchUtxoCounts();
+    }
+  }, [doFetchUtxoCounts, balance, detailsExpanded]);
+
+  return (
+    <>{1 == 1 && <Card
+      title={<><Icon size="18" icon={ICONS.FINANCE} />{accountDetails && accountDetails.total_received_unpaid/100} USD</>}
+      subtitle={
+          <I18nMessage>
+            This is your remaining balance that can still be withdrawn to your bank account
+          </I18nMessage>
+      }
+      actions={
+        <>
+          <h2 className="section__title--small">
+            ${accountDetails && accountDetails.total_tipped / 100 } Received Total
+          </h2>
+
+          <h2 className="section__title--small">
+            ${accountDetails && accountDetails.total_paid_out/100 }  Withdrawn
+            <Button
+              button="link"
+              label={detailsExpanded ? __('View less') : __('View more')}
+              iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN}
+              onClick={() => setDetailsExpanded(!detailsExpanded)}
+            />
+          </h2>
+
+          {/* view more section */}
+          {detailsExpanded && (
+            <div className="section__subtitle">
+              <dl>
+                <dt>
+                  <span className="dt__text">{__('...earned from others')}</span>
+                  <span className="help--dt">({__('Unlock to spend')})</span>
+                </dt>
+                <dd>
+                  <span className="dd__text">
+                    {Boolean(tipsBalance) && (
+                      <Button
+                        button="link"
+                        className="dd__button"
+                        disabled={operationPending}
+                        icon={ICONS.UNLOCK}
+                        onClick={() => doOpenModal(MODALS.MASS_TIP_UNLOCK)}
+                      />
+                    )}
+                    <CreditAmount amount={tipsBalance} precision={4} />
+                  </span>
+                </dd>
+
+                <dt>
+                  <span className="dt__text">{__('...on initial publishes')}</span>
+                  <span className="help--dt">({__('Delete or edit past content to spend')})</span>
+                </dt>
+                <dd>
+                  <CreditAmount amount={claimsBalance} precision={4} />
+                </dd>
+
+                <dt>
+                  <span className="dt__text">{__('...supporting content')}</span>
+                  <span className="help--dt">({__('Delete supports to spend')})</span>
+                </dt>
+                <dd>
+                  <CreditAmount amount={supportsBalance} precision={4} />
+                </dd>
+              </dl>
+            </div>
+          )}
+
+          <div className="section__actions">
+            <Button button="primary" label={__('Receive Payout')} icon={ICONS.SEND}  />
+            <Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
+          </div>
+        </>
+      }
+    />}</>
+  );
+};
+
+export default WalletBalance;

ui/component/walletFiatPaymentHistory/view.jsx

@@ -64,6 +64,9 @@ const WalletBalance = (props: Props) => {
 
   const [detailsExpanded, setDetailsExpanded] = React.useState(false);
   const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+  const [paymentHistoryTransactions, setPaymentHistoryTransactions] = React.useState();
+
+  const [lastFour, setLastFour] = React.useState();
 
 
   const { other: otherCount = 0 } = utxoCounts || {};
@@ -91,13 +94,40 @@ const WalletBalance = (props: Props) => {
     );
   }
 
+  function getPaymentHistory() {
+    return Lbryio.call(
+    'customer',
+    'list',
+    {
+      environment,
+    },
+    'post'
+  )};
+
+  function getCustomerStatus(){
+    return Lbryio.call(
+      'customer',
+      'status',
+      {
+        environment,
+      },
+      'post'
+    )
+  }
+
   React.useEffect(() => {
 
 
     (async function(){
-      const response = await getAccountStatus();
+      let response = await getPaymentHistory();
 
-      setAccountStatusResponse(response);
+      const customerStatusResponse = await getCustomerStatus();
+
+      setLastFour(customerStatusResponse.PaymentMethods[0].card.last4);
+
+      if (response.length > 10) response.length = 10;
+
+      setPaymentHistoryTransactions(response);
 
       console.log(response);
     })();
@@ -105,59 +135,56 @@ const WalletBalance = (props: Props) => {
 
   return (
     <Card
-      title={'Tip History'}
-      body={1 == 1 && (
-          <>
-            <div className="table__wrapper">
-              <table className="table table--transactions">
-                <thead>
-                <tr>
-                  <th className="date-header">{__('Date')}</th>
-                  <th>{<>{__('Receiving Channel Name')}</>}</th>
-                  <th>{__('Tip Location')}</th>
-                  <th>{__('Amount (USD)')} </th>
-                  <th>{__('Processing Fee')}</th>
-                  <th>{__('Odysee Fee')}</th>
-                  <th>{__('Received Amount')}</th>
+      title={__('Payment History')}
+      body={
+        <>
+          <div className="table__wrapper">
+            <table className="table table--transactions">
+              <thead>
+              <tr>
+                <th className="date-header">{__('Date')}</th>
+                <th>{<>{__('Receiving Channel Name')}</>}</th>
+                <th>{__('Tip Location')}</th>
+                <th>{__('Amount (USD)')} </th>
+                <th>{__('Card Last 4')}</th>
+                <th>{__('Anonymous')}</th>
+              </tr>
+              </thead>
+              <tbody>
+              {paymentHistoryTransactions &&
+              paymentHistoryTransactions.reverse().map((transaction) => (
+                <tr key={transaction.name + transaction.created_at}>
+                  <td>{moment(transaction.created_at).format('LLL')}</td>
+                  <td>
+                    <Button
+                      className="stripe__card-link-text"
+                      navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                      label={transaction.channel_name}
+                      button="link"
+                    />
+                  </td>
+                  <td>
+                    <Button
+                      className="stripe__card-link-text"
+                      navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                      label={
+                        transaction.channel_claim_id === transaction.source_claim_id
+                          ? 'Channel Page'
+                          : 'File Page'
+                      }
+                      button="link"
+                    />
+                  </td>
+                  <td>${transaction.tipped_amount / 100}</td>
+                  <td>{lastFour}</td>
+                  <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
                 </tr>
-                </thead>
-                <tbody>
-                {accountTransactions &&
-                accountTransactions.map((transaction) => (
-                  <tr key={transaction.name + transaction.created_at}>
-                    <td>{moment(transaction.created_at).format('LLL')}</td>
-                    <td>
-                      <Button
-                        className="stripe__card-link-text"
-                        navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
-                        label={transaction.channel_name}
-                        button="link"
-                      />
-                    </td>
-                    <td>
-                      <Button
-                        className="stripe__card-link-text"
-                        navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
-                        label={
-                          transaction.channel_claim_id === transaction.source_claim_id
-                            ? 'Channel Page'
-                            : 'File Page'
-                        }
-                        button="link"
-                      />
-                    </td>
-                    <td>${transaction.tipped_amount / 100}</td>
-                    <td>${transaction.transaction_fee / 100}</td>
-                    <td>${transaction.application_fee / 100}</td>
-                    <td>${transaction.received_amount / 100}</td>
-                  </tr>
-                ))}
-                </tbody>
-              </table>
-              {!accountTransactions && <p style={{textAlign:"center", marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
-            </div>
-          </>
-      )}
+              ))}
+              </tbody>
+            </table>
+          </div>
+        </>
+      }
     />
   );
 };

ui/page/wallet/view.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import WalletBalance from 'component/walletBalance';
 import WalletFiatBalance from 'component/walletFiatBalance';
+import WalletFiatBalance from 'component/walletFiatBalance';
 import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
 import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
 import TxoList from 'component/txoList';
@@ -177,7 +178,7 @@ const WalletPage = (props: Props) => {
         <>
           <div className="fiat-transactions" style={{display: 'none'}}>
             <WalletFiatBalance accountDetails={accountStatusResponse} />
-            <div style={{paddingTop: '20px'}}></div>
+            <div style={{paddingTop: '25px'}}></div>
             <WalletFiatAccountHistory transactions={accountTransactionResponse}/>
           </div>
         </>
@@ -185,6 +186,8 @@ const WalletPage = (props: Props) => {
 
       <>
         <div className="payment-history-tab" style={{display: 'none'}}>
+          <WalletFiatBalance accountDetails={accountStatusResponse} />
+          <div style={{paddingTop: '25px'}}></div>
           <WalletFiatPaymentHistory transactions={accountTransactionResponse}/>
         </div>
       </>