fiat and lbc tabs coming along

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 && (
+      {/* tabs to switch between fiat and lbc */}
-        <div className="main--empty">
+      <h2 style={{display: 'inline-block', paddingBottom: '14px', marginRight: '10px', textUnderlineOffset: '4px', textDecoration: 'underline'}}
-          <Spinner delayed />
+        onClick={() => {
-        </div>
+          document.getElementsByClassName('lbc-transactions')[0].style.display = 'inline';
-      )}
+          document.getElementsByClassName('fiat-transactions')[0].style.display = 'none';
-      {!loading && (
+        }}
+      >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 ? (
+          <div className="fiat-transactions">
-            <YrblWalletEmpty includeWalletLink />
+            <h2>Here's your fiat transactions</h2>
-          ) : (
+          </div>
-            <div className="card-stack">
-              <WalletBalance />
-              <TxoList search={search} />
-            </div>
-          )}
         </>
       )}
     </Page>