Create navigation helper library

src/common/lib/index.ts

@@ -2,3 +2,4 @@ export { default as truncate } from "./truncate";
 export { default as formatWithCommas } from "./formatWithCommas";
 export * from "./yoctosToUsdWithFallback";
 export * from "./converters";
+export * from "./navigation";

src/common/lib/navigation.ts

@@ -0,0 +1,39 @@
+import { useCallback, useMemo } from "react";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+/**
+ * Provides a method to update the search parameters for the current URL,
+ *  without changing the route path itself.
+ *
+ * @example
+ * const { syncRouteParams } = useSearchParamsNavigation();
+ *
+ * syncRouteParams({ accountId: "root.near" });
+ */
+export const useSearchParamsNavigation = (): {
+  syncRouteParams: (newParams: Record<string, string>) => void;
+} => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const currentQueryString = useSearchParams().toString();
+
+  const searchParamsDecoded = useMemo(
+    () => new URLSearchParams(currentQueryString),
+    [currentQueryString],
+  );
+
+  const syncRouteParams = useCallback(
+    (newParams: Record<string, string>) => {
+      Object.entries(newParams).forEach(([key, value]) =>
+        searchParamsDecoded.set(key, value),
+      );
+
+      router.push(`${pathname}?${searchParamsDecoded.toString()}`);
+    },
+
+    [pathname, router, searchParamsDecoded],
+  );
+
+  return { syncRouteParams };
+};