# 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());
```