Getting Started

Step 1: Create an account

• Sign up: http://app.asteroidkit.com/

• Copy your application ID

Step 2: Setup SDK

• Install SDK library

Shell

npm install asteroidkit wagmi

Second Tab

• Configure SDK with project ID

TypeScript

import "./App.css";
import "asteroidkit/styles.css";

import React from "react";
import { WagmiConfig } from "wagmi";
import { AsteroidKitProvider, ConnectButton, createClient } from "asteroidkit";

const client = createClient();

function App() {
  return (
    <div className="App">
      <WagmiConfig client={client}>
        <AsteroidKitProvider appId="YOUR_APP_ID">
          <ConnectButton />
        </AsteroidKitProvider>
      </WagmiConfig>
    </div>
  );
}

export default App;

Add the connect button

ConnectButton is an entry point for the widget.

TypeScript

import { ConnectButton } from 'asteroidkit';

export const YourApp = () => {
  return <ConnectButton />;
};

Second Tab

Step 3: Verify

• Log in to your application and verify that you see logged in user in the dashboard

Existing RainbowKit User

The kit is built on top RainbowKit and Wagmi. The kit is fully compatible with those libraries, to migrate from RainbowKit, the only change is needed to wrap it with AsteroidKitProvider.

Using AsteroidKit config

Since AsteroidKit simplifies the configuration of the widget, most of the code related to Wagmi can be removed and the following simple change would be needed to be updated:

Headers

Headers update

Usage

Using AsteroidKit config

Please note, that AsteroidKitProvider follows RainbowKit interface and all the props can be passed to AsteroidKitProvider as they used to be with RainbowKitProvider.

The complete code before and after.

Using Wagmi config

To continue using your already defined Wagmi configuration, you must wrap it around AsteroidKitProvider. Note that in this case local config will be used instead of the one defined in the dashboard:

AsteroidKit is using Wagmi config

Note, that {client} in the code is an existing WagmiConfig object.

Questions?

For more details and troubleshooting please refer to SDK section.