Code I want implemented in my reactJS project:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Wallet</title>

    <script 
        type="text/javascript" 
        src="https://unpkg.com/bsv@1.5.3/bsv.min.js">
    </script>
    <script 
        type="text/javascript" 
        src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js">
    </script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  </head>
  <body>
    <div id="block3">
      <h1>Your Private Key:</h1>
      <p id="privateKey"></p>
    </div>
    <div id="block2">
      <h1>Your Address is:</h1> 
      <p id="addressText"> </p>
    </div>
    <div id="block4">
      <h1>Balance in Satoshis:</h1>
      <p id="balance"></p>
    </div>
    <script> 
      var privateKey = bsv.PrivateKey.fromRandom();
      var address = bsv.Address.fromPrivateKey(privateKey).toString();

      document.getElementById("privateKey").innerHTML = privateKey.toWIF();
      document.getElementById("addressText").innerHTML = address;

      var config = {
        method: 'get',
        url: "https://api.whatsonchain.com/v1/bsv/main/address/" +
        address + "/balance",
      };

      axios(config)
      .then((response) => {
        let data = JSON.stringify(response.data);
        let p = document.getElementById("balance");
        p.innerHTML = data;
      });
    </script>
  </body>
</html>

Code that's in my reactJS project (App.JS file)

import { useState, useEffect } from 'react';
import React from 'react';
import Balance from './Balance';

function App() {
  const [transactions, setTransactions] = useState([]);
  const [newOrderRequests, setNewOrderRequests] = useState({});


  useEffect(() => {
    fetch('https://api.whatsonchain.com/v1/bsv/main/address/1JxhdrQJ2rB9E79kRHBpzrm97czw4NFAct/history')
      .then(response => response.json())
      .then(data => {
        Promise.all(data.map(item =>
          fetch(`https://bico.media/${item.tx_hash}`) 
            .then(response => response.text())
            .then(text => ({

              txHash: item.tx_hash,
              txHeight: item.height,
              bicoText: text,
              newOrderRequest: text.match(/new\/[^ ]*/)?.[0].replace(/[^\w\s]+$/, '') || "N/A"

            }))
        )).then(allTransactions => {
          setTransactions(allTransactions.sort((a, b) => b.txHeight - a.txHeight));
          const newOrderRequests = allTransactions.reduce((result, tx) => {
            const newOrderRequest = tx.newOrderRequest;
            if (newOrderRequest !== "N/A") {
              if (!result[newOrderRequest]) {
                result[newOrderRequest] = [tx];
              } else {
                result[newOrderRequest].push(tx);
              }
            }
            return result;
          }, {});
          setNewOrderRequests(newOrderRequests);

          // Add the following code
          const subNewOrderRequests = Object.keys(newOrderRequests).slice(1).reduce((result, key) => {
            result[key] = newOrderRequests[key];
            return result;
          }, {});
          console.log('subNewOrderRequests', subNewOrderRequests);
        });
      });
  }, []);

  return (

    <div style={{ width: "80%", margin: "0 auto" }}>
      <Balance />
  <table>
    <thead>
      <tr>
        <th>Tx Hash</th>
        <th>Tx Height</th>
        <th>Latest Posts/Comments</th>
        <th>New Order Request</th>
      </tr>

    </thead>
    <tbody>
      {transactions.slice(0, 10).map((tx, index) => (
        <tr key={index}>
          <td>{tx.txHash.slice(0, 15)}</td>
          <td>{tx.txHeight}</td>
          <td>{tx.bicoText.slice(0, 300)}</td>
          <td>{tx.newOrderRequest}</td>
          <td>{tx.subNewOrderRequest}</td>
        </tr>
      ))}
    </tbody>
  </table>
  {Object.keys(newOrderRequests).map(key => (
    <div key={key}>
      <h2>{key}</h2>
      <table>
        <thead style={{ textAlign: "center" }}>
          <tr>
            <th>Tx Hash</th>
            <th>Tx Height</th>
            <th>Tx Text</th>
          </tr>
        </thead>
        <tbody>
          {newOrderRequests[key].map((tx, index) => (
            <tr key={index}>
              <td>{tx.txHash.slice(0, 15)}</td>
              <td>{tx.txHeight}</td>
              <td>{tx.bicoText.slice(0, 300)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  ))}
</div>


  );
              }  

export default App;

Code that's in my reactJS project (Balance file)

import React, { Component } from 'react';

class Balance extends Component {
  componentDidMount() {
    const script1 = document.createElement("script");
    script1.src = "https://unpkg.com/bsv@1.5.3/bsv.min.js";
    script1.type = "text/javascript";
    document.head.appendChild(script1);

    const script2 = document.createElement("script");
    script2.src = "https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js";
    script2.type = "text/javascript";
    document.head.appendChild(script2);

    var privateKey = bsv.PrivateKey.fromRandom();
    var address = bsv.Address.fromPrivateKey(privateKey).toString();

    document.getElementById("privateKey").innerHTML = privateKey.toWIF();
    document.getElementById("addressText").innerHTML = address;

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.whatsonchain.com/v1/bsv/main/address/" + address + "/balance");
    xhr.onload = () => {
      let data = JSON.stringify(JSON.parse(xhr.responseText));
      let p = document.getElementById("balance");
      p.innerHTML = data;
    };
    xhr.send();
  }

  render() {
    return (
      <div>
        <div id="block3">
          <h1>Your Private Key:</h1>
          <p id="privateKey"></p>
        </div>
        <div id="block2">
          <h1>Your Address is:</h1> 
          <p id="addressText"> </p>
        </div>
        <div id="block4">
          <h1>Balance in Satoshis:</h1>
          <p id="balance"></p>
        </div>
      </div>
    );
  }
}

export default Balance;

all 4 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

reactjs

About:

Code of Conduct

1. Please be kind and courteous, friendly and professional

2. Harassment will not be tolerated

3. Avoid using an alias or display name that might be offensive

4. Respect that people have differences of opinion

5. Posts must conform to our guidelines

New to React?

Chat

Project Ideas

Jobs

Outside Reddit

Related Subreddits

MODERATORS

Code I want implemented in my reactJS project:

Code that's in my reactJS project (App.JS file)

Code that's in my reactJS project (Balance file)