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';