Getting started with Waves Signer in 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 ❤
