From 6b38fb5734b897f025cfa654e7e5bb94e297a3ea Mon Sep 17 00:00:00 2001
From: Jordan Brookman <Jordan.Brookman@ibm.com>
Date: Sat, 7 May 2022 21:13:02 -0400
Subject: [PATCH] Add receive screen.  Add home button

---
 frontend/src/App.js               | 16 ++++++++++++----
 frontend/src/components/Button.js | 12 ++++++------
 frontend/src/routes/Home.js       | 12 ++++++------
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 37acfa1..ae375b5 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -12,9 +12,10 @@ import Home from "./routes/Home";
 import Family from "./routes/Family";
 import NewAccount from "./routes/NewAccount";
 import Onboarding from './routes/Onboarding';
+import Receive from './routes/Receive';
 import React from 'react';
-import {ContactsIcon, CrossIcon, GearIcon, MenuIcon} from '@bitcoin-design/bitcoin-icons-react/filled';
-import {ChartSquareBarIcon} from '@heroicons/react/solid';
+import { ContactsIcon, CrossIcon, GearIcon, HomeIcon, MenuIcon } from '@bitcoin-design/bitcoin-icons-react/filled';
+import { ChartSquareBarIcon } from '@heroicons/react/solid';
 import NewFamily from './routes/NewFamily';
 import Invite from './routes/Invite';
 
@@ -22,13 +23,19 @@ const Child = {};
 
 function App() {
   const [menuActive, setMenuActive] = React.useState(false)
-  
+
   const toggleMenu = () => {
     setMenuActive(!menuActive)
   }
-  
+
   return (
     <div className="app">
+      <nav className="mt-4 ml-4">
+        <Link to="/">
+          <HomeIcon width="38" height="38" />
+          <h1>Home</h1>
+        </Link>
+      </nav>
       <nav className={"fixed bg-fam-bg-dark h-screen w-screen z-50 p-8 space-y-8 transition-all " + (menuActive ? 'right-0' : 'right-full')}>
         <p className="text-4xl font-display drop-shadow-xl font-[900]">Cete</p>
         <ul className="space-y-8 text-lg">
@@ -56,6 +63,7 @@ function App() {
 
       <Routes>
         <Route path="onboarding" element={<Onboarding />} />
+        <Route path="receive" element={<Receive />} />
         <Route path="invite" element={<Invite />} />
         <Route path="new-family" element={<NewFamily />} />
         <Route path="/" element={<Home />}>
diff --git a/frontend/src/components/Button.js b/frontend/src/components/Button.js
index cf4815c..415bb2c 100644
--- a/frontend/src/components/Button.js
+++ b/frontend/src/components/Button.js
@@ -1,19 +1,19 @@
 import React from "react";
 
-const Button = ({children, style, to, disabled, onClick, size, direction}) => {
+const Button = ({ children, style, to, disabled, onClick, size, direction }) => {
   let classes = "w-full rounded-md text-white font-display"
-  
-  if(size === 'small') classes += ' p-2 text-lg'
+
+  if (size === 'small') classes += ' p-2 text-lg'
   else classes += ' p-4 text-xl'
-  
-  if(style !== 'free') {
+
+  if (style !== 'free') {
     classes += ' drop-shadow-md'
     classes += disabled ? ' bg-fam-orange-inactive' : ' bg-fam-orange'
   }
   else {
     classes += ' font-light font-sans text-lg'
   }
-  
+
   return (
     <button className={classes} disabled={disabled} onClick={onClick}>
       <span className={"drop-shadow-md flex align-center justify-center items-center" + (direction === 'vertical' ? ' flex-col space-y-2' : ' flex-row space-x-2')}>
diff --git a/frontend/src/routes/Home.js b/frontend/src/routes/Home.js
index 2dc3478..31f409b 100644
--- a/frontend/src/routes/Home.js
+++ b/frontend/src/routes/Home.js
@@ -1,8 +1,8 @@
 import React from "react";
 import { Link, Outlet } from "react-router-dom";
 import Button from '../components/Button';
-import {PlusIcon} from '@heroicons/react/solid';
-import {ReceiveIcon, ScanIcon, SendIcon} from '@bitcoin-design/bitcoin-icons-react/filled';
+import { PlusIcon } from '@heroicons/react/solid';
+import { ReceiveIcon, ScanIcon, SendIcon } from '@bitcoin-design/bitcoin-icons-react/filled';
 
 const Home = () => {
   return (
@@ -10,7 +10,7 @@ const Home = () => {
       <div className="default-bg"></div>
       <div className="min-w-screen min-h-screen p-8 flex flex-col justify-center z-10 relative">
         <h1 className="text-2xl">Welcome, Jerry</h1>
-        
+
         <div className="tile">
           <h2 className="mb-4">Your Balance</h2>
           <p className="text-4xl">1000 <span>sats</span></p>
@@ -18,9 +18,9 @@ const Home = () => {
 
         <div className="tile">
           <h2>Members</h2>
-          
+
           <p className="text-lg">Your tribe has no members. Add&nbsp;one! </p>
-          
+
           <Link to="/invite">
             <Button><PlusIcon className="w-8 h-8" /> <span>Add Member</span></Button>
           </Link>
@@ -34,7 +34,7 @@ const Home = () => {
           <Link to="/" className="basis-1/3">
             <Button size="large" direction="vertical"><ScanIcon className="w-8 h-8" /> <span>Scan</span></Button>
           </Link>
-          <Link to="/onboarding" className="basis-1/3">
+          <Link to="/receive" className="basis-1/3">
             <Button size="large" direction="vertical">
               <ReceiveIcon className="w-8 h-8" /> <span>Receive</span>
             </Button>