therbendo / nimiq.github.io

Nimiq Frontend Developer Reference

Nimiq Ecosystem

By using Nimiq APIs and libraries you can

• extend your projects, websites, and apps with a payment system; and
• allow customers of your online shop to pay comfortably with NIM directly from their browser; or
• build apps and services enriching the Nimiq apps ecosystem.

The goal of this documentation is to get you started integrating Nimiq into your project.

Content

• Nimiq Hub: Provide the users of your project to use their Nimiq Accounts during checkout and pay for products and services in NIM, or to send transactions, and more.
• Nimiq Style (demo): This Reusable CSS framework will give your app the Nimiq UI look and feel.
• Nimiq Vue.js Components: Reusable Vue.js components to build Nimiq-enabled websites and webapps.
• Community Tools and APIs: Useful tools and APIs developed by the Nimiq Community.
• Tutorials: Learn how to build a small app that can manage a wallet, send and receive transactions, and looks neat using Nimiq's look & feel in three short tutorials.

Terminology

Nimiq is aiming for mainstream adoption and thus strives to use laymen terms for all UIs. Building apps using Nimiq APIs and libraries means becoming part of the Nimiq Ecosystem. For optimal usability and a pleasant user experience for your users, we highly recommend using the same terminology for all user facing parts.

While using layman terms in the UI, within the code, typical terms of the crypto space are being used. The following map will give you an idea which term to use when. See the “Terminology” section in the FAQs on nimiq.com for more details on each term.

Layman term (for UI use)	API term	Term in code
Nimiq Account Number NQXX XXXX XXXX ...	address	core code: userFriendlyAddress front-end: humanReadableAddress
Nimiq Account address + label	account	account
Nimiq Wallet with one or more accounts	walletId	keyId or loginId
Account Recovery Words 24 words	n/a	mnemonicPhrase

Tech

The Nimiq front-ends are build with TypeScript 3 and CSS on Vue.js and delivered compiled to ES2015. Find more details here. The Front-ends are tested on latest versions of Firefox, Chrome/Chromium, and Safari.

Improve This Documentation

Great idea! Welcome on board! If it's rather a smaller issue your after —such as wording, typos, or adding a few lines— use the little pen icon in the lower right. GitHub will help you to fork the repository, do the changes, and finally start a pull request so that your changes can be reviewed and merged in.

If you have bigger plans, a good starting point is to summit an issue. This way, the team as well as community members can contribute to the idea, collect facts, and give advice. Once some communication has happened and it's clear what should be done to improve the documentation, go ahead and get the source code from Github and set up you machine to build GitHub pages as described below

Get Source Code

git clone [email protected]:nimiq/nimiq.github.io.git nimiq --recursive

Note: If you experience issues during this step, make sure you have an SSH key set up for your GitHub account. Even if you clone the repository using HTTPS, submodules might require SSH.

Build Documentation Locally

Please refer to the Doc-Theme documentation.

Modify Referred Repositories

The documentation structure makes use of Git submodules, i.e. including source code from other repositories.

Update Modules

cd nimiq
git submodule foreach --recursive git pull

Fetch new Modules

cd nimiq
git pull
git submodule sync
git submodule update --recursive --remote
git submodule foreach --recursive git checkout master

Add a Submodule

cd nimiq
git submodule add -b <branch> <repository> [<submodule-path>]

For example:

git submodule add -b master ../x-element.git libraries/x-element/

Remove a Submodule

cd nimiq
git submodule deinit <submodule-path>
rm -rf .git/module/<submodule-path>