Prevent query params from being lost on pot page

Author: carina-akaia

src/common/api/indexer/hooks.ts

@@ -182,7 +182,7 @@ export const useAccountDonationsSent = ({
  * https://test-dev.potlock.io/api/schema/swagger-ui/#/v1/v1_pots_retrieve_2
  */
 export const usePot = ({ potId, enabled = true }: ByPotId & ConditionalActivation) => {
-  const queryResult = generatedClient.useV1PotsRetrieve2(potId ?? "noop", {
+  const queryResult = generatedClient.useV1PotsRetrieve2(potId, {
     ...INDEXER_CLIENT_CONFIG,
     swr: { enabled, refreshInterval: 3000 },
   });

src/common/wallet/components.tsx

@@ -7,7 +7,7 @@ import { IS_CLIENT } from "@/common/constants";
 
 import { useWalletUserAdapter } from "./adapters";
 import { useWalletUserMetadataStore } from "./model";
-import { isAccountId, useRouteQuery } from "../lib";
+import { isAccountId } from "../lib";
 
 type WalletProviderProps = {
   children: React.ReactNode;
@@ -16,10 +16,6 @@ type WalletProviderProps = {
 const WalletProvider: React.FC<WalletProviderProps> = ({ children }) => {
   const router = useRouter();
 
-  const { query, setSearchParams } = useRouteQuery();
-
-  console.log(query);
-
   const trackedQueryParams = router.query as {
     /**
      * Backward compatibility for deprecated parameter name
@@ -86,8 +82,6 @@ const WalletProvider: React.FC<WalletProviderProps> = ({ children }) => {
     };
   }, [syncWalletState, isReady, handleChange]);
 
-  console.log(referrerAccountIdUrlParameter);
-
   /**
    * Updating referrer account id, if detected
    */
@@ -100,6 +94,7 @@ const WalletProvider: React.FC<WalletProviderProps> = ({ children }) => {
       referrerAccountIdUrlParameter !== accountId
     ) {
       setReferrerAccountId(referrerAccountIdUrlParameter);
+      // TODO: Cleanup the query parameter once it's recorded using useRouteQuery instead of useRouter
     }
   }, [
     accountId,

src/layout/pot/hooks/tab-navigation.ts

@@ -1,3 +1,5 @@
+// TODO: Storage optimizations required
+
 import { useCallback, useEffect } from "react";
 
 import { useRouter } from "next/router";
@@ -176,27 +178,40 @@ export const usePotLayoutTabNavigation = ({ potId }: ByPotId): PotLayoutTabNavig
 
   // Get active tab with proper type safety
   const activeTab =
-    Object.values(tabRegistry).find(
-      (tab): tab is PotLayoutTabOption => tab?.href === currentPath && !tab.isHidden,
-    ) ?? null;
+    Object.values(tabRegistry).find((tab): tab is PotLayoutTabOption => {
+      // Compare without query parameters
+      const currentPathBase = currentPath.split("?")[0];
+      return tab?.href === currentPathBase && !tab.isHidden;
+    }) ?? null;
 
   const navigateToTab = useCallback(
     (tag: PotLayoutTabTag) => {
       const targetTab = tabRegistry[tag];
+      const currentPathBase = currentPath.split("?")[0];
+
+      // Only navigate if tab exists, is not hidden, and we're not already on the correct tab
+      if (targetTab && !targetTab.isHidden && currentPathBase !== targetTab.href) {
+        // Extract query parameters from current URL
+        const queryParams = currentPath.includes("?")
+          ? currentPath.substring(currentPath.indexOf("?"))
+          : "";
+
+        // Append query parameters to the target href
+        const targetHref = targetTab.href + queryParams;
 
-      if (targetTab && !targetTab.isHidden) {
-        navigateToHref(targetTab.href);
+        navigateToHref(targetHref);
       }
     },
 
-    [navigateToHref, tabRegistry],
+    [navigateToHref, tabRegistry, currentPath],
   );
 
   // Handle navigation to default tab
   useEffect(() => {
     const rootPath = `${rootPathnames.pot}/${potId}`;
+    const currentPathBase = currentPath.split("?")[0];
 
-    if (potId !== undefined && (activeTab === null || currentPath === rootPath)) {
+    if (potId !== undefined && (activeTab === null || currentPathBase === rootPath)) {
       navigateToTab(defaultTabTag);
     }
   }, [activeTab, currentPath, defaultTabTag, navigateToTab, potId]);