Getting started with Waves Signer in 2022

Niyazi Çoban Jr.
2 min readApr 10, 2022

Hello everyone, here’s a simple guide to start to use WAVES blockchain services with JavaScript. There’s a library called WAVES Signer. Pretty cool.

I’m not familiar to JavaScript items, so it’s was very rough to me to figure out how to use the Signer library.

let start step by step.

You should have npm installed. Install npm first.

Now open a new folder and use terminal/command prompt to get into it.

npm init -y

the code above creates default package.json file.

npm i @waves/signer — save

the code above installs @waves/signer and adds it to package.json

npm i @waves.exchange/provider-cloud — save

install provider-cloud to let users sign in with their emails

Here is more options https://docs.waves.tech/en/building-apps/waves-api-and-sdk/client-libraries/signer#signer-providerweb-how-it-works

Now we have to install webpack and webpack-cli for package these modules to our web app

npm install webpack — save

npm install webpack-cli — save

webpack needs a src folder and index.js file. So, create the src folder and index.js file in it.

Code your application in this index.js file. After running webpack, it will collect information about your app and create a main.js file in the dist folder. You can use that main.js file with your html file by

<script type=”module” src=”dist/main.js”></script>

to build the main.js file, get into your package.json file

add

“build”: “webpack”

to scripts. probably under the test. don’t forget the , after the test script :)

go back to your command prompt/terminal and type

npm run build

If everything’s ok, you can see a main.js file in your dist folder. Link it with your html file and start using :)

index.js code example:

import { Signer } from ‘@waves/signer’;

import { ProviderCloud} from ‘@waves.exchange/provider-cloud’;

const signer = new Signer();

signer.setProvider(new ProviderCloud());

async function logToWaves(){

const user = await signer.login();

const balances = await signer.getBalance();

const [broadcastedTransfer] = await signer

.transfer({amount: 100000000, recipient: ‘alias:T:merry’}) // Transfer 1 WAVES to alias merry

.broadcast(); // Promise will resolved after user sign and node response

const [signedTransfer] = await signer

.transfer({amount: 100000000, recipient: ‘alias:T:merry’}) // Transfer 1 WAVES to alias merry

.sign(); // Promise will resolved after user sign

}

logToWaves();

html page code example:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8">

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0">

<title>WAVES SIGNER EXAMPLE</title>

</head>

<body>

<script type=”module” src=”dist/main.js”></script>

</body>

</html>

you should run a http-server to view the code.

to use build-in npm http server type to your command prompt/terminal:

http-server . -p 8080

I hope this helps you :)

Donations welcome to alias “niyo”

Have a great day ❤

--

--