updatE

christiancm7 · Oct 16, 2024 · 1e69ec5 · 1e69ec5
1 parent e634c5c
commit 1e69ec5
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 35 deletions.
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,13 +7,39 @@ import "@rainbow-me/rainbowkit/styles.css";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { Analytics } from "@vercel/analytics/react";
 import { Toaster } from "react-hot-toast";
+import Head from "next/head";
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <Head>
+        <link rel="icon" href="/favicon.ico" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+        <meta
+          name="description"
+          content="Create your own crypto currency on Solana"
+        />
+        <title>Create My Crypto</title>
+      </Head>
       <body className="antialiased bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
         <Providers>
           <ThemeWrapper>

diff --git a/src/app/solana/page.tsx b/src/app/solana/page.tsx
@@ -32,6 +32,7 @@ import {
 } from "@metaplex-foundation/mpl-token-metadata";
 import { ClipboardIcon } from "@heroicons/react/24/outline";
 import { toast } from "react-hot-toast";
+import { ChangeEvent } from "react";
 
 interface FormData {
   name: string;
@@ -393,6 +394,12 @@ export default function SolanaTokenCreator() {
       });
   };
 
+  // Add this function to handle input changes
+  const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value.slice(0, 30);
+    setValue("name", value);
+  };
+
   return (
     <div className="px-2 mx-auto max-w-7xl sm:px-6 lg:px-8 py-8">
       <h1 className="text-4xl font-bold text-center mb-4 text-gray-900 dark:text-white">
@@ -534,8 +541,12 @@ export default function SolanaTokenCreator() {
                   type="text"
                   {...register("name", {
                     required: "Token name is required",
-                    maxLength: 30,
+                    maxLength: {
+                      value: 30,
+                      message: "Token name must be 30 characters or less",
+                    },
                   })}
+                  onChange={handleNameChange}
                   placeholder="My new token"
                   className="mt-1 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:placeholder:text-gray-500 dark:focus:ring-indigo-500"
                 />
@@ -561,8 +572,15 @@ export default function SolanaTokenCreator() {
                     type="text"
                     {...register("symbol", {
                       required: "Token symbol is required",
-                      maxLength: 10,
+                      maxLength: {
+                        value: 10,
+                        message: "Symbol must be 10 characters or less",
+                      },
                     })}
+                    onChange={(e) => {
+                      const value = e.target.value.slice(0, 8);
+                      setValue("symbol", value);
+                    }}
                     placeholder="SOL"
                     className="mt-1 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:placeholder:text-gray-500 dark:focus:ring-indigo-500"
                   />
@@ -584,11 +602,24 @@ export default function SolanaTokenCreator() {
                   <input
                     id="decimals"
                     type="number"
+                    min="0"
+                    max="9"
                     {...register("decimals", {
                       required: "Decimals are required",
-                      min: 0,
-                      max: 9,
+                      min: {
+                        value: 0,
+                        message: "Decimals must be at least 0"
+                      },
+                      max: {
+                        value: 9,
+                        message: "Decimals cannot exceed 9"
+                      },
+                      valueAsNumber: true
                     })}
+                    onInput={(e) => {
+                      const target = e.target as HTMLInputElement;
+                      target.value = Math.max(0, Math.min(9, Number(target.value))).toString();
+                    }}
                     placeholder="9"
                     className="mt-1 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:placeholder:text-gray-500 dark:focus:ring-indigo-500"
                   />
@@ -611,7 +642,20 @@ export default function SolanaTokenCreator() {
                 <input
                   id="supply"
                   type="number"
-                  {...register("supply", { required: "Supply is required" })}
+                  {...register("supply", { 
+                    required: "Supply is required",
+                    min: {
+                      value: 1,
+                      message: "Supply must be at least 1"
+                    },
+                    valueAsNumber: true
+                  })}
+                  min="1"
+                  step="1"
+                  onInput={(e) => {
+                    const target = e.target as HTMLInputElement;
+                    target.value = Math.max(0, parseInt(target.value) || 0).toString();
+                  }}
                   placeholder="1000000000"
                   className="mt-1 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:placeholder:text-gray-500 dark:focus:ring-indigo-500"
                 />
@@ -804,9 +848,67 @@ export default function SolanaTokenCreator() {
 
         {/* Additional Information */}
         <div className="space-y-8">
-          {/* ... (rest of your component remains unchanged) */}
+          <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">
+              How to use Solana Token Creator
+            </h2>
+            <ol className="list-decimal list-inside space-y-3 text-gray-700 dark:text-gray-300">
+              <li>Connect your Solana wallet</li>
+              <li>Specify the desired name for your Token</li>
+              <li>Indicate the symbol (max 8 characters)</li>
+              <li>
+                Select the decimals quantity (0 for Whitelist Token, 5 for
+                utility Token, 9 for meme token).
+              </li>
+              <li>Provide a brief description for your SPL Token</li>
+              <li>Upload the image for your token (PNG)</li>
+              <li>Determine the Supply of your Token</li>
+              <li>
+                Click on create, accept the transaction and wait until your
+                tokens are ready
+              </li>
+            </ol>
+          </div>
+
+          <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+            <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-white">
+              Additional Settings
+            </h3>
+            <div className="space-y-4">
+              <div>
+                <h4 className="text-lg font-medium mb-2 text-gray-600 dark:text-gray-400">
+                  Revoke Update Authority (Immutable)
+                </h4>
+                <p className="text-gray-700 dark:text-gray-300">
+                  Revoking update authority makes the token metadata immutable.
+                  This means the token&apos;s information cannot be changed
+                  after creation. The cost is 0.1 SOL.
+                </p>
+              </div>
+              <div>
+                <h4 className="text-lg font-medium mb-2 text-gray-600 dark:text-gray-400">
+                  Revoke Freeze Authority
+                </h4>
+                <p className="text-gray-700 dark:text-gray-300">
+                  If you want to create a liquidity pool, you&apos;ll need to
+                  &quot;Revoke Freeze Authority&quot; of the Token. The cost is
+                  0.1 SOL.
+                </p>
+              </div>
+              <div>
+                <h4 className="text-lg font-medium mb-2 text-gray-600 dark:text-gray-400">
+                  Revoke Mint Authority
+                </h4>
+                <p className="text-gray-700 dark:text-gray-300">
+                  Revoking mint authority ensures that no more tokens can be
+                  minted beyond the total supply. This provides security and
+                  peace of mind to buyers. The cost is 0.1 SOL.
+                </p>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   );
-}
+}
diff --git a/src/app/support/page.tsx b/src/app/support/page.tsx
@@ -1,24 +1,24 @@
 import React from "react";
-import { Mail, MapPin } from "lucide-react";
+import { Mail } from "lucide-react";
 import ContactForm from "@/components/forms/contact";
 import { ChatBubbleLeftRightIcon } from "@heroicons/react/24/outline";
 
 const CustomerSupportPage = () => {
   return (
     <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
-      <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">
+      <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-12 text-center">
         How can we help you with token creation?
       </h1>
-
+      {/* 
       <div className="mb-8">
         <input
           type="text"
           placeholder="Type keywords to find answers"
           className="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
         />
-      </div>
+      </div> */}
 
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+      {/* <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
         <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
           <h2 className="text-xl font-semibold mb-4">Token Creation</h2>
           <ul className="space-y-2">
@@ -130,29 +130,25 @@ const CustomerSupportPage = () => {
             </li>
           </ul>
         </div>
-      </div>
+      </div> */}
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
         <div>
           <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
             Points of contact
           </h2>
           <div className="space-y-4">
-            <div className="flex items-start">
-              <MapPin className="mr-4 text-gray-400" />
-              <div>
-                <h3 className="font-semibold">Main Office</h3>
-                <p className="text-gray-600 dark:text-gray-300">
-                  123 Blockchain Street, Crypto City, CC 12345
-                </p>
-              </div>
-            </div>
             <div className="flex items-start">
               <Mail className="mr-4 text-gray-400" />
               <div>
                 <h3 className="font-semibold">Email</h3>
                 <p className="text-gray-600 dark:text-gray-300">
-                  support@createmytoken.io
+                  <a
+                    href="mailto:support@createmytoken.io"
+                    className="hover:underline"
+                  >
+                    support@createmytoken.io
+                  </a>
                 </p>
               </div>
             </div>
@@ -162,7 +158,7 @@ const CustomerSupportPage = () => {
                 <h3 className="font-semibold">Discord</h3>
                 <p className="text-gray-600 dark:text-gray-300">
                   <a
-                    href="https://discord.gg/yourdiscordlink"
+                    href="https://discord.gg/r8csKhrt"
                     className="hover:underline"
                   >
                     Join our community
@@ -175,7 +171,7 @@ const CustomerSupportPage = () => {
 
         <div>
           <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
-            Still need help?
+            Message us directly
           </h2>
           <ContactForm />
         </div>

diff --git a/src/components/faq/index.tsx b/src/components/faq/index.tsx
@@ -5,12 +5,12 @@ const faqs = [
   {
     question: "What is a token creator?",
     answer:
-      "A token creator is a tool that allows you to create your own cryptocurrency tokens on a blockchain network, such as Ethereum or Base, without needing to write complex smart contract code yourself.",
+      "A token creator is a tool that allows you to create your own cryptocurrency tokens on blockchain networks such as Solana, Ethereum, or Base, without needing to write complex smart contract code yourself.",
   },
   {
     question: "How much does it cost to create a token?",
     answer:
-      "The token creation currently costs 0.01 ETH, which covers all fees necessary for Token Creation on the chosen network (Ethereum or Base mainnet).",
+      "The token creation cost varies by network. It costs 0.1 SOL on Solana, and 0.01 ETH on Ethereum or Base mainnet. These fees cover all necessary costs for token creation on the chosen network.",
   },
   {
     question: "How long does the token creation process take?",
@@ -25,13 +25,13 @@ const faqs = [
   {
     question: "Can I create tokens on different networks?",
     answer:
-      "Yes, our platform supports token creation on both Ethereum and Base networks. You can choose the network that best suits your needs.",
+      "Yes, our platform supports token creation on Solana, Ethereum, and Base networks. You can choose the network that best suits your needs.",
   },
   {
     question:
-      "What's the difference between Ethereum and Base for token creation?",
+      "What's the difference between Solana, Ethereum, and Base for token creation?",
     answer:
-      "Ethereum is the original and most widely used network for token creation, while Base is a newer, more scalable network. Base typically offers lower transaction fees and faster confirmation times.",
+      "Solana is known for its high speed and low transaction costs, making it ideal for many token projects. Ethereum is the original and most widely used network for token creation, offering robust security and a large ecosystem. Base is a newer, more scalable network that typically offers lower transaction fees and faster confirmation times compared to Ethereum.",
   },
   {
     question: "Do I need technical knowledge to create a token?",

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -274,12 +274,12 @@ export function Header() {
           >
             Create Ethereum Token
           </a>
-          <a
+          {/* <a
             href="/settings"
             className="block px-4 py-2 text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
           >
             Settings
-          </a>
+          </a> */}
           <a
             href="/support"
             className="block px-4 py-2 text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"

diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { CogIcon, LifebuoyIcon } from "@heroicons/react/24/outline";
+import { LifebuoyIcon } from "@heroicons/react/24/outline";
 import { Home } from "lucide-react";
 
 export function Sidebar() {
@@ -182,7 +182,7 @@ export function Sidebar() {
         </ul>
 
         <ul className="space-y-2 font-medium pt-4 border-t border-gray-200 dark:border-gray-700">
-          <li>
+          {/* <li>
             <Link
               href="/settings"
               className={`flex items-center p-2 rounded-lg group ${
@@ -194,7 +194,7 @@ export function Sidebar() {
               <CogIcon className="w-5 h-5 transition duration-75 text-gray-500 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" />
               <span className="ml-3">Settings</span>
             </Link>
-          </li>
+          </li> */}
           <li>
             <Link
               href="/support"