Grandma's wallet

frontend/src/App.js

@@ -18,6 +18,7 @@ import {ChartSquareBarIcon} from '@heroicons/react/solid';
 import NewFamily from './routes/NewFamily';
 import Invite from './routes/Invite';
 import Kid from './routes/Kid';
+import Grandma from './routes/Grandma';
 
 const Child = {};
 
@@ -72,6 +73,7 @@ function App() {
         <Route path="family" element={<Family />} />
         <Route path="family/:account" element={<Account />} />
         <Route path="family/:account/kid" element={<Kid />} />
+        <Route path="family/:account/grandma" element={<Grandma />} />
       </Routes>
     </div>
   );

frontend/src/index.css

@@ -17,6 +17,14 @@
     background-size: cover;
 }
 
+.grandma-bg {
+    @apply fixed h-screen w-screen z-0;
+    /*opacity: 0.10;*/
+    filter: blur(2px);
+    background-image: url('../public/flowers.jpg');
+    background-size: cover;
+}
+
 h1, h2 {
     @apply font-display;
 }
@@ -35,4 +43,12 @@ h1, h2 {
 
 .kid {
     @apply bg-[#7350BC];
+}
+
+.grandma {
+    @apply bg-rose-100 text-neutral-600 border-rose-300;
+}
+
+.grandma.slots > div {
+    @apply border-rose-300;
 }

frontend/src/routes/Family.js

@@ -27,7 +27,7 @@ const Family = () => {
       name: 'Gertrude',
       photo: '/grandmother.jpg',
       balance: '90,000,023',
-      id: 'gertrude'
+      id: 'gertrude/grandma'
     }
   ])
 

frontend/src/routes/Grandma.js

@@ -0,0 +1,119 @@
+import React from "react";
+import {Link, useParams} from "react-router-dom";
+import {ArrowDownIcon, ArrowUpIcon, BitcoinCircleIcon} from '@bitcoin-design/bitcoin-icons-react/filled';
+// unique account within family page
+const Account = () => {
+
+
+  const {account} = useParams()
+
+  const [transactions, setTransactions] = React.useState([
+    {
+      counterparty: 'Miller Insurance Co.',
+      memo: 'Insurance payout',
+      date: '2022-06-01 14:55',
+      amount: 200000,
+      direction: 'receive'
+    },
+    {
+      counterparty: 'Sunnyville',
+      memo: 'Assisted living rent',
+      date: '2022-06-01 14:55',
+      amount: 100000,
+      direction: 'send'
+    },
+    {
+      counterparty: 'Dr. Melissa Schafer, MD',
+      memo: 'Quarterly checkup',
+      date: '2022-06-01 14:55',
+      amount: 100000,
+      direction: 'send'
+    },
+    {
+      counterparty: 'Miller Insurance Co.',
+      memo: 'Insurance payout',
+      date: '2022-06-01 14:55',
+      amount: 200000,
+      direction: 'receive'
+    },
+    {
+      counterparty: 'Sunnyville',
+      memo: 'Assisted living rent',
+      date: '2022-06-01 14:55',
+      amount: 100000,
+      direction: 'send'
+    },
+    {
+      counterparty: 'Dr. Melissa Schafer, MD',
+      memo: 'Quarterly checkup',
+      date: '2022-06-01 14:55',
+      amount: 100000,
+      direction: 'send'
+    },
+    {
+      counterparty: 'Miller Insurance Co.',
+      memo: 'Insurance payout',
+      date: '2022-06-01 14:55',
+      amount: 200000,
+      direction: 'receive'
+    },
+    {
+      counterparty: 'Sunnyville',
+      memo: 'Assisted living rent',
+      date: '2022-06-01 14:55',
+      amount: 100000,
+      direction: 'send'
+    },
+    {
+      counterparty: 'Dr. Melissa Schafer, MD',
+      memo: 'Quarterly checkup',
+      date: '2022-06-01 14:55',
+      amount: 100000,
+      direction: 'send'
+    },
+  ])
+
+  return (
+    <div className="min-h-screen">
+      <div className="grandma-bg"></div>
+      <div className="min-w-screen min-h-screen py-10 px-8 flex flex-col justify-center z-10 relative">
+        <h1 className="text-2xl text-neutral-900">Gertrude's Wallet</h1>
+
+        <div className="tile grandma">
+          <h2 className="mb-2 flex flex-row"><span>Your Balance</span> <BitcoinCircleIcon className="w-6 h-6 text-fam-orange" /></h2>
+          <p className="text-4xl">70,000,000 <span>sats</span></p>
+        </div>
+
+        <div className="slots grandma">
+          {transactions.map((tx, index)=>{
+            return(
+              <div className="flex flex-row space-x-8 justify-center items-center border-solid border-fam-teal border-b w-full p-4">
+                <div>
+                  {tx.direction === 'send' ?
+                    <span className="rounded-full bg-blue-500 inline-block p-2">
+                      <ArrowUpIcon className="w-8 h-8 text-white" />
+                    </span>
+                  :
+                    <span className="rounded-full bg-green-500 inline-block p-2">
+                      <ArrowDownIcon className="w-8 h-8 text-white" />
+                    </span>
+                  }
+                </div>
+                <div>
+                  <h3 className="font-bold">{tx.counterparty}</h3>
+                  <p>{tx.date}</p>
+                  <p>{tx.memo}</p>
+                </div>
+                <div>
+                  <p className="font-bold">{tx.amount}</p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Account;