From 815799a389c45e303b50aed638267937511c33fb Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Thu, 19 Aug 2021 17:11:51 +0200
Subject: [PATCH] almost ready for refactor

---
 ui/component/txoList/view.jsx                 | 166 +++++++++---------
 .../walletFiatAccountHistory/view.jsx         | 105 ++++++-----
 .../walletFiatPaymentHistory/view.jsx         |  98 +++++------
 ui/page/wallet/view.jsx                       |  10 +-
 4 files changed, 181 insertions(+), 198 deletions(-)

diff --git a/ui/component/txoList/view.jsx b/ui/component/txoList/view.jsx
index 9c9ce8414..1b2f4f95a 100644
--- a/ui/component/txoList/view.jsx
+++ b/ui/component/txoList/view.jsx
@@ -373,90 +373,92 @@ function TxoList(props: Props) {
         </div>
         // fiat section
         : <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, currency: 'fiat' })}*/}
-              {/*  >*/}
-              {/*    {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, currency: 'fiat' })}
-                  >
-                    {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>{__('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')}
-                      />
-                      {/*<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>
-              )}
+          <div className="section card-stack">
+            <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, currency: 'fiat' })}*/}
+                {/*  >*/}
+                {/*    {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, currency: 'fiat' })}
+                    >
+                      {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>{__('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')}
+                        />
+                        {/*<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>
+                )}
+              </div>
             </div>
+            {/* listing of the transactions */}
+            { fiatType === 'incoming' && <WalletFiatAccountHistory transactions={[]} /> }
+            { fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={[]} /> }
+            <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
           </div>
-          {/* listing of the transactions */}
-          { fiatType === 'incoming' && <WalletFiatAccountHistory transactions={[]} /> }
-          { fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={[]} /> }
-          <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
         </div>
       }
 
diff --git a/ui/component/walletFiatAccountHistory/view.jsx b/ui/component/walletFiatAccountHistory/view.jsx
index 49b1ff299..970ee824b 100644
--- a/ui/component/walletFiatAccountHistory/view.jsx
+++ b/ui/component/walletFiatAccountHistory/view.jsx
@@ -26,62 +26,55 @@ const WalletBalance = (props: Props) => {
   }
 
   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>
+
   );
 };
 
diff --git a/ui/component/walletFiatPaymentHistory/view.jsx b/ui/component/walletFiatPaymentHistory/view.jsx
index 69bbc49d9..861a91982 100644
--- a/ui/component/walletFiatPaymentHistory/view.jsx
+++ b/ui/component/walletFiatPaymentHistory/view.jsx
@@ -53,58 +53,52 @@ const WalletBalance = (props: Props) => {
   return (
     <>
       <div className="section card-stack">
-        <Card
-          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="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>
   </>
   );
diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx
index 7e19cd161..144eccd84 100644
--- a/ui/page/wallet/view.jsx
+++ b/ui/page/wallet/view.jsx
@@ -164,7 +164,7 @@ const WalletPage = (props: Props) => {
             <Tab>{__('Balance')}</Tab>
             <Tab>{__('Transactions')}</Tab>
             <Tab>{__('Subscriptions')}</Tab>
-            <Tab>{__('Analytics')}</Tab>
+            {/*<Tab>{__('Analytics')}</Tab>*/}
           </TabList>
           <TabPanels>
             <TabPanel>
@@ -196,13 +196,7 @@ const WalletPage = (props: Props) => {
             </TabPanel>
             <TabPanel>
               <div className="section card-stack">
-                <WalletFiatPaymentHistory transactions={customerTransactions} />
-                <WalletFiatAccountHistory transactions={accountTransactionResponse} />
-              </div>
-            </TabPanel>
-            <TabPanel>
-              <div className="section card-stack">
-                <WalletFiatPaymentHistory transactions={customerTransactions} />
+                <h1> Coming soon! </h1>
               </div>
             </TabPanel>
           </TabPanels>