Routing: use string id

components/DaoMenu.tsx

@@ -5,22 +5,23 @@ import clsx from 'clsx';
 import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { useConfig } from '@/hooks/useConfig';
-import { usePathname } from 'next/navigation'
+import { usePathname } from 'next/navigation';
+import { DaoId } from '@/config';
 
-type Option<T> = {
-  value: T;
+type Option = {
+  daoId: DaoId;
   label: string;
   logo: string;
 };
 
-type Props<T> = {
-  options: Option<T>[];
-  className?: string;
+type Props = {
+  options: Option[];
+  className: string;
 };
 
-const DaoMenu = <T,>(props: Props<T>) => {
+const DaoMenu = (props: Props) => {
   const config = useConfig();
-  const pathName= usePathname();
+  const pathName = usePathname();
 
   return (
     <Menu as="div" className={`relative inline-block text-left ${props.className}`}>
@@ -49,15 +50,16 @@ const DaoMenu = <T,>(props: Props<T>) => {
       >
         <Menu.Items className="absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
           <div className="py-1">
-            {props.options.map((option, key) => (
-              <Menu.Item key={key}>
+            {props.options.map((option, index) => (
+              <Menu.Item key={index}>
                 {({ active }) => {
+                  const currentPage = pathName.split('/').slice(-1);
                   return (
                     <Link
-                      href={`/${option.value}/${pathName.split("/").slice(-1)}`}
+                      href={`/${option.daoId}/${currentPage}`}
                       className={clsx(
                         active ? ' flex bg-gray-100 text-gray-900' : 'text-gray-700',
-                        'flex block px-4 py-2 text-sm'
+                        'flex px-4 py-2 text-sm'
                       )}
                     >
                       <Image

components/Header.tsx

@@ -4,12 +4,11 @@ import { useRouter } from 'next/router';
 
 import DaoMenu from '@/components/DaoMenu';
 import { classNames } from '@/util';
-import { DEFAULT_DAO_ID } from '@/util/constants';
+import { config } from '@/config';
 
-const options = [
-  { label: 'PoolTogether', value: 1, logo: '/poolTogether.svg' },
-  { label: 'Gitcoin', value: 2, logo: '/gitcoinLogo.svg' },
-];
+const options = Object.values(config).map((configEntry) => {
+  return { daoId: configEntry.id, label: configEntry.name, logo: configEntry.daoLogo };
+});
 
 export const Header = () => {
   return (
@@ -25,14 +24,14 @@ export const Header = () => {
 
 const NavButtons = () => {
   const { pathname, query } = useRouter();
-  const id = query?.id || DEFAULT_DAO_ID;
+  const id = query?.id || options[0].daoId;
   const tabs = [
     { name: 'Bridge', href: `/${id}/bridge` },
     { name: 'Delegate', href: `/${id}/delegate` },
     { name: 'Vote', href: `/${id}/vote` },
   ];
 
-  const current = tabs.find((tab) => tab.href === pathname);
+  const current = tabs.find((tab) => pathname.includes(tab.href.split('/').at(-1) as string));
 
   return (
     <div>

config.ts

@@ -3,8 +3,8 @@ import { goerli, optimismGoerli } from 'wagmi/chains';
 export const chains = [goerli, optimismGoerli];
 
 export enum DaoId {
-  PoolTogether = 1,
-  Gitcoin = 2,
+  PoolTogether = 'pool-together',
+  Gitcoin = 'gitcoin',
 }
 
 export const config = {

hooks/useConfig.ts

@@ -6,10 +6,8 @@ export const useConfig = () => {
   if (Array.isArray(query.id)) {
     throw new Error('Too many ids have been specified');
   }
-  if (Number(query?.id) === DaoId.PoolTogether) {
+  if (!query.id || !(query.id in config)) {
     return config[DaoId.PoolTogether];
-  } else if (Number(query?.id) === DaoId.Gitcoin) {
-    return config[DaoId.Gitcoin];
   }
-  return config[DaoId.PoolTogether];
+  return config[query.id as DaoId];
 };

netlify.toml

@@ -1,4 +1,4 @@
 [[redirects]]
   from = "/"
-  to = "/1/bridge"
+  to = "/pool-together/bridge"
   status = 302

next.config.js

@@ -9,7 +9,7 @@ const nextConfig = {
     return [
       {
         source: '/',
-        destination: '/1/bridge',
+        destination: '/pool-together/bridge',
         permanent: false,
       },
     ];

util/constants.ts

@@ -1,3 +1,2 @@
 export const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
-export const DEFAULT_DAO_ID = 1;
 export const WORMHOLE_NETWORK_TYPE = process.env.WORMHOLE_NETORK_TYPE || 'TESTNET';