Solana TPS Tracking

TPSMonitor.tsx

import React, { useEffect, useState } from 'react';
import { Connection, PerfSample } from '@solana/web3.js';
import { useAppConfig, useConnection } from '@shared/components-ui/contexts';
import { Trans } from '@lingui/macro';

const WarningIcon = () => {
  return (
    <svg width="20" height="20" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M17.8634 16.1962C17.5539 15.6565 11.3038 4.87041 10.7692 3.94957C10.4179 3.3452 9.58075 3.35511 9.22912 3.94957C8.83702 4.61227 2.55515 15.4396 2.11839 16.2235C1.7984 16.7978 2.15189 17.5509 2.88009 17.5509H17.0974C17.7586 17.5509 18.2502 16.8695 17.8635 16.196L17.8634 16.1962ZM10.0005 16.1277C9.50937 16.1277 9.11108 15.7297 9.11108 15.2383C9.11108 14.747 9.50937 14.3489 10.0005 14.3489C10.4918 14.3489 10.8899 14.747 10.8899 15.2383C10.8899 15.7297 10.4918 16.1277 10.0005 16.1277ZM10.5341 13.2817C10.5341 13.6374 10.3562 13.8154 10.0005 13.8154C9.64474 13.8154 9.46681 13.6375 9.46681 13.2817L8.93314 8.12324C8.93314 7.58957 9.28887 7.0559 10.0005 7.0559C10.7119 7.0559 11.0678 7.58957 11.0678 8.12324L10.5341 13.2817Z"
        fill="black"
      />
    </svg>
  );
};

const PERFORMANCE_SAMPLE_LIMIT = 6;
const MIN_RECOMMENDED_TPS = 1500;
const getAvgTPS = async (connection: Connection) => {
  try {
    // Performance samples are taken every 60 seconds and include the number of transactions and slots that occur in a given time window.

    // native getRecentPerformanceSamples has issue with commitment being set in constructor: https://github.com/solana-labs/solana/issues/19419
    // @ts-expect-error using _rpcRequest is private to fetch directly
    const { result: samples } = (await connection._rpcRequest('getRecentPerformanceSamples', [
      PERFORMANCE_SAMPLE_LIMIT,
    ])) as {
      result: PerfSample[];
    };

    let sums = samples.reduce(
      (sums, sample) => {
        if (sample.numTransactions !== 0) {
          sums.numTransactions += sample.numTransactions;
          sums.samplePeriodSecs += sample.samplePeriodSecs;
        }
        return sums;
      },
      { numTransactions: 0, samplePeriodSecs: 0 },
    );
    const avgTps = sums.numTransactions / (sums.samplePeriodSecs || 1);
    return avgTps;
  } catch (error) {
    console.error(error);
    return 0;
  }
};

const useTPSMonitor = () => {
  const [tps, setTPS] = useState<number>();
  const connection = useConnection();
  const {
    constants: { CLUSTER },
  } = useAppConfig();

  useEffect(() => {
    const fetch = () => {
      getAvgTPS(connection).then((tps) => {
        setTPS(tps);
      });
    };

    const intervalId = setInterval(fetch, 10000);
    fetch();

    return () => clearInterval(intervalId);
  }, [connection]);

  // Don't show if devnet
  if (CLUSTER === 'devnet') return { isLowTPS: false, message: '' };

  const isLowTPS = tps !== undefined && tps <= MIN_RECOMMENDED_TPS;

  const message = isLowTPS ? (
    <span className="flex text-xs justify-center items-center text-left">
      <div className="w-5 h-5">
        <WarningIcon />
      </div>
      <div className="ml-[10px] text-rock">
        <span>
          <Trans>Solana network is experiencing degraded performance. Transactions may fail to send or confirm.</Trans>
        </span>
      </div>
    </span>
  ) : (
    ''
  );
  return { isLowTPS, message };
};

export default useTPSMonitor;