[xc-admin] improve xc-admin-frontend UI/UX (#673)

* add expired status

* add proposal status filter

* allow proposals to be proposed from ops key

* check if ops keypair file exists

* update mappings

* fix UpdatePermissions

* trigger deployment

* fix precommit

* address comments

* use SECRETS_BASE_PATH

* fix path

* fix

Author: cctdaniel

governance/xc_admin/packages/xc_admin_frontend/.gitignore

@@ -37,5 +37,5 @@ next-env.d.ts
 
 
 # mappings
-publishers.json
+publishers-*.json
 signers.json

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

@@ -0,0 +1,88 @@
+import { Menu, Transition } from '@headlessui/react'
+import { useRouter } from 'next/router'
+import { Fragment, useCallback, useContext, useEffect } from 'react'
+import {
+  DEFAULT_STATUS_FILTER,
+  StatusFilterContext,
+} from '../contexts/StatusFilterContext'
+import Arrow from '../images/icons/down.inline.svg'
+
+const ProposalStatusFilter = () => {
+  const router = useRouter()
+  const { statusFilter, setStatusFilter } = useContext(StatusFilterContext)
+
+  const handleChange = useCallback(
+    (event: any) => {
+      if (event.target.value) {
+        router.query.status = event.target.value
+        setStatusFilter(event.target.value)
+        router.push(
+          {
+            pathname: router.pathname,
+            query: router.query,
+          },
+          undefined,
+          { scroll: false }
+        )
+      }
+    },
+    [setStatusFilter, router]
+  )
+
+  useEffect(() => {
+    router.query && router.query.status
+      ? setStatusFilter(router.query.status as string)
+      : setStatusFilter(DEFAULT_STATUS_FILTER)
+  }, [setStatusFilter, router])
+
+  const statuses = [
+    'all',
+    'active',
+    'executed',
+    'executeReady',
+    'cancelled',
+    'rejected',
+    'draft',
+    'expired',
+  ]
+
+  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 bg-darkGray2 py-3 px-6 text-sm outline-0`}
+          >
+            <span className="mr-3">{statusFilter}</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">
+              {statuses.map((s) => (
+                <Menu.Item key={s}>
+                  <button
+                    className={`block w-full bg-darkGray py-3 px-6 text-left text-sm hover:bg-darkGray2`}
+                    value={s}
+                    onClick={handleChange}
+                  >
+                    {s}
+                  </button>
+                </Menu.Item>
+              ))}
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
+    </Menu>
+  )
+}
+
+export default ProposalStatusFilter

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

@@ -1,7 +1,7 @@
-import { AnchorProvider, Program, Wallet } from '@coral-xyz/anchor'
+import { AnchorProvider, Program } from '@coral-xyz/anchor'
 import { AccountType, getPythProgramKeyForCluster } from '@pythnetwork/client'
 import { PythOracle, pythOracleProgram } from '@pythnetwork/client/lib/anchor'
-import { useAnchorWallet, useWallet } from '@solana/wallet-adapter-react'
+import { useWallet } from '@solana/wallet-adapter-react'
 import { WalletModalButton } from '@solana/wallet-adapter-react-ui'
 import { Cluster, PublicKey, TransactionInstruction } from '@solana/web3.js'
 import { useCallback, useContext, useEffect, useState } from 'react'
@@ -15,8 +15,9 @@ import {
   WORMHOLE_ADDRESS,
 } from 'xc_admin_common'
 import { ClusterContext } from '../../contexts/ClusterContext'
+import { useMultisigContext } from '../../contexts/MultisigContext'
 import { usePythContext } from '../../contexts/PythContext'
-import { PRICE_FEED_MULTISIG, useMultisig } from '../../hooks/useMultisig'
+import { PRICE_FEED_MULTISIG } from '../../hooks/useMultisig'
 import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter'
 import ClusterSwitch from '../ClusterSwitch'
 import Modal from '../common/Modal'
@@ -35,11 +36,7 @@ const General = () => {
   const isRemote: boolean = isRemoteCluster(cluster) // Move to multisig context
   const multisigCluster: Cluster | 'localnet' = getMultisigCluster(cluster) // Move to multisig context
   const wormholeAddress = WORMHOLE_ADDRESS[multisigCluster] // Move to multisig context
-
-  const anchorWallet = useAnchorWallet()
-  const { isLoading: isMultisigLoading, squads } = useMultisig(
-    anchorWallet as Wallet
-  )
+  const { isLoading: isMultisigLoading, proposeSquads } = useMultisigContext()
   const { rawConfig, dataIsLoading, connection } = usePythContext()
   const { connected } = useWallet()
   const [pythProgramClient, setPythProgramClient] =
@@ -268,10 +265,15 @@ const General = () => {
   }
 
   const handleSendProposalButtonClick = async () => {
-    if (pythProgramClient && dataChanges && !isMultisigLoading && squads) {
+    if (
+      pythProgramClient &&
+      dataChanges &&
+      !isMultisigLoading &&
+      proposeSquads
+    ) {
       const instructions: TransactionInstruction[] = []
       for (const symbol of Object.keys(dataChanges)) {
-        const multisigAuthority = squads.getAuthorityPDA(
+        const multisigAuthority = proposeSquads.getAuthorityPDA(
           PRICE_FEED_MULTISIG[getMultisigCluster(cluster)],
           1
         )
@@ -447,7 +449,7 @@ const General = () => {
       setIsSendProposalButtonLoading(true)
       try {
         const proposalPubkey = await proposeInstructions(
-          squads,
+          proposeSquads,
           PRICE_FEED_MULTISIG[getMultisigCluster(cluster)],
           instructions,
           isRemote,
@@ -714,17 +716,17 @@ const General = () => {
 
   // create anchor wallet when connected
   useEffect(() => {
-    if (connected) {
+    if (connected && proposeSquads) {
       const provider = new AnchorProvider(
         connection,
-        anchorWallet as Wallet,
+        proposeSquads.wallet,
         AnchorProvider.defaultOptions()
       )
       setPythProgramClient(
         pythOracleProgram(getPythProgramKeyForCluster(cluster), provider)
       )
     }
-  }, [anchorWallet, connection, connected, cluster])
+  }, [connection, connected, cluster, proposeSquads])
 
   return (
     <div className="relative">
@@ -749,12 +751,12 @@ const General = () => {
           <PermissionDepermissionKey
             isPermission={true}
             pythProgramClient={pythProgramClient}
-            squads={squads}
+            squads={proposeSquads}
           />
           <PermissionDepermissionKey
             isPermission={false}
             pythProgramClient={pythProgramClient}
-            squads={squads}
+            squads={proposeSquads}
           />
         </div>
         <div className="relative mt-6">