From ab07b45e055eb627e35725040f91fa4fe36f747a Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Thu, 19 Aug 2021 13:57:46 +0200
Subject: [PATCH] adding in transactions to existing table

---
 ui/component/txoList/view.jsx | 103 +++++++++++++++++++++++++++++++++-
 1 file changed, 102 insertions(+), 1 deletion(-)

diff --git a/ui/component/txoList/view.jsx b/ui/component/txoList/view.jsx
index c9b457a8a..fca23f6d1 100644
--- a/ui/component/txoList/view.jsx
+++ b/ui/component/txoList/view.jsx
@@ -251,7 +251,7 @@ function TxoList(props: Props) {
         // </div>
       }
       isBodyList
-      body={
+      body={ currency === 'credits' ?
         <div>
           <div className="card__body-actions">
             <div className="card__actions">
@@ -352,8 +352,109 @@ function TxoList(props: Props) {
           {/* listing of the transactions */}
           <TransactionListTable txos={txoPage} />
           <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
+        </div> :
+        <div>
+          <div className="card__body-actions">
+            <div className="card__actions">
+              <div>
+                <FormField
+                  type="select"
+                  name="type"
+                  label={
+                    <>
+                      {__('Type')}
+                      <HelpLink href="https://lbry.com/faq/transaction-types" />
+                    </>
+                  }
+                  value={type || 'all'}
+                  onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab })}
+                >
+                  {Object.values(TXO.DROPDOWN_TYPES).map((v) => {
+                    const stringV = String(v);
+                    return (
+                      <option key={stringV} value={stringV}>
+                        {stringV && __(toCapitalCase(stringV))}
+                      </option>
+                    );
+                  })}
+                </FormField>
+              </div>
+              {(type === TXO.SENT || type === TXO.RECEIVED) && (
+                <div>
+                  <FormField
+                    type="select"
+                    name="subtype"
+                    label={__('Payment Type')}
+                    value={subtype || 'all'}
+                    onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value, tab })}
+                  >
+                    {Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
+                      const stringV = String(v);
+                      return (
+                        <option key={stringV} value={stringV}>
+                          {stringV && __(toCapitalCase(stringV))}
+                        </option>
+                      );
+                    })}
+                  </FormField>
+                </div>
+              )}
+              {!hideStatus && (
+                <div>
+                  <fieldset-section>
+                    <label>{__('Status')}</label>
+                    <div className={'txo__radios'}>
+                      <Button
+                        button="alt"
+                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active', tab })}
+                        className={classnames(`button-toggle`, {
+                          'button-toggle--active': active === TXO.ACTIVE,
+                        })}
+                        label={__('Active')}
+                      />
+                      <Button
+                        button="alt"
+                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent', tab })}
+                        className={classnames(`button-toggle`, {
+                          'button-toggle--active': active === 'spent',
+                        })}
+                        label={__('Historical')}
+                      />
+                      <Button
+                        button="alt"
+                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all', tab })}
+                        className={classnames(`button-toggle`, {
+                          'button-toggle--active': active === 'all',
+                        })}
+                        label={__('All')}
+                      />
+                    </div>
+                  </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 */}
+          <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
         </div>
       }
+
     />
   );
 }