-
-
- Back to console
-
-
-
- Email alerts
-
- {showUpdateEmail && (
- updateEmailRef.current?.()}
- className='inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline'
- >
- Update email
-
- )}
-
-
- Receive alerts when your account has less than 30 days of service runway remaining, so you can top up before
- services are affected.
-
+
+
+
+
+ Email alerts
+
+ {showUpdateEmail && (
+ updateEmailRef.current?.()}
+ className='inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline'
+ >
+ Update email
+
+ )}
-
-
{renderContent()}
+
+ Receive alerts when your account has less than 30 days of service runway remaining, so you can top up before
+ services are affected.
+
-
+
+
{renderContent()}
+
);
};
-const NotificationsPage = () => (
-
-
-);
-
-export default NotificationsPage;
+export default NotificationsMain;
diff --git a/apps/explorer/src/app/console/notifications/verify/page.tsx b/apps/explorer/src/app/console/notifications/verify/page.tsx
index e110ea80..2246f6a0 100644
--- a/apps/explorer/src/app/console/notifications/verify/page.tsx
+++ b/apps/explorer/src/app/console/notifications/verify/page.tsx
@@ -1,5 +1,4 @@
"use client";
-import { PageSection } from "@filecoin-foundation/ui-filecoin/PageSection";
import { Card } from "@filecoin-pay/ui/components/card";
import { useQueryClient } from "@tanstack/react-query";
import { AlertCircle, CheckCircle2, Clock, Link2Off, Loader2 } from "lucide-react";
@@ -158,102 +157,98 @@ const VerifyContent = () => {
}, [verifyState.type]);
return (
-
-
-
- {verifyState.type === "loading" &&
+
+ {verifyState.type === "loading" &&
-
- }
- />
- )}
+ {verifyState.type === "success" && (
+
+
+ }
+ />
+ )}
- {verifyState.type === "not-found" && (
-
-
+
-
-
-
+
+
}
>
diff --git a/apps/explorer/src/app/console/page.tsx b/apps/explorer/src/app/console/page.tsx
index 9e0096db..1a253592 100644
--- a/apps/explorer/src/app/console/page.tsx
+++ b/apps/explorer/src/app/console/page.tsx
@@ -1,112 +1,37 @@
"use client";
-import { LoadingStateCard } from "@filecoin-foundation/ui-filecoin/LoadingStateCard";
-import { PageSection } from "@filecoin-foundation/ui-filecoin/PageSection";
-import { AlertTriangle } from "lucide-react";
import { useMemo } from "react";
import { useConnection } from "wagmi";
-import { Balance, ChainSwitcher } from "@/components/shared";
-import {
- AlertsBanner,
- BetaWarning,
- FundsSection,
- OperatorApprovalsSection,
- RailsSection,
-} from "@/components/UserConsole";
-import ConsoleProviders from "@/components/UserConsole/ConsoleProviders";
-import { AccountNotFound, ErrorState, NotConnected, UnsupportedChain } from "@/components/UserConsole/States";
-import { useAccountDetails } from "@/hooks/useAccountDetails";
+import { AlertsBanner, FundsSection, RailsSection } from "@/components/UserConsole";
+import ConsoleAccountGate from "@/components/UserConsole/ConsoleAccountGate";
import { useNotificationStatus } from "@/hooks/useNotificationStatus";
import { getNetworkFromChainId, isNotificationsEligibleNetwork, isSupportedChainId } from "@/utils/network";
-const UserConsoleContent = () => {
+const DashboardPage = () => {
const { address, isConnected, chainId } = useConnection();
const walletNetwork = useMemo(() => getNetworkFromChainId(chainId), [chainId]);
- const isUnsupportedChain = isConnected && chainId && !isSupportedChainId(chainId);
-
+ const isUnsupportedChain = isConnected && chainId !== undefined && !isSupportedChainId(chainId);
const isNotificationsEligible = isNotificationsEligibleNetwork(walletNetwork);
const { data: notificationStatus, isError: notificationStatusError } = useNotificationStatus(address);
const subscribed = notificationStatus?.subscribed ?? false;
- const {
- data: account,
- isLoading,
- isError,
- error,
- } = useAccountDetails(address || "", { networkOverride: walletNetwork });
-
return (
-
-
-
-
- Filecoin Pay Console
-
- {isConnected && (
-
- {isUnsupportedChain ? (
-
-
- ) : (
- <>
-
- {chainId &&
}
-
- )}
-
- )}
-
-
- {/* Beta Warning */}
-
-
- {/* Alerts Banner — hidden once subscribed */}
- {isConnected && !isUnsupportedChain && isNotificationsEligible && !subscribed && !notificationStatusError && (
-
- )}
-
- {/* Not Connected */}
- {(!isConnected || !address) &&
}
-
- {/* Unsupported Chain */}
- {isUnsupportedChain &&
}
-
- {/* Only show content if connected to supported chain */}
- {isConnected && !isUnsupportedChain && (
+
+ {/* Alerts Banner — hidden once subscribed */}
+ {isConnected && !isUnsupportedChain && isNotificationsEligible && !subscribed && !notificationStatusError && (
+
+ )}
+
+
+ {({ account, address: connectedAddress }) => (
<>
- {/* Loading */}
- {isLoading &&
-
- );
-};
-
-const UserConsole = () => {
- return (
-
-
+
+
-
- Try again
-
-
+ <>
+ {/* This boundary replaces segment layouts, so it must supply the header itself. */}
+
+
+ Try again
+
+
+
);
}
diff --git a/apps/explorer/src/components/Home/ConsoleHero.tsx b/apps/explorer/src/components/Home/ConsoleHero.tsx
new file mode 100644
index 00000000..89763cf8
--- /dev/null
+++ b/apps/explorer/src/components/Home/ConsoleHero.tsx
@@ -0,0 +1,37 @@
+import { PageSection } from "@filecoin-foundation/ui-filecoin/PageSection";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { PATHS } from "@/constants/paths";
+
+// Console entry point rendered above search and stats on the network home page;
+// complements the account button in the explorer header.
+const ConsoleHero = () => (
+
+
+
+
+
+
+ Filecoin Onchain Cloud Console
+
+
+ Manage your Filecoin services
+
+
Manage services, billing, notifications, and more.
+
+ Open Console
+
+
+
+
+
+);
+
+export default ConsoleHero;
diff --git a/apps/explorer/src/components/Home/index.ts b/apps/explorer/src/components/Home/index.ts
index e7ddf503..8cc978de 100644
--- a/apps/explorer/src/components/Home/index.ts
+++ b/apps/explorer/src/components/Home/index.ts
@@ -1,3 +1,4 @@
+export { default as ConsoleHero } from "./ConsoleHero";
export { default as GlobalSearchBar } from "./GlobalSearchBar";
export { default as Stats } from "./Stats";
export { default as TopAccounts } from "./TopAccounts";
diff --git a/apps/explorer/src/components/UserConsole/ConsoleAccountGate.tsx b/apps/explorer/src/components/UserConsole/ConsoleAccountGate.tsx
new file mode 100644
index 00000000..fc76880a
--- /dev/null
+++ b/apps/explorer/src/components/UserConsole/ConsoleAccountGate.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { LoadingStateCard } from "@filecoin-foundation/ui-filecoin/LoadingStateCard";
+import type { Account } from "@filecoin-pay/types";
+import { useMemo } from "react";
+import { useConnection } from "wagmi";
+import { useAccountDetails } from "@/hooks/useAccountDetails";
+import { getNetworkFromChainId, isSupportedChainId } from "@/utils/network";
+import { AccountNotFound, ErrorState, NotConnected, UnsupportedChain } from "./States";
+
+export type ConsoleAccountRenderProps = {
+ account: Account;
+ address: string;
+};
+
+type ConsoleAccountGateProps = {
+ children: (ctx: ConsoleAccountRenderProps) => React.ReactNode;
+};
+
+// Shared connection/account gating for console pages: resolves wallet state and
+// account lookup, rendering the matching empty/error state. Children only render
+// with a connected wallet on a supported chain and an indexed account.
+const ConsoleAccountGate = ({ children }: ConsoleAccountGateProps) => {
+ const { address, isConnected, chainId } = useConnection();
+ const walletNetwork = useMemo(() => getNetworkFromChainId(chainId), [chainId]);
+ const isUnsupportedChain = isConnected && chainId !== undefined && !isSupportedChainId(chainId);
+
+ const {
+ data: account,
+ isLoading,
+ isError,
+ error,
+ } = useAccountDetails(address || "", { networkOverride: walletNetwork });
+
+ if (!isConnected || !address) return
+
{
>
{children}
-
+
);
};
diff --git a/apps/explorer/src/components/UserConsole/ConsoleShell.tsx b/apps/explorer/src/components/UserConsole/ConsoleShell.tsx
new file mode 100644
index 00000000..85fbac27
--- /dev/null
+++ b/apps/explorer/src/components/UserConsole/ConsoleShell.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { Container } from "@filecoin-foundation/ui-filecoin/Container";
+import { PageSection } from "@filecoin-foundation/ui-filecoin/PageSection";
+import { Section } from "@filecoin-foundation/ui-filecoin/Section/Section";
+import { AlertTriangle } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { useConnection, useSwitchChain } from "wagmi";
+import { Balance, ChainSwitcher, CustomConnectButton } from "@/components/shared";
+import { HomeLogoIconLink } from "@/components/shared/Navigation/components/HomeLogoIconLink";
+import { BetaWarning } from "@/components/UserConsole";
+import useNetwork from "@/hooks/useNetwork";
+import { supportedChains } from "@/services/wagmi/config";
+import { getNetworkFromChainId, isSupportedChainId } from "@/utils/network";
+import ConsoleSidebar from "./ConsoleSidebar";
+
+// Account-area chrome: own top bar (logo + chain switcher + wallet chip in the
+// same top-right position as the explorer's network selector), beta banner, and
+// section sidebar. Replaces the explorer navigation on /console routes.
+const ConsoleShell = ({ children }: { children: React.ReactNode }) => {
+ const { isConnected, chainId } = useConnection();
+ const { network, setNetwork } = useNetwork();
+ const { switchChain, isPending: isSwitchPending } = useSwitchChain();
+ const isUnsupportedChain = isConnected && chainId !== undefined && !isSupportedChainId(chainId);
+ // Whether we already asked the wallet to follow the explorer's selection.
+ const switchRequestedRef = useRef(false);
+
+ // Keeps the console selector in sync with the explorer's. On entry the
+ // explorer selection wins: the wallet is asked once to switch to it. After
+ // that (or on rejection) the wallet chain is the source of truth and the
+ // shared network context follows it, so leaving the console returns to the
+ // same network the wallet is on.
+ useEffect(() => {
+ if (!isConnected) {
+ switchRequestedRef.current = false;
+ return;
+ }
+ if (chainId === undefined || !isSupportedChainId(chainId)) return;
+ const walletNetwork = getNetworkFromChainId(chainId);
+ if (walletNetwork === network) {
+ switchRequestedRef.current = true;
+ return;
+ }
+ if (!switchRequestedRef.current) {
+ switchRequestedRef.current = true;
+ const target = supportedChains.find((chain) => chain.slug === network);
+ if (target) {
+ switchChain({ chainId: target.id }, { onError: () => setNetwork(walletNetwork) });
+ }
+ return;
+ }
+ if (!isSwitchPending) {
+ setNetwork(walletNetwork);
+ }
+ }, [isConnected, chainId, network, setNetwork, switchChain, isSwitchPending]);
+
+ return (
+ <>
+
+
+
+
+
+ {!isConnected && (
+ <>
+
+
+
+ )}
+ {isConnected && isUnsupportedChain && (
+
+
+ )}
+ {isConnected && !isUnsupportedChain && (
+ <>
+ {chainId !== undefined &&
}
+
+
+ )}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ConsoleShell;
diff --git a/apps/explorer/src/components/UserConsole/ConsoleSidebar.tsx b/apps/explorer/src/components/UserConsole/ConsoleSidebar.tsx
new file mode 100644
index 00000000..efd5d516
--- /dev/null
+++ b/apps/explorer/src/components/UserConsole/ConsoleSidebar.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { clsx } from "clsx";
+import { Bell, Compass, LayoutGrid, type LucideIcon, ShieldCheck } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useConnection } from "wagmi";
+import { PATHS } from "@/constants/paths";
+import useNetwork from "@/hooks/useNetwork";
+import { useNotificationStatus } from "@/hooks/useNotificationStatus";
+
+type SidebarItem = {
+ label: string;
+ href: string;
+ icon: LucideIcon;
+ badge?: string;
+};
+
+const ConsoleSidebar = () => {
+ const pathname = usePathname();
+ const { network } = useNetwork();
+ const { address, isConnected } = useConnection();
+ const { data: notificationStatus } = useNotificationStatus(address);
+
+ // Only badge a definitive "not subscribed"; while status is unknown the row
+ // stays unbadged instead of flashing OFF.
+ const alertsBadge = isConnected && notificationStatus && !notificationStatus.subscribed ? "OFF" : undefined;
+
+ const items: SidebarItem[] = [
+ { label: "Dashboard", href: PATHS.CONSOLE.path, icon: LayoutGrid },
+ { label: PATHS.CONSOLE_AUTHORIZATIONS.label, href: PATHS.CONSOLE_AUTHORIZATIONS.path, icon: ShieldCheck },
+ { label: PATHS.CONSOLE_ALERTS.label, href: PATHS.CONSOLE_ALERTS.path, icon: Bell, badge: alertsBadge },
+ ];
+
+ return (
+
+
+ {items.map((item) => {
+ // Dashboard is the section root, so it only matches exactly; other
+ // items also own their subroutes (e.g. Alerts covers /notifications/verify).
+ const active =
+ item.href === PATHS.CONSOLE.path
+ ? pathname === item.href
+ : pathname === item.href || pathname.startsWith(`${item.href}/`);
+ const Icon = item.icon;
+ return (
+ {item.badge} }
+
+ );
+ })}
+
+
+
+
+
+ );
+};
+
+export default ConsoleSidebar;
diff --git a/apps/explorer/src/components/shared/AccountButton/index.tsx b/apps/explorer/src/components/shared/AccountButton/index.tsx
new file mode 100644
index 00000000..ffbdc194
--- /dev/null
+++ b/apps/explorer/src/components/shared/AccountButton/index.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { Button } from "@filecoin-foundation/ui-filecoin/Button";
+import { Wallet } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useAccount } from "wagmi";
+import { formatAddress } from "@/utils/formatter";
+import WalletProviders from "../WalletProviders";
+
+// Header entry point to the console. Disconnected users see a "Connect Wallet"
+// call to action; connected users see their address as a chip. Both navigate to
+// /console — the console owns the actual wallet-connection flow, so there is a
+// single connect surface across the app.
+const AccountButtonInner = () => {
+ const router = useRouter();
+ const { address, isConnected } = useAccount();
+
+ if (isConnected && address) {
+ return (
+ router.push("/console")}>
+ Connect Wallet
+
+ );
+};
+
+const AccountButton = () => (
+
+
+);
+
+export default AccountButton;
diff --git a/apps/explorer/src/components/shared/ChainSwitcher.tsx b/apps/explorer/src/components/shared/ChainSwitcher.tsx
index 25411772..a2b416e6 100644
--- a/apps/explorer/src/components/shared/ChainSwitcher.tsx
+++ b/apps/explorer/src/components/shared/ChainSwitcher.tsx
@@ -8,16 +8,21 @@ import {
} from "@filecoin-pay/ui/components/dropdown-menu";
import { ChevronDown, Globe } from "lucide-react";
import { useSwitchChain } from "wagmi";
+import useNetwork from "@/hooks/useNetwork";
import { supportedChains } from "@/services/wagmi/config";
import { getNetworkFromChainId } from "@/utils/network";
interface ChainSwitcherProps {
- chainId: number;
+ /** Connected wallet chain; omit when no wallet is connected. */
+ chainId?: number;
}
+// With a connected wallet the selector switches the wallet chain; without one it
+// drives the explorer-wide network context instead.
const ChainSwitcher = ({ chainId }: ChainSwitcherProps) => {
const { switchChain } = useSwitchChain();
- const currentNetwork = getNetworkFromChainId(chainId);
+ const { network, setNetwork } = useNetwork();
+ const currentNetwork = chainId !== undefined ? getNetworkFromChainId(chainId) : network;
const currentChain = supportedChains.find((c) => c.slug === currentNetwork) ?? supportedChains[0];
return (
@@ -35,8 +40,8 @@ const ChainSwitcher = ({ chainId }: ChainSwitcherProps) => {
{supportedChains.map((chain) => (
switchChain({ chainId: chain.id })}
- className={chain.id === chainId ? "font-semibold" : ""}
+ onClick={() => (chainId !== undefined ? switchChain({ chainId: chain.id }) : setNetwork(chain.slug))}
+ className={chain.slug === currentNetwork ? "font-semibold" : ""}
>
{chain.label}
diff --git a/apps/explorer/src/components/shared/Navigation/DesktopNavigation.tsx b/apps/explorer/src/components/shared/Navigation/DesktopNavigation.tsx
index e16f076c..899a9e02 100644
--- a/apps/explorer/src/components/shared/Navigation/DesktopNavigation.tsx
+++ b/apps/explorer/src/components/shared/Navigation/DesktopNavigation.tsx
@@ -1,13 +1,12 @@
"use client";
import { NavigationMainLink } from "@filecoin-foundation/ui-filecoin/Navigation/NavigationMainLink";
+import AccountButton from "@/components/shared/AccountButton";
import { useNavigationItems } from "@/hooks/useNavigationItems";
-import useShowNetworkOptions from "@/hooks/useShowNetworkOptions";
import NetworkOptions from "./components/NetworkOptions";
export function DesktopNavigation() {
const { headerNavigationItems } = useNavigationItems();
- const showNetworkOptions = useShowNetworkOptions();
return (
@@ -17,11 +16,12 @@ export function DesktopNavigation() {
))}
- {showNetworkOptions && (
-
-
- )}
+
+
+
+
@@ -29,11 +27,9 @@ function Navigation({ backgroundVariant }: NavigationProps) {