Quickstart

Install package dependencies

Add the @stacks/connect, @stacks/transactions, and @stacks/network packages to your project using your preferred package manager.

Create an AppConfig and UserSession

Add a reusable UserSession instance to your project. This will allow your app to store authentication state in localStorage.

Interacting with the user's wallet

The process of connecting to a wallet gives the web app information about the wallet account, which enables interactions with the Stacks blockchain, like calling smart contracts.

Using the showConnect function, you can prompt the user to select a wallet to connect to your app.

import { showConnect } from '@stacks/connect';
import { userSession } from './session';

const appDetails = {
  name: "My app",
  icon: "logo.png",
}

showConnect({
  appDetails,
  userSession,
  onFinish: () => {
    window.location.reload();
  },
  onCancel: () => {
    console.log('oops');
  },
});

This will configure the showConnect function to display a wallet connection pop-up with your app's name and icon, and handle user confirmation or cancellation actions in the onFinish and onCancel callbacks.

Initiate a STX transfer

With a connected wallet, you can now initiate a STX transfer to another account.

To prompt the user for a STX transfer call, use the openSTXTransfer function.

import { openSTXTransfer } from '@stacks/connect';
import { StacksTestnet } from '@stacks/network';
import { userSession } from './session';

openSTXTransfer({
  network: new StacksTestnet(),
  recipient: 'ST39MJ145BR6S8C315AG2BD61SJ16E208P1FDK3AK',
  amount: 10000000,
  onFinish: response => {
    console.log(response.txid);
  },
  onCancel: () => {
    console.log('User cancelled');
  },
});

This will prompt the user to confirm and sign a transaction, sending 10 STX to the recipient address.