Overview

In any web application that integrates CSPR.click you'll be using the Core JS SDK. It provides the essential functionality to interact with wallets and the CSPR.click servers. Through it, you'll request a connection with a wallet to start a user session, and ask the user to sign a transaction or a message. You'll get a complete graphical interface that manages for you the interactions with the user to perform the account management and the signature requests operations.

Get your application Id

To initialize CSPR.click library, you need an appId for your application. By default, our examples use the csprclick-template identifier. You may use this value to try CSPR.click out and start developing your application.

Note, though, that this identifier is only valid for development on localhost. Before you push your application to a server, you must get your own appId on console.cspr.build.

Supported wallets

CSPR.click supports every wallet built for the Casper ecosystem.

Wallet	Provider key	Name
	casper-wallet	Casper Wallet
	ledger	Ledger
	walletconnect	WalletConnect
	metamask-snap	Metamask (Snap)

In your application, you can decide which wallets you want to enable. To do so, set accordingly the array of providers in the CsprClickInitOptions initialization object.

const clickOptions: CsprClickInitOptions = {
    appName: 'CSPR.playground',
    appId: 'csprclick-template',
    contentMode: CONTENT_MODE.IFRAME,
    providers: [
        WALLET_KEYS.CASPER_WALLET,
        WALLET_KEYS.LEDGER,
        WALLET_KEYS.METAMASK_SNAP,
    ],
};

WalletConnect

WalletConnect is a protocol that provides a secure and convenient way for users to interact with decentralized applications. CSPR.click supports WalletConnect as a provider, allowing users to connect their WalletConnect-compatible wallets to your application.

To use WalletConnect with CSPR.click, you need to have a WalletConnect project ID. You can get one by creating a project on the WalletConnect Cloud.

Once you have your project ID, you can add it to your CSPR.click initialization options like this:

const clickOptions: CsprClickInitOptions = {
    appName: 'CSPR.playground',
    appId: 'csprclick-template',
    contentMode: CONTENT_MODE.IFRAME,
    providers: [
        WALLET_KEYS.CASPER_WALLET,
        WALLET_KEYS.LEDGER,
        WALLET_KEYS.METAMASK_SNAP,
        WALLET_KEYS.WALLET_CONNECT,
    ],
    walletConnect: {
        relayUrl: 'wss://relay.walletconnect.com',
        projectId: '6cdf3...9cc4d'
    }
};