Merge pull request #352 from LIT-Protocol/dashboard/minor-ui-improvements

chore(dashboard): user, developer dashboard ui improvements

Author: awisniew207

packages/apps/app-dashboard/src/components/developer-dashboard/DashboardContent.tsx

@@ -74,9 +74,7 @@ export function DashboardContent({
               <Button
                 size="sm"
                 className="bg-orange-600 hover:bg-orange-700 text-white"
-                onClick={() =>
-                  window.open('https://docs.heyvincent.ai/documents/Getting_Started.html', '_blank')
-                }
+                onClick={() => window.open('https://docs.heyvincent.ai', '_blank')}
               >
                 View Docs
               </Button>

packages/apps/app-dashboard/src/components/developer-dashboard/ability/forms/DeleteAbilityForm.tsx

@@ -3,13 +3,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Form } from '@/components/shared/ui/form';
 import { Button } from '@/components/shared/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/shared/ui/card';
+import { Card, CardContent } from '@/components/shared/ui/card';
 import { TextField } from '../../form-fields';
 
 function buildConfirmationString(title: string): string {
@@ -59,19 +53,13 @@ export function DeleteAbilityForm({
 
   return (
     <Card className="w-full max-w-2xl mx-auto dark:bg-neutral-800 dark:border-white/10">
-      <CardHeader>
-        <CardTitle className="text-red-600 dark:text-red-400">Delete Ability</CardTitle>
-        <CardDescription className="text-gray-600 dark:text-white/60">
-          Please make sure you're absolutely certain you want to delete this ability.
-        </CardDescription>
-      </CardHeader>
       <CardContent>
         <Form {...form}>
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <p className="text-sm text-gray-700 dark:text-gray-300 mb-2">
+              To confirm deletion, please type the following exactly:
+            </p>
             <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-500/30 rounded-lg p-4">
-              <p className="text-sm text-red-800 dark:text-red-200 mb-2">
-                To confirm deletion, please type the following exactly:
-              </p>
               <code className="bg-red-100 dark:bg-red-800/20 px-2 py-1 rounded text-sm font-mono text-red-900 dark:text-red-200">
                 {expectedConfirmation}
               </code>

packages/apps/app-dashboard/src/components/developer-dashboard/ability/forms/DeleteAbilityVersionForm.tsx

@@ -3,13 +3,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Form } from '@/components/shared/ui/form';
 import { Button } from '@/components/shared/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/shared/ui/card';
+import { Card, CardContent } from '@/components/shared/ui/card';
 import { SelectField, TextField } from '../../form-fields';
 import { Ability, AbilityVersion } from '@/types/developer-dashboard/appTypes';
 
@@ -94,19 +88,13 @@ export function DeleteAbilityVersionForm({
 
   return (
     <Card className="w-full max-w-2xl mx-auto dark:bg-neutral-800 dark:border-white/10">
-      <CardHeader>
-        <CardTitle className="text-red-600 dark:text-red-400">Delete Ability Version</CardTitle>
-        <CardDescription className="text-gray-600 dark:text-white/60">
-          Please make sure you're absolutely certain you want to delete this ability version.
-        </CardDescription>
-      </CardHeader>
       <CardContent>
         <Form {...form}>
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <p className="text-sm text-gray-700 dark:text-gray-300 mb-2">
+              To confirm deletion, please type the following exactly:
+            </p>
             <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-500/30 rounded-lg p-4">
-              <p className="text-sm text-red-800 dark:text-red-200 mb-2">
-                To confirm deletion, please type the following exactly:
-              </p>
               <code className="bg-red-100 dark:bg-red-800/20 px-2 py-1 rounded text-sm font-mono text-red-900 dark:text-red-200">
                 {expectedConfirmation}
               </code>

packages/apps/app-dashboard/src/components/developer-dashboard/ability/wrappers/DeleteAbilityWrapper.tsx

@@ -61,7 +61,7 @@ export function DeleteAbilityWrapper() {
           <div className="flex-1">
             <h1 className="text-3xl font-bold text-neutral-800 dark:text-white">Delete Ability</h1>
             <p className="text-gray-600 dark:text-white/60 mt-2">
-              Delete "{ability.title}" and all its data.
+              Delete "{ability.title}"?
             </p>
           </div>
         </div>

packages/apps/app-dashboard/src/components/developer-dashboard/app/forms/DeleteAppForm.tsx

@@ -3,13 +3,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Form } from '@/components/shared/ui/form';
 import { Button } from '@/components/shared/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/shared/ui/card';
+import { Card, CardContent } from '@/components/shared/ui/card';
 import { TextField } from '../../form-fields';
 
 function buildConfirmationString(appName: string): string {
@@ -55,19 +49,13 @@ export function DeleteAppForm({ appName, onSubmit, isSubmitting = false }: Delet
 
   return (
     <Card className="w-full max-w-2xl mx-auto dark:bg-neutral-800 dark:border-white/10">
-      <CardHeader>
-        <CardTitle className="text-red-600 dark:text-red-400">Delete App</CardTitle>
-        <CardDescription>
-          Please make sure you're absolutely certain you want to delete this app.
-        </CardDescription>
-      </CardHeader>
       <CardContent>
         <Form {...form}>
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <p className="text-sm text-gray-700 dark:text-gray-300 mb-2">
+              To confirm deletion, please type the following exactly:
+            </p>
             <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-500/30 rounded-lg p-4">
-              <p className="text-sm text-red-800 dark:text-red-200 mb-2">
-                To confirm deletion, please type the following exactly:
-              </p>
               <code className="bg-red-100 dark:bg-red-900/30 px-2 py-1 rounded text-sm font-mono text-red-900 dark:text-red-200">
                 {expectedConfirmation}
               </code>

packages/apps/app-dashboard/src/components/developer-dashboard/app/forms/DeleteAppVersionForm.tsx

@@ -3,13 +3,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Form } from '@/components/shared/ui/form';
 import { Button } from '@/components/shared/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/shared/ui/card';
+import { Card, CardContent } from '@/components/shared/ui/card';
 import { NumberSelectField, TextField } from '../../form-fields';
 import { App, AppVersion } from '@/types/developer-dashboard/appTypes';
 
@@ -90,19 +84,13 @@ export function DeleteAppVersionForm({
 
   return (
     <Card className="w-full max-w-2xl mx-auto dark:bg-neutral-800 dark:border-white/10">
-      <CardHeader>
-        <CardTitle className="text-red-600 dark:text-red-400">Delete App Version</CardTitle>
-        <CardDescription>
-          Please make sure you're absolutely certain you want to delete this app version.
-        </CardDescription>
-      </CardHeader>
       <CardContent>
         <Form {...form}>
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <p className="text-sm text-gray-700 dark:text-gray-300 mb-2">
+              To confirm deletion, please type the following exactly:
+            </p>
             <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-500/30 rounded-lg p-4">
-              <p className="text-sm text-red-800 dark:text-red-200 mb-2">
-                To confirm deletion, please type the following exactly:
-              </p>
               <code className="bg-red-100 dark:bg-red-900/30 px-2 py-1 rounded text-sm font-mono text-red-900 dark:text-red-200">
                 {expectedConfirmation}
               </code>

packages/apps/app-dashboard/src/components/developer-dashboard/app/wrappers/DeleteAppWrapper.tsx

@@ -1,21 +1,31 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { reactClient as vincentApiClient } from '@lit-protocol/vincent-registry-sdk';
+import { getClient } from '@lit-protocol/vincent-contracts-sdk';
 import { DeleteAppForm } from '../forms/DeleteAppForm';
 import { StatusMessage } from '@/components/shared/ui/statusMessage';
 import { getErrorMessage } from '@/utils/developer-dashboard/app-forms';
 import Loading from '@/components/shared/ui/Loading';
-import { reactClient as vincentApiClient } from '@lit-protocol/vincent-registry-sdk';
+import { initPkpSigner } from '@/utils/developer-dashboard/initPkpSigner';
+import useReadAuthInfo from '@/hooks/user-dashboard/useAuthInfo';
+import { useBlockchainAppData } from '@/hooks/useBlockchainAppData';
 
 export function DeleteAppWrapper() {
   const { appId } = useParams<{ appId: string }>();
+  const { authInfo, sessionSigs } = useReadAuthInfo();
+  const [isProcessing, setIsProcessing] = useState(false);
 
-  // Fetching
+  // Fetching app data
   const {
     data: app,
     isLoading: appLoading,
     isError: appError,
   } = vincentApiClient.useGetAppQuery({ appId: Number(appId) });
 
+  // Fetching blockchain data to determine if app is published
+  const { blockchainAppData, blockchainAppLoading } = useBlockchainAppData(Number(appId));
+  const isPublished = blockchainAppData !== null;
+
   // Mutation
   const [deleteApp, { isLoading, isSuccess, isError, data, error }] =
     vincentApiClient.useDeleteAppMutation();
@@ -31,7 +41,7 @@ export function DeleteAppWrapper() {
   }, [isSuccess, data, navigate]);
 
   // Loading states
-  if (appLoading) return <Loading />;
+  if (appLoading || blockchainAppLoading) return <Loading />;
 
   // Error states
   if (appError) return <StatusMessage message="Failed to load app" type="error" />;
@@ -52,22 +62,39 @@ export function DeleteAppWrapper() {
   }
 
   const handleSubmit = async () => {
-    await deleteApp({ appId: app.appId });
+    setIsProcessing(true);
+    try {
+      // Step 1: Always delete in registry
+      await deleteApp({ appId: app.appId });
+
+      // Step 2: If published, also delete on-chain
+      if (isPublished) {
+        const pkpSigner = await initPkpSigner({ authInfo, sessionSigs });
+        const client = getClient({ signer: pkpSigner });
+        await client.deleteApp({
+          appId: Number(app.appId),
+        });
+      }
+    } finally {
+      setIsProcessing(false);
+    }
   };
   return (
     <div className="space-y-6">
       <div className="w-full max-w-2xl mx-auto">
         <div className="flex items-start justify-between">
           <div className="flex-1">
             <h1 className="text-3xl font-bold text-neutral-800 dark:text-white">Delete App</h1>
-            <p className="text-gray-600 dark:text-white/60 mt-2">
-              Delete "{app.name}" and all its data.
-            </p>
+            <p className="text-gray-600 dark:text-white/60 mt-2">Delete "{app.name}"?</p>
           </div>
         </div>
       </div>
 
-      <DeleteAppForm appName={app.name} onSubmit={handleSubmit} isSubmitting={isLoading} />
+      <DeleteAppForm
+        appName={app.name}
+        onSubmit={handleSubmit}
+        isSubmitting={isLoading || isProcessing}
+      />
     </div>
   );
 }