Merge pull request #144 from AugustoL/fix/ipfs-ens-routing

fix: IPFS/ENS routing compatibility

Author: AugustoL

README.md

@@ -246,7 +246,7 @@ Default RPC endpoints:
 
 - **React 19** - UI framework
 - **TypeScript** - Type safety
-- **React Router** - Client-side routing
+- **React Router** - Client-side routing (HashRouter for IPFS/ENS compatibility)
 - **Custom RPC Service** - Direct JSON-RPC calls to blockchain nodes
 - **Biome** – Code formatting and linting
 

src/App.tsx

@@ -1,34 +1,9 @@
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { useCallback, useEffect } from "react";
-import {
-  HashRouter,
-  Navigate,
-  Route,
-  BrowserRouter as Router,
-  Routes,
-  useLocation,
-  useNavigate,
-} from "react-router-dom";
+import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import { cssVariables, getRainbowKitTheme } from "./theme";
 import { getBaseDomainUrl, getSubdomain, getSubdomainRedirect } from "./utils/subdomainUtils";
 
-// Detect if we're running on GitHub Pages and get the correct basename
-function getBasename(): string {
-  const { hostname, pathname } = window.location;
-
-  // Check if we're on GitHub Pages
-  if (hostname.includes("github.io")) {
-    // Extract repo name from pathname (first segment after domain)
-    const pathSegments = pathname.split("/").filter(Boolean);
-    if (pathSegments.length > 0) {
-      return `/${pathSegments[0]}`;
-    }
-  }
-
-  // For local development or custom domains, no basename needed
-  return "";
-}
-
 import ErrorBoundary from "./components/common/ErrorBoundary";
 import Footer from "./components/common/Footer";
 import { IsometricBlocks } from "./components/common/IsometricBlocks";
@@ -64,9 +39,6 @@ import {
 import { SettingsProvider, useSettings, useTheme } from "./context/SettingsContext";
 import { useAppReady, useOnAppReady } from "./hooks/useAppReady";
 
-// Detect GH Pages once
-const isGhPages = typeof window !== "undefined" && window.location.hostname.includes("github.io");
-
 // Component that handles subdomain redirects
 function SubdomainRedirect() {
   const navigate = useNavigate();
@@ -159,17 +131,13 @@ function AppContent() {
 
 // Main App component that provides the theme context
 function App() {
-  const BaseRouter = isGhPages ? HashRouter : Router;
-  // IMPORTANT: no basename for HashRouter
-  const basename = isGhPages ? "" : getBasename();
-
   return (
     <ErrorBoundary>
       <SettingsProvider>
         <RainbowKitProviderWrapper>
-          <BaseRouter basename={basename}>
+          <HashRouter>
             <AppContent />
-          </BaseRouter>
+          </HashRouter>
         </RainbowKitProviderWrapper>
       </SettingsProvider>
     </ErrorBoundary>

src/utils/subdomainUtils.ts

@@ -18,6 +18,11 @@ export function getSubdomain(): string | null {
     return null;
   }
 
+  // Skip subdomain processing for ENS gateways (e.g., openscan.eth.link, openscan.eth.limo)
+  if (hostname.endsWith(".eth.link") || hostname.endsWith(".eth.limo")) {
+    return null;
+  }
+
   // Handle localhost subdomains (e.g., ethereum.localhost)
   if (hostname.endsWith(".localhost")) {
     return hostname.replace(".localhost", "");