Create Wallets with RPC Provider

Sometimes you have a RPC provider such as Web3Auth, Magic, or MetaMask that can sign transactions over a connection, and you want to use them as the owner of your AA wallet.

An Example with Magic

Say you want to use Magic to handle social logins, but you want to use ZeroDev to create AA wallets for your users.

Magic exposes an rpcProvider. To create a ZeroDev wallet using Magic, simply pass the rpc provider to the SDK:

import { getZeroDevSigner, getRPCProviderOwner } from '@zerodevapp/sdk'
import { Magic } from 'magic-sdk';

const magic = new Magic('MAGIC_API_KEY', {
  // some magic options...
})

const signer = await getZeroDevSigner({
  projectId: "<project id>",
  owner: getRPCProviderOwner(magic.rpcProvider),
})

API

Ethers

import { getZeroDevSigner, getRPCProviderOwner } from '@zerodevapp/sdk'

const signer = await getZeroDevSigner({
  projectId: "<project id>",
  owner: getRPCProviderOwner(rpcProvider),
})

Example using MetaMask as an owner (only works if you have MetaMask installed):

Code Editor

function RpcProviderExample() { const [address, setAddress] = useState('') const [loading, setLoading] = useState(false) const createWallet = async () => { setLoading(true) try { const accounts = await window.ethereum.request({ method: "eth_requestAccounts" }) const signer = await getZeroDevSigner({ projectId: defaultProjectId, owner: getRPCProviderOwner(window.ethereum), }) setAddress(await signer.getAddress()) } catch(error) { console.log(error) } setLoading(false) } return ( <div> <div> <button onClick={createWallet} disabled={loading}>{ loading ? 'loading...' : 'Create Wallet'}</button> </div> {address && <div> <label>Wallet: {address}</label> </div> } </div> ) }

function RpcProviderExample() {
  const [address, setAddress] = useState('')
  const [loading, setLoading] = useState(false)

  const createWallet = async () => {
    setLoading(true)
    try {
      const accounts = await window.ethereum.request({
        method: "eth_requestAccounts"
      })
      const signer = await getZeroDevSigner({
        projectId: defaultProjectId,
        owner: getRPCProviderOwner(window.ethereum),
      })
      setAddress(await signer.getAddress())
    } catch(error) {
      console.log(error)
    }
    setLoading(false)
  }

  return (
    <div>
      <div>
      <button onClick={createWallet} disabled={loading}>{ loading ? 'loading...' : 'Create Wallet'}</button>
      </div>
      {address && 
        <div>
          <label>Wallet: {address}</label>
        </div>
      }
    </div>
  )
}

Result

Loading...

Wagmi

import { ZeroDevConnector } from '@zerodevapp/wagmi'
import { getPrivateKeyOwner } from '@zerodevapp/sdk'
const connector = new ZeroDevConnector({chains, options: {
  projectId: <your-project-id>,
  owner: getRPCProviderOwner(<provider>),
}})

Example:

Code Editor

function WagmiRPCProviderExample() { const { chains, provider, webSocketProvider } = configureChains( [polygonMumbai], [publicProvider()], ) const client = createClient({ autoConnect: false, connectors: [ new ZeroDevConnector({options: { projectId: defaultProjectId, owner: getRPCProviderOwner(window.ethereum), }}) ], provider, webSocketProvider, }) const ConnectButton = () => { const { connect, connectors, error, isLoading, pendingConnector } = useConnect() const { address, connector, isConnected } = useAccount() const { chain } = useNetwork() if (isConnected) { return ( <div> <div>{address}</div> <div>Connected to {connector.name}</div> <a href={`${chain.blockExplorers.default.url}/address/${address}`} target="_blank">Explorer</a> </div> ) } return ( <button disabled={isLoading} onClick={() => { ethereum.request({ method: "eth_requestAccounts" }).then(() => { connect({connector: connectors[0]}) }) }}> {isLoading ? 'loading...' : 'Connect'} </button> ) } return ( <WagmiConfig client={client}> <ConnectButton /> </WagmiConfig> ) }

function WagmiRPCProviderExample() {
  const { chains, provider, webSocketProvider } = configureChains(
    [polygonMumbai],
    [publicProvider()],
  )
  const client = createClient({
    autoConnect: false,
    connectors: [
      new ZeroDevConnector({options: {
        projectId: defaultProjectId,
        owner: getRPCProviderOwner(window.ethereum),
      }})
    ],
    provider,
    webSocketProvider,
  })

  const ConnectButton = () => {
    const { connect, connectors, error, isLoading, pendingConnector } = useConnect()
    const { address, connector, isConnected } = useAccount()
    const { chain } = useNetwork()

    if (isConnected) {
      return (
        <div>
          <div>{address}</div>
          <div>Connected to {connector.name}</div>
          <a href={`${chain.blockExplorers.default.url}/address/${address}`} target="_blank">Explorer</a>
        </div>
      )
    }
    return (
      <button disabled={isLoading} onClick={() => {
        ethereum.request({
          method: "eth_requestAccounts"
        }).then(() => {
          connect({connector: connectors[0]})
        })
      }}>
        {isLoading ? 'loading...' : 'Connect'}
      </button>
    )
  }
  return (
    <WagmiConfig client={client}>
      <ConnectButton />
    </WagmiConfig>
  )
}

Result

Loading...

You can also "wrap" an existing Wagmi connect with enhanceConnectorWithAA, which will create an AA wallet and use the connector as a signer/owner for the AA wallet.

import { enhanceConnectorWithAA } from '@zerodevapp/wagmi'
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'

const client = createClient({
  connectors: [
    enhanceConnectorWithAA(
      new MetaMaskConnector({ chains }), 
      { projectId: "<your-project-id>" }
    ),
  ],
})

Code Editor

function WagmiWrappedRPCProviderExample() { const { chains, provider, webSocketProvider } = configureChains( [polygonMumbai], [publicProvider()], ) const client = createClient({ autoConnect: false, connectors: [ enhanceConnectorWithAA( new MetaMaskConnector({ chains }), { projectId: defaultProjectId } ), ], provider, webSocketProvider, }) const ConnectButton = () => { const { connect, connectors, error, isLoading, pendingConnector } = useConnect() const { address, connector, isConnected } = useAccount() const { chain } = useNetwork() if (isConnected) { return ( <div> <div>{address}</div> <div>Connected to {connector.name}</div> <a href={`${chain.blockExplorers.default.url}/address/${address}`} target="_blank">Explorer</a> </div> ) } return ( <button disabled={isLoading} onClick={() => { ethereum.request({ method: "eth_requestAccounts" }).then(() => { connect({connector: connectors[0]}) }) }}> {isLoading ? 'loading...' : 'Connect'} </button> ) } return ( <WagmiConfig client={client}> <ConnectButton /> </WagmiConfig> ) }

function WagmiWrappedRPCProviderExample() {
  const { chains, provider, webSocketProvider } = configureChains(
    [polygonMumbai],
    [publicProvider()],
  )
  const client = createClient({
    autoConnect: false,
    connectors: [
      enhanceConnectorWithAA(
        new MetaMaskConnector({ chains }), 
        { projectId: defaultProjectId }
      ),
    ],
    provider,
    webSocketProvider,
  })

  const ConnectButton = () => {
    const { connect, connectors, error, isLoading, pendingConnector } = useConnect()
    const { address, connector, isConnected } = useAccount()
    const { chain } = useNetwork()

    if (isConnected) {
      return (
        <div>
          <div>{address}</div>
          <div>Connected to {connector.name}</div>
          <a href={`${chain.blockExplorers.default.url}/address/${address}`} target="_blank">Explorer</a>
        </div>
      )
    }
    return (
      <button disabled={isLoading} onClick={() => {
        ethereum.request({
          method: "eth_requestAccounts"
        }).then(() => {
          connect({connector: connectors[0]})
        })
      }}>
        {isLoading ? 'loading...' : 'Connect'}
      </button>
    )
  }
  return (
    <WagmiConfig client={client}>
      <ConnectButton />
    </WagmiConfig>
  )
}

Result

Loading...