Skip to main content

​
Frontend Integration Guide

This guide outlines the best practices for integrating Beam and Beam protocols into our frontend application. Following these guidelines ensures consistency, maintainability, and easier future upgrades.

​
Key Principles

  1. Use SDK for data types and fetching
  2. Thorough testing on testnet and mainnet
  3. Proper RPC management
  4. Consistent error handling and logging

​
Using the SDK

We use the custom SDK: codemelt-beam-api-sdk

​
Data Types

Always use data types provided by the SDK. 
// Good
import { PoolData } from 'codemelt-beam-api-sdk';

// Bad
interface PoolData {
  // Custom implementation
}
This approach ensures type consistency and reduces refactoring efforts during upgrades.

​
Data Fetching

Use SDK methods for data fetching whenever possible. 
// Good
import api from 'codemelt-beam-api-sdk';
import apiConnection from '@config'

const poolData = await api.function.liquidity.fetchPoolData(apiConnection, { poolId });

// Bad
const response = await fetch(`/api/pool/${poolId}`);
const poolData = await response.json();
The SDK provides built-in sanity checks and error handling, improving reliability.

​
RPC Management

All RPC calls must be proxied through next.config.ts This is crucial for Beam protocol with multiple RPCs. 
// next.config.ts
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/rpc/:path*',
        destination: 'https://actual-rpc-url.com/:path*',
      },
    ];
  },
};
Never expose RPC API keys in the frontend code. 
// Good
const rpcUrl = '/api/rpc';

// Bad
const rpcUrl = 'https://actual-rpc-url.com?api_key=SECRET_KEY';