[DDW-521] Display Transaction Metadata

[DominikGuzei]

This PR adds support for rendering transaction metadata:

Todos

• Add Japanese translations
• Discuss rendering implementation (vs. JSON.stringify as alternative)

Screenshots

Rendering nested maps:

Metadata maps can contain any metadata values (int, string, bytes, lists, maps) in keys AND values – simple scalars (int, string, bytes) are stringified and simply used as string-based keys. Compound types like lists and maps are not valid JSON keys, so they are saved under "key" property of the map (with a corresponding "value" property).

---

Testing Checklist

• Slack QA thread
• transactions with metadata should have a "show unmoderated metadata" link and do not render the metadata by default
• when clicking on "show unmoderated metadata" the warning + link should be replaced by the metadata itself
• transactions with / without metadata should render correctly

---

Test Cases

Scenario1 - Verify link for transaction metadata is present

Given that I have a Wallet fully synced
And it has past transaction history
And I navigate to wallet transactions
When I click to expand received transactions
Then I should see a header for transaction metadata
And I should see a link for show unmoderated content
And the unmoderated content should be hidden by default

Scenario 2 - Verify Link works correctly and expands to show content

Given that I have a Wallet fully synced
And it has past transaction history
And I am on the received transactions screen
And I see a header for transaction metadata
When I click on the link for unmoderated content
Then it should expand and show transaction metadata
And the warning + link should be replaced by the metadata itself

Scenario 3 - Verify that all transaction render correctly regardless of metadata

Given that I have a Wallet fully synced
And it has past transaction history
And I navigate to wallet transactions
When I click to expand received transaction
Then transactions with / without metadata should all render correctly

Wallet with metadata for testing
barely endorse vote squirrel rocket barrel meadow soft wheel cup income hamster work always country speed rocket person core protect evolve radio claim dish

Review Checklist

Basics

• PR has been assigned and has appropriate labels (feature/bug/chore, release-x.x.x)
• PR is updated to the most recent version of the target branch (and there are no conflicts)
• PR has a good description that summarizes all changes
• PR has default-sized Daedalus window screenshots or animated GIFs of important UI changes:
  • In English
  • In Japanese
• CHANGELOG entry has been added to the top of the appropriate section (Features, Fixes, Chores) and is linked to the correct PR on GitHub
• Automated tests: All acceptance and unit tests are passing (yarn test)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in development build (yarn dev)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in production build (yarn package / CI builds)
• There are no flow errors or warnings (yarn flow:test)
• There are no lint errors or warnings (yarn lint)
• There are no prettier errors or warnings (yarn prettier:check)
• There are no missing translations (running yarn manage:translations produces no changes)
• Text changes are proofread and approved (Jane Wild / Amy Reeve)
• Japanese text changes are proofread and approved (Junko Oda)
• UI changes look good in all themes (Alexander Rukin)
• Storybook works and no stories are broken (yarn storybook)
• In case of dependency changes yarn.lock file is updated

Code Quality

• Important parts of the code are properly commented and documented
• Code is properly typed with flow
• React components are split-up enough to avoid unnecessary re-renderings
• Any code that only works in main process is neatly separated from components

Testing

• New feature/change is covered by acceptance tests
• New feature/change is manually tested and approved by QA team
• All existing acceptance tests are still up-to-date
• New feature/change is covered by Daedalus Testing scenario
• All existing Daedalus Testing scenarios are still up-to-date

After Review

• Merge the PR
• Delete the source branch
• Move the ticket to done column on the YouTrack board
• Update Slack QA thread by marking it with a green checkmark

[nikolaglumac]

@DominikGuzei I don't see the metadata which is visible on the Explorer 😢
TX: https://explorer.cardano-testnet.iohkdev.io/en/transaction?id=4dc5093d26fdd8d82ba30615eda72d96b80ed28d3750d916ab1d3ab6fee4b4b3

Testnet Explorer:

Testnet Daedalus:

I have also picked up these errors:

[DominikGuzei]

@nikolaglumac these issues should be fixed now 👍

[nikolaglumac]

@DominikGuzei please work with @darko-mijic on getting the final text copy and Japanese translations. We need this merged by the end of the day tomorrow 🙏

PS. @darko-mijic this PR is important for Fund3!

[gabriela-ponce]

@DominikGuzei Here are a few issues on the latest build (16293):

• When the metadata is expanded, all the data is displayed outside the container. Check this screenshot.
• The space between "Transaction metadata" and the rest of the content is smaller than the rest. Check this screenshot.

[DominikGuzei]

@gnpf the second issue is fixed 👍
I could not reproduce "When the metadata is expanded, all the data is displayed outside the container" on the latest build – can you re-test?

[nikolaglumac]

@gnpf @a-rukin @ManusMcCole @mioriohk please test this one 🙏

[nikolaglumac]

When the metadata is expanded, all the data is displayed outside the container. Check this screenshot.

@gnpf I have fixed this ☝️

[alexander-rukin]

@DominikGuzei this padding feels a bit smaller than 20px
Is this an illusion?

[nikolaglumac]

@DominikGuzei this padding feels a bit smaller than 20px
Is this an illusion?

I have checked this. This is an illusion. It is all OK!

[nikolaglumac]

Nice work @DominikGuzei 👍

[alexander-rukin]

LGTM

[gabriela-ponce]

Looks good 🎉

[DominikGuzei]

Great work everyone 🎉