### Vanilla JS CDN Setup
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/SKILL.md
Example of setting up the csprclick SDK in a Vanilla JavaScript application using a CDN. Define global options before injecting the script.
```javascript
// In app.js or a script tag in your HTML
// Define options before injecting the CDN script
window.clickSDKOptions = {
// SDK options here
};
window.clickUIOptions = {
// UI options here, e.g.:
accountMenuItems: [
'AccountCardMenuItem',
'CopyHashMenuItem',
'BuyCSPRMenuItem',
'ViewAccountOnExplorerMenuItem'
],
onThemeChanged: (theme) => {
console.log('Theme changed to:', theme);
// Update theme in your app
},
defaultTheme: 'light', // or 'dark'
// networkSettings: { ... } // Optional network settings
};
// Inject CDN script dynamically
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@make-software/csprclick-sdk@latest/dist/index.js';
script.defer = true;
document.body.appendChild(script);
// Listen for SDK loaded event
window.addEventListener('csprclick:loaded', () => {
console.log('csprclick SDK loaded');
// Register other event listeners if needed
window.csprclick.on('someEvent', (data) => console.log('someEvent:', data));
});
```
--------------------------------
### Next.js CDN Setup
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/SKILL.md
Example of setting up the csprclick SDK in a Next.js application using a CDN. Requires the 'use client' directive and specific root element configuration.
```javascript
'use client';
import { useEffect } from 'react';
import type { ICSPRClickSDK } from '@make-software/csprclick-core-types';
// Ensure global types are available
declare global {
interface Window {
csprclick: ICSPRClickSDK;
clickSDKOptions: any;
clickUIOptions: any;
}
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
useEffect(() => {
// Define options before injecting the CDN script
window.clickSDKOptions = {
// SDK options here
};
window.clickUIOptions = {
// UI options here, e.g.:
accountMenuItems: [
'AccountCardMenuItem',
'CopyHashMenuItem',
'BuyCSPRMenuItem',
'ViewAccountOnExplorerMenuItem'
],
onThemeChanged: (theme: string) => {
console.log('Theme changed to:', theme);
// Update theme in your app
},
defaultTheme: 'light', // or 'dark'
// networkSettings: { ... } // Optional network settings
};
// Inject CDN script dynamically
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@make-software/csprclick-sdk@latest/dist/index.js';
script.defer = true;
document.body.appendChild(script);
// Listen for SDK loaded event
const handleLoaded = () => {
console.log('csprclick SDK loaded');
// Register other event listeners if needed
};
window.addEventListener('csprclick:loaded', handleLoaded);
// Cleanup
return () => {
window.removeEventListener('csprclick:loaded', handleLoaded);
};
}, []);
return (
{children}
);
}
```
--------------------------------
### Serve the HTML Example Locally
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-html/README.md
Run this command to serve the HTML example locally. Access the application at http://localhost:8080.
```bash
npm run serve
```
--------------------------------
### Install, Build, and Serve Commands
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-ts/README.md
Commands to install dependencies, build the TypeScript project, and serve the application locally.
```bash
npm install
npm run build
npm run serve
```
--------------------------------
### React 19+ CDN Setup
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/SKILL.md
Example of setting up the csprclick SDK in a React 19+ application using a CDN. Ensure window.clickSDKOptions and window.clickUIOptions are defined before injecting the script.
```javascript
import { useEffect } from 'react';
import type { ICSPRClickSDK } from '@make-software/csprclick-core-types';
// Ensure global types are available
declare global {
interface Window {
csprclick: ICSPRClickSDK;
clickSDKOptions: any;
clickUIOptions: any;
}
}
function App() {
useEffect(() => {
// Define options before injecting the CDN script
window.clickSDKOptions = {
// SDK options here
};
window.clickUIOptions = {
// UI options here, e.g.:
accountMenuItems: [
'AccountCardMenuItem',
'CopyHashMenuItem',
'BuyCSPRMenuItem',
'ViewAccountOnExplorerMenuItem'
],
onThemeChanged: (theme: string) => {
console.log('Theme changed to:', theme);
// Update theme in your app
},
defaultTheme: 'light', // or 'dark'
// networkSettings: { ... } // Optional network settings
};
// Inject CDN script dynamically
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@make-software/csprclick-sdk@latest/dist/index.js';
script.defer = true;
document.body.appendChild(script);
// Listen for SDK loaded event
const handleLoaded = () => {
console.log('csprclick SDK loaded');
// Register other event listeners if needed
window.csprclick.on('someEvent', (data) => console.log('someEvent:', data));
};
window.addEventListener('csprclick:loaded', handleLoaded);
// Cleanup
return () => {
window.removeEventListener('csprclick:loaded', handleLoaded);
// Unregister listeners if any were added
// window.csprclick.off('someEvent', ...);
};
}, []);
return (
{/* Your app content */}
);
}
export default App;
```
--------------------------------
### Install styled-components Dependency
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Install the required `styled-components` version for theme customization.
```bash
npm install styled-components@^5.3.9
```
--------------------------------
### React Setup with ClickProvider and ClickUI
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Wrap your root component with ClickProvider and include ClickUI in your app component for basic setup. Configure SDK options like appName, appId, and contentMode.
```tsx
import { CONTENT_MODE, CsprClickInitOptions, WALLET_KEYS } from '@make-software/csprclick-core-types';
import { ClickProvider, ClickUI, CsprClickThemes, ViewAccountOnExplorerMenuItem } from '@make-software/csprclick-ui';
import { ThemeProvider } from 'styled-components';
const clickOptions: CsprClickInitOptions = {
appName: 'My Casper dApp',
appId: 'csprclick-template',
contentMode: CONTENT_MODE.IFRAME,
providers: [
WALLET_KEYS.CASPER_WALLET,
WALLET_KEYS.LEDGER,
WALLET_KEYS.METAMASK_SNAP,
WALLET_KEYS.WALLETCONNECT,
],
walletConnect: {
projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
},
};
// index.tsx
root.render(
);
// App.tsx
const topBarSettings = {
accountMenuItems: [
'AccountCardMenuItem', // built-in: shows account card
'CopyHashMenuItem', // built-in: copies public key
'BuyCSPRMenuItem', // built-in: opens fiat on-ramp
],
};
const App = () => (
<>
{/* your app content */}
);
```
--------------------------------
### Install csprclick Packages
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Install the necessary csprclick UI and core types packages using npm.
```bash
npm install --save-dev @make-software/csprclick-ui @make-software/csprclick-core-types
```
--------------------------------
### React ThemeProvider Setup
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Wraps your application with ThemeProvider to apply themes. Import ThemeProvider and CsprClickThemes from 'styled-components' and '@make-software/csprclick-ui' respectively. Ensure ClickProvider is also included.
```tsx
import { ThemeProvider } from 'styled-components';
import { CsprClickThemes } from '@make-software/csprclick-ui';
import { ClickProvider } from '@make-software/csprclick-ui';
createRoot(document.getElementById('root')!).render(
);
```
--------------------------------
### Initialize CSPR.click SDK in React < 19
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/SKILL.md
This snippet demonstrates the core setup for initializing the CSPR.click SDK in a React application version less than 19. It includes installing necessary packages, defining initialization options, and wrapping the application with ThemeProvider and ClickProvider.
```bash
npm install @make-software/csprclick-ui @make-software/csprclick-core-types styled-components@^5.3.9
```
```javascript
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'styled-components';
import { ClickProvider, useClickRef, ClickUI, CsprClickInitOptions, ThemeModeType, DefaultThemes, buildTheme } from '@make-software/csprclick-ui';
// --- App Setup ---
const clickOptions: CsprClickInitOptions = {
appName: 'My Awesome dApp',
appId: 'csprclick-template', // Use 'csprclick-template' for localhost
providers: ['casper-wallet', 'ledger'], // Add more providers as needed
contentMode: 'dark', // 'light' or 'dark'
};
const App = () => {
const [themeMode, setThemeMode] = useState('dark');
const { api, loading, error } = useClickRef();
// Build theme once outside the component
const AppTheme = buildTheme(DefaultThemes.csprclick);
// Example: Setup event listeners
useEffect(() => {
if (api) {
// Example: Listen for account changes
api.onAccountChange(newAccount => {
console.log('Account changed:', newAccount);
});
// Example: Listen for network changes
api.onNetworkChange(newNetwork => {
console.log('Network changed:', newNetwork);
});
// Example: Listen for disconnects
api.onDisconnect(() => {
console.log('Wallet disconnected');
});
}
}, [api]);
// --- UI Configuration ---
const topBarSettings = {
// Example: Custom menu items
accountMenuItems: [
// Example: Custom React element
//
],
// Example: Network switcher settings
// networkSettings: {
// networks: [
// { name: 'Casper', chainName: 'casper' },
// { name: 'Casper Testnet', chainName: 'casper-test' },
// ],
// currentNetwork: 'casper-test', // Or get from state
// onNetworkSwitch: (networkName) => {
// console.log('Network switched to:', networkName);
// // Update your app's network state here
// },
// },
};
// Handle theme switching
const handleThemeSwitch = () => {
setThemeMode(prevMode => (prevMode === 'dark' ? 'light' : 'dark'));
};
if (loading) return
Loading CSPR.click...
;
if (error) return
Error initializing CSPR.click: {error.message}
;
return (
{/* Your App Content Here */}
Welcome to the dApp!
);
};
// --- Render App ---
const rootElement = document.getElementById('root');
if (rootElement) {
const root = ReactDOM.createRoot(rootElement);
root.render();
}
```
--------------------------------
### Build and Apply a CSPR.click Theme
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Build a theme using `buildTheme` and apply it to the application using `ThemeProvider`. This example uses the default CSPR.click theme in light mode.
```tsx
import { DefaultThemes, buildTheme, ThemeModeType } from '@make-software/csprclick-ui';
import { ThemeProvider } from 'styled-components';
// Build a theme — swap DefaultThemes.csprclick for .red, .green, or .blue
export const AppTheme = buildTheme({
...DefaultThemes.csprclick,
});
// Apply via ThemeProvider — pass the desired mode variant
root.render(
);
```
--------------------------------
### Check .NET SDK Version
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-blazor/README.md
Verify that the .NET 8 SDK or a newer version is installed. This is a prerequisite for running the Blazor application.
```bash
dotnet --version
```
--------------------------------
### Create a Custom Theme with Styleguide Tokens
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Fully control component colors for both dark and light modes by using `clickStyleguide` tokens within `buildTheme`. This example defines overrides for various UI elements.
```tsx
import { buildTheme, clickStyleguide } from '@make-software/csprclick-ui';
export const AppTheme = buildTheme({
csprclickLightTheme: {
[clickStyleguide.backgroundTopBarColor]: '#ffffff',
[clickStyleguide.backgroundMenuColor]: '#f0f0f0',
[clickStyleguide.hoverProductMenu]: '#e0e0e0',
[clickStyleguide.hoverAccountMenu]: '#e8e8e8',
[clickStyleguide.textColor]: '#1a1a1a',
[clickStyleguide.topBarTextColor]: '#111111',
[clickStyleguide.topBarIconHoverColor]: '#555555',
[clickStyleguide.menuIconAndLinkColor]: '#0070f3',
},
csprclickDarkTheme: {
[clickStyleguide.backgroundTopBarColor]: '#1e1e1e',
[clickStyleguide.backgroundMenuColor]: '#2a2a2a',
[clickStyleguide.hoverProductMenu]: '#333333',
[clickStyleguide.hoverAccountMenu]: '#383838',
[clickStyleguide.textColor]: '#e0e0e0',
[clickStyleguide.topBarTextColor]: '#ffffff',
[clickStyleguide.topBarIconHoverColor]: '#aaaaaa',
[clickStyleguide.menuIconAndLinkColor]: '#4da6ff',
},
appLightTheme: {
topBarSectionBackgroundColor: '#ffffff',
bodyBackgroundColor: '#f5f5f5',
},
appDarkTheme: {
topBarSectionBackgroundColor: '#121212',
bodyBackgroundColor: '#121212',
},
});
```
--------------------------------
### Install CSPR.click TypeScript Types
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Install the core types package for CSPR.click to use its types in your TypeScript project.
```bash
npm install @make-software/csprclick-core-types
```
--------------------------------
### Basic ClickUI Setup with Top Bar
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Renders the top navigation bar and wallet modals. Place at the top of your root component. Configure the top bar using `topBarSettings`.
```tsx
import { ClickUI, AccountCardMenuItem } from '@make-software/csprclick-ui';
const topBarSettings = {
accountMenuItems: [],
};
const App = () => (
<>
{/* your app content */}
);
```
--------------------------------
### Get Sign-In Options (JavaScript)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Fetches a list of available wallet providers and previously connected accounts. Set `refresh` to `true` to force a refresh of the provider list.
```typescript
getSignInOptions(refresh?: boolean): Promise<{ providers: any[], accounts: AccountType[] }>
```
--------------------------------
### ClickProvider Initialization Options
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Configure the ClickProvider with initialization options including app name, app ID, content mode, and supported wallet providers. This example shows a typical configuration for a Casper dApp.
```tsx
import { CONTENT_MODE, CsprClickInitOptions, WALLET_KEYS } from '@make-software/csprclick-core-types';
const clickOptions: CsprClickInitOptions = {
appName: 'My Casper dApp',
appId: 'my-casper-dapp',
contentMode: CONTENT_MODE.IFRAME,
providers: [
WALLET_KEYS.CASPER_WALLET,
WALLET_KEYS.LEDGER,
WALLET_KEYS.METAMASK_SNAP,
WALLET_KEYS.WALLETCONNECT,
],
walletConnect: {
projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
},
};
```
--------------------------------
### isProviderPresent
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Checks if a specific wallet provider is enabled and installed in the browser.
```APIDOC
## isProviderPresent(provider)
### Description
Returns true if the provider is enabled and installed (e.g., browser extension is available).
### Method
(Not specified, assumed to be an SDK method call)
### Parameters
#### Path Parameters
(None)
#### Query Parameters
(None)
#### Request Body
(None)
### Parameters
* **provider** (string) - Required - The name of the provider to check (e.g., 'casperwallet').
### Response
* **(boolean)** - `true` if the provider is present, `false` otherwise.
```
--------------------------------
### Get Active Account Asynchronously (JavaScript)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
An asynchronous version of `getActiveAccount`. Use `{ withBalance: true }` to include the CSPR balance or `{ withFiatCurrency: 'USD' }` for fiat conversion.
```typescript
getActiveAccountAsync(options?: GetActiveAccountOptions): Promise
```
--------------------------------
### Connect Specific CSPR.click Wallet
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/SKILL.md
Connect directly to a specific wallet provider without showing the wallet selector UI. This is useful when you want to guide the user to a particular wallet.
```javascript
// Connect specific wallet directly
window.csprclick.connect('casper-wallet');
```
--------------------------------
### Check Provider Presence
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Verifies if a specific wallet provider (e.g., a browser extension) is installed and enabled in the user's browser. Use this to ensure the necessary wallet infrastructure is available before attempting interactions.
```typescript
isProviderPresent(provider: string): boolean
```
--------------------------------
### Create React App from Template
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Create a new React project pre-configured with csprclick using npx.
```bash
npx create-react-app my-casper-app --template @make-software/csprclick-react
```
--------------------------------
### Run the Blazor Project
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-blazor/README.md
Execute the sample Blazor application. After running, the application will be accessible at http://localhost:5118.
```bash
dotnet run
```
--------------------------------
### Get CSPR.cloud API Proxy
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Obtain the CSPR.cloud API proxy object. This is the entry point for accessing various CSPR.cloud services from the frontend.
```typescript
const proxy = window.csprclick.getCsprCloudProxy();
```
```typescript
// or in React:
const proxy = clickRef?.getCsprCloudProxy();
```
--------------------------------
### signIn()
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Triggers the sign-in UI, prompting the user to select a wallet. This method returns immediately, and the result of the sign-in process is communicated via the `csprclick:signed_in` event.
```APIDOC
## signIn()
### Description
Triggers the sign-in UI (wallet selector). Returns immediately. Listen to `csprclick:signed_in` for the result.
### Method
`signIn(): void`
```
--------------------------------
### Get Active Public Key
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Asynchronously retrieves the public key of the currently active account in the connected wallet. This is often required for signing transactions or messages.
```typescript
getActivePublicKey(): Promise
```
--------------------------------
### CDN Theme Initialization
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Sets the initial theme for the CDN bundle by configuring clickUIOptions. Available themes are 'light' and 'dark'.
```js
window.clickUIOptions = {
defaultTheme: 'dark', // 'light' or 'dark'
uiContainer: '#csprclick-ui',
rootAppElement: '#root',
accountMenuItems: [],
};
```
--------------------------------
### Get Active Account Synchronously (JavaScript)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Retrieves the current session account details synchronously from local storage. Returns `null` if no active session is found.
```typescript
getActiveAccount(): AccountType | null
```
--------------------------------
### Trigger Sign-In UI (JavaScript)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Use this method to initiate the wallet selection UI. The function returns immediately, and the result of the sign-in process is communicated via the `csprclick:signed_in` event.
```typescript
signIn(): void
```
--------------------------------
### CSPR.click SDK and UI Configuration (JavaScript)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Sets up global configuration objects for CSPR.click SDK behavior (`clickSDKOptions`) and its user interface (`clickUIOptions`). This configuration must be defined before the CDN script loads.
```javascript
// app.js
// --- SDK options ---
const clickSDKOptions = {
appName: 'My Casper dApp',
appId: 'csprclick-template', // use your own appId in production
providers: ['casper-wallet', 'ledger', 'metamask-snap', 'walletconnect'],
walletConnect: {
relayUrl: 'wss://relay.walletconnect.com',
projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
},
};
// --- UI options ---
const clickUIOptions = {
uiContainer: 'csprclick-ui', // ID of the div where the top bar renders
rootAppElement: '#app', // root element of your app (for modal accessibility)
defaultTheme: 'light', // 'light' | 'dark'
onThemeChanged: (theme) => {
// called when the user toggles the theme inside the top bar
document.querySelector('body').classList.toggle('dark', theme === 'dark');
},
accountMenuItems: [
'AccountCardMenuItem', // built-in: shows account card
'CopyHashMenuItem', // built-in: copies public key
'BuyCSPRMenuItem', // built-in: opens fiat on-ramp
],
networkSettings: {
networks: ['Mainnet', 'Testnet'],
currentNetwork: 'Mainnet',
onNetworkSwitch: (network) => {
console.log('Network switched to', network);
window.csprclickUI.setNetwork(network);
},
},
};
```
--------------------------------
### Get CSPR.cloud Proxy
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Obtains a proxy object that enables authenticated access to CSPR.cloud's REST and Streaming APIs. This is used for interacting with the CSPR.cloud platform programmatically.
```typescript
getCsprCloudProxy(): ICsprCloudProxy
```
--------------------------------
### Get Provider Information
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Retrieves details about the active or a specified wallet provider, including its name, version, and supported features. This can help in understanding the capabilities of the connected wallet.
```typescript
getProviderInfo(provider?: string): Promise
```
--------------------------------
### connect(provider, options?)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Requests a direct connection with a specified wallet provider. This method allows for programmatic connection to a particular wallet.
```APIDOC
## connect(provider, options?)
### Description
Request a connection directly with a specific wallet provider key.
### Method
`connect(provider: string, options?: any): Promise`
```
--------------------------------
### Setting Up Event Listeners with useClickRef
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Set up event listeners for wallet connection, disconnection, and account switching using useClickRef within a useEffect hook. Ensure listeners are cleaned up on component unmount to prevent memory leaks.
```tsx
import { useClickRef } from '@make-software/csprclick-ui';
import { useEffect, useState } from 'react';
function App() {
const clickRef = useClickRef();
const [activeAccount, setActiveAccount] = useState(null);
useEffect(() => {
if (!clickRef) return;
const onSignedIn = (evt: any) => setActiveAccount(evt.account);
const onSwitchedAccount = (evt: any) => setActiveAccount(evt.account);
const onSignedOut = () => setActiveAccount(null);
const onDisconnected = () => setActiveAccount(null);
clickRef.on('csprclick:signed_in', onSignedIn);
clickRef.on('csprclick:switched_account', onSwitchedAccount);
clickRef.on('csprclick:signed_out', onSignedOut);
clickRef.on('csprclick:disconnected', onDisconnected);
return () => {
// Clean up listeners on unmount to prevent memory leaks
clickRef.off('csprclick:signed_in', onSignedIn);
clickRef.off('csprclick:switched_account', onSwitchedAccount);
clickRef.off('csprclick:signed_out', onSignedOut);
clickRef.off('csprclick:disconnected', onDisconnected);
};
}, [clickRef]);
return activeAccount
?
Connected: {activeAccount.public_key}
: ;
}
```
--------------------------------
### signInWithAccount(account)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Initiates a session with a previously known account without displaying any UI. The provided `account` object must be obtained from either `getSignInOptions()` or `getActiveAccount()`.
```APIDOC
## signInWithAccount(account)
### Description
Start a session with a previously known account without showing UI. The account must come from `getSignInOptions()` or `getActiveAccount()`.
### Method
`signInWithAccount(account: AccountType): Promise`
```
--------------------------------
### Show Buy CSPR UI in Vanilla JS
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/SKILL.md
Call the `showBuyCsprUi()` function directly on the `window.csprclick` object to open the fiat on-ramp widget.
```javascript
window.csprclick.showBuyCsprUi();
```
--------------------------------
### Sign In with Known Account (JavaScript)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Initiates a session with a pre-existing account without displaying the UI. The provided `account` must have been previously obtained from `getSignInOptions()` or `getActiveAccount()`.
```typescript
signInWithAccount(account: AccountType): Promise
```
--------------------------------
### Accessing SDK Instance with useClickRef Hook
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Use the useClickRef hook to get a reference to the SDK instance within any React component. This allows direct interaction with SDK methods like signIn and getActiveAccount.
```tsx
import { useClickRef } from '@make-software/csprclick-ui';
function MyComponent() {
const clickRef = useClickRef();
const handleConnect = () => clickRef?.signIn();
const account = clickRef?.getActiveAccount();
// ...
}
```
--------------------------------
### Sign Transaction (Signature Only)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Use `sign()` to get a user-approved, signed transaction object without network submission. Ideal for off-chain workflows or custom submission endpoints. Requires the transaction details and the active account's public key.
```javascript
sign(transactionJSON, signingPublicKey)
```
```javascript
const activeAccount = window.csprclick.getActiveAccount();
const activePublicKey = activeAccount.public_key.toLowerCase();
const result = await window.csprclick.sign(transactionJSON, activePublicKey);
if (result.cancelled) {
console.log('User cancelled');
return;
}
if (result.error) {
console.error('Signing failed:', result.error);
return;
}
// Use result.transaction (TransactionV1) or result.deploy (legacy Deploy)
// and submit it yourself to a Casper node
const signedTransaction = result.transaction ?? result.deploy;
await myCustomNodeClient.submit(signedTransaction);
```
--------------------------------
### Custom Theme Merging
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Demonstrates how to create a custom theme by merging with existing CsprClickThemes. Import CsprClickThemes from '@make-software/csprclick-ui'.
```typescript
import { CsprClickThemes } from '@make-software/csprclick-ui';
// Available themes: CsprClickThemes.light, CsprClickThemes.dark
// Merge with your own token overrides:
const myTheme = { ...CsprClickThemes.dark, myColor: '#fff' };
```
--------------------------------
### Sign Casper Transaction Only (React)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Use the `sign()` method to get a signed transaction object without submitting it. This is useful for custom RPC endpoints, multi-sig scenarios, or manual signature validation before submission. The signed transaction must be validated and submitted separately.
```tsx
import {
NativeTransferBuilder,
PublicKey,
TransactionV1,
HttpHandler,
RpcClient,
Transaction,
} from 'casper-js-sdk';
import { useClickRef } from '@make-software/csprclick-ui';
function SignTransaction() {
const clickRef = useClickRef();
const handleSign = async () => {
const activeAccount = clickRef?.getActiveAccount();
if (!activeAccount) return;
const senderPk = activeAccount.public_key!.toLowerCase();
// Build a native CSPR transfer transaction
const transaction = new NativeTransferBuilder()
.from(PublicKey.fromHex(senderPk))
.target(PublicKey.fromHex('0202e99759649fa63a72c685b72e696b30c90f1deabb02d0d9b1de45eb371a73e5bb'))
.amount('2500000000') // 2.5 CSPR in motes
.id(Date.now())
.chainName(clickRef!.chainName || 'casper-test')
.payment(100_000_000)
.build();
const result = await clickRef?.sign(transaction.toJSON() as object, senderPk);
if (!result || result.cancelled) {
console.log('User cancelled');
return;
}
if (result.error) {
console.error('Signing failed:', result.error);
return;
}
// Attach the signature and validate before submitting
const signedTransaction = TransactionV1.setSignature(
transaction,
result.signature!,
PublicKey.fromHex(senderPk)
);
if (!signedTransaction.validate()) {
console.error('Signature validation failed');
return;
}
// Submit manually via casper-js-sdk RpcClient
const rpcHandler = new HttpHandler(clickRef!.appSettings?.casper_node || '');
rpcHandler.setCustomHeaders({ Authorization: (clickRef as any).digestAuth });
const rpcClient = new RpcClient(rpcHandler);
await rpcClient.putTransaction(Transaction.fromTransactionV1(signedTransaction));
console.log('Submitted successfully');
};
return ;
}
```
--------------------------------
### ClickUI with Empty Account Menu Items (Default Only)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Configures the account dropdown menu to show only the default 'Switch Account' and 'Sign Out' options by providing an empty array for `accountMenuItems`.
```tsx
const topBarSettings = {
accountMenuItems: [],
};
```
--------------------------------
### getSignInOptions(refresh?)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Retrieves a list of enabled wallet providers and previously connected accounts. The `refresh` parameter can be set to `true` to force a refresh of this information.
```APIDOC
## getSignInOptions(refresh?)
### Description
Returns list of enabled providers and list of previously connected accounts. Refresh parameter can be set to true to force a refresh of this information.
### Method
`getSignInOptions(refresh?: boolean): Promise<{ providers: any[], accounts: AccountType[] }>`
```
--------------------------------
### ClickUI for Modals Only (No Top Bar)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Renders only the wallet modals (connect, sign, switch account) by omitting the `topBarSettings` prop. The top bar will not be displayed.
```tsx
// Modals only — no top bar rendered
```
--------------------------------
### Connect to a Specific Wallet Provider (JavaScript)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Requests a direct connection to a specified wallet provider. An optional `options` object can be provided for additional configuration.
```typescript
connect(provider: string, options?: any): Promise
```
--------------------------------
### CsprClickInitOptions Type Definition
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Defines the structure for initializing CSPR.click, including application details, UI preferences, supported wallets, and network settings. Properties like `chainName`, `casperNode`, and `csprclickHost` are optional and can override application config.
```typescript
type CsprClickInitOptions = {
appName: string; // displayed in wallet popups
appId: string; // from console.cspr.build (use 'csprclick-template' on localhost)
contentMode: 'iframe' | 'popup'; // how sign-in UI is rendered. Use 'iframe' always
providers: string[]; // wallet provider keys to enable
walletConnect?: {
projectId: string; // from dashboard.reown.com
relayUrl?: string; // default: 'wss://relay.walletconnect.com'
logger?: string;
};
chainName?: string; // 'casper' (mainnet) or 'casper-test' (testnet)
casperNode?: string; // custom RPC node URL
csprclickHost?: string; // custom CSPR.click host (default: https://accounts.cspr.click)
logLevel?: number; // 0=none 1=error 2=warn 3=info 4=debug
};
```
--------------------------------
### SDK Methods
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
This section lists the core methods available in the CSPR.click Web SDK for developers to integrate with.
```APIDOC
## SDK Methods
This section details the primary methods exposed by the CSPR.click Web SDK.
### `signIn()`
**Description**: Initiates the sign-in process with a connected wallet.
### `signInWithAccount(account)`
**Description**: Signs in with a specific account.
- **account** (AccountType) - The account to sign in with.
### `connect(provider, options)`
**Description**: Connects to a specified wallet provider.
- **provider** (string) - The key of the wallet provider to connect to.
- **options** (CsprClickInitOptions) - Optional initialization options.
### `switchAccount(provider, options)`
**Description**: Switches the active account for a given provider.
- **provider** (string) - The key of the wallet provider.
- **options** (CsprClickInitOptions) - Optional initialization options.
### `signOut()`
**Description**: Signs out the current user.
### `disconnect(fromWallet, options)`
**Description**: Disconnects from the wallet.
- **fromWallet** (boolean) - Whether to disconnect from the wallet service.
- **options** (CsprClickInitOptions) - Optional initialization options.
### `getActiveAccount()`
**Description**: Retrieves the currently active account.
### `getActiveAccountAsync(options)`
**Description**: Asynchronously retrieves the currently active account.
- **options** (GetActiveAccountOptions) - Options for retrieving the account.
### `getSignInOptions(refresh)`
**Description**: Gets the sign-in options, optionally refreshing them.
- **refresh** (boolean) - Whether to refresh the sign-in options.
### `sign(transaction, signingPublicKey, onStatusUpdate, timeout)`
**Description**: Signs a transaction.
- **transaction** (object) - The transaction to sign.
- **signingPublicKey** (string) - The public key of the signer.
- **onStatusUpdate** (function) - Callback for status updates.
- **timeout** (number) - Timeout in milliseconds.
### `send(transaction, signingPublicKey, onStatusUpdate, timeout)`
**Description**: Signs and submits a transaction.
- **transaction** (object) - The transaction to send.
- **signingPublicKey** (string) - The public key of the signer.
- **onStatusUpdate** (function) - Callback for status updates.
- **timeout** (number) - Timeout in milliseconds.
### `signMessage(message, signingPublicKey)`
**Description**: Signs a message.
- **message** (string) - The message to sign.
- **signingPublicKey** (string) - The public key of the signer.
### `encryptMessage(message, encryptionPublicKey)`
**Description**: Encrypts a message.
- **message** (string) - The message to encrypt.
- **encryptionPublicKey** (string) - The public key for encryption.
### `decryptMessage(encryptedMessage, decryptionPublicKey)`
**Description**: Decrypts a message.
- **encryptedMessage** (string) - The encrypted message.
- **decryptionPublicKey** (string) - The public key for decryption.
### `isProviderPresent(provider)`
**Description**: Checks if a wallet provider is present.
- **provider** (string) - The key of the wallet provider.
### `isConnected(provider)`
**Description**: Checks if connected to a wallet provider.
- **provider** (string) - The key of the wallet provider.
### `isUnlocked(provider)`
**Description**: Checks if the wallet is unlocked.
- **provider** (string) - The key of the wallet provider.
### `getProviderInfo(provider)`
**Description**: Retrieves information about a wallet provider.
- **provider** (string) - The key of the wallet provider.
### `getActivePublicKey()`
**Description**: Retrieves the active public key.
### `forgetAccount(account)`
**Description**: Forgets a specific account.
- **account** (AccountType) - The account to forget.
### `getCsprCloudProxy()`
**Description**: Gets the CSPR.cloud API proxy.
### `getAccountIdenticon(hex, size)`
**Description**: Generates an identicon for an account.
- **hex** (string) - The account hash in hex format.
- **size** (number) - The desired size of the identicon.
### `showBuyCsprUi()`
**Description**: Shows the UI for purchasing CSPR.
```
--------------------------------
### showBuyCsprUi
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Displays the Buy CSPR fiat on-ramp widget, allowing users to purchase CSPR.
```APIDOC
## showBuyCsprUi()
### Description
Displays the Buy CSPR fiat on-ramp widget.
### Method
(Not specified, assumed to be an SDK method call)
### Parameters
(None)
### Response
(None)
```
--------------------------------
### Fiat On-Ramp
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/SKILL.md
Method to initiate the Buy CSPR widget.
```APIDOC
## Fiat On-Ramp
### `showBuyCsprUi()`
**Description**: Opens the Buy CSPR widget, allowing users to purchase CSPR using fiat currency.
```
--------------------------------
### Switch User Account (JavaScript)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Allows the user to select a different account within their wallet. If no provider is specified, CSPR.click's switch account modal is displayed. This operation is asynchronous.
```typescript
switchAccount(withProvider?: string, options?: any): Promise
```
--------------------------------
### switchAccount(provider?, options?)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Allows the user to select a different account within their wallet. If no provider is specified, CSPR.click's switch account modal is displayed.
```APIDOC
## switchAccount(provider?, options?)
### Description
Request the wallet to let the user select a different account. Pass no provider to show CSPR.click's switch account modal.
### Method
`switchAccount(withProvider?: string, options?: any): Promise`
```
--------------------------------
### ClickUI with Theme Switch Callback
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Configures a callback function to be executed when the user toggles the theme in the top bar. The callback receives the new theme ('light' or 'dark') as an argument.
```tsx
const topBarSettings = {
accountMenuItems: [],
onThemeSwitch: (theme: 'light' | 'dark') => {
console.log('Theme changed to', theme);
},
};
```
--------------------------------
### UI Components
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/SKILL.md
React components and hooks for building user interfaces with CSPR Click.
```APIDOC
## UI Components (React < 19 only)
### ``
**Description**: A React context provider that wraps your application and initializes the CSPR Click SDK. Should be placed at the root of your application.
### ``
**Description**: A component that renders the top navigation bar and all necessary wallet modal windows for user interaction.
### ``
**Description**: A visual component that displays an avatar generated from a public key or account hash.
* **Props**: Accepts public key or account hash as a prop.
### `useClickRef()`
**Description**: A React hook that provides access to the CSPR Click SDK instance within any functional component.
### Theme Customization API
* **`buildTheme()`**: Function to construct a custom theme object.
* **`DefaultThemes`**: An object containing predefined theme configurations.
* **`clickStyleguide`**: Provides access to the SDK's styling guidelines and variables for customization.
```
--------------------------------
### ClickUI with Network Switcher Configuration
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Enables and configures a network switcher in the top bar, specifying available networks and a callback for network changes. The callback receives the selected network name.
```tsx
const topBarSettings = {
accountMenuItems: [],
networkSettings: {
networks: ['Mainnet', 'Testnet'],
currentNetwork: 'Mainnet',
onNetworkSwitch: (network: string) => {
console.log('Switched to', network);
},
},
};
```
--------------------------------
### getActiveAccountAsync(options?)
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
An asynchronous version of `getActiveAccount()`. Optionally include the CSPR balance by passing `{ withBalance: true }`, or for fiat conversion, use `{ withFiatCurrency: 'USD' }`.
```APIDOC
## getActiveAccountAsync(options?)
### Description
Async version. Pass `{ withBalance: true }` to include CSPR balance. Pass `{ withFiatCurrency: 'USD' }` for fiat conversion.
### Method
`getActiveAccountAsync(options?: GetActiveAccountOptions): Promise`
```
--------------------------------
### Sign In to CSPR.click Wallet
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/SKILL.md
Use this to trigger the CSPR.click wallet selector UI, allowing the user to connect their wallet. This is typically used when a user clicks a 'Connect Wallet' button or when the app requires an account for a transaction.
```tsx
// React
const clickRef = useClickRef();
clickRef?.signIn();
```
```javascript
// Vanilla JS
window.csprclick.signIn();
```
--------------------------------
### ClickUI with All Built-in Account Menu Items
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Configures the account dropdown menu in the top bar to display all four built-in menu item components.
```tsx
import {
ClickUI,
AccountCardMenuItem,
ViewAccountOnExplorerMenuItem,
CopyHashMenuItem,
BuyCSPRMenuItem,
} from '@make-software/csprclick-ui';
const topBarSettings = {
accountMenuItems: [
,
,
,
,
],
};
```
--------------------------------
### AccountIdenticon with Preset Size
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Renders a visual avatar for a Casper account using a preset size. Ensure AccountIdenticon is imported from '@make-software/csprclick-ui'.
```tsx
import { AccountIdenticon } from '@make-software/csprclick-ui';
```
--------------------------------
### Show Buy CSPR UI in React
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/SKILL.md
Call the `showBuyCsprUi()` function using a React hook to open the fiat on-ramp widget.
```tsx
const clickRef = useClickRef();
clickRef?.showBuyCsprUi();
```
--------------------------------
### Switch Theme Mode at Runtime
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Dynamically switch between light and dark themes at runtime using React state and the `ThemeProvider`. A button is provided to toggle the theme mode.
```tsx
const [mode, setMode] = useState(ThemeModeType.light);
```
--------------------------------
### send()
Source: https://github.com/make-software/csprclick-examples/blob/master/csprclick-skill/references/llms.txt
Requests user approval, signs the transaction, and automatically submits it to the Casper network via CSPR.cloud. It supports optional live status updates.
```APIDOC
## `send()`
### Description
Requests user approval, signs the transaction, **and automatically submits it to the Casper network** via CSPR.cloud. This is the standard approach for most dApps — you don't need to manage node communication yourself.
`send()` also accepts an optional `waitProcessing` argument. Pass a callback to receive live status updates as the transaction moves through the network, or pass `true` to wait for processing without a custom callback. If omitted, the call resolves as soon as the transaction is submitted.
### Signature
```javascript
send(transactionJSON, signingPublicKey, waitProcessing?, timeout?)
```
### Parameters
#### Arguments
- **transactionJSON** (`string | object`) - Transaction to sign and send. Use `.toJSON()` if building with `casper-js-sdk`.
- **signingPublicKey** (`string`) - The active account's public key (lowercase).
- **waitProcessing** (`boolean | function`) - Optional. `true` to wait silently, or a `(status, data) => void` callback for live updates.
- **timeout** (`number`) - Optional. Timeout in seconds for waiting on processing.
### Status values
Passed to the callback:
- **sent** - Transaction accepted by the network node
- **ping** - Polling update — still waiting for processing
- **processed** - Transaction executed on-chain
- **cancelled** - User cancelled in the wallet UI
- **timeout** - Processing wait timed out
- **expired** - Transaction expired before processing
- **error** - Network or execution error
### Example — with status callback
```javascript
const activeAccount = window.csprclick.getActiveAccount();
const activePublicKey = activeAccount.public_key.toLowerCase();
const onStatusUpdate = (status, data) => {
if (status === 'sent') console.log('Submitted to network');
if (status === 'processed') console.log('Processed on-chain', data);
if (status === 'timeout') console.warn('Timed out waiting');
if (status === 'error') console.error('Error:', data);
};
const result = await window.csprclick.send(
transactionJSON,
activePublicKey,
onStatusUpdate
);
if (result.transactionHash) {
console.log('Success, hash:', result.transactionHash);
} else if (result.deployHash) {
console.log('Success (legacy deploy), hash:', result.deployHash);
} else if (result.cancelled) {
console.log('User cancelled');
} else {
console.error('Failed:', result.error, result.errorData);
}
```
### Example — fire and forget (no status tracking)
```javascript
const result = await window.csprclick.send(transactionJSON, activePublicKey);
if (result.transactionHash) console.log('Sent:', result.transactionHash);
```
```