Add basic frontend to visualice the data in a nicer way

[alrevuelta]

• Add basic User Interface frontend to interact and visualice the blockchain
• Add buttons and text inputs to be filled with data (i.e. for a new transaction)

[Leonyxtested]

Using web interface or CLI?

[alrevuelta]

Using web interface or CLI?

I think it would be nice to have a nice web interface to interact with the blockchain and visualise its data. A cli might be also helpful (i.e. to send txs) but since several http endpoints are offered (i.e. localhost:5000/addtx?sender=A&to=B&amount=100) I wouldn't prioritize it, as it doesn't add much value imho.

[Leonyxtested]

It's not being easy to make it nice, Flask doesn't accept (or it's a bug I don't see) certain things with JQuerty. And bringing the information from the block is being a headache.

But it can be made pretty.

[alrevuelta]

It's not being easy to make it nice, Flask doesn't accept (or it's a bug I don't see) certain things with JQuerty. And bringing the information from the block is being a headache.

I have little experience with web development. I would make it as easy as possible. Perhaps react can be also an option? Its just a frontend that when clicking a button it sends a http get with some parameters to a given endpoint (i.e. add tx)

[Leonyxtested]

And I have little back-end experience except with PHP. Doing the inputs is easy with GET(not the safest), I will test to do transactions and see how the redirects work. It's the first time I deal with this framework.

By the way, why Block is SUCH a long list? I'm trying to decompose it to get the data cleanly and, I have many doubts.

[Leonyxtested]

For this result(something basic)

I need this code from main.py:

@app.route('/', methods=['GET'])
def index():
    node_id=blockchain.node_id
    mempool=blockchain.mempool
    peerstore=str(blockchain.peerstore)
    peerstore = peerstore.replace("{'", "").replace("'}", "") #To visualise it better
    blocks=str(blockchain.blocks) 
    c1=blocks.find('index')
    c2=blocks.find('miner')
    c3=blocks.find('timestamp')
    c4=blocks.find('proof')
    c5=blocks.find('prev_hash')
    c6=blocks.find('txs')
    c7=blocks.find('Transaction')
    c8=blocks.find('sender')
    c9=blocks.find('to')
    c10=blocks.find('amount')
    c11=blocks.find('}')

    pru = blocks.rindex(']')
    #print(blocks[c6:pru])     
    tx = blocks[c6:pru].count('Transaction')

    index=blocks[c1:c2].replace('": ', ' : ').replace(', "', ' ')           
    miner=blocks[c2:c3].replace('": "', ' : ').replace('", "', ' ')       
    tiempstamp=blocks[c3:c4].replace('": "', ' : ').replace('", "', ' ')       
    proof=blocks[c4:c5].replace('": ', ' : ').replace(', "', ' ')         
    prevh_hash=blocks[c5:c6].replace('": "', ' : ').replace('", "', ' ')      
    txs=blocks[c6:c7].replace('": [{"py/object": "transaction.', ' : ') 
    Transaction=blocks[c7:c8].replace('", "', ' : ')                         
    sender=blocks[c8:c9].replace('": "', ' : ').replace('", "', ' ')       
    to=blocks[c9:c10].replace('": "', ' : ').replace('", "', ' ')     
    amount=blocks[c10:c11].replace('": ', ' : ')                     
    return render_template("index.html", node_id=node_id, mempool=mempool, peerstore=peerstore, index=index, miner=miner, tiempstamp=tiempstamp, proof=proof, prevh_hash=prevh_hash, txs=txs, Transaction=Transaction, sender=sender, to=to, amount=amount)

I still cannot display the second transaction and the following blocks. I can't handle this result if I don't pass the Blocks list to a string and Flask doesn't allow the use of 'While', which makes it very complicated to make the values output multiple times.

Import render_template from Flask.

[Leonyxtested]

I have little experience with web development. I would make it as easy as possible. Perhaps react can be also an option? Its just a frontend that when clicking a button it sends a http get with some parameters to a given endpoint (i.e. add tx)

I have already created a form for sending. When you can, I'll fix it so you can log in to other people's accounts haha.