release: Nested multisig support, updated landing page, updated dependencies (#317)

* feature: Nested multisig (#310)

* retry multisig detect

* nested multisig example

* Transfer button example

* approve multisig call

- Allow to choose multsig as signatory
- New dropdown menu to choose signatory from multisig

* Fix isNested condition and clean up (#309)

* merge dev

* fix nested case condition and clean up

* fix tests

* format

---------

Co-authored-by: Carlos Medeiros <[email protected]>

* Remove letter animation form home page (#312)

* Remove phrase "without proper guid..." from landing page (#313)

* update deps (#316)

---------

Co-authored-by: Carlos Medeiros <[email protected]>

Author: ioanSflt

components/hooks/useTransactionStatus.ts

@@ -61,17 +61,29 @@ export const useTransactionStatus = <T extends GenericFunction>(
       hash: txDetails?.txHash,
       blockHash: txDetails?.blockHash,
       blockNumber: txDetails?.blockNumber,
+      callData: txDetails?.callData,
+      callHash: txDetails?.callHash,
     }))
   }, [])
 
   // Run a generic transaction
   const runTransaction = useCallback(
     async (...args: Parameters<T>) => {
-      setTxStatus({
-        status: TransactionStatus.IS_LOADING,
-      })
-      await transactionFn(updateTxStatus, ...args)
-      setIsTxFinished(true)
+      try {
+        setTxStatus({
+          status: TransactionStatus.IS_LOADING,
+        })
+        await transactionFn(updateTxStatus, ...args)
+        setIsTxFinished(true)
+      } catch (error) {
+        console.error('[useTransactionStatus] Transaction error:', error)
+        setTxStatus({
+          status: TransactionStatus.ERROR,
+          statusMessage: 'An unexpected error occurred',
+        })
+        setIsTxFinished(true)
+        throw error
+      }
     },
     [transactionFn, updateTxStatus]
   )

components/sections/home/home-page.tsx

@@ -19,8 +19,6 @@ export function HomePage({
   subtitle = 'Simplifying your journey to the new Polkadot Universal Ledger App',
   animationSpeed = 1,
 }: HomePageProps) {
-  const words = title.split(' ')
-
   return (
     <div className="relative min-h-screen w-full flex items-center justify-center overflow-hidden">
       {/* Background with gradient and animations */}
@@ -33,31 +31,20 @@ export function HomePage({
           transition={{ duration: 2 / animationSpeed }}
           className="max-w-4xl mx-auto"
         >
-          <h1 className="text-4xl sm:text-6xl md:text-7xl font-bold mb-6 tracking-tighter">
-            {words.map((word, wordIndex) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: word content makes index stable
-              <span key={`word-${word}-${wordIndex}`} className="inline-block mr-4 last:mr-0">
-                {word.split('').map((letter, letterIndex) => (
-                  <motion.span
-                    // biome-ignore lint/suspicious/noArrayIndexKey: letter content makes index stable
-                    key={`letter-${word}-${wordIndex}-${letter}-${letterIndex}`}
-                    initial={{ y: 100, opacity: 0 }}
-                    animate={{ y: 0, opacity: 1 }}
-                    transition={{
-                      delay: (wordIndex * 0.1 + letterIndex * 0.03) / animationSpeed,
-                      type: 'spring',
-                      stiffness: 150,
-                      damping: 25,
-                    }}
-                    className="inline-block text-transparent bg-clip-text 
-                    bg-linear-to-r from-white to-white/80"
-                  >
-                    {letter}
-                  </motion.span>
-                ))}
-              </span>
-            ))}
-          </h1>
+          <motion.h1
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{
+              duration: 1 / animationSpeed,
+              type: 'spring',
+              stiffness: 150,
+              damping: 25,
+            }}
+            className="text-4xl sm:text-6xl md:text-7xl font-bold mb-6 tracking-tighter
+                       text-transparent bg-clip-text bg-linear-to-r from-white to-white/80"
+          >
+            {title}
+          </motion.h1>
 
           <motion.p
             initial={{ opacity: 0, y: 20 }}

components/sections/home/problem-section.tsx

@@ -51,18 +51,6 @@ export default function ProblemSection() {
             </p>
           </motion.div>
         </div>
-
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8, delay: 0.4 }}
-          className="mt-12 text-center"
-        >
-          <div className="inline-block px-6 py-3 rounded-full bg-red-50 text-red-700 font-medium">
-            Without proper guidance, migration risks and frustration increase
-          </div>
-        </motion.div>
       </div>
     </section>
   )

components/sections/migrate/__tests__/synchronized-account-row-extended.test.tsx

@@ -15,6 +15,7 @@ vi.mock('lucide-react', () => ({
       !
     </div>
   ),
+  AlertTriangle: () => <div data-testid="alert-triangle">⚠</div>,
   Banknote: () => <div data-testid="banknote">💰</div>,
   BanknoteArrowDown: () => <div data-testid="banknote-arrow-down">💰⬇</div>,
   Check: () => <div data-testid="check">✓</div>,
@@ -24,6 +25,7 @@ vi.mock('lucide-react', () => ({
   KeyRound: () => <div data-testid="key-round">🔑</div>,
   LockOpen: () => <div data-testid="lock-open">🔓</div>,
   Route: () => <div data-testid="route">🛣</div>,
+  Send: () => <div data-testid="send">📤</div>,
   Shield: () => <div data-testid="shield">🛡</div>,
   Trash2: () => <div data-testid="trash2">🗑</div>,
   User: () => <div data-testid="user">👤</div>,
@@ -33,6 +35,7 @@ vi.mock('lucide-react', () => ({
     </div>
   ),
   Users: () => <div data-testid="users">👥</div>,
+  Vote: () => <div data-testid="vote">🗳</div>,
   X: () => <div data-testid="x">✕</div>,
 }))
 

components/sections/migrate/__tests__/synchronized-account-row.test.tsx

@@ -11,6 +11,7 @@ vi.mock('@legendapp/state/react', () => ({
 
 vi.mock('lucide-react', () => ({
   AlertCircle: () => null,
+  AlertTriangle: () => null,
   Banknote: () => null,
   BanknoteArrowDown: () => null,
   Check: () => null,
@@ -20,11 +21,13 @@ vi.mock('lucide-react', () => ({
   KeyRound: () => null,
   LockOpen: () => null,
   Route: () => null,
+  Send: () => null,
   Shield: () => null,
   Trash2: () => null,
   User: () => null,
   UserCog: () => null,
   Users: () => null,
+  Vote: () => null,
   X: () => null,
 }))
 

components/sections/migrate/dialogs/__tests__/approve-multisig-call-dialog.test.tsx

@@ -149,12 +149,20 @@ vi.mock('@/lib/utils/multisig', () => ({
     correct: 'Call data is valid',
     failed: 'Validation failed',
   },
+  EnhancedMultisigMember: {},
   getRemainingInternalSigners: vi.fn(() => []),
+  getRemainingSigners: vi.fn(() => []),
+  getAvailableSigners: vi.fn(() => []),
   validateCallData: vi.fn(() => Promise.resolve({ isValid: true })),
 }))
 
 vi.mock('@/state/ledger', () => ({
   ledgerState$: {
+    apps: {
+      apps: {
+        get: vi.fn(() => []),
+      },
+    },
     approveMultisigCall: vi.fn(),
     synchronizeAccount: vi.fn(),
   },
@@ -306,8 +314,8 @@ describe('ApproveMultisigCallDialog', () => {
       render(<ApproveMultisigCallDialog {...defaultProps} />)
 
       // Check for key form elements
-      expect(screen.getAllByTestId('dialog-field')).toHaveLength(6) // Multisig Address, Call Hash, Approvers, Deposit, Network, Signer
-      expect(screen.getAllByTestId('dialog-label')).toHaveLength(6)
+      expect(screen.getAllByTestId('dialog-field')).toHaveLength(7) // Multisig Address, Call Hash, Call Hash (for sharing), Approvers, Deposit, Network, Signer
+      expect(screen.getAllByTestId('dialog-label')).toHaveLength(7)
       expect(screen.getAllByTestId('select')).toHaveLength(2)
       expect(screen.getByTestId('transaction-dialog-footer')).toBeInTheDocument()
     })
@@ -507,15 +515,16 @@ describe('ApproveMultisigCallDialog', () => {
       const switchElement = screen.getByTestId('switch')
       expect(switchElement).toHaveAttribute('id', 'final-approval-switch')
 
-      const infoIcon = screen.getByTestId('info-icon')
-      expect(infoIcon).toHaveAttribute('aria-label', 'Info')
+      const infoIcons = screen.getAllByTestId('info-icon')
+      expect(infoIcons.length).toBeGreaterThan(0)
+      expect(infoIcons[0]).toHaveAttribute('aria-label', 'Info')
     })
 
     it('should have proper form labels', () => {
       render(<ApproveMultisigCallDialog {...defaultProps} />)
 
       const labels = screen.getAllByTestId('dialog-label')
-      expect(labels).toHaveLength(6)
+      expect(labels).toHaveLength(7)
     })
   })
 })