some renaming

ui/component/walletFiatPaymentHistory/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/walletFiatPaymentHistory/view.jsx

@@ -0,0 +1,165 @@
+// @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';
+import { Lbryio } from 'lbryinc';
+import moment from 'moment';
+
+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,
+  transactions: 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,
+  } = props;
+
+  // receive transactions from parent component
+  let accountTransactions = props.transactions;
+
+  // reverse so most recent payments come first
+  if(accountTransactions){
+    accountTransactions = accountTransactions.reverse();
+  }
+
+  const [detailsExpanded, setDetailsExpanded] = React.useState(false);
+  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+
+
+  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]);
+
+  var environment = 'test';
+
+  function getAccountStatus(){
+    return Lbryio.call(
+      'account',
+      'status',
+      {
+        environment
+      },
+      'post'
+    );
+  }
+
+  React.useEffect(() => {
+
+
+    (async function(){
+      const response = await getAccountStatus();
+
+      setAccountStatusResponse(response);
+
+      console.log(response);
+    })();
+  }, []);
+
+  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>
+                </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>
+          </>
+      )}
+    />
+  );
+};
+
+export default WalletBalance;

ui/page/wallet/view.jsx

@@ -3,7 +3,8 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import WalletBalance from 'component/walletBalance';
 import WalletFiatBalance from 'component/walletFiatBalance';
-import WalletFiatTransactions from 'component/walletFiatTransactions';
+import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
+import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
 import TxoList from 'component/txoList';
 import Page from 'component/page';
 import Spinner from 'component/spinner';
@@ -116,8 +117,11 @@ const WalletPage = (props: Props) => {
   // select the first tab
   React.useEffect(() => {
     // if (tab === 'account-history') {
-    if (1 === 1) {
+    if (1 === 2) {
-      focusAccountHistoryTab()
+      focusAccountHistoryTab();
+    // } else if (tab === 'payment-history'){
+    } else if (1 === 1){
+      focusPaymentHistoryTab();
     }
   }, []);
 
@@ -174,14 +178,14 @@ const WalletPage = (props: Props) => {
           <div className="fiat-transactions" style={{display: 'none'}}>
             <WalletFiatBalance accountDetails={accountStatusResponse} />
             <div style={{paddingTop: '20px'}}></div>
-            <WalletFiatTransactions transactions={accountTransactionResponse}/>
+            <WalletFiatAccountHistory transactions={accountTransactionResponse}/>
           </div>
         </>
       )}
 
       <>
         <div className="payment-history-tab" style={{display: 'none'}}>
-          <h2>Card Transaction History</h2>
+          <WalletFiatPaymentHistory transactions={accountTransactionResponse}/>
         </div>
       </>