multiple transactions in proposal - part 1 views (solana-labs#1631)

actions/executeInstructions.ts

@@ -38,7 +38,7 @@ export const executeInstructions = async (
         proposal.account.governance,
         proposal.pubkey,
         instruction.pubkey,
-        [instruction.account.getSingleInstruction()]
+        [...instruction.account.getAllInstructions()]
       )
     )
   )

actions/executeTransaction.ts

@@ -52,7 +52,7 @@ export const executeTransaction = async (
     proposal.account.governance,
     proposal.pubkey,
     instruction.pubkey,
-    [instruction.account.getSingleInstruction()]
+    [...instruction.account.getAllInstructions()]
   )
 
   // Create proposal transaction

components/ProposalExecutionCard.tsx

@@ -18,14 +18,14 @@ interface Props {
 }
 
 export default function ProposalExecutionCard(props: Props) {
-  const { instructions, proposal } = useProposal()
+  const { transactions, proposal } = useProposal()
   const [playState, setPlayState] = useState(PlayState.Unplayed)
   const [timeLeft, setTimeLeft] = useState<
     undefined | ReturnType<typeof diffTime>
   >()
   const timer = useRef<undefined | number>()
 
-  const allTransactions = Object.values(instructions)
+  const allTransactions = Object.values(transactions)
 
   const proposalTransactions = useProposalTransactions(
     allTransactions,

components/explorer/inspectorButton.tsx

@@ -24,11 +24,13 @@ export default function InspectorButton({
   const showInspector = async () => {
     let inspectUrl = ''
     if (!wasExecuted) {
-      const instructionData = proposalInstruction.account.getSingleInstruction()
+      const instructionData = proposalInstruction.account.getAllInstructions()
       const result = await dryRunInstruction(
         connection.current,
         wallet!,
-        instructionData
+        null,
+        [],
+        [...instructionData]
       )
 
       inspectUrl = await getExplorerInspectorUrl(connection, result.transaction)

components/instructions/InstructionAccount.tsx

@@ -0,0 +1,83 @@
+import { AccountMetaData } from '@solana/spl-governance'
+import { InstructionDescriptor, getAccountName } from './tools'
+import { getExplorerUrl } from '@components/explorer/tools'
+import { ExternalLinkIcon } from '@heroicons/react/solid'
+import { useState, useRef, useEffect } from 'react'
+import useWalletStore from 'stores/useWalletStore'
+import { fetchTokenAccountByPubkey } from '@hooks/queries/tokenAccount'
+
+export default function InstructionAccount({
+  endpoint,
+  index,
+  accountMeta,
+  descriptor,
+}: {
+  endpoint: string
+  index: number
+  accountMeta: AccountMetaData
+  descriptor: InstructionDescriptor | undefined
+}) {
+  const connection = useWalletStore((s) => s.connection)
+  const [accountLabel, setAccountLabel] = useState(
+    getAccountName(accountMeta.pubkey)
+  )
+  const isFetching = useRef(false)
+
+  useEffect(() => {
+    if (!accountLabel && !isFetching.current) {
+      isFetching.current = true
+      // Check if the account is SPL token account and if yes then display its owner
+      fetchTokenAccountByPubkey(connection.current, accountMeta.pubkey).then(
+        (ta) => {
+          if (ta.result) {
+            setAccountLabel(`owner: ${ta.result?.owner.toBase58()}`)
+          }
+          isFetching.current = false
+        }
+      )
+      // TODO: Extend to other well known account types
+    }
+  }, [accountLabel, accountMeta.pubkey, connection])
+
+  return (
+    <div className="border-t border-bkg-4 flex flex-col lg:flex-row lg:items-center lg:justify-between py-3">
+      <div className="pb-1 lg:pb-0">
+        <p className="font-bold text-fgd-1">{`Account ${index + 1}`}</p>
+        {descriptor?.accounts && (
+          <div className="my-0.5 text-fgd-3 text-xs">
+            {descriptor.accounts[index]?.name}
+          </div>
+        )}
+        <div className="text-[10px] flex space-x-3">
+          {accountMeta.isSigner && (
+            <div className="text-primary-light">Signer</div>
+          )}{' '}
+          {accountMeta.isWritable && (
+            <div className="text-[#b45be1]">Writable</div>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center">
+        <a
+          className="text-sm hover:brightness-[1.15] focus:outline-none flex items-center"
+          href={getExplorerUrl(endpoint, accountMeta.pubkey)}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <div>
+            <div>{accountMeta.pubkey.toBase58()}</div>
+            <div></div>
+            {accountLabel && (
+              <div className="mt-0.5 text-fgd-3 text-right text-xs">
+                {accountLabel}
+              </div>
+            )}
+          </div>
+          <ExternalLinkIcon
+            className={`flex-shrink-0 h-4 w-4 ml-2 text-primary-light`}
+          />
+        </a>
+      </div>
+    </div>
+  )
+}

components/instructions/InstructionDataView.tsx

@@ -0,0 +1,17 @@
+import { InstructionDescriptor } from './tools'
+
+const InstructionDataView = ({
+  descriptor,
+}: {
+  descriptor: InstructionDescriptor | undefined
+}) => {
+  return (
+    <div>
+      <span className="break-all font-display text-fgd-1 text-xs">
+        {descriptor?.dataUI}
+      </span>
+    </div>
+  )
+}
+
+export default InstructionDataView

components/instructions/InstructionProgram.tsx

@@ -0,0 +1,95 @@
+import { ConnectionContext } from '@utils/connection'
+import { getProgramName, isNativeSolanaProgram } from './programs/names'
+import { getExplorerUrl } from '@components/explorer/tools'
+import { ExternalLinkIcon } from '@heroicons/react/solid'
+import { BPF_UPGRADE_LOADER_ID } from '@solana/spl-governance'
+import { PublicKey } from '@solana/web3.js'
+import { abbreviateAddress } from '@utils/formatting'
+import { useState, useEffect } from 'react'
+import { fetchParsedAccountInfoByPubkey } from '@hooks/queries/parsedAccountInfo'
+
+const InstructionProgram = ({
+  connection,
+  programId,
+}: {
+  connection: ConnectionContext
+  programId: PublicKey
+}) => {
+  const isNativeSolProgram = isNativeSolanaProgram(programId)
+  const [isUpgradeable, setIsUpgradeable] = useState(false)
+  const [authority, setAuthority] = useState('')
+
+  const programLabel = getProgramName(programId)
+  useEffect(() => {
+    const tryGetProgramInfo = async (programId: PublicKey) => {
+      try {
+        const programAccount = (
+          await fetchParsedAccountInfoByPubkey(connection.current, programId)
+        ).result
+        const programInfo = (
+          await fetchParsedAccountInfoByPubkey(
+            connection.current,
+            new PublicKey(programAccount?.data['parsed']?.info?.programData)
+          )
+        ).result
+        const info = programInfo?.data['parsed']?.info
+        const authority = info.authority
+        const isUpgradeable =
+          programInfo?.owner?.equals(BPF_UPGRADE_LOADER_ID) && authority
+
+        setIsUpgradeable(isUpgradeable)
+        setAuthority(authority)
+        // eslint-disable-next-line no-empty
+      } catch {}
+    }
+
+    if (connection.cluster === 'mainnet' && !isNativeSolProgram) {
+      tryGetProgramInfo(programId)
+    }
+  }, [programId, connection, isNativeSolProgram])
+
+  return (
+    <div className="border-t border-bkg-4 flex flex-col lg:flex-row lg:items-center lg:justify-between py-3">
+      <span className="font-bold text-fgd-1 text-sm">
+        <div>Program</div>
+        {authority && (
+          <a
+            href={`https://explorer.solana.com/address/${authority}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <div className="text-[10px] text-link">
+              Authority: {abbreviateAddress(authority)}
+            </div>
+            <div className="text-[10px]">
+              Upgradeable: {isUpgradeable ? 'Yes' : 'No'}
+            </div>
+          </a>
+        )}
+      </span>
+      <div className="flex items-center pt-1 lg:pt-0">
+        <a
+          className="text-sm hover:brightness-[1.15] focus:outline-none flex items-center"
+          href={getExplorerUrl(connection.endpoint, programId)}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <div>
+            {programId.toBase58()}
+            {programLabel && (
+              <div className="mt-1 text-fgd-3 lg:text-right text-xs">
+                {programLabel}
+              </div>
+            )}
+            <div></div>
+          </div>
+          <ExternalLinkIcon
+            className={`flex-shrink-0 h-4 w-4 ml-2 text-primary-light`}
+          />
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default InstructionProgram