Feat/accountview

[crypblizz8]

Overview

• Implement the UI Button for AccountButton and AccountView
• AccountButton displays: balance, ensAvatar or Zorb, address
• AccountView displays: same features as above + disconnect + copyClipboard functions

Considerations

• In getENSAvatar() and getBalance(), should look to add them to AccountCtrl so it is only fetched once. However this may apply to other functions throughout the codeBase so needs discussion.
• Consider loading states / completed state for copyClipboard + ens/zorb Avatars

Other

• Long commit list as I had to rebase + move my other PR here.

[cloudflare-workers-and-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	616a2a9
Status:	✅  Deploy successful!
Preview URL:	https://92c7df37.web3modal-dev.pages.dev
Branch Preview URL:	https://feat-accountview.web3modal-dev.pages.dev

View logs

[crypblizz8]

Overview of whole PR

• Create AccountButton
• Create AccountView
• Create zorb-ens component
• Altered data flow to be higher order in the lifecycle
• Added new SVGs
• Added tinycolor2 package

Recent Changes from last PR check

DataFlow

• This was done by moving up onChange events higher in the order in wagmiHelpers with getBalance and getENSAvatar with a Promise.all
• This will provide initial state data
• In scenario of the change of accounts (I.e. Account 1 --> Account 2 on Metamask), onConnectorChange and sets the relevant state
• New data appears on AccountButton and AccountView (regardless if model is open)

SVG

• Reworked BACK_ICON and old CHEVRON into just CHEVRON
• Kept CLIPBOARD_BLUE as it is a necessary SVG with the blue circle. Can optimize later

Zora

• Installed on library (npm i tinycolor2) for Zorb Colors
• Disabled TS-lint on the document
• Used the rest from the Zora web-component-package

Learnings

• Make this PR smaller next time.
• Consider the higher order data flow from beginning.

[xzilja]

All items marked red need to become components i.e

• [x] w3m-address needs to to use existing text component, and utilise format address function
• [x] w3m-balance needs to use existing text component and expose prop for token icon
• [x] w3m-round-button needs to allow for icon and onClick action. Also add hover effect to it as with other buttons