Routing: use string id

components/DaoMenu.tsx

@@ -6,17 +6,17 @@ import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { useConfig } from '@/hooks/useConfig';
 
-type Option<T> = {
-  value: T;
+type Option = {
+  daoId: string;
   label: string;
   logo: string;
 };
 
-type Props<T> = {
-  options: Option<T>[];
+type Props = {
+  options: Option[];
 };
 
-const DaoMenu = <T,>(props: Props<T>) => {
+const DaoMenu = (props: Props) => {
   const config = useConfig();
   return (
     <Menu as="div" className="relative inline-block text-left">
@@ -45,15 +45,15 @@ 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 }) => {
                   return (
                     <Link
-                      href={`/${option.value}/bridge`}
+                      href={`/${option.daoId}/bridge`}
                       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

@@ -6,13 +6,11 @@ import { useConfig } from '@/hooks/useConfig';
 import { useDebugPanel } from '@/contexts/DebugPanel';
 import DaoMenu from '@/components/DaoMenu';
 import { DEFAULT_DAO_ID } from '@/util/constants';
+import { config } from '@/config';
 
-const options = [
-  { label: 'Example', value: 1, logo: '/pooltogetherLogo.svg' },
-  { label: 'ExampleComp', value: 2, logo: '/gitcoinLogo.svg' },
-  { label: 'PoolTogether', value: 3, logo: '/poolTogether.svg' },
-  { label: 'Gitcoin', value: 4, logo: '/gitcoinLogo.svg' },
-];
+const options = Object.entries(config).map(([daoId, configEntry]) => {
+  return { daoId, label: configEntry.name, logo: configEntry.daoLogo };
+});
 
 export const Header = () => {
   const { showDebug } = useConfig();
@@ -49,7 +47,7 @@ const NavButtons = () => {
     { name: 'Stats', href: `/${id}/stats` },
   ];
 
-  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,10 +3,10 @@ import { goerli, optimismGoerli } from 'wagmi/chains';
 export const chains = [goerli, optimismGoerli];
 
 export enum DaoId {
-  Example = 1,
-  ExampleComp = 2,
-  PoolTogether = 3,
-  Gitcoin = 4,
+  Example = 'example',
+  ExampleComp = 'example-comp',
+  PoolTogether = 'pool-together',
+  Gitcoin = 'gitcoin',
 }
 
 export const config = {

hooks/useConfig.ts

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

netlify.toml

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

next.config.js

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

util/constants.ts

@@ -1,2 +1,2 @@
 export const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
-export const DEFAULT_DAO_ID = 1;
+export const DEFAULT_DAO_ID = 'example';