Merge pull request #3 from hollow-leaf/feat/nft-ui

Feat/nft UI & walletconnect kit wagmi
hollow-leaf · May 10, 2024 · f704432 · f704432
2 parents cbff38b + 6eb4960
commit f704432
Show file tree

Hide file tree

Showing 44 changed files with 1,368 additions and 785 deletions.
diff --git a/.github/workflows/ghpage.yaml b/.github/workflows/ghpage.yaml
@@ -40,8 +40,9 @@ jobs:
 
       - name: Build my App
         env: 
-          NEXT_PUBLIC_PROJECT_ID: ${{secrets.NEXT_PUBLIC_PROJECT_ID}}
-        run: echo "${{secrets.NEXT_PUBLIC_PROJECT_ID}}" && pnpm run build
+          NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: ${{secrets.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID}}
+          NEXT_PUBLIC_ALCHEMY_ID: ${{secrets.NEXT_PUBLIC_ALCHEMY_ID}}
+        run: echo "${{secrets.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID}}", "${{secrets.NEXT_PUBLIC_ALCHEMY_ID}}" && pnpm run build
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2

diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,8 @@
+FROM node:18-alpine
+WORKDIR /
+COPY . .
+RUN npm install -g pnpm@8.9
+RUN pnpm install
+ENV NEXT_PUBLIC_PROJECT_ID $project_id
+RUN pnpm build
+CMD ["pnpm", "dev"]
diff --git a/apps/web/.env.example b/apps/web/.env.example
@@ -1 +1,2 @@
-NEXT_PUBLIC_PROJECT_ID="walletconnect console dev project id"
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID="walletconnect console dev project id"
+NEXT_PUBLIC_ALCHEMY_ID="Alchemy ID"
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 import withPWAInit from "@ducanh2912/next-pwa";
 const withPWA = withPWAInit({
-  dest: 'public',
+  dest: "public",
   cacheOnFrontEndNav: true,
   aggressiveFrontEndNavCaching: true,
   reloadOnOnline: true,
@@ -12,17 +12,17 @@ const withPWA = withPWAInit({
 });
 
 const nextConfig = {
-  output: 'export',
+  output: "export",
   reactStrictMode: true,
   swcMinify: true,
-  webpack: config => {
+  webpack: (config) => {
     config.resolve.fallback = { fs: false, net: false, tls: false };
-    config.externals.push('pino-pretty', 'lokijs', 'encoding');
+    config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;
   },
   images: {
     unoptimized: true,
-    formats: ['image/avif', 'image/webp'],
+    formats: ["image/avif", "image/webp"],
   },
 };
 

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -19,20 +19,22 @@
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "@tanstack/react-query": "^5.32.0",
-    "@web3modal/siwe": "^4.1.11",
-    "@web3modal/wagmi": "^4.1.11",
+    "@types/react-swipeable-views-utils": "^0.13.7",
+    "connectkit": "^1.7.3",
     "next": "14.2.2",
     "next-auth": "^4.24.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "siwe": "^2.3.2",
-    "viem": "2.x",
-    "wagmi": "^2.6.0"
+    "react-swipeable-views": "^0.14.0",
+    "react-swipeable-views-utils": "^0.14.0",
+    "viem": "~2.9.28",
+    "wagmi": "^2.8.5"
   },
   "devDependencies": {
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18",
+    "@types/react-swipeable-views": "^0.13.5",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
     "autoprefixer": "^10.4.19",

diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
@@ -2,5 +2,5 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-  }
-}
+  },
+};
diff --git a/apps/web/public/Albert.png b/apps/web/public/Albert.png
diff --git a/apps/web/public/Jake.png b/apps/web/public/Jake.png
diff --git a/apps/web/public/Solo.png b/apps/web/public/Solo.png
diff --git a/apps/web/public/Sophia.png b/apps/web/public/Sophia.png
diff --git a/apps/web/public/bg.png b/apps/web/public/bg.png
diff --git a/apps/web/public/manifest.json b/apps/web/public/manifest.json
@@ -1,36 +1,60 @@
 {
-    "id": "2",
-    "name": "XueDAO-web",
-    "short_name": "XueDAO",
-    "icons": [
-        {
-            "src": "/konan_logo.webp",
-            "sizes": "144x144",
-            "type": "image/png",
-            "purpose": "any"
-        },
-        {
-            "src": "/konan-hero.webp",
-            "sizes": "144x144",
-            "type": "image/webp",
-            "purpose": "any"
-        },
-        {
-            "src": "/konan-hero.png",
-            "sizes": "144x144",
-            "type": "image/png",
-            "purpose": "any"
-        },
-        {
-            "src": "/konan-nav-logo.webp",
-            "sizes": "144x144",
-            "type": "image/webp",
-            "purpose": "any"
-        }
-    ],
-    "theme_color": "#3367D6",
-    "background_color": "#3367D6",
-    "start_url": "/",
-    "display": "standalone",
-    "orientation": "portrait"
-}
+  "id": "2",
+  "name": "XueDAO-web",
+  "short_name": "XueDAO",
+  "icons": [
+    {
+      "src": "/konan_logo.webp",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/konan-hero.webp",
+      "sizes": "144x144",
+      "type": "image/webp",
+      "purpose": "any"
+    },
+    {
+      "src": "/konan-hero.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/konan-nav-logo.webp",
+      "sizes": "144x144",
+      "type": "image/webp",
+      "purpose": "any"
+    },
+    {
+      "src": "/Albert.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/Jake.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/Solo.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/Sophia.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "theme_color": "#3367D6",
+  "background_color": "#3367D6",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait"
+}
diff --git a/apps/web/public/sw.js b/apps/web/public/sw.js
diff --git a/apps/web/public/swe-worker-5c72df51bb1f6ee0.js b/apps/web/public/swe-worker-5c72df51bb1f6ee0.js
@@ -1 +1,42 @@
-self.onmessage=async e=>{switch(e.data.type){case"__START_URL_CACHE__":{let t=e.data.url,a=await fetch(t);if(!a.redirected)return(await caches.open("start-url")).put(t,a);return Promise.resolve()}case"__FRONTEND_NAV_CACHE__":{let t=e.data.url,a=await caches.open("pages");if(await a.match(t,{ignoreSearch:!0}))return;let s=await fetch(t);if(!s.ok)return;if(a.put(t,s.clone()),e.data.shouldCacheAggressively&&s.headers.get("Content-Type")?.includes("text/html"))try{let e=await s.text(),t=[],a=await caches.open("static-style-assets"),r=await caches.open("next-static-js-assets"),c=await caches.open("static-js-assets");for(let[s,r]of e.matchAll(/<link.*?href=['"](.*?)['"].*?>/g))/rel=['"]stylesheet['"]/.test(s)&&t.push(a.match(r).then(e=>e?Promise.resolve():a.add(r)));for(let[,a]of e.matchAll(/<script.*?src=['"](.*?)['"].*?>/g)){let e=/\/_next\/static.+\.js$/i.test(a)?r:c;t.push(e.match(a).then(t=>t?Promise.resolve():e.add(a)))}return await Promise.all(t)}catch{}return Promise.resolve()}default:return Promise.resolve()}};
+self.onmessage = async (e) => {
+  switch (e.data.type) {
+    case "__START_URL_CACHE__": {
+      let t = e.data.url,
+        a = await fetch(t);
+      if (!a.redirected) return (await caches.open("start-url")).put(t, a);
+      return Promise.resolve();
+    }
+    case "__FRONTEND_NAV_CACHE__": {
+      let t = e.data.url,
+        a = await caches.open("pages");
+      if (await a.match(t, { ignoreSearch: !0 })) return;
+      let s = await fetch(t);
+      if (!s.ok) return;
+      if (
+        (a.put(t, s.clone()),
+        e.data.shouldCacheAggressively &&
+          s.headers.get("Content-Type")?.includes("text/html"))
+      )
+        try {
+          let e = await s.text(),
+            t = [],
+            a = await caches.open("static-style-assets"),
+            r = await caches.open("next-static-js-assets"),
+            c = await caches.open("static-js-assets");
+          for (let [s, r] of e.matchAll(/<link.*?href=['"](.*?)['"].*?>/g))
+            /rel=['"]stylesheet['"]/.test(s) &&
+              t.push(
+                a.match(r).then((e) => (e ? Promise.resolve() : a.add(r))),
+              );
+          for (let [, a] of e.matchAll(/<script.*?src=['"](.*?)['"].*?>/g)) {
+            let e = /\/_next\/static.+\.js$/i.test(a) ? r : c;
+            t.push(e.match(a).then((t) => (t ? Promise.resolve() : e.add(a))));
+          }
+          return await Promise.all(t);
+        } catch {}
+      return Promise.resolve();
+    }
+    default:
+      return Promise.resolve();
+  }
+};
diff --git a/apps/web/src/app/components/Business.tsx b/apps/web/src/app/components/Business.tsx
@@ -0,0 +1,103 @@
+import { Box, Typography } from "@mui/material";
+import React from "react";
+import { ForkRight } from "@mui/icons-material";
+export function Business() {
+  return (
+    <Box className="relative w-full overflow-hidden py-6 sm:py-12 md:py-24 lg:py-32 xl:py-12">
+      <div className="max-w-full flex flex-col items-center py-20">
+        <p className="text-4xl xl:text-8xl font-extrabold	bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 inline-block text-transparent bg-clip-text">
+          Why choose celestia?
+        </p>
+      </div>
+      <Box className="flex flex-col xl:flex-row items-center justify-center gap-x-8 px-12 sm:flex-row sm:px-12 md:px-24 lg:px-32 xl:px-48">
+        <Box className="basis-1/3 w-full flex flex-col items-center justify-center gap-5 rounded-2xl">
+          <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
+            <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
+              <ForkRight className="text-white" />
+            </Box>
+            <Box className="basis-3/4 flex flex-col px-10 gap-5">
+              <Typography className="text-2xl font-bold">
+                CONNECT YOUR WALLET
+              </Typography>
+              <Typography className="text-lg">
+                Use Trust Wallet, Metamask or to connect to the app.
+              </Typography>
+            </Box>
+          </Box>
+          <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
+            <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
+              <ForkRight className="text-white" />
+            </Box>
+            <Box className="basis-3/4 flex flex-col px-10 gap-5">
+              <Typography className="text-2xl font-bold">
+                CONNECT YOUR WALLET
+              </Typography>
+              <Typography className="text-lg">
+                Use Trust Wallet, Metamask or to connect to the app.
+              </Typography>
+            </Box>
+          </Box>
+          <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
+            <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
+              <ForkRight className="text-white" />
+            </Box>
+            <Box className="basis-3/4 flex flex-col px-10 gap-5">
+              <Typography className="text-2xl font-bold">
+                CONNECT YOUR WALLET
+              </Typography>
+              <Typography className="text-lg">
+                Use Trust Wallet, Metamask or to connect to the app.
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+
+        <Box className="basis-1/3 w-full flex flex-col items-center justify-center gap-5 rounded-2xl">
+          <div className="mt-4 min-w-80 min-h-96 rounded-lg bg-center bg-cover bg-[url('/konan-hero.webp')]"></div>
+        </Box>
+
+        <Box className="basis-1/3 w-full flex flex-col items-center justify-center gap-5 rounded-2xl">
+          <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
+            <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
+              <ForkRight className="text-white" />
+            </Box>
+            <Box className="basis-3/4 flex flex-col px-10 gap-5">
+              <Typography className="text-2xl font-bold">
+                CONNECT YOUR WALLET
+              </Typography>
+              <Typography className="text-lg">
+                Use Trust Wallet, Metamask or to connect to the app.
+              </Typography>
+            </Box>
+          </Box>
+          <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
+            <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
+              <ForkRight className="text-white" />
+            </Box>
+            <Box className="basis-3/4 flex flex-col px-10 gap-5">
+              <Typography className="text-2xl font-bold">
+                CONNECT YOUR WALLET
+              </Typography>
+              <Typography className="text-lg">
+                Use Trust Wallet, Metamask or to connect to the app.
+              </Typography>
+            </Box>
+          </Box>
+          <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
+            <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
+              <ForkRight className="text-white" />
+            </Box>
+            <Box className="basis-3/4 flex flex-col px-10 gap-5">
+              <Typography className="text-2xl font-bold">
+                CONNECT YOUR WALLET
+              </Typography>
+              <Typography className="text-lg">
+                Use Trust Wallet, Metamask or to connect to the app.
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/web/src/app/components/Loading.tsx b/apps/web/src/app/components/Loading.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export function Loading() {
+  return <div className="spinner"></div>;
+}
diff --git a/apps/web/src/app/components/Team.tsx b/apps/web/src/app/components/Team.tsx
@@ -0,0 +1,21 @@
+import { AutoPlaySwipe } from "@/components/AutoPlaySwipe";
+import { Box, Typography } from "@mui/material";
+import React from "react";
+
+export function Team() {
+  return (
+    <Box className="flex flex-col justify-center items-center">
+      <Box className="flex flex-col xl:flex-row py-10 xl:py-48 gap-5">
+        <Typography className="text-4xl xl:text-8xl font-bold text-black">
+          MEET
+        </Typography>
+        <Typography className="text-4xl xl:text-8xl font-bold bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 inline-block text-transparent bg-clip-text">
+          OUR TEAM
+        </Typography>
+      </Box>
+      <Box className="flex flex-col xl:flex-row mx-auto items-center justify-center align-middle">
+        <AutoPlaySwipe />
+      </Box>
+    </Box>
+  );
+}