Dynamically populate the Environment dropdown

metaplex-foundation · Dec 22, 2024 · 59b6ef8 · 59b6ef8
1 parent 22d18c7
commit 59b6ef8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 29 deletions.
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -3,7 +3,7 @@ import { IconChevronDown } from '@tabler/icons-react';
 import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
 
 import classes from './Header.module.css';
-import { Env } from '@/providers/useEnv';
+import { Env, EnvOption } from '@/providers/useEnv';
 import RetainQueryLink from '../RetainQueryLink';
 
 const HeaderLink = ({ label, link, disabled }: { label: string, link: string, disabled?: boolean }) => {
@@ -15,7 +15,7 @@ const HeaderLink = ({ label, link, disabled }: { label: string, link: string, di
   );
 };
 
-export function Header({ env, setEnv }: { env: string; setEnv: (env: Env) => void }) {
+export function Header({ env, envOptions, setEnv }: { env: string; envOptions: EnvOption[], setEnv: (env: Env) => void }) {
   return (
     <Container
       size="xl"
@@ -46,12 +46,9 @@ export function Header({ env, setEnv }: { env: string; setEnv: (env: Env) => voi
               </a>
             </Menu.Target>
             <Menu.Dropdown>
-              <Menu.Item onClick={() => setEnv('mainnet')}>Solana Mainnet</Menu.Item>
-              <Menu.Item onClick={() => setEnv('devnet')}>Solana Devnet</Menu.Item>
-              <Menu.Item onClick={() => setEnv('eclipse-mainnet')}>Eclipse Mainnet</Menu.Item>
-              <Menu.Item onClick={() => setEnv('eclipse-devnet')}>Eclipse Devnet</Menu.Item>
-              <Menu.Item onClick={() => setEnv('sonic-devnet')}>Sonic Devnet</Menu.Item>
-              <Menu.Item onClick={() => setEnv('localhost')}>Localhost</Menu.Item>
+              {envOptions.map(({ env: e, label }) => (
+                <Menu.Item key={e} onClick={() => setEnv(e)}>{label}</Menu.Item>
+              ))}
             </Menu.Dropdown>
           </Menu>
         </Group>

diff --git a/providers/Providers.tsx b/providers/Providers.tsx
@@ -12,15 +12,15 @@ import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { Header } from '@/components/Header/Header';
 import { UmiProvider } from './UmiProvider';
 import { EnvProvider } from './EnvProvider';
-import { Env } from './useEnv';
+import { Env, envOptions } from './useEnv';
 
 export function Providers({ children }: { children: ReactNode }) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const queryEnv = searchParams.get('env');
   const [client] = useState(new QueryClient());
-  const [env, setEnv] = useState<Env>((queryEnv === 'mainnet' || queryEnv === 'devnet') ? queryEnv : 'mainnet');
+  const [env, setEnv] = useState<Env>((queryEnv === 'mainnet' || queryEnv === 'devnet') ? queryEnv : envOptions[0]?.env);
   const wallets = useMemo(
     () => [
       new PhantomWalletAdapter(),
@@ -43,23 +43,7 @@ export function Providers({ children }: { children: ReactNode }) {
   //   }
   // }, []);
 
-  const endpoint = useMemo(() => {
-    switch (env) {
-      case 'mainnet':
-        return process.env.NEXT_PUBLIC_MAINNET_RPC_URL;
-      case 'eclipse-mainnet':
-        return process.env.NEXT_PUBLIC_ECLIPSE_MAINNET_RPC_URL;
-      case 'sonic-devnet':
-        return process.env.NEXT_PUBLIC_SONIC_DEVNET_RPC_URL;
-      case 'eclipse-devnet':
-        return process.env.NEXT_PUBLIC_ECLIPSE_DEVNET_RPC_URL;
-      case 'localhost':
-        return 'http://localhost:8899';
-      case 'devnet':
-      default:
-        return process.env.NEXT_PUBLIC_DEVNET_RPC_URL;
-    }
-  }, [env]);
+  const endpoint = useMemo(() => envOptions.find(({ env: e }) => e === env)?.endpoint, [env]);
 
   return (
     <EnvProvider env={env!}>
@@ -77,7 +61,7 @@ export function Providers({ children }: { children: ReactNode }) {
                     }}
                   >
                     <AppShell.Header bg="black" withBorder={false}>
-                      <Header env={env} setEnv={doSetEnv} />
+                      <Header env={env} envOptions={envOptions} setEnv={doSetEnv} />
                     </AppShell.Header>
                     <AppShell.Main>
                       {children}

diff --git a/providers/useEnv.ts b/providers/useEnv.ts
@@ -1,6 +1,36 @@
 import { createContext, useContext } from 'react';
 
-export type Env = 'devnet' | 'testnet' | 'mainnet' | 'localhost' | 'eclipse-devnet' | 'eclipse-mainnet' | 'sonic-devnet';
+export type Env = 'devnet' | 'mainnet' | 'localhost' | 'eclipse-devnet' | 'eclipse-mainnet' | 'sonic-devnet';
+export type EnvOption = { env: Env, endpoint: string, label: string };
+
+const endpoints: Record<Env, string | undefined> = {
+  mainnet: process.env.NEXT_PUBLIC_MAINNET_RPC_URL,
+  devnet: process.env.NEXT_PUBLIC_DEVNET_RPC_URL,
+  'eclipse-mainnet': process.env.NEXT_PUBLIC_ECLIPSE_MAINNET_RPC_URL,
+  'eclipse-devnet': process.env.NEXT_PUBLIC_ECLIPSE_DEVNET_RPC_URL,
+  'sonic-devnet': process.env.NEXT_PUBLIC_SONIC_DEVNET_RPC_URL,
+  localhost: 'http://localhost:8899',
+};
+
+const labels: Record<Env, string> = {
+  mainnet: 'Solana Mainnet',
+  devnet: 'Solana Devnet',
+  'eclipse-mainnet': 'Eclipse Mainnet',
+  'eclipse-devnet': 'Eclipse Devnet',
+  'sonic-devnet': 'Sonic Devnet',
+  localhost: 'Localhost',
+};
+
+const envs: Env[] = Object
+  .entries(endpoints)
+  .map(([env, endpoint]) => endpoint ? env as Env : null)
+  .filter(Boolean) as Env[];
+
+export const envOptions: EnvOption[] = envs.map((env) => ({
+  env,
+  endpoint: endpoints[env] as string,
+  label: labels[env] as string,
+}));
 
 type EnvContext = {
   env: Env;