Getting started with the template application

If you want to integrate CSPR.click UI SDK into your existing React application, read our Integrating the UI SDK guide. And if you're not using React, you can read our Integrating the UI SDK into a non-React application guide.

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.

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

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>

Learn how to customize the top bar on the next pages.