​

Frontend Integration Guide

This guide outlines the best practices for integrating Beam and Retro 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-retro-api-sdk

​

Data Types

Always use data types provided by the SDK.

// Good
import { PoolData } from 'codemelt-retro-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-retro-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';