Time display mode settings

[rahulbile]

Description:

Currently, the time displayed in-app for transactions is in 12 hour mode, some users may prefer to change it to 24 hour display mode

Motivation and Context:

The feature request was requested in #3600 and while doing this change, the display of dates across the app is refactored to have more control on formats and making sure its extensible in future easily

Types of changes:

Feature

Checklist:

• My code follows the code style of this project.
• I have reviewed and updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes where needed.
• All new and existing tests passed.
• My commits have been squashed into a concise set of changes.

[welcome]

⚡️ Thanks for opening this pull request! ⚡️
We use conventional commits to streamline the release process. Before your pull request can be merged, you should squash your commits and reword your commit messages to follow the conventional commit message format.
Examples of commit messages with semantic prefixes:

• fix(ui): ensure search input is cleared after submit
• feat(wallet): add new transaction detail view
• perf(channels): prevent double render in channel list
  Things that will help get your PR across the finish line:
• Run yarn lint locally to catch formatting errors earlier.
• Run yarn test locally to catch test failures early.
• Run yarn extract-messages locally to extract new transaction strings.
• Document any user-facing changes you've made.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

[mrfelton]

Nice one @rahulbile . A few comments/suggestions

[mrfelton]

Am seeing the following error in the console:

Warning: Failed prop type: Invalid prop value supplied to FormattedDateTime

Happens after sending an on chain transaction, whist it's in pending state:

It also seems to happen when the activity list first loads

[mrfelton]

Maybe this is what's causing the prop warning? What is title? Is it always a string or Date?

[rahulbile]

Yeah looks like in some cases its not a date, so have updated the value validation to be: PropTypes.any, will that be fine? Doing so the error does go away, shall we format the value before sending or any validation is fine?

[mrfelton]

I guess really the component supports dates passed as string (which is what item.title is). Probably should update component prop type definition to oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])

[rahulbile]

Yep, adding that works fine and also fixes the validation issue. Updated the PR

[mrfelton]

Tested ACK aae3838

[welcome]

Congrats on merging your first pull request! ⚡️⚡️⚡️