Testing feedback Fixes (#346)

* fix: default values

* fix: unlock warning intermittently

* fix: cancel deep scan issues

* fix: card sizing

* fix: dropdown svgs

* fix: app count mismatch

* improvements

* update deps and fix vitest

Author: chcmedeiros

components/sections/migrate/__tests__/deep-scan-modal.test.tsx

@@ -154,16 +154,16 @@ describe('DeepScanModal', () => {
     it('should generate correct path for single account + single address', () => {
       render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
 
-      // Check initial derivation path (defaults: account 1, address 0)
-      const pathDisplay = screen.getByText(/m\/44'\/354'\/1'\/0'\/0'/i)
+      // Check initial derivation path (defaults: account 0, address 0)
+      const pathDisplay = screen.getByText(/m\/44'\/354'\/0'\/0'\/0'/i)
       expect(pathDisplay).toBeInTheDocument()
     })
 
     it('should update path when account index changes', () => {
       render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
 
       // Find and update account index input
-      const accountInput = screen.getByDisplayValue('1') as HTMLInputElement
+      const accountInput = screen.getByLabelText('Account Index') as HTMLInputElement
       fireEvent.change(accountInput, { target: { value: '5' } })
 
       // Check updated derivation path
@@ -179,7 +179,7 @@ describe('DeepScanModal', () => {
       fireEvent.change(addressInput, { target: { value: '3' } })
 
       // Check updated derivation path
-      const pathDisplay = screen.getByText(/m\/44'\/354'\/1'\/0'\/3'/i)
+      const pathDisplay = screen.getByText(/m\/44'\/354'\/0'\/0'\/3'/i)
       expect(pathDisplay).toBeInTheDocument()
     })
 
@@ -199,7 +199,7 @@ describe('DeepScanModal', () => {
       // Wait for re-render
       await waitFor(() => {
         // Check for range notation in path
-        expect(screen.getByText(/m\/44'\/354'\/\{1\.\.\.5\}'\/0'\/\{0\.\.\.5\}'/i)).toBeInTheDocument()
+        expect(screen.getByText(/m\/44'\/354'\/\{0\.\.\.5\}'\/0'\/\{0\.\.\.5\}'/i)).toBeInTheDocument()
       })
     })
 
@@ -361,7 +361,7 @@ describe('DeepScanModal', () => {
       fireEvent.click(addressRangeTab)
 
       await waitFor(() => {
-        const accountInput = screen.getByDisplayValue('1') as HTMLInputElement
+        const accountInput = screen.getByLabelText('Account Index') as HTMLInputElement
         fireEvent.change(accountInput, { target: { value: '3' } })
 
         const startInputs = screen.getAllByLabelText('Start Index')

components/sections/migrate/__tests__/ledger-unlock-reminder.test.tsx

@@ -38,40 +38,27 @@ describe('LedgerUnlockReminder', () => {
     expect(screen.getByText('Keep your Ledger device unlocked')).toBeInTheDocument()
   })
 
-  it('should hide reminder after display timeout', async () => {
+  it('should keep reminder visible after it appears', async () => {
     render(<LedgerUnlockReminder isVisible={true} />)
 
-    // Fast-forward to when reminder appears
-    act(() => {
-      vi.advanceTimersByTime(50000) // 50 seconds
-    })
-    expect(screen.getByText('Keep your Ledger device unlocked')).toBeInTheDocument()
-
-    // Fast-forward by the display time (10 seconds)
-    act(() => {
-      vi.advanceTimersByTime(10000)
-    })
+    // Initially should not be visible
     expect(screen.queryByText('Keep your Ledger device unlocked')).not.toBeInTheDocument()
-  })
-
-  it('should show reminder repeatedly at intervals', async () => {
-    render(<LedgerUnlockReminder isVisible={true} />)
 
-    // First reminder at 50 seconds
+    // Fast-forward to when reminder appears (50 seconds)
     act(() => {
       vi.advanceTimersByTime(50000)
     })
     expect(screen.getByText('Keep your Ledger device unlocked')).toBeInTheDocument()
 
-    // Hide after 10 seconds
+    // Fast-forward by 10 seconds (old behavior would hide it here)
     act(() => {
       vi.advanceTimersByTime(10000)
     })
-    expect(screen.queryByText('Keep your Ledger device unlocked')).not.toBeInTheDocument()
+    expect(screen.getByText('Keep your Ledger device unlocked')).toBeInTheDocument()
 
-    // Second reminder should appear after another 60 seconds (total 120 seconds)
+    // Fast-forward by much longer time - should still be visible
     act(() => {
-      vi.advanceTimersByTime(60000)
+      vi.advanceTimersByTime(120000) // 2 more minutes
     })
     expect(screen.getByText('Keep your Ledger device unlocked')).toBeInTheDocument()
   })

components/sections/migrate/deep-scan-modal.tsx

@@ -2,7 +2,6 @@
 
 import { use$ } from '@legendapp/state/react'
 import { AlertCircle, Loader2 } from 'lucide-react'
-import Image from 'next/image'
 import { useMemo, useState } from 'react'
 import { AppStatus } from 'state/ledger'
 import { uiState$ } from 'state/ui'
@@ -15,15 +14,14 @@ import { Progress } from '@/components/ui/progress'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import type { AppId } from '@/config/apps'
 import { appsConfigs, getChainName, polkadotAppConfig } from '@/config/apps'
+import type { RangeField, ScanType } from '@/lib/types/scan'
+import { RangeFieldEnum, SCAN_LIMITS, ScanTypeEnum } from '@/lib/types/scan'
 import { cn, getAppTotalAccounts } from '@/lib/utils'
+import { formatIndexDisplay, parseIndexConfig, validateIndexConfig } from '@/lib/utils/scan-indices'
 import type { App } from '@/state/ledger'
 import { IndexInputSection } from './index-input-section'
 import { LedgerUnlockReminder } from './ledger-unlock-reminder'
 
-import type { ScanType, RangeField } from '@/lib/types/scan'
-import { ScanTypeEnum, RangeFieldEnum } from '@/lib/types/scan'
-import { parseIndexConfig, validateIndexConfig, formatIndexDisplay } from '@/lib/utils/scan-indices'
-
 interface DeepScanModalProps {
   isOpen: boolean
   onClose: () => void
@@ -66,14 +64,15 @@ export function DeepScanModal({
   onCancel,
   onDone,
 }: DeepScanModalProps) {
+  const icons = use$(uiState$.icons)
   const [accountScanType, setAccountScanType] = useState<ScanType>(ScanTypeEnum.SINGLE)
   const [addressScanType, setAddressScanType] = useState<ScanType>(ScanTypeEnum.SINGLE)
-  const [accountIndex, setAccountIndex] = useState<string>('1')
-  const [accountStartIndex, setAccountStartIndex] = useState<string>('1')
-  const [accountEndIndex, setAccountEndIndex] = useState<string>('5')
-  const [addressIndex, setAddressIndex] = useState<string>('0')
-  const [addressStartIndex, setAddressStartIndex] = useState<string>('0')
-  const [addressEndIndex, setAddressEndIndex] = useState<string>('5')
+  const [accountIndex, setAccountIndex] = useState<string>(SCAN_LIMITS.DEFAULT_SINGLE.toString())
+  const [accountStartIndex, setAccountStartIndex] = useState<string>(SCAN_LIMITS.DEFAULT_RANGE_START.toString())
+  const [accountEndIndex, setAccountEndIndex] = useState<string>(SCAN_LIMITS.DEFAULT_RANGE_END.toString())
+  const [addressIndex, setAddressIndex] = useState<string>(SCAN_LIMITS.DEFAULT_SINGLE.toString())
+  const [addressStartIndex, setAddressStartIndex] = useState<string>(SCAN_LIMITS.DEFAULT_RANGE_START.toString())
+  const [addressEndIndex, setAddressEndIndex] = useState<string>(SCAN_LIMITS.DEFAULT_RANGE_END.toString())
   const [selectedChain, setSelectedChain] = useState<AppId | 'all'>('all')
 
   // Get available chains from config
@@ -216,7 +215,7 @@ export function DeepScanModal({
       {/* Scanning Apps Grid */}
       {scanningApps && scanningApps.length > 0 && (
         <div className="pt-2 mb-4">
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3">
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
             {scanningApps.map(app => (
               <DeepScanAppItem key={app.id} app={app} />
             ))}
@@ -274,18 +273,22 @@ export function DeepScanModal({
 
     return (
       <CustomTooltip tooltipBody={statusText}>
-        <div className={cn('flex flex-col items-center p-4 rounded-lg border transition-all min-h-[80px]', statusClass)}>
+        <div className={cn('flex flex-col items-center p-3 rounded-lg border transition-all', statusClass)}>
           <div className="relative mb-2">
             <TokenIcon icon={icon} symbol={appName.substring(0, 3)} size="md" />
             {displayBadge && (
               <div className="absolute -right-2 -bottom-2">
-                <Badge variant="outline" className="bg-white h-5 min-w-5 px-0 justify-center rounded-full text-xs">
+                <Badge
+                  variant="outline"
+                  className="bg-white h-5 min-w-5 px-0 justify-center rounded-full text-xs"
+                  data-testid="app-sync-badge"
+                >
                   {statusIcon}
                 </Badge>
               </div>
             )}
           </div>
-          <span className="text-xs font-medium text-center leading-tight">{appName}</span>
+          <span className="text-xs font-medium truncate max-w-full">{appName}</span>
         </div>
       </CustomTooltip>
     )
@@ -336,37 +339,18 @@ export function DeepScanModal({
                 <span>All Chains</span>
               </div>
             </SelectItem>
-            {availableChains.map(chain => (
-              <SelectItem key={chain.id} value={chain.id}>
-                <div className="flex items-center gap-2">
-                  {chain.token.logoId ? (
-                    <Image
-                      src={`/images/logos/${chain.token.logoId}.svg`}
-                      alt={chain.name}
-                      width={20}
-                      height={20}
-                      className="w-5 h-5"
-                      onError={e => {
-                        e.currentTarget.style.display = 'none'
-                      }}
-                    />
-                  ) : (
-                    <Image
-                      src={`/images/logos/${chain.id}.svg`}
-                      alt={chain.name}
-                      width={20}
-                      height={20}
-                      className="w-5 h-5"
-                      onError={e => {
-                        e.currentTarget.style.display = 'none'
-                      }}
-                    />
-                  )}
-                  <span>{chain.name}</span>
-                  <span className="text-xs text-gray-500">({chain.token.symbol})</span>
-                </div>
-              </SelectItem>
-            ))}
+            {availableChains.map(chain => {
+              const icon = icons[chain.id]
+              return (
+                <SelectItem key={chain.id} value={chain.id}>
+                  <div className="flex items-center gap-2">
+                    <TokenIcon icon={icon} symbol={chain.name.substring(0, 3)} size="sm" />
+                    <span>{chain.name}</span>
+                    <span className="text-xs text-gray-500">({chain.token.symbol})</span>
+                  </div>
+                </SelectItem>
+              )
+            })}
           </SelectContent>
         </Select>
       </div>

components/sections/migrate/ledger-unlock-reminder.tsx

@@ -13,38 +13,36 @@ const LEDGER_MINIMUM_UNLOCK_REMINDER_INTERVAL = 60000
 
 const LEDGER_UNLOCK_REMINDER_INTERVAL = LEDGER_MINIMUM_UNLOCK_REMINDER_INTERVAL - 10000 // Show 10 seconds before 1 minute
 
-// Time the reminder is shown on screen (10 seconds in milliseconds)
-const LEDGER_UNLOCK_REMINDER_TIME_ON_SCREEN = 10000
-
 export function LedgerUnlockReminder({ isVisible }: LedgerUnlockReminderProps) {
   const [showReminder, setShowReminder] = useState(false)
+  const [hasShownOnce, setHasShownOnce] = useState(false)
 
   useEffect(() => {
     if (!isVisible) {
       setShowReminder(false)
+      setHasShownOnce(false)
       return
     }
 
     // Show initial reminder at 50 seconds (10 seconds before 1 minute)
     const initialTimer = setTimeout(() => {
       setShowReminder(true)
-      // Hide after 10 seconds
-      setTimeout(() => setShowReminder(false), LEDGER_UNLOCK_REMINDER_TIME_ON_SCREEN)
+      setHasShownOnce(true)
+      // Keep it persistent after first appearance
     }, LEDGER_UNLOCK_REMINDER_INTERVAL)
 
-    // Show reminder every minute after the initial one
-    const intervalTimer = setInterval(() => {
-      setShowReminder(true)
-      // Hide after 10 seconds
-      setTimeout(() => setShowReminder(false), LEDGER_UNLOCK_REMINDER_TIME_ON_SCREEN)
-    }, LEDGER_MINIMUM_UNLOCK_REMINDER_INTERVAL)
-
     return () => {
       clearTimeout(initialTimer)
-      clearInterval(intervalTimer)
     }
   }, [isVisible])
 
+  // Once shown, keep it visible while isVisible is true
+  useEffect(() => {
+    if (isVisible && hasShownOnce) {
+      setShowReminder(true)
+    }
+  }, [isVisible, hasShownOnce])
+
   if (!showReminder) return null
 
   return (