UX Multichain: Added Footer to the home screen

[NidhiKJha]

This PR is to add the footer

• Fixes #1244

Screenshots/Screencaps

Screen.Recording.2023-09-06.at.2.49.36.PM.mov

Manual Testing Steps

Pre-merge author checklist

• I've clearly explained:
  • What problem this PR is solving
  • How this problem was solved
  • How reviewers can test my changes
• Sufficient automated test coverage has been added

Pre-merge reviewer checklist

• Manual testing (e.g. pull and build branch, run in browser, test code being changed)
• PR is linked to the appropriate GitHub issue
• IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

[SaraCheikh]

Hi @NidhiKJha this looks good!! a small detail on the global actions modal:

-The cells/buttons, are actually full width (modal doesn't have lateral padding), so on hover state we wouldn't see any padding.

[NidhiKJha]

Hi @NidhiKJha this looks good!! a small detail on the global actions modal:

-The cells/buttons, are actually full width (modal doesn't have lateral padding), so on hover state we wouldn't see any padding.

@SaraCheikh I have added the select action modal updates here #20755

[darkwing]

Wow, this is a great start! A few things I noticed:

1. Onboarding

I'm seeing the bottom bar during the end of onboarding:

We should hide this until onboarding is completed.

2. When clicking "send", I don't see the bottom bar

I think we will want to keep the bottom bar during sending, but maybe that's a product decision cc: @kevinghim

[darkwing]

Good start!

[SaraCheikh]

I think we will want to keep the bottom bar during sending
@darkwing we only allow navigation between wallet and connections so display the bottom navbar only in the wallet screen and connections screen, in all other screens we hide.

[Ameralameri]

Approved

[darkwing]

This is awesome!

[darkwing]

@NidhiKJha What's the status on this?

[NidhiKJha]

@NidhiKJha What's the status on this?

@darkwing We have the test failures because of the notifications in the home page like the backup SRP reminder. So, we need to fix that issue so that it doesn't overlap with the footer placement. Design is in Progress for this. But I am blocked by this issue

[georgewrmarshall]

Code is looking good but I have a question for design regarding expanded view. What happens when we have a large list of assets? Is there some scrolling logic that keeps the footer in view? Does having the footer near the bottom of the screen make it harder to find? cc @kylefiedler

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[codecov]

Codecov Report

Attention: 18 lines in your changes are missing coverage. Please review.

Comparison is base (a6f058f) 68.61% compared to head (d1d5e41) 68.64%.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #20751      +/-   ##
===========================================
+ Coverage    68.61%   68.64%   +0.03%     
===========================================
  Files         1017     1017              
  Lines        40814    40833      +19     
  Branches     10900    10907       +7     
===========================================
+ Hits         28002    28028      +26     
+ Misses       12812    12805       -7     

Files	Coverage Δ
...-notifications/multiple-notifications.component.js	69.23% <ø> (ø)
ui/pages/routes/routes.component.js	44.10% <44.44%> (+0.02%)	⬆️
ui/components/multichain/app-footer/app-footer.js	62.16% <40.91%> (+58.46%)	⬆️

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

[metamaskbot]

Builds ready [d1d5e41]

• 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
  • common: 0, 1, 2, 3, 4, 5, 6
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1092 ± 342 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	80	154	105	19	9
		domContentLoaded	70	155	103	20	10
		load	82	1719	1092	713	342
		domInteractive	70	155	103	20	10

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 943 Bytes (0.01%)
• common: 0 Bytes (0.00%)