Merge pull request #3497 from pyth-network/cprussin/remove-nuqs-from-proposals

fix(xc-admin-frontend): remove use of nuqs

Author: cprussin

flake.lock

@@ -47,6 +47,8 @@
         };
       in {
         devShells.default = pkgs.mkShell {
+          FORCE_COLOR = 1;
+          BIOME_BINARY = pkgs.lib.getExe pkgs.biome;
           buildInputs = [
             pkgs.cli
             pkgs.git
@@ -60,6 +62,7 @@
             pkgs.python3Packages.distutils
             pkgs.graphviz
             pkgs.anchor
+            pkgs.biome
           ];
         };
       }

flake.nix

@@ -3,14 +3,10 @@
 /* eslint-disable @typescript-eslint/no-deprecated */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 import { Menu, Transition } from '@headlessui/react'
-import {
-  useQueryState,
-  parseAsStringLiteral,
-} from '@pythnetwork/react-hooks/nuqs'
 import { useWallet } from '@solana/wallet-adapter-react'
 import type { TransactionAccount } from '@sqds/mesh/lib/types'
 import { useRouter } from 'next/router'
-import { useContext, useEffect, useState, useMemo, Fragment } from 'react'
+import { useContext, useEffect, useState, useMemo, Fragment, useCallback } from 'react'
 
 import { Proposal } from './Proposal'
 import { ProposalRow } from './ProposalRow'
@@ -20,6 +16,7 @@ import { useMultisigContext } from '../../../contexts/MultisigContext'
 import ClusterSwitch from '../../ClusterSwitch'
 import { Select } from '../../Select'
 import Loadbar from '../../loaders/Loadbar'
+import { usePathname, useSearchParams } from 'next/navigation'
 
 type ProposalType = 'priceFeed' | 'governance' | 'lazer'
 
@@ -65,15 +62,15 @@ const Proposals = () => {
   const router = useRouter()
   const [currentProposal, setCurrentProposal] = useState<TransactionAccount>()
   const [currentProposalPubkey, setCurrentProposalPubkey] = useState<string>()
-  const [statusFilter, setStatusFilter] = useQueryState(
+  const [statusFilter, setStatusFilter] = useSeacrhParamFromEnum(
     'status',
-    parseAsStringLiteral(PROPOSAL_STATUS_FILTERS).withDefault(
-      DEFAULT_PROPOSAL_STATUS_FILTER
-    )
+    PROPOSAL_STATUS_FILTERS,
+    DEFAULT_PROPOSAL_STATUS_FILTER
   )
-  const [voteStatus, setVoteStatus] = useQueryState(
+  const [voteStatus, setVoteStatus] = useSeacrhParamFromEnum(
     'voteStatus',
-    parseAsStringLiteral(VOTE_STATUSES).withDefault(DEFAULT_VOTE_STATUS)
+    VOTE_STATUSES,
+    DEFAULT_VOTE_STATUS
   )
   const { cluster } = useContext(ClusterContext)
   const { publicKey: walletPublicKey } = useWallet()
@@ -407,3 +404,29 @@ const Proposals = () => {
 }
 
 export default Proposals
+
+const useSeacrhParamFromEnum = <T extends string>(param: string, validValues: readonly T[], defaultValue: T) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const value = useMemo(
+    () => {
+      const current = searchParams.get(param);
+      return isInEnum(validValues, current) ? current : defaultValue;
+    },
+    [searchParams, param, validValues, defaultValue]
+  );
+  const updateValue = useCallback(
+    (newValue: T) => {
+      const newSearchParams = new URLSearchParams(searchParams.toString());
+      newSearchParams.set(param, newValue);
+      router.push(`${pathname}?${newSearchParams.toString()}`)
+    },
+    [searchParams, pathname, router, param]
+  );
+
+  return [value, updateValue] as const;
+}
+
+const isInEnum = <T,>(values: readonly T[], value: unknown): value is T =>
+  values.includes(value as T);

governance/xc_admin/packages/xc_admin_frontend/components/tabs/Proposals/Proposals.tsx

@@ -1,4 +1,3 @@
-import { NuqsAdapter } from '@pythnetwork/react-hooks/nuqs-adapters-next'
 import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
 import {
   ConnectionProvider,
@@ -85,37 +84,35 @@ function MyApp({ Component, pageProps }: AppProps) {
   )
 
   return (
-    <NuqsAdapter>
-      <ConnectionProvider
-        endpoint={endpoint || clusterApiUrl(WalletAdapterNetwork.Devnet)}
-      >
-        <WalletProvider wallets={wallets} autoConnect>
-          <WalletModalProvider>
-            <ClusterProvider>
-              <ProgramProvider>
-                <Head>
-                  <meta
-                    name="viewport"
-                    content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
-                  />
-                  {generateDefaultSeo(SEO)}
-                </Head>
-                <Component {...pageProps} />
-                <Toaster
-                  position="bottom-left"
-                  toastOptions={{
-                    style: {
-                      wordBreak: 'break-word',
-                    },
-                  }}
-                  reverseOrder={false}
+    <ConnectionProvider
+      endpoint={endpoint || clusterApiUrl(WalletAdapterNetwork.Devnet)}
+    >
+      <WalletProvider wallets={wallets} autoConnect>
+        <WalletModalProvider>
+          <ClusterProvider>
+            <ProgramProvider>
+              <Head>
+                <meta
+                  name="viewport"
+                  content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
                 />
-              </ProgramProvider>
-            </ClusterProvider>
-          </WalletModalProvider>
-        </WalletProvider>
-      </ConnectionProvider>
-    </NuqsAdapter>
+                {generateDefaultSeo(SEO)}
+              </Head>
+              <Component {...pageProps} />
+              <Toaster
+                position="bottom-left"
+                toastOptions={{
+                  style: {
+                    wordBreak: 'break-word',
+                  },
+                }}
+                reverseOrder={false}
+              />
+            </ProgramProvider>
+          </ClusterProvider>
+        </WalletModalProvider>
+      </WalletProvider>
+    </ConnectionProvider>
   )
 }