Wagmi Integration

Integrate Enclave with your Wagmi project.

Install Enclave

Install the Enclave SDK using your preferred package manager:

npm

npm i @enclave-so/sdk

Use Enclave

Way 1: Announce Provider (EIP-6963) (Recommended)

Announce Enclave to make it EIP-6963 compatible:

config.ts

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { provider } from '@enclave-so/sdk'
 
provider.announce()
 
export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  multiInjectedProviderDiscovery: true, // Optional, default is true
})

Way 2: Connector

Configure Enclave directly in Wagmi:

config.ts

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { injected } from 'wagmi/connectors'
import { target } from '@enclave-so/sdk'
 
export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [
    injected({ target }), 
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  }
})

Way 3: Inline Connector

Use the Enclave connector directly in your project:

Connectors.tsx

import { target } from '@enclave-so/sdk'
import { useConnect } from 'wagmi'
import { injected } from 'wagmi/connectors'
 
export default function Connectors() {
  const { connect } = useConnect()
 
  const enclave = injected({ target })
 
  return (
    <>
      <img src={target.icon} alt={target.name} width="32" />
      <button onClick={() => connect({ connector: enclave })}>
        {target.name}
      </button>
    </>
  )
}