Merge pull request #45 from hollow-leaf/feat/donation_page

feat: donate page add sale nfts and channel info
hollow-leaf · Feb 14, 2024 · 81c4dd7 · 81c4dd7
2 parents 71af6dd + 8e57bfc
commit 81c4dd7
Show file tree

Hide file tree

Showing 14 changed files with 30,881 additions and 2,826 deletions.
diff --git a/apps/serverless/src/index.ts b/apps/serverless/src/index.ts
@@ -10,7 +10,7 @@ type Bindings = {
 const app = new Hono<{ Bindings: Bindings }>()
 
 app.use('*', cors({
-  origin: 'chrome-extension://',
+  origin: '*',
   allowHeaders: ['Content-Type', 'Authorization'],
   allowMethods: ['POST', 'GET', 'OPTIONS'],
   exposeHeaders: ['Content-Length'],

diff --git a/apps/web/package-lock.json b/apps/web/package-lock.json
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -13,13 +13,16 @@
     "dotenv": "16.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
     "react-router-dom": "^6.22.0",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "wagmi": "^1.4.10"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.20.5",
     "@types/axios": "^0.14.0",
     "@types/dotenv": "^8.2.0",
-    "@types/node": "^16.18.79",
+    "@types/node": "^16.18.80",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
@@ -2,33 +2,34 @@ import React from 'react'
 import styles from './style'
 import { Billing, Business, CardDeal, Clients, CTA, Footer, Navbar, Stats, Testimonials, Hero } from './components'
 
+
 export default function App() {
   return (
-    <div className='bg-primary w-full overflow-hidden'>
-      <div className={`${styles.paddingX} ${styles.flexCenter}`}>
-        <div className={`${styles.boxWidth}`}>
-          <Navbar />
+      <div className='bg-primary w-full overflow-hidden'>
+        <div className={`${styles.paddingX} ${styles.flexCenter}`}>
+          <div className={`${styles.boxWidth}`}>
+            <Navbar />
+          </div>
         </div>
-      </div>
 
-      <div className={`bg-primary ${styles.flexStart}`}>
-        <div className={`${styles.boxWidth}`}>
-          <Hero />
+        <div className={`bg-primary ${styles.flexStart}`}>
+          <div className={`${styles.boxWidth}`}>
+            <Hero />
+          </div>
         </div>
-      </div>
 
-      <div className={`bg-primary ${styles.paddingX} ${styles.flexCenter}`}>
-        <div className={`${styles.boxWidth}`}>
-          <Stats />
-          <Business />
-          <Billing />
-          <CardDeal />
-          <Testimonials />
-          <Clients />
-          <CTA />
-          <Footer />
+        <div className={`bg-primary ${styles.paddingX} ${styles.flexCenter}`}>
+          <div className={`${styles.boxWidth}`}>
+            <Stats />
+            <Business />
+            <Billing />
+            <CardDeal />
+            <Testimonials />
+            <Clients />
+            <CTA />
+            <Footer />
+          </div>
         </div>
       </div>
-    </div>
   )
 }
diff --git a/apps/web/src/components/nftSaleItem.tsx b/apps/web/src/components/nftSaleItem.tsx
@@ -0,0 +1,69 @@
+import { nftCreate } from "../models/model"
+import { formatAddress } from "../utils/stingify";
+import React from "react"
+
+export function NftSaleItem(props:nftCreate){
+
+    return (
+        <div >
+            <div className="card" style={{"background": "rgba(40, 2, 84, 0.7)"}} onClick={() => {
+
+            }}>
+                <h4>ID: {props.nftId}</h4>
+                <h4>Price: {props.price}</h4>
+                <h4>Creator: {formatAddress(props.creator)}</h4>
+                <div className="shine"></div>
+                <div className="background">
+                    <div className="tiles">
+                        <div className="tile tile-1"></div>
+                        <div className="tile tile-2"></div>
+                        <div className="tile tile-3"></div>
+                        <div className="tile tile-4"></div>
+
+                        <div className="tile tile-5"></div>
+                        <div className="tile tile-6"></div>
+                        <div className="tile tile-7"></div>
+                        <div className="tile tile-8"></div>
+
+                        <div className="tile tile-9"></div>
+                        <div className="tile tile-10"></div>
+                    </div>
+
+                    <div className="line line-1"></div>
+                    <div className="line line-2"></div>
+                    <div className="line line-3"></div>
+                </div>
+            </div>
+            <div>
+                <dialog id={`my_modal_${props.nftId}`} className="modal">
+                    <form method="dialog" className="modal-box bg-white py-10">
+                    <h3 className="font-bold text-lg" style={{textAlign:"center"}}>DETAIL</h3>
+                    <div className="px-16 mt-8 flex flex-col space-y-3">
+                        <div className="flex">
+                        <p>Provider</p>
+                        <p className="ml-auto">{}</p>
+                        </div>
+                        <div className="flex ">
+                        <p>Power Type</p>
+                        <p className="ml-auto">
+
+                        </p>
+                        </div>
+                        <div className="flex ">
+                        <p>CO2 CID</p>
+                        <p className="ml-auto">{}</p>
+                        </div>
+                        <div className="flex ">
+                        <p>NFT Address</p>
+                        <p className="ml-auto">{}</p>
+                        </div>
+                    </div>
+                    </form>
+                    <form method="dialog" className="modal-backdrop">
+                    <button>close</button>
+                    </form>
+                </dialog>
+            </div>
+        </div>
+    )
+}