diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index 370f141a..5e9f8896 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -9,6 +9,8 @@ import HealthStatusIndicator from "./HealthStatusIndicator"; import { Layers } from "./icons"; import { useTranslation } from "../i18n"; import { useWalletNetwork } from "../hooks/useWalletNetwork"; +import Badge from "./Badge"; +import { usePendingTransactionCount } from "../hooks/usePendingTransactionCount"; interface NavbarProps { currentPath?: "/" | "/analytics" | "/portfolio"; @@ -27,6 +29,7 @@ const Navbar: FC = ({ }) => { const { t } = useTranslation(); const { walletNetwork, expectedNetwork } = useWalletNetwork(walletAddress); + const pendingCount = usePendingTransactionCount(walletAddress); // Show wallet's actual network when known, otherwise fall back to app's expected network const networkLabel = walletNetwork ?? expectedNetwork; const [menuOpen, setMenuOpen] = useState(false); @@ -111,6 +114,14 @@ const Navbar: FC = ({ {t("nav.analytics")} + + {t("nav.transactions")} + {pendingCount > 0 && ( + + {pendingCount} + + )} + @@ -183,6 +194,14 @@ const Navbar: FC = ({ setIsMobileMenuOpen(false)}> {t("nav.analytics")} + setIsMobileMenuOpen(false)}> + {t("nav.transactions")} + {pendingCount > 0 && ( + + {pendingCount} + + )} +
@@ -203,6 +222,14 @@ const Navbar: FC = ({ setMenuOpen(false)}> {t("nav.analytics")} + setMenuOpen(false)}> + {t("nav.transactions")} + {pendingCount > 0 && ( + + {pendingCount} + + )} +
)} diff --git a/frontend/src/hooks/usePendingTransactionCount.ts b/frontend/src/hooks/usePendingTransactionCount.ts new file mode 100644 index 00000000..3577c7d6 --- /dev/null +++ b/frontend/src/hooks/usePendingTransactionCount.ts @@ -0,0 +1,11 @@ +import { useTransactionHistory } from "./useTransactionData"; + +export function usePendingTransactionCount(walletAddress: string | null): number { + const { data: transactions } = useTransactionHistory(walletAddress); + + if (!transactions) return 0; + + return transactions.filter( + (tx) => tx.status === "pending" || tx.status === "failed", + ).length; +} diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts index 1c422a0d..c00e8bcc 100644 --- a/frontend/src/i18n/locales/en.ts +++ b/frontend/src/i18n/locales/en.ts @@ -18,6 +18,7 @@ export const en = { vaults: "Vaults", portfolio: "Portfolio", analytics: "Analytics", + transactions: "Transactions", }, theme: { toggleToDark: "Toggle to dark mode", diff --git a/frontend/src/i18n/locales/es.ts b/frontend/src/i18n/locales/es.ts index a88e1dc7..42d2fa45 100644 --- a/frontend/src/i18n/locales/es.ts +++ b/frontend/src/i18n/locales/es.ts @@ -18,6 +18,7 @@ export const es = { vaults: "Bvvvedas", portfolio: "Portafolio", analytics: "Analica", + transactions: "Transacciones", }, theme: { toggleToDark: "Cambiar al modo oscuro",