Persist server settings in localStorage

Author: kuzdogan

app/components/PageLayout.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from "react";
 import { useChains } from "../contexts/ChainsContext";
 import { Tooltip } from "react-tooltip";
+import { useServerConfig } from "~/contexts/ServerConfigContext";
+import { removeCurrentServerUrl } from "../utils/serverStorage";
 
 interface PageLayoutProps {
   children: ReactNode;
@@ -11,6 +13,22 @@ interface PageLayoutProps {
 
 export default function PageLayout({ children, maxWidth = "max-w-4xl", title, subtitle }: PageLayoutProps) {
   const { loading, error, refetch } = useChains();
+  const { serverUrl, setServerUrl, getDefaultServerUrls, setCustomServerUrls } = useServerConfig();
+
+  const handleResetServerSettings = () => {
+    // Clear custom server URLs
+    setCustomServerUrls([]);
+
+    // Reset to default server URL
+    const defaultUrls = getDefaultServerUrls();
+    setServerUrl(defaultUrls[0]);
+
+    // Clear from localStorage
+    removeCurrentServerUrl();
+
+    // Refetch after reset
+    refetch();
+  };
 
   const renderHeader = () => {
     if (!title && !subtitle) {
@@ -47,14 +65,23 @@ export default function PageLayout({ children, maxWidth = "max-w-4xl", title, su
               />
             </svg>
           </div>
-          <h3 className="text-lg font-medium text-gray-900 mb-2">Failed to load chains from the Sourcify server</h3>
+          <h3 className="text-lg font-medium text-gray-900 mb-2">Error</h3>
           <p className="text-gray-600 mb-4">{error}</p>
-          <button
-            onClick={refetch}
-            className="bg-cerulean-blue-500 text-white px-4 py-2 rounded-md hover:bg-cerulean-blue-600 focus:outline-none focus:ring-2 focus:ring-cerulean-blue-500 focus:ring-offset-2"
-          >
-            Try Again
-          </button>
+          <p className="text-gray-600 mb-4">Server URL: {serverUrl}</p>
+          <div className="flex flex-col space-y-2 items-center">
+            <button
+              onClick={refetch}
+              className="bg-cerulean-blue-500 text-white px-4 py-2 rounded-md hover:bg-cerulean-blue-600 focus:outline-none focus:ring-2 focus:ring-cerulean-blue-500 focus:ring-offset-2"
+            >
+              Try Again
+            </button>
+            <button
+              onClick={handleResetServerSettings}
+              className="text-red-600 px-4 py-2 rounded-md hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 border border-red-200"
+            >
+              Reset Server Settings
+            </button>
+          </div>
         </div>
       );
     }

app/components/verification/Settings.tsx

@@ -5,9 +5,8 @@ import { useServerConfig } from "../../contexts/ServerConfigContext";
 import { getEtherscanApiKey, setEtherscanApiKey, removeEtherscanApiKey } from "../../utils/etherscanStorage";
 
 export default function Settings() {
-  const { serverUrl, setServerUrl, getDefaultServerUrls } = useServerConfig();
+  const { serverUrl, setServerUrl, getDefaultServerUrls, customServerUrls, setCustomServerUrls } = useServerConfig();
   const [showSettings, setShowSettings] = useState(false);
-  const [customServerUrls, setCustomServerUrls] = useState<string[]>([]);
   const [editingCustomUrl, setEditingCustomUrl] = useState<string | null>(null);
   const [newCustomUrl, setNewCustomUrl] = useState("");
   const [urlError, setUrlError] = useState<string | null>(null);
@@ -155,6 +154,7 @@ export default function Settings() {
     return key.substring(0, 4) + "*".repeat(key.length - 4);
   };
 
+
   return (
     <div
       className={`bg-gray-50 border border-gray-200 transition-all duration-300 overflow-hidden ${

app/contexts/ServerConfigContext.tsx

@@ -1,17 +1,18 @@
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useState, useEffect } from "react";
 import type { ReactNode } from "react";
+import { getCurrentServerUrl, setCurrentServerUrl, getCustomServerUrls, setCustomServerUrls } from "../utils/serverStorage";
 
 interface ServerConfigContextType {
   serverUrl: string;
   setServerUrl: (url: string) => void;
   getDefaultServerUrls: () => string[];
+  customServerUrls: string[];
+  setCustomServerUrls: (urls: string[]) => void;
 }
 
 const ServerConfigContext = createContext<ServerConfigContextType | undefined>(undefined);
 
 export function ServerConfigProvider({ children }: { children: ReactNode }) {
-  const [serverUrl, setServerUrl] = useState(import.meta.env.VITE_SOURCIFY_SERVER_URL || "https://sourcify.dev/server");
-
   const getDefaultServerUrls = () => {
     const urls = [import.meta.env.VITE_SOURCIFY_SERVER_URL || "https://sourcify.dev/server"];
     if (import.meta.env.DEV) {
@@ -20,8 +21,53 @@ export function ServerConfigProvider({ children }: { children: ReactNode }) {
     return urls;
   };
 
+  // Initialize server URL from localStorage or use default
+  const [serverUrl, setServerUrlState] = useState(() => {
+    const storedUrl = getCurrentServerUrl();
+    return storedUrl || getDefaultServerUrls()[0];
+  });
+
+  // Initialize custom server URLs from localStorage
+  const [customServerUrls, setCustomServerUrlsState] = useState(() => {
+    return getCustomServerUrls();
+  });
+
+  // Sync with localStorage when server URL changes
+  const handleSetServerUrl = (url: string) => {
+    setCurrentServerUrl(url);
+    setServerUrlState(url);
+  };
+
+  // Sync with localStorage when custom URLs change
+  const handleSetCustomServerUrls = (urls: string[]) => {
+    setCustomServerUrls(urls);
+    setCustomServerUrlsState(urls);
+  };
+
+  // Listen for storage changes from other tabs/windows
+  useEffect(() => {
+    const handleStorageChange = () => {
+      const storedUrl = getCurrentServerUrl();
+      const storedCustomUrls = getCustomServerUrls();
+      
+      if (storedUrl && storedUrl !== serverUrl) {
+        setServerUrlState(storedUrl);
+      }
+      setCustomServerUrlsState(storedCustomUrls);
+    };
+
+    window.addEventListener("serverUrlChanged", handleStorageChange);
+    return () => window.removeEventListener("serverUrlChanged", handleStorageChange);
+  }, [serverUrl]);
+
   return (
-    <ServerConfigContext.Provider value={{ serverUrl, setServerUrl, getDefaultServerUrls }}>
+    <ServerConfigContext.Provider value={{ 
+      serverUrl, 
+      setServerUrl: handleSetServerUrl, 
+      getDefaultServerUrls,
+      customServerUrls,
+      setCustomServerUrls: handleSetCustomServerUrls
+    }}>
       {children}
     </ServerConfigContext.Provider>
   );

app/utils/serverStorage.ts

@@ -0,0 +1,51 @@
+import { useState, useEffect } from "react";
+
+const CURRENT_SERVER_URL_STORAGE_KEY = "sourcify-current-server-url";
+const CUSTOM_SERVER_URLS_STORAGE_KEY = "sourcify-custom-server-urls";
+const SERVER_URL_CHANGED_EVENT = "serverUrlChanged";
+
+export const getCurrentServerUrl = (): string | null => {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem(CURRENT_SERVER_URL_STORAGE_KEY);
+};
+
+export const setCurrentServerUrl = (url: string): void => {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(CURRENT_SERVER_URL_STORAGE_KEY, url);
+  window.dispatchEvent(new CustomEvent(SERVER_URL_CHANGED_EVENT));
+};
+
+export const removeCurrentServerUrl = (): void => {
+  if (typeof window === "undefined") return;
+  localStorage.removeItem(CURRENT_SERVER_URL_STORAGE_KEY);
+  window.dispatchEvent(new CustomEvent(SERVER_URL_CHANGED_EVENT));
+};
+
+export const getCustomServerUrls = (): string[] => {
+  if (typeof window === "undefined") return [];
+  const stored = localStorage.getItem(CUSTOM_SERVER_URLS_STORAGE_KEY);
+  return stored ? JSON.parse(stored) : [];
+};
+
+export const setCustomServerUrls = (urls: string[]): void => {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(CUSTOM_SERVER_URLS_STORAGE_KEY, JSON.stringify(urls));
+  window.dispatchEvent(new CustomEvent(SERVER_URL_CHANGED_EVENT));
+};
+
+export const useServerUrl = () => {
+  const [currentServerUrl, setCurrentServerUrlState] = useState<string | null>(getCurrentServerUrl());
+  const [customServerUrls, setCustomServerUrlsState] = useState<string[]>(getCustomServerUrls());
+
+  useEffect(() => {
+    const handleServerUrlChange = () => {
+      setCurrentServerUrlState(getCurrentServerUrl());
+      setCustomServerUrlsState(getCustomServerUrls());
+    };
+    
+    window.addEventListener(SERVER_URL_CHANGED_EVENT, handleServerUrlChange);
+    return () => window.removeEventListener(SERVER_URL_CHANGED_EVENT, handleServerUrlChange);
+  }, []);
+
+  return { currentServerUrl, customServerUrls };
+};