From 6fc4f96622f385b1f1eea7d2c9a5467d7a2af9a7 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Wed, 3 Sep 2025 14:07:09 +0800
Subject: [PATCH 1/3] chore: misc fixes

---
 .claude/settings.local.json                  |  3 +-
 src/OnchainProviders.tsx                     | 70 +++++++++++---------
 src/components/layout/header/Navbar.tsx      |  6 +-
 src/components/providers/ClientProviders.tsx |  9 +--
 src/hooks/useTransactionWithToast.tsx        | 14 ++--
 5 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index b8092c79..bdaef3f3 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -16,7 +16,8 @@
       "Bash(node:*)",
       "Bash(npx tsc:*)",
       "Bash(pnpm add:*)",
-      "WebFetch(domain:www.heroui.com)"
+      "WebFetch(domain:www.heroui.com)",
+      "WebSearch"
     ],
     "deny": []
   }
diff --git a/src/OnchainProviders.tsx b/src/OnchainProviders.tsx
index 348da33b..c1dd17b1 100644
--- a/src/OnchainProviders.tsx
+++ b/src/OnchainProviders.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactNode, useMemo } from 'react';
+import { ReactNode } from 'react';
 import { RainbowKitProvider, darkTheme, lightTheme } from '@rainbow-me/rainbowkit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WagmiProvider } from 'wagmi';
@@ -36,42 +36,48 @@ const queryClient = new QueryClient({
 });
 
 const projectId = process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID ?? '';
+if (!projectId) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn('NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID is not set; WagmiProvider disabled.');
+  }
+  throw new Error('NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID is not set');
+}
+
+const staticWagmiConfig = createWagmiConfig(projectId);
 
 // eslint-disable-next-line @typescript-eslint/promise-function-async
 function WagmiConfigProvider({ children }: Props) {
-  const { customRpcUrls, rpcConfigVersion } = useCustomRpcContext();
-
-  // Create wagmi config with custom RPCs, recreating when RPC config changes
-  const wagmiConfig = useMemo(() => {
-    return createWagmiConfig(projectId, customRpcUrls);
-  }, [customRpcUrls, rpcConfigVersion]);
-
-  if (!projectId) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn('NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID is not set; WagmiProvider disabled.');
-    }
-    return children;
-  }
+  const { customRpcUrls } = useCustomRpcContext();
+  
+  // Only use dynamic config when custom RPCs are explicitly set
+  const hasCustomRpcs = Object.keys(customRpcUrls).length > 0;
+  const wagmiConfig = hasCustomRpcs 
+    ? createWagmiConfig(projectId, customRpcUrls) 
+    : staticWagmiConfig;
 
   return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <RainbowKitProvider
-          theme={{
-            lightMode: lightTheme({
-              accentColor: '#f45f2d',
-              borderRadius: 'small',
-            }),
-            darkMode: darkTheme({
-              accentColor: '#f45f2d',
-              borderRadius: 'small',
-            }),
-          }}
-          modalSize="compact"
-        >
-          <ConnectRedirectProvider>{children}</ConnectRedirectProvider>
-        </RainbowKitProvider>
-      </QueryClientProvider>
+    <WagmiProvider config={wagmiConfig} reconnectOnMount={true}>
+        <QueryClientProvider client={queryClient}>
+        
+          <RainbowKitProvider
+            theme={{
+              lightMode: lightTheme({
+                accentColor: '#f45f2d',
+                borderRadius: 'small',
+              }),
+              darkMode: darkTheme({
+                accentColor: '#f45f2d',
+                borderRadius: 'small',
+              }),
+            }}
+            modalSize="compact"
+          >
+            <ConnectRedirectProvider>
+              {children}
+              </ConnectRedirectProvider>
+          </RainbowKitProvider>
+        
+        </QueryClientProvider>
     </WagmiProvider>
   );
 }
diff --git a/src/components/layout/header/Navbar.tsx b/src/components/layout/header/Navbar.tsx
index e5106492..85e7db22 100644
--- a/src/components/layout/header/Navbar.tsx
+++ b/src/components/layout/header/Navbar.tsx
@@ -102,7 +102,11 @@ export function Navbar() {
             </>
           )}
 
-          <Dropdown onOpenChange={setIsMoreOpen} className="rounded-sm">
+          <Dropdown 
+            onOpenChange={setIsMoreOpen} 
+            placement="bottom-end"
+            className="rounded-sm z-50"
+          >
             <DropdownTrigger>
               <button
                 type="button"
diff --git a/src/components/providers/ClientProviders.tsx b/src/components/providers/ClientProviders.tsx
index b4026c4a..32b2bd81 100644
--- a/src/components/providers/ClientProviders.tsx
+++ b/src/components/providers/ClientProviders.tsx
@@ -5,7 +5,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { MarketsProvider } from '@/contexts/MarketsContext';
 import { OnboardingProvider } from 'app/positions/components/onboarding/OnboardingContext';
-import { ConnectRedirectProvider } from './ConnectRedirectProvider';
 import { ThemeProviders } from './ThemeProvider';
 import { TokenProvider } from './TokenProvider';
 
@@ -29,11 +28,9 @@ export function ClientProviders({ children }: ClientProvidersProps) {
     <QueryClientProvider client={queryClient}>
       <ThemeProviders>
         <TokenProvider>
-          <ConnectRedirectProvider>
-            <MarketsProvider>
-              <OnboardingProvider>{children}</OnboardingProvider>
-            </MarketsProvider>
-          </ConnectRedirectProvider>
+          <MarketsProvider>
+            <OnboardingProvider>{children}</OnboardingProvider>
+          </MarketsProvider>
         </TokenProvider>
       </ThemeProviders>
       <ReactQueryDevtools initialIsOpen={false} />
diff --git a/src/hooks/useTransactionWithToast.tsx b/src/hooks/useTransactionWithToast.tsx
index c34a8465..33c49b02 100644
--- a/src/hooks/useTransactionWithToast.tsx
+++ b/src/hooks/useTransactionWithToast.tsx
@@ -33,12 +33,10 @@ export function useTransactionWithToast({
     error: txError,
     sendTransactionAsync,
   } = useSendTransaction();
-  const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
+  const { isLoading: isConfirming, isSuccess: isConfirmed, isError } = useWaitForTransactionReceipt({
     hash,
   });
 
-  console.log('isConfirming', isConfirming);
-
   const onClick = useCallback(() => {
     if (hash) {
       // if chainId is not supported, use 1
@@ -58,7 +56,7 @@ export function useTransactionWithToast({
         },
       );
     }
-  }, [isConfirming, pendingText, pendingDescription, toastId, onClick]);
+  }, [isConfirming, pendingText, pendingDescription, toastId, onClick, hash]);
 
   useEffect(() => {
     if (isConfirmed) {
@@ -80,9 +78,9 @@ export function useTransactionWithToast({
         onSuccess();
       }
     }
-    if (txError) {
+    if (isError || txError) {
       toast.update(toastId, {
-        render: <StyledToast title={errorText} message={txError.message} />,
+        render: <StyledToast title={errorText} message={txError ? txError.message : 'Transaction Failed' } />,
         type: 'error',
         isLoading: false,
         autoClose: 5000,
@@ -91,7 +89,9 @@ export function useTransactionWithToast({
       });
     }
   }, [
+    hash,
     isConfirmed,
+    isError,
     txError,
     successText,
     successDescription,
@@ -99,8 +99,6 @@ export function useTransactionWithToast({
     toastId,
     onClick,
     onSuccess,
-    toast,
-    hash,
   ]);
 
   return { sendTransactionAsync, sendTransaction, isConfirming, isConfirmed };

From c375eabc1d8a972ab0400f17267561ee30c587c9 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Wed, 3 Sep 2025 14:25:31 +0800
Subject: [PATCH 2/3] chore: cleanup providers

---
 app/layout.tsx                               | 15 +++--
 src/OnchainProviders.tsx                     | 66 ++++++--------------
 src/components/providers/ClientProviders.tsx | 28 ++-------
 src/components/providers/QueryProvider.tsx   | 47 ++++++++++++++
 4 files changed, 79 insertions(+), 77 deletions(-)
 create mode 100644 src/components/providers/QueryProvider.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index e94421fc..69471197 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import './global.css';
 
 import GoogleAnalytics from '@/components/GoogleAnalytics/GoogleAnalytics';
 import { ClientProviders } from '@/components/providers/ClientProviders';
+import { QueryProvider } from '@/components/providers/QueryProvider';
 import RiskNotificationModal from '@/components/RiskNotificationModal';
 import OnchainProviders from '@/OnchainProviders';
 
@@ -30,12 +31,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     >
       <body suppressHydrationWarning>
         <ThemeProviders>
-          <OnchainProviders>
-            <ClientProviders>
-              {children}
-              <RiskNotificationModal />
-            </ClientProviders>
-          </OnchainProviders>
+          <QueryProvider>
+            <OnchainProviders>
+              <ClientProviders>
+                {children}
+                <RiskNotificationModal />
+              </ClientProviders>
+            </OnchainProviders>
+          </QueryProvider>
         </ThemeProviders>
       </body>
       <GoogleAnalytics />
diff --git a/src/OnchainProviders.tsx b/src/OnchainProviders.tsx
index c1dd17b1..ae69556a 100644
--- a/src/OnchainProviders.tsx
+++ b/src/OnchainProviders.tsx
@@ -2,7 +2,6 @@
 
 import { ReactNode } from 'react';
 import { RainbowKitProvider, darkTheme, lightTheme } from '@rainbow-me/rainbowkit';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WagmiProvider } from 'wagmi';
 import { createWagmiConfig } from '@/store/createWagmiConfig';
 import { ConnectRedirectProvider } from './components/providers/ConnectRedirectProvider';
@@ -10,30 +9,6 @@ import { CustomRpcProvider, useCustomRpcContext } from './components/providers/C
 
 type Props = { children: ReactNode };
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: (failureCount, error) => {
-        // Don't retry on GraphQL errors, network errors, or client errors
-        if (
-          error?.message?.includes('GraphQL') ||
-          error?.message?.includes('Network response was not ok')
-        ) {
-          return false;
-        }
-        // Retry up to 2 times for other errors
-        return failureCount < 2;
-      },
-      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
-      // Prevent queries from throwing and crashing the app
-      throwOnError: false,
-    },
-    mutations: {
-      // Prevent mutations from throwing and crashing the app
-      throwOnError: false,
-    },
-  },
-});
 
 const projectId = process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID ?? '';
 if (!projectId) {
@@ -45,7 +20,6 @@ if (!projectId) {
 
 const staticWagmiConfig = createWagmiConfig(projectId);
 
-// eslint-disable-next-line @typescript-eslint/promise-function-async
 function WagmiConfigProvider({ children }: Props) {
   const { customRpcUrls } = useCustomRpcContext();
   
@@ -56,28 +30,24 @@ function WagmiConfigProvider({ children }: Props) {
     : staticWagmiConfig;
 
   return (
-    <WagmiProvider config={wagmiConfig} reconnectOnMount={true}>
-        <QueryClientProvider client={queryClient}>
-        
-          <RainbowKitProvider
-            theme={{
-              lightMode: lightTheme({
-                accentColor: '#f45f2d',
-                borderRadius: 'small',
-              }),
-              darkMode: darkTheme({
-                accentColor: '#f45f2d',
-                borderRadius: 'small',
-              }),
-            }}
-            modalSize="compact"
-          >
-            <ConnectRedirectProvider>
-              {children}
-              </ConnectRedirectProvider>
-          </RainbowKitProvider>
-        
-        </QueryClientProvider>
+    <WagmiProvider config={wagmiConfig} reconnectOnMount>
+      <RainbowKitProvider
+        theme={{
+          lightMode: lightTheme({
+            accentColor: '#f45f2d',
+            borderRadius: 'small',
+          }),
+          darkMode: darkTheme({
+            accentColor: '#f45f2d',
+            borderRadius: 'small',
+          }),
+        }}
+        modalSize="compact"
+      >
+        <ConnectRedirectProvider>
+          {children}
+        </ConnectRedirectProvider>
+      </RainbowKitProvider>
     </WagmiProvider>
   );
 }
diff --git a/src/components/providers/ClientProviders.tsx b/src/components/providers/ClientProviders.tsx
index 32b2bd81..b909250d 100644
--- a/src/components/providers/ClientProviders.tsx
+++ b/src/components/providers/ClientProviders.tsx
@@ -1,23 +1,10 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { MarketsProvider } from '@/contexts/MarketsContext';
 import { OnboardingProvider } from 'app/positions/components/onboarding/OnboardingContext';
-import { ThemeProviders } from './ThemeProvider';
 import { TokenProvider } from './TokenProvider';
 
-// Create a client with default configuration
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 30000, // Default stale time of 30 seconds
-      retry: 2,
-      refetchOnWindowFocus: false,
-    },
-  },
-});
 
 type ClientProvidersProps = {
   children: ReactNode;
@@ -25,15 +12,10 @@ type ClientProvidersProps = {
 
 export function ClientProviders({ children }: ClientProvidersProps) {
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProviders>
-        <TokenProvider>
-          <MarketsProvider>
-            <OnboardingProvider>{children}</OnboardingProvider>
-          </MarketsProvider>
-        </TokenProvider>
-      </ThemeProviders>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
+    <TokenProvider>
+      <MarketsProvider>
+        <OnboardingProvider>{children}</OnboardingProvider>
+      </MarketsProvider>
+    </TokenProvider>
   );
 }
diff --git a/src/components/providers/QueryProvider.tsx b/src/components/providers/QueryProvider.tsx
new file mode 100644
index 00000000..6c789e64
--- /dev/null
+++ b/src/components/providers/QueryProvider.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+type QueryProviderProps = {
+  children: ReactNode;
+};
+
+// Create a single QueryClient with merged configuration from both previous clients
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // From ClientProviders - good for caching and UX
+      staleTime: 30000, // 30 seconds
+      refetchOnWindowFocus: false,
+      
+      retry: (failureCount, error) => {
+        // Don't retry on GraphQL errors, network errors, or client errors
+        if (
+          error?.message?.includes('GraphQL') ||
+          error?.message?.includes('Network response was not ok')
+        ) {
+          return false;
+        }
+        // Retry up to 2 times for other errors
+        return failureCount < 2;
+      },
+      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+      
+      throwOnError: false,
+    },
+    mutations: {
+      throwOnError: false,
+    },
+  },
+});
+
+export function QueryProvider({ children }: QueryProviderProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
\ No newline at end of file

From ee8c6ddfaec79cbc3c3dc6a4a8e4ae8e81d989be Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Wed, 3 Sep 2025 14:28:43 +0800
Subject: [PATCH 3/3] chore: spinner

---
 src/components/settings/CustomRpcSettings.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/CustomRpcSettings.tsx b/src/components/settings/CustomRpcSettings.tsx
index bb4d1849..c118d090 100644
--- a/src/components/settings/CustomRpcSettings.tsx
+++ b/src/components/settings/CustomRpcSettings.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import Image from 'next/image';
 import { Button } from '@/components/common/Button';
+import { Spinner } from '@/components/common/Spinner';
 import { useStyledToast } from '@/hooks/useStyledToast';
 import { SupportedNetworks, networks } from '@/utils/networks';
 import { useCustomRpcContext } from '../providers/CustomRpcProvider';
@@ -282,7 +283,7 @@ function RpcModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void })
                       placeholder="Enter custom RPC URL (leave empty to use default)"
                       value={inputValue}
                       onChange={(e) => handleInputChange(e.target.value)}
-                      className={`bg-hovered h-10 w-full rounded p-2 pr-16 focus:border-primary focus:outline-none ${
+                      className={`bg-hovered h-10 w-full rounded p-2 pr-16 focus:border-primary focus:outline-none text-sm truncate ${
                         error ? 'border border-red-500 focus:border-red-500' : ''
                       }`}
                     />
@@ -291,9 +292,13 @@ function RpcModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void })
                       size="sm"
                       onPress={() => void handleSave()}
                       isDisabled={isValidating}
-                      className="absolute right-1 top-1/2 -translate-y-1/2 transform"
+                      className="absolute right-1 top-1/2 -translate-y-1/2 transform min-w-[60px] flex items-center justify-center"
                     >
-                      {isValidating ? 'Validating...' : 'Save'}
+                      {isValidating ? (
+                        <Spinner size={14} width={2} color="text-white" />
+                      ) : (
+                        <span className="truncate">Save</span>
+                      )}
                     </Button>
                   </div>
                   {error && <p className="text-sm text-red-500">{error}</p>}