From f1715660f82214517d24d56db667476e35082a71 Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Wed, 18 Aug 2021 20:06:12 +0200
Subject: [PATCH] refactoring the wallet iteration

---
 ui/component/common/credit-amount.jsx |  5 ++
 ui/component/txoList/view.jsx         | 77 +++++++++++++++++++++------
 2 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/ui/component/common/credit-amount.jsx b/ui/component/common/credit-amount.jsx
index b22e63cab..92adbba4c 100644
--- a/ui/component/common/credit-amount.jsx
+++ b/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;
 
diff --git a/ui/component/txoList/view.jsx b/ui/component/txoList/view.jsx
index e07b3e6b1..22fd570b0 100644
--- a/ui/component/txoList/view.jsx
+++ b/ui/component/txoList/view.jsx
@@ -188,24 +188,50 @@ 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({ dkey: TXO.ACTIVE, value: 'active' })}
+                  className={classnames(`button-toggle`, {
+                    'button-toggle--active': TXO.ACTIVE === TXO.ACTIVE,
+                  })}
+                  label={__('LBRY Credits')}
+                />
+                <Button
+                  button="alt"
+                  onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent' })}
+                  className={classnames(`button-toggle`, {
+                    'button-toggle--active': active === 'spent',
+                  })}
+                  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={
@@ -288,8 +314,25 @@ function TxoList(props: Props) {
                   </fieldset-section>
                 </div>
               )}
+              <div className="card__actions--inline" style={{marginLeft: '200px'}}>
+                {!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>