How do I send a transaction to HashPack for signing?

Question

I am trying to sign a transaction on the frontend and send the signed bytes to the backend to execute the transaction. However, I am having difficulty signing the transaction. I have a HashConnect pairing with my app, and I have my signer, but I am not having any luck signing. I've tried several different things, and I'm currently here:

const transactionId = new TransactionId(AccountId.fromString(accountId));
const transaction = new TopicMessageSubmitTransaction()
    .setTopicId(id)
    .setMessage(JSON.stringify(message))
    .setTransactionId(transactionId);

const signedTransaction = await transaction.signWithSigner(signer);

I am receiving the following error:

TopicMessageSubmitTransaction.js:293 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'seconds')
    at TopicMessageSubmitTransaction.freezeWith (TopicMessageSubmitTransaction.js:293:1)
    at HashConnectSigner.signTransaction (signer.ts:66:1)
    at TopicMessageSubmitTransaction.signWithSigner (Transaction.js:990:1)
    at postReply (Thread.js:133:1)
    at onSubmit (Thread.js:252:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)

Answer 1

The reason you get the error because you did not freeze the transaction. To fix your problem you have to freeze your transaction by calling freezeWithSigner(signer) Here is the example code

const transactionId = new TransactionId(AccountId.fromString(accountId));
const transaction = new TopicMessageSubmitTransaction()
    .setTopicId(id)
    .setMessage(JSON.stringify(message))
    .setTransactionId(transactionId)
    .freezeWithSigner(signer);
            
const signedTransaction = await transaction.signWithSigner(signer);