From 01902f8e0b6fe170792822255314738c654ff68f Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Wed, 28 Jul 2021 23:10:46 +0200
Subject: [PATCH] transaction listing working

---
 ui/component/walletFiatBalance/view.jsx      |  4 +-
 ui/component/walletFiatTransactions/view.jsx | 70 ++++++++++++++++----
 ui/page/wallet/view.jsx                      | 46 +++++++++++--
 3 files changed, 99 insertions(+), 21 deletions(-)

diff --git a/ui/component/walletFiatBalance/view.jsx b/ui/component/walletFiatBalance/view.jsx
index 284e27caa..7e099cbe4 100644
--- a/ui/component/walletFiatBalance/view.jsx
+++ b/ui/component/walletFiatBalance/view.jsx
@@ -136,8 +136,8 @@ const WalletBalance = (props: Props) => {
           )}
 
           <div className="section__actions">
-            <Button button="primary" label={__('Receive Payout')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
-            <Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SEND}`} />
+            <Button button="primary" label={__('Receive Payout')} icon={ICONS.SEND}  />
+            <Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
           </div>
         </>
       }
diff --git a/ui/component/walletFiatTransactions/view.jsx b/ui/component/walletFiatTransactions/view.jsx
index 7c68ee2b2..61ef1c43f 100644
--- a/ui/component/walletFiatTransactions/view.jsx
+++ b/ui/component/walletFiatTransactions/view.jsx
@@ -12,6 +12,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
 import { formatNumberWithCommas } from 'util/number';
 import { Lbryio } from 'lbryinc';
+import moment from 'moment';
 
 type Props = {
   balance: number,
@@ -30,6 +31,7 @@ type Props = {
   massClaimIsPending: boolean,
   utxoCounts: { [string]: number },
   accountDetails: any,
+  transactions: any,
 };
 
 export const WALLET_CONSOLIDATE_UTXOS = 400;
@@ -51,6 +53,9 @@ const WalletBalance = (props: Props) => {
     massClaimIsPending,
     utxoCounts,
   } = props;
+
+  const accountTransactions = props.transactions;
+
   const [detailsExpanded, setDetailsExpanded] = React.useState(false);
   const [accountStatusResponse, setAccountStatusResponse] = React.useState();
 
@@ -92,19 +97,58 @@ const WalletBalance = (props: Props) => {
 
   return (
     <Card
-      title={<><Icon size="18" icon={ICONS.FINANCE} />313 USD</>}
-      subtitle={
-        totalLocked > 0 ? (
-          <I18nMessage>
-            This is your remaining balance that can still be withdrawn to your bank account
-          </I18nMessage>
-        ) : (
-          <span>{__('Your total balance.')}</span>
-        )
-      }
-      body={
-        <h1>Hello!</h1>
-      }
+      title={'Tip History'}
+      body={accountTransactions && accountTransactions.length > 0 && (
+          <>
+            <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="stripe__card-link-text"
+                        navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                        label={transaction.channel_name}
+                        button="link"
+                      />
+                    </td>
+                    <td>
+                      <Button
+                        className="stripe__card-link-text"
+                        navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                        label={
+                          transaction.channel_claim_id === transaction.source_claim_id
+                            ? 'Channel Page'
+                            : 'File 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>
+            </div>
+          </>
+      )}
       actions={
         <>
           {accountStatusResponse && accountStatusResponse.charges_enabled && <h2>Charges Enabled: True</h2>}
diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx
index 82076f149..8a470b8ea 100644
--- a/ui/page/wallet/view.jsx
+++ b/ui/page/wallet/view.jsx
@@ -19,18 +19,30 @@ type Props = {
 const WalletPage = (props: Props) => {
   console.log(props);
 
-  var environment = 'test';
+  var stripeEnvironment = 'test';
 
   const tab = new URLSearchParams(props.location.search).get('tab');
 
   const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+  const [accountTransactionResponse, setAccountTransactionResponse] = React.useState();
 
   function getAccountStatus(){
     return Lbryio.call(
       'account',
       'status',
       {
-        environment
+        environment: stripeEnvironment,
+      },
+      'post'
+    );
+  }
+
+  function getAccountTransactionsa(){
+    return Lbryio.call(
+      'account',
+      'list',
+      {
+        environment: stripeEnvironment,
       },
       'post'
     );
@@ -38,11 +50,33 @@ const WalletPage = (props: Props) => {
 
   React.useEffect(() => {
     (async function(){
-      const response = await getAccountStatus();
+      try {
+        const response = await getAccountStatus();
+
+        console.log('account status');
+
+        console.log(response);
+
+        setAccountStatusResponse(response);
+
+        // TODO: some weird naming clash
+        const getAccountTransactions = await getAccountTransactionsa();
+
+        console.log('transactions');
+
+        setAccountTransactionResponse(getAccountTransactions)
+
+        console.log(getAccountTransactions);
+
+      } catch (err){
+
+
+
+
+
+      }
 
-      setAccountStatusResponse(response);
 
-      console.log(response);
     })();
   }, []);
 
@@ -111,7 +145,7 @@ const WalletPage = (props: Props) => {
           <div className="fiat-transactions" style={{display: 'none'}}>
             <WalletFiatBalance accountDetails={accountStatusResponse} />
             <div style={{paddingTop: '20px'}}></div>
-            {/*<WalletFiatTransactions />*/}
+            <WalletFiatTransactions transactions={accountTransactionResponse}/>
           </div>
         </>
       )}