showing total tipped amount

ui/component/walletFiatPaymentBalance/view.jsx

@@ -13,68 +13,33 @@ 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 },
+  totalTippedAmount: 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,
+    totalTippedAmount,
   } = 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;
+  console.log('total tipped amount')
+  console.log(totalTippedAmount)
 
-  React.useEffect(() => {
-    if (balance > LARGE_WALLET_BALANCE && detailsExpanded) {
-      doFetchUtxoCounts();
-    }
-  }, [doFetchUtxoCounts, balance, detailsExpanded]);
+  // console.log('account details');
+  // console.log(accountDetails);
 
   return (
     <>{1 == 1 && <Card
-      title={<><Icon size="18" icon={ICONS.FINANCE} />{accountDetails && accountDetails.total_received_unpaid/100} USD</>}
+      title={<><Icon size="18" icon={ICONS.FINANCE} />{totalTippedAmount} USD</>}
       subtitle={
           <I18nMessage>
-            This is your remaining balance that can still be withdrawn to your bank account
+            The total amount you have tipped to different creators
           </I18nMessage>
       }
       actions={

ui/component/walletFiatPaymentHistory/view.jsx

@@ -83,23 +83,15 @@ const WalletBalance = (props: Props) => {
 
         const customerStatusResponse = await getCustomerStatus();
 
-        let totalTippedAmount = 0;
-
-        for(const transaction of response){
-          totalTippedAmount = totalTippedAmount + transaction.tipped_amount
-        }
-
-        setTotalTippedAmount(totalTippedAmount / 100);
-
         setLastFour(customerStatusResponse.PaymentMethods[0].card.last4);
 
-        if (response.length > 10) response.length = 10;
+        if (response && response.length > 10) response.length = 10;
 
         setPaymentHistoryTransactions(response);
 
         const subscriptions  = [...response];
 
-        if(subscriptions.length > 2){
+        if(subscriptions && subscriptions.length > 2){
           subscriptions.length = 2
           setSubscriptions([])
         } else {
@@ -109,7 +101,7 @@ const WalletBalance = (props: Props) => {
         console.log(response);
 
     })();
-  }, []);
+  }, [accountTransactions]);
 
   return (
     <>
@@ -117,7 +109,6 @@ const WalletBalance = (props: Props) => {
         title={__('Payment History')}
         body={
           <>
-            <h2>{totalTippedAmount}</h2>
             <div className="table__wrapper">
               <table className="table table--transactions">
                 <thead>

ui/page/wallet/view.jsx

@@ -29,6 +29,8 @@ const WalletPage = (props: Props) => {
   const [accountStatusResponse, setAccountStatusResponse] = React.useState();
   const [accountTransactionResponse, setAccountTransactionResponse] = React.useState();
   const [customerTransactions, setCustomerTransactions] = React.useState();
+  const [totalTippedAmount, setTotalTippedAmount] = React.useState(0);
+
 
   function getPaymentHistory() {
     return Lbryio.call(
@@ -78,8 +80,17 @@ const WalletPage = (props: Props) => {
       try {
         const response = await getAccountStatus();
 
+        // get card payments customer has made
         const customerTransactionResponse = await getPaymentHistory();
 
+        let totalTippedAmount = 0;
+
+        for(const transaction of customerTransactionResponse){
+          totalTippedAmount = totalTippedAmount + transaction.tipped_amount
+        }
+
+        setTotalTippedAmount(totalTippedAmount / 100);
+
         console.log(customerTransactionResponse);
 
         setCustomerTransactions(customerTransactionResponse)
@@ -100,7 +111,7 @@ const WalletPage = (props: Props) => {
         console.log(getAccountTransactions);
 
       } catch (err){
-
+        console.log(err);
       }
     })();
   }, []);
@@ -210,7 +221,7 @@ const WalletPage = (props: Props) => {
       <>
         {/* fiat payment history for tips made by user */}
         <div className="payment-history-tab" style={{display: 'none'}}>
-          <WalletFiatPaymentBalance accountDetails={accountStatusResponse} />
+          <WalletFiatPaymentBalance totalTippedAmount={totalTippedAmount} accountDetails={accountStatusResponse} />
           <div style={{paddingTop: '25px'}}></div>
           <WalletFiatPaymentHistory transactions={customerTransactions}/>
         </div>