This post has been de-listed

It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.

Please help put this html script code into my reactjs project

Post Flair (click to view more posts with a particular flair)

Needs Help

Post Body

Video pleading for help

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/[email protected]/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/[email protected]/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;

Author

User Suspended

Account Strength

Suspended 4 months ago

Account Age

1 year

Verified Email

Yes

Verified Flair

Total Karma

Link Karma

5,901

Comment Karma

1,059

Profile updated: 1 week ago

Posts updated: 1 year ago

NewOCLibraryReddit

Subreddit

r/reactjs

Post Details

We try to extract some basic information from the post title. This is not always successful or accurate, please use your best judgement and compare these values to the post title and body for confirmation.

Posted: 1 year ago
Reddit URL: View post on reddit.com
External URL: reddit.com/r/reactjs/com...