Skip to main content

Display Client Data in a Browser

The following example covers is based on the How to Create a Simple Connection article, but it will log the data in the browser instead of the command line interface. To run it, you simply need to open the .html file in your browser of choice.

Example Code​

stardust/packages/iota/examples/browser/index.html
loading...

Expected Output​


iota.js Simple Browser ExampleIs the node healthy Yes

Node Info
        Name: HORNET
        Version: 2.0.0-alpha.23
        Status
                Is Healthy: true
                Latest Milestone Index: 54851
                Latest Milestone Timestamp: 1657543301
                Latest Milestone Id: 0x49fe39afe197426e085fc5ce61ba2168307075d13b0b311407654d09532f7efa
                Confirmed Milestone Index: 54851
                Confirmed Milestone Timestamp: 1657543301
                Confirmed Milestone Id: 0x49fe39afe197426e085fc5ce61ba2168307075d13b0b311407654d09532f7efa
                Pruning Index: 0
        Protocol
                Network Name: alphanet-8
                Bech32 HRP: rms
                Token supply: 2779530283277761
                Protocol version:
                Min PoW Score: 1000
                Rent
                        VByte Cost: 500
                        VByte Factor Data: 1
                        VByte Factor Key: 10
        Base token
                Name: Shimmer
                Ticker Symbol: SMR
                Unit: SMR
                Sub unit: glow
                Decimals: 6
                Use metric prefix: false
        Metrics
                Blocks Per Second: 5.6
                Referenced Blocks Per Second: 4.8
                Referenced Rate: 85.71428571428571
        Features: []

Tips
        Tip 1 Block Id: 0x05789c77904b4922004c04624aff85543442634044404ecec95c8498fcb95e49
        Tip 2 Block Id: 0x5d9a4d67d86c5e5fefcbb884850e3a4ed0cb8b546fe2beb36059a150726dcfb7
        Tip 3 Block Id: 0x7c6159ac6c6473ef1e36c4de298a6b77bbb84d0ad200cfdccca5ae9a396032e7
        Tip 4 Block Id: 0xd270eba03af6b1af34845c2eebcfa6be4be225d4e3875a32d6fa7b763b88bfb2

Submit Block:
        Block Id 0x844c9f8c363123774739acfc6ff60bc20bb61a6ddc829c9af6d3c8ccf3525111

Get Block
        Protocol Version: 2
        Parent 1 Block Id: 0x05789c77904b4922004c04624aff85543442634044404ecec95c8498fcb95e49
        Parent 2 Block Id: 0x5d9a4d67d86c5e5fefcbb884850e3a4ed0cb8b546fe2beb36059a150726dcfb7
        Parent 3 Block Id: 0x7c6159ac6c6473ef1e36c4de298a6b77bbb84d0ad200cfdccca5ae9a396032e7
        Parent 4 Block Id: 0xd270eba03af6b1af34845c2eebcfa6be4be225d4e3875a32d6fa7b763b88bfb2
        Tagged Data Payload
                Tag: Foo
                Data: Bar
        Nonce: 15372286728091295777

Block Metadata
        Block Id: 0x844c9f8c363123774739acfc6ff60bc20bb61a6ddc829c9af6d3c8ccf3525111
        Parent 1 Block Id: 0x05789c77904b4922004c04624aff85543442634044404ecec95c8498fcb95e49
        Parent 2 Block Id: 0x5d9a4d67d86c5e5fefcbb884850e3a4ed0cb8b546fe2beb36059a150726dcfb7
        Parent 3 Block Id: 0x7c6159ac6c6473ef1e36c4de298a6b77bbb84d0ad200cfdccca5ae9a396032e7
        Parent 4 Block Id: 0xd270eba03af6b1af34845c2eebcfa6be4be225d4e3875a32d6fa7b763b88bfb2
        Is Solid: true
        Ledger Inclusion State:
        Should Promote: false
        Should Reattach: false

Block Raw
        Raw: 0x020405789c77904b4922004c04624aff85543442634044404ecec95c8498fcb95e495d9a4d67d86c5e5fefcbb884850e3a4ed0cb8b546fe2beb36059a150726dcfb77c6159ac6c6473ef1e36c4de298a6b77bbb84d0ad200cfdccca5ae9a396032e7d270eba03af6b1af34845c2eebcfa6be4be225d4e3875a32d6fa7b763b88bfb20f0000000500000003466f6f0300000042617221605555555555d5

Block Decoded
        Protocol Version: 2
        Parent 1 Block Id: 0x05789c77904b4922004c04624aff85543442634044404ecec95c8498fcb95e49
        Parent 2 Block Id: 0x5d9a4d67d86c5e5fefcbb884850e3a4ed0cb8b546fe2beb36059a150726dcfb7
        Parent 3 Block Id: 0x7c6159ac6c6473ef1e36c4de298a6b77bbb84d0ad200cfdccca5ae9a396032e7
        Parent 4 Block Id: 0xd270eba03af6b1af34845c2eebcfa6be4be225d4e3875a32d6fa7b763b88bfb2
        Tagged Data Payload
                Tag: Foo
                Data: Bar
        Nonce: 15372286728091295777

Latest Milestone Payload
        Milestone Index: 54851
        Included Merkel Root 0xb46f508b2dcd240cbc927453eeae3e7f800a9a0f8e0415ce577acea50da039cf
        Applied Merkel Root 0x0e5751c026e543b2e8ab2eb06099daa1d1e5df47778f7787faab45cdf12fe3a8
        Previous Milestone Id: 0x5432f5761fdb156e14add8227ae7c48085011ca2097679e08e4d33fa2e34379d
        Timestamp: 1657543301

Output
        Block Id: 0x0000000000000000000000000000000000000000000000000000000000000000
        Transaction Id: 0x0000000000000000000000000000000000000000000000000000000000000000
        Output Index: 0
        Is Spent: true
        Basic Output
                        Amount: 2779530283277761
                        Native Tokens
                        Unlock Conditions
                                                Address Unlock Condition
                                                        Ed25519 Address
                                                                Public Key Hash: 0x3845105b59429361a75b3203a6e24e16d19540aad6bd1936449b62f1c4bbe5da
                        Features

Done

Troubleshooting​

If you are getting the following error, it means your local Proof of Work is taking too long to finish. By the time it finishes the parent blocks are no longer valid. You can use simple connection how-to that showcases the functionalities as this example.

Error: invalid parameter, error: block is below max depth: invalid block: code=400, message=invalid parameter