readbc.js

import React, { useEffect, useState } from "react"

const apis = [
  'https://monapa.electrum-mona.org/_api',
  'https://mpchain.info/api/cb',
  'https://wallet.monaparty.me/_api',
];

export default function ReadBC(props) {
  const [msgs, setMsgs] = useState(null);

  function readbc(api, command, params) {
    const prms = { method: command, params };
    callApi(api, 'proxy_to_counterpartyd', prms)
      .then(res => res.json())
      .then(response => {
        setMsgs(response.result);
      });
  }

  function prepare(api) {
    const params = {
      limit: 10,
      order_by: 'block_index',
      order_dir: 'DESC',
      /*
      filters: [
        {
          field: 'text',
          op: 'LIKE',
          value: '@b.m %'
        }
      ]
      */
    };
    readbc(api, 'get_broadcasts', params);
  }

  function clicked() {
    prepare(apis[1]);
  }

  useEffect(() => {
    if (msgs === null) {
      prepare(apis[1]);
    }
  });

  const tags = (msgs || []).map((msg, i) => {
    const idx = msg.block_index;
    let src = msg.source;
    let text = msg.text;
    let img = null;
    const time = msg.timestamp;
    const date = new Date(time * 1000);
    const datestr = date.toLocaleString('ja-JP', { timeZone: 'JST' });
    if (text.match(/^@b\.[mu] /)) {
      const body = text.substr(5);
      const data = JSON.parse(body);
      if (typeof data === 'string') {
        text = data;
      } else {
        text = data.m || '';
        const imgsrc = data.i || data.p;
        if (imgsrc) {
          img = (
            <img src={'https://i.imgur.com/' + imgsrc.substr(1)} alt='' />
          );
        }
        src = data.n || src;
      }
    }
    return (
      <div key={i} >
        <pre>
          {text}
        </pre>
        <br />
        {img}
        <br />
        block {idx}
        <br />
        {datestr}
        <br />
        {src}
        <hr />
      </div>
    );
  });
  return (
    <>
      <button onClick={clicked}>Reload</button>
      {tags}<br />
    </>
  );
}

function callApi(api, command, params) {
  const body = {
    jsonrpc: '2.0',
    id: 0,
    method: command,
    params
  };
  const params2 = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify(body),
  };
  return fetch(api, params2);
}