refactoring the wallet iteration

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

@@ -188,24 +188,50 @@ function TxoList(props: Props) {
 
   return (
     <Card
-      title={<div className="table__header-text">{__(`Transactions`)}</div>}
+      title={
-      titleActions={
+        <><div className="table__header-text" style={{width: '124px', display: 'inline-block'}}>{__(`Transactions`)}</div>
-        <div className="card__actions--inline">
+          <div style={{display: 'inline-block'}}>
-          {!isFetchingTransactions && transactionsFile === null && (
+            <fieldset-section>
-            <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label>
+              <div className={'txo__radios'}>
-          )}
+                <Button
-          <div className="txo__export">
+                  button="alt"
-            <FileExporter
+                  onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active' })}
-              data={transactionsFile}
+                  className={classnames(`button-toggle`, {
-              label={__('Export')}
+                    'button-toggle--active': TXO.ACTIVE === TXO.ACTIVE,
-              tooltip={__('Fetch transaction data for export')}
+                  })}
-              defaultFileName={'transactions-history.csv'}
+                  label={__('LBRY Credits')}
-              onFetch={() => fetchTransactions()}
+                />
-              progressMsg={isFetchingTransactions ? __('Fetching data') : ''}
+                <Button
+                  button="alt"
+                  onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent' })}
+                  className={classnames(`button-toggle`, {
+                    'button-toggle--active': active === 'spent',
+                  })}
+                  label={__('USD')}
                 />
               </div>
-          <Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
+            </fieldset-section>
           </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>