From 9e76f85aff8ebd87102c298578d6aeef7806098e Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Wed, 28 Jul 2021 13:08:28 +0200
Subject: [PATCH] fiat and lbc tabs coming along

---
 ui/page/wallet/view.jsx | 57 +++++++++++++++++++++++++++++++----------
 1 file changed, 43 insertions(+), 14 deletions(-)

diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx
index ba284ffe1..c39285f3e 100644
--- a/ui/page/wallet/view.jsx
+++ b/ui/page/wallet/view.jsx
@@ -19,23 +19,52 @@ const WalletPage = (props: Props) => {
   const showIntro = totalBalance === 0;
   const loading = totalBalance === undefined;
 
+  const TAB_LBC_TRANSACTIONS = 'TabLBCTransactions';
+  const TAB_FIAT_TRANSACTIONS = 'TabFiatTransactions';
+
+  const [activeTab, setActiveTab] = React.useState(TAB_LBC_TRANSACTIONS);
+
   return (
     <Page>
-      {loading && (
-        <div className="main--empty">
-          <Spinner delayed />
-        </div>
-      )}
-      {!loading && (
+      {/* tabs to switch between fiat and lbc */}
+      <h2 style={{display: 'inline-block', paddingBottom: '14px', marginRight: '10px', textUnderlineOffset: '4px', textDecoration: 'underline'}}
+        onClick={() => {
+          document.getElementsByClassName('lbc-transactions')[0].style.display = 'inline';
+          document.getElementsByClassName('fiat-transactions')[0].style.display = 'none';
+        }}
+      >LBC Transactions</h2>
+      <h2 style={{display: 'inline-block'}}
+        onClick={() => {
+          document.getElementsByClassName('lbc-transactions')[0].style.display = 'none';
+          document.getElementsByClassName('fiat-transactions')[0].style.display = 'inline';
+        }}
+      >Fiat Transactions</h2>
+      <div className="lbc-transactions">
+        {/* if the transactions are loading */}
+        { loading && (
+          <div className="main--empty">
+            <Spinner delayed />
+          </div>
+        )}
+        {/* when the transactions are finished loading */}
+        { !loading && (
+          <>
+            {showIntro ? (
+              <YrblWalletEmpty includeWalletLink />
+            ) : (
+              <div className="card-stack">
+                <WalletBalance />
+                <TxoList search={search} />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      {(
         <>
-          {showIntro ? (
-            <YrblWalletEmpty includeWalletLink />
-          ) : (
-            <div className="card-stack">
-              <WalletBalance />
-              <TxoList search={search} />
-            </div>
-          )}
+          <div className="fiat-transactions">
+            <h2>Here's your fiat transactions</h2>
+          </div>
         </>
       )}
     </Page>