@groupos/walletkit is a package for adding and utilizing smart accounts in decentralized applications (dApps). It comes with customization options that meet your needs to offer a seamless user experience — social onboarding, gas sponsorship, and batch transactions.

Unlike existing smart account packages, WalletKit lets developers retain access to the same core wagmi hooks for signing and transacting. We accomplish this by connecting all smart accounts as native account objects instead of creating a new smart account object that needs explicit calling.

After getting started with wagmi, visit GroupOS to create a groupId and simply add a SmartAuthBox to your application:

import { useAccount } from "wagmi";
import { SmartAuthBox } from "@groupos/walletkit";

function Page() {
  const { address } = useAccount();

  return !address ? (
    <SmartAuthBox groupId="STATION_GROUP_ID" />
  ) : (
    {
      /** ... */
    }
  );
}

All connected accounts, even EOAs, will get wrapped with a smart account, empowering them to support features like batch transactions and gas sponsorship. You can access this account with wagmi-native useAccount and interact with it via the same core wagmi react hooks.

As an alternative to SmartAuthBox, WalletKit exposes SmartAuthButton. SmartAuthButton wraps SmartAuthBox into a modal that opens when the button is pressed. SmartAuthButton might be used in a navbar, whereas SmartAuthBox might the core element of a login page. Using SmartAuthButton is not much different than SmartAuthBox:

import { useAccount } from "wagmi";
import { SmartAuthButton } from "@groupos/walletkit";

function Page() {
  const { address } = useAccount();

  return !address ? (
    <SmartAuthButton groupId="STATION_GROUP_ID" />
  ) : (
    {
      /** ... */
    }
  );
}

SmartAuthBox comes with a sleek, modern theme out of the box, but allows developers to customize the theme as they see fit. To customize the theme, create a theme object and pass it as a prop.

import { AuthBoxTheme, SmartAuthBox } from "@groupos/walletkit";

const theme: AuthBoxTheme = {
  borderRadius: "md",
  fontFamily: "sans-serif",
  colors: {
    bgPrimary: "#000000",
    bgSecondary: "#282828",
    // see more via theme type
  },
};

/** SmartAuthButton can be themed via the same prop */
function Page() {
  <SmartAuthBox groupId="STATION_GROUP_ID" theme={theme} />;
}