Nimiq Stores for SvelteJS

NimiqSoeren · October 1, 2019, 9:15am

Hello everyone!

as a side-project, I created reactive Nimiq stores for the SvelteJS framework.

What is SvelteJS?

SvelteJS is a compiled front-end framework, which has been around for a few years, but completely redesigned itself with version 3 not too long ago. It is a reactive front-end framework with the same goals as React and Vue, but instead of shipping a big runtime library to the browser, this framework compiles an app with only the minimal required code and can thus have a much much smaller download size and better performing DOM updates. Granted, its feature set is smaller than React and Vue, but it also requires much less code.

I recommend to go through the tutorial, which explains Svelte’s concepts step-by-step:

What are Nimiq Stores for Svelte?

Similar to Redux in React, or Vuex in Vue, Svelte also has the concept of app-wide stores that hold state which can be used from all components. These stores are very simple ES6 functional modules that can be extended and combined to do nearly anything, and they are often compared to React Hooks as well.

Nimiq Svelte Stores wrap the Nimiq Client API (available in Nimiq Core v1.5) and provide blockchain state to Svelte apps through these stores, automatically handling network subscriptions for consensus, balances, transactions, etc. and updating state live. That means you don’t have to write any of this code!

Have a look at the example app:
https://nimiq-svelte-stores.netlify.com
and the code for it:
https://github.com/sisou/nimiq-svelte-stores/blob/master/src/App.svelte

If you have any questions about Svelte or these stores, please ask!

Happy coding!
Sören

NimiqSoeren · October 9, 2019, 11:30am

I just released version 1.1.0, now with Typescript types!

Nothing changes on how you use the library, but now your editor can automatically pick up the types for the stores, and TS can compile with the correct types.

Bittiriko · May 27, 2020, 5:10pm

Is this project still alive? I’d like to use, i’m learning svelte and I have an idea, I’d like to test it.

NimiqSoeren · May 27, 2020, 5:41pm

Hi!

Yes, it is! I noticed that the example app was broken (because I restructured the demo application some time ago), but I just fixed it, so now it’s running again at
https://nimiq-svelte-stores.netlify.app

If you have any questions, feel free to ask here or create an issue in Github

Bittiriko · May 27, 2020, 6:10pm

Hi

thank you.

I’ll test it if someday I have some free time. If I have any doubts i’ll contact with you!

Bittiriko · June 4, 2020, 1:52pm

Hi Soeren

i’ve playing with Svelte and the Nimiq Stores and it works fine but as I can see some of the functions are not implemented. I’m quite ignorant with svelte and javascript.

Is there any possibility to add functions to connect with Hub? I’d like to be able to send transactions with my Svelte app using my account stored on Hub.

Let me know if it’s possible

NimiqSoeren · June 5, 2020, 11:32am

Hi!

The svelte-stores only cover the Nimiq Network part, you are right.

To create a transaction with the Hub, you need to use the HubApi, which is documented here:

You can then give the serializedTx of the Hub result to client.sendTransaction(). client being an export of the svelte-stores.

I hope this makes sense. If you need more help, I am happy to provide example code.

Bittiriko · June 5, 2020, 11:45am

thank you, I’ll investigate, If I have problems I’ll let you know

Bittiriko · June 5, 2020, 5:07pm

Hi Soeren,

how are you doing?

I’ve tried to pick up one address form my hub (I can do that) and the add is to ‘accounts’ svelte store, but I don’t know what I’m doing wrong, Look at handleClick() function.

I’ve tried everything but I’m not an expert with javascript, so I don’t know how to continue:

Here is the code of the component:

<script>
	import {
    accounts,
	} from 'nimiq-svelte-stores';

  let address = getAddress()

  const hubApi = new HubApi('https://hub.nimiq.com');

  async function getAddress() {
      const result = await hubApi.chooseAddress({ appName: 'Hub API Docs' });

      try {
        return result.address;
      } catch (error) {
        throw new Error(result.address);
      }
  };

  function handleClick() {
    address = getAddress();
    let label = '';
    console.log(address);
    accounts.add({address, label});
	};


</script>

<button on:click={handleClick}>
	Choose Address
</button>

{#await address}
	<p>...waiting</p>
{:then address}
	<p>The address is {address}</p>
{/await}

Maybe you can guide me… I’d like to account both, address and label…

NimiqSoeren · June 6, 2020, 12:18pm

Hi!

It’s great that you are getting started with Javascript, Nimiq and Svelte!

Here is a working component, I am explaining what I changed below:

<script>
  import {
    start as startNimiq,
    accounts,
  } from 'nimiq-svelte-stores';
  import HubApi from '@nimiq/hub-api';

  const hubApi = new HubApi('https://hub.nimiq.com');

  // Connect to the Nimiq network, to automatically get account balances in the accounts store
  startNimiq();

  async function getAccount() {
    const account = hubApi.chooseAddress({ appName: 'Hub API Docs' });

    try {
      return await account;
    } catch (error) {
      // TODO: Handle the error instead of throwing
      throw error;
    }
  };

  async function handleClick() {
    const account = await getAccount();
    console.log(account);
    accounts.add(account);
  };
</script>

<button on:click={handleClick}>
  Add Address
</button>

<h2>Addresses</h2>

{#each $accounts as account}
  <p>
    Address: {account.address.toUserFriendlyAddress()} /
    Label: {account.label} /
    Balance: {account.balance / 1e5} NIM
  </p>
{/each}

Changes

Import HubApi from NPM package: import HubApi from '@nimiq/hub-api (not necessary if you added the HubApi as a <script> in index.html)
Instead of displaying the selected account/address in the HTML, I am listing all accounts in the accounts store (needs to be used with the dollar sign to tell Svelte that it’s a store: {#each $accounts as account}
The chooseAddress() HubApi method returns both the address and the label. So instead of only returning the address from the getAddress function, I renamed it to getAccount and return the whole object, including the label.
I am awaiting the getAccount method, because using the Hub is always an asynchronous operation.
I added the Nimiq library to the public/index.html file, above the bundle.js script:

	<!-- add this: --><script defer src="https://cdn.nimiq-testnet.com/web.js"></script>
	<script defer src='/build/bundle.js'></script>

To automatically get the balances from the network for each added account, I am importing { start as startNimiq } from 'nimiq-svelte-stores' as well, and calling it when the app starts, so the network connection is started.
The account in the the $accounts store is a native Nimiq.Account object, so to display the nice address, we have to use its toUserFriendlyAddress() function in the HTML.

I hope this helps you forward and helps you understand better how things work. If you have any more questions, feels free to ask here, or we can also have a call about it

Kind regards,
Sören

Bittiriko · June 6, 2020, 7:00pm

Thank you very much Sören, it has been very helpful and I’ve learnt some more things about JavaScript. Usually I code with c++ and javascript it’s quite different, but I’m learning a lot.

I’m coding one app that will use nimiq blokchain. I’ve all on my mind, some components are working and other not. When all components work, I need to glue them and the app will be ready, more or less. I’m not good with css and I’m not a good designer, so maybe it will be quite ugly. hanks again.

If you don’t mind, I’ll contact with you again if I get stuck, ok?

Thanks again!

Bittiriko · June 7, 2020, 10:23am

Hi Sören,

sorry again, but I got stuck.
I’ve added your code to my svelte app, it works properly. I can read transactions, receiver, sender, amount… but I can’t read the extraData.

Here is my code:

	{#each $transactions as tx (tx.transactionHash.toPlain())}
		<tr>
			<td>{new Date(tx.timestamp * 1000).toLocaleString()}</td>
			<td>{tx.sender.toPlain()}</td>
			<td>{tx.recipient.toPlain()}</td>
			<td>{tx.value / 1e5} NIM</td>
			<td>{tx.state}</td>
			<td>{tx.extraData.toS()}</td>
		</tr>
	{/each}

I have tried with tx.extraData.toPlain() , or tx.extraData.toString() or tx.extraData.toString(), but I don’t know how to do it.

thanks again.

NimiqSoeren · June 7, 2020, 10:53am

Hi!

I believe extraData is an object that, in a regular transaction, contains the property raw, which is a hex string.
So to get it into ASCII you can do

Nimiq.BufferUtils.toAscii(Nimiq.BufferUtils.fromHex(transaction.extraData.raw))

Or any other hex-to-character transformation.

Bittiriko · June 7, 2020, 4:33pm

thank you again for your time, it has been helpful.

After tons of trials the correct way was this:

<td>{Nimiq.BufferUtils.toAscii(tx.data.raw)}</td>

Bittiriko · June 8, 2020, 2:07pm

Hi Söeren,

One question, do you mind if the next time i contact with you via Telegram? I’m on
“Nimiq Coders Dojo” group and I’ve seen you around there,

NimiqSoeren · June 8, 2020, 4:10pm

Yes, definitely! I’m happy to help over Telegram!

Bittiriko · October 14, 2020, 8:24pm

Hi Sören.

How are you doing? You are from Germany, right? Maybe you are interested on this event: https://www.meetup.com/de-DE/Svelte-js-Meetup/

You can promote this code and this project there

There are other Svelte events along Europe: https://svelte-community.netlify.app/events