FCL Feature: Calculate the transaction hash

[srinjoyc]

👋   If you are interested in working on this issue, please check out the Getting Started guide on HackerEarth!

Description (Problem Statement)

Right now, there's no way to get the transaction hash before it's sent to the blockchain. Pre-calculating the transaction hash will allow for error recovery if there are any network connection issues during the submission of the transaction.

Experience Required (Team Required)

• JS and familiarity with FCL, SDK send

Minimum Feature Set (Acceptance Criteria)

• Add this ability as a middleware to be executed/resolved right before transaction is sent
• It should wait for the callback function to complete before sending the transaction
• Implement an additional function that would supply the ability to go from the transaction voucher to the hash (txId) **voucher => voucherToTxId(voucher)**
• If the callback throws an error it should halt the transaction

Milestone Requirements

• Implement async function which calculates the transaction hash from data
• Implement voucherToTxId ****function that takes a transaction voucher and calculates txId hash
• Documentation - Add a description for this feature including sample code for usage in the existing API Docs

Software Requirements

• Code should be written with best practices in mind.
• Other Requirements - Error Reporting
  • Throw descriptive exceptions on errors
  • Prints a clear error message to the browser console
• All core logic should have unit tests. Include tests for success on valid data and failure

Other Requirements

• Documentation describing the utility functions and parameters

Judging Criteria

• For all projects, technical & high-level judging criteria apply.

Resources

• FCL API Documentation
• Voucher
• Existing Issue

[gregsantos]

Hello folks! I'm Greg 👋🏼 😎 A Senior Javascript Developer on the DevEx Team.
If you choose this issue, I'll be your primary Point of Contact for any questions on implementation, code reviews, and/or help getting it over the finish line. Thanks for participating and Good Luck!

[avcdsld]

@gregsantos Hi. I'm interested in this issue and also want this feature myself.

Is there a specification written somewhere that calculates the txId from the voucher or the information contained therein? I would like to know if there is any reference to it. Either in code or documentation.

Also, I would like to know how to receive the voucher in fcl middleware. Can I receive it from the results of fcl.authorizations?

[gregsantos]

That's great to hear @avcdsld !
There is no spec or documentation currently as the feature does not yet exist in the JS sdk
You might find this useful from the Flow GO SDK

You can find the voucher here for reference.
It contains all the transaction data you would need to calculate the txId hash.

fcl.serialize may be useful to you

await fcl.serialize([
  fcl.transaction`
    transaction {
      prepare(acct: AuthAccount) {
        log("Hello from prepare")
      }
      execute {
        log("Hello from execute")
      }
    }
  `,
  fcl.proposer(fcl.authz),
  fcl.authorizations([fcl.authz]),
  fcl.payer(fcl.authz)
]).then(console.log)

returns

{
  "cadence": "transaction {\n      prepare(acct: AuthAccount) {\n        log(\"Hello from prepare\")\n      }\n      execute {\n        log(\"Hello from execute\")\n      }\n    }",
  "refBlock": "81ca13efb92b568d7751bc9d19ced5823ccd78c22fb3102445bae8cf3ce1236d",
  "computeLimit": 10,
  "arguments": [],
  "proposalKey": {
    "address": "0x6a27b81975f0ee46",
    "keyId": 1,
    "sequenceNum": 34
  },
  "payer": "0xf062a545ce3c552d",
  "authorizers": [
    "0x6a14b81975f0ee46"
  ],
  "payloadSigs": [
    {
      "address": "0x6a27b81975f0ee46",
      "keyId": 1,
      "sig": "12345678"
    }
  ],
  "envelopeSigs": [
    {
      "address": "0xf062a545ce3c552d",
      "keyId": 50,
      "sig": "87654321"
    }
  ]
}

[avcdsld]

@gregsantos Thanks for the info! I'm checking the code now and trying to figure out where to change it. (And if this is implementable for me)

I found that the middleware can be implemented by adding the following files, is this the right approach?

packages/sdk/src/build/build-pre-send-check.js

If I write the code like below, I can receive ix, and it looks like it contains the information needed to calculate txId.

import {createSignableVoucher} from "../resolve/voucher.js"

export function preSendCheck(fn) {
  return ix => {
    // const voucher = createSignableVoucher(ix)
    // fn(voucher)
    return ix
  }
}

However, when I run createSignableVoucher(ix) with this ix, the result voucher does not contain the Cadence code and arguments information.

voucher: {
  cadence: null,
  refBlock: null,
  computeLimit: 10,
  arguments: [],
  proposalKey: { address: '0xf8d6e0586b0a20c7', keyId: 1, sequenceNum: 123 },
  payer: '0xf8d6e0586b0a20c7',
  authorizers: [ '0xf8d6e0586b0a20c7' ],
  payloadSigs: [
    { address: '0xf8d6e0586b0a20c7', keyId: 1, sig: null },
    { address: '0xf8d6e0586b0a20c7', keyId: 1, sig: null }
  ],
  envelopeSigs: [ { address: '0xf8d6e0586b0a20c7', keyId: 1, sig: null } ]
}

It would be great if you could tell me why this is. Also, I would like to know the proper way to create a voucher with the necessary information in txId. 🙏

[avcdsld]

As I looked at the code, I realized that the information needed to calculate the txId, such as signature, is not revealed after build, but after resolve.
My understanding is that I need to prepare the following two files.

packages/sdk/src/build/build-pre-send-check.js
packages/sdk/src/resolve/resolve-pre-send-check.js

After the resolve process, I have confirmed that createSignableVoucher(ix) works correctly.

I am working on this approach. Any comments would be appreciated.

[avcdsld]

1. Team: https://www.hackerearth.com/challenges/hackathon/flip-fest/dashboard/c511683/team/
2. @avcdsld (There are three of us on the team, but I'm the only one working on this issue.)
3. plan time: 2021-10-10 (PR creation)

[psiemens]

Looking forward to it @avcdsld!

[avcdsld]

@gregsantos
It looks like fcl-js already includes the function to encode transactions.
https://github.com/onflow/fcl-js/blob/79a76c/packages/sdk/src/encode/encode.js

However, the result is different from the result of flow-go-sdk. Why is this?
(For example, with or without the tag ("FLOW-V0.0-transaction") and with or without envelopeSigs)

I am wondering if I should reuse this existing code or add another code that is similar.

[gregsantos]

As I looked at the code, I realized that the information needed to calculate the txId, such as signature, is not revealed after build, but after resolve. My understanding is that I need to prepare the following two files.

packages/sdk/src/build/build-pre-send-check.js
packages/sdk/src/resolve/resolve-pre-send-check.js

After the resolve process, I have confirmed that createSignableVoucher(ix) works correctly.

I am working on this approach. Any comments would be appreciated.

You're on the right track now @avcdsld and correct that the data needed to calculate the transaction hash is not available until after the resolve process.

Updating:
We're thinking adding a new function to encode.js makes sense. Something like encodeTxId()

In addition the new utility function, something like voucherToTxId() can be added
Thinking you may want to add a voucher-utils directory for this. After encoding from the voucher you will need to hash so will likely need to add a SHA3 lib for this as FCL does not currently include.

Hope this helps!

[avcdsld]

Thank you. Very useful advice! 😆

[kimcodeashian]

Good day @avcdsld!

Thanks so much for all your hardwork & participation. In order to finalize winners & prepare for prize payout, we'll need the following actions from your end.

Please provide the following information by Nov 17, 2021, (in this GH Issue is fine):

1. Team Information

• Team Members Information - Github Username + Email Contact + Percentage of prize allocation (total should = 100%)
• All mentioned members MUST react to the post with a 👍 which will act as confirmation that the information is correct, or a 👎 to indicate that the information is not correct.
• We will be reaching out via e-mail

🎖IMPORTANT: We will only proceed with prize payouts once all members have confirmed with 👍 on the post.

2. Video Demo (optional)

• Please provide a 5-minute video demo to be featured & showcased in the FLIP Fest Closing Ceremonies
• Link format & Downloadable (eg. Google Drive, Vimeo)
• Content Format (Problem Statement, your work / how you solved it, final outcome)

We will be hosting Closing Ceremonies on November 23rd, 8AM PT where we'll having closing remarks from Dete & will be announcing the winners! I'll share the details here before Nov 17.

[kimcodeashian]

Hey folks,

We've received and reviewed over 82 submissions! What an amazing community on Flow! To commemorate all the hard work done, we have finalized winners and will be announcing them during our Closing Ceremony on Nov 23rd, 8AM PT. Be sure to join us - there may be some attendance prizes & a keynote from our CTO, Dete 😉!

RSVP here so you don't miss out! See you then!