almost mvp

frontend/src/pages/AccountList/index.tsx

@@ -1,7 +1,13 @@
 import { useAccounts } from '../../hooks/getMany/useAccounts'
+import { Page } from '../../layout/Page'
 
 export const AccountList = () => {
   const accounts = useAccounts()
 
-  return <div>Account Count: {accounts.data?.length}</div>
+  return (
+    <Page>
+      <h1>Account List</h1>
+      <p>Count: {accounts.data?.length}</p>
+    </Page>
+  )
 }

frontend/src/pages/Dashboard/index.tsx

@@ -1,19 +1,25 @@
 import { FundBar } from '../../widgets/FundBar'
-import { useStacks } from '../../hooks/getMany/useStacks'
+import { Page } from '../../layout/Page'
+import './style.scss'
+import { useAccounts } from '../../hooks/getMany/useAccounts'
 
 export const Dashboard = () => {
-  const stacks = useStacks()
-
-  if (!stacks.data) return <div>loading...</div>
+  const accounts = useAccounts()
+  if (!accounts.data) return <div>loading...</div>
 
   return (
-    <>
+    <Page>
       <h1>Remaining Balances</h1>
-      <div className="funds">
-        {stacks.data.map((stack, i) => (
-          <FundBar key={stack.id} stack={stack} col={i + 1} />
-        ))}
-      </div>
-    </>
+      {accounts.data?.map((account) => (
+        <div className="account-overview">
+          <h3>{account.name}</h3>
+          <div className="funds">
+            {account.stacks.map((stack) => (
+              <FundBar key={stack.id} stack={stack} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </Page>
   )
 }

frontend/src/pages/Dashboard/style.scss

@@ -0,0 +1,19 @@
+@import '../../scss/variables.scss';
+
+.account-overview {
+  display: flex;
+  border: 1px solid $color-grey;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  margin: 1rem 0;
+  padding: 1rem;
+  background: $color-alt;
+
+  .funds {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}

frontend/src/pages/TransactionList/index.tsx

@@ -1,18 +1,26 @@
+import { useTransactions } from '../../hooks/getMany/useTransactions'
+import { Page } from '../../layout/Page'
 import './style.scss'
 
 export const TransactionList = () => {
+  const transactions = useTransactions()
+
   return (
-    <>
+    <Page>
       <h1>Transactions</h1>
+
       <div className="transactions">
-        {[].map((account, i) => {
+        {transactions.data?.map((tx, i) => {
           return (
-            <div className="column" key={`${account}-txs-${i}`}>
-              <h3>{account}</h3>
+            <div className="dank-transaction" key={`${tx.id}-txs-${i}`}>
+              <p>
+                {tx.details}: ${tx.amount}
+              </p>
+              <p>on: {tx.created_at}</p>
             </div>
           )
         })}
       </div>
-    </>
+    </Page>
   )
 }

frontend/src/pages/TransactionList/style.scss

@@ -1,21 +1,10 @@
-.transactions {
-  .column {
-    h3 {
-      text-align: center;
-      text-decoration: underline;
-    }
-    margin: 2ch;
-    background: #fff1;
-    padding: 0 2ch 1ch;
-    border-radius: 1ch;
-  }
+@import '../../scss/variables.scss';
 
-  .transaction-item {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    .details {
-      padding-left: 1ch;
-    }
+.transactions {
+  .dank-transaction {
+    border: 1px solid $color-dark;
+    margin: 1rem 0;
+    background: #fff1;
+    padding: 1rem;
   }
 }