make fiat balance programatic again

ui/component/common/credit-amount.jsx

@@ -49,6 +49,11 @@ class CreditAmount extends React.PureComponent<Props> {
       isFiat,
     } = this.props;
     const minimumRenderableAmount = 10 ** (-1 * precision);
+
+    // return null, otherwise it will try and convert undefined to a string
+    if (amount === undefined) {
+      return null;
+    }
     const fullPrice = formatFullPrice(amount, 2);
     const isFree = parseFloat(amount) === 0;
 

ui/component/txoList/view.jsx

@@ -12,6 +12,17 @@ import { toCapitalCase } from 'util/string';
 import classnames from 'classnames';
 import HelpLink from 'component/common/help-link';
 import FileExporter from 'component/common/file-exporter';
+import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
+import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
+import { STRIPE_PUBLIC_KEY } from '../../../config';
+import { Lbryio } from 'lbryinc';
+
+let stripeEnvironment = 'test';
+// if the key contains pk_live it's a live key
+// update the environment for the calls to the backend to indicate which environment to hit
+if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
+  stripeEnvironment = 'live';
+}
 
 type Props = {
   search: string,
@@ -30,6 +41,7 @@ type Props = {
 type Delta = {
   dkey: string,
   value: string,
+  tab: string
 };
 
 function TxoList(props: Props) {
@@ -45,12 +57,72 @@ function TxoList(props: Props) {
     transactionsFile,
   } = props;
 
+  const [accountTransactionResponse, setAccountTransactionResponse] = React.useState([]);
+  const [customerTransactions, setCustomerTransactions] = React.useState([]);
+
+  function getPaymentHistory() {
+    return Lbryio.call(
+      'customer',
+      'list',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    );
+  }
+
+  function getAccountTransactionsa() {
+    return Lbryio.call(
+      'account',
+      'list',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    );
+  }
+
+  // calculate account transactions section
+  React.useEffect(() => {
+    (async function() {
+      try {
+        const getAccountTransactions = await getAccountTransactionsa();
+
+        setAccountTransactionResponse(getAccountTransactions);
+      } catch (err) {
+        console.log(err);
+      }
+    })();
+  }, []);
+
+  // populate customer payment data
+  React.useEffect(() => {
+    (async function() {
+      try {
+        // get card payments customer has made
+        let customerTransactionResponse = await getPaymentHistory();
+        // console.log('amount of transactions');
+        // console.log(customerTransactionResponse.length);
+
+        if (customerTransactionResponse && customerTransactionResponse.length) {
+          customerTransactionResponse.reverse();
+        }
+
+        setCustomerTransactions(customerTransactionResponse);
+      } catch (err) {
+        console.log(err);
+      }
+    })();
+  }, []);
+
   const urlParams = new URLSearchParams(search);
   const page = urlParams.get(TXO.PAGE) || String(1);
   const pageSize = urlParams.get(TXO.PAGE_SIZE) || String(TXO.PAGE_SIZE_DEFAULT);
   const type = urlParams.get(TXO.TYPE) || TXO.ALL;
   const subtype = urlParams.get(TXO.SUB_TYPE);
   const active = urlParams.get(TXO.ACTIVE) || TXO.ALL;
+  const currency = urlParams.get('currency') || 'credits';
+  const fiatType = urlParams.get('fiatType') || 'incoming';
 
   const currentUrlParams = {
     page,
@@ -58,6 +130,8 @@ function TxoList(props: Props) {
     active,
     type,
     subtype,
+    currency,
+    fiatType,
   };
 
   const hideStatus =
@@ -119,8 +193,32 @@ function TxoList(props: Props) {
     history.push(url);
   }
 
+  // let currency = 'credits';
   function updateUrl(delta: Delta) {
     const newUrlParams = new URLSearchParams();
+
+    const existingCurrency = newUrlParams.get('currency') || 'credits';
+
+    const existingFiatType = newUrlParams.get('fiatType') || 'incoming';
+
+    console.log(existingFiatType);
+
+    console.log(newUrlParams);
+
+    // set tab name to account for wallet page tab
+    newUrlParams.set('tab', delta.tab);
+
+    // only update currency if it's being changed
+    if (delta.currency) {
+      newUrlParams.set('currency', delta.currency);
+    }
+
+    if (delta.fiatType) {
+      newUrlParams.set('fiatType', delta.fiatType);
+    } else {
+      newUrlParams.set('fiatType', existingFiatType);
+    }
+
     switch (delta.dkey) {
       case TXO.PAGE:
         if (currentUrlParams.type) {
@@ -179,6 +277,10 @@ function TxoList(props: Props) {
 
   const paramsString = JSON.stringify(params);
 
+  // tab used in the wallet section
+  // TODO: change the name of this eventually
+  const tab = 'fiat-payment-history';
+
   useEffect(() => {
     if (paramsString && updateTxoPageParams) {
       const params = JSON.parse(paramsString);
@@ -188,28 +290,54 @@ function TxoList(props: Props) {
 
   return (
     <Card
-      title={<div className="table__header-text">{__(`Transactions`)}</div>}
-      titleActions={
-        <div className="card__actions--inline">
-          {!isFetchingTransactions && transactionsFile === null && (
-            <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label>
-          )}
-          <div className="txo__export">
-            <FileExporter
-              data={transactionsFile}
-              label={__('Export')}
-              tooltip={__('Fetch transaction data for export')}
-              defaultFileName={'transactions-history.csv'}
-              onFetch={() => fetchTransactions()}
-              progressMsg={isFetchingTransactions ? __('Fetching data') : ''}
-            />
+      title={
+        <><div className="table__header-text" style={{width: '124px', display: 'inline-block'}}>{__(`Transactions`)}</div>
+          <div style={{display: 'inline-block'}}>
+            <fieldset-section>
+              <div className={'txo__radios'}>
+                <Button
+                  button="alt"
+                  onClick={(e) => handleChange({ currency: 'credits', tab })}
+                  className={classnames(`button-toggle`, {
+                    'button-toggle--active': currency === 'credits',
+                  })}
+                  label={__('Credits')}
+                />
+                <Button
+                  button="alt"
+                  onClick={(e) => handleChange({ currency: 'fiat', tab })}
+                  className={classnames(`button-toggle`, {
+                    'button-toggle--active': currency === 'fiat',
+                  })}
+                  label={__('USD')}
+                />
+              </div>
+            </fieldset-section>
           </div>
-          <Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
-        </div>
+        </>
+
+      }
+      titleActions={<></>
+        // <div className="card__actions--inline">
+        //   {!isFetchingTransactions && transactionsFile === null && (
+        //     <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label>
+        //   )}
+        //   <div className="txo__export">
+        //     <FileExporter
+        //       data={transactionsFile}
+        //       label={__('Export')}
+        //       tooltip={__('Fetch transaction data for export')}
+        //       defaultFileName={'transactions-history.csv'}
+        //       onFetch={() => fetchTransactions()}
+        //       progressMsg={isFetchingTransactions ? __('Fetching data') : ''}
+        //     />
+        //   </div>
+        //   <Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
+        // </div>
       }
       isBodyList
-      body={
-        <div>
+      body={currency === 'credits'
+        ? <div>
           <div className="card__body-actions">
             <div className="card__actions">
               <div>
@@ -223,7 +351,7 @@ function TxoList(props: Props) {
                     </>
                   }
                   value={type || 'all'}
-                  onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value })}
+                  onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab })}
                 >
                   {Object.values(TXO.DROPDOWN_TYPES).map((v) => {
                     const stringV = String(v);
@@ -242,7 +370,7 @@ function TxoList(props: Props) {
                     name="subtype"
                     label={__('Payment Type')}
                     value={subtype || 'all'}
-                    onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value })}
+                    onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value, tab })}
                   >
                     {Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
                       const stringV = String(v);
@@ -262,7 +390,7 @@ function TxoList(props: Props) {
                     <div className={'txo__radios'}>
                       <Button
                         button="alt"
-                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active' })}
+                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active', tab })}
                         className={classnames(`button-toggle`, {
                           'button-toggle--active': active === TXO.ACTIVE,
                         })}
@@ -270,7 +398,7 @@ function TxoList(props: Props) {
                       />
                       <Button
                         button="alt"
-                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent' })}
+                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent', tab })}
                         className={classnames(`button-toggle`, {
                           'button-toggle--active': active === 'spent',
                         })}
@@ -278,7 +406,7 @@ function TxoList(props: Props) {
                       />
                       <Button
                         button="alt"
-                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all' })}
+                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all', tab })}
                         className={classnames(`button-toggle`, {
                           'button-toggle--active': active === 'all',
                         })}
@@ -288,12 +416,69 @@ function TxoList(props: Props) {
                   </fieldset-section>
                 </div>
               )}
+              <div className="card__actions--inline" style={{marginLeft: '181px'}}>
+                {!isFetchingTransactions && transactionsFile === null && (
+                  <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label>
+                )}
+                <div className="txo__export">
+                  <FileExporter
+                    data={transactionsFile}
+                    label={__('Export')}
+                    tooltip={__('Fetch transaction data for export')}
+                    defaultFileName={'transactions-history.csv'}
+                    onFetch={() => fetchTransactions()}
+                    progressMsg={isFetchingTransactions ? __('Fetching data') : ''}
+                  />
+                </div>
+                <Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
+              </div>
             </div>
           </div>
+          {/* listing of the transactions */}
           <TransactionListTable txos={txoPage} />
           <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
         </div>
+        : <div>
+          {/* fiat section (buttons and transactions) */}
+          <div className="section card-stack">
+            <div className="card__body-actions">
+              <div className="card__actions">
+                {!hideStatus && (
+                  <div>
+                    <fieldset-section>
+                      <label>{__('Type')}</label>
+                      <div className={'txo__radios'}>
+                        <Button
+                          button="alt"
+                          onClick={(e) => handleChange({ tab, fiatType: 'incoming', currency: 'fiat' })}
+                          className={classnames(`button-toggle`, {
+                            'button-toggle--active': fiatType === 'incoming',
+                          })}
+                          label={__('Incoming')}
+                        />
+                        <Button
+                          button="alt"
+                          onClick={(e) => handleChange({ tab, fiatType: 'outgoing', currency: 'fiat' })}
+                          className={classnames(`button-toggle`, {
+                            'button-toggle--active': fiatType === 'outgoing',
+                          })}
+                          label={__('Outgoing')}
+                        />
+                      </div>
+                    </fieldset-section>
+                  </div>
+                )}
+              </div>
+            </div>
+            {/* listing of the transactions */}
+            { fiatType === 'incoming' && <WalletFiatAccountHistory transactions={accountTransactionResponse} /> }
+            { fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={customerTransactions} /> }
+            {/* TODO: have to finish pagination */}
+            {/* <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} /> */}
+          </div>
+        </div>
       }
+
     />
   );
 }

ui/component/walletBalance/view.jsx

@@ -10,6 +10,8 @@ import Card from 'component/common/card';
 import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
 import { formatNumberWithCommas } from 'util/number';
+import Icon from 'component/common/icon';
+import WalletFiatBalance from 'component/walletFiatBalance';
 
 type Props = {
   balance: number,
@@ -63,6 +65,7 @@ const WalletBalance = (props: Props) => {
   }, [doFetchUtxoCounts, balance, detailsExpanded]);
 
   return (
+    <div className={'columns'}>
     <Card
       title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
       subtitle={
@@ -181,6 +184,10 @@ const WalletBalance = (props: Props) => {
         </>
       }
     />
+
+      {/* fiat balance card */}
+      <WalletFiatBalance />
+    </div>
   );
 };
 

ui/component/walletFiatAccountHistory/view.jsx

@@ -21,67 +21,60 @@ const WalletBalance = (props: Props) => {
   }
 
   // if there are more than 10 transactions, limit it to 10 for the frontend
-  if (accountTransactions && accountTransactions.length > 10) {
-    accountTransactions.length = 10;
-  }
+  // if (accountTransactions && accountTransactions.length > 10) {
+  //   accountTransactions.length = 10;
+  // }
 
   return (
-    <><Card
-      title={'Tip 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>{__('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=""
-                        navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
-                        label={transaction.channel_name}
-                        button="link"
-                      />
-                    </td>
-                    <td>
-                      <Button
-                        className=""
-                        navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
-                        label={
-                          transaction.channel_claim_id === transaction.source_claim_id
-                            ? 'Channel Page'
-                            : 'Content 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>
-          </>
-      )}
-    />
-  </>
+    <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=""
+                navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                label={transaction.channel_name}
+                button="link"
+              />
+            </td>
+            <td>
+              <Button
+                className=""
+                navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                label={
+                  transaction.channel_claim_id === transaction.source_claim_id
+                    ? 'Channel Page'
+                    : 'Content 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>
+
   );
 };
 

ui/component/walletFiatBalance/view.jsx

@@ -6,83 +6,69 @@ import Button from 'component/button';
 import Card from 'component/common/card';
 import Icon from 'component/common/icon';
 import I18nMessage from 'component/i18nMessage';
+import { Lbryio } from 'lbryinc';
+import { STRIPE_PUBLIC_KEY } from 'config';
 
-type Props = {
-  accountDetails: any,
-};
+let stripeEnvironment = 'test';
+// if the key contains pk_live it's a live key
+// update the environment for the calls to the backend to indicate which environment to hit
+if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
+  stripeEnvironment = 'live';
+}
 
 const WalletBalance = (props: Props) => {
-  const {
-    accountDetails,
-  } = props;
+  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+
+  function getAccountStatus() {
+    return Lbryio.call(
+      'account',
+      'status',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    );
+  }
+
+  // calculate account transactions section
+  React.useEffect(() => {
+    (async function () {
+      try {
+        if (!stripeEnvironment) {
+          return;
+        }
+        const response = await getAccountStatus();
+
+        setAccountStatusResponse(response);
+
+      } catch (err) {
+        console.log(err);
+      }
+    })();
+  }, [stripeEnvironment]);
 
   return (
     <>{<Card
-      title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountDetails && ((accountDetails.total_received_unpaid - accountDetails.total_paid_out) / 100)) || 0} USD</>}
-      subtitle={accountDetails && accountDetails.total_received_unpaid > 0 &&
+      title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountStatusResponse && ((accountStatusResponse.total_received_unpaid - accountStatusResponse.total_paid_out) / 100)) || 0} USD</>}
+      subtitle={accountStatusResponse && accountStatusResponse.total_received_unpaid > 0 ? (
           <I18nMessage>
             This is your pending balance that will be automatically sent to your bank account
-          </I18nMessage>
+          </I18nMessage>) : (
+        <I18nMessage>
+          When you begin to receive tips your balance will be updated here
+        </I18nMessage>)
       }
       actions={
         <>
           <h2 className="section__title--small">
-            ${(accountDetails && (accountDetails.total_received_unpaid / 100)) || 0} Total Received Tips
+            ${(accountStatusResponse && (accountStatusResponse.total_received_unpaid / 100)) || 0} Total Received Tips
           </h2>
 
           <h2 className="section__title--small">
-            ${(accountDetails && (accountDetails.total_paid_out / 100)) || 0}  Withdrawn
-            {/* <Button */}
-            {/*  button="link" */}
-            {/*  label={detailsExpanded ? __('View less') : __('View more')} */}
-            {/*  iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN} */}
-            {/*  onClick={() => setDetailsExpanded(!detailsExpanded)} */}
-            {/* /> */}
+            ${(accountStatusResponse && (accountStatusResponse.total_paid_out / 100)) || 0}  Withdrawn
           </h2>
 
-          {/* view more section */}
-          {/* commenting out because not implemented, but could be used in the future */}
-          {/* {detailsExpanded && ( */}
-          {/*  <div className="section__subtitle"> */}
-          {/*    <dl> */}
-          {/*      <dt> */}
-          {/*        <span className="dt__text">{__('Earned from uploads')}</span> */}
-          {/*        /!* <span className="help--dt">({__('Earned from channel page')})</span> *!/ */}
-          {/*      </dt> */}
-          {/*      <dd> */}
-          {/*        <span className="dd__text"> */}
-          {/*          {Boolean(1) && ( */}
-          {/*            <Button */}
-          {/*              button="link" */}
-          {/*              className="dd__button" */}
-          {/*              icon={ICONS.UNLOCK} */}
-          {/*            /> */}
-          {/*          )} */}
-          {/*          <CreditAmount amount={1} precision={4} /> */}
-          {/*        </span> */}
-          {/*      </dd> */}
-
-          {/*      <dt> */}
-          {/*        <span className="dt__text">{__('Earned from channel page')}</span> */}
-          {/*        /!* <span className="help--dt">({__('Delete or edit past content to spend')})</span> *!/ */}
-          {/*      </dt> */}
-          {/*      <dd> */}
-          {/*        <CreditAmount amount={1} precision={4} /> */}
-          {/*      </dd> */}
-
-          {/*      /!* <dt> *!/ */}
-          {/*      /!*  <span className="dt__text">{__('...supporting content')}</span> *!/ */}
-          {/*      /!*  <span className="help--dt">({__('Delete supports to spend')})</span> *!/ */}
-          {/*      /!* </dt> *!/ */}
-          {/*      /!* <dd> *!/ */}
-          {/*      /!*  <CreditAmount amount={1} 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>
         </>

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() {
@@ -52,59 +47,64 @@ const WalletBalance = (props: Props) => {
 
   return (
     <>
-      <Card
-        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>
-                {accountTransactions &&
-                accountTransactions.map((transaction) => (
-                  <tr key={transaction.name + transaction.created_at}>
-                    <td>{moment(transaction.created_at).format('LLL')}</td>
-                    <td>
-                      <Button
-                        className=""
-                        navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
-                        label={transaction.channel_name}
-                        button="link"
-                      />
-                    </td>
-                    <td>
-                      <Button
-                        className=""
-                        navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
-                        label={
-                          transaction.channel_claim_id === transaction.source_claim_id
-                            ? 'Channel Page'
-                            : 'Content Page'
-                        }
-                        button="link"
-                      />
-                    </td>
-                    <td>${transaction.tipped_amount / 100}</td>
-                    <td>{lastFour}</td>
-                    <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
-                  </tr>
-                ))}
-                </tbody>
-              </table>
-              {(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
-            </div>
-          </>
-        }
-      />
+      <div className="section card-stack">
+        <div className="table__wrapper">
+          <table className="table table--transactions">
+            {/* table header */}
+            <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>
+            {/* 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=""
+                    navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                    label={transaction.channel_name}
+                    button="link"
+                  />
+                </td>
+                {/* link to content or channel */}
+                <td>
+                  <Button
+                    className=""
+                    navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                    label={
+                      transaction.channel_claim_id === transaction.source_claim_id
+                        ? 'Channel Page'
+                        : 'Content Page'
+                    }
+                    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>
+            ))}
+            </tbody>
+          </table>
+          {/* show some markup if there's no transactions */}
+          {(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
+        </div>
+      </div>
   </>
   );
 };

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,77 +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',
-      'status',
-      {
-        environment: stripeEnvironment,
-      },
-      'post'
-    );
-  }
-
-  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);
-
-        // TODO: some weird naming clash hence getAccountTransactionsa
-        const getAccountTransactions = await getAccountTransactionsa();
-
-        setAccountTransactionResponse(getAccountTransactions);
-      } catch (err) {
-        console.log(err);
-      }
-    })();
-  }, []);
-
-  // populate customer payment data
-  React.useEffect(() => {
-    (async function() {
-      try {
-        // get card payments customer has made
-        let customerTransactionResponse = await getPaymentHistory();
-
-        customerTransactionResponse.reverse();
-
-        setCustomerTransactions(customerTransactionResponse);
-      } catch (err) {
-        console.log(err);
-      }
-    })();
-  }, []);
-
   // @endif
 
   const { totalBalance } = props;
@@ -161,11 +86,15 @@ const WalletPage = (props: Props) => {
       <Page>
         <Tabs onChange={onTabChange} index={tabIndex}>
           <TabList className="tabs__list--collection-edit-page">
-            <Tab>{__('LBRY Credits')}</Tab>
-            <Tab>{__('Account History')}</Tab>
-            <Tab>{__('Payment History')}</Tab>
+            <Tab>{__('Balance')}</Tab>
+            <Tab>{__('Transactions')}</Tab>
           </TabList>
           <TabPanels>
+            {/* balances for lbc and fiat */}
+            <TabPanel>
+              <WalletBalance />
+            </TabPanel>
+            {/* transactions panel */}
             <TabPanel>
               <div className="section card-stack">
                 <div className="lbc-transactions">
@@ -182,7 +111,6 @@ const WalletPage = (props: Props) => {
                         <YrblWalletEmpty includeWalletLink />
                       ) : (
                         <div className="card-stack">
-                          <WalletBalance />
                           <TxoList search={search} />
                         </div>
                       )}
@@ -191,18 +119,6 @@ const WalletPage = (props: Props) => {
                 </div>
               </div>
             </TabPanel>
-            <TabPanel>
-              <div className="section card-stack">
-                <WalletFiatBalance accountDetails={accountStatusResponse} />
-                <WalletFiatAccountHistory transactions={accountTransactionResponse} />
-              </div>
-            </TabPanel>
-            <TabPanel>
-              <div className="section card-stack">
-                <WalletFiatPaymentBalance transactions={customerTransactions} accountDetails={accountStatusResponse} />
-                <WalletFiatPaymentHistory transactions={customerTransactions} />
-              </div>
-            </TabPanel>
           </TabPanels>
         </Tabs>
       </Page>
@@ -220,7 +136,6 @@ const WalletPage = (props: Props) => {
               <YrblWalletEmpty includeWalletLink />
             ) : (
               <div className="card-stack">
-                <WalletBalance />
                 <TxoList search={search} />
               </div>
             )}