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 UI SDK into your existing React application, go to the React section. If you're not using React in your application, you can learn how to integrate CSPR.click in the Javascript section.

Create a new project

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

npx create-react-app my-casper-app --template @make-software/csprclick-react

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

cd my-casper-app
npm start

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

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/index.tsx and locate the definition of the clickOptions variable. It'll look similar to this:

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

const clickOptions: CsprClickInitOptions = {
    appName: 'CSPR.app',
    appId: 'csprclick-template',
    contentMode: CONTENT_MODE.IFRAME,
    providers: [
        'casper-wallet',
        'ledger',
        'casper-signer',
    ]
};

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.

These options are sent to CSPR.click through the <ClickProvider> component that wraps your main application component:

<ClickProvider options={clickOptions}>
  <App/>
</ClickProvider>

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.