Connect

Every dapp interaction starts here. Before any RPC call can go out, you need an EIP-1193 provider and at least one connected address. This page covers both: how to discover which wallets are present, and how to request access once the user picks one. The connection established here is shared across the entire site.

Connect a wallet

[]

Wallets expose a so called Provider as defined in EIP-1193. This is the object that is then used to send json RPC requests to the wallet.

Wallet discovery

To discover installed wallets a dapp can listen for a provider announce events.

EIP-6963: Multi Injected Provider Discovery standardizes this process; each installed wallet announces itself by responding to a global window event:

1. The dapp listens with window.addEventListener("eip6963:announceProvider", …) and stores each event.detail ({ info, provider }) as wallets arrive.
2. The dapp dispatches new Event("eip6963:requestProvider") to prompt wallets that loaded before the listener was registered to re-announce.

And thats it. The connect panel above requests providers automatically on load. You can use the button to re-request providers, and view the announced information.

For Dapps

window.addEventListener("eip6963:announceProvider", (event) => {
  const { info, provider } = event.detail;
  console.log(info, provider);
});
 
const requestProviders = () => {
  window.dispatchEvent(new Event("eip6963:requestProvider"));
};

import { useConnectors } from 'wagmi';
 
const myApp = () => {
  const { connectors, connect } = useConnectors();
 
  return (
    <div>
      {connectors.map((connector) => (
        <button key={connector.id} onClick={() => connect({ connector })}>
          {connector.name}
        </button>
      ))}
    </div>
  );
};

For Wallets

let info: EIP6963ProviderInfo;
let provider: EIP1193Provider;
 
const announceEvent: EIP6963AnnounceProviderEvent = new CustomEvent(
  "eip6963:announceProvider",
  { detail: Object.freeze({ info, provider }) }
);
 
const announce = () => window.dispatchEvent(announceEvent);
 
announce();
window.addEventListener("eip6963:requestProvider", () => announce());

Other transports

Not all wallets are capable of browser context injection. For example mobile wallets often use a QR code flow for connecting to apps. A few of these protocols exist:

• WalletConnect is the most widely used form of transport. For use in apps & wallets it requires setting up an account via WalletConnect Cloud.
• Open Lavatory is an newer privacy-first transport, it uses WebRTC and public signaling to establish an encrypted peer-to-peer connection.