{"id":11333,"library":"mipd","title":"EIP-6963 Multi-Injected Provider Discovery Utilities","description":"mipd (Multi Injected Provider Discovery) is a TypeScript utility library from the wevm (formerly wagmi-dev) ecosystem, designed to facilitate the discovery and management of EIP-6963 compliant Ethereum wallet providers within dapps. EIP-6963 standardizes how multiple injected wallets announce themselves via custom DOM events, moving beyond the single `window.ethereum` paradigm. Currently at version 0.0.7, mipd offers a reactive store (`createStore`) that accumulates announced `EIP6963ProviderDetail` objects and allows dapps to subscribe to updates or retrieve the current list of providers. It includes essential TypeScript types such as `EIP6963ProviderDetail` and `EIP6963AnnounceProviderEvent`, and also provides a `/window` polyfill for enhanced type inference on global event listeners. Its release cadence is likely tied to updates within the broader wevm stack and EIP-6963 evolution. mipd is a foundational component for building robust multi-wallet dapps, complementing libraries like wagmi and viem by abstracting EIP-6963 complexities.","status":"active","version":"0.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/wagmi-dev/mipd","tags":["javascript","eth","ethereum","dapps","wallet","web3","eip","6963","typescript"],"install":[{"cmd":"npm install mipd","lang":"bash","label":"npm"},{"cmd":"yarn add mipd","lang":"bash","label":"yarn"},{"cmd":"pnpm add mipd","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for type inference and declaration bundling; often optional for runtime but required for development builds.","package":"typescript","optional":true}],"imports":[{"note":"The primary entry point for creating an EIP-6963 provider store. mipd is an ESM-first library; CommonJS `require` might require bundler configuration or specific import paths (e.g., `mipd/dist/cjs`).","wrong":"const { createStore } = require('mipd');","symbol":"createStore","correct":"import { createStore } from 'mipd';"},{"note":"This is a TypeScript type definition. While importing as a value might work in some transpilers, using `import type` is the correct and tree-shakeable way to import types. It defines the structure of announced wallet providers.","wrong":"import { EIP6963ProviderDetail } from 'mipd';","symbol":"EIP6963ProviderDetail","correct":"import type { EIP6963ProviderDetail } from 'mipd';"},{"note":"This is a TypeScript type definition for the custom DOM event dispatched by EIP-6963 compliant wallets. Use `import type` for proper type-only imports.","wrong":"import { EIP6963AnnounceProviderEvent } from 'mipd';","symbol":"EIP6963AnnounceProviderEvent","correct":"import type { EIP6963AnnounceProviderEvent } from 'mipd';"},{"note":"This is a side-effect import that augments the global `Window` interface with EIP-6963 event types, allowing TypeScript to correctly infer types for `window.addEventListener` for `eip6963:announceProvider` and `eip6963:requestProvider` events. It should be imported early in your application's entry file.","symbol":"Global Window Types","correct":"import 'mipd/window';"}],"quickstart":{"code":"import { createStore } from 'mipd';\nimport type { EIP6963ProviderDetail } from 'mipd';\nimport 'mipd/window'; // Import to augment window types for EIP-6963 events\n\n// Create a new EIP-6963 provider store\nconst mipdStore = createStore();\n\n// Subscribe to provider changes (e.g., when a wallet announces itself or is removed)\nconst unsubscribe = mipdStore.subscribe((providers: EIP6963ProviderDetail[]) => {\n  console.log('EIP-6963 Providers updated:', providers);\n  if (providers.length > 0) {\n    console.log('First provider UUID:', providers[0].info.uuid);\n    console.log('First provider Name:', providers[0].info.name);\n    // You can now use providers[0].provider for interactions if needed\n  }\n});\n\n// Get current providers immediately\nconst initialProviders = mipdStore.getProviders();\nconsole.log('Initial EIP-6963 Providers:', initialProviders);\n\n// Example of how you might stop listening after some time (in a real app, this would be on unmount)\nsetTimeout(() => {\n  unsubscribe();\n  console.log('Unsubscribed from mipd store updates.');\n}, 10000);\n\n// In a React component (using React 18+ useSyncExternalStore):\n// import { useSyncExternalStore } from 'react';\n// import { createStore } from 'mipd';\n\n// const store = createStore();\n\n// function MyWalletConnector() {\n//   const providers = useSyncExternalStore(store.subscribe, store.getProviders);\n//   return (\n//     <div>\n//       <h2>Detected EIP-6963 Wallets:</h2>\n//       {providers.length === 0 ? (\n//         <p>No EIP-6963 wallets found.</p>\n//       ) : (\n//         <ul>\n//           {providers.map((providerDetail) => (\n//             <li key={providerDetail.info.uuid}>\n//               <img src={providerDetail.info.icon} alt={providerDetail.info.name} width=\"24\" height=\"24\" />\n//               {providerDetail.info.name} ({providerDetail.info.rdns})\n//             </li>\n//           ))}\n//         </ul>\n//       )}\n//     </div>\n//   );\n// }","lang":"typescript","description":"Demonstrates how to initialize the EIP-6963 store, subscribe to provider announcements, retrieve current providers, and includes a conceptual React example using `useSyncExternalStore`."},"warnings":[{"fix":"Refer to the `mipd` GitHub repository for changelogs and migration guides for each new release. Pin exact versions (`\"mipd\": \"0.0.7\"`) to avoid unexpected updates.","message":"As a 0.0.x version package, `mipd` is in early development. Minor and patch releases may introduce breaking changes without adhering to strict semantic versioning, particularly as the EIP-6963 standard itself evolves or as it integrates more deeply with other `wevm` libraries.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Add `import 'mipd/window';` at the top-level of your application's entry file (e.g., `main.ts` or `App.tsx`) to globally augment the `Window` interface with the necessary EIP-6963 event types.","message":"When using `mipd` with TypeScript, ensure you import the global window types via `import 'mipd/window';`. Without this side-effect import, TypeScript may not correctly infer the types for `window.addEventListener` when listening for `eip6963:announceProvider` events, leading to type errors.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Prefer `import` statements for `mipd`. If working in a CJS-only environment, ensure your bundler (e.g., Webpack, Rollup) is configured to correctly handle ESM imports, or explicitly target the CJS bundle if available (e.g., `require('mipd/dist/cjs/index.js')`).","message":"`mipd` primarily targets modern JavaScript environments and uses ES Modules (ESM). While it provides CommonJS (CJS) bundles, direct `require()` statements might behave differently or require specific bundler configurations, especially in older Node.js environments or complex build setups.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure your project explicitly installs a `typescript` version compatible with `mipd` (e.g., `npm install typescript@^5.0.4`). If using a lower version, you might encounter type-related issues.","message":"The `typescript` peer dependency, listed as `>=5.0.4`, is marked as optional in `mipd`'s `package.json`. While it's not strictly required at runtime, developing with `mipd` without a compatible TypeScript version can lead to compilation errors or incorrect type inferences in your project.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `import 'mipd/window';` to your application's entry file to ensure TypeScript recognizes the `EIP6963AnnounceProviderEvent` type for `CustomEvent` dispatched on `window`.","cause":"Attempting to access `event.detail` from an `eip6963:announceProvider` event without `mipd/window` global type augmentation.","error":"Property 'detail' does not exist on type 'Event'. Property 'detail' does not exist on type 'CustomEvent<any>'."},{"fix":"For projects that need to use CommonJS `require`, ensure your build tool correctly handles ESM imports from `node_modules`. Alternatively, if applicable, consider migrating to ESM or using dynamic `import('mipd')` within an `async` context.","cause":"`mipd` is an ESM-first package, and direct `require('mipd')` might not correctly resolve the `createStore` named export in some CommonJS environments without proper transpilation or explicit pathing.","error":"TypeError: createStore is not a function (in CommonJS environments)"},{"fix":"Verify that your project's `typescript` version meets the `mipd` peer dependency (`>=5.0.4`). Ensure `EIP6963ProviderDetail` is imported as a type (`import type { EIP6963ProviderDetail } from 'mipd';`). Review the `mipd` source or documentation for the exact `Listener` type signature.","cause":"Type incompatibility with `mipdStore.subscribe` listener function, often due to an outdated or incorrect `typescript` version, or incorrect type imports.","error":"TS2345: Argument of type '(providers: EIP6963ProviderDetail[]) => void' is not assignable to parameter of type 'Listener<EIP6963ProviderDetail[]>'."}],"ecosystem":"npm"}