In-app & smart wallet wagmi connector

Joaquim Verges

We just released a new package that allows you to use thirdweb's in-app and smart wallets within you wagmi app with minimal effort. Few lines of code to add web2 sign in like google, discord, passkey, etc along with ERC-4337 smart accounts that unlock gasless transactions, batched transactions and session keys.

First, install the thirdweb and @thirdweb-dev/wagmi-adapter packages in your wagmi app.

npm install thirdweb @thirdweb-dev/wagmi-adapter

Make sure you're running wagmi 2.14.1 or above.

You probably already have a wagmi config with some connectors, simply add the inAppWalletConnector to the list, along with the desired options.

import { http, createConfig } from "wagmi";
import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter";
import {
  createThirdwebClient,
  defineChain as thirdwebChain,
} from "thirdweb";
 
const client = createThirdwebClient({
  clientId: "your-client-id",
});
 
export const config = createConfig({
  chains: [sepolia],
  connectors: [
    // add the in-app wallet connector
    inAppWalletConnector({
      client,
      // optional: turn on smart accounts!
      smartAccounts: {
        sponsorGas: true,
        chain: thirdwebChain(sepolia),
      },
    }),
  ],
  transports: {
    [sepolia.id]: http(),
  },
});

Now you can connect users with the desired auth strategy. Options include email, phone, passkey, google, discord, x, telegram, github, and more.

const { connect, connectors } = useConnect();
 
const onClick = () => {
  // grab the connector
  const inAppWallet = connectors.find(
    (x) => x.id === "in-app-wallet",
  );
  // call connect with the desired strategy
  connect({
    connector: inAppWallet,
    strategy: "google",
  });
};

And that's it! The example above connects your users with their google account, creates an ERC4337 smart account with sponsored transactions that you can use with the rest of your wagmi app.

Happy building! 🛠️