feat(programs): add ProgramSwitch component for selecting Pyth programs

Author: cctdaniel

governance/xc_admin/packages/xc_admin_frontend/components/ProgramSwitch.tsx

@@ -0,0 +1,97 @@
+import { ProgramType } from '@pythnetwork/xc-admin-common'
+import { useProgramContext } from '../contexts/ProgramContext'
+import { Menu, Transition } from '@headlessui/react'
+import { Fragment } from 'react'
+
+const Arrow = ({ className }: { className?: string }) => (
+  <svg
+    className={className}
+    width="10"
+    height="6"
+    viewBox="0 0 10 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 1L5 5L9 1"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+/**
+ * Component that allows users to switch between different Pyth programs
+ * (Core, Lazer, etc.)
+ */
+const ProgramSwitch = ({ light = false }: { light?: boolean }) => {
+  const { programType, setProgramType } = useProgramContext()
+
+  // Convert enum to array of options
+  const programOptions = Object.values(ProgramType).map((value) => ({
+    value,
+    // Format display name (e.g., "PYTH_CORE" -> "Pyth Core")
+    label: value
+      .split('_')
+      .map((word) => word.charAt(0) + word.slice(1).toLowerCase())
+      .join(' '),
+  }))
+
+  return (
+    <Menu as="div" className="relative z-[3] block w-[180px] text-left">
+      {({ open }) => (
+        <>
+          <Menu.Button
+            className={`inline-flex w-full items-center justify-between py-3 px-6 text-sm outline-0 ${
+              light ? 'bg-beige2' : 'bg-darkGray2'
+            }`}
+          >
+            <span className="mr-3">
+              {programOptions.find((option) => option.value === programType)
+                ?.label || programType}
+            </span>
+            <Arrow className={`${open ? 'rotate-180' : ''}`} />
+          </Menu.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute right-0 mt-2 w-full origin-top-right">
+              {programOptions.map((option) => (
+                <Menu.Item key={option.value}>
+                  {({ active }) => (
+                    <button
+                      className={`block w-full py-3 px-6 text-left text-sm ${
+                        light
+                          ? active
+                            ? 'bg-beige3'
+                            : 'bg-beige2'
+                          : active
+                            ? 'bg-darkGray2'
+                            : 'bg-darkGray'
+                      }`}
+                      onClick={() =>
+                        setProgramType(option.value as ProgramType)
+                      }
+                    >
+                      {option.label}
+                    </button>
+                  )}
+                </Menu.Item>
+              ))}
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
+    </Menu>
+  )
+}
+
+export default ProgramSwitch

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

@@ -29,6 +29,7 @@ import { useMultisigContext } from '../../contexts/MultisigContext'
 import { usePythContext } from '../../contexts/PythContext'
 import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter'
 import ClusterSwitch from '../ClusterSwitch'
+import ProgramSwitch from '../ProgramSwitch'
 import Modal from '../common/Modal'
 import Spinner from '../common/Spinner'
 import Loadbar from '../loaders/Loadbar'
@@ -960,7 +961,10 @@ const General = ({ proposerServerUrl }: { proposerServerUrl: string }) => {
       <div className="container min-h-[50vh]">
         <div className="flex justify-between">
           <div className="mb-4 md:mb-0">
-            <ClusterSwitch />
+            <div className="flex space-x-4 items-center">
+              <ProgramSwitch />
+              <ClusterSwitch />
+            </div>
           </div>
         </div>
         <div className="relative mt-6 flex space-x-4">

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

@@ -5,6 +5,7 @@ import { ClusterContext } from '../../../contexts/ClusterContext'
 import { useMultisigContext } from '../../../contexts/MultisigContext'
 import { PROPOSAL_STATUSES } from './utils'
 import ClusterSwitch from '../../ClusterSwitch'
+import ProgramSwitch from '../../ProgramSwitch'
 import Loadbar from '../../loaders/Loadbar'
 import { Select } from '../../Select'
 import { useQueryState, parseAsStringLiteral } from 'nuqs'
@@ -195,7 +196,10 @@ const Proposals = () => {
           <>
             <div className="flex flex-col justify-between md:flex-row">
               <div className="mb-4 flex items-center md:mb-0">
-                <ClusterSwitch />
+                <div className="flex space-x-4 items-center">
+                  <ProgramSwitch />
+                  <ClusterSwitch />
+                </div>
               </div>
               <div className="flex space-x-2">
                 {refreshData && (