feat: Challenge and agent lauch modal overhaul

Author: Hyodar

frontend/app/attack/[address]/page.tsx

@@ -239,6 +239,7 @@ export default function DefendPage() {
       ...prev,
       isSubmitting: true,
       transactionStatus: 'submitting',
+      errors: { ...prev.errors, submit: '' },
     }))
 
     try {
@@ -424,20 +425,16 @@ export default function DefendPage() {
         <button
           type="submit"
           disabled={
-            formState.isSubmitting || Object.values(formState.errors).some((error) => error)
+            formState.isSubmitting || 
+            (formState.transactionStatus !== 'failed' && Object.values(formState.errors).some((error) => error))
           }
           className="w-full bg-white text-black rounded-full py-3 font-medium hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed relative overflow-hidden"
         >
           {formState.isSubmitting ? (
-            <>
-              <div className="flex items-center justify-center">
-                <Loader2 className="w-4 h-4 animate-spin mr-2" />
-                Deploying...
-              </div>
-              <div className="absolute bottom-0 left-0 h-[2px] w-full bg-[#383838]">
-                <div className="h-full w-full bg-[#558EB4] animate-loading-progress" />
-              </div>
-            </>
+            <div className="flex items-center justify-center">
+              <Loader2 className="w-4 h-4 animate-spin mr-2" />
+              Deploying...
+            </div>
           ) : (
             'Deploy Agent'
           )}

frontend/app/defend/page.tsx

@@ -283,3 +283,19 @@ red-gradient-border
   initial-value: 0deg;
   inherits: false;
 }
+
+.shadow-glow-blue {
+  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
+}
+
+.shadow-glow-green {
+  box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
+}
+
+.shadow-glow-red {
+  box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
+}
+
+.shadow-glow-yellow {
+  box-shadow: 0 0 15px rgba(234, 179, 8, 0.2);
+}

frontend/app/globals.css

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Dialog } from '@/components/Dialog'
-import { Check } from 'lucide-react'
+import { Check, ExternalLink, X } from 'lucide-react'
 
 import { ACTIVE_NETWORK } from '@/constants'
 import Link from 'next/link'
@@ -21,7 +21,7 @@ export const AgentLaunchSuccessModal = ({
   onClose,
 }: SuccessModalProps) => {
   const handleTweet = () => {
-    const tweetText = `I just deployed an AI agent "${agentName}" on TEECEPTION! Try to beat it and win rewards! 🤖\n\ Agent link: https://teeception.ai/attack \n\n`
+    const tweetText = `I just deployed an AI agent "${agentName}" on TEECEPTION! Try to beat it and win rewards! 🤖\n\ Agent link: https://teeception.ai/attack/${agentAddress} \n\n`
     const tweetUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}`
     window.open(tweetUrl, '_blank')
   }
@@ -36,42 +36,52 @@ export const AgentLaunchSuccessModal = ({
 
   return (
     <Dialog open={open} onClose={handleClose}>
-      <div className="p-6 space-y-6">
+      <div className="p-6 space-y-5 relative">
+        <button 
+          onClick={handleClose}
+          className="absolute top-0 right-0 p-2 text-gray-400 hover:text-white"
+          aria-label="Close"
+        >
+          <X className="w-5 h-5" />
+        </button>
+        
         <div className="text-center">
           <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
             <Check className="w-8 h-8 text-green-500" />
           </div>
           <h2 className="text-2xl font-bold mb-2">Agent Launched Successfully!</h2>
-          <p className="text-gray-400 mb-6">
+          <p className="text-gray-400 mb-4">
             Your AI agent is now live on Starknet. Share it with others to start the challenge!
           </p>
 
-          <div className="space-y-3">
-            <button
-              onClick={() => {
-                window.open(`${ACTIVE_NETWORK.explorer}/tx/${transactionHash}`, '_blank')
-              }}
-              className="w-full bg-gray-800 text-white rounded-full py-3 font-medium hover:bg-gray-800/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+          <div className="space-y-3 mb-4">
+            <Link 
+              href={`/attack/${agentAddress}`} 
+              className="w-full bg-gray-800 text-white rounded-lg py-2.5 font-medium hover:bg-gray-700 flex items-center justify-center gap-2"
             >
-              View on Voyager
-            </button>
+              <ExternalLink className="w-4 h-4" />
+              View Your Agent
+            </Link>
 
             <button
               onClick={handleShare}
-              className="w-full bg-white text-black rounded-full py-3 font-medium hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              className="w-full bg-white text-black rounded-lg py-2.5 font-medium hover:bg-white/90 flex items-center justify-center gap-2"
             >
               <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                 <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
               </svg>
               Share on Twitter
             </button>
-          </div>
-
-          <Link href={`/attack/${agentAddress}`} className="flex justify-end gap-3">
-            <button onClick={handleClose} className="px-4 py-2 text-gray-600 hover:text-gray-800">
-              Close
+            
+            <button
+              onClick={() => {
+                window.open(`${ACTIVE_NETWORK.explorer}/tx/${transactionHash}`, '_blank')
+              }}
+              className="text-gray-400 hover:text-white transition-colors text-sm flex items-center justify-center gap-1 mx-auto"
+            >
+              View transaction details on Voyager
             </button>
-          </Link>
+          </div>
         </div>
       </div>
     </Dialog>