2

I'm building a simple website with pure HTML and JS (no React, Angular, etc.). I use Nami to connect to a Cardano wallet and use the Nami's cardano.getBalance() method to get the balance of the wallet.

This output (as most of the outputs of Nami) is CBOR encoded. I used https://cbor.me/ to decode it manually but I need to be able to do this in code to be able to work with the values.

Nami's README says to use the cardano-serialization-lib to do this. So I tried to use it but there is no documentation on how to actually use it.

Here's what I've done so far:

<html>
  <head>
    <!-- Cardano Serialization Lib -->
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@emurgo/[email protected]/cardano_serialization_lib_bg.min.js"
    ></script>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@emurgo/[email protected]/cardano_serialization_lib.asm.min.js"
    ></script>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@emurgo/[email protected]/cardano_serialization_lib.min.js"
    ></script>
  </head>
  <body>
    <script>
      function f() {
        window.cardano.enable().then((a) => {
          console.log(a);
          window.cardano.getBalance().then((b) => console.log(b));
        });
      }
      setTimeout(f, 1000); // wait for cardano object to be injected
    </script>
  </body>
</html>

I included the cardano-serialization-lib-browser using jsdelivr.com. Now the goal is to use this library to deserialize the output of cardano.getBalance().

My problems are:

  1. I don't know how to call the library in my JS code.
  2. I don't know what functions to use to deserialize CBOR as there is no documentation.

Any help would be highly appreciated.

Improve this question

2 Answers 2

Reset to default
1

With the help of Samuel's answer, I have been able to get it running.

Some important things I didn't know:

  • import from CDN has to be done with the full url.
  • The library has to be imported inside of my script, not in the <head>.

Here's the working example:

<html>
  <head>
    <!-- Cardano Serialization Lib -->
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@emurgo/[email protected]/cardano_serialization_lib_bg.min.js"
    ></script>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@emurgo/[email protected]/cardano_serialization_lib.asm.min.js"
    ></script>
  </head>
  <body>
    <script type="module">
      import * as wasm from "https://cdn.jsdelivr.net/npm/@emurgo/[email protected]/cardano_serialization_lib.min.js";

      function hexToBytes(hex) {
        for (var bytes = [], c = 0; c < hex.length; c += 2)
          bytes.push(parseInt(hex.substr(c, 2), 16));
        return bytes;
      }

      function f() {
        console.log("hello");
        window.cardano.enable().then((a) => {
          console.log(a);
          window.cardano.getBalance().then((res) => {
            const balance = wasm.Value.from_bytes(hexToBytes(res));
            const lovelaces = balance.coin().to_str();

            console.log(lovelaces);
          });
        });
      }
      setTimeout(f, 1000);
    </script>
  </body>
</html>
Improve this answer
-1

CBOR is a serialization standard that's unrelated to the blockchain tooling itself. For nodejs, you can use something like https://github.com/paroga/cbor-js to encode/decode the CBOR.

Improve this answer
3
  • I had a look at this library but it was last updated in 2015 and seems like it's not maintained anymore. And besides that I'll need some cardano specific functionality later like building transactions etc. Therefore I need to use cardano-serialization-lib.
    – eddex ♦
    Commented Dec 23, 2021 at 19:29
  • Ah, your question didn't make it clear what you were trying to do. I thought you just wanted cbor.me equivalent in your code (which serialization lib doesn't provide). I'm not aware of any sort of balance object but for example the transaction class has a from_bytes method. See github.com/Emurgo/cardano-serialization-lib/blob/…
    – Samuel Leathers
    Commented Dec 23, 2021 at 21:28
  • 1
    It's a Value type it returns. See cardano.stackexchange.com/questions/4112/… which is a duplicate of this question.
    – Samuel Leathers
    Commented Dec 23, 2021 at 21:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.