Connecting wallet

Web

EIP1193

Passport is a valid EIP-1193 provider with support for all major RPC methods.

To create an EIP-1193 Passport provider:

const passportProvider = passport.connectEvm();

Once a provider is created, you can call various methods on it via the request function (which is protocol-agnostic), for example:

const accounts = await provider.request({ method: "eth_requestAccounts" });

EthersJS

You can also convert an EIP-1193 Provider into an ethers.js compatible provider.

import { ethers } from 'ethers';

const passportProvider = passport.connectEvm();

const provider = new ethers.providers.Web3Provider(passportProvider);

const accounts = await provider.request({ method: "eth_requestAccounts" });

const signer = provider.getSigner();

Wagmi

To integrate Passport with wagmi, thanks to the EIP-1193 standard, you can use the inject plugin.

import { http, createConfig } from 'wagmi';
import { mainnet, immutableZkEvm } from 'wagmi/chains';
import { injected } from 'wagmi/connectors';

export const config = createConfig({
  chains: [mainnet, immutableZkEvm],
  connectors: [injected()],
  transports: {
    [mainnet.id]: http(),
    [immutableZkEvm.id]: http(),
  },
});

In order for Passport to appear on the list of injected wallets, simply call the connectEvm() function.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'

const queryClient = new QueryClient()

export default function App() {
  useEffect(() => {
    if(!passport) return
    passport.connectEvm() // EIP-6963
  }, [])

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        // ...
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Provider Events

As per the EIP-1193 specification, the zkEVM provider exposes an on and removeListener function, which can be used to subscribe to and unsubscribe from events emitted by the zkEVM provider:

export type Provider = {
  on: (event: string, listener: (...args: any[]) => void) => void;
  removeListener: (event: string, listener: (...args: any[]) => void) => void;
};

Supported Events

Accounts Changed

The zkEVM provider will emit an accountsChanged event when the accounts available to the provider changes (for example, when eth_requestAccounts is called and the users wallet is initialised):

provider.on(ProviderEvent.ACCOUNTS_CHANGED, (accounts: string[]) => {
  console.log(accounts); // ['0x...']
});