feat(xc-admin-frontend): instructions summary in proposal page + improve ui in proposal row + refactor the code (#1478)

* refactor: move proposals to a folder

* refactor: use @images instead of relative paths

* refactor: split proposals into multiple files

* refactor: add type for proposal status

* refactor: add eslint and fix errors

* refactor: fix eslint errors

* refactor: fix eslint

* refactor: fix prettier

* refactor: remove any

* refactor: Proposals.tsx

* feat: add basic instructions summary

* feat: add unknown instruction

* fix: revert package-lock.json

* fix: update package-lock.json

* fix: pre-commit

* fix: ts error

* fix: remove message buffer dependency

* fix: revert back the cluster default

* feat: add support for different types of instructions

* feat: add transaction index to proposal row

* feat: improve the proposal row ui

* fix: display bigint properly (#1499)

---------

Co-authored-by: guibescos <[email protected]>

Author: keyvankhademi

governance/xc_admin/packages/xc_admin_frontend/.eslintignore

@@ -1 +1,3 @@
 node_modules
+tailwind.config.js
+next.config.js

governance/xc_admin/packages/xc_admin_frontend/.eslintrc.json

@@ -1,3 +1,14 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ]
+  }
 }

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

@@ -2,7 +2,8 @@ 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'
+import Arrow from '@images/icons/down.inline.svg'
+import { PythCluster } from '@pythnetwork/client'
 
 const ClusterSwitch = ({ light }: { light?: boolean | null }) => {
   const router = useRouter()
@@ -27,8 +28,8 @@ const ClusterSwitch = ({ light }: { light?: boolean | null }) => {
   )
 
   useEffect(() => {
-    router.query && router.query.cluster
-      ? setCluster(router.query.cluster)
+    router?.query?.cluster
+      ? setCluster(router.query.cluster as PythCluster)
       : setCluster(DEFAULT_CLUSTER)
   }, [setCluster, router])
 

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

@@ -4,7 +4,7 @@ import { PythOracle } from '@pythnetwork/client/lib/anchor'
 import * as Label from '@radix-ui/react-label'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { WalletModalButton } from '@solana/wallet-adapter-react-ui'
-import { Cluster, PublicKey, TransactionInstruction } from '@solana/web3.js'
+import { PublicKey, TransactionInstruction } from '@solana/web3.js'
 import SquadsMesh from '@sqds/mesh'
 import axios from 'axios'
 import { Fragment, useContext, useEffect, useState } from 'react'
@@ -15,12 +15,11 @@ import {
   isRemoteCluster,
   mapKey,
   PRICE_FEED_MULTISIG,
-  WORMHOLE_ADDRESS,
 } from 'xc_admin_common'
 import { ClusterContext } from '../contexts/ClusterContext'
 import { usePythContext } from '../contexts/PythContext'
 import { ProductRawConfig } from '../hooks/usePyth'
-import Arrow from '../images/icons/down.inline.svg'
+import Arrow from '@images/icons/down.inline.svg'
 import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter'
 import Spinner from './common/Spinner'
 import CloseIcon from './icons/CloseIcon'
@@ -83,8 +82,6 @@ const PermissionDepermissionKey = ({
         1
       )
       const isRemote: boolean = isRemoteCluster(cluster)
-      const multisigCluster: Cluster | 'localnet' = getMultisigCluster(cluster)
-      const wormholeAddress = WORMHOLE_ADDRESS[multisigCluster]
       const fundingAccount = isRemote
         ? mapKey(multisigAuthority)
         : multisigAuthority

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

@@ -3,9 +3,10 @@ import { useRouter } from 'next/router'
 import { Fragment, useCallback, useContext, useEffect } from 'react'
 import {
   DEFAULT_STATUS_FILTER,
+  type ProposalStatusFilter,
   StatusFilterContext,
 } from '../contexts/StatusFilterContext'
-import Arrow from '../images/icons/down.inline.svg'
+import Arrow from '@images/icons/down.inline.svg'
 
 const ProposalStatusFilter = () => {
   const router = useRouter()
@@ -31,11 +32,11 @@ const ProposalStatusFilter = () => {
 
   useEffect(() => {
     router.query && router.query.status
-      ? setStatusFilter(router.query.status as string)
+      ? setStatusFilter(router.query.status as ProposalStatusFilter)
       : setStatusFilter(DEFAULT_STATUS_FILTER)
   }, [setStatusFilter, router])
 
-  const statuses = [
+  const statuses: ProposalStatusFilter[] = [
     'all',
     'active',
     'executed',

governance/xc_admin/packages/xc_admin_frontend/components/common/CopyText.tsx

@@ -1,5 +1,5 @@
 import copy from 'copy-to-clipboard'
-import CopyIcon from '../../images/icons/copy.inline.svg'
+import CopyIcon from '@images/icons/copy.inline.svg'
 
 const CopyText: React.FC<{
   text: string

governance/xc_admin/packages/xc_admin_frontend/components/common/SocialLinks.tsx

@@ -1,10 +1,10 @@
 import Link from 'next/link'
-import Discord from '../../images/icons/discord.inline.svg'
-import Github from '../../images/icons/github.inline.svg'
-import LinkedIn from '../../images/icons/linkedin.inline.svg'
-import Telegram from '../../images/icons/telegram.inline.svg'
-import Twitter from '../../images/icons/twitter.inline.svg'
-import Youtube from '../../images/icons/youtube.inline.svg'
+import Discord from '@images/icons/discord.inline.svg'
+import Github from '@images/icons/github.inline.svg'
+import LinkedIn from '@images/icons/linkedin.inline.svg'
+import Telegram from '@images/icons/telegram.inline.svg'
+import Twitter from '@images/icons/twitter.inline.svg'
+import Youtube from '@images/icons/youtube.inline.svg'
 
 const SocialLinks = () => {
   return (

governance/xc_admin/packages/xc_admin_frontend/components/layout/Header.tsx

@@ -3,7 +3,7 @@ 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 Pyth from '@images/logomark.inline.svg'
 import MobileMenu from './MobileMenu'
 
 const WalletMultiButtonDynamic = dynamic(
@@ -156,7 +156,7 @@ const Header = () => {
           </div>
         </div>
       </header>
-      <MobileMenu headerState={headerState} setHeaderState={setHeaderState} />
+      <MobileMenu headerState={headerState} />
     </>
   )
 }

governance/xc_admin/packages/xc_admin_frontend/components/layout/Layout.tsx

@@ -4,7 +4,7 @@ import Header from './Header'
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="flex flex-col min-h-screen relative overflow-hidden">
+    <div className="relative flex min-h-screen flex-col overflow-hidden">
       <Header />
       <main className="flex-grow">{children}</main>
       <Footer />

governance/xc_admin/packages/xc_admin_frontend/components/layout/MobileMenu.tsx

@@ -6,15 +6,14 @@ import { useContext, useEffect, useRef } from 'react'
 import { ClusterContext, DEFAULT_CLUSTER } from '../../contexts/ClusterContext'
 import { BurgerState } from './Header'
 
-import orb from '../../images/burger.png'
+import orb from '@images/burger.png'
 
 interface MenuProps {
   headerState: BurgerState
-  setHeaderState: Function
 }
 
-const MobileMenu = ({ headerState, setHeaderState }: MenuProps) => {
-  let burgerMenu = useRef(null)
+const MobileMenu = ({ headerState }: MenuProps) => {
+  const burgerMenu = useRef(null)
   const router = useRouter()
   const { cluster } = useContext(ClusterContext)