coming along well

ui/component/txoList/view.jsx

@@ -104,7 +104,9 @@ function TxoList(props: Props) {
         // console.log('amount of transactions');
         // console.log(customerTransactionResponse.length);
 
-        customerTransactionResponse.reverse();
+        if(customerTransactionResponse && customerTransactionResponse.length){
+          customerTransactionResponse.reverse();
+        }
 
         setCustomerTransactions(customerTransactionResponse);
       } catch (err) {
@@ -477,8 +479,9 @@ function TxoList(props: Props) {
               </div>
             </div>
             {/* listing of the transactions */}
-            { fiatType === 'incoming' && <WalletFiatPaymentHistory transactions={accountTransactionResponse} /> }
-            { fiatType === 'outgoing' && <WalletFiatAccountHistory transactions={customerTransactions} /> }
+            { fiatType === 'incoming' && <WalletFiatAccountHistory transactions={accountTransactionResponse} /> }
+            { fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={customerTransactions} /> }
+            {/* TODO: have to finish pagination */}
             <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
           </div>
         </div>

ui/component/walletFiatAccountHistory/view.jsx

@@ -21,9 +21,9 @@ const WalletBalance = (props: Props) => {
   }
 
   // if there are more than 10 transactions, limit it to 10 for the frontend
-  if (accountTransactions && accountTransactions.length > 10) {
-    accountTransactions.length = 10;
-  }
+  // if (accountTransactions && accountTransactions.length > 10) {
+  //   accountTransactions.length = 10;
+  // }
 
   return (
     <div className="table__wrapper">

ui/component/walletFiatPaymentHistory/view.jsx

@@ -22,10 +22,6 @@ const WalletBalance = (props: Props) => {
   // receive transactions from parent component
   const { transactions: accountTransactions } = props;
 
-  // console.log(accountTransactions.length);
-  // console.log('wallet transactions length');
-
-
   // const [accountStatusResponse, setAccountStatusResponse] = React.useState();
 
   // const [subscriptions, setSubscriptions] = React.useState();
@@ -101,6 +97,7 @@ const WalletBalance = (props: Props) => {
             ))}
             </tbody>
           </table>
+          {/* show some markup if there's no transactions */}
           {(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
         </div>
       </div>

ui/page/wallet/view.jsx

@@ -122,27 +122,6 @@ const WalletPage = (props: Props) => {
         const response = await getAccountStatus();
 
         setAccountStatusResponse(response);
-
-        // TODO: some weird naming clash hence getAccountTransactionsa
-        const getAccountTransactions = await getAccountTransactionsa();
-
-        setAccountTransactionResponse(getAccountTransactions);
-      } catch (err) {
-        console.log(err);
-      }
-    })();
-  }, []);
-
-  // populate customer payment data
-  React.useEffect(() => {
-    (async function() {
-      try {
-        // get card payments customer has made
-        let customerTransactionResponse = await getPaymentHistory();
-
-        customerTransactionResponse.reverse();
-
-        setCustomerTransactions(customerTransactionResponse);
       } catch (err) {
         console.log(err);
       }
@@ -163,10 +142,11 @@ const WalletPage = (props: Props) => {
           <TabList className="tabs__list--collection-edit-page">
             <Tab>{__('Balance')}</Tab>
             <Tab>{__('Transactions')}</Tab>
-            <Tab>{__('Subscriptions')}</Tab>
+            {/*<Tab>{__('Subscriptions')}</Tab>*/}
             {/*<Tab>{__('Analytics')}</Tab>*/}
           </TabList>
           <TabPanels>
+            {/* balances for lbc and fiat */}
             <TabPanel>
               <WalletBalance />
             </TabPanel>
@@ -194,17 +174,17 @@ const WalletPage = (props: Props) => {
                 </div>
               </div>
             </TabPanel>
-            <TabPanel>
-              <div className="section card-stack">
-                <WalletFiatPaymentHistory transactions={customerTransactions} />
-                <WalletFiatAccountHistory transactions={accountTransactionResponse} />
-              </div>
-            </TabPanel>
-            <TabPanel>
-              <div className="section card-stack">
-                <h2> Coming soon! </h2>
-              </div>
-            </TabPanel>
+            {/*<TabPanel>*/}
+            {/*  <div className="section card-stack">*/}
+            {/*    <WalletFiatPaymentHistory transactions={customerTransactions} />*/}
+            {/*    <WalletFiatAccountHistory transactions={accountTransactionResponse} />*/}
+            {/*  </div>*/}
+            {/*</TabPanel>*/}
+            {/*<TabPanel>*/}
+            {/*  <div className="section card-stack">*/}
+            {/*    <h2> Coming soon! </h2>*/}
+            {/*  </div>*/}
+            {/*</TabPanel>*/}
           </TabPanels>
         </Tabs>
       </Page>