[xc-admin] multisig hook (#496)

* Fix next config

* Checkpoint

* Checkpoint

* Cleanup

* Cleanup

Author: guibescos

governance/xc-admin/package-lock.json

@@ -0,0 +1,47 @@
+import SquadsMesh from '@sqds/mesh'
+import { TransactionAccount } from '@sqds/mesh/lib/types'
+import React, { createContext, useContext, useMemo } from 'react'
+import { useMultisig } from '../hooks/useMultisig'
+
+// TODO: fix any
+interface MultisigContextProps {
+  isLoading: boolean
+  error: any // TODO: fix any
+  squads: SquadsMesh | undefined
+  proposals: TransactionAccount[]
+}
+
+const MultisigContext = createContext<MultisigContextProps>({
+  proposals: [],
+  isLoading: true,
+  error: null,
+  squads: undefined,
+})
+
+export const useMultisigContext = () => useContext(MultisigContext)
+
+interface MultisigContextProviderProps {
+  children?: React.ReactNode
+}
+
+export const MultisigContextProvider: React.FC<
+  MultisigContextProviderProps
+> = ({ children }) => {
+  const { isLoading, error, squads, proposals } = useMultisig()
+
+  const value = useMemo(
+    () => ({
+      proposals,
+      isLoading,
+      error,
+      squads,
+    }),
+    [squads, isLoading, error, proposals]
+  )
+
+  return (
+    <MultisigContext.Provider value={value}>
+      {children}
+    </MultisigContext.Provider>
+  )
+}

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

@@ -0,0 +1,98 @@
+import { Wallet } from '@coral-xyz/anchor'
+import { PythCluster } from '@pythnetwork/client/lib/cluster'
+import { Cluster, Connection, Keypair, PublicKey } from '@solana/web3.js'
+import SquadsMesh from '@sqds/mesh'
+import { TransactionAccount } from '@sqds/mesh/lib/types'
+import { useContext, useEffect, useRef, useState } from 'react'
+import { getProposals } from 'xc-admin-common'
+import { ClusterContext } from '../contexts/ClusterContext'
+import { pythClusterApiUrls } from '../utils/pythClusterApiUrl'
+
+export function getMultisigCluster(cluster: PythCluster): Cluster | 'localnet' {
+  switch (cluster) {
+    case 'pythnet':
+      return 'mainnet-beta'
+    case 'pythtest':
+      return 'devnet'
+    default:
+      return cluster
+  }
+}
+
+export const UPGRADE_MUTLTISIG: Record<Cluster | 'localnet', PublicKey> = {
+  'mainnet-beta': new PublicKey('FVQyHcooAtThJ83XFrNnv74BcinbRH3bRmfFamAHBfuj'),
+  testnet: new PublicKey('FVQyHcooAtThJ83XFrNnv74BcinbRH3bRmfFamAHBfuj'),
+  devnet: new PublicKey('6baWtW1zTUVMSJHJQVxDUXWzqrQeYBr6mu31j3bTKwY3'),
+  localnet: new PublicKey('FVQyHcooAtThJ83XFrNnv74BcinbRH3bRmfFamAHBfuj'),
+}
+
+interface MultisigHookData {
+  isLoading: boolean
+  error: any // TODO: fix any
+  squads: SquadsMesh | undefined
+  proposals: TransactionAccount[]
+}
+
+export const useMultisig = (): MultisigHookData => {
+  const connectionRef = useRef<Connection>()
+  const { cluster } = useContext(ClusterContext)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [proposals, setProposals] = useState<TransactionAccount[]>([])
+  const [squads, setSquads] = useState<SquadsMesh>()
+  const [urlsIndex, setUrlsIndex] = useState(0)
+
+  useEffect(() => {
+    setIsLoading(true)
+    setError(null)
+  }, [urlsIndex, cluster])
+
+  useEffect(() => {
+    let cancelled = false
+    const urls = pythClusterApiUrls(getMultisigCluster(cluster))
+    const connection = new Connection(urls[urlsIndex].rpcUrl, {
+      commitment: 'confirmed',
+      wsEndpoint: urls[urlsIndex].wsUrl,
+    })
+
+    connectionRef.current = connection
+    ;(async () => {
+      try {
+        const squads = new SquadsMesh({
+          connection,
+          wallet: new Keypair() as unknown as Wallet,
+        })
+        setProposals(
+          await getProposals(
+            squads,
+            UPGRADE_MUTLTISIG[getMultisigCluster(cluster)]
+          )
+        )
+        setSquads(squads)
+        setIsLoading(false)
+      } catch (e) {
+        if (cancelled) return
+        if (urlsIndex === urls.length - 1) {
+          // @ts-ignore
+          setError(e)
+          setIsLoading(false)
+          console.warn(`Failed to fetch accounts`)
+        } else if (urlsIndex < urls.length - 1) {
+          setUrlsIndex((urlsIndex) => urlsIndex + 1)
+          console.warn(
+            `Failed with ${urls[urlsIndex]}, trying with ${urls[urlsIndex + 1]}`
+          )
+        }
+      }
+    })()
+
+    return () => {}
+  }, [urlsIndex, cluster])
+
+  return {
+    isLoading,
+    error,
+    squads,
+    proposals,
+  }
+}

governance/xc-admin/packages/xc-admin-frontend/hooks/useMultisig.ts

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  experimental: {
+    externalDir: true,
+  },
   webpack(config) {
     const fileLoaderRule = config.module.rules.find(
       (rule) => rule.test && rule.test.test('.svg')

governance/xc-admin/packages/xc-admin-frontend/next.config.js

@@ -16,6 +16,7 @@
     "@solana/wallet-adapter-react-ui": "^0.9.27",
     "@solana/wallet-adapter-wallets": "^0.19.10",
     "@solana/web3.js": "^1.73.0",
+    "@sqds/mesh": "^1.0.6",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
@@ -27,7 +28,8 @@
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.0",
     "typescript": "4.9.4",
-    "use-debounce": "^9.0.2"
+    "use-debounce": "^9.0.2",
+    "xc-admin-common": "*"
   },
   "devDependencies": {
     "@svgr/webpack": "^6.3.1",