FEATURE: custom rpc setting

src/components/Header.tsx

@@ -1,13 +1,45 @@
+import { useState, useEffect, useRef } from "react";
 import ConnectWallet from "./connect/ConnectWallet";
 import Container from "./ui/Container";
+import SettingsPopup from "./SettingsPopup";
 
 export default function Header() {
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const settingsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (settingsRef.current && !settingsRef.current.contains(event.target as Node)) {
+        setIsSettingsOpen(false);
+      }
+    };
+
+    if (isSettingsOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isSettingsOpen]);
+
   return (
     <header className="relative z-50 bg-white/80 h-16 flex-shrink-0">
       <Container>
         <div className="w-full h-full flex justify-between items-center text-gray-700">
           <div className="text-black font-semibold text-lg [@media(min-width:640px)]:text-xl">LTV Protocol</div>
-          <ConnectWallet />
+
+          <div className="flex items-center gap-2 relative" ref={settingsRef}>
+            <ConnectWallet />
+            <button
+              onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+              className="p-2 rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors focus:outline-none bg-white border border-gray-300"
+              aria-label="Settings"
+            >
+              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+            </button>
+            <SettingsPopup isOpen={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
+          </div>
         </div>
       </Container>
     </header>

src/components/SettingsPopup.tsx

@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react';
+import { MainView } from './settings/MainView';
+import { NetworkSelectView } from './settings/NetworkSelectView';
+import { RpcConfigView } from './settings/RpcConfigView';
+
+interface SettingsPopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+type View = 'main' | 'network-select' | 'rpc-config';
+
+export default function SettingsPopup({ isOpen, onClose }: SettingsPopupProps) {
+  const [currentView, setCurrentView] = useState<View>('main');
+  const [selectedNetwork, setSelectedNetwork] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) {
+      // Reset navigation state when closed
+      setCurrentView('main');
+      setSelectedNetwork(null);
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleNetworkSelect = (chainId: string) => {
+    setSelectedNetwork(chainId);
+    setCurrentView('rpc-config');
+  };
+
+  return (
+    <div className="
+      absolute top-[65px] right-0 bg-white rounded-lg
+      min-w-[320px] z-50 overflow-hidden shadow-lg border border-gray-100
+    ">
+      <div className="p-4">
+        {currentView === 'main' && (
+          <MainView
+            onNavigateToNetworkSelect={() => setCurrentView('network-select')}
+            onClose={onClose}
+          />
+        )}
+
+        {currentView === 'network-select' && (
+          <NetworkSelectView
+            onSelectNetwork={handleNetworkSelect}
+            onBack={() => setCurrentView('main')}
+            onClose={onClose}
+          />
+        )}
+
+        {currentView === 'rpc-config' && selectedNetwork && (
+          <RpcConfigView
+            selectedNetwork={selectedNetwork}
+            onBack={() => setCurrentView('network-select')}
+            onClose={onClose}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

src/components/actions/ActionHandler.tsx

@@ -96,7 +96,7 @@ export default function ActionHandler({ actionType, tokenType }: ActionHandlerPr
   const displayTokenSymbol = config.usesShares ? sharesSymbol : formatTokenSymbol(tokenSymbol);
   const displayDecimals = config.usesShares ? sharesDecimals : tokenDecimals;
 
-  const { isLoadingPreview, previewData, receive, provide } = useActionPreview({
+  const { previewData, receive, provide } = useActionPreview({
     amount,
     actionType,
     tokenType,
@@ -314,7 +314,6 @@ export default function ActionHandler({ actionType, tokenType }: ActionHandlerPr
           <PreviewBox
             receive={receive}
             provide={provide}
-            isLoading={isLoadingPreview}
             title="Transaction Preview"
           />
         ) : undefined

src/components/actions/SafeActionHandler.tsx

@@ -105,7 +105,7 @@ export default function SafeActionHandler({ actionType, tokenType }: SafeActionH
   const displayTokenSymbol = config.usesShares ? sharesSymbol : formatTokenSymbol(tokenSymbol);
   const displayDecimals = config.usesShares ? sharesDecimals : tokenDecimals;
 
-  const { isLoadingPreview, previewData, receive, provide } = useActionPreview({
+  const { previewData, receive, provide } = useActionPreview({
     amount,
     actionType,
     tokenType,
@@ -458,7 +458,6 @@ export default function SafeActionHandler({ actionType, tokenType }: SafeActionH
           <PreviewBox
             receive={receive}
             provide={provide}
-            isLoading={isLoadingPreview}
             title="Transaction Preview"
           />
         ) : undefined

src/components/settings/MainView.tsx

@@ -0,0 +1,23 @@
+import { SettingsHeader } from './SettingsHeader';
+
+interface MainViewProps {
+  onNavigateToNetworkSelect: () => void;
+  onClose: () => void;
+}
+
+export function MainView({ onNavigateToNetworkSelect, onClose }: MainViewProps) {
+  return (
+    <div className="space-y-2">
+      <SettingsHeader title="Settings" onClose={onClose} />
+      <button
+        onClick={onNavigateToNetworkSelect}
+        className="w-full text-left px-4 py-3 rounded-lg bg-white hover:bg-gray-50 flex justify-between items-center transition-colors border border-gray-100"
+      >
+        <span className="font-medium text-gray-700">Set Custom RPC</span>
+        <svg className="w-5 h-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+          <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+        </svg>
+      </button>
+    </div>
+  );
+};

src/components/settings/NetworkSelectView.tsx

@@ -0,0 +1,27 @@
+import { SettingsHeader } from './SettingsHeader';
+import { NETWORKS_LIST } from '@/constants';
+
+interface NetworkSelectViewProps {
+  onSelectNetwork: (chainId: string) => void;
+  onBack: () => void;
+  onClose: () => void;
+}
+
+export function NetworkSelectView({ onSelectNetwork, onBack, onClose }: NetworkSelectViewProps) {
+  return (
+    <div className="space-y-2">
+      <SettingsHeader title="Select Network" onClose={onClose} onBack={onBack} />
+
+      {NETWORKS_LIST.map((network) => (
+        <button
+          key={network.chainIdString}
+          onClick={() => onSelectNetwork(network.chainIdString)}
+          className="w-full text-left px-4 py-3 rounded-lg bg-white hover:bg-gray-50 flex items-center gap-3 transition-colors border border-gray-100"
+        >
+          <div className={`w-2 h-2 rounded-full ${network.color}`}></div>
+          <span className="text-gray-700">{network.name}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

src/components/settings/RpcConfigView.tsx

@@ -0,0 +1,171 @@
+import { useState, useEffect } from 'react';
+import { SettingsHeader } from './SettingsHeader';
+import { NETWORK_CONFIGS } from '@/constants';
+import { useAppContext } from '@/contexts';
+import { JsonRpcProvider } from 'ethers';
+import { WarningMessage, SuccessMessage } from '@/components/ui';
+
+interface RpcConfigViewProps {
+  selectedNetwork: string;
+  onBack: () => void;
+  onClose: () => void;
+}
+
+export function RpcConfigView({ selectedNetwork, onBack, onClose }: RpcConfigViewProps) {
+  const { refreshPublicProvider } = useAppContext();
+
+  const [rpcUrl, setRpcUrl] = useState<string>('');
+  const [activeRpcDisplay, setActiveRpcDisplay] = useState<string>('');
+
+  const [isCustomRpcSet, setIsCustomRpcSet] = useState(false);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const getDefaultUrl = () => {
+    return NETWORK_CONFIGS[selectedNetwork]?.rpcUrls[0] ?? '';
+  };
+
+  useEffect(() => {
+    // Load current RPC
+    const custom = localStorage.getItem(`custom_rpc_${selectedNetwork}`);
+    const defaultUrl = getDefaultUrl();
+
+    // If custom is set, show it in input. If not, input is empty.
+    setRpcUrl(custom || '');
+    // Active is custom if exists, else it's default
+    setActiveRpcDisplay(custom || defaultUrl);
+
+
+    setIsCustomRpcSet(!!custom);
+    setError(null);
+    setSuccess(null);
+  }, [selectedNetwork]);
+
+  const validateAndSave = async () => {
+    setError(null);
+    setSuccess(null);
+    setIsLoading(true);
+
+    try {
+      if (!rpcUrl.startsWith('http://') && !rpcUrl.startsWith('https://')) {
+        throw new Error('URL must start with http:// or https://');
+      }
+
+      const tempProvider = new JsonRpcProvider(rpcUrl);
+      const network = await tempProvider.getNetwork();
+
+      const returnedChainId = network.chainId.toString();
+
+      const networkConfig = NETWORK_CONFIGS[selectedNetwork];
+      const expectedChainIdBigInt = networkConfig?.chainIdBigInt;
+
+      if (expectedChainIdBigInt && network.chainId !== expectedChainIdBigInt) {
+        throw new Error(`Chain ID mismatch. Expected ${expectedChainIdBigInt}, got ${returnedChainId}`);
+      }
+
+      const currentStored = localStorage.getItem(`custom_rpc_${selectedNetwork}`);
+      if (currentStored !== rpcUrl) {
+        localStorage.setItem(`custom_rpc_${selectedNetwork}`, rpcUrl);
+        await refreshPublicProvider();
+      }
+
+      setIsCustomRpcSet(true);
+      setActiveRpcDisplay(rpcUrl);
+      setSuccess('RPC updated successfully!');
+    } catch (err: any) {
+      console.error("RPC Validation failed:", err);
+      const msg = err.message || '';
+
+      if (
+        msg.includes('NetworkError') ||
+        msg.includes('Failed to fetch') ||
+        msg.includes('connection refused') ||
+        err.code === "NETWORK_ERROR"
+      ) {
+        setError('This RPC URL is not responding.');
+      } else {
+        setError('Failed to connect to RPC');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleReset = async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const defaultUrl = getDefaultUrl();
+      setRpcUrl('');
+      setActiveRpcDisplay(defaultUrl);
+
+      localStorage.removeItem(`custom_rpc_${selectedNetwork}`);
+      await refreshPublicProvider();
+      setIsCustomRpcSet(false);
+      setSuccess('Reset to default successfully.');
+    } catch (err: any) {
+      setError('Failed to reset RPC');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Determine if save should be disabled
+  const isInputEmpty = !rpcUrl || rpcUrl.trim() === '';
+  const isSaveDisabled = isLoading || isInputEmpty;
+
+  return (
+    <div className="space-y-4">
+      <SettingsHeader title="Configure RPC" onClose={onClose} onBack={onBack} />
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Active RPC URL for {NETWORK_CONFIGS[selectedNetwork]?.name ?? 'Network'}
+        </label>
+        <div
+          className="mb-2 p-2 bg-gray-50 rounded border border-gray-200 text-xs text-gray-600 font-mono max-w-[286.4px] overflow-x-auto whitespace-nowrap select-text cursor-text"
+          style={{ colorScheme: 'light' }}
+        >
+          {activeRpcDisplay}
+        </div>
+
+        <label className="block text-sm font-medium text-gray-700 mb-1 mt-3">
+          New Custom RPC URL
+        </label>
+        <input
+          type="text"
+          value={rpcUrl}
+          onChange={(e) => setRpcUrl(e.target.value)}
+          disabled={isLoading}
+          className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+          placeholder="https://..."
+        />
+      </div>
+
+      {error && <WarningMessage text={error} className="max-w-[286.4px]" />}
+      {success && <SuccessMessage text={success} className="max-w-[286.4px]" />}
+
+      <div className="flex flex-col gap-2">
+        <button
+          onClick={validateAndSave}
+          disabled={isSaveDisabled}
+          className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+        >
+          {isLoading ? 'Saving...' : 'Save'}
+        </button>
+        {isCustomRpcSet && (
+          <button
+            onClick={handleReset}
+            disabled={isLoading}
+            className="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+          >
+            Reset to Default
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/settings/SettingsHeader.tsx

@@ -0,0 +1,27 @@
+interface SettingsHeaderProps {
+  title: string;
+  onClose: () => void;
+  onBack?: () => void;
+}
+
+export function SettingsHeader({ title, onClose, onBack }: SettingsHeaderProps) {
+  return (
+    <div className="flex justify-between items-center mb-3">
+      <div className="flex items-center">
+        {onBack && (
+          <button onClick={onBack} className="mr-2 text-gray-500 hover:text-gray-700 bg-white rounded-md p-1 hover:bg-gray-50 border border-transparent hover:border-gray-200">
+            <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
+            </svg>
+          </button>
+        )}
+        <span className="font-medium text-gray-900">{title}</span>
+      </div>
+      <button onClick={onClose} className="text-gray-400 hover:text-gray-600 bg-white rounded-md p-1 hover:bg-gray-50">
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  );
+};