├── .eslintrc.json
├── public
    ├── create.png
    └── dashboard.png
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── users
    │   │   └── page.tsx
    │   ├── fonts
    │   │   ├── GeistVF.woff
    │   │   └── GeistMonoVF.woff
    │   ├── api
    │   │   ├── tokens
    │   │   │   ├── total-number
    │   │   │   │   └── route.ts
    │   │   │   ├── my-tokens
    │   │   │   │   ├── total-number
    │   │   │   │   │   └── route.ts
    │   │   │   │   └── route.ts
    │   │   │   └── route.ts
    │   │   ├── auth
    │   │   │   ├── validate-token
    │   │   │   │   └── route.ts
    │   │   │   ├── register
    │   │   │   │   └── route.ts
    │   │   │   ├── login
    │   │   │   │   └── route.ts
    │   │   │   └── change-password
    │   │   │   │   └── route.ts
    │   │   ├── file
    │   │   │   └── route.ts
    │   │   └── users
    │   │   │   └── route.ts
    │   ├── layout.tsx
    │   ├── globals.css
    │   ├── page.tsx
    │   ├── tokens
    │   │   └── page.tsx
    │   ├── profile
    │   │   └── page.tsx
    │   ├── auth
    │   │   ├── signin
    │   │   │   └── page.tsx
    │   │   └── register
    │   │   │   └── page.tsx
    │   ├── change
    │   │   └── page.tsx
    │   └── create
    │   │   └── page.tsx
    ├── lib
    │   └── utils.ts
    ├── utils
    │   ├── web3.ts
    │   ├── jwt.ts
    │   ├── supabase
    │   │   ├── server.ts
    │   │   └── middleware.ts
    │   └── api.ts
    ├── components
    │   ├── ui
    │   │   ├── textarea.tsx
    │   │   ├── label.tsx
    │   │   ├── input.tsx
    │   │   ├── switch.tsx
    │   │   ├── checkbox.tsx
    │   │   ├── card.tsx
    │   │   ├── button.tsx
    │   │   ├── table.tsx
    │   │   ├── pagination.tsx
    │   │   ├── dialog.tsx
    │   │   ├── select.tsx
    │   │   └── menubar.tsx
    │   ├── navbar
    │   │   └── navbar.tsx
    │   └── table
    │   │   └── Table.tsx
    ├── context
    │   └── global-context.tsx
    └── assets
    │   └── image
    │       └── logo-sixcool.svg
├── postcss.config.mjs
├── next.config.mjs
├── components.json
├── .gitignore
├── tsconfig.json
├── README.md
├── package.json
└── tailwind.config.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "next/typescript"]
3 | }
4 | 


--------------------------------------------------------------------------------
/public/create.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sm4rtdev/solana_tokenmint_service/HEAD/public/create.png


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sm4rtdev/solana_tokenmint_service/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/public/dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sm4rtdev/solana_tokenmint_service/HEAD/public/dashboard.png


--------------------------------------------------------------------------------
/src/app/users/page.tsx:
--------------------------------------------------------------------------------
1 | 
2 | export default function Users() {
3 |     return <div>Hi, this is users page</div>
4 | }


--------------------------------------------------------------------------------
/src/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sm4rtdev/solana_tokenmint_service/HEAD/src/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/src/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sm4rtdev/solana_tokenmint_service/HEAD/src/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |     eslint: {
 4 |         ignoreDuringBuilds: true
 5 |     },
 6 |     reactStrictMode: false
 7 | };
 8 | 
 9 | export default nextConfig;
10 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/src/app/api/tokens/total-number/route.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | import { createClient } from "@/utils/supabase/server";
 4 | 
 5 | export async function GET(req: Request) {
 6 |     const supabase = await createClient();
 7 |     const url = new URL(req.url);
 8 |     const net = url.searchParams.get("devnet");
 9 |     const { count: totalCount, error } = (await supabase.from("tokens" + (net !== null ? "_devnet" : "")).select('*', { count: 'exact'}))
10 |     return new Response(JSON.stringify(totalCount), {
11 |         status: error ? 500 : 200,
12 |         headers: {
13 |             'Content-Type': 'application/json',
14 |         },
15 |     });
16 | 
17 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/utils/web3.ts:
--------------------------------------------------------------------------------
 1 | import { PublicKey } from "@solana/web3.js";
 2 | 
 3 | export const getSolanaProvider = () => {
 4 |     if ('phantom' in window) {
 5 |         const provider = (window as any).phantom?.solana;
 6 |     
 7 |         if (provider?.isPhantom) {
 8 |             return provider;
 9 |         }
10 |     }
11 |     return null;
12 | }
13 | 
14 | export const connectSolana = async () : Promise<PublicKey | null> => {
15 |     const provider = getSolanaProvider();
16 |     try {
17 |         const { publicKey } = await provider.connect();
18 |         console.log("Wallet connected", publicKey.toString())
19 |         return publicKey;
20 |     } catch (e) {
21 |         console.log("User rejected the request!", e)
22 |         return null;
23 |     }
24 | }


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Textarea = React.forwardRef<
 6 |   HTMLTextAreaElement,
 7 |   React.ComponentProps<"textarea">
 8 | >(({ className, ...props }, ref) => {
 9 |   return (
10 |     <textarea
11 |       className={cn(
12 |         "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
13 |         className
14 |       )}
15 |       ref={ref}
16 |       {...props}
17 |     />
18 |   )
19 | })
20 | Textarea.displayName = "Textarea"
21 | 
22 | export { Textarea }
23 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 | 


--------------------------------------------------------------------------------
/src/utils/jwt.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import jwt from "jsonwebtoken";
 3 | 
 4 | const SECRET_KEY = process.env.JWT_SECRET_KEY || "your jwt secret key";
 5 | 
 6 | export const validate_token = (token: string) => {
 7 |     try {
 8 |         const { exp, email, name, avatar } = jwt.verify(token, SECRET_KEY) as { exp: number, email: string, name: string, avatar: string };
 9 |         if (exp * 1000 <= Date.now()) {
10 |             return {
11 |                 ok: false,
12 |                 message: "expired"
13 |             }
14 |         }
15 |         return {
16 |             ok: true,
17 |             email,
18 |             name,
19 |             avatar
20 |         }
21 |     } catch (e) {
22 |         console.log("error in paring jwt", e)
23 |         return {
24 |             ok: false,
25 |             message: e
26 |         }
27 |     }
28 | 
29 | }
30 | 
31 | export const generate_token = (email: string, name: string, avatar: string | null): string => {
32 |     return jwt.sign({ email, name, avatar }, SECRET_KEY, { expiresIn: '1d' });
33 | }


--------------------------------------------------------------------------------
/src/utils/supabase/server.ts:
--------------------------------------------------------------------------------
 1 | import { createServerClient } from '@supabase/ssr'
 2 | import { cookies } from 'next/headers'
 3 | 
 4 | export async function createClient() {
 5 |   const cookieStore = cookies()
 6 | 
 7 |   // Create a server's supabase client with newly configured cookie,
 8 |   // which could be used to maintain user's session
 9 |   return createServerClient(
10 |     process.env.NEXT_PUBLIC_SUPABASE_URL!,
11 |     process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
12 |     {
13 |       cookies: {
14 |         getAll() {
15 |           return cookieStore.getAll()
16 |         },
17 |         setAll(cookiesToSet) {
18 |           try {
19 |             cookiesToSet.forEach(({ name, value, options }) =>
20 |               cookieStore.set(name, value, options)
21 |             )
22 |           } catch {
23 |             // The `setAll` method was called from a Server Component.
24 |             // This can be ignored if you have middleware refreshing
25 |             // user sessions.
26 |           }
27 |         },
28 |       },
29 |     }
30 |   )
31 | }


--------------------------------------------------------------------------------
/src/app/api/auth/validate-token/route.ts:
--------------------------------------------------------------------------------
 1 | import { generate_token, validate_token } from "@/utils/jwt";
 2 | import { NextRequest, NextResponse } from "next/server";
 3 | 
 4 | export async function POST(req: NextRequest) {
 5 |     try {
 6 |         const token = req.headers.get('Authorization');
 7 |         if (!token || !token.startsWith("Bearer ")) {
 8 |             return new NextResponse(JSON.stringify({
 9 |                 message: "Wrong Credentials",
10 |                 ok: false
11 |             }))
12 |         }
13 |         else {
14 |             const payload = validate_token(token.substring(7));
15 |             const newToken = generate_token(payload.email!, payload.name!, payload.avatar!);
16 |             return new NextResponse(JSON.stringify({ ok: payload.ok, message: payload.message, avatar: payload.avatar, name: payload.name, email: payload.email, token: newToken }))
17 |         }
18 |     }
19 |     catch (error) {
20 |         return new NextResponse(JSON.stringify({
21 |             message: error,
22 |             ok: false
23 |         }))
24 |     }
25 | }


--------------------------------------------------------------------------------
/src/app/api/tokens/my-tokens/total-number/route.ts:
--------------------------------------------------------------------------------
 1 | import { createClient } from "@/utils/supabase/server";
 2 | import { validate_token } from "@/utils/jwt";
 3 | 
 4 | export async function GET(req: Request) {
 5 |     const url = new URL(req.url);
 6 |     const net = url.searchParams.get("devnet");
 7 |     const token = req.headers.get("Authorization");
 8 |     if (!token) {
 9 |         return new Response(JSON.stringify({
10 |             message: "Authentication error",
11 |             ok: false
12 |         }), { status: 403 })
13 |     }
14 |     const { email: user } = validate_token(token.substring(7));
15 |     if (user) {
16 |         const supabase = await createClient();
17 |         const { count: totalCount } = (await supabase.from("tokens" + (net !== null ? "_devnet" : "")).select('*', { count: 'exact'}).eq("user", user));
18 |         return new Response(JSON.stringify(totalCount))
19 |     } else {
20 |         return new Response(JSON.stringify({
21 |             message: "Authentication error",
22 |             ok: false
23 |         }), { status: 403 })
24 |     }
25 | }


--------------------------------------------------------------------------------
/src/utils/supabase/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { createServerClient } from '@supabase/ssr'
 2 | import { NextResponse, type NextRequest } from 'next/server'
 3 | 
 4 | export async function updateSession(request: NextRequest) {
 5 |   let supabaseResponse = NextResponse.next({
 6 |     request,
 7 |   })
 8 | 
 9 |   const supabase = createServerClient(
10 |     process.env.NEXT_PUBLIC_SUPABASE_URL!,
11 |     process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
12 |     {
13 |       cookies: {
14 |         getAll() {
15 |           return request.cookies.getAll()
16 |         },
17 |         setAll(cookiesToSet) {
18 |           cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
19 |           supabaseResponse = NextResponse.next({
20 |             request,
21 |           })
22 |           cookiesToSet.forEach(({ name, value, options }) =>
23 |             supabaseResponse.cookies.set(name, value, options)
24 |           )
25 |         },
26 |       },
27 |     }
28 |   )
29 | 
30 |   // refreshing the auth token
31 |   await supabase.auth.getUser()
32 | 
33 |   return supabaseResponse
34 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Solana Token Mint Application
 2 | 
 3 | ## Deployment
 4 | 
 5 | This platform is live on [https://solana-tokenmint-service.vercel.app/](https://solana-tokenmint-service.vercel.app/).
 6 | 
 7 | ![](public/dashboard.png)
 8 | ![](public/create.png)
 9 | 
10 | ## Features
11 | 
12 | * Create and mint tokens: Users can create new token accounts and mint tokens there. Token minting is performed at once, it means that users can create token accounts, mint tokens, revoke authorities with one confirmation on his wallet. This is tested with `Phantom` wallet.
13 | 
14 | * Metadata: Every tokens will have their meta data with external links like telegram, discord, twitter and custom website.
15 | 
16 | * Environment: Users can switch between `mainnet-beta` and `devnet` environment
17 | 
18 | * List Tokens: All token infos which users minted are stored on supabase. Users can see the token list on dashboard.
19 | 
20 | * Simple authentication system with email and password.
21 | 
22 | ## Tech Stack
23 | 
24 | * Next.js v14, App Routing, Next API
25 | * Supabase
26 | * `solana/web3.js`, `spl-token`
27 | * Shadcn UI, Tailwind CSS
28 | 


--------------------------------------------------------------------------------
/src/app/api/auth/register/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server";
 2 | import { createClient } from "@/utils/supabase/server";
 3 | import { hashSync } from "bcryptjs";
 4 | 
 5 | export async function POST(req: NextRequest) {
 6 |     try {
 7 |         const { name, email, password } = await req.json();
 8 |         const supabase = await createClient();
 9 |         const { data: user } = await supabase.from("users").select().eq("email", email).single();
10 |         if (user) {
11 |             return new NextResponse(JSON.stringify({
12 |                 message: "Email already exists",
13 |                 ok: false
14 |             }));
15 |         }
16 |         else {
17 |             const hash = hashSync(password);
18 |             const { error } = await supabase.from("users").insert({ name, email, password: hash });
19 |             return new NextResponse(JSON.stringify({
20 |                 message: error?.message || "register success",
21 |                 ok: !error
22 |             }))
23 |         }
24 |     }
25 |     catch (error) {
26 |         return new NextResponse(JSON.stringify({
27 |             message: error,
28 |             ok: false
29 |         }));
30 |     }
31 | }


--------------------------------------------------------------------------------
/src/app/api/tokens/my-tokens/route.ts:
--------------------------------------------------------------------------------
 1 | import { validate_token } from "@/utils/jwt";
 2 | import { createClient } from "@/utils/supabase/server";
 3 | 
 4 | export async function GET(
 5 |   req: Request
 6 | ) {
 7 |   const url = new URL(req.url);
 8 |   const page = parseInt(url.searchParams.get("page") || "1");
 9 |   const size = parseInt(url.searchParams.get("size") || "10");
10 |   const net = url.searchParams.get("devnet");
11 |   const token = req.headers.get("Authorization");
12 |   if (!token) {
13 |     return new Response(JSON.stringify({
14 |         message: "Authentication error",
15 |         ok: false
16 |     }) , {status: 403})
17 |   }
18 |   const { email:user } = validate_token(token.substring(7));
19 |   if (user) {
20 |     const supabase = await createClient();
21 |     const tokens = (await supabase.from("tokens" + (net !== null ? "_devnet" : "")).select("name, created_at, url, address, symbol, description, decimals, supply").eq("user", user).order("created_at", { ascending: false}).range(page * size - size, page * size - 1)).data;
22 |     return new Response(JSON.stringify(tokens))
23 |   } else {
24 |     return new Response(JSON.stringify({
25 |         message: "Authentication error",
26 |         ok: false
27 |     }) , {status: 403})
28 |   }
29 | }


--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Switch = React.forwardRef<
 9 |   React.ElementRef<typeof SwitchPrimitives.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SwitchPrimitives.Root
13 |     className={cn(
14 |       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
15 |       className
16 |     )}
17 |     {...props}
18 |     ref={ref}
19 |   >
20 |     <SwitchPrimitives.Thumb
21 |       className={cn(
22 |         "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
23 |       )}
24 |     />
25 |   </SwitchPrimitives.Root>
26 | ))
27 | Switch.displayName = SwitchPrimitives.Root.displayName
28 | 
29 | export { Switch }
30 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import localFont from "next/font/local";
 3 | import { ToastContainer } from "react-toastify"
 4 | import "./globals.css";
 5 | import Navbar from "@/components/navbar/navbar";
 6 | import { GlobalContextProvider } from "@/context/global-context";
 7 | import { Suspense } from "react";
 8 | 
 9 | const geistSans = localFont({
10 |   src: "./fonts/GeistVF.woff",
11 |   variable: "--font-geist-sans",
12 |   weight: "100 900",
13 | });
14 | const geistMono = localFont({
15 |   src: "./fonts/GeistMonoVF.woff",
16 |   variable: "--font-geist-mono",
17 |   weight: "100 900",
18 | });
19 | 
20 | export const metadata: Metadata = {
21 |   title: "Solana Token Mint",
22 |   description: "Mint solana tokens here",
23 | };
24 | 
25 | export default function RootLayout({
26 |   children,
27 | }: Readonly<{
28 |   children: React.ReactNode;
29 | }>) {
30 |   return (
31 |     <html lang="en">
32 |       <body
33 |         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-[#1b1622] text-white`}
34 |       >
35 |         <div className="py-8 px-4 gap-4 container mx-auto">
36 |           <GlobalContextProvider>
37 |             <Suspense>
38 |               <ToastContainer theme="dark" />
39 |               <Navbar />
40 |               {children}
41 |             </Suspense>
42 |           </GlobalContextProvider>
43 |         </div>
44 |       </body>
45 |     </html>
46 |   );
47 | }
48 | 


--------------------------------------------------------------------------------
/src/app/api/auth/login/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server";
 2 | import { createClient } from "@/utils/supabase/server";
 3 | import { compareSync } from "bcryptjs";
 4 | import { generate_token } from "@/utils/jwt";
 5 | 
 6 | export async function POST(req: NextRequest) {
 7 |     try {
 8 |         const supabase = await createClient();
 9 |         const { email, password } = await req.json();
10 |         const { data: user } = await supabase.from("users").select().eq("email", email).single();
11 |         if (!user) {
12 |             return new NextResponse(JSON.stringify({
13 |                 message: "user not found",
14 |                 ok: false
15 |             }));
16 |         }
17 |         const check = compareSync(password, user?.password);
18 |         if (check) {
19 |             const token = generate_token(email, user.name, user.avatar);
20 |             return new NextResponse(JSON.stringify({
21 |                 message: "login success",
22 |                 token: token,
23 |                 name: user.name,
24 |                 avatar: user.avatar,
25 |                 ok: true
26 |             }));
27 |         } else {
28 |             return new NextResponse(JSON.stringify({
29 |                 message: "Wrong Credentials",
30 |                 ok: false
31 |             }))
32 |         }
33 |     }
34 |     catch (error) {
35 |         return new NextResponse(JSON.stringify({
36 |             message: error,
37 |             ok: false
38 |         }))
39 |     }
40 | }


--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Check } from "lucide-react"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
 9 |   onChange?: (checked: boolean) => void
10 |   onCheckedChange?: (checked: boolean) => void // For backwards compatibility
11 | }
12 | 
13 | const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
14 |   ({ className, onChange, onCheckedChange, ...props }, ref) => {
15 |     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
16 |       const isChecked = event.target.checked
17 |       onChange?.(isChecked)
18 |       onCheckedChange?.(isChecked) // Call onCheckedChange if provided
19 |     }
20 | 
21 |     return (
22 |       <div className="relative inline-flex items-center">
23 |         <input
24 |           type="checkbox"
25 |           className={cn(
26 |             "peer h-4 w-4 shrink-0 rounded-sm border border-white ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 appearance-none",
27 |             className,
28 |           )}
29 |           ref={ref}
30 |           onChange={handleChange}
31 |           {...props}
32 |         />
33 |         <Check className="absolute h-4 w-4 text-white opacity-0 peer-checked:opacity-100 pointer-events-none" />
34 |       </div>
35 |     )
36 |   },
37 | )
38 | Checkbox.displayName = "Checkbox"
39 | 
40 | export { Checkbox }
41 | 
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sol-token-mint",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-dialog": "^1.1.6",
13 |     "@radix-ui/react-label": "^2.1.2",
14 |     "@radix-ui/react-menubar": "^1.1.6",
15 |     "@radix-ui/react-select": "^2.1.6",
16 |     "@radix-ui/react-slot": "^1.1.2",
17 |     "@radix-ui/react-switch": "^1.1.3",
18 |     "@solana/spl-token": "^0.4.12",
19 |     "@solana/spl-token-metadata": "^0.1.6",
20 |     "@solana/web3.js": "^1.98.0",
21 |     "@supabase/ssr": "^0.5.2",
22 |     "@supabase/supabase-js": "^2.48.1",
23 |     "@types/jsonwebtoken": "^9.0.8",
24 |     "axios": "^1.7.9",
25 |     "bcryptjs": "^3.0.0",
26 |     "bs58": "^6.0.0",
27 |     "class-variance-authority": "^0.7.1",
28 |     "clsx": "^2.1.1",
29 |     "jsonwebtoken": "^9.0.2",
30 |     "lucide-react": "^0.475.0",
31 |     "next": "14.2.24",
32 |     "react": "^18",
33 |     "react-advanced-cropper": "^0.20.0",
34 |     "react-dom": "^18",
35 |     "react-icons": "^5.5.0",
36 |     "react-toastify": "^11.0.3",
37 |     "shadcn": "^2.4.0-canary.11",
38 |     "sharp": "^0.33.5",
39 |     "tailwind-merge": "^3.0.1",
40 |     "tailwindcss-animate": "^1.0.7",
41 |     "uuid": "^11.1.0"
42 |   },
43 |   "devDependencies": {
44 |     "@types/node": "^20",
45 |     "@types/react": "^18",
46 |     "@types/react-dom": "^18",
47 |     "@types/uuid": "^10.0.0",
48 |     "eslint": "^8",
49 |     "eslint-config-next": "14.2.24",
50 |     "postcss": "^8",
51 |     "tailwindcss": "^3.4.1",
52 |     "typescript": "^5"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/app/api/file/route.ts:
--------------------------------------------------------------------------------
 1 | import { createClient } from "@/utils/supabase/server";
 2 | import { v4 as uuid } from "uuid";
 3 | 
 4 | 
 5 | export async function POST(
 6 |     req: Request
 7 | ) {
 8 |     const formdata = await req.formData();
 9 |     const folder = formdata.get("path") || "avatar";
10 |     const filename = formdata.get("filename") || "image.png";
11 |     const type = formdata.get("type") || "image/png";
12 |     const file = formdata.get('file')!;
13 |     
14 |     const supabase = await createClient();
15 |     const {data: onlineFile, error} = await supabase.storage
16 |         .from("sol-token-mint")
17 |         .upload(`${folder}/${uuid()}-${filename}`, file, {
18 |             contentType: type as string,
19 |             headers: {
20 |                 "Content-Disposition": "inline"
21 |             }
22 |         })
23 |     const { data: url } = supabase.storage.from("sol-token-mint").getPublicUrl(`${onlineFile?.path}`);
24 |     return new Response(JSON.stringify({
25 |         url: url?.publicUrl
26 |     }))
27 | }
28 | 
29 | export async function DELETE(
30 |     req: Request
31 | ) {
32 |     const searchParams = new URL(req.url).searchParams;
33 |     const publicUrl = searchParams.get("publicUrl");
34 |     if (!publicUrl) return new Response(JSON.stringify({
35 |         ok: false,
36 |         message: "empty url"
37 |     }));
38 |     const chunks = publicUrl.split("/");
39 |     const path = chunks[chunks.length - 2] + "/" + chunks[chunks.length - 1];
40 |     const supabase = await createClient();
41 |     const {error} = await supabase.storage.from("sol-token-mint").remove([path]);
42 |     return new Response(JSON.stringify({
43 |         ok: !error,
44 |         message: error?.message
45 |     }))
46 | }


--------------------------------------------------------------------------------
/src/app/api/auth/change-password/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server";
 2 | import { createClient } from "@/utils/supabase/server";
 3 | import { hashSync, compareSync } from "bcryptjs";
 4 | import { generate_token, validate_token } from "@/utils/jwt";
 5 | 
 6 | export async function POST(req: NextRequest) {
 7 |     try {
 8 |         const token = req.headers.get('Authorization');
 9 |         if (!token || !token.startsWith("Bearer ")) {
10 |             return new NextResponse(JSON.stringify({
11 |                 message: "Wrong Credentials",
12 |                 ok: false
13 |             }))
14 |         }
15 |         const { email, name, avatar } = validate_token(token.substring(7));
16 |         const { password, oldPassword } = await req.json();
17 |         const supabase = await createClient();
18 |         const { data: user } = await supabase.from("users").select().eq("email", email).single();
19 |         const check = compareSync(oldPassword, user?.password)
20 |         if (check) {
21 |             const hash = hashSync(password);
22 |             const { error } = await supabase.from("users").update({ password: hash }).eq("email", email);
23 |             return new NextResponse(JSON.stringify({
24 |                 message: error?.message || "update success",
25 |                 token: !error ? generate_token(email!, name!, avatar!) : undefined,
26 |                 ok: !error
27 |             }))
28 |         } else {
29 |             return new NextResponse(JSON.stringify({
30 |                 message: "Wrong Credentials",
31 |                 ok: false
32 |             }), {status: 403})
33 |         }
34 |     }
35 |     catch (error) {
36 |         return new NextResponse(JSON.stringify({
37 |             message: error,
38 |             ok: false
39 |         }))
40 |     }
41 | }


--------------------------------------------------------------------------------
/src/context/global-context.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { validate_token } from "@/utils/api"
 4 | import { createContext, useContext, type ReactNode, useState, SetStateAction, Dispatch, useEffect } from "react"
 5 | 
 6 | type User = {
 7 |     email: string,
 8 |     name: string,
 9 |     avatar: string
10 | }
11 | // Define the shape of your context state
12 | type GlobalContextType = {
13 |     user: User | null,
14 |     setUser: Dispatch<SetStateAction<User | null>>,
15 |     net: "mainnet" | "devnet" | null,
16 |     setNet: Dispatch<SetStateAction<"mainnet" | "devnet" | null>>
17 | }
18 | 
19 | // Create the context with default values
20 | const GlobalContext = createContext<GlobalContextType>({
21 |     user: null,
22 |     setUser: () => {},
23 |     net: null,
24 |     setNet: () => {}
25 | })
26 | 
27 | // Create a provider component
28 | export function GlobalContextProvider({ children }: { children: ReactNode }) {
29 |     const [user, setUser] = useState<User | null>(null);
30 |     const [net, setNet] = useState<"mainnet" | "devnet" | null>(null);
31 |     useEffect(() => {
32 |         validate_token().then(data => setUser(data))
33 |         const net = localStorage.getItem("net") === "devnet" ? "devnet" : "mainnet";
34 |         setNet(net);
35 |     }, [])
36 | 
37 |     useEffect(() => {
38 |         net === "devnet" ? localStorage.setItem("net", "devnet") : localStorage.removeItem("net")
39 |     }, [net])
40 | 
41 |     return <GlobalContext.Provider value={{ user, setUser, net, setNet }}>{children}</GlobalContext.Provider>
42 | }
43 | 
44 | // Create a custom hook to use the context
45 | export function useGlobalContext() {
46 |     const context = useContext(GlobalContext)
47 | 
48 |     if (context === undefined) {
49 |         throw new Error("useGlobalContext must be used within a GlobalContextProvider")
50 |     }
51 | 
52 |     return context
53 | }
54 | 
55 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |     darkMode: ["class"],
 5 |     content: [
 6 |     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   theme: {
11 |   	extend: {
12 |   		colors: {
13 |   			background: 'hsl(var(--background))',
14 |   			foreground: 'hsl(var(--foreground))',
15 |   			card: {
16 |   				DEFAULT: 'hsl(var(--card))',
17 |   				foreground: 'hsl(var(--card-foreground))'
18 |   			},
19 |   			popover: {
20 |   				DEFAULT: 'hsl(var(--popover))',
21 |   				foreground: 'hsl(var(--popover-foreground))'
22 |   			},
23 |   			primary: {
24 |   				DEFAULT: 'hsl(var(--primary))',
25 |   				foreground: 'hsl(var(--primary-foreground))'
26 |   			},
27 |   			secondary: {
28 |   				DEFAULT: 'hsl(var(--secondary))',
29 |   				foreground: 'hsl(var(--secondary-foreground))'
30 |   			},
31 |   			muted: {
32 |   				DEFAULT: 'hsl(var(--muted))',
33 |   				foreground: 'hsl(var(--muted-foreground))'
34 |   			},
35 |   			accent: {
36 |   				DEFAULT: 'hsl(var(--accent))',
37 |   				foreground: 'hsl(var(--accent-foreground))'
38 |   			},
39 |   			destructive: {
40 |   				DEFAULT: 'hsl(var(--destructive))',
41 |   				foreground: 'hsl(var(--destructive-foreground))'
42 |   			},
43 |   			border: 'hsl(var(--border))',
44 |   			input: 'hsl(var(--input))',
45 |   			ring: 'hsl(var(--ring))',
46 |   			chart: {
47 |   				'1': 'hsl(var(--chart-1))',
48 |   				'2': 'hsl(var(--chart-2))',
49 |   				'3': 'hsl(var(--chart-3))',
50 |   				'4': 'hsl(var(--chart-4))',
51 |   				'5': 'hsl(var(--chart-5))'
52 |   			}
53 |   		},
54 |   		borderRadius: {
55 |   			lg: 'var(--radius)',
56 |   			md: 'calc(var(--radius) - 2px)',
57 |   			sm: 'calc(var(--radius) - 4px)'
58 |   		}
59 |   	}
60 |   },
61 |   plugins: [require("tailwindcss-animate")],
62 | };
63 | export default config;
64 | 


--------------------------------------------------------------------------------
/src/app/api/tokens/route.ts:
--------------------------------------------------------------------------------
 1 | import { validate_token } from "@/utils/jwt";
 2 | import { createClient } from "@/utils/supabase/server";
 3 | 
 4 | 
 5 | export async function GET(
 6 |   req: Request
 7 | ) {
 8 |   const url = new URL(req.url);
 9 |   const page = parseInt(url.searchParams.get("page") || "1");
10 |   const size = parseInt(url.searchParams.get("size") || "10");
11 |   const user = url.searchParams.get("user");
12 |   const net = url.searchParams.get("devnet");
13 |   
14 |   let tokens: any[] | null = []
15 |   const supabase = await createClient();
16 |   if (user) {
17 |     tokens = (await supabase.from("tokens" + (net !== null ? "_devnet" : "")).select("name, created_at, url, address, symbol, description, decimals, supply").eq("user", user).order("created_at", { ascending: false}).range(page * size - size, page * size - 1)).data;
18 |   } else {
19 |     tokens = (await supabase.from("tokens" + (net !== null ? "_devnet" : "")).select("name, created_at, url, address, symbol, description, decimals, supply").order("created_at", { ascending: false}).range(page * size - size, page * size - 1)).data;
20 |   }
21 |   return new Response(JSON.stringify(tokens))
22 | }
23 | 
24 | export async function POST(
25 |   req: Request
26 | ) {
27 |   const access_token = req.headers.get("Authorization");
28 |   if (!access_token) {
29 |     return new Response(JSON.stringify({
30 |         message: "Authentication error",
31 |         ok: false
32 |     }) , {status: 403})
33 |   }
34 |   const url = new URL(req.url);
35 |   const net = url.searchParams.get("devnet");
36 |   const { email:user } = validate_token(access_token.substring(7));
37 |   const token = await req.json();
38 |   const supabase = await createClient();
39 |   const {error} = await supabase.from("tokens" + (net !== null ? "_devnet" : "")).insert({
40 |     ...token,
41 |     user
42 |   })
43 |   return new Response(JSON.stringify({
44 |     ok: !error,
45 |     message: error?.message
46 |   }))
47 | }


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cn } from "@/lib/utils"
 3 | 
 4 | const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
 5 |   <div ref={ref} className={cn("rounded-lg border text-card-foreground shadow-sm w-full max-w-96", className)} {...props} />
 6 | ))
 7 | Card.displayName = "Card"
 8 | 
 9 | const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
10 |   ({ className, ...props }, ref) => (
11 |     <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
12 |   ),
13 | )
14 | CardHeader.displayName = "CardHeader"
15 | 
16 | const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
17 |   ({ className, ...props }, ref) => (
18 |     <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
19 |   ),
20 | )
21 | CardTitle.displayName = "CardTitle"
22 | 
23 | const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
24 |   ({ className, ...props }, ref) => (
25 |     <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
26 |   ),
27 | )
28 | CardDescription.displayName = "CardDescription"
29 | 
30 | const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
31 |   ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
32 | )
33 | CardContent.displayName = "CardContent"
34 | 
35 | const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
36 |   ({ className, ...props }, ref) => (
37 |     <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
38 |   ),
39 | )
40 | CardFooter.displayName = "CardFooter"
41 | 
42 | export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
43 | 
44 | 


--------------------------------------------------------------------------------
/src/app/api/users/route.ts:
--------------------------------------------------------------------------------
 1 | import { generate_token, validate_token } from "@/utils/jwt";
 2 | import { createClient } from "@/utils/supabase/server";
 3 | 
 4 | export async function GET(
 5 |   req: Request
 6 | ) {
 7 |   const url = new URL(req.url);
 8 |   const page = parseInt(url.searchParams.get("page") || "1");
 9 |   const size = parseInt(url.searchParams.get("size") || "10");
10 |   const supabase = await createClient();
11 |   const email = url.searchParams.get("email");
12 |   if (email) {
13 |     const { data: users } = await supabase.from("users").select().eq(`email`, email);
14 |     return new Response(JSON.stringify(users![0]))
15 |   } else {
16 |     const { data: users } = await supabase.from("users").select().order("created_at", { ascending: false }).range(page * size - size, page * size - 1);
17 |     return new Response(JSON.stringify(users))
18 |   }
19 | }
20 | 
21 | // export async function POST(
22 | //   req: Request
23 | // ) {
24 | 
25 | // }
26 | 
27 | export async function PUT(
28 |   req: Request
29 | ) {
30 |   const token = req.headers.get('Authorization');
31 |   if (!token || !token.startsWith("Bearer ")) {
32 |     return new Response(JSON.stringify({
33 |       message: "Wrong Credentials",
34 |       ok: false
35 |     }), {status: 403})
36 |   }
37 |   const { email } = validate_token(token.substring(7));
38 |   const { name, avatar } = await req.json();
39 |   const supabase = await createClient();
40 |   const { error } = await supabase.from("users").update({ name, avatar }).eq(`email`, email);
41 |   return new Response(JSON.stringify({
42 |     message: error?.message || "Updated",
43 |     ok: !error,
44 |     token: generate_token(email!, name, avatar)
45 |   }))
46 | }
47 | 
48 | export async function DELETE(
49 |   req: Request
50 | ) {
51 |   const { id, email } = await req.json();
52 |   const supabase = await createClient();
53 |   const { error } = await supabase.from("users").delete().or(`id.eq.${id},email.eq.${email}`)
54 |   return new Response(error?.message || "Deleted")
55 | }


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |   font-family: Arial, Helvetica, sans-serif;
 7 | }
 8 | 
 9 | @layer utilities {
10 |   .text-balance {
11 |     text-wrap: balance;
12 |   }
13 | }
14 | 
15 | @layer base {
16 |   :root {
17 |     --background: 0 0% 100%;
18 |     --foreground: 0 0% 3.9%;
19 |     --card: 0 0% 100%;
20 |     --card-foreground: 0 0% 3.9%;
21 |     --popover: 0 0% 100%;
22 |     --popover-foreground: 0 0% 3.9%;
23 |     --primary: 0 0% 9%;
24 |     --primary-foreground: 0 0% 98%;
25 |     --secondary: 0 0% 96.1%;
26 |     --secondary-foreground: 0 0% 9%;
27 |     --muted: 0 0% 96.1%;
28 |     --muted-foreground: 0 0% 45.1%;
29 |     --accent: 0 0% 96.1%;
30 |     --accent-foreground: 0 0% 9%;
31 |     --destructive: 0 84.2% 60.2%;
32 |     --destructive-foreground: 0 0% 98%;
33 |     --border: 0 0% 89.8%;
34 |     --input: 0 0% 89.8%;
35 |     --ring: 0 0% 3.9%;
36 |     --chart-1: 12 76% 61%;
37 |     --chart-2: 173 58% 39%;
38 |     --chart-3: 197 37% 24%;
39 |     --chart-4: 43 74% 66%;
40 |     --chart-5: 27 87% 67%;
41 |     --radius: 0.5rem;
42 |   }
43 |   .dark {
44 |     --background: 0 0% 3.9%;
45 |     --foreground: 0 0% 98%;
46 |     --card: 0 0% 3.9%;
47 |     --card-foreground: 0 0% 98%;
48 |     --popover: 0 0% 3.9%;
49 |     --popover-foreground: 0 0% 98%;
50 |     --primary: 0 0% 98%;
51 |     --primary-foreground: 0 0% 9%;
52 |     --secondary: 0 0% 14.9%;
53 |     --secondary-foreground: 0 0% 98%;
54 |     --muted: 0 0% 14.9%;
55 |     --muted-foreground: 0 0% 63.9%;
56 |     --accent: 0 0% 14.9%;
57 |     --accent-foreground: 0 0% 98%;
58 |     --destructive: 0 62.8% 30.6%;
59 |     --destructive-foreground: 0 0% 98%;
60 |     --border: 0 0% 14.9%;
61 |     --input: 0 0% 14.9%;
62 |     --ring: 0 0% 83.1%;
63 |     --chart-1: 220 70% 50%;
64 |     --chart-2: 160 60% 45%;
65 |     --chart-3: 30 80% 55%;
66 |     --chart-4: 280 65% 60%;
67 |     --chart-5: 340 75% 55%;
68 |   }
69 | }
70 | 
71 | @layer base {
72 |   * {
73 |     @apply border-border;
74 |   }
75 |   body {
76 |     @apply bg-background text-foreground;
77 |   }
78 | }
79 | 
80 | 
81 | 
82 | @layer base {
83 |   * {
84 |     @apply border-border outline-ring/50;
85 |   }
86 |   body {
87 |     @apply bg-background text-foreground;
88 |   }
89 | }
90 | .ring-offset-background {
91 |   --tw-ring-offset-color: hsl(233.57deg 100% 73.35%);
92 | }
93 | 
94 | input, textarea, img {
95 |   border-color: rgba(175, 175, 175, 0.363) !important;
96 | }


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import MyTable from "@/components/table/Table";
 4 | import { useGlobalContext } from "@/context/global-context";
 5 | import { getTokenList, getTokenTotalNumber } from "@/utils/api";
 6 | import { useEffect, useState } from "react";
 7 | import { useSearchParams } from "next/navigation";
 8 | 
 9 | export default function Home() {
10 |   const { net } = useGlobalContext();
11 |   const [tokens, setTokens] = useState<any[]>([]);
12 |   const [page, setPage] = useState(1);
13 |   const [size, setSize] = useState(5);
14 |   const [total, setTotal] = useState(0);
15 |   const searchParams = useSearchParams();
16 | 
17 |   useEffect(() => {
18 |     fetchData();
19 |   }, [net]);
20 | 
21 |   const fetchData = (p = page, s = size) => {
22 |     if (p > 0 && s > 0 && net) {
23 |       getTokenList(p, s, undefined, net === "devnet").then(tokens => tokens && setTokens(tokens));
24 |       getTokenTotalNumber(undefined, net === "devnet").then(number => setTotal(number));
25 |     }
26 |   }
27 | 
28 |   useEffect(() => {
29 |     const params = new URLSearchParams(searchParams);
30 |     const page = Number(params.get('page') || 1);
31 |     const size = Number(params.get('size') || 5);
32 |     setPage(page)
33 |     setSize(size)
34 |     fetchData(page, size);
35 |   },[searchParams])
36 |   
37 |   return (
38 |     <div className="flex flex-col font-[family-name:var(--font-geist-sans)]">
39 |       <div>
40 |         <MyTable header={[{
41 |           key: "url",
42 |           value: "#"
43 |         },{
44 |           key: "name",
45 |           value: "Name"
46 |         },{
47 |           key: "address",
48 |           value: "Address"
49 |         },{
50 |           key: "symbol",
51 |           value: "Symbol"
52 |         },{
53 |           key: "description",
54 |           value: "Description"
55 |         },{
56 |           key: "decimals",
57 |           value: "Decimals"
58 |         },{
59 |           key: "supply",
60 |           value: "Supply"
61 |         },{
62 |           key: "created_at",
63 |           value: "Created_at"
64 |         }]} body={tokens.map(token =>({
65 |           name: {
66 |             value: token.name
67 |           },
68 |           address: {
69 |             value: <a target="_blank" className="underline text-[#00a6f4]" href={`https://solscan.io/token/${token.address}${net === "devnet" ? "?cluster=devnet" : ""}`}>{token.address.substring(0, 8) + "..." + token.address.substring(token.address.length - 8)}</a>
70 |           },
71 |           symbol: {
72 |             value: token.symbol
73 |           },
74 |           url: {
75 |             value: <img src={token.url} className="size-10 rounded-full aspect-square"/>
76 |           },
77 |           description: {
78 |             value: token.description
79 |           },
80 |           decimals: {
81 |             value: token.decimals
82 |           },
83 |           supply: {
84 |             value: token.supply
85 |           },
86 |           created_at: {
87 |             value: new Date(token.created_at).toLocaleDateString()
88 |           }
89 |         }))} page={page} setPage={setPage} size={size} setSize={setSize} total={total} />
90 |       </div>
91 |     </div>
92 |   );
93 | }
94 | 


--------------------------------------------------------------------------------
/src/app/tokens/page.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import MyTable from "@/components/table/Table";
 4 | import { useGlobalContext } from "@/context/global-context";
 5 | import { getMyTokens, getMyTokensTotalNumber } from "@/utils/api";
 6 | import { useSearchParams } from "next/navigation";
 7 | import { useEffect, useState } from "react";
 8 | 
 9 | export default function MyTokens() {
10 |   const { net } = useGlobalContext();
11 |   const [tokens, setTokens] = useState<any[]>([]);
12 |   const [page, setPage] = useState(1);
13 |   const [size, setSize] = useState(5);
14 |   const [total, setTotal] = useState<any>(0);
15 |   const searchParams = useSearchParams();
16 | 
17 |   useEffect(() => {
18 |       fetchData();
19 |     }, [net]);
20 |   
21 |     const fetchData = (p = page, s = size) => {
22 |       if (p > 0 && s > 0 && net) {
23 |         getMyTokens(p, s, net === "devnet").then(tokens => tokens && setTokens(tokens));
24 |         getMyTokensTotalNumber(net === "devnet").then(number => setTotal(number));
25 |       }
26 |     }
27 |   
28 |     useEffect(() => {
29 |       const params = new URLSearchParams(searchParams);
30 |       const page = Number(params.get('page') || 1);
31 |       const size = Number(params.get('size') || 5);
32 |       setPage(page)
33 |       setSize(size)
34 |       fetchData(page, size);
35 |     },[searchParams])
36 | 
37 |   return (
38 |     <div className="flex flex-col font-[family-name:var(--font-geist-sans)]">
39 |       <div>
40 |         <MyTable header={[{
41 |           key: "url",
42 |           value: "#"
43 |         }, {
44 |           key: "name",
45 |           value: "Name"
46 |         }, {
47 |           key: "address",
48 |           value: "Address"
49 |         }, {
50 |           key: "symbol",
51 |           value: "Symbol"
52 |         }, {
53 |           key: "description",
54 |           value: "Description"
55 |         }, {
56 |           key: "decimals",
57 |           value: "Decimals"
58 |         }, {
59 |           key: "supply",
60 |           value: "Supply"
61 |         }, {
62 |           key: "created_at",
63 |           value: "Created_at"
64 |         }]} body={tokens.map(token => ({
65 |           name: {
66 |             value: token.name
67 |           },
68 |           address: {
69 |             value: <a target="_blank" className="underline text-[#00a6f4]" href={`https://solscan.io/token/${token.address}${net === "devnet" ? "?cluster=devnet" : ""}`}>{token.address.substring(0, 8) + "..." + token.address.substring(token.address.length - 8)}</a>
70 |           },
71 |           symbol: {
72 |             value: token.symbol
73 |           },
74 |           url: {
75 |             value: <img src={token.url} className="size-10 rounded-full aspect-square" />
76 |           },
77 |           description: {
78 |             value: token.description
79 |           },
80 |           decimals: {
81 |             value: token.decimals
82 |           },
83 |           supply: {
84 |             value: token.supply
85 |           },
86 |           created_at: {
87 |             value: new Date(token.created_at).toLocaleDateString()
88 |           }
89 |         }))} page={page} setPage={setPage} size={size} setSize={setSize} total={total} />
90 |       </div>
91 |     </div>
92 |   );
93 | }
94 | 


--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "@/lib/utils"
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ))
 17 | Table.displayName = "Table"
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ))
 25 | TableHeader.displayName = "TableHeader"
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ))
 37 | TableBody.displayName = "TableBody"
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ))
 52 | TableFooter.displayName = "TableFooter"
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "border-b transition-colors data-[state=selected]:bg-muted",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | TableRow.displayName = "TableRow"
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       "h-12 px-4 text-left min-w-20 align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ))
 82 | TableHead.displayName = "TableHead"
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 91 |     {...props}
 92 |   />
 93 | ))
 94 | TableCell.displayName = "TableCell"
 95 | 
 96 | const TableCaption = React.forwardRef<
 97 |   HTMLTableCaptionElement,
 98 |   React.HTMLAttributes<HTMLTableCaptionElement>
 99 | >(({ className, ...props }, ref) => (
100 |   <caption
101 |     ref={ref}
102 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
103 |     {...props}
104 |   />
105 | ))
106 | TableCaption.displayName = "TableCaption"
107 | 
108 | export {
109 |   Table,
110 |   TableHeader,
111 |   TableBody,
112 |   TableFooter,
113 |   TableHead,
114 |   TableRow,
115 |   TableCell,
116 |   TableCaption,
117 | }
118 | 


--------------------------------------------------------------------------------
/src/components/ui/pagination.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | import { ButtonProps, buttonVariants } from "@/components/ui/button"
  6 | 
  7 | const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  8 |   <nav
  9 |     role="navigation"
 10 |     aria-label="pagination"
 11 |     className={cn("mx-auto flex w-full justify-center", className)}
 12 |     {...props}
 13 |   />
 14 | )
 15 | Pagination.displayName = "Pagination"
 16 | 
 17 | const PaginationContent = React.forwardRef<
 18 |   HTMLUListElement,
 19 |   React.ComponentProps<"ul">
 20 | >(({ className, ...props }, ref) => (
 21 |   <ul
 22 |     ref={ref}
 23 |     className={cn("flex flex-row items-center gap-1", className)}
 24 |     {...props}
 25 |   />
 26 | ))
 27 | PaginationContent.displayName = "PaginationContent"
 28 | 
 29 | const PaginationItem = React.forwardRef<
 30 |   HTMLLIElement,
 31 |   React.ComponentProps<"li">
 32 | >(({ className, ...props }, ref) => (
 33 |   <li ref={ref} className={cn("cursor-pointer", className)} {...props} />
 34 | ))
 35 | PaginationItem.displayName = "PaginationItem"
 36 | 
 37 | type PaginationLinkProps = {
 38 |   isActive?: boolean
 39 | } & Pick<ButtonProps, "size"> &
 40 |   React.ComponentProps<"a">
 41 | 
 42 | const PaginationLink = ({
 43 |   className,
 44 |   isActive,
 45 |   size = "icon",
 46 |   ...props
 47 | }: PaginationLinkProps) => (
 48 |   <a
 49 |     aria-current={isActive ? "page" : undefined}
 50 |     className={cn(
 51 |       buttonVariants({
 52 |         variant: isActive ? "outline" : "ghost",
 53 |         size,
 54 |       }),
 55 |       "border border-[#fff9] hover:bg-[#fffc] text-white",
 56 |       className
 57 |     )}
 58 |     {...props}
 59 |   />
 60 | )
 61 | PaginationLink.displayName = "PaginationLink"
 62 | 
 63 | const PaginationPrevious = ({
 64 |   className,
 65 |   ...props
 66 | }: React.ComponentProps<typeof PaginationLink>) => (
 67 |   <PaginationLink
 68 |     aria-label="Go to previous page"
 69 |     size="default"
 70 |     className={cn("gap-1 pl-2.5", className)}
 71 |     {...props}
 72 |   >
 73 |     <ChevronLeft className="h-4 w-4" />
 74 |     <span>Prev</span>
 75 |   </PaginationLink>
 76 | )
 77 | PaginationPrevious.displayName = "PaginationPrevious"
 78 | 
 79 | const PaginationNext = ({
 80 |   className,
 81 |   ...props
 82 | }: React.ComponentProps<typeof PaginationLink>) => (
 83 |   <PaginationLink
 84 |     aria-label="Go to next page"
 85 |     size="default"
 86 |     className={cn("gap-1 pr-2.5", className)}
 87 |     {...props}
 88 |   >
 89 |     <span>Next</span>
 90 |     <ChevronRight className="h-4 w-4" />
 91 |   </PaginationLink>
 92 | )
 93 | PaginationNext.displayName = "PaginationNext"
 94 | 
 95 | const PaginationEllipsis = ({
 96 |   className,
 97 |   ...props
 98 | }: React.ComponentProps<"span">) => (
 99 |   <span
100 |     aria-hidden
101 |     className={cn("flex h-9 w-9 items-center justify-center", className)}
102 |     {...props}
103 |   >
104 |     <MoreHorizontal className="h-4 w-4" />
105 |     <span className="sr-only">More pages</span>
106 |   </span>
107 | )
108 | PaginationEllipsis.displayName = "PaginationEllipsis"
109 | 
110 | export {
111 |   Pagination,
112 |   PaginationContent,
113 |   PaginationEllipsis,
114 |   PaginationItem,
115 |   PaginationLink,
116 |   PaginationNext,
117 |   PaginationPrevious,
118 | }
119 | 


--------------------------------------------------------------------------------
/src/assets/image/logo-sixcool.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1180" height="256">
 3 | <defs>
 4 |   <radialGradient id="Gradient2" cx="0.6" cy="0.6" r="1.2" fx="1.5" fy="0">
 5 |     <stop offset="30%" stop-color="#c093ff" />
 6 |     <stop offset="65%" stop-color="#663da0" />
 7 |   </radialGradient>
 8 | </defs>
 9 | <path d="M 0 0 C 13.9002 0.0223 24.5035 1.3004 35.5625 5.4375 C 84.6 24.7 104.2855 57.1638 112.0264 84.3237 C 114.0022 92.1138 115.5625 100.4014 115 109 C 113 105 115 109 113 105 C 105.4844 90.0349 99.5621 79.2149 90.5625 69.4375 C 32.9 12.6 -16.9 15.6 -56.8164 55.4661 C -93.3 101.1 -82.1 151.8 -57.7 175.4 C -39 195.7 -23.7 195.7 0.5625 197.4375 C 0.5625 192.4875 0.5625 187.5375 0.5625 182.4375 C -0.7575 182.1075 -2.0775 181.7775 -3.4375 181.4375 C -55.1506 155.5818 -57.2933 154.5083 -60 153 C -60 136 -60 112 -60 79 C -60 76 -60 76 -57.7254 74.3223 C -14 52 -14 52 -4.0364 47.4634 C -0.7321 46.1591 1.1618 46.5484 4.5625 47.4375 C 36.627 63.4201 44.5349 67.4202 52.375 71.5625 c 4.8856 2.6005 5.4514 2.2913 6.4514 3.2913 C 61 207 61 209 61 212 C 55.2 224 19.039 228.6334 3.1111 228.6777 C -34.2 229.2 -57.1 219.2 -78.8 200.3 C -95.1 184.5 -108.6 159.1 -111.4375 141.4375 C -121.2 84.7 -103.6 56.6 -81.3 32.2 C -54.8 6.6 -30.9706 -0.0099 0 0 Z" fill="#663da0" transform="translate(128.4375,13.5625)"/>
10 | <path d="M 0 0 C 45.9862 21.9616 45.9862 21.9616 60 29 C 60 54.41 60 79.82 60 106 C 56.7 105.5 55.3 105 50.8359 102.5315 C 4.287 79.1443 2.1436 78.0718 -0.6 76.8 C -0.6 51 -0.7 10 -0.7 4 C -0.7 1.4 -0.6 0.2 -0.3 0 Z" fill="#a065f2" transform="translate(69,90)"/>
11 | <path d="M 0 0 C 44 22 48 24 51 26 C 15 47 13 48 1 54 C -7 58 -8 58 -15 54 C -62 31 -64 30 -67.8 27.8 C -67.6 26.8 -66.8 26.1 -65 25 C -63 24 -54 19 -40 12 C -26 5 -25 5 -15 0 C -8 -3 -7 -3 0 0 Z" fill="#834fcc" transform="translate(136.3125,62.4609375)"/>
12 | <path d="M 0 0 C 13.9002 0.0223 24.5035 1.3004 35.5625 5.4375 C 84.6 24.7 104.2855 57.1638 112.0264 84.3237 C 114.0022 92.1138 115.5625 100.4014 115 109 C 113 105 115 109 113 105 C 105.4844 90.0349 99.5621 79.2149 90.5625 69.4375 C 32.9 12.6 -16.9 15.6 -56.8164 55.4661 C -89.6 101.9 -112.9 96.9 -81.3 32.2 C -54.8 6.6 -30.9706 -0.0099 0 0 Z" fill="url(#Gradient2)" transform="translate(128.4375,13.5625)"/>
13 | 
14 | <g transform="translate(190,310) scale(0.35,-0.35)"
15 | fill="#663da0">
16 | <path d="M278 744 c-39 -21 -48 -43 -48 -123 0 -64 3 -74 29 -103 26 -29 34
17 | -32 107 -37 l79 -6 3 -43 c5 -65 -6 -72 -114 -72 l-94 0 0 -40 0 -40 121 0
18 | 121 0 34 34 c32 32 34 38 34 100 0 112 -30 144 -147 154 -71 5 -86 17 -81 64
19 | l3 33 100 5 100 5 3 43 3 42 -113 0 c-80 -1 -121 -5 -140 -16z"/>
20 | <path d="M630 519 l0 -240 48 3 47 3 3 238 2 237 -50 0 -50 0 0 -241z"/>
21 | <path d="M820 708 c11 -29 35 -83 54 -120 l34 -67 -54 -103 c-67 -129 -68
22 | -138 -10 -138 l44 0 40 93 c62 140 83 142 140 11 19 -43 39 -85 44 -91 12 -15
23 | 98 -18 98 -3 0 15 -89 192 -107 212 -15 17 -15 19 0 36 14 15 107 205 107 218
24 | 0 10 -89 3 -97 -8 -5 -7 -25 -48 -43 -91 -56 -130 -76 -128 -130 9 l-35 89
25 | -53 3 -52 3 20 -53z"/>
26 | <path d="M1308 744 c-15 -8 -32 -23 -38 -34 -14 -26 -13 -355 1 -382 18 -33
27 | 70 -48 174 -48 l96 0 -3 43 -3 42 -80 3 c-43 2 -85 8 -92 14 -14 12 -19 253
28 | -5 275 5 7 40 13 92 15 l85 3 3 43 3 42 -103 0 c-71 -1 -111 -5 -130 -16z"/>
29 | <path d="M1654 754 c-15 -8 -32 -23 -38 -34 -14 -26 -13 -375 1 -402 18 -33
30 | 71 -48 170 -48 102 0 149 16 168 56 7 16 11 89 11 195 0 186 -7 215 -55 237
31 | -38 18 -223 15 -257 -4z m207 -234 l0 -155 -74 -3 c-53 -2 -77 1 -82 10 -10
32 | 15 -12 268 -3 293 5 13 20 15 83 13 l76 -3 0 -155z"/>
33 | <path d="M2098 754 c-15 -8 -32 -23 -38 -34 -14 -26 -13 -375 1 -402 18 -33
34 | 71 -48 170 -48 102 0 149 16 168 56 7 16 11 89 11 195 0 186 -7 215 -55 237
35 | -38 18 -223 15 -257 -4z m207 -234 l0 -155 -74 -3 c-53 -2 -77 1 -82 10 -10
36 | 15 -12 268 -3 293 5 13 20 15 83 13 l76 -3 0 -155z"/>
37 | <path d="M2510 525 l0 -235 88 -1 c48 -1 105 -2 127 -3 39 -1 40 0 43 36 l3
38 | 37 -83 3 -83 3 -3 198 -2 197 -45 0 -45 0 0 -235z"/>
39 | </g>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-row justify-end gap-2 md:gap-4",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/src/components/navbar/navbar.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useRouter } from "next/navigation";
 4 | import {
 5 |     Menubar,
 6 |     MenubarContent,
 7 |     MenubarItem,
 8 |     MenubarMenu,
 9 |     MenubarSeparator,
10 |     MenubarTrigger,
11 | } from "@/components/ui/menubar"
12 | import Image from "next/image";
13 | import { CiUser } from "react-icons/ci";
14 | import { Button } from "../ui/button";
15 | import logo from "../../assets/image/logo-sixcool.svg";
16 | import { useGlobalContext } from "@/context/global-context";
17 | import { Switch } from "../ui/switch";
18 | import { useEffect, useState } from "react";
19 | 
20 | const Navbar = () => {
21 |     const { user, setUser, net, setNet } = useGlobalContext();
22 |     const route = useRouter();
23 |     const [check, setCheck] = useState(net === "devnet");
24 |     useEffect(() => {
25 |         setCheck(net === "devnet")
26 |     }, [net])
27 | 
28 |     return (
29 |         <Menubar className="flex justify-between py-4 items-center bg-[#121212] border-0 shadow-xl shadow-[#382158] rounded-full px-4 md:px-10 mb-10 h-20">
30 |             <MenubarMenu>
31 |                 <Image src={logo} alt="logo" className="h-full w-fit cursor-pointer" onClick={() => route.push("/", {scroll:true})} />
32 |                 
33 |                 {
34 |                     user ?
35 |                     <div className="flex gap-4">
36 |                         <div className="items-center justify-center gap-4 hidden sm:flex">
37 |                             <span className="cursor-pointer" onClick={() => route.push("/tokens", {scroll:true})}>My Tokens</span>
38 |                             <span className="cursor-pointer" onClick={() => route.push("/create", {scroll:true})}>Create Token</span>
39 |                         </div>
40 |                         <div>
41 |                             <MenubarTrigger className="cursor-pointer relative p-0">
42 |                                 {
43 |                                     user.avatar ? <img src={user.avatar} alt="avatar" className="size-12 rounded-full border border-[#fff3]" /> :
44 |                                         <CiUser className="size-12 rounded-full border-black border-2" />
45 |                                 }
46 |                             </MenubarTrigger>
47 |                             <MenubarContent className=" absolute -right-14 bg-[#121212] shadow-md shadow-[#fff3] text-white">
48 |                                 <MenubarItem onClick={() => route.push('/profile', {scroll: true})}>
49 |                                     Profile
50 |                                 </MenubarItem>
51 |                                 <MenubarSeparator />
52 |                                 <MenubarItem onClick={() => { route.push('/change', {scroll: true}) }}>
53 |                                     Change Password
54 |                                 </MenubarItem>
55 |                                 <MenubarSeparator className="sm:hidden"/>
56 |                                 <MenubarItem className="sm:hidden" onClick={() => { route.push('/tokens', {scroll: true}) }}>
57 |                                     My Tokens
58 |                                 </MenubarItem>
59 |                                 <MenubarSeparator className="sm:hidden" />
60 |                                 <MenubarItem className="sm:hidden" onClick={() => { route.push('/create', {scroll: true}) }}>
61 |                                     Create Token
62 |                                 </MenubarItem>
63 |                                 <MenubarSeparator />
64 |                                 <MenubarItem asChild={true} onClick={e => e.preventDefault()}>
65 |                                     <div className="flex justify-between w-full">
66 |                                         Devnet
67 |                                     <Switch className="data-[state=checked]:bg-[#9434d3] data-[state=unchecked]:bg-[#fff5]" checked={check} onClick={() => {
68 |                                         if (check) {
69 |                                             setCheck(false);
70 |                                             setNet("mainnet");
71 |                                         } else {
72 |                                             setCheck(true);
73 |                                             setNet("devnet");
74 |                                         }
75 |                                     }} /></div>
76 |                                 </MenubarItem>
77 |                                 <MenubarSeparator />
78 |                                 <MenubarItem onClick={() => { localStorage.removeItem('token'); setUser(null); route.push('/') }}>
79 |                                     Sign Out
80 |                                 </MenubarItem>
81 |                             </MenubarContent>
82 |                         </div>
83 |                     </div>
84 |                     :
85 |                     <div className="flex gap-4">
86 |                         <Button onClick={() => { route.push('/auth/signin') }} className="rounded-full bg-transparent border hover:bg-white hover:text-black">Sign In</Button>
87 |                         <Button onClick={() => { route.push('/auth/register') }} className="rounded-full bg-transparent border hover:bg-white hover:text-black hidden md:block">Sign Up</Button>
88 |                     </div>
89 |                 }
90 |             </MenubarMenu>
91 |         </Menubar>
92 |     )
93 | }
94 | export default Navbar;


--------------------------------------------------------------------------------
/src/utils/api.ts:
--------------------------------------------------------------------------------
  1 | import axios from "axios"
  2 | 
  3 | export const register = async (name: string, email: string, password: string): Promise<boolean> => {
  4 |     const res = await axios.post(`/api/auth/register`, {
  5 |         name,
  6 |         email,
  7 |         password
  8 |     })
  9 |     return res.data.ok;
 10 | }
 11 | 
 12 | export const login = async (email: string, password: string): Promise<{ ok: boolean, token: string, name: string, avatar: string, message: string }> => {
 13 |     const res = await axios.post(`/api/auth/login`, {
 14 |         email,
 15 |         password
 16 |     })
 17 |     return res.data;
 18 | }
 19 | 
 20 | export const changePassword = async (password: string, oldPassword: string): Promise<boolean> => {
 21 |     try {
 22 |         const res = await axios.post(`/api/auth/change-password`, {
 23 |             password,
 24 |             oldPassword
 25 |         }, {
 26 |             headers: {
 27 |                 "Authorization": `Bearer ${localStorage.getItem("token")}`
 28 |             }
 29 |         })
 30 |         if (res.data.ok) {
 31 |             localStorage.setItem("token", res.data.token);
 32 |             return true;
 33 |         }
 34 |         return false;
 35 |     } catch (e) {
 36 |         location.href = '/auth/signin';
 37 |         return false;
 38 |     }
 39 | }
 40 | 
 41 | export const updateUser = async (name: string, avatar: string): Promise<boolean> => {
 42 |     try {
 43 |         const res = await axios.put(`/api/users`, {
 44 |             name,
 45 |             avatar
 46 |         }, {
 47 |             headers: {
 48 |                 "Authorization": `Bearer ${localStorage.getItem("token")}`
 49 |             }
 50 |         })
 51 |         if (res.data.ok) {
 52 |             localStorage.setItem("token", res.data.token);
 53 |             return true;
 54 |         }
 55 |         return false;
 56 |     } catch (e) {
 57 |         location.href = '/auth/signin';
 58 |         return false;
 59 |     }
 60 | }
 61 | 
 62 | export const validate_token = async (): Promise<{ email: string, name: string, avatar: string } | null> => {
 63 |     try {
 64 |         const token = localStorage.getItem("token");
 65 |         const res = await axios.post('/api/auth/validate-token', {}, {
 66 |             headers: {
 67 |                 "Authorization": `Bearer ${token}`
 68 |             }
 69 |         })
 70 |         if (res.data.ok) {
 71 |             localStorage.setItem("token", res.data.token);
 72 |             return res.data;
 73 |         }
 74 |         return null
 75 |     } catch (error) {
 76 |         location.href = '/auth/signin';
 77 |         return null;
 78 |     }
 79 | }
 80 | 
 81 | export const uploadFile = async (file: File, filename: string, type: string = "image/png", folder: string = "avatar"): Promise<string> => {
 82 |     const formData = new FormData();
 83 |     formData.append("filename", filename);
 84 |     formData.append("type", type);
 85 |     formData.append("path", folder);
 86 |     formData.append("file", file);
 87 |     const res = await axios.post(`/api/file`, formData, {
 88 |         headers: {
 89 |             "Content-Type": "multipart/form-data"
 90 |         }
 91 |     })
 92 |     return res.data.url;
 93 | }
 94 | 
 95 | export const removeFile = async (link: string): Promise<boolean> => {
 96 |     const res = await axios.delete(`/api/file?publicUrl=${link}`);
 97 |     return res.data.ok;
 98 | }
 99 | 
100 | export const getTokenList = async (page: number = 1, size: number = 10, email?: string, devnet: boolean = false): Promise<any[] | null> => {
101 |     const res = await axios.get(`/api/tokens?page=${page}&size=${size}${email ? "&user=" + email : ""}${devnet ? "&devnet" : ""}`)
102 |     return res.data;
103 | }
104 | 
105 | export const getTokenTotalNumber = async (email?: string, devnet: boolean = false): Promise<number> => {
106 |     const res = await axios.get(`/api/tokens/total-number${email ? "?user=" + email : ""}${devnet ? email ? "&devnet" : "?devnet" : ""}`)
107 |     return res.data;
108 | }
109 | 
110 | export const getMyTokens = async (page: number = 1, size: number = 10, devnet: boolean = false): Promise<any[] | null> => {
111 |     try {
112 |         const res = await axios.get(`/api/tokens/my-tokens?page=${page}&size=${size}${devnet ? "&devnet" : ""}`, {
113 |             headers: {
114 |                 "Authorization": "Bearer " + localStorage.getItem("token")
115 |             }
116 |         })
117 |         return res.data;
118 |     } catch (error) {
119 |         location.href = "/auth/signin";
120 |         return null;
121 |     }
122 | }
123 | 
124 | export const getMyTokensTotalNumber = async (devnet: boolean = false): Promise<any[] | null> => {
125 |     try {
126 |         const res = await axios.get(`/api/tokens/my-tokens/total-number${devnet ? "?devnet" : ""}`, {
127 |             headers: {
128 |                 "Authorization": "Bearer " + localStorage.getItem("token")
129 |             }
130 |         })
131 |         return res.data;
132 |     } catch (error) {
133 |         location.href = "/auth/signin";
134 |         return null;
135 |     }
136 | }
137 | 
138 | export const saveToken = async (address: string, name: string, symbol: string, description: string, url: string, supply: number, decimals: number, devnet: boolean = false): Promise<boolean> => {
139 |     const res = await axios.post(`/api/tokens${devnet ? "?devnet" : ""}`, {
140 |         address,
141 |         name,
142 |         symbol,
143 |         description,
144 |         url,
145 |         supply,
146 |         decimals
147 |     }, {
148 |         headers: {
149 |             "Authorization": "Bearer " + localStorage.getItem("token")
150 |         }
151 |     });
152 |     return res.data.ok;
153 | }


--------------------------------------------------------------------------------
/src/components/table/Table.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
  3 | import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
  4 | import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
  5 | import { Dispatch, ReactNode, SetStateAction, useEffect, useState } from "react";
  6 | import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
  7 | 
  8 | type HeaderItem = {
  9 |     key: string,
 10 |     value: ReactNode,
 11 |     // parentProps: any[]
 12 | }
 13 | type BodyRow = {
 14 |     [key: string]: {
 15 |         value: ReactNode,
 16 |         // parentProps: any[]
 17 |     }
 18 | }
 19 | 
 20 | const MyTable = ({
 21 |     page, 
 22 |     setPage, 
 23 |     size, 
 24 |     setSize, 
 25 |     header,
 26 |     body, 
 27 |     total
 28 |   }:{
 29 |     page: number,
 30 |     setPage: Dispatch<SetStateAction<number>>,
 31 |     size: number,
 32 |     setSize: Dispatch<SetStateAction<number>>,
 33 |     header: HeaderItem[],
 34 |     body: BodyRow[],
 35 |     total: number
 36 |   }) => {
 37 |     const [maxPage, setMaxPage] = useState(0);
 38 |     const router = useRouter();
 39 |     const searchParams = useSearchParams();
 40 |     const pathname = usePathname();
 41 | 
 42 |     const onPrev = () => {
 43 |       if (page > 1) {
 44 |         const params = new URLSearchParams(searchParams);
 45 |         params.set("page", `${Number(params.get("page") || 1) - 1}`);
 46 |         router.replace(`${pathname}?${params.toString()}`)
 47 |       }
 48 |     }
 49 |     const onNext = () => {
 50 |         if (page < maxPage) {
 51 |           const params = new URLSearchParams(searchParams);
 52 |           params.set("page", `${Number(params.get("page") || 1) + 1}`);
 53 |           router.replace(`${pathname}?${params.toString()}`)
 54 |         }
 55 |     }
 56 |     const goTo = (num: number) => {
 57 |       const params = new URLSearchParams(searchParams);
 58 |       params.set("page", `${num}`);
 59 |       router.replace(`${pathname}?${params.toString()}`)
 60 |     }
 61 | 
 62 |     const onSize = (size: string) => {
 63 |       const params = new URLSearchParams(searchParams);
 64 |       params.set('size', `${size}`);
 65 |       router.replace(`${pathname}?${params.toString()}`)
 66 |     }
 67 |     
 68 |     useEffect(() => {
 69 |         setMaxPage(Math.ceil(total/size));
 70 |     }, [total, size])
 71 |     return (
 72 |         <div className="flex flex-col gap-4">
 73 |         <Table>
 74 |           <TableHeader>
 75 |             <TableRow className="border-[#fff6] border-double !border-b-[3px]">
 76 |                 {header.map((item, index) => (<TableHead key={index} className="text-center">{item.value}</TableHead>))}
 77 |             </TableRow>
 78 |           </TableHeader>
 79 |           <TableBody>
 80 |             {body.map((row, index) => (
 81 |               <TableRow key={index} className="hover:bg-[#fff2] border-[#fff3]">
 82 |                 {header.map((cell, index) => (<TableCell key={index} className="mx-auto text-center">{row[cell.key].value}</TableCell>))}
 83 |               </TableRow>
 84 |             ))}
 85 |           </TableBody>
 86 |         </Table>
 87 |         <div className="flex">
 88 |           <Pagination>
 89 |             <PaginationContent>
 90 |               <PaginationItem>
 91 |                 <PaginationPrevious onClick={onPrev} />
 92 |               </PaginationItem>
 93 | 
 94 |               {page > 2 && (
 95 |                 <PaginationItem>
 96 |                   <PaginationLink onClick={() => goTo(1)}>1</PaginationLink>
 97 |                 </PaginationItem>
 98 |               )}
 99 |               {page > 3 && (
100 |                 <PaginationItem>
101 |                   <PaginationEllipsis />
102 |                 </PaginationItem>
103 |               )}
104 |               {page > 1 && (
105 |                 <PaginationItem>
106 |                   <PaginationLink onClick={() => goTo(page - 1)}>{page - 1}</PaginationLink>
107 |                 </PaginationItem>
108 |               )}
109 |               <PaginationItem>
110 |                 <PaginationLink className="bg-[#fff4]" onClick={() => goTo(page)}>{page}</PaginationLink>
111 |               </PaginationItem>
112 |               {page < maxPage && (
113 |                 <PaginationItem>
114 |                   <PaginationLink onClick={() => goTo(page + 1)}>{page + 1}</PaginationLink>
115 |                 </PaginationItem>
116 |               )}
117 |               {page < maxPage - 2 && (
118 |                 <PaginationItem>
119 |                   <PaginationEllipsis />
120 |                 </PaginationItem>
121 |               )}
122 |               {page < maxPage - 1 && (
123 |                 <PaginationItem>
124 |                   <PaginationLink onClick={() => goTo(maxPage)}>{maxPage}</PaginationLink>
125 |                 </PaginationItem>
126 |               )}
127 | 
128 |               <PaginationItem>
129 |                 <PaginationNext onClick={onNext}/>
130 |               </PaginationItem>
131 |             </PaginationContent>
132 |           </Pagination>
133 |           <Select value={`${size}`} onValueChange={onSize}>
134 |             <SelectTrigger className="w-[96px]">
135 |               <SelectValue placeholder="size" />
136 |             </SelectTrigger>
137 |             <SelectContent className="w-[74px]">
138 |               <SelectItem value="5">5</SelectItem>
139 |               <SelectItem value="10">10</SelectItem>
140 |               <SelectItem value="20">20</SelectItem>
141 |               <SelectItem value="100">100</SelectItem>
142 |             </SelectContent>
143 |           </Select>
144 |         </div>
145 |         </div>
146 |     )
147 | }
148 | 
149 | export default MyTable;


--------------------------------------------------------------------------------
/src/app/profile/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import { Button } from "@/components/ui/button"
  3 | import { useEffect, useRef, useState } from "react"
  4 | import { toast } from "react-toastify";
  5 | import { Input } from "@/components/ui/input"
  6 | import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
  7 | import { CropperRef, Cropper } from 'react-advanced-cropper';
  8 | import 'react-advanced-cropper/dist/style.css'
  9 | import { removeFile, updateUser, uploadFile } from "@/utils/api"
 10 | import { useGlobalContext } from "@/context/global-context";
 11 | import { useRouter } from "next/navigation";
 12 | const Profile = () => {
 13 |     const avatarRef = useRef<HTMLInputElement>(null);
 14 |     const router = useRouter();
 15 |     const { user, setUser } = useGlobalContext();
 16 |     const [imgFile, setImgFile] = useState<File>();
 17 |     const [fileInfo, setFileInfo] = useState<{ name: string, type: string }>();
 18 |     const cropperRef = useRef<CropperRef>(null);
 19 |     const [image, setImage] = useState<string>("");
 20 |     const [preview, setPreview] = useState<string>("");
 21 |     const [name, setName] = useState<string>("");
 22 |     const [open, setOpen] = useState(false);
 23 | 
 24 |     useEffect(() => {
 25 |         setName(user?user.name:"")
 26 |         setPreview(user?user.avatar:"")
 27 |     }, [user])
 28 | 
 29 |     const onChooseImage = () => {
 30 |         if (avatarRef.current?.files![0]) {
 31 |             const file = avatarRef.current.files[0];
 32 |             setOpen(true);
 33 |             setFileInfo(file)
 34 |             const url = URL.createObjectURL(file)
 35 |             setImage(url);
 36 |         }
 37 |     }
 38 |     const onCrop = () => {
 39 |         setOpen(false);
 40 |         if (cropperRef.current && avatarRef.current) {
 41 |             avatarRef.current.value = '';
 42 |             const canvas = cropperRef.current.getCanvas({ width: 128, height: 128 });
 43 |             if (canvas) {
 44 |                 canvas.toBlob(blob => {
 45 |                     blob && setImgFile(new File([blob], fileInfo?.name!, { type: fileInfo?.type }));
 46 |                 }, fileInfo?.type);
 47 |                 setPreview(canvas.toDataURL());
 48 |             }
 49 |         }
 50 |     }
 51 |     const onCancel = () => {
 52 |         setOpen(false);
 53 |         setImgFile(avatarRef.current?.files![0]);
 54 |         setPreview(image);
 55 |     }
 56 | 
 57 |     const SaveProfile = async () => {
 58 |         if (!user) {
 59 |             router.push("/auth/signin?redirect=/profile", {scroll: true});
 60 |         }
 61 |         if (!name) {
 62 |             toast.warn("Input the your name!");
 63 |             return;
 64 |         }
 65 |         let avatar = null;
 66 |         if (imgFile) {
 67 |             avatar = await uploadFile(imgFile, fileInfo?.name!, fileInfo?.type, 'avatar');
 68 |             removeFile(user!.avatar);
 69 |         }
 70 | 
 71 |         try {
 72 |             const res = await updateUser(name, avatar || preview);
 73 |             if (res) {
 74 |                 setUser({email: user? user.email: "", name, avatar: avatar || preview})
 75 |                 toast.success("Profile updated successfully!");
 76 |             }
 77 |         }
 78 |         catch (error) {
 79 |             console.error(error);
 80 |             toast.error("Failed to update the profile!");
 81 |             return;
 82 |         }
 83 |     }
 84 | 
 85 |     return (
 86 |         <div className="flex flex-col gap-8 px-8 pt-16 mx-auto">
 87 |             <div className="w-full flex flex-col gap-8 justify-center items-center">
 88 |                 <div className="w-full flex justify-center relative mb-60">
 89 |                     <Input type="file" ref={avatarRef} accept="image/*" onChange={onChooseImage} className="cursor-pointer mt-4 border border-gray h-56 w-56 rounded-full object-contain absolute z-10 opacity-0" />
 90 |                     <div className="mt-4 border border-[#afafaf5c] bg-[#090909] h-56 aspect-[1/1] rounded-full absolute"></div>
 91 |                     {preview && <img
 92 |                         src={preview}
 93 |                         className="mt-4 border h-56 aspect-[1/1] rounded-full object-contain absolute"
 94 |                     />}
 95 |                 </div>
 96 |                 <div className="w-full flex flex-col items-center gap-4">
 97 |                     <div className="w-56">
 98 |                         <Input placeholder="Your name" value={name} onChange={e => setName(e.target.value)} className="bg-[#090909]"/>
 99 |                     </div>
100 |                 </div>
101 |             </div>
102 |             <div className="w-full flex justify-center">
103 |                 <Button onClick={SaveProfile} className="w-56 rounded-full bg-gradient-to-b to-[#301060] from-[#9434d3] hover:to-[#4f2b84] hover:from-[#6e20a3]">Save Profile</Button>
104 |             </div>
105 |             <Dialog open={open} modal={true} >
106 |                 <DialogContent className="bg-[#121212] border-[#fff4]">
107 |                     <DialogHeader>
108 |                         <DialogTitle>Crop Image</DialogTitle>
109 |                         <DialogDescription></DialogDescription>
110 |                     </DialogHeader>
111 |                     <Cropper
112 |                         ref={cropperRef}
113 |                         src={image}
114 |                         stencilProps={{
115 |                             aspectRatio: 1
116 |                         }}
117 |                     />
118 |                     <DialogFooter>
119 |                         <Button className="bg-gradient-to-b to-[#301060] from-[#9434d3] hover:to-[#4f2b84] hover:from-[#6e20a3]" onClick={onCrop}>Crop</Button>
120 |                         <Button className="bg-gradient-to-b to-[#301060] from-[#9434d3] hover:to-[#4f2b84] hover:from-[#6e20a3]" onClick={onCancel}>Uncrop</Button>
121 |                     </DialogFooter>
122 |                 </DialogContent>
123 |             </Dialog>
124 |         </div>)
125 | 
126 | }
127 | export default Profile;


--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Select = SelectPrimitive.Root
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group
 12 | 
 13 | const SelectValue = SelectPrimitive.Value
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md hover:bg-[#fff9] hover:text-black border border-input px-3 py-2 text-sm data-[placeholder]:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ))
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ))
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ))
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-96 overflow-hidden rounded-md border bg-[#121212] text-white shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 79 |         position === "popper" &&
 80 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |             "h-[var(--radix-select-trigger-height)] w-full"
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ))
100 | SelectContent.displayName = SelectPrimitive.Content.displayName
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ))
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-[#fff3] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 | 
132 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
133 |   </SelectPrimitive.Item>
134 | ))
135 | SelectItem.displayName = SelectPrimitive.Item.displayName
136 | 
137 | const SelectSeparator = React.forwardRef<
138 |   React.ElementRef<typeof SelectPrimitive.Separator>,
139 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
140 | >(({ className, ...props }, ref) => (
141 |   <SelectPrimitive.Separator
142 |     ref={ref}
143 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
144 |     {...props}
145 |   />
146 | ))
147 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
148 | 
149 | export {
150 |   Select,
151 |   SelectGroup,
152 |   SelectValue,
153 |   SelectTrigger,
154 |   SelectContent,
155 |   SelectLabel,
156 |   SelectItem,
157 |   SelectSeparator,
158 |   SelectScrollUpButton,
159 |   SelectScrollDownButton,
160 | }
161 | 


--------------------------------------------------------------------------------
/src/app/auth/signin/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import type React from "react"
  4 | 
  5 | import { useEffect, useState } from "react"
  6 | import Link from "next/link"
  7 | import { useRouter } from "next/navigation"
  8 | import { Eye, EyeOff, Loader2 } from "lucide-react"
  9 | import { toast } from "react-toastify"
 10 | import { Button } from "@/components/ui/button"
 11 | import { Input } from "@/components/ui/input"
 12 | import { Label } from "@/components/ui/label"
 13 | import { Checkbox } from "@/components/ui/checkbox"
 14 | import { Card, CardContent, CardFooter } from "@/components/ui/card"
 15 | import { useGlobalContext } from "@/context/global-context"
 16 | import { login } from "@/utils/api"
 17 | 
 18 | 
 19 | const SignIn = ({ searchParams }: { searchParams: { [key: string]: string } }) => {
 20 |     const redirect = searchParams.redirect || '/tokens';
 21 |     const router = useRouter()
 22 |     const { user, setUser } = useGlobalContext();
 23 |     const [isLoading, setIsLoading] = useState(false)
 24 |     const [showPassword, setShowPassword] = useState(false)
 25 |     const [formData, setFormData] = useState({
 26 |         email: "",
 27 |         password: "",
 28 |         rememberMe: false,
 29 |     })
 30 |     const [errors, setErrors] = useState({
 31 |         email: "",
 32 |         password: "",
 33 |     })
 34 | 
 35 |     const validateForm = () => {
 36 |         const newErrors = {
 37 |             email: "",
 38 |             password: "",
 39 |         }
 40 |         let isValid = true
 41 | 
 42 |         if (!formData.email) {
 43 |             newErrors.email = "Email is required"
 44 |             isValid = false
 45 |         } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
 46 |             newErrors.email = "Email is invalid"
 47 |             isValid = false
 48 |         }
 49 | 
 50 |         if (!formData.password) {
 51 |             newErrors.password = "Password is required"
 52 |             isValid = false
 53 |         }
 54 | 
 55 |         setErrors(newErrors)
 56 |         return isValid
 57 |     }
 58 | 
 59 |     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 60 |         const { name, value } = e.target
 61 |         setFormData((prev) => ({
 62 |             ...prev,
 63 |             [name]: value,
 64 |         }))
 65 |     }
 66 | 
 67 |     const handleCheckboxChange = (checked: boolean) => {
 68 |         setFormData((prev) => ({
 69 |             ...prev,
 70 |             rememberMe: checked,
 71 |         }))
 72 |     }
 73 | 
 74 |     const handleSubmit = async (e: React.FormEvent) => {
 75 |         e.preventDefault()
 76 | 
 77 |         if (!validateForm()) return
 78 | 
 79 |         setIsLoading(true)
 80 | 
 81 |         // Simulate API call
 82 |         try {
 83 |             const data = await login(formData.email, formData.password);
 84 | 
 85 |             if (data.ok) {
 86 |                 localStorage.setItem('token', data.token);
 87 |                 setUser({
 88 |                     ...data,
 89 |                     email: formData.email
 90 |                 });
 91 |                 toast.success(data.message);
 92 |                 router.push(redirect, { scroll: true });
 93 |             }
 94 |             else { toast.warn(data.message) }
 95 |         } catch (error) {
 96 |             toast.error("Failed to sign in. Please try again.")
 97 |         } finally {
 98 |             setIsLoading(false)
 99 |         }
100 |     }
101 | 
102 |     useEffect(() => {
103 |         if (user) {
104 |             router.push(redirect, { scroll: true });
105 |         }
106 |     }, [user])
107 | 
108 |     return (
109 |         <div className="flex w-full justify-center pt-16 items-center h-full">
110 |             <Card className="bg-[#121212] text-white border-0 py-6">
111 |                 <form onSubmit={handleSubmit}>
112 |                     <CardContent className="space-y-4 pt-6">
113 |                         <div className="space-y-2">
114 |                             <Label htmlFor="email">Email</Label>
115 |                             <Input
116 |                                 id="email"
117 |                                 name="email"
118 |                                 type="email"
119 |                                 placeholder="name@example.com"
120 |                                 value={formData.email}
121 |                                 onChange={handleChange}
122 |                                 className="bg-[#090909]"
123 |                                 disabled={isLoading}
124 |                                 aria-invalid={!!errors.email}
125 |                             />
126 |                             {errors.email && <p className="text-sm text-destructive">{errors.email}</p>}
127 |                         </div>
128 | 
129 |                         <div className="space-y-2">
130 |                             <div className="flex items-center justify-between">
131 |                                 <Label htmlFor="password">Password</Label>
132 |                             </div>
133 |                             <div className="relative">
134 |                                 <Input
135 |                                     id="password"
136 |                                     name="password"
137 |                                     type={showPassword ? "text" : "password"}
138 |                                     placeholder="Password"
139 |                                     value={formData.password}
140 |                                     onChange={handleChange}
141 |                                     disabled={isLoading}
142 |                                     className="bg-[#090909]"
143 |                                     aria-invalid={!!errors.password}
144 |                                 />
145 |                                 <Button
146 |                                     type="button"
147 |                                     variant="ghost"
148 |                                     size="icon"
149 |                                     className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
150 |                                     onClick={() => setShowPassword(!showPassword)}
151 |                                     disabled={isLoading}
152 |                                 >
153 |                                     {showPassword ? (
154 |                                         <EyeOff className="h-4 w-4 text-muted-foreground" />
155 |                                     ) : (
156 |                                         <Eye className="h-4 w-4 text-muted-foreground" />
157 |                                     )}
158 |                                     <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
159 |                                 </Button>
160 |                             </div>
161 |                             {errors.password && <p className="text-sm text-destructive">{errors.password}</p>}
162 |                         </div>
163 | 
164 |                     </CardContent>
165 | 
166 |                     <CardFooter className="flex flex-col space-y-4">
167 |                         <Button type="submit" className="hover:to-[#ba4bff] hover:from-[#ba4bff] rounded-full w-full bg-gradient-to-r to-[#351166] from-[#b55ced]" disabled={isLoading}>
168 |                             {isLoading ? (
169 |                                 <>
170 |                                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
171 |                                     Signing in...
172 |                                 </>
173 |                             ) : (
174 |                                 "Sign In"
175 |                             )}
176 |                         </Button>
177 | 
178 |                         <div className="text-center text-sm">
179 |                             Don't have an account?{" "}
180 |                             <Link href="/auth/register" className="font-bold text-[16px] hover:underline">
181 |                                 Sign up
182 |                             </Link>
183 |                         </div>
184 |                     </CardFooter>
185 |                 </form>
186 |             </Card>
187 |         </div>
188 |     )
189 | }
190 | export default SignIn;
191 | 
192 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as MenubarPrimitive from "@radix-ui/react-menubar"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function MenubarMenu({
 10 |   ...props
 11 | }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
 12 |   return <MenubarPrimitive.Menu {...props} />
 13 | }
 14 | 
 15 | function MenubarGroup({
 16 |   ...props
 17 | }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
 18 |   return <MenubarPrimitive.Group {...props} />
 19 | }
 20 | 
 21 | function MenubarPortal({
 22 |   ...props
 23 | }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
 24 |   return <MenubarPrimitive.Portal {...props} />
 25 | }
 26 | 
 27 | function MenubarRadioGroup({
 28 |   ...props
 29 | }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
 30 |   return <MenubarPrimitive.RadioGroup {...props} />
 31 | }
 32 | 
 33 | function MenubarSub({
 34 |   ...props
 35 | }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
 36 |   return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
 37 | }
 38 | 
 39 | const Menubar = React.forwardRef<
 40 |   React.ElementRef<typeof MenubarPrimitive.Root>,
 41 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
 42 | >(({ className, ...props }, ref) => (
 43 |   <MenubarPrimitive.Root
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ))
 52 | Menubar.displayName = MenubarPrimitive.Root.displayName
 53 | 
 54 | const MenubarTrigger = React.forwardRef<
 55 |   React.ElementRef<typeof MenubarPrimitive.Trigger>,
 56 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
 57 | >(({ className, ...props }, ref) => (
 58 |   <MenubarPrimitive.Trigger
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
 68 | 
 69 | const MenubarSubTrigger = React.forwardRef<
 70 |   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
 71 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
 72 |     inset?: boolean
 73 |   }
 74 | >(({ className, inset, children, ...props }, ref) => (
 75 |   <MenubarPrimitive.SubTrigger
 76 |     ref={ref}
 77 |     className={cn(
 78 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 79 |       inset && "pl-8",
 80 |       className
 81 |     )}
 82 |     {...props}
 83 |   >
 84 |     {children}
 85 |     <ChevronRight className="ml-auto h-4 w-4" />
 86 |   </MenubarPrimitive.SubTrigger>
 87 | ))
 88 | MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 89 | 
 90 | const MenubarSubContent = React.forwardRef<
 91 |   React.ElementRef<typeof MenubarPrimitive.SubContent>,
 92 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
 93 | >(({ className, ...props }, ref) => (
 94 |   <MenubarPrimitive.SubContent
 95 |     ref={ref}
 96 |     className={cn(
 97 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 98 |       className
 99 |     )}
100 |     {...props}
101 |   />
102 | ))
103 | MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
104 | 
105 | const MenubarContent = React.forwardRef<
106 |   React.ElementRef<typeof MenubarPrimitive.Content>,
107 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
108 | >(
109 |   (
110 |     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
111 |     ref
112 |   ) => (
113 |     <MenubarPrimitive.Portal>
114 |       <MenubarPrimitive.Content
115 |         ref={ref}
116 |         align={align}
117 |         alignOffset={alignOffset}
118 |         sideOffset={sideOffset}
119 |         className={cn(
120 |           "z-50 min-w-[12rem] overflow-hidden rounded-md border border-[#fff3] bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
121 |           className
122 |         )}
123 |         {...props}
124 |       />
125 |     </MenubarPrimitive.Portal>
126 |   )
127 | )
128 | MenubarContent.displayName = MenubarPrimitive.Content.displayName
129 | 
130 | const MenubarItem = React.forwardRef<
131 |   React.ElementRef<typeof MenubarPrimitive.Item>,
132 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
133 |     inset?: boolean
134 |   }
135 | >(({ className, inset, ...props }, ref) => (
136 |   <MenubarPrimitive.Item
137 |     ref={ref}
138 |     className={cn(
139 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-[#fff2] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
140 |       inset && "pl-8",
141 |       className
142 |     )}
143 |     {...props}
144 |   />
145 | ))
146 | MenubarItem.displayName = MenubarPrimitive.Item.displayName
147 | 
148 | const MenubarCheckboxItem = React.forwardRef<
149 |   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
150 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
151 | >(({ className, children, checked, ...props }, ref) => (
152 |   <MenubarPrimitive.CheckboxItem
153 |     ref={ref}
154 |     className={cn(
155 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
156 |       className
157 |     )}
158 |     checked={checked}
159 |     {...props}
160 |   >
161 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
162 |       <MenubarPrimitive.ItemIndicator>
163 |         <Check className="h-4 w-4" />
164 |       </MenubarPrimitive.ItemIndicator>
165 |     </span>
166 |     {children}
167 |   </MenubarPrimitive.CheckboxItem>
168 | ))
169 | MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
170 | 
171 | const MenubarRadioItem = React.forwardRef<
172 |   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
173 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
174 | >(({ className, children, ...props }, ref) => (
175 |   <MenubarPrimitive.RadioItem
176 |     ref={ref}
177 |     className={cn(
178 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
179 |       className
180 |     )}
181 |     {...props}
182 |   >
183 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
184 |       <MenubarPrimitive.ItemIndicator>
185 |         <Circle className="h-2 w-2 fill-current" />
186 |       </MenubarPrimitive.ItemIndicator>
187 |     </span>
188 |     {children}
189 |   </MenubarPrimitive.RadioItem>
190 | ))
191 | MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
192 | 
193 | const MenubarLabel = React.forwardRef<
194 |   React.ElementRef<typeof MenubarPrimitive.Label>,
195 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
196 |     inset?: boolean
197 |   }
198 | >(({ className, inset, ...props }, ref) => (
199 |   <MenubarPrimitive.Label
200 |     ref={ref}
201 |     className={cn(
202 |       "px-2 py-1.5 text-sm font-semibold",
203 |       inset && "pl-8",
204 |       className
205 |     )}
206 |     {...props}
207 |   />
208 | ))
209 | MenubarLabel.displayName = MenubarPrimitive.Label.displayName
210 | 
211 | const MenubarSeparator = React.forwardRef<
212 |   React.ElementRef<typeof MenubarPrimitive.Separator>,
213 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
214 | >(({ className, ...props }, ref) => (
215 |   <MenubarPrimitive.Separator
216 |     ref={ref}
217 |     className={cn("-mx-1 my-1 h-px bg-[#fff3]", className)}
218 |     {...props}
219 |   />
220 | ))
221 | MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
222 | 
223 | const MenubarShortcut = ({
224 |   className,
225 |   ...props
226 | }: React.HTMLAttributes<HTMLSpanElement>) => {
227 |   return (
228 |     <span
229 |       className={cn(
230 |         "ml-auto text-xs tracking-widest text-muted-foreground",
231 |         className
232 |       )}
233 |       {...props}
234 |     />
235 |   )
236 | }
237 | MenubarShortcut.displayname = "MenubarShortcut"
238 | 
239 | export {
240 |   Menubar,
241 |   MenubarMenu,
242 |   MenubarTrigger,
243 |   MenubarContent,
244 |   MenubarItem,
245 |   MenubarSeparator,
246 |   MenubarLabel,
247 |   MenubarCheckboxItem,
248 |   MenubarRadioGroup,
249 |   MenubarRadioItem,
250 |   MenubarPortal,
251 |   MenubarSubContent,
252 |   MenubarSubTrigger,
253 |   MenubarGroup,
254 |   MenubarSub,
255 |   MenubarShortcut,
256 | }
257 | 


--------------------------------------------------------------------------------
/src/app/auth/register/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import type React from "react"
  4 | 
  5 | import { useState } from "react"
  6 | import Link from "next/link"
  7 | import { useRouter } from "next/navigation"
  8 | import { Eye, EyeOff, Loader2 } from "lucide-react"
  9 | import { toast } from "react-toastify";
 10 | import { Button } from "@/components/ui/button"
 11 | import { Input } from "@/components/ui/input"
 12 | import { Label } from "@/components/ui/label"
 13 | import { Checkbox } from "@/components/ui/checkbox"
 14 | import { Card, CardContent, CardFooter } from "@/components/ui/card"
 15 | import { register } from "@/utils/api"
 16 | const Register = () => {
 17 |     const router = useRouter()
 18 |     const [isLoading, setIsLoading] = useState(false)
 19 |     const [showPassword, setShowPassword] = useState(false)
 20 |     const [formData, setFormData] = useState({
 21 |         name: "",
 22 |         email: "",
 23 |         password: "",
 24 |         agreeToTerms: false,
 25 |     })
 26 |     const [errors, setErrors] = useState({
 27 |         name: "",
 28 |         email: "",
 29 |         password: "",
 30 |         avatar: "",
 31 |         agreeToTerms: "",
 32 |     })
 33 | 
 34 |     const validateForm = () => {
 35 |         const newErrors = {
 36 |             name: "",
 37 |             email: "",
 38 |             password: "",
 39 |             avatar: "",
 40 |             agreeToTerms: "",
 41 |         }
 42 |         let isValid = true
 43 | 
 44 |         if (!formData.name.trim()) {
 45 |             newErrors.name = "Name is required"
 46 |             isValid = false
 47 |         }
 48 | 
 49 |         if (!formData.email) {
 50 |             newErrors.email = "Email is required"
 51 |             isValid = false
 52 |         } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
 53 |             newErrors.email = "Email is invalid"
 54 |             isValid = false
 55 |         }
 56 | 
 57 |         if (!formData.password) {
 58 |             newErrors.password = "Password is required"
 59 |             isValid = false
 60 |         } else if (formData.password.length < 8) {
 61 |             newErrors.password = "Password must be at least 8 characters"
 62 |             isValid = false
 63 |         }
 64 | 
 65 |         if (!formData.agreeToTerms) {
 66 |             newErrors.agreeToTerms = "You must agree to the terms and conditions"
 67 |             isValid = false
 68 |         }
 69 | 
 70 |         setErrors(newErrors)
 71 |         return isValid
 72 |     }
 73 | 
 74 |     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 75 |         const { name, value } = e.target
 76 |         setFormData((prev) => ({
 77 |             ...prev,
 78 |             [name]: value,
 79 |         }))
 80 |     }
 81 | 
 82 |     const handleCheckboxChange = (checked: boolean) => {
 83 |         setFormData((prev) => ({
 84 |             ...prev,
 85 |             agreeToTerms: checked,
 86 |         }))
 87 |     }
 88 | 
 89 |     const handleSubmit = async (e: React.FormEvent) => {
 90 |         e.preventDefault()
 91 | 
 92 |         if (!validateForm()) return
 93 | 
 94 |         setIsLoading(true)
 95 | 
 96 |         // Simulate API call
 97 |         try {
 98 |             const res = await register(formData.name, formData.email, formData.password);
 99 | 
100 |             if (res) {
101 |                 toast.success("You have successfully created an account.")
102 |             } else {
103 |                 toast.warn("You already have an account.")
104 |             }
105 | 
106 |             router.push("/auth/signin")
107 |         } catch (error) {
108 |             toast.error("Failed to create account. Please try again.")
109 |         } finally {
110 |             setIsLoading(false)
111 |         }
112 |     }
113 | 
114 |     return (
115 |         <div className="flex w-full justify-center pt-16">
116 |             <Card className="bg-[#121212] text-white border-0 py-6">
117 |                 <form onSubmit={handleSubmit}>
118 |                     <CardContent className="space-y-4 pt-6">
119 |                         <div className="space-y-2">
120 |                             <Label htmlFor="name">Full Name</Label>
121 |                             <Input
122 |                                 id="name"
123 |                                 name="name"
124 |                                 placeholder="John Doe"
125 |                                 className="bg-[#090909]"
126 |                                 value={formData.name}
127 |                                 onChange={handleChange}
128 |                                 disabled={isLoading}
129 |                                 aria-invalid={!!errors.name}
130 |                             />
131 |                             {errors.name && <p className="text-sm text-destructive">{errors.name}</p>}
132 |                         </div>
133 | 
134 |                         <div className="space-y-2">
135 |                             <Label htmlFor="email-signup">Email</Label>
136 |                             <Input
137 |                                 id="email-signup"
138 |                                 name="email"
139 |                                 type="email"
140 |                                 placeholder="name@example.com"
141 |                                 className="bg-[#090909]"
142 |                                 value={formData.email}
143 |                                 onChange={handleChange}
144 |                                 disabled={isLoading}
145 |                                 aria-invalid={!!errors.email}
146 |                             />
147 |                             {errors.email && <p className="text-sm text-destructive">{errors.email}</p>}
148 |                         </div>
149 | 
150 |                         <div className="space-y-2">
151 |                             <Label htmlFor="password-signup">Password</Label>
152 |                             <div className="relative">
153 |                                 <Input
154 |                                     id="password-signup"
155 |                                     name="password"
156 |                                     type={showPassword ? "text" : "password"}
157 |                                     placeholder="••••••••"
158 |                                     className="bg-[#090909]"
159 |                                     value={formData.password}
160 |                                     onChange={handleChange}
161 |                                     disabled={isLoading}
162 |                                     aria-invalid={!!errors.password}
163 |                                 />
164 |                                 <Button
165 |                                     type="button"
166 |                                     variant="ghost"
167 |                                     size="icon"
168 |                                     className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
169 |                                     onClick={() => setShowPassword(!showPassword)}
170 |                                     disabled={isLoading}
171 |                                 >
172 |                                     {showPassword ? (
173 |                                         <EyeOff className="h-4 w-4 text-muted-foreground" />
174 |                                     ) : (
175 |                                         <Eye className="h-4 w-4 text-muted-foreground" />
176 |                                     )}
177 |                                     <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
178 |                                 </Button>
179 |                             </div>
180 |                             {errors.password && <p className="text-sm text-destructive">{errors.password}</p>}
181 |                         </div>
182 | 
183 |                         <div className="space-y-2">
184 |                             <div className="flex items-center space-x-2">
185 |                                 <Checkbox
186 |                                     id="terms"
187 |                                     checked={formData.agreeToTerms}
188 |                                     onCheckedChange={(checked) => handleCheckboxChange(checked as boolean)}
189 |                                 />
190 |                                 <Label htmlFor="terms" className="text-sm font-normal cursor-pointer">
191 |                                     I agree to the terms and conditions
192 |                                 </Label>
193 |                             </div>
194 |                             {errors.agreeToTerms && <p className="text-sm text-destructive">{errors.agreeToTerms}</p>}
195 |                         </div>
196 |                     </CardContent>
197 | 
198 |                     <CardFooter className="flex flex-col space-y-4">
199 |                         <Button type="submit" className="hover:to-[#ba4bff] hover:from-[#ba4bff] rounded-full w-full bg-gradient-to-r to-[#351166] from-[#b55ced]" disabled={isLoading}>
200 |                             {isLoading ? (
201 |                                 <>
202 |                                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
203 |                                     Creating account...
204 |                                 </>
205 |                             ) : (
206 |                                 "Create Account"
207 |                             )}
208 |                         </Button>
209 | 
210 |                         <div className="text-center text-sm">
211 |                             Already have an account?{" "}
212 |                             <Link href="signin" className="font-bold text-[16px] hover:underline">
213 |                                 Sign in
214 |                             </Link>
215 |                         </div>
216 |                     </CardFooter>
217 |                 </form>
218 |             </Card>
219 |         </div>
220 |     )
221 | }
222 | export default Register;
223 | 


--------------------------------------------------------------------------------
/src/app/change/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import type React from "react"
  4 | import { useState } from "react"
  5 | import { Eye, EyeOff, Loader2 } from "lucide-react"
  6 | import { toast } from "react-toastify"
  7 | import { Button } from "@/components/ui/button"
  8 | import { Input } from "@/components/ui/input"
  9 | import { Label } from "@/components/ui/label"
 10 | import { Card, CardContent, CardFooter } from "@/components/ui/card"
 11 | import { changePassword } from "@/utils/api"
 12 | 
 13 | const ChangePassword = () => {
 14 |     const [isLoading, setIsLoading] = useState(false)
 15 |     const [showPassword, setShowPassword] = useState(false)
 16 |     const [showConfirmPassword, setConfirmShowPassword] = useState(false)
 17 |     const [showOldPassword, setShowOldPassword] = useState(false)
 18 |     const [formData, setFormData] = useState({
 19 |         password: "",
 20 |         confirmPassword: "",
 21 |         oldPassword: "",
 22 |     })
 23 |     const [errors, setErrors] = useState({
 24 |         password: "",
 25 |         confirmPassword: "",
 26 |         oldPassword: "",
 27 |         isvalid: "",
 28 |     })
 29 | 
 30 |     const validateForm = () => {
 31 |         const newErrors = {
 32 |             password: "",
 33 |             confirmPassword: "",
 34 |             oldPassword: "",
 35 |             isvalid: ""
 36 |         }
 37 |         let isValid = true
 38 | 
 39 |         if (!formData.password) {
 40 |             newErrors.password = "Password is required"
 41 |             isValid = false
 42 |         }
 43 | 
 44 |         if (!formData.confirmPassword) {
 45 |             newErrors.confirmPassword = "Confirm Password is required"
 46 |             isValid = false
 47 |         }
 48 | 
 49 |         if (!formData.oldPassword) {
 50 |             newErrors.oldPassword = "Oldpassword is required"
 51 |             isValid = false
 52 |         }
 53 | 
 54 |         if (formData.password !== formData.confirmPassword && formData.password && formData.confirmPassword) {
 55 |             newErrors.isvalid = "Passwords do not match"
 56 |             toast.error(newErrors.isvalid);
 57 |             isValid = false
 58 |         }
 59 | 
 60 |         setErrors(newErrors)
 61 |         return isValid
 62 |     }
 63 | 
 64 |     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 65 |         const { name, value } = e.target
 66 |         setFormData((prev) => ({
 67 |             ...prev,
 68 |             [name]: value,
 69 |         }))
 70 |     }
 71 | 
 72 |     const handleSubmit = async (e: React.FormEvent) => {
 73 |         e.preventDefault()
 74 | 
 75 |         if (!validateForm()) return
 76 | 
 77 |         setIsLoading(true)
 78 | 
 79 |         // Simulate API call
 80 |         try {
 81 |             const res = await changePassword(formData.password, formData.oldPassword)
 82 |             if (res) {
 83 |                 toast.success("Your password successfully updated.");
 84 |             }
 85 |         } catch (error) {
 86 |             toast.error("Failed to sign in. Please try again.")
 87 |         } finally {
 88 |             setIsLoading(false)
 89 |         }
 90 |     }
 91 | 
 92 |     return (
 93 |         <div className="flex w-full justify-center pt-16">
 94 |             <Card className="bg-[#121212] text-white border-0 py-6">
 95 |                 <form onSubmit={handleSubmit}>
 96 |                     <CardContent className="space-y-4 pt-6">
 97 |                         <div className="space-y-2">
 98 |                             <div className="flex items-center justify-between">
 99 |                                 <Label htmlFor="oldpassword">Old Password</Label>
100 |                             </div>
101 |                             <div className="relative">
102 |                                 <Input
103 |                                     id="oldPassword"
104 |                                     name="oldPassword"
105 |                                     type={showOldPassword ? "text" : "password"}
106 |                                     placeholder="Old password"
107 |                                     value={formData.oldPassword}
108 |                                     onChange={handleChange} 
109 |                                     className="bg-[#090909]"
110 |                                     disabled={isLoading}
111 |                                     aria-invalid={!!errors.oldPassword}
112 |                                 />
113 |                                 <Button
114 |                                     type="button"
115 |                                     variant="ghost"
116 |                                     size="icon"
117 |                                     className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
118 |                                     onClick={() => setShowOldPassword(!showOldPassword)}
119 |                                     disabled={isLoading}
120 |                                 >
121 |                                     {showOldPassword ? (
122 |                                         <EyeOff className="h-4 w-4 text-muted-foreground" />
123 |                                     ) : (
124 |                                         <Eye className="h-4 w-4 text-muted-foreground" />
125 |                                     )}
126 |                                     <span className="sr-only">{showOldPassword ? "Hide password" : "Show password"}</span>
127 |                                 </Button>
128 |                             </div>
129 |                             {errors.oldPassword && <p className="text-sm text-destructive">{errors.oldPassword}</p>}
130 |                         </div>
131 | 
132 |                         <div className="space-y-2">
133 |                             <div className="flex items-center justify-between">
134 |                                 <Label htmlFor="password">New Password</Label>
135 |                             </div>
136 |                             <div className="relative">
137 |                                 <Input
138 |                                     id="password"
139 |                                     name="password"
140 |                                     type={showPassword ? "text" : "password"}
141 |                                     placeholder="New password"
142 |                                     className="bg-[#090909]"
143 |                                     value={formData.password}
144 |                                     onChange={handleChange}
145 |                                     disabled={isLoading}
146 |                                     aria-invalid={!!errors.password}
147 |                                 />
148 |                                 <Button
149 |                                     type="button"
150 |                                     variant="ghost"
151 |                                     size="icon"
152 |                                     className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
153 |                                     onClick={() => setShowPassword(!showPassword)}
154 |                                     disabled={isLoading}
155 |                                 >
156 |                                     {showPassword ? (
157 |                                         <EyeOff className="h-4 w-4 text-muted-foreground" />
158 |                                     ) : (
159 |                                         <Eye className="h-4 w-4 text-muted-foreground" />
160 |                                     )}
161 |                                     <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
162 |                                 </Button>
163 |                             </div>
164 |                             {errors.password && <p className="text-sm text-destructive">{errors.password}</p>}
165 |                         </div>
166 | 
167 |                         <div className="space-y-2">
168 |                             <div className="flex items-center justify-between">
169 |                                 <Label htmlFor="password">Confirm Password</Label>
170 |                             </div>
171 |                             <div className="relative">
172 |                                 <Input
173 |                                     id="confirmPassword"
174 |                                     name="confirmPassword"
175 |                                     type={showConfirmPassword ? "text" : "password"}
176 |                                     placeholder="Confirm password"
177 |                                     className="bg-[#090909]"
178 |                                     value={formData.confirmPassword}
179 |                                     onChange={handleChange}
180 |                                     disabled={isLoading}
181 |                                     aria-invalid={!!errors.confirmPassword}
182 |                                 />
183 |                                 <Button
184 |                                     type="button"
185 |                                     variant="ghost"
186 |                                     size="icon"
187 |                                     className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
188 |                                     onClick={() => setConfirmShowPassword(!showConfirmPassword)}
189 |                                     disabled={isLoading}
190 |                                 >
191 |                                     {showConfirmPassword ? (
192 |                                         <EyeOff className="h-4 w-4 text-muted-foreground" />
193 |                                     ) : (
194 |                                         <Eye className="h-4 w-4 text-muted-foreground" />
195 |                                     )}
196 |                                     <span className="sr-only">{showConfirmPassword ? "Hide password" : "Show password"}</span>
197 |                                 </Button>
198 |                             </div>
199 |                             {errors.confirmPassword && <p className="text-sm text-destructive">{errors.confirmPassword}</p>}
200 |                         </div>
201 |                     </CardContent>
202 | 
203 |                     <CardFooter className="flex flex-col space-y-4">
204 |                         <Button type="submit" className="w-full rounded-full bg-gradient-to-b to-[#301060] from-[#9434d3] hover:to-[#4f2b84] hover:from-[#6e20a3]" disabled={isLoading}>
205 |                             {isLoading ? (
206 |                                 <>
207 |                                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
208 |                                     Change...
209 |                                 </>
210 |                             ) : (
211 |                                 "Change Password"
212 |                             )}
213 |                         </Button>
214 |                     </CardFooter>
215 |                 </form>
216 |             </Card>
217 |         </div>
218 |     )
219 | }
220 | export default ChangePassword;


--------------------------------------------------------------------------------
/src/app/create/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import { Button } from "@/components/ui/button"
  3 | import { clusterApiUrl, Connection, Keypair, SystemProgram, TransactionMessage, VersionedTransaction } from "@solana/web3.js"
  4 | import { AuthorityType, createAssociatedTokenAccountInstruction, createInitializeMetadataPointerInstruction, createInitializeMintInstruction, createMintToCheckedInstruction, createSetAuthorityInstruction, ExtensionType, getAssociatedTokenAddressSync, getMintLen, LENGTH_SIZE, TOKEN_2022_PROGRAM_ID, TYPE_SIZE } from "@solana/spl-token"
  5 | import { useEffect, useRef, useState } from "react"
  6 | import { toast } from "react-toastify";
  7 | import { Label } from "@/components/ui/label"
  8 | import { Input } from "@/components/ui/input"
  9 | import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 10 | import { CropperRef, Cropper, } from 'react-advanced-cropper';
 11 | import 'react-advanced-cropper/dist/style.css'
 12 | import { connectSolana, getSolanaProvider } from "@/utils/web3"
 13 | import { removeFile, saveToken, uploadFile } from "@/utils/api"
 14 | import { createInitializeInstruction, pack, TokenMetadata } from "@solana/spl-token-metadata"
 15 | import { Loader2 } from "lucide-react"
 16 | import { useGlobalContext } from "@/context/global-context"
 17 | import { Textarea } from "@/components/ui/textarea"
 18 | import { useRouter } from "next/navigation"
 19 | 
 20 | 
 21 | export default function CreateToken() {
 22 |     const { user, net } = useGlobalContext();
 23 |     const router = useRouter();
 24 |     const avatarRef = useRef<HTMLInputElement>(null);
 25 |     const [imgFile, setImgFile] = useState<File>();
 26 |     const [fileInfo, setFileInfo] = useState<{ name: string, type: string }>();
 27 |     const cropperRef = useRef<CropperRef>(null);
 28 |     const [image, setImage] = useState<string>();
 29 |     const [preview, setPreview] = useState<string>();
 30 |     const [name, setName] = useState<string>();
 31 |     const [symbol, setSymbol] = useState<string>();
 32 |     const [description, setDescription] = useState<string>();
 33 |     const [decimal, setDecimal] = useState<number>(9);
 34 |     const [supply, setSupply] = useState<number>(1_000_000);
 35 |     const [open, setOpen] = useState(false);
 36 |     const [spinner, setSpinner] = useState(false);
 37 |     const [creator, setCreator] = useState({
 38 |         name: "Sixcool",
 39 |         site: process.env.NEXT_PUBLIC_ORIGIN || "https://mint-solana-token.vercel.app"
 40 |     })
 41 |     const [telegram, setTelegram] = useState("");
 42 |     const [discord, setDiscord] = useState("");
 43 |     const [website, setWebsite] = useState("");
 44 |     const [twitter, setTwitter] = useState("");
 45 | 
 46 |     const download = (mint: Keypair) => {
 47 |         const url = URL.createObjectURL(new Blob([`[${mint.secretKey.toString()}]`]))
 48 |         const a = document.createElement('a')
 49 |         a.href = url
 50 |         a.download = `${mint.publicKey.toBase58()}.json`
 51 |         document.body.appendChild(a)
 52 |         a.click()
 53 |         a.remove()
 54 |     }
 55 |     const onChooseImage = () => {
 56 |         if (avatarRef.current?.files![0]) {
 57 |             const file = avatarRef.current.files[0];
 58 |             setOpen(true);
 59 |             setFileInfo(file)
 60 |             const url = URL.createObjectURL(file)
 61 |             setImage(url);
 62 |         }
 63 |     }
 64 |     const onCrop = () => {
 65 |         setOpen(false);
 66 |         if (cropperRef.current && avatarRef.current) {
 67 |             avatarRef.current.value = '';
 68 |             const canvas = cropperRef.current?.getCanvas({ width: 128, height: 128 });
 69 |             if (canvas) {
 70 |                 canvas.toBlob(blob => {
 71 |                     blob && setImgFile(new File([blob], fileInfo?.name!, { type: 'image/png' }));
 72 |                 }, 'image/png');
 73 |                 setPreview(canvas.toDataURL());
 74 |             }
 75 |         }
 76 |     }
 77 |     const onCancel = () => {
 78 |         setOpen(false);
 79 |         if (cropperRef.current && avatarRef.current) {
 80 |             setImgFile(avatarRef.current.files![0]);
 81 |             setPreview(image);
 82 |             avatarRef.current.value = '';
 83 |         }
 84 |     }
 85 | 
 86 |     const createToken = async () => {
 87 |         if (!user) {
 88 |             router.push('/auth/signin?redirect=/create', {scroll: true})
 89 |         }
 90 |         if (!name) {
 91 |             toast.warn("Input the token name!");
 92 |             return;
 93 |         }
 94 |         if (!symbol) {
 95 |             toast.warn("Input the token symbol!");
 96 |             return;
 97 |         }
 98 |         if (!description) {
 99 |             toast.warn("Input the token description!");
100 |             return;
101 |         }
102 |         if (!preview || !imgFile) {
103 |             toast.warn("Choose the token avatar!");
104 |             return;
105 |         }
106 |         const payer = await connectSolana();
107 |         if (!payer) {
108 |             toast.warn("Failed to connect your wallet!");
109 |             return;
110 |         }
111 |         setSpinner(true);
112 |         const mint = Keypair.generate();
113 | 
114 |         const image = await uploadFile(imgFile, fileInfo?.name!, fileInfo?.type, net === "devnet" ? "token-asset-devnet" : 'token-asset');
115 |         if (!image) return;
116 |         const extensions : {[key: string]: string} | undefined = (!telegram && !discord && !website && !twitter) ? undefined : {};
117 |         if (extensions) {
118 |             if (telegram) extensions.telegram = telegram;
119 |             if (discord) extensions.discord = discord;
120 |             if (twitter) extensions.twitter = twitter;
121 |             if (website) extensions.website = website;
122 |         }
123 |         const str = JSON.stringify({
124 |             name,
125 |             symbol,
126 |             description,
127 |             image,
128 |             creator,
129 |             extensions
130 |         }, null, 4);
131 |         const bytes = new TextEncoder().encode(str);
132 |         const blob = new Blob([bytes], {
133 |             type: "application/json;charset=utf-8"
134 |         });
135 |         const metaFile = await uploadFile(new File([blob], 'metadata.json', { type: "application/json;charset=utf-8" }), 'metadata.json', "application/json;charset=utf-8", net === "devnet" ? "token-asset-devnet" : 'token-asset')
136 |         if (!metaFile) return;
137 |         const metadata: TokenMetadata = {
138 |             mint: mint.publicKey,
139 |             name,
140 |             symbol,
141 |             uri: metaFile,
142 |             additionalMetadata: [["description", "Only Possible On Solana"]],
143 |         };
144 |         const mintLen = getMintLen([
145 |             ExtensionType.MetadataPointer
146 |         ]);
147 |         const metadataLen = TYPE_SIZE + LENGTH_SIZE + pack(metadata).length;
148 | 
149 |         const mainnet_rpcs = [
150 |             "https://api.mainnet-beta.solana.com",
151 |             "https://solana.drpc.org",
152 |             "https://go.getblock.io/4136d34f90a6488b84214ae26f0ed5f4",
153 |             "https://solana-rpc.publicnode.com",
154 |             "https://api.blockeden.xyz/solana/67nCBdZQSH9z3YqDDjdm",
155 |             "https://solana.leorpc.com/?api_key=FREE",
156 |             "https://endpoints.omniatech.io/v1/sol/mainnet/public",
157 |             "https://solana.api.onfinality.io/public"
158 |         ]
159 | 
160 |         try {
161 |             const connection = new Connection(net === "devnet" ? "https://api.devnet.solana.com" : "https://mainnet.helius-rpc.com/?api-key=488f3679-3ae7-4e8f-baa9-60dc45f0a75c", "confirmed");
162 | 
163 |             const lamports = await connection.getMinimumBalanceForRentExemption(mintLen + metadataLen);
164 |             console.log("calculate lamport", lamports)
165 |             const programId = TOKEN_2022_PROGRAM_ID;
166 | 
167 |             const ata = getAssociatedTokenAddressSync(mint.publicKey, payer, false, programId);
168 |             console.log("ata", ata)
169 | 
170 |             const instructions_create = [
171 |                 SystemProgram.createAccount({
172 |                     fromPubkey: payer,
173 |                     newAccountPubkey: mint.publicKey,
174 |                     space: mintLen,
175 |                     lamports,
176 |                     programId
177 |                 }),
178 |                 createInitializeMetadataPointerInstruction(mint.publicKey, payer, mint.publicKey, programId),
179 |                 createInitializeMintInstruction(mint.publicKey, decimal, payer, null, programId),
180 |                 createInitializeInstruction({
181 |                     programId,
182 |                     mint: mint.publicKey,
183 |                     metadata: mint.publicKey,
184 |                     name,
185 |                     symbol,
186 |                     uri: metaFile,
187 |                     mintAuthority: payer,
188 |                     updateAuthority: payer
189 |                 })
190 |             ]
191 |             const instructions_mint = [
192 |                 createAssociatedTokenAccountInstruction(
193 |                     payer,
194 |                     ata,
195 |                     payer,
196 |                     mint.publicKey,
197 |                     programId
198 |                 ),
199 |                 createMintToCheckedInstruction(
200 |                     mint.publicKey,
201 |                     ata,
202 |                     payer,
203 |                     supply * 10 ** decimal,
204 |                     decimal,
205 |                     [],
206 |                     programId
207 |                 ),
208 |                 createSetAuthorityInstruction(
209 |                     mint.publicKey,
210 |                     payer,
211 |                     AuthorityType.MintTokens,
212 |                     null,
213 |                     [],
214 |                     programId
215 |                 )
216 |             ]
217 |             console.log("create instructions")
218 |             const recentBlockhash = (await connection.getLatestBlockhash()).blockhash;
219 |             console.log("recent blockhash", recentBlockhash)
220 |             const transactionV0_create = new VersionedTransaction(
221 |                 new TransactionMessage({
222 |                     payerKey: payer,
223 |                     recentBlockhash,
224 |                     instructions: instructions_create,
225 |                 }).compileToV0Message()
226 |             );
227 |             transactionV0_create.sign([mint])
228 |             const transactionV0_mint = new VersionedTransaction(
229 |                 new TransactionMessage({
230 |                     payerKey: payer,
231 |                     recentBlockhash,
232 |                     instructions: instructions_mint
233 |                 }).compileToV0Message()
234 |             );
235 |             const provider = getSolanaProvider();
236 |             const signedTransactions = await provider.signAllTransactions([transactionV0_create, transactionV0_mint])
237 |             console.log("singed transaction", signedTransactions)
238 |             for (const signedTransaction of signedTransactions) {
239 |                 const signature = await connection.sendTransaction(signedTransaction);
240 |                 await connection.confirmTransaction(signature);
241 |                 console.log(`Transaction confirmed with signature: ${signature}`);
242 |             }
243 |             saveToken(mint.publicKey.toBase58(), name, symbol, description, image, supply, decimal, net === "devnet");
244 |             download(mint);
245 |             toast.success(
246 |                 <p>
247 |                     <span>Token mint success! Please check your wallet or </span>
248 |                     <a target="_blank" className="underline text-[#00a6f4]" href={`https://explorer.solana.com/address/${mint.publicKey.toBase58()}${net === "devnet" ? "?cluster=devnet" : ""}`}>click here</a>.
249 |                 </p>
250 |             )
251 |             router.push("/tokens", {scroll: true})
252 |         } catch (e) {
253 |             console.log("Error:", e);
254 |             removeFile(image);
255 |             removeFile(metaFile);
256 |             toast.error("Token mint failed! Try again later.")
257 |         }
258 |         setSpinner(false);
259 |     }
260 | 
261 |     useEffect(() => {
262 |         if (!user) {
263 |             router.push('/auth/signin?redirect=/create', {scroll: true})
264 |         }
265 |     }, [])
266 | 
267 |     return (
268 |         <div className="flex flex-col gap-4 py-8 md:w-[42rem] mx-auto">
269 |             <div className="w-full flex gap-3 sm:gap-8 justify-between">
270 |                 <div className="w-3/5 flex flex-col items-center gap-2">
271 |                     <div className="w-full">
272 |                         <Label>Token name*</Label>
273 |                         <Input placeholder="Token name" className="bg-[#090909]" value={name} onChange={e => setName(e.target.value)} />
274 |                     </div>
275 |                     <div className="w-full">
276 |                         <Label>Token symbol*</Label>
277 |                         <Input placeholder="Token symbol, e.g. USDT" className="bg-[#090909]" value={symbol} onChange={e => setSymbol(e.target.value)} />
278 |                     </div>
279 |                     <div className="w-full">
280 |                         <Label>Token decimal*</Label>
281 |                         <Input type="number" placeholder="Token decimal" className="bg-[#090909]" value={decimal} onChange={e => setDecimal(parseInt(e.target.value))} />
282 |                     </div>
283 |                     <div className="w-full">
284 |                         <Label>Token supply*</Label>
285 |                         <Input type="number" placeholder="Token supply" className="bg-[#090909]" value={supply} onChange={e => setSupply(parseInt(e.target.value))} />
286 |                     </div>
287 |                 </div>
288 |                 <div className="w-2/5 relative">
289 |                     <Label>Token avatar*</Label>
290 |                     <Input type="file" ref={avatarRef} accept="image/png"  onChange={onChooseImage} className="cursor-pointer border border-gray rounded-md h-64 w-full object-contain absolute z-10 opacity-0" />
291 |                     <div className="border border-[#afafaf5c] bg-[#090909] rounded-md h-64 w-full absolute"></div>
292 |                     {preview && <img
293 |                         src={preview}
294 |                         className="border rounded-md h-64 w-full object-contain absolute"
295 |                     />}
296 |                 </div>
297 |             </div>
298 |             <div className="w-full">
299 |                 <Label>Token description*</Label>
300 |                 <Textarea placeholder="Token description" className="bg-[#090909]" value={description} onChange={e => setDescription(e.target.value)} />
301 |             </div>
302 |             <div className="w-full grid grid-cols-2 gap-3">
303 |                 <div className="w-full">
304 |                     <Label>Telegram (Optional)</Label>
305 |                     <Input placeholder="https://t.me/" className="bg-[#090909]" value={telegram} onChange={e => setTelegram(e.target.value)} />
306 |                 </div>
307 |                 <div className="w-full">
308 |                     <Label>Discord (Optional)</Label>
309 |                     <Input placeholder="https://discord.gg/" className="bg-[#090909]" value={discord} onChange={e => setDiscord(e.target.value)} />
310 |                 </div>
311 |                 <div className="w-full">
312 |                     <Label>Twitter (Optional)</Label>
313 |                     <Input placeholder="https://x.com/" className="bg-[#090909]" value={twitter} onChange={e => setTwitter(e.target.value)} />
314 |                 </div>
315 |                 <div className="w-full">
316 |                     <Label>Website (Optional)</Label>
317 |                     <Input placeholder="https://" className="bg-[#090909]" value={website} onChange={e => setWebsite(e.target.value)} />
318 |                 </div>
319 |             </div>
320 |             <div className="w-full flex justify-end mt-4">
321 |                 <Button onClick={createToken} disabled={spinner} className="w-2/5 rounded-full bg-gradient-to-b to-[#301060] from-[#9434d3] hover:to-[#4f2b84] hover:from-[#6e20a3]">
322 |                     {spinner ? (
323 |                         <>
324 |                             <Loader2 className="mr-2 h-4 w-4 animate-spin" />
325 |                             Creating token...
326 |                         </>
327 |                     ) : (
328 |                         "Create token"
329 |                     )}
330 |                 </Button>
331 |             </div>
332 | 
333 |             <Dialog open={open} modal={true}>
334 |                 <DialogContent className="bg-[#121212] border-[#fff4]">
335 |                     <DialogHeader>
336 |                         <DialogTitle>Crop Image</DialogTitle>
337 |                         <DialogDescription></DialogDescription>
338 |                     </DialogHeader>
339 |                     <Cropper
340 |                         ref={cropperRef}
341 |                         src={image}
342 |                         stencilProps={{
343 |                             aspectRatio: 1
344 |                         }}
345 |                     />
346 |                     <DialogFooter>
347 |                         <Button className="bg-gradient-to-b to-[#301060] from-[#9434d3] hover:to-[#4f2b84] hover:from-[#6e20a3]" onClick={onCrop}>Crop</Button>
348 |                         <Button className="bg-gradient-to-b to-[#301060] from-[#9434d3] hover:to-[#4f2b84] hover:from-[#6e20a3]" onClick={onCancel}>Uncrop</Button>
349 |                     </DialogFooter>
350 |                 </DialogContent>
351 |             </Dialog>
352 |         </div>
353 |     )
354 | }


--------------------------------------------------------------------------------