Fix transaction type text in TransactionDetailBox

[yrliou]

Resolves brave/brave-browser#19841

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

1. Try to transfer a NFT via brave://wallet
2. Check the function type is showing in the tx confirmation screen. (No need to confirm.)

A side note here, the type could be ERC721TransferFrom too depends on the NFT contract you are using.

[bbondy]

Would something like this work so we don't need to maintain a list over time?
https://stackoverflow.com/a/42172322

[yrliou]

@bbondy I think that was what we original using? Seems no longer working with the generated type.

[Douglashdaniel]

An easy way we could achieve this would be to use Object.keys()

So you could do const txKeys = Object.keys(TransactionType)

and then <DetailText>{txKeys[txType]}</DetailText>

[Douglashdaniel]

https://dmitripavlutin.com/access-object-keys-values-entries/#1-objectkeys-returns-keys

[yrliou]

Updated, thanks a lot @Douglashdaniel !

[Douglashdaniel]

Looks good!

[yrliou]

windows and linux failed at s3-upload which is irrelevant.

mac failed with RewardsContributionBrowserTest.SplitProcessOneTimeTip and RewardsContributionBrowserTest.SplitProcessorAutoContribution.

[srirambv]

Verification passed on

Brave	1.35.4 Chromium: 96.0.4664.55 (Official Build) nightly (arm64)
Revision	38cededc5d09b785d12203f1d3209aa6eb293e79-refs/branch-heads/4664@{#1090}
OS	macOS Version 12.0.1 (Build 21A559)

• Verified steps from PR description
• Verified transaction type is shown in details tab