[xc-admin] permission accounts

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

@@ -1,15 +1,15 @@
-import { usePythContext } from '../contexts/PythContext'
-import ClusterSwitch from './ClusterSwitch'
-import Loadbar from './loaders/Loadbar'
+import { usePythContext } from '../../contexts/PythContext'
+import ClusterSwitch from '../ClusterSwitch'
+import Loadbar from '../loaders/Loadbar'
 
-function MinPublishers() {
+const 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 className="relative">
+      <div className="container flex flex-col items-center justify-between lg:flex-row">
+        <div className="mb-4 w-full text-left lg:mb-0">
+          <h1 className="h1 mb-4">Min Publishers</h1>
         </div>
       </div>
       <div className="container">

governance/xc-admin/packages/xc-admin-frontend/components/tabs/UpdatePermissions.tsx

@@ -0,0 +1,96 @@
+import { PublicKey } from '@solana/web3.js'
+import copy from 'copy-to-clipboard'
+import React from 'react'
+import { usePythContext } from '../../contexts/PythContext'
+import CopyIcon from '../../images/icons/copy.inline.svg'
+import ClusterSwitch from '../ClusterSwitch'
+import Loadbar from '../loaders/Loadbar'
+
+interface UpdatePermissionsProps {
+  account: string
+  pubkey?: PublicKey
+}
+
+const UpdatePermissionsRow: React.FunctionComponent<UpdatePermissionsProps> = ({
+  account,
+  pubkey = new PublicKey(0),
+}) => {
+  return (
+    <tr key={account} className="border-t border-beige-300">
+      <td className="py-3 pl-4 pr-2 lg:pl-14">{account}</td>
+      <td className="py-3 pl-1 lg:pl-14">
+        <div
+          className="-ml-1 inline-flex cursor-pointer items-center px-1 hover:bg-dark hover:text-white active:bg-darkGray3"
+          onClick={() => {
+            copy(pubkey.toBase58())
+          }}
+        >
+          <span className="mr-2 hidden lg:block">{pubkey.toBase58()}</span>
+          <span className="mr-2 lg:hidden">
+            {pubkey.toBase58().slice(0, 6) +
+              '...' +
+              pubkey.toBase58().slice(-6)}
+          </span>{' '}
+          <CopyIcon className="shrink-0" />
+        </div>
+      </td>
+    </tr>
+  )
+}
+
+const UpdatePermissions = () => {
+  const { rawConfig, dataIsLoading } = usePythContext()
+
+  return (
+    <div className="relative">
+      <div className="container flex flex-col items-center justify-between lg:flex-row">
+        <div className="mb-4 w-full text-left lg:mb-0">
+          <h1 className="h1 mb-4">Update Permissions</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">
+                      Account
+                    </th>
+                    <th className="base16 pt-8 pb-6 pl-1 pr-2 font-semibold opacity-60 lg:pl-14">
+                      Public Key
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <UpdatePermissionsRow
+                    account="Master Authority"
+                    pubkey={rawConfig.permissionAccount?.masterAuthority}
+                  />
+                  <UpdatePermissionsRow
+                    account="Data Curation Authority"
+                    pubkey={rawConfig.permissionAccount?.dataCurationAuthority}
+                  />
+                  <UpdatePermissionsRow
+                    account="Security Authority"
+                    pubkey={rawConfig.permissionAccount?.securityAuthority}
+                  />
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UpdatePermissions

governance/xc-admin/packages/xc-admin-frontend/package.json

@@ -19,6 +19,7 @@
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
+    "copy-to-clipboard": "^3.3.3",
     "gsap": "^3.11.4",
     "next": "12.2.5",
     "next-seo": "^5.15.0",

governance/xc-admin/packages/xc-admin-frontend/pages/_document.tsx

@@ -32,6 +32,7 @@ export default function Document() {
           sizes="16x16"
           href="/favicon-16x16.png"
         />
+        <link rel="manifest" href="/site.webmanifest" />
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#242235" />
         <meta name="msapplication-TileColor" content="#242235" />
         <meta name="theme-color" content="#242235"></meta>

governance/xc-admin/packages/xc-admin-frontend/pages/index.tsx

@@ -1,13 +1,97 @@
+import { Tab } from '@headlessui/react'
 import type { NextPage } from 'next'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
 import Layout from '../components/layout/Layout'
-import MinPublishers from '../components/MinPublishers'
+import MinPublishers from '../components/tabs/MinPublishers'
+import UpdatePermissions from '../components/tabs/UpdatePermissions'
 import { PythContextProvider } from '../contexts/PythContext'
+import { classNames } from '../utils/classNames'
+
+const TAB_INFO = {
+  MinPublishers: {
+    title: 'Min Publishers',
+    description:
+      'Set the minimum number of publishers required to publish a price.',
+    queryString: 'min-publishers',
+  },
+  UpdatePermissions: {
+    title: 'Update Permissions',
+    description: 'Update the permissions of the program.',
+    queryString: 'update-permissions',
+  },
+}
+
+const DEFAULT_TAB = 'min-publishers'
 
 const Home: NextPage = () => {
+  const [currentTabIndex, setCurrentTabIndex] = useState(0)
+  const tabInfoArray = Object.values(TAB_INFO)
+
+  const router = useRouter()
+
+  // set current tab value when tab is clicked
+  const handleChangeTab = (index: number) => {
+    router.query.tab = tabInfoArray[index].queryString
+    setCurrentTabIndex(index)
+    router.push(
+      {
+        pathname: router.pathname,
+        query: router.query,
+      },
+      undefined,
+      { scroll: false }
+    )
+  }
+
+  // set current tab value when page is loaded
+  useEffect(() => {
+    router.query && router.query.tab
+      ? setCurrentTabIndex(
+          tabInfoArray.findIndex((v) => v.queryString === router.query.tab)
+        )
+      : setCurrentTabIndex(
+          tabInfoArray.findIndex((v) => v.queryString === DEFAULT_TAB)
+        )
+  }, [router, tabInfoArray])
+
   return (
     <Layout>
       <PythContextProvider>
-        <MinPublishers />
+        <div className="relative pt-16 md:pt-20">
+          <div className="py-8 md:py-16">
+            <Tab.Group
+              selectedIndex={currentTabIndex}
+              onChange={handleChangeTab}
+            >
+              <Tab.List className="mx-auto max-w-[526px] gap-1 space-x-4 text-center sm:gap-2.5 md:space-x-8">
+                {Object.entries(TAB_INFO).map((tab, idx) => (
+                  <Tab
+                    key={idx}
+                    className={({ selected }) =>
+                      classNames(
+                        'p-3 text-xs font-semibold uppercase outline-none transition-colors md:text-base',
+                        currentTabIndex === idx
+                          ? 'bg-darkGray3'
+                          : 'bg-darkGray2',
+                        selected ? 'bg-darkGray3' : 'hover:bg-darkGray3'
+                      )
+                    }
+                  >
+                    {tab[1].title}
+                  </Tab>
+                ))}
+              </Tab.List>
+            </Tab.Group>
+          </div>
+        </div>
+        {tabInfoArray[currentTabIndex].queryString ===
+        TAB_INFO.MinPublishers.queryString ? (
+          <MinPublishers />
+        ) : tabInfoArray[currentTabIndex].queryString ===
+          TAB_INFO.UpdatePermissions.queryString ? (
+          <UpdatePermissions />
+        ) : null}
       </PythContextProvider>
     </Layout>
   )

governance/xc-admin/packages/xc-admin-frontend/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#242235</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

governance/xc-admin/packages/xc-admin-frontend/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#242235",
+  "background_color": "#242235",
+  "display": "standalone"
+}

governance/xc-admin/packages/xc-admin-frontend/utils/classNames.ts

@@ -0,0 +1,3 @@
+export const classNames = (...classes: any) => {
+  return classes.filter(Boolean).join(' ')
+}