# 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](https://console.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](https://docs.cspr.cloud/rest-api/reference) 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:

```typescript
const getAPY = async () => {
  const cloudProxy = window.csprclick.getCsprCloudProxy();
  const metrics = await cloudProxy.fetch('/auction-metrics?includes=total_active_era_stake');
  const supply = await cloudProxy.fetch('/supply');
  
  const totalStakeInMotes = Big(metrics.data.total_active_era_stake).div(1000000000);
  
  return Big(supply.data.total)
    .mul(supply.data.annual_issuance)
    .div(totalStakeInMotes)
    .toString();
};
```

## Streaming API proxy

The Streaming API proxy allows you to interact with the [CSPR.cloud Streaming APIs](https://docs.cspr.cloud/streaming-api/reference) 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`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) instance.

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

```typescript
  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.

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cspr.click/cspr.click-sdk/reference/cloud-proxies.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.