Add error handling on very large comment during voting. (#2413)

actions/castVote.ts

@@ -27,7 +27,6 @@ import { withCastVote } from '@solana/spl-governance'
 import { VotingClient } from '@utils/uiTypes/VotePlugin'
 import { chunks } from '@utils/helpers'
 import {
-  sendTransactionsV3,
   SequenceType,
   txBatchesToInstructionSetWithSigners,
 } from '@utils/sendTransactions'
@@ -43,6 +42,7 @@ import { fetchProgramVersion } from '@hooks/queries/useProgramVersionQuery'
 import { fetchVoteRecordByPubkey } from '@hooks/queries/voteRecord'
 import { findPluginName } from '@constants/plugins'
 import { BN } from '@coral-xyz/anchor'
+import { postComment } from './chat/postMessage'
 
 const getVetoTokenMint = (
   proposal: ProgramAccount<Proposal>,
@@ -358,7 +358,7 @@ export async function castVote(
       sequenceType: SequenceType.Parallel,
     }))
 
-    await sendTransactionsV3({
+    await postComment({
       connection,
       wallet,
       transactionInstructions: actions,
@@ -396,7 +396,7 @@ export async function castVote(
       }
     })
 
-    await sendTransactionsV3({
+    await postComment({
       connection,
       wallet,
       transactionInstructions: ixsChunks,
@@ -470,10 +470,10 @@ export async function castVote(
       connection
     )
     if (!hasEnoughSol) {
-      return
+      throw new Error('Not enough SOL.')
     }
 
-    await sendTransactionsV3({
+    await postComment({
       connection,
       wallet,
       transactionInstructions: instructionsChunks,

actions/chat/postMessage.ts

@@ -21,6 +21,7 @@ import {
   sendTransactionsV3,
   txBatchesToInstructionSetWithSigners,
 } from '@utils/sendTransactions'
+import { sendSignAndConfirmTransactionsProps } from '@blockworks-foundation/mangolana/lib/transactions'
 
 export async function postChatMessage(
   { connection, wallet, programId, walletPubkey }: RpcContext,
@@ -89,14 +90,29 @@ export async function postChatMessage(
     }),
   ]
 
-  await sendTransactionsV3({
+  await postComment({
     connection,
     wallet,
     transactionInstructions: instructionsChunks,
     callbacks: undefined,
   })
+}
 
-  // const transaction = new Transaction()
-  // transaction.add(...instructions)
-  // await sendTransaction({ transaction, wallet, connection, signers })
+export async function postComment(
+  transactionProps: sendSignAndConfirmTransactionsProps & {
+    lookupTableAccounts?: any
+    autoFee?: boolean
+}) {
+  try {
+    await sendTransactionsV3(transactionProps)
+  } catch (e) {
+    if (e.message.indexOf('Transaction too large:') !== -1) {
+      const numbers = e.message.match(/\d+/g)
+      const [size, maxSize] = numbers ? numbers.map(Number) : [0, 0]
+      if (size > maxSize) {
+        throw new Error(`You must reduce your comment by ${size - maxSize} character(s).`)
+      }
+    }
+    throw e
+  }
 }

components/VoteCommentModal.tsx

@@ -30,7 +30,7 @@ const VoteCommentModal: FunctionComponent<VoteCommentModalProps> = ({
   isMulti,
 }) => {
   const [comment, setComment] = useState('')
-  const { submitting, submitVote } = useSubmitVote()
+  const { submitting, submitVote , error } = useSubmitVote()
 
   const voteString = VOTE_STRINGS[vote]
 
@@ -39,9 +39,8 @@ const VoteCommentModal: FunctionComponent<VoteCommentModalProps> = ({
       vote,
       comment,
       voteWeights: isMulti,
-    })
-
-    onClose()
+    }).then(() => onClose())
+      .catch(console.log)
   }
 
   return (
@@ -62,6 +61,7 @@ const VoteCommentModal: FunctionComponent<VoteCommentModalProps> = ({
         onChange={(e) => setComment(e.target.value)}
         // placeholder={`Let the DAO know why you vote '${voteString}'`}
       />
+      {error && <p className="mt-1 text-red">{error.message}</p>}
 
       <div className="flex items-center justify-center mt-8">
         <SecondaryButton className="w-44 mr-4" onClick={onClose}>

components/chat/DiscussionForm.tsx

@@ -29,6 +29,7 @@ const DiscussionForm = () => {
   const { realmInfo } = useRealm()
   const votingClients = useVotingClients();
   const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState('')
 
   const wallet = useWalletOnePointOh()
   const connected = !!wallet?.connected
@@ -43,6 +44,7 @@ const DiscussionForm = () => {
   const votingClient = votingClients(tokenRole ?? 'community');// default to community if no role is provided
   const submitComment = async () => {
     setSubmitting(true)
+    setError('')
     if (
       !realm ||
       !proposal ||
@@ -79,6 +81,7 @@ const DiscussionForm = () => {
       setComment('')
     } catch (ex) {
       console.error("Can't post chat message", ex)
+      setError(ex.message);
       //TODO: How do we present transaction errors to users? Just the notification?
     } finally {
       setSubmitting(false)
@@ -118,6 +121,7 @@ const DiscussionForm = () => {
           </Button>
         </Tooltip>
       </div>
+      {error && <p className="mt-1 text-red">{error}</p>}
     </>
   )
 }

hooks/useSubmitVote.ts

@@ -167,6 +167,9 @@ export const useSubmitVote = () => {
       } catch (e) {
         console.error(e)
         notify({ type: 'error', message: e.message })
+        if (msg) {
+          throw e
+        }
       } finally {
         if (isNftPlugin) {
           closeNftVotingCountingModal(