Getting started

This page guides you through the steps to create a new React application for your project with CSPR.click UI SDK integrated and ready to use.

If you want to integrate CSPR.click SDK into an existing React application, go to the React Context Provider section. If you are not using React, or you want to control the runtime loading yourself, follow Downloading and initializing the SDK.

Create a new React project

To create a new React project with CSPR.click ready to use, write the following command in a terminal session:

npx tiged make-software/csprclick-examples/csprclick-react my-casper-app

Next, go to the newly created project directory and run the app:

cd my-casper-app
pnpm install
pnpm run dev

Your new app will open in your browser. If it doesn't, browse to the URL: http://localhost:5173.

Your new application

Adjust the initialization options

Your new project comes with some default initialization options. You'll need to review them and adjust some.

Open the file src/ClickContext.tsx and locate the definition of the clickSDKOptions variable. It'll look similar to this:

import { CONTENT_MODE } from '@make-software/csprclick-core-types';

window.clickSDKOptions = {
  appName: 'CSPR.click React template',
  appId: 'csprclick-template',
  providers: ['casper-wallet', 'ledger', 'metamask-snap'],
  contentMode: CONTENT_MODE.IFRAME
};

You can use the default csprclick-template application identifier while you're working locally on your application. But to upload your new project to a server, you'll need to get your own application id.

Update the properties according to your needs. Read more about the CsprClickInitOptions type in the Core JS SDK reference.

What's next

You're almost ready to start developing the next web3 killer app. Before you get cracking on your project, get familiar with some crucial aspects of CSPR.click that are demonstrated in the template:

Responding to CSPR.click events

The App component sets handlers to listen and respond to events triggered by CSPR.click when the user connects an account, switches to a different one, or closes the session.

Refer to the Handling events page for information on how to add your listener functions.

Customize the top navigation bar

The template displays some settings selectors in the top navigation bar. Find the ClickTopBar component in src/components/ClickTopBar/index.tsx and see how these settings are defined.

Refer to the Customizing the top bar section for complete reference on how to work with each of the setting elements in the top bar.

Request transaction approvals

At some point, your application will need to interact with the Casper network by sending a transaction (aka deploy). CSPR.click manages this process communicating with the active wallet to request the user to approve or reject the transaction. The UI depends on the wallet.

The template includes the BuyMeACoffee components to demonstrate how to request a transaction signature and send the approved deploy to the network.

Refer to the Signing transactions page for information on how to request the user a transaction approval. Also, look at Processing status updates for information on how to listen for real-time status updates.

Leverage CSPR.cloud Proxy

CSPR.click provides a proxy to interact with the CSPR.cloud REST and Streaming APIs, as well as to set up a Node RPC client with casper-js-sdk. This is helpful when you want to interact with the CSPR.cloud APIs from the frontend of your application, as CSPR.cloud APIs require authentication and you must not expose your API keys in the frontend.

Refer to the CSPR.cloud API proxies page for information on how to use the proxy.