Document high-level MetaMask architecture (from a package/controller perspective)

[xinnanyemm]

Someone new to MetaMask might look at all of the repos that we have and (after they get over their initial shock) ask, how do all of these pieces fit together?

There are a few ways we could answer that question, but to start, we could create an architecture graph that includes the extension, mobile app, and packages that are used along the way (including core controllers, but also libraries like eth-sig-util). To provide another view, we could have a list below the graph which summarizes all of the packages with a short summary of the role that they play. Then we put both of these things in a new document.

[xinnanyemm]

Hey team! Please add your planning poker estimate with Zenhub @cryptodev-2s @Gudahtt @kanthesha @MajorLift @mikesposito

[Gudahtt]

For a past example of architecture documentation: https://github.com/MetaMask/metamask-extension#architecture

Lots of inaccuracies or misleading details in that diagram, but it's mostly correct and shows how the different processes interact

[Gudahtt]

Some ideas that would be nice to have for this:

• How does the wallet relate to our other packages? (just the important and direct connections, not exhaustively)
  • Maybe with more emphasis along lines that divide areas of responsibility between teams
• What is the process architecture for each wallet?
• How does the wallet communicate with the dapp?
• How do messages from dapps get processed?
• Which component handles state persistence and migrations?
• How/where is UI state managed?

It would be great to avoid getting into too much detail on each of these as well, so that the documentation is less likely to go stale as we change things.