FCL Feature: Calculate the transaction hash

[srinjoyc]

FCL Feature: Calculate the transaction hash

[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)

[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"
    }
  ]
}

[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! 😆

[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?

[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.

[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!