Update Connect to MetaMask with EIP-6963 TypeScript & React examples (M…

…etaMask#1247)

* Format code on Connect to MetaMask Index page

* Add Web3Onboard link to list of 3rd Party libs that support EIP-6963

* First draft of TypeScript only example

* Create a Vanilla TS and React + TS steps for connecting to Metamask with EIP-6963

* Update more of the Vanilla TypeScript example:

*With better explanations and comments removes where not needed

* add npm and bash commands

* Add Vanilla TypeSCript example as tabs

* Add import for tabs and tabItem theme

* Add React + TypeScript example

* update tab info

* remove semicolons for consistency

* Update React + TypeScript

* first pass edits (WIP)

* Simplify "why EIP-6963?"

* Expand EIP1193Provider explanation to include other wallets

* apply suggestions (still WIP)

* edits

* add setup step to react

* More active voice for Why EIP-6963

* vanilla should be lowercase

Co-authored-by: Joan E <[email protected]>

* edits and apply suggestions

* lowercase vanilla in what's new

---------

Co-authored-by: Alexandra Tran <[email protected]>
Co-authored-by: Christian Montoya <[email protected]>
Co-authored-by: Joan E <[email protected]>

docs/whats-new.md

@@ -9,6 +9,12 @@ The latest major MetaMask documentation updates are listed by the month they wer
 For a comprehensive list of recent product changes, visit the "Release Notes" section at the bottom
 of the [MetaMask developer page](https://metamask.io/developer/).
 
+## April 2024
+
+- Updated [how to connect to MetaMask](/wallet/how-to/connect) with vanilla TypeScript and React
+  TypeScript instructions.
+  ([#1247](https://github.com/MetaMask/metamask-docs/pull/1247))
+
 ## March 2024
 
 - Documented [Snaps `polyfills` configuration option](/snaps/reference/cli/options/#polyfills).

wallet/concepts/wallet-interoperability.md

@@ -10,6 +10,14 @@ A web dapp can integrate with multiple installed browser wallets simultaneously
 mechanism to the [`window.ethereum`](wallet-api.md#ethereum-provider-api) injected provider.
 This mechanism is enabled by using the standardized interfaces defined by EIP-6963.
 
+:::info Why EIP-6963?
+[EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) standardizes the interface for wallet providers, 
+but it results in conflicts when users have multiple wallets installed, due to how the provider
+object is injected. 
+This can cause issues with wallet discovery, user onboarding, and connecting. 
+The wallet discovery mechanism introduced by EIP-6963 solves these issues. 
+:::
+
 The following is a demo of the user experience of detecting multiple wallets, showing the data
 provided from each installed wallet: