first iteration

Signed-off-by: Roy Scheeren <[email protected]>
IkigaiLabsETH · Aug 30, 2024 · 544a93e · 544a93e
1 parent 1c5822e
commit 544a93e
Show file tree

Hide file tree

Showing 67 changed files with 5,122 additions and 47 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,4 @@
+HELIUS_RPC_URL=https://devnet.helius-rpc.com
+HELIUS_API_URL=https://api-devnet.helius.xyz
+HELIUS_API_KEY=fa7af444-1a05-431e-af2b-a34625d5ce06
+WALLET_ADDRESS=8yADMASmbZ5Gnz1edrvHsFY9yuf6kr2dVoczDTSxJVyD
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.keys
diff --git a/app/api/token/[token]/route.ts b/app/api/token/[token]/route.ts
@@ -0,0 +1,19 @@
+import { fetchData } from '@coral-xyz/anchor/dist/cjs/utils/registry'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+  message: string
+}
+
+export async function GET(
+  request: Request,
+  { params }: { params: { token: string } }
+) {
+  const { token } = params
+
+  // const result = await fetch(`https://gmgn.ai/defi/quotation/v1/tokens/sol/${token}`)
+  const result = await fetch(`https://gmgn.ai/defi/quotation/v1/tokens/sol/63MjbqC4EJCvJXSRcH1YptsUy9dnm626XjdYCM3Spump`)
+  const data = await result.json()
+
+  return Response.json(data)
+}
diff --git a/app/api/tokens.ts b/app/api/tokens.ts
@@ -0,0 +1,12 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+  message: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+
+}
diff --git a/app/create/page.tsx b/app/create/page.tsx
@@ -0,0 +1,16 @@
+import { CreateToken, createToken } from "@/modules/createToken";
+
+
+export default function Create() {
+
+  return (
+    <main className="">
+      <div className="max-w-screen-2xl m-auto">
+        <div className="p-5 md:p-10 lg:p-20 bg-neutral-900 text-center md:text-left">
+          <h1 className="sm:text-2xl md:text-4xl lg:text-6xl">Create Token</h1>
+        </div>
+        <CreateToken createToken={createToken}/>
+      </div>
+    </main>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
@@ -2,32 +2,110 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+@font-face {
+  font-family: 'Epilogue';
+  src: url('../public/fonts/epilogue/Epilogue-Variable.woff2') format('woff2'),
+       url('../public/fonts/epilogue/Epilogue-Variable.woff') format('woff'),
+       url('../public/fonts/epilogue/Epilogue-Variable.ttf') format('truetype');
+       font-weight: 100 900;
+       font-display: swap;
+       font-style: normal;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+@font-face {
+  font-family: 'Epilogue';
+  src: url('../public/fonts/epilogue/Epilogue-VariableItalic.woff2') format('woff2'),
+       url('../public/fonts/epilogue/Epilogue-VariableItalic.woff') format('woff'),
+       url('../public/fonts/epilogue/Epilogue-VariableItalic.ttf') format('truetype');
+       font-weight: 100 900;
+       font-display: swap;
+       font-style: italic;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+@font-face {
+  font-family: 'Boska';
+  src: url('../public/fonts/boska/Boska-Variable.woff2') format('woff2'),
+       url('../public/fonts/boska/Boska-Variable.woff') format('woff'),
+       url('../public/fonts/boska/Boska-Variable.ttf') format('truetype');
+       font-weight: 200 900;
+       font-display: swap;
+       font-style: normal;
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
+@font-face {
+  font-family: 'Boska';
+  src: url('../public/fonts/boska/Boska-VariableItalic.woff2') format('woff2'),
+       url('../public/fonts/boska/Boska-VariableItalic.woff') format('woff'),
+       url('../public/fonts/boska/Boska-VariableItalic.ttf') format('truetype');
+       font-weight: 200 900;
+       font-display: swap;
+       font-style: italic;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../public/fonts/satoshi/Satoshi-Variable.woff2') format('woff2'),
+       url('../public/fonts/satoshi/Satoshi-Variable.woff') format('woff'),
+       url('../public/fonts/satoshi/Satoshi-Variable.ttf') format('truetype');
+       font-weight: 300 900;
+       font-display: swap;
+       font-style: normal;
 }
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../public/fonts/satoshi/Satoshi-VariableItalic.woff2') format('woff2'),
+       url('../public/fonts/satoshi/Satoshi-VariableItalic.woff') format('woff'),
+       url('../public/fonts/satoshi/Satoshi-VariableItalic.ttf') format('truetype');
+       font-weight: 300 900;
+       font-display: swap;
+       font-style: italic;
+}
+
+@base {
+  @layer base {
+    body {
+      font-family: 'satoshi';
+      @apply text-neutral-900;
+    }
+
+    h1, h2, h3, h4 {
+      @apply font-bold leading-none mb-4 tracking-tighter text-yellow-500;
+      font-family: 'epilogue'
+    }
+
+    h1 {
+      @apply text-5xl;
+    }
+
+    h2 {
+      @apply text-5xl;
+    }
+
+    p {
+      font-family: 'satoshi';
+      margin-bottom: 1.5rem;
+    }
+
+    a {
+      @apply transition-colors;
+    }
+
+    a:hover {
+      @apply text-yellow-500;
+    }
+
+    .boska {
+      font-family: 'boska';
+    }
+
+    .epilogue {
+      font-family: 'epilogue';
+      @apply tracking-wide;
+    }
+
+    .satoshi {
+      font-family: 'satoshi';
+    }
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,9 +1,6 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -16,7 +13,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body>{children}</body>
     </html>
   );
 }
diff --git a/app/token/[address]/page.tsx b/app/token/[address]/page.tsx
@@ -0,0 +1,104 @@
+import { currencyFormatter, formatDate } from "@/common/utils";
+import clsx from "clsx";
+import { map, replace } from "ramda";
+import { FaArrowDownLong, FaArrowUpLong, FaGlobe, FaSeedling, FaTelegram, FaX, FaXTwitter } from "react-icons/fa6";
+
+export default async function Tokens({ params: { address } }: { params: { address: string } }) {
+  const result = await fetch(`https://api.moonshot.cc/token/v1/solana/${address}`)
+  const tokenData = await result.json()
+
+  const image = replace(/64/g, '2048', tokenData.profile.icon)
+  console.log(tokenData)
+  return (
+    <main className="">
+      <div className="flex flex-col lg:flex-row w-full bg-black">
+        <div className="w-full lg:w-1/2 p-16 h-screen justify-center flex flex-col">
+          <h2 className="text-5xl leading-none font-bold tracking-tight m-0">{tokenData?.baseToken?.name}</h2>
+          <div className="mb-4 flex flex-row items-center text-sm text-neutral-500">
+            <FaSeedling className="mr-1"/>{' '} {formatDate(tokenData?.createdAt)}
+          </div>
+          <p className="mb-4 text-white">{tokenData?.profile?.decription}</p>
+          <div className="flex border-y border-y-gray-700 py-8 mt-6 text-white">
+            <div className="grid grid-cols-2 xl:grid-cols-4 gap-4">
+              <div>
+                <h4 className="text-xs uppercase tracking-widest mb-0">SOL:</h4>
+                <span className="font-bold text-lg md:text-xl lg:text-2xl tracking-tight">{currencyFormatter.format(tokenData?.priceNative)}</span>
+              </div>
+              <div>
+                <h4 className="text-xs uppercase tracking-widest mb-0">USD:</h4>
+                <span className="font-bold text-lg md:text-xl lg:text-2xl tracking-tight">
+                  {currencyFormatter.format(tokenData?.priceUsd)}
+                </span>
+              </div>
+              <div>
+                <h4 className="text-xs uppercase tracking-widest mb-0">Market cap:</h4>
+                <span className="font-bold text-lg md:text-xl lg:text-2xl tracking-tight">
+                  ${currencyFormatter.format(tokenData?.marketCap)}
+                </span>
+              </div>
+              <div>
+                <h4 className="text-xs uppercase tracking-widest mb-0">FDV:</h4>
+                <span className="font-bold text-lg md:text-xl lg:text-2xl tracking-tight">
+                  ${currencyFormatter.format(tokenData?.fdv)}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col border-b border-b-gray-700 py-8 mt-2 text-white">
+            <h4 className="text-xs uppercase tracking-widest mb-0">Price change:</h4>
+            <div className="grid grid-cols-2 xl:grid-cols-4 gap-4">
+              <div className="flex flex-row items-center">
+                5m:{' '}<div className={clsx('flex flex-row items-center font-bold', tokenData?.priceChange?.m5 < 0 ? 'text-red-600' : 'text-green-600')}><div className="ml-1">{tokenData?.priceChange?.m5 < 0 ? <FaArrowDownLong /> : <FaArrowUpLong />}</div>{tokenData?.priceChange?.m5}%</div>
+              </div>
+              <div className="flex flex-row items-center">
+                1h:{' '}<div className={clsx('flex flex-row items-center font-bold', tokenData?.priceChange?.h1 < 0 ? 'text-red-600' : 'text-green-600')}><div className="ml-1">{tokenData?.priceChange?.h1 < 0 ? <FaArrowDownLong /> : <FaArrowUpLong />}</div>{tokenData?.priceChange?.h1}%</div>
+              </div>
+              <div className="flex flex-row items-center">
+                6h:{' '}<div className={clsx('flex flex-row items-center font-bold', tokenData?.priceChange?.h6 < 0 ? 'text-red-600' : 'text-green-600')}><div className="ml-1">{tokenData?.priceChange?.h6 < 0 ? <FaArrowDownLong /> : <FaArrowUpLong />}</div>{tokenData?.priceChange?.h6}%</div>
+              </div>
+              <div className="flex flex-row items-center">
+                24h:{' '}<div className={clsx('flex flex-row items-center font-bold', tokenData?.priceChange?.h24 < 0 ? 'text-red-600' : 'text-green-600')}><div className="ml-1">{tokenData?.priceChange?.h24 < 0 ? <FaArrowDownLong /> : <FaArrowUpLong />}</div>{tokenData?.priceChange?.h24}%</div>
+              </div>
+            </div>
+          </div>
+          <div className="mt-6">
+            <h4 className="text-xs uppercase tracking-widest mb-0">Progress:</h4>
+            <div className="overflow-hidden bg-black border-2 border-yellow-500 transition-all shadow-[3px_3px_0px_0px_rgba(234,179,1,1)] mt-1">
+              <div className="h-8 bg-yellow-500 flex items-center font-bold text-white pl-2 text-lg md:text-xl tracking-tight" style={{width: `${tokenData?.moonshot?.progress}%`}}>{tokenData?.moonshot?.progress}%</div>
+            </div>
+          </div>
+          <div>
+            <h4 className="text-xs uppercase tracking-widest mb-0 mt-6">Links:</h4>
+            <div className="flex flex-row">
+              {tokenData?.profile?.links.map((link: any) => {
+                if (link.includes('t.me')) {
+                  return (
+                    <a href={link} target="_blank" className="text-white text-lg p-1" key={link}>
+                      <FaTelegram />
+                    </a>
+                  ) 
+                }
+                if (link.includes('x.com')) {
+                  return (
+                    <a href={link} target="_blank" className="text-white text-lg p-1" key={link}>
+                      <FaXTwitter />
+                    </a>
+                  ) 
+                }
+                return (
+                  <a href={link} target="_blank" className="text-white text-lg p-1" key={link}>
+                    <FaGlobe />
+                  </a>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+        <div
+          className="w-full lg:w-1/2 h-screen bg-center bg-cover"
+          style={{ backgroundImage: `url(${image})` }}
+        ></div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/tokens/page.tsx b/app/tokens/page.tsx
@@ -0,0 +1,20 @@
+import { TokenGrid, getTokens } from "@/modules/TokenGrid";
+
+export default async function Tokens() {
+  const tokens = await getTokens()
+
+  return (
+    <main className="">
+      <div className="m-auto">
+        <div className="p-5 md:p-10 lg:p-15 bg-neutral-900 text-center md:text-left">
+          <div className="max-w-screen-2xl m-auto"> 
+            <h1 className="sm:text-2xl md:text-4xl lg:text-8xl">Cult Coins</h1>
+          </div>
+        </div>
+        <div className="max-w-screen-2xl m-auto py-5 md:py-10 lg:py-20">
+          <TokenGrid tokens={tokens}/>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/common/fetcher/fetcher.ts b/common/fetcher/fetcher.ts
@@ -0,0 +1,4 @@
+import { request } from 'graphql-request'
+
+export const rest = (url: string) => fetch(url).then((res) => res.json())
+export const graphql = ([url, query]: [url: string, query: string]) => request(url, query)
diff --git a/common/fetcher/index.ts b/common/fetcher/index.ts
@@ -0,0 +1 @@
+export { rest } from "./fetcher";
diff --git a/common/types/index.ts b/common/types/index.ts
@@ -0,0 +1 @@
+export type { CreateToken, CreateTokenResult, Token, TokenDetails } from "./types"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type { CreateToken, CreateTokenResult, Token, TokenDetails } from "./types"