UX Snaps: Updated dapp connection state for connected snaps

[NidhiKJha]

This PR is to ensure that when the dapp is connected with a snap, the site connection icon should indicate a connection. Similarly, the currently connected site modal doesn't indicate that the site is connected.

• Fixes Update dapp connection state for accounts connected via Snaps (without connected accounts) #20792

Screenshots/Screencaps

After

Both Account and Snap are connected

Screen.Recording.2023-09-22.at.4.12.32.PM.mov

Only Snap Connected

Screen.Recording.2023-09-22.at.4.12.09.PM.mov

Manual Testing Steps

• Go to https://snaps.metamask.io/
• Connect a snap
• Open MetaMask in popup view, check if the connectivity circle is hollow green
• Click on the circle, the snap should be in the popover menu.
• For only snaps connected state, permissions should not be there in modal
• Go to https://app.walletchat.fun/
• Sign in using MetaMask
• Open MetaMask in popup view, check if the connectivity circle should be filled green
• Click on the circle, both the account and snap should be in the popover menu

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.

[eriknson]

Right now it looks like the website is connected with the website. Let's sync & and align on how to design this modal

[metamaskbot]

Builds ready [1f7872d]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): 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, 7
  • 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 (1811 ± 77 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	121	359	170	49	23
		domContentLoaded	1536	2004	1809	156	75
		load	1536	2057	1811	159	77
		domInteractive	1536	2004	1809	156	75

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

• background: 0 Bytes (0.00%)
• ui: 6.31 KiB (0.08%)
• common: 251 Bytes (0.01%)

[metamaskbot]

Builds ready [2ba5304]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): 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, 7
  • 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 (1716 ± 113 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	122	197	152	24	11
		domContentLoaded	1393	2116	1716	235	113
		load	1393	2116	1716	235	113
		domInteractive	1392	2116	1716	235	113

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

• background: 0 Bytes (0.00%)
• ui: 6.31 KiB (0.08%)
• common: 251 Bytes (0.01%)

[metamaskbot]

Builds ready [08f8edc]

• 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 (712 ± 364 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	84	156	103	17	8
		domContentLoaded	68	144	94	20	10
		load	79	1909	712	758	364
		domInteractive	68	144	94	20	10

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

• background: 0 Bytes (0.00%)
• ui: 6.28 KiB (0.08%)
• common: 251 Bytes (0.01%)

[vthomas13]

Looks great!