xc admin/add min pub page

governance/xc-admin/packages/xc-admin-frontend/components/ClusterSwitch.tsx

@@ -0,0 +1,104 @@
+import { Menu, Transition } from '@headlessui/react'
+import { useRouter } from 'next/router'
+import { Fragment, useCallback, useContext, useEffect } from 'react'
+import { ClusterContext, DEFAULT_CLUSTER } from '../contexts/ClusterContext'
+import Arrow from '../images/icons/down.inline.svg'
+
+const ClusterSwitch = ({ light }: { light?: boolean | null }) => {
+  const router = useRouter()
+
+  const { cluster, setCluster } = useContext(ClusterContext)
+  const handleChange = useCallback(
+    (event: any) => {
+      if (event.target.value) {
+        router.query.cluster = event.target.value
+        setCluster(event.target.value)
+        router.push(
+          {
+            pathname: router.pathname,
+            query: router.query,
+          },
+          undefined,
+          { scroll: false }
+        )
+      }
+    },
+    [setCluster, router]
+  )
+
+  useEffect(() => {
+    router.query && router.query.cluster
+      ? setCluster(router.query.cluster)
+      : setCluster(DEFAULT_CLUSTER)
+  }, [setCluster, router])
+
+  const clusters = [
+    {
+      value: 'pythnet',
+      name: 'pythnet',
+    },
+    {
+      value: 'mainnet-beta',
+      name: 'mainnet-beta',
+    },
+    {
+      value: 'testnet',
+      name: 'testnet',
+    },
+    {
+      value: 'devnet',
+      name: 'devnet',
+    },
+    // hide pythtest as its broken
+    // {
+    //   value: 'pythtest',
+    //   name: 'pythtest',
+    // },
+  ]
+
+  return (
+    <Menu as="div" className="relative z-[2] 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">{cluster}</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">
+              {clusters.map((c) => (
+                <Menu.Item key={c.name}>
+                  <button
+                    className={`block w-full py-3 px-6 text-left text-sm ${
+                      light
+                        ? 'bg-beige2 hover:bg-beige3'
+                        : 'bg-darkGray hover:bg-darkGray2'
+                    } `}
+                    value={c.value}
+                    onClick={handleChange}
+                  >
+                    {c.name}
+                  </button>
+                </Menu.Item>
+              ))}
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
+    </Menu>
+  )
+}
+
+export default ClusterSwitch

governance/xc-admin/packages/xc-admin-frontend/components/MinPublishers.tsx

@@ -0,0 +1,75 @@
+import { usePythContext } from '../contexts/PythContext'
+import ClusterSwitch from './ClusterSwitch'
+import Loadbar from './loaders/Loadbar'
+
+function MinPublishers() {
+  const { rawConfig, dataIsLoading } = usePythContext()
+
+  return (
+    <div className="pt-15 relative lg:pt-20">
+      <div className="container flex flex-col items-center justify-between pt-32 lg:flex-row ">
+        <div className="mb-10 w-full text-left lg:mb-0">
+          <h1 className="h1 mb-3">Min Publishers</h1>
+        </div>
+      </div>
+      <div className="container">
+        <div className="mb-4 md:mb-0">
+          <ClusterSwitch />
+        </div>
+        <div className="table-responsive relative mt-6">
+          {dataIsLoading ? (
+            <div className="mt-3">
+              <Loadbar theme="light" />
+            </div>
+          ) : (
+            <div className="table-responsive mb-10">
+              <table className="w-full bg-darkGray text-left">
+                <thead>
+                  <tr>
+                    <th className="base16 pt-8 pb-6 pl-4 pr-2 font-semibold opacity-60 lg:pl-14">
+                      Symbol
+                    </th>
+                    <th className="base16 pt-8 pb-6 pl-1 pr-2 font-semibold opacity-60 lg:pl-14">
+                      Minimum Publishers
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rawConfig.mappingAccounts.length ? (
+                    rawConfig.mappingAccounts[0].products.map((product) =>
+                      product.priceAccounts.map((priceAccount) => {
+                        return (
+                          <tr
+                            key={product.metadata.symbol}
+                            className="border-t border-beige-300"
+                          >
+                            <td className="py-3 pl-4 pr-2 lg:pl-14">
+                              {product.metadata.symbol}
+                            </td>
+                            <td className="py-3 pl-1 lg:pl-14">
+                              <span className="mr-2">
+                                {priceAccount.minPub}
+                              </span>
+                            </td>
+                          </tr>
+                        )
+                      })
+                    )
+                  ) : (
+                    <tr className="border-t border-beige-300">
+                      <td className="py-3 pl-1 lg:pl-14" colSpan={2}>
+                        No mapping accounts found.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MinPublishers

governance/xc-admin/packages/xc-admin-frontend/components/layout/Header.tsx

@@ -1,3 +1,4 @@
+import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useContext, useEffect, useState } from 'react'
@@ -66,50 +67,37 @@ function Header() {
     <>
       <header
         className={`left-0 top-0 z-40 w-full px-1 transition-all lg:px-10
-        ${isSticky || headerState.opened ? 'fixed ' : 'absolute'}
+        ${isSticky || headerState.opened ? 'fixed' : 'absolute'}
         ${isSticky && !headerState.opened ? 'bg-darkGray shadow-black' : ''}
         `}
       >
         <div
           className={`relative flex items-center justify-between ${
             isSticky ? 'lg:py-4' : 'before:gradient-border md:py-6'
-          }
-					 ${
-             !headerState.opened
-               ? 'px-4 py-3 lg:px-10 lg:py-6'
-               : 'sm:px-4  sm:py-3  sm:lg:px-10  sm:lg:py-6'
-           }
-					`}
+          } px-4 py-3 lg:px-10 lg:py-6`}
         >
           <Link href="/">
             <a
-              className={`basis-7 ${
-                headerState.opened &&
-                'fixed left-5 top-3 sm:relative sm:left-0 sm:top-0'
-              }`}
+              className={`flex min-h-[45px] basis-[160px] cursor-pointer items-center`}
             >
               <Pyth />
             </a>
           </Link>
           <nav>
             <ul
-              className={`hidden list-none lg:flex ${
-                headerState.opened && 'hidden'
+              className={`list-none space-x-10 ${
+                headerState.opened ? 'hidden' : 'hidden lg:flex'
               }`}
             >
               {navigation.map((item) => (
                 <li key={item.name}>
                   <Link href={item.href}>
                     <a
-                      className={`px-6 text-sm leading-none tracking-wide transition-colors hover:text-white lg:px-6 xl:px-8 ${
-                        router.pathname === item.href
-                          ? 'text-white'
-                          : 'text-light'
-                      }`}
-                      aria-current={
-                        router.pathname === item.href ? 'page' : undefined
+                      className={
+                        router.pathname == item.href
+                          ? 'nav-link font-bold'
+                          : 'nav-link'
                       }
-                      target={item.target}
                     >
                       {item.name}
                     </a>
@@ -118,34 +106,41 @@ function Header() {
               ))}
             </ul>
           </nav>
-          <div
-            className={`basis-7 ${
-              headerState.opened &&
-              'fixed right-5 top-[20px] sm:relative sm:left-0 sm:top-0'
-            }`}
-            onClick={handleToggleMenu}
-          >
-            <button className="group ml-auto block lg:hidden">
-              <span
-                className={`ml-auto block h-0.5 w-3.5  rounded-sm bg-light transition-all lg:group-hover:w-5 ${
-                  headerState.opened
-                    ? 'mb-0 w-5 translate-y-1 rotate-45'
-                    : 'mb-1'
-                }`}
-              ></span>
-              <span
-                className={`mb-1 block h-0.5 w-5 rounded-sm bg-light transition-all ${
-                  headerState.opened && 'opacity-0'
-                }`}
-              ></span>
-              <span
-                className={`ml-auto block h-0.5 w-3.5 rounded-sm bg-light transition-all lg:group-hover:w-5 ${
-                  headerState.opened
-                    ? 'mb-0 w-5 -translate-y-1 -rotate-45'
-                    : 'mb-1'
+          <div className="flex items-center justify-end space-x-2">
+            {headerState.opened ? null : (
+              <WalletMultiButton className="primary-btn pt-0.5" />
+            )}
+            <div
+              className={`relative top-0 right-5 left-0 basis-7
+              `}
+              onClick={handleToggleMenu}
+            >
+              <button
+                className={`group ml-auto align-middle ${
+                  headerState.opened ? 'block' : 'lg:hidden'
                 }`}
-              ></span>
-            </button>
+              >
+                <span
+                  className={`ml-auto block h-0.5 w-3.5 rounded-sm bg-light transition-all lg:group-hover:w-5 ${
+                    headerState.opened
+                      ? 'mb-0 w-5 translate-y-1 rotate-45'
+                      : 'mb-1'
+                  }`}
+                ></span>
+                <span
+                  className={`mb-1 block h-0.5 w-5 rounded-sm bg-light transition-all ${
+                    headerState.opened && 'opacity-0'
+                  }`}
+                ></span>
+                <span
+                  className={`ml-auto block h-0.5 w-3.5 rounded-sm bg-light transition-all lg:group-hover:w-5 ${
+                    headerState.opened
+                      ? 'mb-0 w-5 -translate-y-1 -rotate-45'
+                      : 'mb-1'
+                  }`}
+                ></span>
+              </button>
+            </div>
           </div>
         </div>
       </header>

governance/xc-admin/packages/xc-admin-frontend/components/loaders/Loadbar.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+interface LoadbarProps {
+  theme?: string
+  width?: string | null
+}
+
+const Loadbar: React.FC<LoadbarProps> = ({ theme, width }) => {
+  let color = 'bg-dark-300'
+  if (theme == 'light') {
+    color = 'bg-beige-300'
+  }
+  return (
+    <div className=" animate-pulse">
+      {width ? (
+        <div className="w-full">
+          <div className={`h-3 ${color} w-${width} mb-2.5`}></div>
+        </div>
+      ) : (
+        <div className="w-full">
+          <div className={`h-3 ${color} mb-2.5 w-48`}></div>
+          <div className={`h-3 ${color} mb-2.5 max-w-[480px]`}></div>
+          <div className={`h-3 ${color} mb-2.5`}></div>
+          <div className={`h-3 ${color} mb-2.5 max-w-[840px]`}></div>
+          <div className={`h-3 ${color} mb-2.5 max-w-[760px]`}></div>
+          <div className={`h-3 ${color} max-w-[560px]`}></div>
+        </div>
+      )}
+
+      <span className="sr-only">Loading...</span>
+    </div>
+  )
+}
+
+export default Loadbar

governance/xc-admin/packages/xc-admin-frontend/contexts/ClusterContext.tsx

@@ -8,7 +8,7 @@ export const ClusterContext = createContext<{
   setCluster: any
 }>({
   cluster: DEFAULT_CLUSTER,
-  setCluster: (cluster: PythCluster) => {},
+  setCluster: {},
 })
 
 export const ClusterProvider = (props: any) => {