[xc-admin] add feature to send proposal to update permissions

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

@@ -0,0 +1,18 @@
+const EditButton = ({
+  editable,
+  onClick,
+}: {
+  editable?: boolean
+  onClick: React.MouseEventHandler<HTMLButtonElement>
+}) => {
+  return (
+    <button
+      className={`bg-darkGray2 py-3 px-6 text-sm font-semibold uppercase outline-none transition-colors`}
+      onClick={onClick}
+    >
+      <span>{editable ? 'done' : 'edit'}</span>
+    </button>
+  )
+}
+
+export default EditButton

governance/xc-admin/packages/xc-admin-frontend/components/common/Modal.tsx

@@ -0,0 +1,102 @@
+import { Dialog, Transition } from '@headlessui/react'
+import { Dispatch, Fragment, SetStateAction } from 'react'
+import CloseIcon from '../icons/CloseIcon'
+import Spinner from './Spinner'
+
+const Modal: React.FC<{
+  isModalOpen: boolean
+  setIsModalOpen: Dispatch<SetStateAction<boolean>>
+  closeModal: () => void
+  changes: any
+  handleSendProposalButtonClick: () => void
+  isSendProposalButtonLoading: boolean
+}> = ({
+  isModalOpen,
+  setIsModalOpen,
+  closeModal,
+  changes,
+  handleSendProposalButtonClick,
+  isSendProposalButtonLoading,
+}) => {
+  return (
+    <Transition appear show={isModalOpen} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={() => setIsModalOpen(false)}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-50" />
+        </Transition.Child>
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="diaglogPanel">
+                <button className="diaglogClose" onClick={closeModal}>
+                  <span className="mr-3">close</span> <CloseIcon />
+                </button>
+                <div className="max-w-full">
+                  <Dialog.Title as="h3" className="diaglogTitle">
+                    Proposed Changes
+                  </Dialog.Title>
+
+                  {!changes ? (
+                    <p className="mb-8 leading-6 ">No proposed changes.</p>
+                  ) : (
+                    Object.keys(changes).map((key) => {
+                      if (changes[key].prev !== changes[key].new) {
+                        return (
+                          <div
+                            key={key}
+                            className="flex items-center justify-between pb-4"
+                          >
+                            <span className="pr-4 text-left font-bold">
+                              {key}
+                            </span>
+                            <span className="mr-2">
+                              {changes[key].prev} &rarr; {changes[key].new}
+                            </span>
+                          </div>
+                        )
+                      }
+                    })
+                  )}
+
+                  <button
+                    className="action-btn text-base "
+                    onClick={handleSendProposalButtonClick}
+                    disabled={!changes}
+                  >
+                    {isSendProposalButtonLoading ? (
+                      <Spinner />
+                    ) : (
+                      'Send Proposal'
+                    )}
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  )
+}
+
+export default Modal

governance/xc-admin/packages/xc-admin-frontend/components/common/Spinner.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+const Spinner = () => {
+  return (
+    <svg
+      className="inline-block h-4  w-4 animate-spin "
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx={12}
+        cy={12}
+        r={10}
+        stroke="currentColor"
+        strokeWidth={3}
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  )
+}
+export default Spinner

governance/xc-admin/packages/xc-admin-frontend/components/icons/CloseIcon.tsx

@@ -0,0 +1,18 @@
+const CloseIcon = () => {
+  return (
+    <svg
+      width={13}
+      height={13}
+      viewBox="0 0 13 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.1934 0L6.5 5.69343L0.806569 0L0 0.806569L5.69343 6.5L0 12.1934L0.806569 13L6.5 7.30657L12.1934 13L13 12.1934L7.30657 6.5L13 0.806569L12.1934 0Z"
+        fill="#E6DAFE"
+      />
+    </svg>
+  )
+}
+
+export default CloseIcon

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

@@ -1,17 +1,23 @@
-import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
+import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useContext, useEffect, useState } from 'react'
 import { ClusterContext, DEFAULT_CLUSTER } from '../../contexts/ClusterContext'
 import Pyth from '../../images/logomark.inline.svg'
 import MobileMenu from './MobileMenu'
 
+const WalletMultiButtonDynamic = dynamic(
+  async () =>
+    (await import('@solana/wallet-adapter-react-ui')).WalletMultiButton,
+  { ssr: false }
+)
+
 export interface BurgerState {
   initial: boolean | null
   opened: boolean | null
 }
 
-function Header() {
+const Header = () => {
   const { cluster } = useContext(ClusterContext)
   const router = useRouter()
   const [isSticky, setIsSticky] = useState(false)
@@ -78,7 +84,7 @@ function Header() {
         >
           <Link href="/">
             <a
-              className={`flex min-h-[45px] basis-[160px] cursor-pointer items-center`}
+              className={`flex min-h-[45px] basis-[180px] cursor-pointer items-center`}
             >
               <Pyth />
             </a>
@@ -107,11 +113,17 @@ function Header() {
             </ul>
           </nav>
           <div className="flex items-center justify-end space-x-2">
-            {headerState.opened ? null : (
-              <WalletMultiButton className="primary-btn pt-0.5" />
-            )}
+            <div className="h-[45px] w-[180px]">
+              {headerState.opened ? null : (
+                <WalletMultiButtonDynamic className="primary-btn float-right pt-0.5" />
+              )}
+            </div>
             <div
-              className={`relative top-0 right-5 left-0 basis-7
+              className={`${
+                headerState.opened
+                  ? 'relative top-0 right-5 left-0 basis-7'
+                  : 'lg:hidden'
+              }
               `}
               onClick={handleToggleMenu}
             >

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

@@ -2,7 +2,7 @@ import React from 'react'
 import Footer from './Footer'
 import Header from './Header'
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="relative overflow-hidden">
       <Header />
@@ -11,3 +11,5 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     </div>
   )
 }
+
+export default Layout

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

@@ -62,7 +62,7 @@ const MinPublishers = () => {
                       )
                   ) : (
                     <tr className="border-t border-beige-300">
-                      <td className="py-3 pl-1 lg:pl-14" colSpan={2}>
+                      <td className="py-3 pl-4 lg:pl-14" colSpan={2}>
                         No mapping accounts found.
                       </td>
                     </tr>