[react-cat][1.5] Visualize transactions and display transaction hash

[sschiessl-bcp]

Current explorer does not show transactions. Add a visual indent with transaction header information (transaction number in block and transaction id/hash)

[froooze]

Why not for all actions on the blockchain IDs?
Show only temporary, when clicked on I icon or with a tooltipp, to not use extra space?

[abitmore]

By the way, please show current block ID as well.

[startailcoon]

Exactly where in the application are we talking?

[react-cat]

@sschiessl-bcp You are talking about Explore/Blockchain recent activity ? And the task is to create an indent like "create order" / "cancel order"

but for the transactions ?

[startailcoon]

I assume @sschiessl-bcp is talking about HTCL Transactions?

https://github.com/bitshares/bitsharesjs/blob/master/lib/chain/src/ChainTypes.js#L102-L106

    htlc_create: 49,
    htlc_redeem: 50,
    htlc_redeemed: 51,
    htlc_extend: 52,
    htlc_refund: 53

[react-cat]

@startailcoon, @sschiessl-bcp so you mean this transactions should be splitted to create: count, redeem: count, redeemed: count, etc. ?

[abitmore]

I think this issue is about the blockchain explorer, e.g. https://wallet.bitshares.org/#/block/39402693/17

What to show in the page:

• block info
  • block number
  • timestamp
  • block id / hash
  • signature
  • json of the block (see [2] Add raw json for operations and objects #2657)
  • witness
  • previous block id / hash
  • number of transactions
• transaction list (we don't show this right now but only operations)
  • transaction id/hash
  • signatures
  • json of the transaction (see [2] Add raw json for operations and objects #2657)
  • whether it is a "virtual transaction" (which contains only virtual operations, see Deterministic numbering of virtual operations bitshares-core#1675)
  • the sequence of this transaction in block (trx_in_block)
  • operation list in this transaction
    • the sequence number of this operation in the transaction (op_in_trx)
    • whether it is a virtual operation (see Deterministic numbering of virtual operations bitshares-core#1675)
    • operation details
    • json of this operation in history (see [2] Add raw json for operations and objects #2657)

Do not break the link:

• when clicking the operation name in "activities", it will link to operation in the blockchain explorer.

By the way, in order to get virtual operations in the explorer, we need a new API from bitshares-core (see bitshares/bitshares-core#243), or query from ES.

[react-cat]

@abitmore This task is about transactions and not about whole Explore/Blockchain page, so maybe it would be better to focus here on current task and split your checklist to different task and create an issues for them ?

[abitmore]

@react-cat that's actually the same thing. We don't show transactions in the explorer right now, if to show them, need to reorganize the whole page.

[startailcoon]

Still waiting for @sschiessl-bcp to explain this issue in more details.

[sschiessl-bcp]

Sorry for the lack of details, here are some.

1. The block explorer currently only implicitly shows operations
   
   Currently we display #1: PLACE ORDER. Let's add a header for transaction and give the operations a little intend. This is a quick fix and maybe not the best UX, but a quick solution without breaking existing UX

TX#1 <txhash>
   #1: PLACE ORDER
       Price | 0.3238 bitCNY/BTS
       Sell | 567.9865 bitCNY
       Buy at least | 1,754.37920 BTS
       Seller | baba-peng
       Expiration | July 12, 2020, 7:04:37 AM GMT+2
       Fee | 0.02526 BTS

2. The header shows BLOCK #39402693 but not the id (merkle root). The list below shows the previous block merkle root. Lets add an entry "Merkle Root" above it

[sschiessl-bcp]

See for example

https://open-explorer.io/#/blocks/39622255

https://open-explorer.io/#/operations/1.11.943032911

[startailcoon]

Thanks @sschiessl-bcp. So we want to add which TX the op was included in as well, not a bad idea. The indent would do good for now to keep the current design.

Note for example this block, one or more OPs has more than 1 TX.

Block https://open-explorer.io/#/blocks/39621703

Transactions in block : 18
Operations in block : 15

[sschiessl-bcp]

@react-cat you still interested? Otherwise I would.

[abitmore]

@sschiessl-bcp any idea about my comments above (#2719 (comment))? If it's not appropriate to discuss in this issue, I can create a new issue and move the discussion there.

[sschiessl-bcp]

@sschiessl-bcp any idea about my comments above (#2719 (comment))? If it's not appropriate to discuss in this issue, I can create a new issue and move the discussion there.

I like to revisit after seeing the tx splitup

[react-cat]

@sschiessl-bcp I'll take it if you don't mind.
I'll summarize what should be done, please correct me in case I understand something wrong.

1. Above each transactions show "TX#{transaction_number} {transaction_hash}"
2. Add to the block header Merke Root(ID) of current block above "Previous"

[abitmore]

@sschiessl-bcp @react-cat to be clear, "block ID" is not transaction_merkle_root, it's fine to display both of them though.

[startailcoon]

While we're at it, can we look on a way to visualize that you can click the block number to search for another one by typing it in?

[abitmore]

While we're at it, can we look on a way to visualize that you can click the block number to search for another one by typing it in?

I think we can add an "edit" or "search" icon near the block number. A clickable block number just doesn't make sense.

[react-cat]

@startailcoon Actually, when I was searching for the way to search for another block, block number was the last place that I was looking on. That number looks more like a link and it's a bit confusing cause I'm already on that block.
As @abitmore suggested search icon could be a thing. Edit icon would be more confusing than useful.

I think as a quick fix, search icon could be good, but it would be better to make some changes in UI, for example:

Also we can move arrows (arrows that switch to next or previous block) to top and place
BLOCK #{NUMBER} with search icon between them, so all navigation between blocks would be in one place and it would be more intuitive for user. Behavior for search icon would be the same as it is now for block number

[startailcoon]

I think it would be better to have Go to Block, since it's not a search.

Also we can move arrows (arrows that switch to next or previous block) to top a...

Agree. You could make them center and have them cover enough width to fit them, so they are always centered on the same spot when you change block.

[react-cat]

@startailcoon So as I understand you agreed with the image, but want to change "Search for block" to "Go to Block", correct me If I misunderstand something.

Also I didn't get what you mean here "You could make them center and have them cover enough width to fit them, so they are always centered on the same spot when you change block.", could you please explain ?

[startailcoon]

@startailcoon So as I understand you agreed with the image, but want to change "Search for block" to "Go to Block", correct me If I misunderstand something.

Correct

Also I didn't get what you mean here "You could make them center and have them cover enough width to fit them, so they are always centered on the same spot when you change block.", could you please explain ?

Like this, where they are centered.

--------------------------------------------------------------------
|        <-   BLOCK #1234456    [__Go_to_Block__] [🔍]    ->       |
|                                                                   |
|                                                                   |
|                                                                   |
|                                                                   |

[react-cat]

@startailcoon Okay, got it.

[react-cat]

@startailcoon To not repeat the mistakes like in #2931, I created a new issue for redesign #3025 and let's stick here to initial task.

[react-cat]

@sschiessl-bcp, @startailcoon could anyone please help me a little, I can't find a way to get transaction hash. I searched all across the project, there is no tx hash none in operation objects neither in blocks. I visit open-explorer github and found that they get tx data by url using tx id (github link)
Do we have any similar api or something like this ?

[sschiessl-bcp]

Implement a dummy method for now, I can fill in / point you to the actual tx id calculation when you are done with all the rest.

[abitmore]

Result of get_block call has all the data needed to calculate txid. See bitshares/bitshares-core#587 (comment):

It's the first 20 bytes (40 chars in hex format) of SHA256 checksum of serialized transaction object (not signed_transaction object, so don't include signatures field).

[react-cat]

@abitmore @sschiessl-bcp Thanks, now I understand how to get it, I'll create an util getTransactionHash.

[react-cat]

@sschiessl-bcp, @abitmore After a lot of work I end up with a decision that it's impossible to get a same hash from objects on python or c++ and js, maybe some issues with how those languages write object to memory or something like that.

@sschiessl-bcp I will just create a dummy method for now as you told me before

tldr;

I showed how I tried to get a hash simmilar to c++ or python hash in js. If we are going to get hash via request don't waste your time on reading unless it is interesting for you

.

I tried to recreate methods that was provided by @abitmore and here what I end up with

show code

    sha256(str) {
        // Get the string as arraybuffer.
        let buffer = new TextEncoder("utf-8").encode(str);

        return crypto.subtle.digest("SHA-256", buffer).then((hash) => {
            return this.hex(hash);
        });
    }

    hex(buffer) {
        let digest = "";
        let view = new DataView(buffer);
        for(let i = 0; i < view.byteLength; i += 4) {
            // We use getUint32 to reduce the number of iterations (notice the `i += 4`)
            let value = view.getUint32(i);
            // toString(16) will transform the integer into the corresponding hex string
            // but will remove any initial "0"
            let stringValue = value.toString(16);
            // One Uint32 element is 4 bytes or 8 hex chars (it would also work with 4
            // chars for Uint16 and 2 chars for Uint8)
            let padding = "00000000";
            let paddedValue = (padding + stringValue).slice(-padding.length);
            digest += paddedValue;
        }

        return digest;
    }

    getTransactionHash(transaction) {
        let buffer = cloneDeep(transaction);
        delete buffer.signatures;
        this.sha256(JSON.stringify(buffer)).then((hash)=>{console.log(hash);});
    }

Then I though that the problem might be because of double quotes that appear around object properties after stringifying, so I modified getTransactionHash with regex:

    getTransactionHash(transaction) {
        let buffer = cloneDeep(transaction);
        delete buffer.signatures;
        buffer = JSON.stringify(buffer).replace(/"([^,{]+)"(:)/gm,"$1$2");
        this.sha256(buffer).then((hash)=>{console.log(hash);});
    }

So now object like const test = {property: value} after stringifying would be like {property:"value"} instead of {"property": "value"} but hash still were different.

Also crypto.subtle.digest accept only ArrayBuffer data type and there is no way to convert object to ArrayBuffer, the only one way is to convert object to string and then to ArrayBuffer...

This is the only way to get hash that I found and it require string as an input so I can't simply pass object. Currently I don't now how to create hash using JS that will be simmilar to hash from python or c++