Improve Lithoscan mainnet network and wallet UX

Author: bachal-mb

Makalu/explorer/components/BrandLogo.tsx

@@ -3,7 +3,11 @@ import { NETWORK } from '@/lib/network';
 export default function BrandLogo({ compact = false }: { compact?: boolean }) {
   return (
     <span className="flex shrink-0 items-center gap-3">
-      <img src={NETWORK.logoPath} alt="LITHO" className="h-9 w-9 rounded-full object-contain" />
+      <img
+        src={NETWORK.logoPath}
+        alt="Lithosphere"
+        className="h-9 w-10 object-contain drop-shadow-[0_6px_14px_rgba(74,144,217,0.22)]"
+      />
       {!compact && (
         <span className="hidden sm:flex sm:flex-col sm:leading-none">
           <span className="text-base font-bold text-[var(--color-text-primary)]">{NETWORK.explorerTitle}</span>

Makalu/explorer/components/Header.tsx

@@ -46,6 +46,8 @@ const NAV_ITEMS: NavItem[] = [
 const MORE_ITEMS: NavItem[] = [
   { label: 'Quantt Research', href: '/quantt' },
   { label: 'Docs', href: 'https://docs.litho.ai', external: true },
+  { label: 'Makalu Testnet', href: 'https://makalu.litho.ai', external: true },
+  { label: 'Kamet Testnet', href: 'https://kamet.litho.ai', external: true },
   { label: 'LITHO TGE', href: 'https://tge.ignite.trade', external: true },
   { label: 'LITHO.ai', href: 'https://litho.ai', external: true },
   { label: 'ACCESS', href: 'https://access.litho.ai', external: true },

Makalu/explorer/components/Layout.tsx

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
 
+import { NETWORK } from '@/lib/network';
+
 import Footer from './Footer';
 import Header from './Header';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <div className="min-h-screen flex flex-col">
+    <div className={`network-shell min-h-screen flex flex-col ${NETWORK.isMainnet ? 'network-mainnet' : 'network-testnet'}`}>
       <Header />
       <main className="flex-1 w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
         {children}

Makalu/explorer/components/NetworkSetupCard.tsx

@@ -0,0 +1,130 @@
+import {
+  useWeb3Modal,
+  useWeb3ModalAccount,
+  useWeb3ModalProvider,
+} from '@web3modal/ethers/react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { NETWORK } from '@/lib/network';
+import { ensureExplorerNetwork, type WalletRequestProvider } from '@/lib/walletNetwork';
+
+function CopyButton({ value, label }: { value: string; label: string }) {
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      className="rounded-lg border border-[var(--color-border)] px-2.5 py-1 text-xs font-medium text-litho-500 transition hover:border-litho-300 hover:bg-litho-50 dark:text-litho-300 dark:hover:bg-litho-400/10"
+      aria-label={`Copy ${label}`}
+    >
+      {copied ? 'Copied' : 'Copy'}
+    </button>
+  );
+}
+
+export default function NetworkSetupCard() {
+  const { open } = useWeb3Modal();
+  const { isConnected, chainId } = useWeb3ModalAccount();
+  const { walletProvider } = useWeb3ModalProvider();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const pendingAdd = useRef(false);
+  const connectedToExplorer = Number(chainId) === NETWORK.evmChainId;
+
+  const addOrSwitch = useCallback(async () => {
+    setError('');
+
+    if (!NETWORK.walletReady) {
+      setError(`${NETWORK.label} RPC is not configured.`);
+      return;
+    }
+
+    if (!isConnected || !walletProvider) {
+      pendingAdd.current = true;
+      await open({ view: 'Connect' });
+      return;
+    }
+
+    setBusy(true);
+    try {
+      await ensureExplorerNetwork(walletProvider as WalletRequestProvider);
+    } catch (reason) {
+      const message = reason instanceof Error ? reason.message : 'Could not add the network.';
+      setError(message);
+    } finally {
+      setBusy(false);
+    }
+  }, [isConnected, open, walletProvider]);
+
+  useEffect(() => {
+    if (!pendingAdd.current || !isConnected || !walletProvider) return;
+    pendingAdd.current = false;
+    void addOrSwitch();
+  }, [addOrSwitch, isConnected, walletProvider]);
+
+  const details = [
+    { label: 'EVM chain ID', value: `${NETWORK.evmChainId} (${NETWORK.chainIdHex})` },
+    { label: 'Cosmos chain ID', value: NETWORK.cosmosChainId },
+    { label: 'RPC endpoint', value: NETWORK.rpcUrl || 'Not configured' },
+    { label: 'Native currency', value: 'LITHO' },
+  ];
+
+  return (
+    <section className="network-setup-card rounded-3xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-6 shadow-sm">
+      <div className="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <div className="text-xs font-semibold uppercase tracking-[0.18em] text-litho-500">
+            Wallet network
+          </div>
+          <h2 className="mt-2 text-2xl font-semibold tracking-tight">{NETWORK.label}</h2>
+          <p className="mt-2 max-w-xl text-sm leading-6 text-[var(--color-text-secondary)]">
+            Add the official network configuration to your wallet before connecting or signing in.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={addOrSwitch}
+          disabled={busy || connectedToExplorer}
+          className="shrink-0 rounded-2xl bg-litho-500 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-litho-500/20 transition hover:bg-litho-600 disabled:cursor-default disabled:bg-emerald-500 disabled:opacity-100"
+        >
+          {busy
+            ? 'Adding network…'
+            : connectedToExplorer
+              ? `✓ ${NETWORK.shortName} connected`
+              : isConnected
+                ? `Switch to ${NETWORK.shortName}`
+                : `Quick add ${NETWORK.shortName}`}
+        </button>
+      </div>
+
+      <dl className="mt-6 divide-y divide-[var(--color-border-light)] overflow-hidden rounded-2xl border border-[var(--color-border)]">
+        {details.map((detail) => (
+          <div key={detail.label} className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+            <dt className="text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
+              {detail.label}
+            </dt>
+            <dd className="flex min-w-0 items-center gap-3">
+              <code className="min-w-0 break-all text-sm text-[var(--color-text-primary)]">
+                {detail.value}
+              </code>
+              <CopyButton value={detail.value} label={detail.label} />
+            </dd>
+          </div>
+        ))}
+      </dl>
+
+      {error && (
+        <p className="mt-4 rounded-xl border border-red-400/25 bg-red-400/10 px-4 py-3 text-sm text-red-600 dark:text-red-200">
+          {error}
+        </p>
+      )}
+    </section>
+  );
+}

Makalu/explorer/components/ThanosSignIn.tsx

@@ -12,6 +12,8 @@ import {
   type StoredSession,
 } from '@/lib/auth';
 import { NETWORK } from '@/lib/network';
+import { isThanosConnector, isThanosIdentity, THANOS_INSTALL_URL } from '@/lib/thanos';
+import { ensureExplorerNetwork, type WalletRequestProvider } from '@/lib/walletNetwork';
 
 /**
  * "Sign in with Thanos" — SIWE authentication, unified with wallet connection.
@@ -36,32 +38,57 @@ import { NETWORK } from '@/lib/network';
 
 const APP_NAME = `${NETWORK.label} Explorer`;
 const CHAIN_ID = NETWORK.evmChainId;
-const THANOS_RDNS = 'fi.thanos.wallet';
-const THANOS_INSTALL_URL = 'https://thanos.fi';
-
 function shorten(addr: string): string {
   return addr.length > 12 ? `${addr.slice(0, 6)}…${addr.slice(-4)}` : addr;
 }
 
 function findThanosConnector(): Connector | undefined {
-  return ConnectorController.state.connectors.find(
-    (c) =>
-      c.id === 'eip6963' &&
-      (c.info?.rdns === THANOS_RDNS || c.name?.toLowerCase().includes('thanos')),
-  );
+  return ConnectorController.state.connectors.find(isThanosConnector);
 }
 
 /**
  * Thanos may announce after Web3Modal's init-time EIP-6963 discovery (the
  * extension's service worker can wake late). Re-request announcements once
  * before concluding it isn't installed.
  */
-async function discoverThanosConnector(): Promise<Connector | undefined> {
+type ThanosWallet = { connector?: Connector; provider: Eip1193Provider };
+
+async function discoverThanosWallet(): Promise<ThanosWallet | undefined> {
   const existing = findThanosConnector();
-  if (existing) return existing;
+  if (existing?.provider) {
+    return { connector: existing, provider: existing.provider as Eip1193Provider };
+  }
+
+  let announcedProvider: Eip1193Provider | undefined;
+  const onAnnouncement = (event: Event) => {
+    const detail = (event as CustomEvent<{
+      info?: { rdns?: string; name?: string };
+      provider?: Eip1193Provider;
+    }>).detail;
+    if (detail?.provider && isThanosIdentity(detail.info?.rdns, detail.info?.name)) {
+      announcedProvider = detail.provider;
+    }
+  };
+
+  window.addEventListener('eip6963:announceProvider', onAnnouncement);
   window.dispatchEvent(new Event('eip6963:requestProvider'));
-  await new Promise((resolve) => setTimeout(resolve, 300));
-  return findThanosConnector();
+
+  try {
+    // Extension service workers can wake after Web3Modal's initial discovery.
+    // Allow late announcements and prefer Web3Modal's connector when it appears.
+    for (let attempt = 0; attempt < 8; attempt += 1) {
+      await new Promise((resolve) => setTimeout(resolve, 150));
+      const connector = findThanosConnector();
+      if (connector?.provider) {
+        return { connector, provider: connector.provider as Eip1193Provider };
+      }
+      if (announcedProvider) return { provider: announcedProvider };
+    }
+  } finally {
+    window.removeEventListener('eip6963:announceProvider', onAnnouncement);
+  }
+
+  return announcedProvider ? { provider: announcedProvider } : undefined;
 }
 
 /**
@@ -176,24 +203,27 @@ export default function ThanosSignIn() {
     setThanosMissing(false);
     setPhase('connecting');
     try {
-      const connector = await discoverThanosConnector();
-      if (!connector) {
+      const wallet = await discoverThanosWallet();
+      if (!wallet) {
         setThanosMissing(true);
         return;
       }
-      // Connects (or switches the active connection to) Thanos with no picker
-      // UI, updating all Web3Modal account state along the way.
-      await ConnectionController.connectExternal(connector, connector.chain);
-      const provider = connector.provider as Eip1193Provider | undefined;
-      const accounts = provider
-        ? ((await provider.request({ method: 'eth_accounts' })) as string[])
-        : [];
+      const { connector, provider } = wallet;
+      if (connector) {
+        // Keep Web3Modal's shared account state in sync when its connector is available.
+        await ConnectionController.connectExternal(connector, connector.chain);
+      }
+      let accounts = (await provider.request({ method: 'eth_accounts' })) as string[];
+      if (!accounts?.length && !connector) {
+        accounts = (await provider.request({ method: 'eth_requestAccounts' })) as string[];
+      }
       const address = accounts?.[0];
-      if (!provider || !address) {
+      if (!address) {
         // connectExternal swallows a user rejection (it stores the error and
         // resolves) — an empty account list is how the rejection surfaces here.
         throw new Error('Wallet connection was declined in Thanos.');
       }
+      await ensureExplorerNetwork(provider as WalletRequestProvider);
       setPhase('signing');
       const stored = await signSession(provider, address);
       setSession(stored);

Makalu/explorer/context/WalletContext.tsx

@@ -1,7 +1,9 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
+import { ConnectorController } from '@web3modal/core';
 import { createWeb3Modal, defaultConfig, useWeb3Modal, useWeb3ModalAccount, useDisconnect } from '@web3modal/ethers/react';
 
 import { NETWORK } from '@/lib/network';
+import { prioritizeThanosConnectors } from '@/lib/thanos';
 
 const PROJECT_ID = '4d5085c5fd29c034f63f9256013dcd09';
 
@@ -96,9 +98,19 @@ if (typeof window !== 'undefined') {
       ],
       themeMode: NETWORK.defaultTheme,
       themeVariables: {
-        '--w3m-accent': '#34d399',
+        '--w3m-accent': NETWORK.isMainnet ? '#4a90d9' : '#34d399',
       },
     });
+
+    // EIP-6963 wallets are shown in announcement order by Web3Modal. Keep the
+    // Lithosphere-native Thanos wallet first without hiding any other wallet.
+    const preferThanos = (connectors: typeof ConnectorController.state.connectors) => {
+      const prioritized = prioritizeThanosConnectors(connectors);
+      if (prioritized.every((connector, index) => connector === connectors[index])) return;
+      queueMicrotask(() => ConnectorController.setConnectors(prioritized));
+    };
+    preferThanos(ConnectorController.state.connectors);
+    ConnectorController.subscribeKey('connectors', preferThanos);
   } catch (error) {
     console.log('Web3Modal init:', error instanceof Error ? error.message : 'already initialized');
   }

Makalu/explorer/lib/network.ts

@@ -53,8 +53,8 @@ export function buildNetworkConfig(env: PublicEnvironment) {
     rpcUrl,
     siteUrl,
     explorerTitle: env.NEXT_PUBLIC_EXPLORER_TITLE?.trim() || 'Lithoscan',
-    logoPath: '/litho-coin-logo.svg',
-    faviconPath: isMainnet ? '/litho-coin-logo.svg' : '/makalu-testnet-favicon.png',
+    logoPath: '/litho-logo.png',
+    faviconPath: isMainnet ? '/litho-logo.png' : '/makalu-testnet-favicon.png',
     defaultTheme,
     walletReady: validHttpUrl(rpcUrl),
     faucetEnabled: !isMainnet,

Makalu/explorer/lib/thanos.ts

@@ -0,0 +1,33 @@
+export const THANOS_RDNS = 'fi.thanos.wallet';
+export const THANOS_INSTALL_URL = 'https://thanos.fi/';
+
+type ConnectorIdentity = {
+  name?: string | null;
+  info?: { rdns?: string | null } | null;
+};
+
+export function isThanosIdentity(rdns?: string | null, name?: string | null): boolean {
+  const normalizedRdns = rdns?.trim().toLowerCase() || '';
+  const normalizedName = name?.trim().toLowerCase() || '';
+
+  return normalizedRdns === THANOS_RDNS
+    || normalizedRdns.includes('thanos')
+    || normalizedName.includes('thanos');
+}
+
+export function isThanosConnector(connector: ConnectorIdentity): boolean {
+  return isThanosIdentity(connector.info?.rdns, connector.name);
+}
+
+export function prioritizeThanosConnectors<T extends ConnectorIdentity>(
+  connectors: T[],
+): T[] {
+  return connectors
+    .map((connector, index) => ({ connector, index }))
+    .sort((left, right) => {
+      const leftPreferred = isThanosConnector(left.connector) ? 0 : 1;
+      const rightPreferred = isThanosConnector(right.connector) ? 0 : 1;
+      return leftPreferred - rightPreferred || left.index - right.index;
+    })
+    .map(({ connector }) => connector);
+}