How To Integrate Stellar Wallets Kit v2

This guide shows the fastest ways to add wallet connect + transaction signing to your app using Stellar Wallets Kit v2, with minimal code. It includes both React and a vanilla JS option via a bundled UMD script.

---

Full examples

• Live demo: https://jamesbachini.github.io/Stellar-Wallets-Kit-Boilerplate/vanilla/index.html
• React example: https://github.com/jamesbachini/Stellar-Wallets-Kit-Boilerplate/blob/main/react/src/App.js
• Vanilla example: https://github.com/jamesbachini/Stellar-Wallets-Kit-Boilerplate/blob/main/vanilla/index.html

TL;DR

• React/Node bundlers: install from JSR and import directly.

npx jsr add @creit-tech/stellar-wallets-kit

import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk";

• Plain browser: drop in the prebuilt bundle

<script src="https://cdn.jsdelivr.net/gh/jamesbachini/Stellar-Wallets-Kit-Boilerplate@main/vanilla/stellar-kit-bundle/dist/wallet-kit-bundle.umd.js"></script>

---

React Setup

Install the libraries:

npx jsr add @creit-tech/stellar-wallets-kit 
npx npm i @stellar/stellar-sdk

• Do this at app start, not on every render.
• Default modules include the common wallets; you can add more if needed.

Import & initialize

import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk";
import { SwkAppDarkTheme, KitEventType } from "@creit-tech/stellar-wallets-kit/types";
import { defaultModules } from '@creit-tech/stellar-wallets-kit/modules/utils';
import * as StellarSdk from '@stellar/stellar-sdk';

StellarWalletsKit.init({
  theme: SwkAppDarkTheme,
  modules: defaultModules(),
});

Then add a div with the className buttonWrapper and load it up:

StellarWalletsKit.createButton(document.querySelector('#buttonWrapper'));

• The kit renders a button that opens the connect wallet modal.

Then to sign transactions we can simply:

const {signedTxXdr} = await StellarWalletsKit.signTransaction(transaction.toXDR(), {
  networkPassphrase: StellarSdk.Networks.TESTNET,
  address,
});

---

Standard index.html

You can either user a prebuilt script or create your own locally.

<script src="https://cdn.jsdelivr.net/gh/jamesbachini/Stellar-Wallets-Kit-Boilerplate@main/vanilla/stellar-kit-bundle/dist/wallet-kit-bundle.umd.js"></script>

Alternatively to build your own:

To rebuild the bundle yourself, navigate to the stellar-kit-bundle directory in your terminal and run the following commands:

Fork and navigate into the bundle directory, ./vanilla/stellar-kit-bundle
Then check dependency versions and run these commands to rebuild.

cd stellar-kit-bundle
npm install
npm run build

This will use Vite to create a new wallet-kit-bundle.umd.js file in the /vanilla/stellar-kit-bundle/dist directory, which can be imported into the index.html file or anywhere else.

From there the functionality is identical to the react instructions above.

Full examples

• React example: https://github.com/jamesbachini/Stellar-Wallets-Kit-Boilerplate/blob/main/react/src/App.js
• Vanilla example: https://github.com/jamesbachini/Stellar-Wallets-Kit-Boilerplate/blob/main/vanilla/index.html
• Live demo: https://jamesbachini.github.io/Stellar-Wallets-Kit-Boilerplate/vanilla/index.html