.env.example

@@ -16,6 +16,7 @@ PINATA_GATEWAY=
 # Change to your website URL
 # For development: SITE_URL=http://localhost:3000
 SITE_URL=https://memes.markto.market
+VERIFY_TWEET_SECRET=
 NEXT_PUBLIC_TWITTER_HANDLE=
 
 WSOL_LOCKER_ACCOUNT_PK=

README.md

@@ -22,13 +22,13 @@ This project is a Solana-based meme generator that allows users to connect their
     npm install
     ```
 
-- Copy the `.env.example` file to `.env.local` and add your API keys:
+- Copy the `.env.example` file to `.env` and add your API keys:
 
     ```sh
     cp .env.example .env.local
     ```
 
-- Add your FAL AI key to the `.env.local` file:
+- Add your FAL AI key to the `.env` file:
 
     ```env
     # Get key from https://fal.ai/
@@ -51,8 +51,13 @@ This project is a Solana-based meme generator that allows users to connect their
       # Get the gateway from https://app.pinata.cloud/gateway
       PINATA_GATEWAY=
 
-      # Add the account handle to be set in the tweet
+      # Mark to market twitter handle: @mark_2_market0
       NEXT_PUBLIC_TWITTER_HANDLE=
+
+      # Add a secret random string that will be used to access the page to submit tweets for verification
+      # This secret will be checked against the URL to either allow or deny access
+      # The URL should look something like this: http://localhost:3000/submit-tweets/<your-verify-tweet-secret>
+      VERIFY_TWEET_SECRET=
       ```
 
 - Run the development server:

src/app/api/tweet/route.ts

@@ -5,7 +5,14 @@ import { extractData } from '../../../utils/tweetMessage';
 
 export async function POST(req: NextRequest): Promise<NextResponse> {
   try {
-    const { tweetUrl } = await req.json();
+    const { tweetUrl, secret } = await req.json();
+
+    if(secret !== process.env.VERIFY_TWEET_SECRET) {
+      return NextResponse.json(
+        { error: 'Access denied' },
+        { status: 401 }
+      )
+    }
 
     const url = `https://publish.twitter.com/oembed?url=${tweetUrl}&maxwidth=600`;
 
@@ -37,7 +44,7 @@ export async function POST(req: NextRequest): Promise<NextResponse> {
   } catch (error) {
     console.error('Error while verifying tweet:', error)
     return NextResponse.json(
-      { error: 'Failed to verify tweet' },
+      { error: error.message },
       { status: 500 }
     )
   }

src/app/submit-tweets/[secret]/page.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import TweetUrlForm from "../../../components/TweetUrlForm";
+
+interface Props {
+  params: { secret: string };
+}
+
+export default function SubmitTweetPage({params}: Props) {
+
+  return (
+    <div className="flex flex-row justify-center items-center">
+      <TweetUrlForm secret={params.secret} />
+    </div>
+  );
+}

src/components/AIServiceCard.tsx

@@ -45,6 +45,7 @@ const AIServiceCard: React.FC<AIServiceCardProps> = ({
     transactionSignature: null,
     error: null,
   })
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
 
   const handleGenerate = async (): Promise<void> => {
     if (!inputText || !isWalletConnected) return
@@ -147,21 +148,25 @@ const AIServiceCard: React.FC<AIServiceCardProps> = ({
 
         {generationState.imageUrl && generationState.transactionSignature && (
           <div className="mt-4">
+            {!isImageLoaded && <p>Loading image...</p>}
             <img
               src={generationState.imageUrl}
               alt="Generated content"
               className="w-full h-auto rounded-xl shadow-2xl"
+              onLoad={() => setIsImageLoaded(true)}
             />
-            <div className="mt-4 text-center">
-              <a
-                href={generateTwitterShareUrl(generationState.imageUrl, generationState.transactionSignature)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-block w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 shadow-lg hover:shadow-blue-500/25"
-              >
-                Share on Twitter
-              </a>
-            </div>
+            {isImageLoaded &&
+              <div className="mt-4 text-center">
+                <a
+                  href={generateTwitterShareUrl(generationState.imageUrl, generationState.transactionSignature)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-block w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 shadow-lg hover:shadow-blue-500/25"
+                >
+                  Share on Twitter
+                </a>
+              </div>
+            }
           </div>
         )}
       </div>

src/components/TweetUrlForm.tsx

@@ -2,36 +2,47 @@
 
 import React, { useState } from 'react'
 
-const TweetUrlForm: React.FC = () => {
+const TweetUrlForm: React.FC<{secret: string}> = ({secret}) => {
   const [inputText, setInputText] = useState<string>('')
 
-  const handleVerify = async (): Promise<void> => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const handleSubmit = async (): Promise<void> => {
     try {
+      setLoading(true)
       const response = await fetch('/api/tweet', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ tweetUrl: inputText }),
+        body: JSON.stringify({ tweetUrl: inputText, secret }),
       })
 
+      const parsedResponse = await response.json();
+
       if (!response.ok) {
-        throw new Error(`Failed to verify tweet: ${response.statusText}`);
+        setSubmitError(parsedResponse.error);
+        throw new Error(`Failed to submit tweet: ${response.statusText}`);
       }
 
     } catch (error) {
-      console.error('Failed to fetch price:', error);
+      setSubmitError(error.message);
+      console.error('Failed to submit tweet:', error);
+    } finally {
+      setIsSubmitted(true);
+      setLoading(false);
+      setInputText('');
     }
   }
 
   return (
-    <div className="w-full bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-xl border border-gray-700/50 mb-8">
+    <div className="bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-xl border border-gray-700/50 mb-8 mx-auto my-10">
       <div className="p-6">
-        <div className="mb-4">
-
-        </div>
 
         <div className="space-y-4">
+          {isSubmitted ? submitError ?  <p className='text-red-500'>Submission failed: {submitError}</p> : <p className='text-green-500'>Tweet submitted!</p> : <></>}
           <textarea
             value={inputText}
             onChange={(e) => setInputText(e.target.value)}
@@ -43,13 +54,13 @@ const TweetUrlForm: React.FC = () => {
             rows={4}
           />
           <button
-            onClick={handleVerify}
+            onClick={handleSubmit}
             className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600
                      hover:to-emerald-600 text-white font-semibold py-4 px-6 rounded-xl
                      transition-all duration-200 shadow-lg hover:shadow-green-500/25
                      disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none"
           >
-            Verify
+            {loading ? 'Submitting...' : 'Submit' }
           </button>
         </div>