chore(dashboard): update VY and architectural improvements modals

awisniew207 · awisniew207 · commit aeddb5305b6f · 2025-10-23T16:11:13.000-07:00
diff --git a/packages/apps/app-dashboard/src/components/user-dashboard/dashboard/PermittedAppsPage.tsx b/packages/apps/app-dashboard/src/components/user-dashboard/dashboard/PermittedAppsPage.tsx
@@ -7,7 +7,6 @@ import { theme, fonts } from '@/components/user-dashboard/connect/ui/theme';
 import { Package, ChevronDown, Check, Filter } from 'lucide-react';
 import { AgentAppPermission } from '@/utils/user-dashboard/getAgentPkps';
 import { PermittedAppCard } from './ui/PermittedAppCard';
-import { VincentYieldPromotionCard } from './ui/VincentYieldPromotionCard';
 
 type FilterState = 'permitted' | 'unpermitted' | 'all';
 
@@ -18,7 +17,6 @@ type PermittedAppsPageProps = {
   filterState: FilterState;
   setFilterState: (state: FilterState) => void;
   appVersionsMap: Record<string, AppVersion[]>;
-  hasVincentYieldPKP: boolean;
 };
 
 export function PermittedAppsPage({
@@ -28,7 +26,6 @@ export function PermittedAppsPage({
   unpermittedPkps,
   filterState,
   setFilterState,
-  hasVincentYieldPKP,
 }: PermittedAppsPageProps) {
   const [showDropdown, setShowDropdown] = useState(false);
   const [showContent, setShowContent] = useState(false);
@@ -177,12 +174,7 @@ export function PermittedAppsPage({
               )}
             </div>
           </div>
-          {apps.length === 0 && !hasVincentYieldPKP && filterState === 'permitted' ? (
-            <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
-              {/* Show only Vincent Yield card when no other apps and on permitted filter */}
-              <VincentYieldPromotionCard index={0} />
-            </div>
-          ) : apps.length === 0 ? (
+          {apps.length === 0 ? (
             <div className="flex items-center justify-center min-h-[400px] w-full lg:mr-48">
               <div className="text-center max-w-md mx-auto px-6">
                 <div
@@ -213,25 +205,18 @@ export function PermittedAppsPage({
             </div>
           ) : (
             <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
-              {/* Show Vincent Yield promotion card first if not permitted and on permitted filter */}
-              {!hasVincentYieldPKP && filterState === 'permitted' && (
-                <VincentYieldPromotionCard index={0} />
-              )}
               {apps.map((app, index) => {
                 const permittedPermission = permittedPkps.find((p) => p.appId === app.appId);
                 const unpermittedPermission = unpermittedPkps.find((p) => p.appId === app.appId);
                 const permission = permittedPermission || unpermittedPermission;
                 const isUnpermitted = !!unpermittedPermission && !permittedPermission;
-                // Adjust index for animation delay if Vincent Yield card is shown
-                const cardIndex =
-                  !hasVincentYieldPKP && filterState === 'permitted' ? index + 1 : index;
                 return (
                   <PermittedAppCard
                     key={app.appId}
                     app={app}
                     permission={permission}
                     isUnpermitted={isUnpermitted}
-                    index={cardIndex}
+                    index={index}
                     appVersionsMap={appVersionsMap}
                   />
                 );
diff --git a/packages/apps/app-dashboard/src/components/user-dashboard/dashboard/PermittedAppsWrapper.tsx b/packages/apps/app-dashboard/src/components/user-dashboard/dashboard/PermittedAppsWrapper.tsx
@@ -1,9 +1,10 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { PermittedAppsPage } from './PermittedAppsPage';
 import { reactClient as vincentApiClient } from '@lit-protocol/vincent-registry-sdk';
 import { useReadAuthInfo } from '@/hooks/user-dashboard/useAuthInfo';
 import { AuthenticationErrorScreen } from '../connect/AuthenticationErrorScreen';
 import { GeneralErrorScreen } from '@/components/user-dashboard/connect/GeneralErrorScreen';
+import { VincentYieldModal } from '../landing/VincentYieldModal';
 import { ConnectToVincentYieldModal } from '../landing/ConnectToVincentYieldModal';
 import { env } from '@/config/env';
 import { useAllAgentApps } from '@/hooks/user-dashboard/useAllAgentApps';
@@ -17,7 +18,8 @@ export function PermittedAppsWrapper() {
   const { authInfo, sessionSigs, isProcessing, error } = readAuthInfo;
 
   const userAddress = authInfo?.userPKP?.ethAddress || '';
-  const [showConnectModal, setShowConnectModal] = useState(false);
+  const [showVincentYieldModal, setShowVincentYieldModal] = useState(false);
+  const [hasUserDismissedModal, setHasUserDismissedModal] = useState(false);
   const [filterState, setFilterState] = useState<FilterState>('permitted');
 
   // Fetch all agent app permissions
@@ -67,26 +69,26 @@ export function PermittedAppsWrapper() {
 
   const isUserAuthed = authInfo?.userPKP && sessionSigs;
 
-  // Find the agent PKP that's permitted for Vincent Yield
-  const vincentYieldPKP = permittedPkps.find(
-    (pkp) => pkp.appId === Number(env.VITE_VINCENT_YIELD_APPID),
-  );
+  // Check if Vincent Yield app is permitted or unpermitted (i.e., user has any connection to it)
+  const vincentYieldAppId = Number(env.VITE_VINCENT_YIELD_APPID);
+  const hasVincentYieldPerms =
+    permittedPkps.some((p) => p.appId === vincentYieldAppId) ||
+    unpermittedPkps.some((p) => p.appId === vincentYieldAppId);
 
-  // Find PKPs with appId = -1 (unconnected PKPs)
+  // Find PKPs with appId = -1 (unconnected PKPs - for migration)
   const unconnectedPKP = permittedPkps.find((pkp) => pkp.appId === -1);
 
-  // Show connect modal for unconnected PKPs (but not when there are no PKPs at all)
-  React.useEffect(() => {
-    if (
-      isUserAuthed &&
-      !showConnectModal &&
-      unconnectedPKP &&
-      !vincentYieldPKP &&
-      permittedPkps.length > 0
-    ) {
-      setShowConnectModal(true);
+  // Show Vincent Yield modal if user is authenticated but doesn't have permissions
+  useEffect(() => {
+    if (isUserAuthed && !hasUserDismissedModal) {
+      if (!hasVincentYieldPerms && !showVincentYieldModal) {
+        setShowVincentYieldModal(true);
+      } else if (hasVincentYieldPerms && showVincentYieldModal) {
+        // Close modal if Vincent Yield perms are now detected
+        setShowVincentYieldModal(false);
+      }
     }
-  }, [isUserAuthed, showConnectModal, unconnectedPKP, vincentYieldPKP, permittedPkps.length]);
+  }, [isUserAuthed, hasVincentYieldPerms, showVincentYieldModal, hasUserDismissedModal]);
 
   // Show loading while auth is processing
   if (isProcessing) {
@@ -127,11 +129,23 @@ export function PermittedAppsWrapper() {
         filterState={filterState}
         setFilterState={setFilterState}
         appVersionsMap={appVersionsMap}
-        hasVincentYieldPKP={!!vincentYieldPKP}
       />
-      {showConnectModal && unconnectedPKP && (
-        <ConnectToVincentYieldModal agentPKP={unconnectedPKP.pkp} />
-      )}
+      {showVincentYieldModal && unconnectedPKP ? (
+        <ConnectToVincentYieldModal
+          agentPKP={unconnectedPKP.pkp}
+          onClose={() => {
+            setShowVincentYieldModal(false);
+            setHasUserDismissedModal(true);
+          }}
+        />
+      ) : showVincentYieldModal ? (
+        <VincentYieldModal
+          onClose={() => {
+            setShowVincentYieldModal(false);
+            setHasUserDismissedModal(true);
+          }}
+        />
+      ) : null}
     </>
   );
 }
diff --git a/packages/apps/app-dashboard/src/components/user-dashboard/landing/ConnectToVincentYieldModal.tsx b/packages/apps/app-dashboard/src/components/user-dashboard/landing/ConnectToVincentYieldModal.tsx
@@ -7,13 +7,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/shared/ui/dialog';
-import { Button } from '@/components/shared/ui/button';
-import { theme } from '../connect/ui/theme';
-import { AlertCircle, ArrowRight } from 'lucide-react';
+import { theme, fonts } from '../connect/ui/theme';
+import { AlertCircle, ArrowRight, Sparkles } from 'lucide-react';
 import { env } from '@/config/env';
 
 interface ConnectToVincentYieldModalProps {
   agentPKP: IRelayPKP;
+  onClose?: () => void;
 }
 
 export function ConnectToVincentYieldModal({ agentPKP }: ConnectToVincentYieldModalProps) {
@@ -34,31 +34,60 @@ export function ConnectToVincentYieldModal({ agentPKP }: ConnectToVincentYieldMo
           50% { opacity: 0.8; }
         }
         button[class*="absolute top-4 right-4"] {
-          opacity: 0.15 !important;
-        }
-        button[class*="absolute top-4 right-4"]:hover {
-          opacity: 0.4 !important;
+          display: none !important;
         }
       `}</style>
       <DialogContent
-        className={`w-[calc(100%-1rem)] max-w-md mx-auto ${theme.mainCard} border ${theme.mainCardBorder} rounded-2xl shadow-2xl overflow-hidden p-0 [&>button]:hidden`}
+        className="w-[calc(100%-1rem)] max-w-md border-2 rounded-2xl shadow-2xl overflow-hidden p-0 backdrop-blur-xl"
+        style={{
+          borderColor: theme.brandOrange,
+          background: `linear-gradient(135deg, ${theme.mainCard} 0%, rgba(224, 90, 26, 0.05) 100%)`,
+        }}
         onPointerDownOutside={(e) => e.preventDefault()}
         onEscapeKeyDown={(e) => e.preventDefault()}
       >
-        <DialogHeader className={`px-3 sm:px-6 pt-4 pb-3 border-b ${theme.cardBorder}`}>
-          <div className="flex items-center justify-center mb-3">
+        {/* NEW badge */}
+        <div
+          className="absolute top-4 right-4 px-2 py-1 rounded-md text-xs font-bold tracking-wide z-10"
+          style={{
+            backgroundColor: theme.brandOrange,
+            color: 'white',
+            ...fonts.heading,
+          }}
+        >
+          REQUIRED
+        </div>
+
+        <DialogHeader className={`px-4 sm:px-6 pt-6 pb-4`}>
+          {/* Logo and Title */}
+          <div className="flex items-center gap-3 mb-4">
             <div
-              className={`inline-flex items-center justify-center w-12 h-12 rounded-full bg-orange-100 dark:bg-orange-900/30`}
+              className="w-16 h-16 rounded-lg flex items-center justify-center flex-shrink-0"
+              style={{
+                backgroundColor: theme.brandOrange,
+              }}
             >
-              <AlertCircle className="w-6 h-6 text-orange-500" />
+              <Sparkles className="w-8 h-8 text-white" />
+            </div>
+            <div className="flex flex-col justify-center min-w-0 flex-1">
+              <DialogTitle
+                className={`text-base font-semibold leading-tight ${theme.text}`}
+                style={fonts.heading}
+              >
+                Connect to Vincent Yield
+              </DialogTitle>
+              <span className={`text-sm leading-tight`} style={{ color: theme.brandOrange }}>
+                Migration Required
+              </span>
             </div>
           </div>
-          <DialogTitle className={`text-lg font-semibold ${theme.text} text-center`}>
-            Architectural Update Required
-          </DialogTitle>
-          <DialogDescription className={`${theme.textMuted} text-sm text-center mt-2`}>
-            There's been an architectural change to Vincent Wallets. Your existing wallet needs to
-            be connected to Vincent Yield to continue.
+
+          <DialogDescription
+            className={`${theme.textMuted} text-xs leading-relaxed`}
+            style={fonts.body}
+          >
+            Your existing Vincent Wallet needs to be connected to Vincent Yield due to architectural
+            improvements.
           </DialogDescription>
         </DialogHeader>
 
@@ -89,37 +118,36 @@ export function ConnectToVincentYieldModal({ agentPKP }: ConnectToVincentYieldMo
           </div>
         </div>
 
-        <div className="flex px-3 sm:px-6 pt-3 pb-4 sm:pb-6 border-t border-gray-200 dark:border-gray-700">
-          <Button
+        <div className="px-4 sm:px-6 pb-6">
+          <button
             onClick={handleConnect}
             disabled={isRedirecting}
-            className={`w-full font-normal tracking-wide transition-all duration-200 border text-white flex items-center justify-center gap-2 ${
-              isRedirecting
-                ? 'bg-gray-100 dark:bg-gray-800 !text-gray-400 border-gray-200 dark:border-gray-700 cursor-not-allowed'
-                : ''
-            }`}
+            className="w-full flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium transition-colors text-white disabled:opacity-50 disabled:cursor-not-allowed"
             style={{
-              borderRadius: '0.5rem',
-              fontSize: 'clamp(0.75rem, 3vw, 0.875rem)',
-              padding: 'clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 4vw, 1.5rem)',
-              ...(isRedirecting
-                ? {}
-                : {
-                    backgroundColor: '#e55a1a',
-                    borderColor: '#e55a1a',
-                    animation: 'pulse 2s ease-in-out infinite',
-                  }),
+              ...fonts.heading,
+              backgroundColor: isRedirecting ? theme.textMuted : theme.brandOrange,
+              animation: isRedirecting ? 'none' : 'pulse 2s ease-in-out infinite',
+            }}
+            onMouseEnter={(e) => {
+              if (!isRedirecting) {
+                e.currentTarget.style.backgroundColor = theme.brandOrangeDarker;
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isRedirecting) {
+                e.currentTarget.style.backgroundColor = theme.brandOrange;
+              }
             }}
           >
             {isRedirecting ? (
               'Redirecting...'
             ) : (
               <>
-                Connect to Vincent Yield
-                <ArrowRight className="w-4 h-4" />
+                <ArrowRight className="w-4 h-4 flex-shrink-0 -mt-px" />
+                <span className="leading-none">Connect to Vincent Yield</span>
               </>
             )}
-          </Button>
+          </button>
         </div>
       </DialogContent>
     </Dialog>
diff --git a/packages/apps/app-dashboard/src/components/user-dashboard/landing/VincentYieldModal.tsx b/packages/apps/app-dashboard/src/components/user-dashboard/landing/VincentYieldModal.tsx
