![\"mipd](\"https://github.com/wagmi-dev/mipd/blob/main/.github/mipd-dark-hug.svg\")
\n \n \n
\n TypeScript Utilities for EIP-6963: Multi Injected Provider Discovery\n
\n\n## Contents\n\n- [Install](#install)\n- [Store](#store)\n- [Utilities](#utilities)\n - [`requestProviders`](#requestproviders)\n - [`announceProvider`](#announceprovider)\n- [`window` Type Polyfill](#window-polyfill)\n- [Types](#types)\n- [Configuration](#configuration)\n\n## Install\n\n```bash\nnpm i mipd\n```\n\n```bash\npnpm add mipd\n```\n\n```bash\nyarn add mipd\n```\n\n## Store\n\nThe MIPD Store stores the Providers that have been emitted by a Wallet (or other source), and provides a way to subscribe to the store and retrieve the Providers.\n\n### Overview\n\n```ts\nimport { createStore } from 'mipd'\n\n// Set up a MIPD Store, and request Providers.\nconst store = createStore()\n\n// Subscribe to the MIPD Store.\nstore.subscribe(providerDetails => {\n console.log(providerDetails)\n // => [EIP6963ProviderDetail, EIP6963ProviderDetail, ...]\n})\n\n// Retrieve emitted Providers.\nstore.getProviders()\n// => [EIP6963ProviderDetail, EIP6963ProviderDetail, ...]\n\n// Find a Provider Detail.\nstore.findProvider({ rdns: 'com.example' })\n// => EIP6963ProviderDetail | undefined\n\n// Clear the store, including all Providers.\nstore.clear()\n\n// Reset the store, and emit an event to request Providers.\nstore.reset()\n\n// Destroy the store, and remove all Providers and event listeners.\nstore.destroy()\n```\n\n### Usage\n\n#### Vanilla JS\n\n```tsx\nimport { useSyncExternalStore } from 'react'\nimport { createStore } from 'mipd'\n\nconst store = createStore()\n\nlet providers = store.getProviders()\nstore.subscribe(providerDetails => (providers = providerDetails))\n```\n\n#### React\n\n```tsx\nimport { useSyncExternalStore } from 'react'\nimport { createStore } from 'mipd'\n\nconst store = createStore()\n\nfunction Example() {\n const providers = useSyncExternalStore(store.subscribe, store.getProviders)\n // ...\n}\n```\n\n#### Svelte\n\n```html\n\n\n\n```\n\n#### Vue\n\n```html\n\n\n\n```\n\n### API\n\n#### createStore()\n\nCreates a MIPD Store, and emits an event to request Providers from the Wallet(s).\n\n```ts\nconst store = createStore()\n```\n\n#### store.subscribe(listener, args)\n\nSubscribes to the MIPD Store, and returns a function to unsubscribe.\n\n```ts\nconst unsubscribe = store.subscribe(providers => {\n console.log(providers)\n // => [EIP6963ProviderDetail, EIP6963ProviderDetail, ...]\n})\n```\n\n**Definition**\n\n```ts\nexport type Listener = (\n // The updated Providers store.\n providerDetails: EIP6963ProviderDetail[],\n meta?: {\n // The Providers that were added to the store.\n added?: EIP6963ProviderDetail[]\n // The Providers that were removed from the store.\n removed?: EIP6963ProviderDetail[]\n },\n) => void\n\nfunction subscribe(\n // The listener function.\n listener: Listener, \n args?: { \n // If `true`, the listener will be called immediately with the stored Providers.\n emitImmediately?: boolean \n }\n): () => void // Returns an unsubscribe function.\n```\n\n#### store.getProviders()\n\nReturns the current Providers.\n\n```ts\nconst providers = store.getProviders()\n// => [EIP6963ProviderDetail, EIP6963ProviderDetail, ...]\n```\n\n**Definition**\n\n```ts\nfunction getProviders(): EIP6963ProviderDetail[]\n```\n\n#### store.findProvider(args)\n\nFinds a provider detail by its RDNS (Reverse Domain Name Identifier).\n\n```ts\nconst provider = store.findProvider({ rdns: 'com.example' })\n```\n\n**Definition**\n\n```ts\nfunction findProvider(args: { \n // The RDNS of the Provider Detail to find.\n rdns: string \n}): EIP6963ProviderDetail | undefined\n```\n\n#### store.clear()\n\nClears the store, including all Providers.\n\n```ts\nstore.clear()\n```\n\n**Definition**\n\n```ts\nfunction clear(): void\n```\n\n#### store.reset()\n\nResets the store, and emits an event to request Providers from the Wallet(s).\n\n```ts\nstore.reset()\n```\n\n**Definition**\n\n```ts\nfunction reset(): void\n```\n\n#### store.destroy()\n\nDestroys the store, and removes all Providers and event listeners.\n\n```ts\nstore.destroy()\n```\n\n**Definition**\n\n```ts\nfunction destroy(): void\n```\n\n## Utilities\n\n### requestProviders\n\nThe `requestProviders` utility emits an event to request Providers from the Wallet(s). It returns an `unsubscribe` function to clean up event listeners.\n\n```ts\nimport { requestProviders } from 'mipd'\n\nlet providers = []\n\nconst unsubscribe = requestProviders(providerDetail => providers.push(providerDetail))\n```\n\n**Definition**\n\n```ts\nfunction requestProviders(\n // The listener.\n listener: (providerDetail: EIP6963ProviderDetail) => void\n// Unsubscribe function to clean up the listener.\n): () => void\n```\n\n### announceProvider\n\nThe `announceProvider` utility emits an event to announce a Provider to the Wallet(s), and also listen for incoming requests. It returns an `unsubscribe` function to clean up event listeners.\n\n```ts\nimport { announceProvider } from 'mipd'\n\nconst unsubscribe = announceProvider({\n info: {\n icon: 'https://example.com/icon.png',\n name: 'Example',\n rdns: 'com.example',\n uuid: '00000000-0000-0000-0000-000000000000'\n },\n provider: new EIP1193Provider()\n})\n```\n\n**Definition**\n\n```ts\nfunction requestProviders(\n // The EIP-1193 Provider and Provider Info.\n detail: EIP6963ProviderDetail\n// Unsubscribe function to clean up the listener.\n): () => void\n```\n\n## `window` Polyfill\n\nBy importing the `mipd/window` Polyfill, the types on `window.addEventListener` will be inferred to include the `EIP6963AnnounceProviderEvent` and `EIP6963RequestProviderEvent` types.\n\n```ts\nimport 'mipd/window'\n\nwindow.addEventListener(\n 'eip6963:announceProvider'\n // ^? 'eip6963:announceProvider' | 'eip6963:requestProvider' | 'click' | ...\n\n event => {\n // ^? EIP6963AnnounceProviderEvent\n\n event.type\n // ^? 'eip6963:announceProvider'\n event.detail\n // ^? EIP6963ProviderDetail\n event.detail.info\n // ^? EIP6963ProviderInfo\n event.detail.provider\n // ^? EIP1193Provider\n }\n)\n\nwindow.addEventListener(\n 'eip6963:requestProvider'\n // ^? 'eip6963:announceProvider' | 'eip6963:requestProvider' | 'click' | ...\n\n event => {\n // ^? EIP6963RequestProviderEvent\n\n event.type\n // ^? 'eip6963:requestProvider'\n }\n)\n```\n\n## Types\n\n### EIP6963ProviderDetail\n\nEvent detail from `eip6963:announceProvider`.\n\n#### Import\n\n```ts\nimport { type EIP6963ProviderDetail } from 'mipd'\n```\n\n#### Definition\n\n```ts\nexport interface EIP6963ProviderDetail