Providers

When users have the Leather wallet extension installed, the extension will inject a global StacksProvider variable into the JavaScript context of your web app. This allows your JavaScript code to hook into the extension, and make authentication, transaction, and signature requests. @stacks/connect automatically detects and uses this global variable for you.

At the moment, only the Leather Wallet extension and the Xverse built-in browser include a StacksProvider. However, ideally more wallets (and mobile wallets) will support this format in the future, so that your app can be compatible with any Stacks wallet that has functionality to embed web applications.

In your web application, you can check to see if the user has a compatible wallet installed by checking for the presence of window.StacksProvider.

Here is the interface for the StacksProvider:

interface StacksProvider {
  transactionRequest(payload: string): Promise<FinishedTxPayload | SponsoredFinishedTxPayload>;
  authenticationRequest(payload: string): Promise<string>;
  signatureRequest(payload: string): Promise<SignatureData>;
  structuredDataSignatureRequest(payload: string): Promise<SignatureData>;
  profileUpdateRequest(payload: string): Promise<PublicProfile>;
  getProductInfo:
    | undefined
    | (() => {
        version: string;
        name: string;
        meta?: {
          tag?: string;
          commit?: string;
          [key: string]: any;
        };
        [key: string]: any;
      });
}