Enhancement: Account Center Updates

[leightkt]

Description

Update Account Center default location, animation, and position of components.

Loom video of testing

PLEASE NOTE- Checklist must be complete prior to review.

Checklist

• Increment the version field in package.json of the package you have made changes in following semantic versioning and using alpha release tagging
• Check the box that allows repo maintainers to update this PR
• Test locally to make sure this feature/fix works
• Run yarn check-all to confirm there are not any associated errors
• Confirm this PR passes Circle CI checks
• Add or update relevant information in the documentation

(docs update for default position included in kit-docs upgrade)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
web3-onboard-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 18, 2023 5:23pm

[socket-security]

New dependency changes detected. Learn more about Socket for GitHub ↗︎

---

👍 No new dependency issues detected in pull request

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

Pull request alert summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

---

📊 Modified Dependency Overview:

⬆️ Updated Package	Version Diff	Added Capability Access	+/- Transitive Count	Publisher
@web3-onboard/core@2.15.5	2.18.1-alpha.2...2.15.5	None	+0/-0	cmeisl

[Adamj1232]

Should AC be displaying as micro by default?
By adding a bit of z-index to the minimized AC the animation of the Maximized leaving looks a bit cleaner. Doesnt have to be z-index but I think we can clean up that animation a tidbit.

[leightkt]

@Adamj1232 added some z-index! I think the animation looks better- good call!
@gesquinca should the accountCenter be micro (just the icons) by default?

[Adamj1232]

Since this is changing the default way core displays I am thinking we should make this a minor version bump

[Adamj1232]

As this is going to change the default behavior for dapps who use account center currently - which could be frustrating - how can we note this change is breaking...Maybe something big on the top of the readme for this specific release(or maybe the next few) with steps to get back to the previous default behavior for AccountCenter (just a code snip of init options for relocating). Any ideas @leightkt @aaronbarnardsound @gesquinca ?

[leightkt]

@Adamj1232 I wouldn't classify this as a breaking change- things will still load, the default location has just changed. But yes we can add instructions for how to reset back to the default location on the release- probably a good idea.

[Adamj1232]

@Adamj1232 I wouldn't classify this as a breaking change- things will still load, the default location has just changed. But yes we can add instructions for how to reset back to the default location on the release- probably a good idea.

Sweet, I think it will be helpful! Agreed it won't break the build - unless the have you test for position or layout but breaking changes in ui lib development would also include changes to design systems. The default position to a component would fall under this. As most uses of AC are in the default position this change would break the design of those apps.

[leightkt]

@Adamj1232 I wouldn't classify this as a breaking change- things will still load, the default location has just changed. But yes we can add instructions for how to reset back to the default location on the release- probably a good idea.

Sweet, I think it will be helpful! Agreed it won't break the build - unless the have you test for position or layout but breaking changes in ui lib development would also include changes to design systems. The default position to a component would fall under this. As most uses of AC are in the default position this change would break the design of those apps.

Ahhhhh Super helpful to know! I was thinking of a breaking change in terms of a backend library... but that makes total sense!

[gesquinca]

Should AC be displaying as micro by default?

@Adamj1232 yes, this is the plan going forward.

As this is going to change the default behavior for dapps who use account center currently - which could be frustrating - how can we note this change is breaking...Maybe something big on the top of the readme for this specific release(or maybe the next few) with steps to get back to the previous default behavior for AccountCenter (just a code snip of init options for relocating). Any ideas @leightkt @aaronbarnardsound @gesquinca ?

@Adamj1232 100% on this. These changes should be accompanied by some documentation so users can display account center in the old way if they wish to do so.

[gesquinca]

@leightkt Seems like we lost the ability to close Account Center panel when clicking outside. We definitely want to keep that. Could you double-check this is the case?

[leightkt]

@Adamj1232 Included a warning at the top of the core readme and the core module page in docs. I figure after a month or so we can move further down the page.

[Adamj1232]

Looks good! Nice work!!