feat: SIWE sign message section

[jpuri]

Description

Changes in message section for SIWE signature pages.

Related issues

Fixes: #24650

Manual testing steps

1. Enable re-designed pages for SIWE signatures
2. Go to test DAPP
3. Submit SIWE signature

Screenshots/Recordings

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[matthewwalsh0]

Could we achieve this easier with Intl.DateTimeFormat.format, plus it will be translatable?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format

There seems to be some existing usages in ui/helpers/utils/notification.util.ts.

[jpuri]

I tried that, but I was facing issues in displayed same value of day in different locales.

[matthewwalsh0]

My worry is what we have currently is partially re-implementing that, plus we have no translation or locale support at all.

Can you share the issue concerning locales?

[jpuri]

Please check this broken test case: https://app.circleci.com/pipelines/github/MetaMask/metamask-extension/84899/workflows/000a7574-6f5e-4e06-bc7b-fd50448a2c3d/jobs/3066779

[matthewwalsh0]

I've tested with that commit, and I believe the issue was just that we weren't explicit with the timezone.

Using the following in format date, the existing util and snapshot tests passed without any changes to them:

export const formatDate = (dateString: string) => {
  if (!dateString) {
    return dateString;
  }

  return DateTime.fromISO(dateString)
    .setLocale('en')
    .setZone('utc')
    .toFormat('dd LLLL yyyy, HH:mm');
};

We can of course choose to use the user's timezone and or their locale, but as a first step, this means we don't rely on any custom format logic and have easy configuration of the output.

[jpuri]

Good suggestion, I updated the PR.

[codecov]

Codecov Report

Attention: Patch coverage is 79.01235% with 17 lines in your changes missing coverage. Please review.

Project coverage is 65.62%. Comparing base (57b9c82) to head (9e42c01).
Report is 21 commits behind head on develop.

Files	Patch %	Lines
ui/selectors/selectors.js	50.00%	4 Missing ⚠️
app/scripts/controllers/app-state.js	0.00%	3 Missing ⚠️
...method-middleware/handlers/ethereum-chain-utils.js	50.00%	3 Missing ⚠️
app/scripts/metamask-controller.js	76.92%	3 Missing ⚠️
ui/store/actions.ts	33.33%	2 Missing ⚠️
...p/scripts/lib/createRPCMethodTrackingMiddleware.js	85.71%	1 Missing ⚠️
...confirm/info/personal-sign/siwe-sign/siwe-sign.tsx	93.33%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #24997      +/-   ##
===========================================
- Coverage    65.65%   65.62%   -0.02%     
===========================================
  Files         1368     1375       +7     
  Lines        54269    54544     +275     
  Branches     14192    14291      +99     
===========================================
+ Hits         35627    35794     +167     
- Misses       18642    18750     +108     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[metamaskbot]

Builds ready [de2aca0]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (124 ± 144 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	73	104	88	9	4
		domContentLoaded	9	14	11	1	1
		load	45	1430	124	300	144
		domInteractive	9	14	11	1	1

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 4.6 KiB (0.07%)
• common: 324 Bytes (0.01%)

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@types/luxon@3.4.2	None	0	120 kB	types

View full report↗︎

[metamaskbot]

Builds ready [9e42c01]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (49 ± 3 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	64	90	80	7	3
		domContentLoaded	9	22	12	4	2
		load	42	66	49	6	3
		domInteractive	9	22	12	4	2

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 4.42 KiB (0.06%)
• common: 159 Bytes (0.00%)