Rootstock MCP Server

'use client'

interface NetworkInfoProps {
  networkInfo: {
    networkName: string
    chainId: number
    blockNumber: number
    gasPrice: string
    isConnected: boolean
  } | null
}

export function NetworkInfo({ networkInfo }: NetworkInfoProps) {
  if (!networkInfo) {
    return (
      <div className="text-center py-8">
        <p className="text-gray-500">Loading network information...</p>
      </div>
    )
  }

  const formatGasPrice = (gasPrice: string) => {
    const gwei = parseInt(gasPrice) / 1e9
    return `${gwei.toFixed(2)} Gwei`
  }

  return (
    <div className="space-y-6">
      {/* Connection Status */}
      <div className="flex items-center space-x-3">
        <div className={`w-3 h-3 rounded-full ${networkInfo.isConnected ? 'bg-green-500' : 'bg-red-500'}`}></div>
        <span className={`font-medium ${networkInfo.isConnected ? 'text-green-700' : 'text-red-700'}`}>
          {networkInfo.isConnected ? 'Connected' : 'Disconnected'}
        </span>
      </div>

      {/* Network Details */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="space-y-4">
          <div>
            <h4 className="text-sm font-medium text-gray-500 uppercase tracking-wide">
              Network Name
            </h4>
            <p className="mt-1 text-lg font-semibold text-gray-900">
              {networkInfo.networkName}
            </p>
          </div>
          
          <div>
            <h4 className="text-sm font-medium text-gray-500 uppercase tracking-wide">
              Chain ID
            </h4>
            <p className="mt-1 text-lg font-semibold text-gray-900">
              {networkInfo.chainId}
            </p>
          </div>
        </div>

        <div className="space-y-4">
          <div>
            <h4 className="text-sm font-medium text-gray-500 uppercase tracking-wide">
              Latest Block
            </h4>
            <p className="mt-1 text-lg font-semibold text-gray-900">
              #{networkInfo.blockNumber.toLocaleString()}
            </p>
          </div>
          
          <div>
            <h4 className="text-sm font-medium text-gray-500 uppercase tracking-wide">
              Gas Price
            </h4>
            <p className="mt-1 text-lg font-semibold text-gray-900">
              {formatGasPrice(networkInfo.gasPrice)}
            </p>
          </div>
        </div>
      </div>

      {/* Network Actions */}
      <div className="border-t pt-6">
        <h4 className="text-sm font-medium text-gray-900 mb-4">Network Actions</h4>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          <button className="px-4 py-2 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 text-sm font-medium">
            Refresh Network Info
          </button>
          <button className="px-4 py-2 bg-green-50 text-green-700 rounded-md hover:bg-green-100 text-sm font-medium">
            Check Connection
          </button>
          <button className="px-4 py-2 bg-purple-50 text-purple-700 rounded-md hover:bg-purple-100 text-sm font-medium">
            View Block Explorer
          </button>
        </div>
      </div>

      {/* Network Stats */}
      <div className="bg-gray-50 rounded-lg p-4">
        <h4 className="text-sm font-medium text-gray-900 mb-3">Network Statistics</h4>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
          <div>
            <p className="text-2xl font-bold text-blue-600">
              {networkInfo.blockNumber.toLocaleString()}
            </p>
            <p className="text-xs text-gray-500">Total Blocks</p>
          </div>
          <div>
            <p className="text-2xl font-bold text-green-600">
              {formatGasPrice(networkInfo.gasPrice)}
            </p>
            <p className="text-xs text-gray-500">Avg Gas Price</p>
          </div>
          <div>
            <p className="text-2xl font-bold text-purple-600">
              {networkInfo.isConnected ? '100%' : '0%'}
            </p>
            <p className="text-xs text-gray-500">Uptime</p>
          </div>
          <div>
            <p className="text-2xl font-bold text-orange-600">
              ~15s
            </p>
            <p className="text-xs text-gray-500">Block Time</p>
          </div>
        </div>
      </div>
    </div>
  )
}