@stacks/connect
[!NOTE]
The 7.x.x
version may still be more well supported by some wallets.
For the legacy version of @stacks/connect
using JWT tokens, please use the following command:
npm install @stacks/connect@7.10.1
Usage
Try the Connect Method Demo App 🏁 to see which methods/features are available for wallets
Install @stacks/connect
npm install @stacks/connect
pnpm install @stacks/connect
yarn add @stacks/connect
Use request
to trigger wallet interactions
import { request } from '@stacks/connect';
const response = await request({ forceWalletSelect: true }, 'getAddresses');
Available methods
getAddresses
const response = await request('getAddresses');
sendTransfer
const response = await request('sendTransfer', {
recipients: [
{
address: 'bc1qw508d6qejxtdg4y5r3zarvary0c5xw7kv8f3t4',
amount: '1000',
},
{
address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
amount: '2000',
},
],
});
signPsbt
const response = await request('signPsbt', {
psbt: 'cHNidP...',
signInputs: [{ index: 0, address }],
broadcast: false,
});
stx_getAddresses
const response = await request('stx_getAddresses');
stx_getAccounts
const response = await request('stx_getAccounts');
stx_transferStx
const response = await request('stx_transferStx', {
amount: '1000',
recipient: 'SP2MF04VAGYHGAZWGTEDW5VYCPDWWSY08Z1QFNDSN',
network: 'mainnet',
memo: 'Optional memo',
});
stx_callContract
const response = await request('stx_callContract', {
contract: 'SP2MF04VAGYHGAZWGTEDW5VYCPDWWSY08Z1QFNDSN.counters',
functionName: 'count',
functionArgs: [Cl.int(3)],
network: 'mainnet',
});
stx_deployContract
const response = await request('stx_deployContract', {
name: 'counters',
clarityCode: `(define-map counters principal int)
(define-public (count (change int))
(ok (map-set counters tx-sender (+ (get-count tx-sender) change)))
)
(define-read-only (get-count (who principal))
(default-to 0 (map-get? counters who))
)`,
clarityVersion: '2',
network: 'mainnet',
});
stx_signMessage
const response = await request('stx_signMessage', {
message: 'Hello, World!',
});
stx_signStructuredMessage
const clarityMessage = Cl.parse('{ structured: "message", num: u3 }');
const clarityDomain = Cl.tuple({
domain: Cl.stringAscii('example.com'),
version: Cl.stringAscii('1.0.0'),
'chain-id': Cl.uint(1),
});
const response = await request('stx_signStructuredMessage', {
message: clarityMessage,
domain: clarityDomain,
});
Advanced Usage
request
The request
method is called with an optional options object as the first parameter:
import { request } from '@stacks/connect';
const response = await request(
{
provider?: StacksProvider;
defaultProviders?: WbipProvider[];
forceWalletSelect?: boolean;
persistWalletSelect?: boolean;
enableOverrides?: boolean;
},
'method',
params
);
const response = await request('method', params);
The enableOverrides
option enables automatic compatibility fixes for different wallet providers.
For example, it handles converting numeric types between string and number formats as needed by different wallets, and remaps certain method names to match wallet-specific implementations.
This ensures consistent behavior across different wallet providers without requiring manual adjustments.
requestRaw
The requestRaw
method provides direct access to wallet providers without the additional features of request
:
import { requestRaw } from '@stacks/connect';
const response = await requestRaw(provider, 'method', params);
Note: requestRaw
bypasses the UI wallet selector, automatic provider compatibility fixes, and other features that come with request
.
Use this when you need more manual control over the wallet interaction process.