Merge pull request #14 from aryanbhasin/master

Adds 'My Rentals' zero-state & Updates homepage

frontend/src/client/App.tsx

@@ -6,9 +6,9 @@ import {
 
 import WalletProvider from "./components/WalletProvider";
 import Main from "./pages/Main";
-import Create from "./pages/Create";
-import Find from "./pages/Find";
+import List from "./pages/List";
 import Explore from "./pages/Explore";
+import Rentals from "./pages/Rentals";
 import About from "./pages/About";
 import { ContextWrapper } from "./Context";
 
@@ -18,9 +18,9 @@ export const App = () => {
       <WalletProvider>
         <Routes>
           <Route path="/" element={<Main />} />
-          <Route path="/create" element={<Create />} />
+          <Route path="/list" element={<List />} />
           <Route path="/explore" element={<Explore />} />
-          <Route path="/find" element={<Find />} />
+          <Route path="/rentals" element={<Rentals /> } />
           <Route path="/about" element={<About />} />
         </Routes>
       </WalletProvider>

frontend/src/client/components/Navbar.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Link } from "react-router-dom";
 import nerpLogo from "../../../static/nerpLogoWhite.png";
 
-
 export const Navbar = () => {
   return (
     <header className={"justify-center items-center bg-indigo-400 w-full"}>
@@ -14,10 +13,13 @@ export const Navbar = () => {
         </div>
         <div className="flex">
           <div className="text-white hover:text-indigo-100 font-bold py-2 px-4">
-            <Link to="/create">Create</Link>
+            <Link to="/list">List a Rental</Link>
+          </div>
+          <div className="text-white hover:text-indigo-100 font-bold py-2 px-4">
+            <Link to="/explore">Explore Current Rentals</Link>
           </div>
           <div className="text-white hover:text-indigo-100 font-bold py-2 px-4">
-            <Link to="/find">Find</Link>
+            <Link to="/rentals">My Rentals</Link>
           </div>
           <div className="text-white hover:text-indigo-100 font-bold py-2 pl-4 pr-10">
             <Link to="/about">About</Link>

frontend/src/client/pages/Create.tsx → frontend/src/client/pages/List.tsx

@@ -5,7 +5,7 @@ import { ContractCreator } from "../components/ContractCreator";
 import { useAppContext } from "../Context";
 
 
-const Create = () => {
+const List = () => {
   const { name, setName } = useAppContext();
 
   return (
@@ -17,4 +17,4 @@ const Create = () => {
   );
 };
 
-export default Create;
+export default List;

frontend/src/client/pages/Main.tsx

@@ -13,23 +13,31 @@ const Main = () => {
     <div className="flex bg-white-100 items-center flex-col justify-between h-screen overflow-hidden">
       <Navbar />
       <main className="">
-        <div className="sm:text-center lg:text-left">
+        <div className="text-center">
           <h1 className="text-4xl tracking-tight font-extrabold text-slate-800 sm:text-5xl md:text-6xl">
-            <span className="block xl:inline">The NFT Rental Protocol: </span>{' '}
-            <span className="block text-indigo-600 xl:inline">n3rp</span>
+            <span className="block xl:inline">Welcome to <span className="text-indigo-600">n3rp</span>!</span>{' '}
           </h1>
           <p className="mt-3 text-base text-slate-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
-            Borrow and lend your NFTs. Trustlessly, permissionlessly, securely. 
+            Want to rent out your Bored Apes for a week? 
           </p>
+          <p className="mt-3 text-base text-slate-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
+            Want to borrow someone else's NFT to go to a party? 
+          </p>
+          <div className="mt-3 text-base text-slate-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
+            <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded">
+              Connect Your Wallet
+            </button>
+            <span>&nbsp; and get started!</span>
+          </div>
           <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
             <div className="rounded-md shadow">
-              <Link to="/create" className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
-                Create contract &rarr;
+              <Link to="/create" className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
+                List a rental now
               </Link>
             </div>
             <div className="mt-3 sm:mt-0 sm:ml-3">
               <Link to="/find" className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
-                View contracts
+                Explore current rentals
               </Link>
             </div>
           </div>

frontend/src/client/pages/Rentals.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Navbar } from "../components/Navbar";
+import { Footer } from "../components/Footer";
+
+const Rentals = () => {
+    return (
+        <div className="flex bg-white-100 flex-col justify-start h-screen">
+            <Navbar />
+            <MyListingsView />
+            <MyRentalsView />
+            <div className="flex flex-col items-center">
+                <Footer />
+            </div>
+        </div>
+    );
+}
+
+const MyListingsView = () => {
+    return (
+        <div className="m-20 space-y-6">
+            <h1 className="text-4xl font-bold">My Listings</h1>
+            {/* TODO: Check if user has listed NFTs */}
+            <p>You haven't listed any NFTs!</p>
+            <div>
+                <Link to="/create" className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-8 py-3 rounded">List a Rental</Link>
+            </div>
+        </div>
+    );
+}
+
+const MyRentalsView = () => {
+    return (
+        <div className="m-20 space-y-6">
+            <h1 className="text-4xl font-bold">My Rentals</h1>
+            {/* TODO: Check if user has rented NFTs */}
+            <p>You haven't rented any NFTs!</p>
+            <div>
+                <Link to="/find" className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-8 py-3 rounded">Explore Current Rentals!</Link>
+            </div>
+        </div>
+    );
+}
+
+export default Rentals;

frontend/types/types.d.ts → frontend/src/global.d.ts

@@ -1,6 +1,4 @@
-// declare modules here
-
 declare module "*.png" {
     const value: any;
     export = value;
-}
+}

frontend/tsconfig.json

@@ -21,5 +21,5 @@
     "sourceMap": true,
     "target": "ES2020"
   },
-  "include": ["src/**/*", "types/*", "*"]
+  "include": ["src/**/*", "types/*", "*", "src/global.d.ts"]
 }