feat(minifront-v2): comprehensive UX polish (#2654)

# feat(minifront-v2): comprehensive UX polish  
### real-time chain sync · persistent transaction toasts · skeleton
loading · visual tweaks

---

## Description of Changes

### 1. Real-time chain-sync experience
- **`StatusStore`** (MobX) tracks sync state.  
- **`SyncingDialog`** with progress %, ETA & graceful error handling.  
- **`StatusPopover`** now has three states (synced / syncing / error).  
- `PenumbraService` exposes `getStatus()` and a status streaming helper.
- Animated spinning Penumbra illustration while syncing.  
- Header & mobile-nav styling fixes (proper `z-index`, smoother
animations, shield background).

### 2. Transaction flow overhaul
- **Persistent success/error toasts** covering _plan → build → broadcast
→ confirm_.
- Shared toast utilities reused in `transfer-store`, `staking-store`,
`withdraw-store`, IBC deposit/withdraw.
- Auto-refresh of balances & transaction list after success.  
- Removed inline error blocks for a cleaner UI.

### 3. Transaction list visual polish
- Card height constraints (`min-h: 120 px`, `max-h: 840 px`) with
internal scrolling.
- **Global slim / transparent scrollbar styling** (matches Veil design).
- Removed `maxItems` cap on `ShieldingTransactionCard`; all transactions
are shown.
- Friendlier empty-state copy encourages a page refresh.

### 4. Skip deposit skeleton loader
- Lightweight skeleton displayed while the external iframe loads for
faster perceived performance.

---

## Motivation

Brings **minifront-v2** nearly to feature-parity with the legacy
front-end (only _Swap_ page is missing)

* Users get immediate feedback during long operations (chain sync &
transactions).
* Eliminates layout jumps and scroll jank for a polished, professional
feel.
* Provides modern error-recovery mechanisms and UX refinements.

---

## Tested on mainnet

1. **Chain sync**  
   - Switch from testnet to mainnet to trigger sync modal and bar

2. **Transaction feedback (Toast)**  
- Perform transfer / stake / manual deposit & withdraw (no Toast for
skip deposits)
- Observe persistent success toast and automatic balance + list refresh.

3. **Long transaction list**  
   - Seed many transactions.  
- Ensure the list scrolls inside the card and global scrollbar styling
is applied.

4. **Skip deposit**  
- Open deposit view, skeleton loader should show before iframe content.
   
   ## Checklist Before Requesting Review
_No breaking changes; all updates are confined to minifront-v2
components, it's MobX stores, and styling._

Author: DDX1

.changeset/wide-pianos-hang.md

@@ -0,0 +1,5 @@
+---
+'minifront-v2': minor
+---
+
+UX Polishment incl. new Toast component and SyncDialog

apps/minifront-v2/src/app/global.css

@@ -28,3 +28,28 @@ body > section[aria-live='polite'] {
   background-repeat: no-repeat !important;
   background-attachment: fixed !important;
 }
+
+/* Global scrollbar styling - matching veil app */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  backdrop-filter: blur(16px);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #fafafa1a;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  background-clip: content-box;
+  border-radius: 5px;
+  transition: all 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a3a3a3;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+}

apps/minifront-v2/src/app/layout.tsx

@@ -4,6 +4,7 @@ import { HeadTag } from './head-tag';
 import { Header, SyncBar } from '@/widgets/header';
 import { BackgroundProvider } from '@/shared/contexts/background-context';
 import { PageBackground } from '@/shared/components/page-background';
+import { SyncingDialog } from '@/widgets/sync-dialog';
 
 export const Layout = () => {
   return (
@@ -15,14 +16,13 @@ export const Layout = () => {
         <SyncBar />
 
         <div className='flex w-full flex-col items-center'>
-          <div className='w-full'>
+          <div className='w-full pt-20'>
             <Header />
             <Outlet />
           </div>
         </div>
 
-        {/* TODO: add syncing dialog to v2 */}
-        {/* <SyncingDialog /> */}
+        <SyncingDialog />
       </Display>
     </BackgroundProvider>
   );

apps/minifront-v2/src/pages/portfolio/ui/portfolio.tsx

@@ -83,7 +83,7 @@ export const Portfolio = observer((): React.ReactNode => {
 
   return (
     <div className='flex w-full flex-col items-center'>
-      <div className='grid w-full flex-1 grid-cols-1 gap-4 md:grid-cols-2'>
+      <div className='grid w-full flex-1 grid-cols-1 gap-4 md:grid-cols-2 max-w-screen-lg'>
         <div>
           <AssetCard accounts={accounts} showInfoButton={true} />
         </div>

apps/minifront-v2/src/pages/portfolio/ui/transactions/transaction-card.tsx

@@ -146,7 +146,7 @@ export const TransactionCard = observer(
     return (
       <div>
         <Card title={cardTitle} headerAction={headerAction} endContent={headerContent}>
-          <div className='flex flex-col gap-1'>
+          <div className='flex flex-col gap-1 max-h-[840px] min-h-[120px] overflow-y-auto'>
             {loadingTransactions ? (
               Array.from({ length: getSkeletonLength() }).map((_, i) => (
                 <div key={i} className='h-16 w-full'>
@@ -213,7 +213,8 @@ export const TransactionCard = observer(
                   <div className='text-muted-foreground flex min-h-[120px] flex-col items-center justify-center p-6 text-center'>
                     <p className='text-sm'>You have no transactions yet.</p>
                     <p className='mt-1 text-xs'>
-                      Send, receive, or trade assets to see your transaction history here.
+                      Send, receive, or trade assets to see your transaction history here or try
+                      refreshing the page in case they are not showing up.
                     </p>
                   </div>
                 )}

apps/minifront-v2/src/pages/shielding/ui/deposit/deposit-form.tsx

@@ -451,15 +451,6 @@ const DepositFormInternal = observer(() => {
             />
           </div>
 
-          {/* Error Display */}
-          {depositState.error && (
-            <div className='rounded-lg p-3'>
-              <Text color='destructive.light' small>
-                Failed: {depositState.error}
-              </Text>
-            </div>
-          )}
-
           {/* Submit Button */}
           <div className='mt-2'>
             <Density sparse>

apps/minifront-v2/src/pages/shielding/ui/shared/shielding-transaction-card.tsx

@@ -29,7 +29,6 @@ export const ShieldingTransactionCard = observer(() => {
       title='Your Recent Shielding Activity'
       showInfoButton={false}
       showSeeAllLink={false}
-      maxItems={5}
       headerAction={headerAction}
       filteredTransactions={filteredTransactions}
     />

apps/minifront-v2/src/pages/shielding/ui/skip-deposit/skip-deposit-form.tsx

@@ -1,8 +1,10 @@
 import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
 import { Widget } from '@skip-go/widget';
 import { ArrowRightLeft } from 'lucide-react';
 import { Button } from '@penumbra-zone/ui/Button';
 import { Text } from '@penumbra-zone/ui/Text';
+import { Skeleton } from '@penumbra-zone/ui/Skeleton';
 import { useIsConnected, useConnectWallet } from '@/shared/hooks/use-connection';
 
 // Skip widget configuration based on legacy minifront
@@ -56,6 +58,20 @@ const theme = {
 export const SkipDepositTab = observer(() => {
   const isConnected = useIsConnected();
   const { connectWallet } = useConnectWallet();
+  const [isWidgetLoading, setIsWidgetLoading] = useState(true);
+
+  // Show loading for initial widget load
+  useEffect(() => {
+    if (isConnected) {
+      setIsWidgetLoading(true);
+      // Set a minimum loading time for better UX
+      const timer = setTimeout(() => {
+        setIsWidgetLoading(false);
+      }, 2000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [isConnected]);
 
   // If wallet is not connected, show connect wallet message
   if (!isConnected) {
@@ -76,6 +92,17 @@ export const SkipDepositTab = observer(() => {
     );
   }
 
+  // Show skeleton while widget is loading
+  if (isWidgetLoading) {
+    return (
+      <div className='w-full py-6 flex flex-col gap-1'>
+        <div className='h-[110px] w-full rounded-2xl bg-other-tonal-fill5 relative overflow-hidden before:absolute before:top-1/2 before:left-1/2 before:h-full before:w-full before:content-[""] before:-translate-x-1/2 before:-translate-y-1/2 before:animate-shimmer before:bg-linear-to-r before:from-transparent before:via-other-tonal-fill5 before:to-transparent' />
+        <div className='h-[110px] w-full rounded-2xl bg-other-tonal-fill5 relative overflow-hidden before:absolute before:top-1/2 before:left-1/2 before:h-full before:w-full before:content-[""] before:-translate-x-1/2 before:-translate-y-1/2 before:animate-shimmer before:bg-linear-to-r before:from-transparent before:via-other-tonal-fill5 before:to-transparent' />
+        <div className='h-[70px] w-full rounded-2xl bg-other-tonal-fill5 relative overflow-hidden before:absolute before:top-1/2 before:left-1/2 before:h-full before:w-full before:content-[""] before:-translate-x-1/2 before:-translate-y-1/2 before:animate-shimmer before:bg-linear-to-r before:from-transparent before:via-other-tonal-fill5 before:to-transparent' />
+      </div>
+    );
+  }
+
   return (
     <div className='w-full'>
       {/* Skip Widget */}

apps/minifront-v2/src/pages/shielding/ui/withdraw/withdraw-form.tsx

@@ -302,6 +302,7 @@ const WithdrawFormInternal: React.FC = observer(() => {
           )}
         </div>
 
+        {/* Error message - only show validation errors, transaction errors are handled by toasts */}
         {withdrawState.error && (
           <div className='rounded-lg p-3'>
             <Text color='destructive.light' small>

apps/minifront-v2/src/pages/stake/ui/delegate-dialog/index.tsx

@@ -3,7 +3,7 @@ import { Dialog } from '@penumbra-zone/ui/Dialog';
 import { Button } from '@penumbra-zone/ui/Button';
 import { Text } from '@penumbra-zone/ui/Text';
 import { Card } from '@penumbra-zone/ui/Card';
-import { Info, CircleX } from 'lucide-react';
+import { Info } from 'lucide-react';
 import { useStakingStore, useBalancesStore } from '@/shared/stores/store-context';
 import { ValidatorRow } from '../validator-row';
 import { AssetValueInput } from '@penumbra-zone/ui/AssetValueInput';
@@ -161,15 +161,6 @@ export const DelegateDialog = observer(() => {
               </Text>
             </div>
           )}
-          {/* Error Message */}
-          {stakingStore.error && (
-            <div className='flex items-center gap-3 rounded-sm bg-destructive-light p-3'>
-              <CircleX size={22} className='text-destructive-dark' />
-              <Text small color='destructive.dark'>
-                {stakingStore.error}
-              </Text>
-            </div>
-          )}
 
           {/* Validator Info */}
           <div className='flex flex-col rounded-md overflow-hidden gap-1'>