Howto install Waves Signer

Last updated 20 Jan 2023


I am using Ubuntu Linux as system in this tutorial, but it is probably no problem to use Windows or Mac as well.

It is required to have nodejs and npm installed on your system. If you dont have and using Debian based Linux, you can easily install them by opening terminal and type:

sudo apt update
sudo install nodejs npm

1. Create an empty folder in your home folder and name it waves-signer-demo

2. In waves-signer-demo folder create a file named package.json and save the following to it:

{
"name": "waves-signer-demo",
"version": "1.0.0",
"description": "",
"author": "",
"license": "",
"scripts": {
"build": "webpack",
"start": "http-server ./output/ -p 8081"
},
"dependencies": {
"@waves.exchange/provider-cloud": "^1.1.0",
"@waves.exchange/provider-web": "^1.3.0",
"@waves/provider-keeper": "^2.0.4",
"@waves/provider-ledger": "^0.2.1",
"@waves/provider-metamask": "^1.1.6",
"@waves/signer": "^1.1.0"
},
"devDependencies": {
"http-server": "^0.12.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
}

The ^ sign instructs npm to load latest sub version of specified major version. So it will automatically set the last and the number in the middle to highest possible but not the first.

3. In waves-signer-demo folder create another file named webpack.config.js and save the following to it:

const path = require('path');

const main = (name, minimize) => ({
entry: './your-app-source.js',
mode: "production",
optimization: {
minimize,
usedExports: true
},
resolve: {
extensions: ['.js'],
},
output: {
globalObject: "this",
filename: name,
path: path.resolve(__dirname, 'output'),
}
});

module.exports = [
{
...main('dapp.js', false),
devtool: 'inline-source-map',
mode: "development",
},
{
...main('dapp.min.js', true)
}
];

4. Then create another file named your-app-source.js in waves-signer-folder and save the following to it:

import { Signer } from '@waves/signer';

import { ProviderKeeper } from '@waves/provider-keeper';
import { ProviderWeb } from '@waves.exchange/provider-web';
import { ProviderCloud } from '@waves.exchange/provider-cloud';
import { ProviderLedger } from '@waves/provider-ledger';
import { ProviderMetamask } from '@waves/provider-metamask';

const signer = new Signer( {
NODE_URL: 'https://node.wscan.io', // you could use your own node here or for testnet: https://nodes-testnet.wavesnodes.com
} );

document.querySelector('[data-login="keeper"]').addEventListener("click", function()
{
signer.setProvider(new ProviderKeeper());
signer.login();
});

document.querySelector('[data-login="wx-seed"]').addEventListener("click", function()
{
signer.setProvider(new ProviderWeb());
signer.login();
});

document.querySelector('[data-login="wx-mail"]').addEventListener("click", function()
{
signer.setProvider(new ProviderCloud());
signer.login();
});

document.querySelector('[data-login="ledger"]').addEventListener("click", function()
{
signer.setProvider(new ProviderLedger({wavesLedgerConfig:{networkCode:84}}));
signer.login();
});

document.querySelector('[data-login="metamask"]').addEventListener("click", function()
{
signer.setProvider(new ProviderMetamask());
signer.login();
});

document.querySelector('[data-send-tx]').addEventListener("click", function()
{
signer.transfer({
recipient: "wcap",
amount: 1
}).broadcast().then(console.log)
});

This is your JavaScript code base.

5. In waves-signer-demo folder create another folder named output

6. Create file named index.html in new output folder and write following to it:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Waves Signer Demo</title>
</head>
<body>

<button data-login="keeper">Login (Keeper)</button><br>
<button data-login="wx-seed">Login (WX Seed)</button><br>
<button data-login="wx-mail">Login (WX Email)</button><br>
<button data-login="ledger">Login (Ledger)</button><br>
<button data-login="metamask">Login (MetaMask)</button><br>

<hr>

<button data-send-tx>Send Transfer</button>

<script type="text/javascript" src="dapp.min.js"></script>
</body>
</html>

This is your HTML code base.

7. Open terminal and navigate to waves-signer-demo folder. (Type cd ~/waves-signer-demo)

8. Then install all dependencies by typing:

npm i

9. And finaly build output script by entering:

npm run build

After this you should see dapp.js and dapp.min.js files in output folder. They have the same logic in it but dapp.min.js is smaller in size because its minified.


For testing your app you can now upload index.html and dapp.min.js files to a web server or just start a local test server by typing:

npm run start

Then open browser tab and type: http://127.0.0.1:8081

You should see the 6 buttons defined in index.html. Now you can edit your-app-source.js and index.html to fit your needs and dont forget to run npm run build after that.. This example includes all signer providers existing at this time (MetaMask, Ledger, Keeper, WxCloud and WxWeb) and the minified dapp.min.js file in output folder will get ~2.4MB big! If you dont need all the signer providers, you can remove some packet imports. For example for removing WX Email Login (ProviderCloud) just remove the line: import { ProviderCloud } from '@waves.exchange/provider-cloud'; from your-app-source.js and enter again in terminal npm run build to generate a new dapp.min.js without the ProviderCloud packet in it.