mipd
TypeScript Utilities for EIP-6963: Multi Injected Provider Discovery
Contents
Install
npm i mipd
Store
The 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.
Overview
import { createStore } from 'mipd'
const store = createStore()
store.subscribe(providerDetails => {
console.log(providerDetails)
})
store.getProviders()
store.findProvider({ rdns: 'com.example' })
store.removeProvider({ rdns: 'com.example' })
store.clear()
store.reset()
store.destroy()
Usage
Vanilla JS
import { useSyncExternalStore } from 'react'
import { createStore } from 'mipd'
const store = createStore()
let providers = store.getProviders()
store.subscribe(_providers => (providers = _providers))
React
import { useSyncExternalStore } from 'react'
import { createStore } from 'mipd'
const store = createStore()
function Example() {
const providers = useSyncExternalStore(store.subscribe, store.getProviders)
}
Svelte
<script lang="ts">
import { createStore } from 'mipd'
import { readable } from 'svelte/store'
const store = createStore()
const providers = readable(store.getProviders(), store.subscribe)
</script>
Vue
<script setup lang="ts">
import { reactive } from 'vue'
import { createStore } from 'mipd'
const store = createStore()
const state = reactive({ providers: store.getProviders() })
store.subscribe(providers => (state.providers = providers))
</script>
API
createStore()
Creates a MIPD Store, and emits an event to request Providers from the Wallet(s).
const store = createStore()
store.subscribe(listener, args)
Subscribes to the MIPD Store, and returns a function to unsubscribe.
const unsubscribe = store.subscribe(providers => {
console.log(providers)
})
Definition
export type Listener = (
providerDetails: EIP6963ProviderDetail[],
meta?: {
// The Providers that were added to the store.
added?: EIP6963ProviderDetail[]
// The Providers that were removed from the store.
removed?: EIP6963ProviderDetail[]
},
) => void
function subscribe(
listener: Listener,
args?: {
// If `true`, the listener will be called immediately with the stored Providers.
emitImmediately?: boolean
}
): () => void
store.getProviders()
Returns the current Providers.
const providers = store.getProviders()
Definition
function getProviders(): EIP6963ProviderDetail[]
store.findProvider(args)
Finds a provider detail by its RDNS (Reverse Domain Name Identifier).
const provider = store.findProvider({ rdns: 'com.example' })
Definition
function findProvider(args: {
// The RDNS of the Provider Detail to find.
rdns: string
}): EIP6963ProviderDetail | undefined
store.removeProvider(args)
Removes a Provider Detail from the store.
store.removeProvider({ rdns: 'com.example' })
Definition
function removeProvider(args: {
// The RDNS of the Provider Detail to remove.
rdns: string
}): void
store.clear()
Clears the store, including all Providers.
store.clear()
Definition
function clear(): void
store.reset()
Resets the store, and emits an event to request Providers from the Wallet(s).
store.reset()
Definition
function reset(): void
store.destroy()
Destroys the store, and removes all Providers and event listeners.
store.destroy()
Definition
function destroy(): void
Utilities
requestProviders
The requestProviders
utility emits an event to request Providers from the Wallet(s). It returns an unsubscribe
function to clean up event listeners.
import { requestProviders } from 'mipd'
let providers = []
const unsubscribe = requestProviders(providerDetail => providers.push(providerDetail))
Definition
function requestProviders(
listener: (providerDetail: EIP6963ProviderDetail) => void
): () => void
announceProvider
The 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.
import { announceProvider } from 'mipd'
const unsubscribe = announceProvider({
info: {
icon: 'https://example.com/icon.png',
name: 'Example',
rdns: 'com.example',
uuid: '00000000-0000-0000-0000-000000000000'
},
provider: new EIP1193Provider()
})
Definition
function requestProviders(
detail: EIP6963ProviderDetail
): () => void
window
Polyfill
By importing the mipd/window
Polyfill, the types on window.addEventListener
will be inferred to include the EIP6963AnnounceProviderEvent
and EIP6963RequestProviderEvent
types.
import 'mipd/window'
window.addEventListener(
'eip6963:announceProvider'
event => {
event.type
event.detail
event.detail.info
event.detail.provider
}
)
window.addEventListener(
'eip6963:requestProvider'
event => {
event.type
}
)
Types
EIP6963ProviderDetail
Event detail from eip6963:announceProvider
.
Import
import type { EIP6963ProviderDetail } from 'mipd'
Definition
export interface EIP6963ProviderDetail<TProvider = Config['EIP1193Provider']> {
info: EIP6963ProviderInfo
provider: TProvider
}
EIP6963ProviderInfo
Metadata of the EIP-1193 Provider.
Import
import type { EIP6963ProviderInfo } from 'mipd'
Definition
export interface EIP6963ProviderInfo {
icon: string
name: string
rdns?: ... | (string & {})
uuid: string
}
EIP6963AnnounceProviderEvent
Event type to announce an EIP-1193 Provider.
Import
import type { EIP6963AnnounceProviderEvent } from 'mipd'
Definition
export interface EIP6963AnnounceProviderEvent<TProvider = DefaultProvider>
extends CustomEvent<EIP6963ProviderDetail<TProvider>> {
type: 'eip6963:announceProvider'
}
EIP6963RequestProviderEvent
Event type to request EIP-1193 Providers.
Import
import type { EIP6963RequestProviderEvent } from 'mipd'
Definition
export interface EIP6963RequestProviderEvent extends Event {
type: 'eip6963:requestProvider'
}
Configuration
In some cases you might want to tune the global configuration (ie. the EIP1193Provider
). To do this, the following configuration options are available:
Type | Default | Description |
---|
EIP1193Provider | import('viem').EIP1193Provider | The EIP-1193 Provider. |
Rdns | 'com.enkrypt' | 'io.metamask' | (string & {}) | Deterministic identifier for the Provider in the form of an rDNS (Reverse Domain Name Notation) |
Configuration options are customizable using declaration merging. Extend the Config
interface either directly in your code or in a d.ts
file (e.g. eip6963.d.ts
):
import type { EIP1193Provider } from './eip1193-provider'
declare global {
interface Config {
EIP1193Provider: EIP1193Provider
Rdns: 'com.myapp' | 'com.example' | (string & {})
}
}
Authors
License
MIT License