We aim to use tools you are already familiar with, mainly Wagmi and Viem so you can focus on building your application.

To get started, create an account in the Bitski Developer portal. Follow the Web3 onboarding flow to get your Bitski appId and we will provide a pre-configured React snippet to get you going immediately.

Installation

The WaaS React SDK has peer dependencies on @tanstack/react-query, viem, and wagmi to operate - please make sure you have these installed as well.

npm i @bitski/waas-react-sdk @tanstack/react-query@^5.0.0 viem@^2.0.0 wagmi@^2.0.0

SDK Initialization

Bitski’s WaaS React SDK uses Wagmi and Viem so you don’t have to learn new tools. We support many chains—just use viem/chains and LoginMethods from the SDK. A deeper dive is here.

import {BitskiProvider, BitskiWidget, LoginMethod} from "@bitski/waas-react-sdk";
import {base, mainnet, polygon} from "viem/chains";

export const Dapp = () => {
    return (
        <BitskiProvider
            appId={"abcd-1234-efgh-5678"}
            chains={[mainnet, base, polygon]}
            loginMethods={[LoginMethod.Email, LoginMethod.Google, LoginMethod.Wallet]}
            callbackURL={"https://myapp/redirect-url"}>
            <BitskiWidget />
        </BitskiProvider>
    )
}

Callback URL

In order for the Bitski Wagmi Connectors to work, you must provide one public callback URL with the Bitski JS SDK imported.

<!DOCTYPE html>
<html>
  <head>
    <title>Logging in...</title>
    <script src="https://cdn.bitskistatic.com/js/sdk/v3.3/callback.js"></script>
  </head>
</html>

CodeSandbox

Components

We recommend using the <BitskiWidget /> component. It is a convenient, drop-in Component to handle both authentication and viewing the connected wallet. Check out our components section for more details.

Say goodbye to the awkward authentication dance and get back to doing what you do best—building your dApp! If you’re running into issues on how to use your Bitski Wallet, free feel to contact us and let us know.