Consensus transaction uses default view about explorer HOT 11 CLOSED

I want to work on it. Please assign it to me.

from explorer.

You got it @MohdImran001

from explorer.

I am thinking to show only a few letters of proof and adding a button next to it. When the user clicks this button then it will show the full proof. Something like this:- https://scrn.li/56XrbO14RzU0rp

from explorer.

I have made some changes, you can see them here https://scrn.li/99IlKjK3feVO7t. I want to know which elements should be made clickable and what they will do when the user clicks them.

from explorer.

Hey @MohdImran001 it looks like those links are 404'd now, could you attach the images to a GitHub comment?

from explorer.

I am really sorry for that. Here is the screenshot :-

from explorer.

@MohdImran001 No worries! Thanks for sharing that. It definitely looks a bit better than it does currently, but I think maybe the proof section should have a bit more visual indication that it's being truncated. I'm not sure what that should be though. And the "members" list could probably look better as a list with a line break after each item, in bullet points or something.

If you have some code I'd love to take a look!

@allenan any thoughts? Maybe we should get some input from design?

from explorer.

To provide more visual indication, I think we can add a show full button with a nice icon next to the proof content.

In pages/TxnView.js :- line 80 - 94
I am wrapping the values in p tag and using the key as className to easily apply CSS on it.

          return (
            <Descriptions bordered>
              {Object.entries(txn).map(([key, value]) => {
                return (
                  <Descriptions.Item label={key} key={key} span={3}>
                    <p className={key}>
                      {typeof value === 'object' ? value.map(member => animalHash(member)).join(', ')  : value}
                    </p>
                  </Descriptions.Item>
                )
              })}
            </Descriptions>
          )

In Explorer.css, I added the following code to truncate the length of proof and members followed by ellipses.

.ant-descriptions-item-content p {
  display: table-cell;
}

.proof,
.members {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60ch;
}

from explorer.

Hii @allenan and @danielcolinjames. I'd love to get some feedback about my code. Please review my code and let me know what should I do next. I am very excited about it :D

from explorer.

Hey @MohdImran001, sorry for the slow response. Love that you're excited to help make the Explorer better! 😄

If it's possible, could you push your code up to your copy of the repo (or just somewhere on GitHub, as a PR, or wherever is convenient) so I can check it out and run it locally? I'm having a hard time picturing how it'll work just from the example above and that would make it easier for me to understand.

Thanks!

from explorer.

Fixed by #123

from explorer.