Add Kusama information banner, and fix certain ui issues (#41)

* Add Kusama information banner

* Mobile support

Author: TarikGul

frontend/src/App.tsx

@@ -5,6 +5,8 @@ import XcmMessageMetrics from './components/XcmMessageMetrics';
 import BalanceVerification from './components/BalanceVerification';
 import AlertsCard from './components/AlertsCard';
 import BackendUrlInput from './components/BackendUrlInput';
+import KusamaMigrationBanner from './components/KusamaMigrationBanner';
+import KusamaMigrationStats from './components/KusamaMigrationStats';
 import { useEventSource, useBackendUrl } from './hooks/useEventSource';
 import type { EventType } from './hooks/useEventSource';
 import './App.css';
@@ -13,6 +15,7 @@ import polkadotLogo from './assets/Polkadot_Token_Pink.png';
 function App() {
   const [rcBlockNumber, setRcBlockNumber] = useState<number | null>(null);
   const [ahBlockNumber, setAhBlockNumber] = useState<number | null>(null);
+  const [showStatsPage, setShowStatsPage] = useState<boolean>(false);
 
   const { backendUrl, setBackendUrl, isConnected } = useBackendUrl();
 
@@ -30,8 +33,27 @@ function App() {
     setBackendUrl(url);
   }, [setBackendUrl]);
 
+  const handleNavigateToStats = useCallback(() => {
+    setShowStatsPage(true);
+  }, []);
+
+  const handleNavigateBack = useCallback(() => {
+    setShowStatsPage(false);
+  }, []);
+
+  // Render stats page
+  if (showStatsPage) {
+    return (
+      <div className="app">
+        <KusamaMigrationStats onBack={handleNavigateBack} />
+      </div>
+    );
+  }
+
+  // Render main dashboard
   return (
     <div className="app">
+      <KusamaMigrationBanner onNavigate={handleNavigateToStats} />
       <header>
         <div className="logo">
           <img src={polkadotLogo} alt="Polkadot Logo" />

frontend/src/components/BalanceVerification.tsx

@@ -49,6 +49,19 @@ const BalanceVerification: React.FC = () => {
     }
   }, []));
 
+  // Subscribe to pallet migration summary for initial state
+  useEventSource(['palletMigrationSummary'], useCallback((eventType: EventType, data: any) => {
+    if (eventType === 'palletMigrationSummary' && data.pallets) {
+      const accountsPallet = data.pallets.find((p: any) => p.palletName === 'Accounts');
+      if (accountsPallet) {
+        setAccountMigration({
+          totalAccounts: accountsPallet.totalItemsProcessed || 0,
+          timestamp: accountsPallet.lastUpdated,
+        });
+      }
+    }
+  }, []));
+
   // Format balance for display (assumes balance is in planck, convert to KSM)
   const formatBalance = (balance: string | null): string => {
     if (!balance) return '-';

frontend/src/components/KusamaMigrationBanner.css

@@ -0,0 +1,99 @@
+.kusama-migration-banner {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  border: 1px solid rgba(230, 0, 122, 0.3);
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  padding: 20px 24px;
+  margin: 0;
+  box-shadow: 0 4px 12px rgba(230, 0, 122, 0.15);
+  transition: all 0.3s ease;
+}
+
+.kusama-migration-banner:hover {
+  border-color: rgba(230, 0, 122, 0.5);
+  box-shadow: 0 6px 16px rgba(230, 0, 122, 0.25);
+  transform: translateY(-2px);
+}
+
+.banner-content {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.banner-icon {
+  font-size: 32px;
+  flex-shrink: 0;
+}
+
+.banner-text {
+  flex: 1;
+}
+
+.banner-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 4px;
+}
+
+.banner-subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.banner-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: rgba(230, 0, 122, 0.1);
+  border: 1px solid rgba(230, 0, 122, 0.3);
+  border-radius: 8px;
+  color: #e6007a;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.banner-button:hover {
+  background: rgba(230, 0, 122, 0.2);
+  border-color: rgba(230, 0, 122, 0.5);
+  transform: translateX(4px);
+}
+
+.banner-button svg {
+  transition: transform 0.2s ease;
+}
+
+.banner-button:hover svg {
+  transform: translateX(4px);
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .banner-content {
+    flex-direction: column;
+    text-align: center;
+    gap: 16px;
+  }
+
+  .banner-button {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .banner-title {
+    font-size: 16px;
+  }
+
+  .banner-subtitle {
+    font-size: 13px;
+  }
+}

frontend/src/components/KusamaMigrationBanner.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import './KusamaMigrationBanner.css';
+
+interface KusamaMigrationBannerProps {
+  onNavigate: () => void;
+}
+
+const KusamaMigrationBanner: React.FC<KusamaMigrationBannerProps> = ({ onNavigate }) => {
+  return (
+    <div className="kusama-migration-banner">
+      <div className="banner-content">
+        <div className="banner-icon">✅</div>
+        <div className="banner-text">
+          <h3 className="banner-title">Kusama Asset Hub Migration Complete!</h3>
+          <p className="banner-subtitle">View detailed statistics and metrics from the successful migration</p>
+        </div>
+        <button className="banner-button" onClick={onNavigate}>
+          View Stats
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 18L15 12L9 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default KusamaMigrationBanner;