cleaning up code

ui/component/txoList/view.jsx

@@ -104,7 +104,7 @@ function TxoList(props: Props) {
         // console.log('amount of transactions');
         // console.log(customerTransactionResponse.length);
 
-        if(customerTransactionResponse && customerTransactionResponse.length){
+        if (customerTransactionResponse && customerTransactionResponse.length) {
           customerTransactionResponse.reverse();
         }
 
@@ -317,7 +317,7 @@ function TxoList(props: Props) {
         </>
 
       }
-      titleActions={ <></>
+      titleActions={<></>
         // <div className="card__actions--inline">
         //   {!isFetchingTransactions && transactionsFile === null && (
         //     <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label>
@@ -336,8 +336,8 @@ function TxoList(props: Props) {
         // </div>
       }
       isBodyList
-      body={ currency === 'credits' ?
-        <div>
+      body={currency === 'credits'
+        ? <div>
           <div className="card__body-actions">
             <div className="card__actions">
               <div>
@@ -438,8 +438,8 @@ function TxoList(props: Props) {
           <TransactionListTable txos={txoPage} />
           <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
         </div>
-        // fiat section
         : <div>
+          {/* fiat section (buttons and transactions) */}
           <div className="section card-stack">
             <div className="card__body-actions">
               <div className="card__actions">
@@ -464,14 +464,6 @@ function TxoList(props: Props) {
                           })}
                           label={__('Outgoing')}
                         />
-                        {/*<Button*/}
-                        {/*  button="alt"*/}
-                        {/*  onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all', tab, currency: 'fiat' })}*/}
-                        {/*  className={classnames(`button-toggle`, {*/}
-                        {/*    'button-toggle--active': active === 'all',*/}
-                        {/*  })}*/}
-                        {/*  label={__('Payouts')}*/}
-                        {/*/>*/}
                       </div>
                     </fieldset-section>
                   </div>
@@ -482,7 +474,7 @@ function TxoList(props: Props) {
             { fiatType === 'incoming' && <WalletFiatAccountHistory transactions={accountTransactionResponse} /> }
             { fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={customerTransactions} /> }
             {/* TODO: have to finish pagination */}
-            <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
+            {/* <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} /> */}
           </div>
         </div>
       }

ui/component/walletBalance/view.jsx

@@ -12,7 +12,6 @@ import I18nMessage from 'component/i18nMessage';
 import { formatNumberWithCommas } from 'util/number';
 import Icon from 'component/common/icon';
 
-
 type Props = {
   balance: number,
   totalBalance: number,

ui/component/walletFiatPaymentHistory/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import Button from 'component/button';
-import Card from 'component/common/card';
 import { Lbryio } from 'lbryinc';
 import moment from 'moment';
 import { STRIPE_PUBLIC_KEY } from 'config';
@@ -22,10 +21,6 @@ const WalletBalance = (props: Props) => {
   // receive transactions from parent component
   const { transactions: accountTransactions } = props;
 
-  // const [accountStatusResponse, setAccountStatusResponse] = React.useState();
-
-  // const [subscriptions, setSubscriptions] = React.useState();
-
   const [lastFour, setLastFour] = React.useState();
 
   function getCustomerStatus() {
@@ -55,6 +50,7 @@ const WalletBalance = (props: Props) => {
       <div className="section card-stack">
         <div className="table__wrapper">
           <table className="table table--transactions">
+            {/* table header */}
             <thead>
             <tr>
               <th className="date-header">{__('Date')}</th>
@@ -65,11 +61,14 @@ const WalletBalance = (props: Props) => {
               <th>{__('Anonymous')}</th>
             </tr>
             </thead>
+            {/* list data for transactions */}
             <tbody>
             {accountTransactions &&
             accountTransactions.map((transaction) => (
               <tr key={transaction.name + transaction.created_at}>
+                {/* date */}
                 <td>{moment(transaction.created_at).format('LLL')}</td>
+                {/* receiving channel name */}
                 <td>
                   <Button
                     className=""
@@ -78,6 +77,7 @@ const WalletBalance = (props: Props) => {
                     button="link"
                   />
                 </td>
+                {/* link to content or channel */}
                 <td>
                   <Button
                     className=""
@@ -90,8 +90,12 @@ const WalletBalance = (props: Props) => {
                     button="link"
                   />
                 </td>
+                {/* how much tipped */}
                 <td>${transaction.tipped_amount / 100}</td>
+                {/* TODO: this is incorrect need it per transactions not per user */}
+                {/* last four of credit card  */}
                 <td>{lastFour}</td>
+                {/* whether tip is anonymous or not */}
                 <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
               </tr>
             ))}

ui/page/wallet/view.jsx

@@ -2,10 +2,6 @@
 import React from 'react';
 import { useHistory } from 'react-router';
 import WalletBalance from 'component/walletBalance';
-import WalletFiatBalance from 'component/walletFiatBalance';
-import WalletFiatPaymentBalance from 'component/walletFiatPaymentBalance';
-import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
-import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
 import TxoList from 'component/txoList';
 import Page from 'component/page';
 import * as PAGES from 'constants/pages';
@@ -78,21 +74,6 @@ const WalletPage = (props: Props) => {
     push(url);
   }
 
-  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
-  const [accountTransactionResponse, setAccountTransactionResponse] = React.useState([]);
-  const [customerTransactions, setCustomerTransactions] = React.useState([]);
-
-  function getPaymentHistory() {
-    return Lbryio.call(
-      'customer',
-      'list',
-      {
-        environment: stripeEnvironment,
-      },
-      'post'
-    );
-  }
-
   function getAccountStatus() {
     return Lbryio.call(
       'account',
@@ -104,32 +85,6 @@ const WalletPage = (props: Props) => {
     );
   }
 
-  function getAccountTransactionsa() {
-    return Lbryio.call(
-      'account',
-      'list',
-      {
-        environment: stripeEnvironment,
-      },
-      'post'
-    );
-  }
-
-  // calculate account transactions section
-  React.useEffect(() => {
-    (async function() {
-      try {
-        const response = await getAccountStatus();
-
-        setAccountStatusResponse(response);
-      } catch (err) {
-        console.log(err);
-      }
-    })();
-  }, []);
-
-  // @endif
-
   const { totalBalance } = props;
   const showIntro = totalBalance === 0;
   const loading = totalBalance === undefined;
@@ -142,14 +97,13 @@ const WalletPage = (props: Props) => {
           <TabList className="tabs__list--collection-edit-page">
             <Tab>{__('Balance')}</Tab>
             <Tab>{__('Transactions')}</Tab>
-            {/*<Tab>{__('Subscriptions')}</Tab>*/}
-            {/*<Tab>{__('Analytics')}</Tab>*/}
           </TabList>
           <TabPanels>
             {/* balances for lbc and fiat */}
             <TabPanel>
               <WalletBalance />
             </TabPanel>
+            {/* transactions panel */}
             <TabPanel>
               <div className="section card-stack">
                 <div className="lbc-transactions">
@@ -174,17 +128,6 @@ const WalletPage = (props: Props) => {
                 </div>
               </div>
             </TabPanel>
-            {/*<TabPanel>*/}
-            {/*  <div className="section card-stack">*/}
-            {/*    <WalletFiatPaymentHistory transactions={customerTransactions} />*/}
-            {/*    <WalletFiatAccountHistory transactions={accountTransactionResponse} />*/}
-            {/*  </div>*/}
-            {/*</TabPanel>*/}
-            {/*<TabPanel>*/}
-            {/*  <div className="section card-stack">*/}
-            {/*    <h2> Coming soon! </h2>*/}
-            {/*  </div>*/}
-            {/*</TabPanel>*/}
           </TabPanels>
         </Tabs>
       </Page>