@groupos/walletkit
v0.0.13
Published
`@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 t
Downloads
24
Readme
WalletKit SDK
@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.
Quickstart
Add Authentication and Smart Accounts
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.
Button entrypoint
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" />
) : (
{
/** ... */
}
);
}
Theme customization
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} />;
}