{"id":28425294,"url":"https://github.com/metamask/vite-react-ts-eip-6963","last_synced_at":"2025-06-26T07:31:24.468Z","repository":{"id":216212230,"uuid":"739041872","full_name":"MetaMask/vite-react-ts-eip-6963","owner":"MetaMask","description":"Discover Multi Injected Providers with EIP-6963 in a ViteJS using React + TypeScript ","archived":false,"fork":false,"pushed_at":"2024-09-17T22:05:38.000Z","size":399,"stargazers_count":28,"open_issues_count":3,"forks_count":27,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-05T10:50:30.419Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MetaMask.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":"metamask","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2024-01-04T16:30:10.000Z","updated_at":"2025-04-14T17:55:58.000Z","dependencies_parsed_at":"2024-01-11T05:01:22.999Z","dependency_job_id":"983f44f3-29d6-452b-887c-ef5bc390b348","html_url":"https://github.com/MetaMask/vite-react-ts-eip-6963","commit_stats":null,"previous_names":["metamask/vite-react-ts-eip-6963"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MetaMask/vite-react-ts-eip-6963","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MetaMask%2Fvite-react-ts-eip-6963","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MetaMask%2Fvite-react-ts-eip-6963/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MetaMask%2Fvite-react-ts-eip-6963/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MetaMask%2Fvite-react-ts-eip-6963/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MetaMask","download_url":"https://codeload.github.com/MetaMask/vite-react-ts-eip-6963/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MetaMask%2Fvite-react-ts-eip-6963/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262022154,"owners_count":23246268,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-05T10:36:53.175Z","updated_at":"2025-06-26T07:31:24.462Z","avatar_url":"https://github.com/MetaMask.png","language":"TypeScript","funding_links":["https://opencollective.com/metamask"],"categories":[],"sub_categories":[],"readme":"To run this repo:\n\n1. ensure you have one or more wallet extensions installed in your browser\n2. Run `npm install`\n3. Run `npm run build` (if you make any changes or would like to ensure there are no build errors)\n4. Run `npm run dev` to run the app locally\n\n# A Guide to EIP-6963 for Developers\n\nThis article will fast track your understanding of EIP-6963, answer questions about how to implement, and provide example code for those who'd like to skip the chit chat.\n\nGitHub Demo Repo: [vite-react-ts-eip-6963](https://github.com/MetaMask/vite-react-ts-eip-6963)\n\nThe Example code repo above will help you create a simple implementation of EIP-6963 for detecting multiple injected providers (browser installed wallets (Externally Owned Accounts)) using ViteJS React + TypeScript.\n\nThe crux of what we will be doing is implementing the interfaces outlined in the EIP and listening to `eip6963:announceProvider` events in our dapp and storing the returned providers so they can be used anywhere and at anytime in our dApp giving us the ability to  distinguish between providers.\n\nHere is a preview of what we will build:\n\n![EIP-6963 React Demo](https://imgur.com/j79GvQ9.gif)\n\n## The EIP-6963 Abstract\n\n\u003e An alternative discovery mechanism to `window.ethereum` for [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) providers which **_supports discovering multiple injected Wallet Providers_** in a web page using Javascript’s window events.\n\nBefore trying to understand any EIP, read and fully understand the [abstract](https://eips.ethereum.org/EIPS/eip-6963#abstract) (Quoted above), [motivation](https://eips.ethereum.org/EIPS/eip-6963#motivation), and do a full read through even if there are aspects that you don't understand. \n\n\u003e Note: If you don't understand any part, you can get further information through sites like Ethereum Magicians ([EIP-6963 MIPD](https://ethereum-magicians.org/t/eip-6963-multi-injected-provider-discovery/14076)) where you can get additional context from the authors and the community on most EIPs. \n\nIt would also be helpful to understand [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193).\n\nIMO, the most important line from the [EIP-6963 abstract](https://eips.ethereum.org/EIPS/eip-6963#abstract) is:\n\n**_\"An alternative discovery mechanism to `window.ethereum` for EIP-1193 providers\"_**\n\nImmediately this tells me that EIP-6963's Multi Injected Provider Discovery proposal aims to introduce a different approach or method for **discovering and interacting with EIP-1193 providers (in this case, Ethereum wallet providers)** in contrast to the existing method relying on the `window.ethereum` object.\n\nAs a developer with `window.ethereum` littered throughout my dapps and the UX issues that come with the older approach, they have my attention.\n\nHopefully this info has helped us to frame our thinking as we progress through the EIP and start to implement this much better way of detecting and connecting to wallets.\n\n## Issues Predating EIP-6963\n\nIn Ethereum decentralized applications (dApps), wallets traditionally expose their APIs using a JavaScript object known as 'the Provider.' The initial EIP created to standardize this interface was EIP-1193, and conflicts have risen among different wallet implementations. While EIP-1193 aimed to establish a common convention, the user experience suffered due to race conditions caused by wallets injecting their providers (clobbering) window's (Ethereum Object). This has been a huge criticism of Web3 UX and its shortcomings around wallet onboarding and connection. These race conditions resulted in multiple wallet extensions enabled in the same browser having conflicts, where the last injected provider typically took precedence.\n\nBefore EIP-6963, we had an unofficial standard through EIP-1193. Before it, a common convention in Ethereum dApps was for wallets to expose their API via a JavaScript object in the web page called 'the Provider.' Historically, Provider implementations had exhibited conflicting interfaces and behaviors between wallets. EIP-1193 formalized an Ethereum Provider API to promote wallet interoperability. The API was designed to be minimal, event-driven, and agnostic of transport and RPC protocols, and easily extended by defining new RPC methods and message event types. Although it provided a common convention for wallets to expose their API, user experience still suffered as a wallet would inject its provider into your browser window (Ethereum Object), causing race conditions. Having multiple wallet extensions installed meant that the last one to inject its provider typically was the one that would be detected and available for use.\n\nEIP-5749 attempted to solve this issue with a window.evmprovider solution, and was a step in the right direction but ultimately was not adopted by enough wallets to solve our UX issue. This is where we end up with EIP 6963 bringing a standard to propose a way of doing Multi Injected Provider Discovery.\n\n## What you need to know\n\nAs a developer, the first thing you should do in order to get familiar with [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963), is to understand the initial motive, basic description, and more importantly the (TypeScript) interfaces and objects needed to implement this new approach.\n\n## Implementing EIP-6963 in a ViteJS React + TS Application\n\nThe Provider MUST implement and expose the interfaces defined in the EIP. Let's review them real quick, i have also provided links to each section of the original EIP for reference.\n\n[Provider Info](https://eips.ethereum.org/EIPS/eip-1193#request)\n\n\u003e Each Wallet Provider will be announced with the following interface:\n\n```ts=\n/**\n * Represents the assets needed to display a wallet\n */\ninterface EIP6963ProviderInfo {\n  uuid: string;\n  name: string;\n  icon: string;\n  rdns: string;\n}\n```\n\n[Provider Detail](https://eips.ethereum.org/EIPS/eip-1193#provider-detail)\n\n\u003e used as a composition interface to announce a Wallet Provider and related metadata about the Wallet Provider\n\n```ts=\ninterface EIP6963ProviderDetail {\n  info: EIP6963ProviderInfo;\n  provider: EIP1193Provider;\n}\n```\n\n[Announce](https://eips.ethereum.org/EIPS/eip-1193#announce-and-request-events)\n\n\u003e The `EIP6963AnnounceProviderEvent` interface MUST be a `CustomEvent` object with a `type` property containing a string value of `eip6963:announceProvider` and a detail property with an object value of type `EIP6963ProviderDetail`.\n\n```ts=\n// Announce Event dispatched by a Wallet\ninterface EIP6963AnnounceProviderEvent extends CustomEvent {\n  type: \"eip6963:announceProvider\";\n  detail: EIP6963ProviderDetail;\n}\n```\n\n[Request Events](https://eips.ethereum.org/EIPS/eip-1193#announce-and-request-events)\n\n\u003e The `EIP6963RequestProviderEvent` interface MUST be an Event object with a type property containing a string value of `eip6963:requestProvider`.\n\n```ts=\n// Request Event dispatched by a DApp\ninterface EIP6963RequestProviderEvent extends Event {\n  type: \"eip6963:requestProvider\";\n}\n```\n\nWith these interfaces defined for us, we can spin up a ViteJS React + TypeScript application and update the `src/vite-env.d.ts` with those interfaces:\n\n### vite-env.d.ts\n\n```ts=\n/// \u003creference types=\"vite/client\" /\u003e\n\ninterface EIP6963ProviderDetail {\n  info: EIP6963ProviderInfo;\n  provider: EIP1193Provider;\n}\n\ninterface EIP6963ProviderInfo {\n  walletId: string;\n  uuid: string;\n  name: string;\n  icon: string;\n}\n\ninterface EIP1193Provider {\n  isStatus?: boolean;\n  host?: string;\n  path?: string;\n  sendAsync?: (request: { method: string, params?: Array\u003cunknown\u003e }, callback: (error: Error | null, response: unknown) =\u003e void) =\u003e void\n  send?: (request: { method: string, params?: Array\u003cunknown\u003e }, callback: (error: Error | null, response: unknown) =\u003e void) =\u003e void\n  request: (request: { method: string, params?: Array\u003cunknown\u003e }) =\u003e Promise\u003cunknown\u003e\n}\n\ntype EIP6963AnnounceProviderEvent = {\n  detail:{\n    info: EIP6963ProviderInfo,\n    provider: EIP1193Provider\n  }\n}\n```\n\nWe can then create a `hooks` directory and add the two following files:\n\n### useSyncProviders.tsx\n\n```ts\nimport { useSyncExternalStore } from \"react\";\nimport { store } from \"./store\";\n\nexport const useSyncProviders = ()=\u003e useSyncExternalStore(store.subscribe, store.value, store.value)\n```\n\n### store.tsx\n\n```ts\ndeclare global{\n  interface WindowEventMap {\n    \"eip6963:announceProvider\": CustomEvent\n  }\n}\n\nlet providers: EIP6963ProviderDetail[] = []\n\nexport const store = {\n  value: ()=\u003eproviders,\n  subscribe: (callback: ()=\u003evoid)=\u003e{\n    function onAnnouncement(event: EIP6963AnnounceProviderEvent){\n      if(providers.map(p =\u003e p.info.uuid).includes(event.detail.info.uuid)) return\n      providers = [...providers, event.detail]\n      callback()\n    }\n    window.addEventListener(\"eip6963:announceProvider\", onAnnouncement);\n    window.dispatchEvent(new Event(\"eip6963:requestProvider\"));\n    \n    return ()=\u003ewindow.removeEventListener(\"eip6963:announceProvider\", onAnnouncement)\n  }\n}\n```\n\nWith this hook and store in place, we can now create a basic compnentat the following location: `src/components/DiscoverWalletProviders.tsx` this component will map over those discovered providers and list them using a button that handles connections to those wallets:\n\n### DiscoverWalletProviders.tsx\n\n```ts\nimport { useState } from 'react'\nimport { useSyncProviders } from '~/hooks/useSyncProviders'\nimport { formatAddress } from '~/utils'\n\nexport const  DiscoverWalletProviders = () =\u003e {\n  const [selectedWallet, setSelectedWallet] = useState\u003cEIP6963ProviderDetail\u003e()\n  const [userAccount, setUserAccount] = useState\u003cstring\u003e('')\n  const providers = useSyncProviders()\n  \n  const handleConnect = async(providerWithInfo: EIP6963ProviderDetail)=\u003e {\n    const accounts = await providerWithInfo.provider\n      .request({method:'eth_requestAccounts'})\n      .catch(console.error)\n      \n    if(accounts?.[0]){\n      setSelectedWallet(providerWithInfo)\n      setUserAccount(accounts?.[0])\n    }\n  }\n \n  return (\n    \u003c\u003e\n      \u003ch2\u003eWallets Detected:\u003c/h2\u003e\n      \u003cdiv\u003e\n        {\n          providers.length \u003e 0 ? providers?.map((provider: EIP6963ProviderDetail)=\u003e(\n            \u003cbutton key={provider.info.uuid} onClick={()=\u003ehandleConnect(provider)} \u003e\n              \u003cimg src={provider.info.icon} alt={provider.info.name} /\u003e\n              \u003cdiv\u003e{provider.info.name}\u003c/div\u003e\n            \u003c/button\u003e\n          )) :\n          \u003cdiv\u003e\n            there are no Announced Providers\n          \u003c/div\u003e\n        }\n      \u003c/div\u003e\n      \u003chr /\u003e\n      \u003ch2\u003e{ userAccount ? \"\" : \"No \" }Wallet Selected\u003c/h2\u003e\n      { userAccount \u0026\u0026\n        \u003cdiv\u003e\n          \u003cdiv\u003e\n            \u003cimg src={selectedWallet.info.icon} alt={selectedWallet.info.name} /\u003e\n            \u003cdiv\u003e{selectedWallet.info.name}\u003c/div\u003e\n            \u003cdiv\u003e({formatAddress(userAccount)})\u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      }\n    \u003c/\u003e\n  )\n}\n```\n\nIn the code above, as soon as the page is rendered we are logging the providers that we have detected. See lline 11. We can loop over these providers and create a button for each one, this button will be used to call `eth_requestAccounts`.\n\nFinally we can link to this coomponent from `src/App.tsx`\n\n### App.tsx\n\n```ts\nimport './App.css'\nimport { DiscoverWalletProviders } from '~/components/DiscoverWalletProviders'\n\nfunction App() {\n\n  return (\n    \u003c\u003e\n      \u003cDiscoverWalletProviders/\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default App\n\n```\n\nWith these few steps we have implemented EIP-6963 into a React application utilizing the TypeScript interfaces outlined in the EIP. At a basic level, that's it. You can see the source code here: [vite-react-ts-eip-6963\n](https://github.com/MetaMask/vite-react-ts-eip-6963)\n\n## Third Party Library Support\n\nThe easiest ways for developers building in Web3 to start using EIP-6963 (Multi Injected Provider Discovery) is by taking advantage of Third Party connection libraries (convenience libraries) that already support it. At the time of this writing, here is the list:\n\n- [Wallet Connect's Web3Modal (v3.1+)](https://docs.walletconnect.com/web3modal)\n- [WAGMI Release Candidate](https://beta.wagmi.sh)\n\n\nIf you are building Wallet COnnection Libraries you will be happy to know that incorporating MetaMask's SDK will ensure that the connection to MetaMask supports EIP-6963 for the detection of MetaMask\n\nYou can get the injected providers using Wagmi's [MIPD Store](https://github.com/wevm/mipd) With Vanilla JS and React examples. \n\n\nI believe the SDK, which also supports EIP-6963, will be integrated into Web3Onboard\nWalletConnect supports it via Web3Modal\nNot sure about Web3 React, but looks like we’re trying to integrate the SDK there as well.\n\n### The MetaMask SDK\n\nThe MetaMask SDK not only supports EIP-6963 on it's own for detecting MetaMask, but is also being integrated into Web3 Onboard (alpha) and WAGMI (coming soon)\n\nThe SDKs integration of EIP-6963 is for the efficient discovery and connection with the MetaMask Extension. This enhancement is pivotal in streamlining the user experience and promoting seamless interactions with the Ethereum blockchain. \n\n#### Automatic Detection\n\nThe MetaMask JS SDK now automatically checks for the presence of the MetaMask Extension that supports EIP-6963. This eliminates the need for manual configuration or detection methods, thereby simplifying the initial setup process for developers and users alike. \nConflict Resolution: By adhering to the standards set by EIP-6963, the SDK unambiguously identifies and connects to the MetaMask Extension. This approach effectively resolves potential conflicts that might arise with other wallet extensions, ensuring a more stable and reliable interaction for users. \n\n#### Enhanced User Experience\n\nThis update is designed to provide a more intuitive and frictionless experience for users. By automatically connecting to the MetaMask Extension, users can effortlessly engage with decentralized applications (dApps) without the worry of extension conflicts or compatibility issues. \n\n#### Commitment to Standards\n\nIncorporating EIP-6963 demonstrates our ongoing commitment to align with industry standards and best practices. This ensures that our tools and services remain at the forefront of technological advancements in the blockchain domain. \n\n#### Integration with third-party libraries\n\nYou can use convenience libraries (Link to our docs) that support wallet interoperability.\nWe recommend using the SDK for the best MetaMask user experience.\n\n## Community Support\n\t\t\nThe alternative discovery mechanism works for wallets that have implemented support for EIP-6963.\nThis includes MetaMask, Coinbase, Trust Wallet, OKX, and other major wallets.\n\nSee the [list of wallets that support EIP-6963](https://github.com/WalletConnect/EIP6963/blob/master/src/utils/constants.ts).\n\t\t\n## Backwards compatibility\n\nDapps that do not support EIP-6963 can still detect MetaMask using the `window.ethereum` provider.\nHowever, we recommend adding support to improve the user experience for multiple installed wallets.\nRead more about [EIP-6963 backwards compatibility](https://eips.ethereum.org/EIPS/eip-6963#backwards-compatibility).\n\n## Resources for Reading on EIP-6963\n\n[NextJS Version of this same App by the Wallet Connect team](https://github.com/WalletConnect/EIP6963)\n[Overview of EIP-6963: A Possible Solution for Multiple Wallet Conflict](https://mundus.dev/tpost/76iu0k1ot1-overview-of-eip-6963-a-possible-solution)\n[EIP-6963](https://eips.ethereum.org/EIPS/eip-6963)\n[EIP-6963 Standardizes Your Browser Wallet Experience](https://www.youtube.com/watch?v=SWmknCUwr3Y\u0026t=281s)\n\n### Additional Demos and Information\n\nWalletConnect has already done something like this, although it's not a tutorial, it's a Twitter thread and example code repo and demo:\nhttps://eip6963.org/\n\nNextJS example repo: https://github.com/WalletConnect/EIP6963\n\nTwitter Thread: https://twitter.com/boidushya/status/1714389971778552128\nEIP-6963 in MetaMask Extension\n\n\n\u003cEND OF ARTICLE EVERYTHING FROM HERE DOWN WILL BE REMOVED BEFORE PUBLISHING...\u003e\u003c/END\u003e\n\nBlog Post Action Items:\n\n[ ] Collaborate with the team to update technical docs related to the recent rollout of support for EIP-6963. At least, the following docs pages may need to be updated: \n[ ] Ethereum Provider API (maybe we could add a note to this page on provider discovery)\n[ ] Ethereum Provider API Reference (would be nice to add interactivity here, but not needed) \n[ ] HowTo Connect to MetaMask Convenience Libraries\n\n\nActionable items:\nGet to a lower level of detail in our docs. We want our reference documentation updated. \nCan we create a demo that can connect to multiple wallets and target which one is active or selected to use.\n\nUpdate any existing tutorials.\n\nWe have a developer call coming up. We want to touch briefly on this call and reintroduce MIPs in this call and wallet_revokePermissions in collab with portfolio dapp team.\n\nDocs pages that need to be updates:\n1. Tutorials 1 \u0026 2 on wallet?\n    2. We can update these tutorials in order to iincorporate implementing EIP-6963. \n3. Detect MetaMask should we promote the EIP-6963 method of detecting MM or should we show both?\n\n\nQuestions for Jiexi and ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetamask%2Fvite-react-ts-eip-6963","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetamask%2Fvite-react-ts-eip-6963","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetamask%2Fvite-react-ts-eip-6963/lists"}