Build UI - add home page (#19)

* setup default ui build

* --

* UI: add theme, layouts & first pass at homepage

* refactored web3 wallet providers

* add theme colors, fixed up sidebar

* top navbar styling

* wip

* added post-card

* update homepage

* fixed up right sidebar

* cleaned up tabs

* fix build error

frontend/nextjs/next.config.js

@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    images: {
+        remotePatterns: [
+          {
+            protocol: 'https',
+            hostname: 'images.unsplash.com',
+            port: '',
+          },
+        ],
+      },
+}
 
 module.exports = nextConfig

frontend/nextjs/package.json

@@ -9,16 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@rainbow-me/rainbowkit": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "ethers": "^6.8.1",
     "lucide-react": "^0.291.0",
     "next": "14.0.1",
+    "next-themes": "^0.2.1",
     "prettier": "^3.0.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^4.11.0",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "viem": "^1.18.1",

frontend/nextjs/src/app/dapp/components/providers.tsx

@@ -0,0 +1,32 @@
+"use client";
+import React from 'react';
+import '@rainbow-me/rainbowkit/styles.css';
+import {
+  RainbowKitProvider,
+  darkTheme
+} from '@rainbow-me/rainbowkit';
+
+import { emtChains, emtWagmiConfig } from "../../../../emt.config"
+import { WagmiConfig } from 'wagmi';
+import { ContractProvider } from '@/lib/hooks/contracts';
+
+// Web3 Wallet Connector's Provider
+export default function DappProviders({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <WagmiConfig config={emtWagmiConfig}>
+      <RainbowKitProvider chains={emtChains} theme={darkTheme({
+        accentColorForeground: 'white',
+
+        accentColor: '#5957e9',
+      })} >
+        <ContractProvider>
+          {children}
+        </ContractProvider>
+      </RainbowKitProvider>
+    </WagmiConfig>
+  )
+}

frontend/nextjs/src/app/dapp/components/right-sidebar.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {HiOutlineHome, HiOutlineUser, HiOutlineEnvelope} from 'react-icons/hi2'
+
+interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+
+}
+
+const primaryNavigationLinks = [
+    {
+        title: "Home",
+        icon: HiOutlineHome,
+        isActive: false,
+        href: "/dapp"
+    },
+    {
+        title: "My Profile",
+        icon: HiOutlineUser,
+        isActive: false,
+        href: "/my-profile"
+    },
+    {
+        title: "Notifications",
+        icon: HiOutlineEnvelope,
+        isActive: false,
+        href: "/notifications"
+    }
+]
+
+export function RightSidebar({ className, children }: SidebarProps) {
+    return (
+        <div className={cn("pb-12", className)}>
+            <div className="space-y-4 py-4">
+                <div className="px-3 py-2">
+                    {children}
+                </div>
+            </div>
+        </div>
+    )
+}

frontend/nextjs/src/app/dapp/components/sidebar.tsx

@@ -0,0 +1,76 @@
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {HiOutlineHome, HiOutlineUser, HiOutlineEnvelope} from 'react-icons/hi2'
+
+interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+
+}
+
+const primaryNavigationLinks = [
+    {
+        title: "Home",
+        icon: HiOutlineHome,
+        isActive: false,
+        href: "/dapp"
+    },
+    {
+        title: "My Profile",
+        icon: HiOutlineUser,
+        isActive: false,
+        href: "/my-profile"
+    },
+    {
+        title: "Notifications",
+        icon: HiOutlineEnvelope,
+        isActive: false,
+        href: "/notifications"
+    }
+]
+
+export function Sidebar({ className }: SidebarProps) {
+    return (
+        <div className={cn("pb-12", className)}>
+            <div className="space-y-4 py-4">
+                <div className="px-3 py-2">
+                    <div className="space-y-1">
+                        {primaryNavigationLinks.map((link, key)=> (
+                            <Button variant="ghost" key={`primary-nav-${key}`} className="w-full justify-start" asChild>
+                                <Link href={link.href}>
+                                    <link.icon className="mr-2 h-4 w-4 text-accent-2" />
+                                    {link.title}
+                                </Link>
+                            </Button>
+                        ))}
+                    </div>
+                    <Button variant="gradient" className="w-full mt-4">
+                        Create a Post
+                    </Button>
+                </div>
+                <div className="px-3 py-2">
+                    <div className="bg-accent-shade rounded-md py-4 px-2">
+                    <h2 className="mb-3 px-4 text-md font-semibold tracking-tight">
+                        Resources
+                    </h2>
+                    <div className="space-y-0">
+                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
+                            <Link href="/notifications"> Welcome </Link>
+                        </Button>
+                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
+                            <Link href="/faq"> FAQ </Link>
+                        </Button>
+                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
+                            <Link href="/help"> Help </Link>
+                        </Button>
+                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
+                            <Link href="/privacy-policy"> Privacy Policy </Link>
+                        </Button>
+                    </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    )
+}

frontend/nextjs/src/app/dapp/layout.tsx

@@ -1,34 +1,67 @@
-"use client";
+
 import React from 'react';
+import { Metadata } from 'next'
 import '@rainbow-me/rainbowkit/styles.css';
 import {
-  ConnectButton,
-  RainbowKitProvider,
+  ConnectButton
 } from '@rainbow-me/rainbowkit';
+import { Sidebar } from './components/sidebar';
+import { RightSidebar } from './components/right-sidebar';
+import { Search } from '@/components/ui/forms/search';
+import { Button } from '@/components/ui/button';
+import { HiOutlinePencilAlt } from "react-icons/hi"
+import DappProviders from './components/providers';
+import { ScrollArea } from "@/components/ui/scroll-area"
 
-import {emtChains, emtWagmiConfig} from "./../../../emt.config"
-import { WagmiConfig } from 'wagmi';
-import { ContractProvider } from '@/lib/hooks/contracts';
-
-
-
+export const metadata: Metadata = {
+  title: 'MEMM! Homepage',
+}
 
 export default function DappLayout({
-    children,
-  }: {
-    children: React.ReactNode
-  }) {
-    return (
-        <WagmiConfig config={emtWagmiConfig}>
-        <RainbowKitProvider chains={emtChains}>
-          <ContractProvider>
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <DappProviders>
         <header>
-            <ConnectButton/>
+          <div className=" flex-col md:flex">
+            <div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
+              <h2 className="text-lg font-semibold text-accent-3">MEMM!</h2>
+              <div className="ml-auto flex w-full space-x-2 sm:justify-end">
+                <Search />
+                <Button variant="ghost" aria-label='create a post' size="icon">
+                  <HiOutlinePencilAlt className="h-4 w-4" />
+                </Button>
+                <ConnectButton
+                  label="Sign in"
+                  accountStatus={{
+                    smallScreen: "avatar",
+                    largeScreen: "address"
+                  }}
+                  chainStatus="none"
+                  showBalance={false}
+                />
+              </div>
+            </div>
+          </div>
         </header>
-        {children}
-        </ContractProvider>
-        </RainbowKitProvider>
-    </WagmiConfig>
-
-    )
-  }
+
+        <div className="body">
+          <div className="border-t">
+            <div className="bg-background">
+              <div className="grid lg:grid-cols-5">
+                <Sidebar className="hidden lg:block min-h-[94vh]" />
+                <div className="col-span-3 lg:col-span-4">
+                  {children}
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </DappProviders>
+    </>
+  )
+}