@lidofinance/next-pages v0.51.0

@lidofinance/next-pages

Common API and UI next pages.

Installation

• React 17 || 18

yarn add @lidofinance/next-pages

# and additional
yarn add next@^12.3.0 prom-client@^14.0.0 @lidofinance/api-logger@^0.36.0 @lidofinance/api-rpc@^0.36.0 @lidofinance/rpc@^0.36.0 @lidofinance/ui-pages@^0.36.0

Getting started

API pages

Health

import { health } from '@lidofinance/next-pages'
// or import { health } from '@lidofinance/next-pages/api';

export default health

Metrics

import { registry } from 'utilsApi/metrics'
import { metricsFactory } from '@lidofinance/next-pages'
// or import { metricsFactory } from '@lidofinance/next-pages/api';

const metrics = metricsFactory({
  registry,
})

export default metrics

RPC

import getConfig from 'next/config'
import { rpcFactory } from '@lidofinance/api-pages'
// or import { rpcFactory } from '@lidofinance/next-pages/api';
import { fetchRPC, serverLogger } from 'utilsApi'
import { registry } from 'utilsApi/metrics'
import { METRICS_PREFIX } from '../../config'

const { publicRuntimeConfig, serverRuntimeConfig } = getConfig()
const { defaultChain } = publicRuntimeConfig
const { infuraApiKey, alchemyApiKey } = serverRuntimeConfig

export const enum CHAINS {
  Mainnet = 1,
  Goerli = 5,
}

export const providers: Record<CHAINS, [string, ...string[]]> = {
  [CHAINS.Mainnet]: [
    `https://mainnet.infura.io/v3/${infuraApiKey}`,
    `https://eth-mainnet.alchemyapi.io/v2/${alchemyApiKey}`,
  ],
  [CHAINS.Goerli]: [
    `https://goerli.infura.io/v3/${infuraApiKey}`,
    `https://eth-goerli.alchemyapi.io/v2/${alchemyApiKey}`,
  ],
}

const allowedCallAddresses: Record<string, string[]> = {
  /* Mapping of chainIds to array of addresses permitted for eth_getLogs */
}

const allowedLogsAddresses: Record<string, string[]> = {
  /* Mapping of chainIds to array of addresses permitted for eth_call */
}

// example
const allowedRPCMethods = [
  'test',
  'eth_call',
  'eth_gasPrice',
  'eth_getCode',
  'eth_estimateGas',
  'eth_getBlockByNumber',
  'eth_feeHistory',
  'eth_maxPriorityFeePerGas',
  'eth_getBalance',
  'eth_blockNumber',
  'eth_getTransactionByHash',
  'eth_getTransactionReceipt',
  'eth_getTransactionCount',
  'eth_sendRawTransaction',
  'eth_getLogs',
  'eth_chainId',
  'net_version',
]

const rpc = rpcFactory({
  fetchRPC: trackedFetchRpcFactory({
    registry: Metrics.registry,
    prefix: METRICS_PREFIX,
  }),
  metrics: {
    prefix: METRICS_PREFIX,
    registry: Metrics.registry,
  },
  defaultChain,
  providers: {
    [CHAINS.Mainnet]: secretConfig.rpcUrls_1,
    [CHAINS.Holesky]: secretConfig.rpcUrls_17000,
  },
  // optional validation options to protect from misuse of public endpoints
  // Strongly recommended to use all of them
  validation: {
    // !!! IMPORTANT, MUST HAVE !!!
    // allowed JSON RPC methods
    allowedRPCMethods,

    // !!! IMPORTANT, MUST HAVE !!!
    // mapping chainId - addresses fro eth_call, put only contracts you dapp interacts with
    // no entry for chainId or empty array will prevent method for this chainId
    allowedCallAddresses,

    // !!! IMPORTANT, MUST HAVE !!!
    // mapping chainId - addresses fro eth_getLogs put only contracts here if you need to fetch events from them
    // no entry for chainId or empty array will prevent method for this chainId
    allowedLogsAddresses,

    // max JSON-RPC batch size
    maxBatchCount: 20, // DEFAULT

    // prevents empty `address` param for eth_getLogs, that can results in massive queries
    blockEmptyAddressGetLogs: true, // DEFAULT

    // only 20k blocks size historical queries for eth_getLogs
    // fetches and caches current block to compare with ambiguous blockTags(e.g. "latest")
    maxGetLogsRange: 20_000, // DEFAULT

    /// cache TTL for maxGetLogsRange
    currentBlockTTLms: 60_000; // DEFAULT

    //  1mb max response after which data stream is interrupted and 413 is returned
    maxResponseSize: 1_000_000, // DEFAULT
  },
})

export default rpc

UI pages

Page Error (ready implementations)

• Page404
• Page500

Example for pages/404.tsx

import { Page404 } from '@lidofinance/next-ui-pages/ui'

export default Page404

Example for pages/500.tsx

import { Page500 } from '@lidofinance/next-ui-pages/ui'

export default Page500

Error page as generic component

Example for pages/404.tsx

import { FC } from 'react'
import { PageError } from '@lidofinance/next-ui-pages/ui'

const Page404: FC = () => <PageError title="404" content="Page Not Found" />

export default Page404