CSPR.cloud proxies

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.

Configuration of CSPR.cloud proxy on CSPR.build

The proxy functionality is disabled by default to protect your CSPR.cloud usage quota. To enable it, you need to edit your CSPR.click app configuration on CSPR.build.

Enable only the proxies you need and only for the methods you require in your frontend application for better security.

REST API proxy

The REST API proxy allows you to interact with the CSPR.cloud REST APIs from the frontend of your application. The proxy will add the necessary authentication headers to your requests.

Use the fetch() method of the ICsprCloudProxy instance obtained from the getCsprCloudProxy() method. The method signature is the same as the fetch() method of the browser's window object.

Example of calculating the current APY:

  const getAPY = async () => {
    const cloudProxy = window.csprclick.getCsprCloudProxy();
    const metricsRes = await cloudProxy.fetch('/auction-metrics?includes=total_active_era_stake');
    const supplyRes = await cloudProxy.fetch('/supply');

    const apyPercentage =
        supplyRes.data?.total && metricsRes.data?.total_active_era_stake
            ? Big(supplyRes.data.total)
                .mul(8)
                .div(Big(metricsRes.data.total_active_era_stake).div(1000000000))
                .toString()
            : null;
    console.log('APY:', apyPercentage);
};

Streaming API proxy

The Streaming API proxy allows you to interact with the CSPR.cloud Streaming APIs from the frontend of your application. The proxy will add the necessary authentication headers to your requests.

Use the newWebSocket() method of the ICsprCloudProxy instance obtained from the getCsprCloudProxy() method. The method returns a WebSocket instance.

Example of setting up a WebSocket connection to listen for native transfers:

  const proxy = window.csprclick.getCsprCloudProxy();
  // @ts-ignore
  const ws = proxy.newWebSocket('/transfers');

  // Set up event listeners
  ws.onopen = (event) => {
    console.log('WebSocket connection opened:', event);
  };

  ws.onmessage = (event) => {
    console.log('WebSocket message received:', event.data);

    // Try to parse JSON if possible
    try {
      const parsedData = JSON.parse(event.data);
      console.log('Parsed WebSocket data:', parsedData);
    } catch (error) {
      console.log('WebSocket data (raw):', event.data);
    }
  };

  ws.onerror = (error) => {
    console.error('WebSocket error:', error);
  };

  ws.onclose = (event) => {
    console.log('WebSocket connection closed:', event.code, event.reason);
  };

Node RPC client proxy

The Node RPC client proxy allows you to interact with the Casper node RPC interface from the frontend of your application. In this case, CSPR.click provides you with the proxy URL and a token to use with the RpcClient class from the casper-js-sdk library.

  const proxy = window.csprclick.getCsprCloudProxy();
  const rpcHandler = new HttpHandler(proxy.RpcURL, 'fetch');
  rpcHandler.setCustomHeaders({ Authorization: proxy.RpcAuthorizationToken });
  const rpcClient = new RpcClient(rpcHandler);

  const stateRootHash = await rpcClient.getStateRootHashLatest();
  console.log('State root hash:', stateRootHash.stateRootHash.toHex());