chore(dashboard): wrap up UI changes, use open source fonts

Author: awisniew207

packages/apps/app-dashboard/index.html

@@ -7,7 +7,7 @@
     <link rel="preload" as="image" href="/vincent-main-logo.png" fetchpriority="high">
 
     <!-- Fonts -->
-    <link rel="stylesheet" href="/fonts/itc-avant-garde/medium/style.css">
+    <link rel="stylesheet" href="/fonts/glacial-indifference/style.css">
     <link rel="stylesheet" href="/fonts/encode-sans-semi-expanded/style.css">
 
     <!-- Favicon -->

packages/apps/app-dashboard/public/fonts/glacial-indifference/GlacialIndifference-Regular.otf

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: 'Glacial Indifference';
+  src: url('GlacialIndifference-Regular.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+  size-adjust: 115%;
+}

packages/apps/app-dashboard/public/fonts/glacial-indifference/style.css

@@ -1,11 +1,12 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { RotateCcw } from 'lucide-react';
 import { reactClient as vincentApiClient } from '@lit-protocol/vincent-registry-sdk';
 import { StatusMessage } from '@/components/shared/ui/statusMessage';
 import { getErrorMessage } from '@/utils/developer-dashboard/app-forms';
 import Loading from '@/components/shared/ui/Loading';
-import { ArchiveRestore } from 'lucide-react';
 import { Ability } from '@/types/developer-dashboard/appTypes';
+import { theme, fonts } from '@/components/user-dashboard/connect/ui/theme';
 
 interface UndeleteAbilityWrapperProps {
   ability: Ability;
@@ -54,11 +55,15 @@ export function UndeleteAbilityButton({ ability }: UndeleteAbilityWrapperProps)
 
   return (
     <button
-      onClick={() => handleSubmit()}
-      className="inline-flex items-center gap-2 px-4 py-2 border border-green-200 dark:border-green-500/30 rounded-lg text-sm font-medium text-green-600 dark:text-green-400 bg-white dark:bg-neutral-800 hover:bg-green-50 dark:hover:bg-green-500/10 transition-colors relative z-10 !opacity-100 shadow-sm"
+      onClick={(e) => {
+        e.stopPropagation();
+        handleSubmit();
+      }}
+      className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${theme.itemBg} hover:bg-green-500/10 text-green-600 dark:text-green-400 border border-transparent hover:border-green-500/30`}
+      style={fonts.body}
     >
-      <ArchiveRestore className="h-4 w-4" />
-      Undelete Ability
+      <RotateCcw className="h-3.5 w-3.5" />
+      Restore
     </button>
   );
 }

packages/apps/app-dashboard/public/fonts/itc-avant-garde/medium/ITCAvantGardeStd-Md.ttf

@@ -1,7 +1,11 @@
 import { useState, useEffect } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { reactClient as vincentApiClient } from '@lit-protocol/vincent-registry-sdk';
+import { getClient } from '@lit-protocol/vincent-contracts-sdk';
+import * as Sentry from '@sentry/react';
 
+import { initPkpSigner } from '@/utils/developer-dashboard/initPkpSigner';
+import useReadAuthInfo from '@/hooks/user-dashboard/useAuthInfo';
 import { AppDetailsView } from '../views/AppDetailsView';
 import { EditAppForm } from '../forms/EditAppForm';
 import { CreateAppVersionForm } from '../forms/CreateAppVersionForm';
@@ -36,6 +40,7 @@ export function AppOverviewWrapper() {
   const [searchParams, setSearchParams] = useSearchParams();
   const [currentView, setCurrentView] = useState<ViewType>('details');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const { authInfo, sessionSigs } = useReadAuthInfo();
 
   const {
     data: app,
@@ -142,9 +147,37 @@ export function AppOverviewWrapper() {
   const handleDeleteAppSubmit = async () => {
     setIsSubmitting(true);
     try {
+      const isPublished = blockchainAppData !== null;
+
+      // Step 1: Delete in registry (always do this)
       await deleteApp({ appId: Number(appId) }).unwrap();
 
-      // Success - navigate back to apps list immediately
+      // Step 2: If published on-chain, also delete on-chain
+      if (isPublished) {
+        try {
+          const pkpSigner = await initPkpSigner({ authInfo, sessionSigs });
+          const client = getClient({ signer: pkpSigner });
+
+          await client.deleteApp({
+            appId: Number(appId),
+          });
+        } catch (onChainError) {
+          console.error('Failed to delete app on-chain:', onChainError);
+          // If on-chain deletion fails, log to Sentry but still navigate away
+          // The mismatch resolution UI will handle fixing the inconsistent state
+          Sentry.captureException(onChainError, {
+            extra: {
+              context: 'AppOverviewWrapper.handleDeleteAppSubmit',
+              appId: appId,
+              registryDeleted: true,
+              onChainDeleted: false,
+              userPkp: authInfo?.userPKP?.ethAddress,
+            },
+          });
+        }
+      }
+
+      // Success - navigate back to apps list
       navigate('/developer/apps');
     } catch (error) {
       console.error('Failed to delete app:', error);

packages/apps/app-dashboard/public/fonts/itc-avant-garde/medium/style.css

@@ -5,7 +5,7 @@ import { getClient } from '@lit-protocol/vincent-contracts-sdk';
 import { reactClient as vincentApiClient } from '@lit-protocol/vincent-registry-sdk';
 import { App } from '@/types/developer-dashboard/appTypes';
 import { App as ContractApp } from '@lit-protocol/vincent-contracts-sdk';
-import MutationButtonStates, { SkeletonButton } from '@/components/shared/ui/MutationButtonStates';
+import MutationButtonStates from '@/components/shared/ui/MutationButtonStates';
 import { AppMismatchResolution } from './AppMismatchResolution';
 import { initPkpSigner } from '@/utils/developer-dashboard/initPkpSigner';
 import useReadAuthInfo from '@/hooks/user-dashboard/useAuthInfo';
@@ -46,19 +46,19 @@ export function AppPublishedButtons({
     setIsProcessing(true);
 
     try {
-      // Step 1: Update registry
-      await undeleteAppInRegistry({
-        appId: appData.appId,
-      });
-
-      // Step 2: Update on-chain
+      // Step 1: Update on-chain first (if published)
       const pkpSigner = await initPkpSigner({ authInfo, sessionSigs });
       const client = getClient({ signer: pkpSigner });
 
       await client.undeleteApp({
         appId: appData.appId,
       });
 
+      // Step 2: Update registry (only after on-chain succeeds)
+      await undeleteAppInRegistry({
+        appId: appData.appId,
+      });
+
       setSuccess(`App undeleted successfully!`);
 
       setTimeout(() => {
@@ -198,24 +198,16 @@ export function AppPublishedButtons({
       )}
 
       {/* Undelete button when deleted */}
-      {registryDeleted &&
-        (isLoading ? (
-          <div className="flex items-center justify-center">
-            <SkeletonButton />
-          </div>
-        ) : (
-          <ActionButton
-            icon={RotateCcw}
-            title="Undelete App"
-            description="Restore this app to active status"
-            onClick={handleUndelete}
-            variant="success"
-            iconBg="rgb(220 252 231)"
-            iconColor="rgb(22 163 74)"
-            borderColor="rgb(187 247 208 / 0.5)"
-            hoverBorderColor="rgb(34 197 94)"
-          />
-        ))}
+      {registryDeleted && (
+        <ActionButton
+          icon={RotateCcw}
+          title="Undelete App"
+          description="Restore this app to active status"
+          onClick={handleUndelete}
+          isLoading={isLoading}
+          variant="success"
+        />
+      )}
     </div>
   );
 }

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

@@ -1,11 +1,12 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { ArchiveRestore } from 'lucide-react';
 import { reactClient as vincentApiClient } from '@lit-protocol/vincent-registry-sdk';
+
 import { StatusMessage } from '@/components/shared/ui/statusMessage';
 import { getErrorMessage } from '@/utils/developer-dashboard/app-forms';
-import Loading from '@/components/shared/ui/Loading';
-import { ArchiveRestore } from 'lucide-react';
 import { App } from '@/types/developer-dashboard/appTypes';
+import { ActionButton } from '@/components/developer-dashboard/ui/ActionButton';
 
 interface UndeleteAppWrapperProps {
   app: App;
@@ -26,21 +27,15 @@ export function UndeleteAppButton({ app }: UndeleteAppWrapperProps) {
     }
   }, [isSuccess, data, app]);
 
-  // Loading states
-  if (isLoading) return <Loading />;
-
   // Error states
   if (!app) return <StatusMessage message={`App not found`} type="error" />;
 
-  // Mutation states
-  if (isLoading) {
-    return <StatusMessage message="Undeleting app..." type="info" />;
-  }
-
+  // Success state
   if (isSuccess && data) {
     return <StatusMessage message="App undeleted successfully!" type="success" />;
   }
 
+  // Error state
   if (isError && error) {
     const errorMessage = getErrorMessage(error, 'Failed to undelete app');
     return <StatusMessage message={errorMessage} type="error" />;
@@ -53,12 +48,13 @@ export function UndeleteAppButton({ app }: UndeleteAppWrapperProps) {
   };
 
   return (
-    <button
-      onClick={() => handleSubmit()}
-      className="inline-flex items-center gap-2 px-4 py-2 border border-green-200 dark:border-green-500/30 rounded-lg text-sm font-medium text-green-600 dark:text-green-400 bg-white dark:bg-neutral-800 hover:bg-green-50 dark:hover:bg-green-500/10 transition-colors relative z-10 !opacity-100 shadow-sm"
-    >
-      <ArchiveRestore className="h-4 w-4" />
-      Undelete App
-    </button>
+    <ActionButton
+      icon={ArchiveRestore}
+      title="Undelete App"
+      description="Restore this application from the deleted state"
+      onClick={handleSubmit}
+      isLoading={isLoading}
+      variant="success"
+    />
   );
 }

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

@@ -1,18 +1,11 @@
-import { useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useUserPolicies } from '@/hooks/developer-dashboard/policy/useUserPolicies';
 import Loading from '@/components/shared/ui/Loading';
 import { StatusMessage } from '@/components/shared/ui/statusMessage';
 import { PolicyListView } from '../views/PolicyListView';
-import { CreatePolicyForm, type CreatePolicyFormData } from '../forms/CreatePolicyForm';
-import { reactClient as vincentApiClient } from '@lit-protocol/vincent-registry-sdk';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/shared/ui/dialog';
-import { fonts } from '@/components/user-dashboard/connect/ui/theme';
 
 export function PoliciesWrapper() {
   const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [isCreating, setIsCreating] = useState(false);
 
   const {
     data: policies,
@@ -21,63 +14,23 @@ export function PoliciesWrapper() {
     isError: policiesError,
   } = useUserPolicies();
 
-  const [createPolicy] = vincentApiClient.useCreatePolicyMutation();
-
-  // Check if we should open the create modal from URL
-  const showCreateModal = searchParams.get('action') === 'create-policy';
-
   // Loading states first
   if (policiesLoading) return <Loading />;
 
   // Combined error states
   if (policiesError) return <StatusMessage message="Failed to load policies" type="error" />;
 
-  const handleOpenCreateModal = () => {
-    setSearchParams({ action: 'create-policy' });
-  };
-
-  const handleCloseCreateModal = () => {
-    setSearchParams({});
-  };
-
-  const handleCreatePolicy = async (data: CreatePolicyFormData) => {
-    const { packageName, ...policyCreateData } = data;
-    setIsCreating(true);
-    try {
-      const result = await createPolicy({
-        packageName,
-        policyCreate: { ...policyCreateData },
-      }).unwrap();
-
-      setTimeout(() => {
-        handleCloseCreateModal();
-        navigate(`/developer/policies/policy/${encodeURIComponent(result.packageName)}`);
-      }, 1500);
-    } catch (error) {
-      setIsCreating(false);
-      throw error;
-    }
+  const handleNavigateToCreate = () => {
+    navigate('/developer/policies/create-policy');
   };
 
   return (
     <>
       <PolicyListView
         policies={policies}
         deletedPolicies={deletedPolicies}
-        onCreatePolicy={handleOpenCreateModal}
+        onCreatePolicy={handleNavigateToCreate}
       />
-
-      {/* Create Policy Modal */}
-      <Dialog open={showCreateModal} onOpenChange={handleCloseCreateModal}>
-        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-950">
-          <DialogHeader>
-            <DialogTitle className="text-lg font-semibold" style={fonts.heading}>
-              Create New Policy
-            </DialogTitle>
-          </DialogHeader>
-          <CreatePolicyForm onSubmit={handleCreatePolicy} isSubmitting={isCreating} />
-        </DialogContent>
-      </Dialog>
     </>
   );
 }