🎨 modal: use cleaner url query

components/GetEXA/ModalWrapper.tsx

@@ -11,7 +11,7 @@ import { GetEXAProvider } from 'contexts/GetEXAContext';
 import { track } from 'utils/mixpanel';
 
 export default function ModalWrapper() {
-  const { isOpen, close } = useModal('get-exa');
+  const { isOpen, close } = useModal('exa');
   const { t } = useTranslation();
   if (!isOpen) return null;
   return (

components/VestingInput/index.tsx

@@ -160,7 +160,7 @@ function VestingInput({ refetch }: Props) {
   const { signTypedDataAsync } = useSignTypedData();
   const [isLoading, setIsLoading] = useState(false);
   const [tx, setTx] = useState<Transaction>();
-  const { open: openGetEXA } = useModal('get-exa');
+  const { open: openGetEXA } = useModal('exa');
 
   const [qty, setQty] = useState<string>('');
 

contexts/ModalContext.tsx

@@ -1,11 +1,13 @@
 import React, { createContext, useContext, useState, useMemo, useCallback, useEffect } from 'react';
 import type { FC, PropsWithChildren } from 'react';
 
+import qs from 'query-string';
+
 import type { Operation } from 'types/Operation';
 import type { Position } from 'components/DebtManager/types';
 import { useRouter } from 'next/router';
 
-const IDENTIFIERS = ['operation', 'rewards', 'rollover', 'leverager', 'proto-staker', 'faucet', 'get-exa'] as const;
+const IDENTIFIERS = ['operation', 'rewards', 'rollover', 'leverager', 'proto-staker', 'faucet', 'exa'] as const;
 type Identifier = (typeof IDENTIFIERS)[number];
 
 function isModalIdentifier(value: string): value is Identifier {
@@ -39,7 +41,7 @@ export const ModalContextProvider: FC<PropsWithChildren> = ({ children }) => {
       setCurrent(identifier);
       router.replace({
         pathname: router.pathname,
-        query: { ...router.query, [identifier]: null },
+        query: qs.stringify({ ...router.query, [identifier]: null }),
       });
     },
     [router],
@@ -51,7 +53,7 @@ export const ModalContextProvider: FC<PropsWithChildren> = ({ children }) => {
     if (!current) return;
     const { query } = router;
     const { [current]: _, ...rest } = query;
-    router.push({ pathname: router.pathname, query: rest }, undefined, { shallow: true });
+    router.push({ pathname: router.pathname, query: qs.stringify(rest) }, undefined, { shallow: true });
   }, [current, router]);
 
   useEffect(() => {

package.json

@@ -50,6 +50,7 @@
     "mixpanel-browser": "^2.49.0",
     "next": "^13.5.6",
     "plotly.js": "^2.30.1",
+    "query-string": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",

pages/governance.tsx

@@ -16,7 +16,7 @@ const Governance: NextPage = () => {
   const { t } = useTranslation();
   const { isConnected, walletAddress, impersonateActive } = useWeb3();
   const mTree = useMerkleTree(walletAddress);
-  const { open: openGetEXA } = useModal('get-exa');
+  const { open: openGetEXA } = useModal('exa');
 
   return (
     <Box display="flex" flexDirection="column" mx="auto" gap={5} my={5} maxWidth={480}>

pages/strategies.tsx

@@ -30,7 +30,7 @@ const Strategies: NextPage = () => {
   const { query } = useRouter();
   const { startLeverager } = useStartLeverager();
   const { startDebtManager } = useStartDebtManagerButton();
-  const { open: openGetEXA } = useModal('get-exa');
+  const { open: openGetEXA } = useModal('exa');
 
   const { chain } = useWeb3();
 

pages/vesting.tsx

@@ -183,7 +183,7 @@ const Vesting: NextPage = () => {
 
   const { rewards } = useRewards();
   const { open: openRewards } = useModal('rewards');
-  const { open: openGetEXA } = useModal('get-exa');
+  const { open: openGetEXA } = useModal('exa');
 
   const { usdPrice, unclaimedTokens } = {
     usdPrice: rewards['esEXA']?.usdPrice || 0n,