devianyeth · devianyeth · Jan 16, 2023 · Jan 17, 2023 · Jan 18, 2023 · Jan 18, 2023
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# Juicebox x Feather
+# Juicebox x Feather test
diff --git a/next.config.js b/next.config.js
@@ -9,6 +9,9 @@ const nextConfig = {
   },
   experimental: {
     appDir: true,
+  }, 
+  images: {
+    domains: ['juicebox.money','jbx.mypinata.cloud'],
   },
 };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,14 +10,21 @@
   },
   "dependencies": {
     "@next/font": "13.1.2",
+    "@rainbow-me/rainbowkit": "^0.8.1",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
+    "axios": "^1.2.3",
+    "cheerio": "^1.0.0-rc.12",
     "eslint": "8.32.0",
     "eslint-config-next": "13.1.2",
+    "ethers": "^5.7.2",
+    "graphql": "^16.6.0",
     "next": "13.1.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "4.9.4"
+    "typescript": "4.9.4",
+    "urql": "^3.0.3",
+    "wagmi": "^0.10.11"
   }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,18 +1,42 @@
-import './globals.css'
+"use client";
+import ProjectContext, { IProjectContext } from "@/context/ProjectContext";
+import { useState } from "react";
+import "./globals.css";
+import { Roboto_Mono as Font } from "@next/font/google";
+import { createClient, Provider } from "urql";
 
+const font = Font({
+  weight: ["100", "200", "300", "400", "500", "600", "700"],
+  display: "auto",
+  subsets: ["latin"],
+});
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
+  const [projectId, setProjectId] = useState<string | undefined>(undefined);
+  const urqlClient = createClient({
+    url: "https://api.thegraph.com/subgraphs/id/QmSL5i1EsqJgc6kys7Ckzh3PHDbyUoKbyG5ibtFSAsgvFV",
+  });
   return (
     <html lang="en">
       {/*
         <head /> will contain the components returned by the nearest parent
         head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
       */}
       <head />
-      <body>{children}</body>
+      <body>
+        <main className={font.className}>
+          <Provider value={urqlClient}>
+            <ProjectContext.Provider
+              value={{ projectId: projectId, setProjectId: setProjectId }}
+            >
+              {children}
+            </ProjectContext.Provider>
+          </Provider>
+        </main>
+      </body>
     </html>
-  )
+  );
 }
diff --git a/src/app/page.module.css b/src/app/page.module.css
@@ -2,6 +2,30 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 6rem;
+  align-content: center;
+  padding: 2rem;
   min-height: 100vh;
+  --primary-color: rgb(29, 109, 122);
+  color: var(--primary-color);
+}
+
+.subtext {
+  font-size: 1.1rem;
+  line-height: 1.2rem;
+}
+
+.content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.content h1 {
+  font-size: 100px;
+  line-height: 100%;
+  font-weight: 300;
+  letter-spacing: 1.5rem;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,17 +1,28 @@
+
 import { Inter } from "@next/font/google";
 import styles from "./page.module.css";
-import { Roboto_Mono as Font } from "@next/font/google";
+
+import Card from "@/components/Card/Card";
+import SearchBox from "@/components/SearchBox/SearchBox";
+import useProject from "@/hooks/useProject";
+
 const inter = Inter({ subsets: ["latin"] });
 
-const font = Font({
-  weight: ["400", "500", "700", "600"],
-  display: "auto",
-  subsets: ["latin"],
-});
-export default function Home() {
+export default function Home(props: any) {
+
   return (
-    <main className={`${styles.main} ${font.className}`}>
-      <h1>Juicebox x Feather</h1>
+    <main className={styles.main}>
+      <div className={styles.content}>
+        <h1>🧃x🪶</h1>
+        <br></br>
+        <p className={styles.subtext}>
+          Interact with 🧃Juicebox projects without a pre-existing wallet using
+          🪶Feather
+        </p>
+
+        <SearchBox />
+        {/* <Card /> */}
+      </div>
     </main>
   );
 }
diff --git a/src/app/project/[id]/page.tsx b/src/app/project/[id]/page.tsx
@@ -0,0 +1,11 @@
+"use client";
+import Card from "@/components/Card/Card";
+import useProject from "@/hooks/useProject";
+
+const ProjectPage = ({ params }: { params: { id: string } }) => {
+  const { project } = useProject(params.id);
+  console.log(project);
+  return project ? <Card project={project}></Card> : <></>;
+};
+
+export default ProjectPage;
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
@@ -0,0 +1,127 @@
+.project {
+  margin-top: 100px;
+}
+.card {
+  flex-wrap: wrap !important;
+  display: grid;
+  justify-content: space-between !important;
+  align-items: flex-start !important;
+  color: rgb(26, 24, 24);
+  grid-template-columns: min-content 1fr;
+  width: 50%;
+  font: inherit;
+}
+.smallbr {
+  display: block;
+  margin: 10px 0;
+  content: " ";
+}
+
+.id {
+  color: slategray;
+  font-size: 0.9rem;
+}
+
+.description {
+  font-weight: 300;
+  word-spacing: 200%;
+  font-size: 0.95rem;
+  line-height: 25px;
+}
+
+.image {
+  margin: 0 1.25rem 0 0;
+}
+
+.head {
+  align-content: flex-end;
+  text-align: start;
+}
+
+.owned {
+  font-size: 0.9rem;
+}
+
+.owned span {
+  font-weight: 500;
+}
+
+.table {
+  font-size: 0.9rem;
+  color: rgb(120, 119, 119);
+  width: 100%;
+}
+
+.volumeValue {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: black;
+}
+
+.treasuryUSD {
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: darkorange;
+}
+
+.distValue {
+  color: black;
+  font-weight: 400;
+}
+
+.element {
+  justify-content: space-between;
+  width: 100%;
+  display: flex;
+  height: 35px;
+}
+
+.column {
+  float: left;
+  width: 50%;
+}
+
+.row {
+  width: 50%;
+}
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.paybox {
+  margin: 8px 0 0 0px;
+  align-content: center;
+}
+
+.inputbox {
+  padding: 8px 2%;
+  width: 70%;
+  font-size: 0.9rem;
+  font-weight: 300;
+  font-family: inherit;
+  font-variant-numeric: slashed-zero;
+  border: 1.5px solid rgb(159, 159, 159);
+  margin: 0 2% 0 0;
+  outline: 2px solid transparent;
+}
+
+.paybutton {
+  background-color: rgb(31, 176, 198);
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+  height: 35px;
+  margin: 0 2% 0 0;
+  width: 20%;
+  font-family: inherit;
+  font-size: 0.9rem;
+}
+
+.paybutton:hover {
+  background-color: rgb(15, 188, 188);
+}
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -0,0 +1,43 @@
+import Image from "next/image";
+import styles from "./Card.module.css";
+
+
+
+
+export default function Card({project} : {project:any} ) {
+  return (
+    <center className={styles.project}>
+      <br></br>
+      <div className={styles.card}>
+        <div className={styles.image}>
+          <Image
+            src={project ? project.logoUri : ""}
+            alt="Logo"
+            width={150}
+            height={150}
+          />
+        </div>
+        <div className={styles.head}>
+          <h2>{project?.name}</h2>
+          <br className={styles.smallbr}></br>
+          <p className={styles.id}>@{project?.id}</p>
+          <br className={styles.smallbr}></br>
+          <p className={styles.description}>{project?.description}</p>
+          <br className={styles.smallbr}></br>
+          <p className={styles.owned}>
+            Owned by <span>{project?.owner}</span>
+          </p>
+        </div>
+      </div>
+
+      <br></br>
+
+      <div className={styles.row}>
+        <div className={styles.paybox}>
+          <input placeholder="0" className={styles.inputbox}></input>
+          <button className={styles.paybutton}>Pay</button>
+        </div>
+      </div>
+    </center>
+  );
+}
diff --git a/src/components/SearchBox/SearchBox.module.css b/src/components/SearchBox/SearchBox.module.css
@@ -0,0 +1,37 @@
+.search {
+  width: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px;
+}
+
+.box {
+  border-radius: 0rem;
+  border-width: 1px;
+  width: 100%;
+  border: 1px solid var(--primary-color);
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0.75rem;
+  text-align: center;
+}
+
+.gobutton {
+  margin: 10px;
+  background-color: rgb(25, 157, 177);
+  border: none;
+  color: white;
+  font-weight: 300;
+  font-family: inherit;
+  font-size: large;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+  width: 10%;
+}
+
+.gobutton:hover {
+  background-color: rgb(15, 188, 188);
+}