Wallet Integration & Authentication

iExchange uses Sign-In with Ethereum (SIWE) under the hood to authenticate users. The widget works in read-only mode (price quotes, order review) until the user signs in. You will need to create a viem Wallet Client to authenticate the user.

1. Create a viem Wallet Client

import { createWalletClient, custom } from "viem";
// Metamask (and most EVM wallets) injects `window.ethereum`
const walletClient = createWalletClient({
  transport: custom(window.ethereum),
});

2. Strategy A — Lazy Sign-In (WalletClient)

Inject the wallet client without triggering a signature. The widget will ask the user to authenticate the first time it needs access (e.g. after they click Buy).

widget.setWalletClient(walletClient);

3. Strategy B — Immediate Sign-In

If you prefer to authenticate up-front, call authenticate instead. This will open the user’s wallet immediately for the SIWE signature and sign them in to iExchange.

await widget.authenticate(walletClient);

Both approaches result in the same authenticated state — choose the one that best fits your UX.

3.1 Using a raw EIP-1193 provider (MetaMask, WalletConnect, etc.)

You can pass a provider instead of a viem WalletClient. The widget will convert it internally.

// Option A — inject provider so the widget can request accounts later if needed
widget.setProvider(window.ethereum);

// Option B — authenticate immediately with provider
await widget.authenticate({ provider: window.ethereum });

For WalletConnect v2:

import { EthereumProvider } from "@walletconnect/ethereum-provider";

const provider = await EthereumProvider.init({
  projectId: "<YOUR_PROJECT_ID>",
  optionalChains: [8453],
  showQrModal: true,
});

// Inject or use for immediate auth
await widget.setProvider(provider);
await widget.authenticate({ provider });

4. Using wagmi (React)

wagmi already maintains a viem WalletClient under the hood. You can extract it and hand it over to the widget:

import { getWalletClient } from "@wagmi/core";
import { wagmiConfig } from "../wagmi"; // your wagmi config

const walletClient = await getWalletClient(wagmiConfig);
// Lazy or immediate – pick one:
widget.setWalletClient(walletClient);
// or
await widget.authenticate(walletClient);

Tip: If you use the @wagmi/react hooks, call getWalletClient() inside a useEffect after the user connects their wallet.

5. Using ethers.js (v6)

ethers exposes an EIP-1193 provider (window.ethereum). Wrap it with viem to produce a compatible WalletClient:

import { BrowserProvider } from "ethers"; // v6
import { createWalletClient, custom } from "viem";

const provider = new BrowserProvider(window.ethereum);
const walletClient = createWalletClient({ transport: custom(provider) });

// Inject or authenticate
widget.setWalletClient(walletClient);
// or
await widget.authenticate(walletClient);

Now the widget can reuse the user’s existing wallet connection.