[Xc admin] frontend to use server (#832)

* Import axios

* Switch to axios

* Fix

* Error handling

Author: guibescos

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

@@ -6,6 +6,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import { WalletModalButton } from '@solana/wallet-adapter-react-ui'
 import { Cluster, PublicKey, TransactionInstruction } from '@solana/web3.js'
 import SquadsMesh from '@sqds/mesh'
+import axios from 'axios'
 import { Fragment, useContext, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
 import {
@@ -77,39 +78,46 @@ const PermissionDepermissionKey = ({
       const fundingAccount = isRemote
         ? mapKey(multisigAuthority)
         : multisigAuthority
-      priceAccounts.map((priceAccount) => {
-        isPermission
-          ? pythProgramClient.methods
+
+      for (const priceAccount of priceAccounts) {
+        if (isPermission) {
+          instructions.push(
+            await pythProgramClient.methods
               .addPublisher(new PublicKey(publisherKey))
               .accounts({
                 fundingAccount,
                 priceAccount: priceAccount,
               })
               .instruction()
-              .then((instruction) => instructions.push(instruction))
-          : pythProgramClient.methods
+          )
+        } else {
+          instructions.push(
+            await pythProgramClient.methods
               .delPublisher(new PublicKey(publisherKey))
               .accounts({
                 fundingAccount,
                 priceAccount: priceAccount,
               })
               .instruction()
-              .then((instruction) => instructions.push(instruction))
-      })
+          )
+        }
+      }
       setIsSubmitButtonLoading(true)
       try {
-        const proposalPubkey = await proposeInstructions(
-          squads,
-          PRICE_FEED_MULTISIG[getMultisigCluster(cluster)],
-          instructions,
-          isRemote,
-          wormholeAddress
+        const response = await axios.post(
+          process.env.NEXT_PUBLIC_PROPOSER_SERVER_URL + '/api/propose',
+          { instructions, cluster }
         )
+        const { proposalPubkey } = response.data
         toast.success(`Proposal sent! 🚀 Proposal Pubkey: ${proposalPubkey}`)
         setIsSubmitButtonLoading(false)
         closeModal()
-      } catch (e: any) {
-        toast.error(capitalizeFirstLetter(e.message))
+      } catch (error: any) {
+        if (error.response) {
+          toast.error(capitalizeFirstLetter(error.response.data))
+        } else {
+          toast.error(capitalizeFirstLetter(error.message))
+        }
         setIsSubmitButtonLoading(false)
       }
     }

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

@@ -3,6 +3,7 @@ import { AccountType, getPythProgramKeyForCluster } from '@pythnetwork/client'
 import { PythOracle, pythOracleProgram } from '@pythnetwork/client/lib/anchor'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { Cluster, PublicKey, TransactionInstruction } from '@solana/web3.js'
+import axios from 'axios'
 import { useCallback, useContext, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
 import {
@@ -464,18 +465,20 @@ const General = () => {
 
       setIsSendProposalButtonLoading(true)
       try {
-        const proposalPubkey = await proposeInstructions(
-          proposeSquads,
-          PRICE_FEED_MULTISIG[getMultisigCluster(cluster)],
-          instructions,
-          isRemote,
-          wormholeAddress
+        const response = await axios.post(
+          process.env.NEXT_PUBLIC_PROPOSER_SERVER_URL + '/api/propose',
+          { instructions, cluster }
         )
+        const { proposalPubkey } = response.data
         toast.success(`Proposal sent! 🚀 Proposal Pubkey: ${proposalPubkey}`)
         setIsSendProposalButtonLoading(false)
         closeModal()
-      } catch (e: any) {
-        toast.error(capitalizeFirstLetter(e.message))
+      } catch (error: any) {
+        if (error.response) {
+          toast.error(capitalizeFirstLetter(error.response.data))
+        } else {
+          toast.error(capitalizeFirstLetter(error.message))
+        }
         setIsSendProposalButtonLoading(false)
       }
     }

governance/xc_admin/packages/xc_admin_frontend/package.json

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

governance/xc_admin/packages/xc_admin_frontend/pages/index.tsx

@@ -17,11 +17,6 @@ import { StatusFilterProvider } from '../contexts/StatusFilterContext'
 import { classNames } from '../utils/classNames'
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const KEYPAIR_BASE_PATH = process.env.KEYPAIR_BASE_PATH || ''
-  const OPS_WALLET = fs.existsSync(`${KEYPAIR_BASE_PATH}/ops-key`)
-    ? JSON.parse(fs.readFileSync(`${KEYPAIR_BASE_PATH}/ops-key`, 'ascii'))
-    : null
-
   const MAPPINGS_BASE_PATH = process.env.MAPPINGS_BASE_PATH || ''
   const PUBLISHER_PYTHNET_MAPPING_PATH = `${MAPPINGS_BASE_PATH}/publishers-pythnet.json`
   const PUBLISHER_PYTHTEST_MAPPING_PATH = `${MAPPINGS_BASE_PATH}/publishers-pythtest.json`
@@ -53,7 +48,6 @@ export const getServerSideProps: GetServerSideProps = async () => {
 
   return {
     props: {
-      OPS_WALLET,
       publisherKeyToNameMapping,
       multisigSignerKeyToNameMapping,
     },
@@ -81,22 +75,13 @@ const TAB_INFO = {
 const DEFAULT_TAB = 'general'
 
 const Home: NextPage<{
-  OPS_WALLET: number[] | null
   publisherKeyToNameMapping: Record<string, Record<string, string>>
   multisigSignerKeyToNameMapping: Record<string, string>
-}> = ({
-  OPS_WALLET,
-  publisherKeyToNameMapping,
-  multisigSignerKeyToNameMapping,
-}) => {
+}> = ({ publisherKeyToNameMapping, multisigSignerKeyToNameMapping }) => {
   const [currentTabIndex, setCurrentTabIndex] = useState(0)
   const tabInfoArray = Object.values(TAB_INFO)
   const anchorWallet = useAnchorWallet()
-  const wallet = OPS_WALLET
-    ? (new NodeWallet(
-        Keypair.fromSecretKey(Uint8Array.from(OPS_WALLET))
-      ) as Wallet)
-    : (anchorWallet as Wallet)
+  const wallet = anchorWallet as Wallet
 
   const router = useRouter()