🖲️ Lisk Buttons is a web component built using Stencil that provides you with re-usable buttons for sending Lisk payments and receiving votes.

Using lisk buttons in your project

Script tag

• Put a script tag <script src='https://unpkg.com/@lisk-builders/[email protected]/dist/liskbuttons.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc.

Node Modules

• Run npm install @lisk-builders/lisk-buttons --save
• Put a script tag similar to this <script src='node_modules/lisk-buttons/dist/liskbuttons.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc.

Send Button

Params:

• amount: the amount of LSK the that should be sent
• recipient: the address the LSK should be sent to
• button-title: The text that appears on the button

<lisk-button-send amount=100 recipient="15015136092749848942L" button-title="Donate Me"></lisk-button-send>

Vote Button

Params:

• votes: the list of delegates that should be voted in
• unvotes: the list delegates that should be unvoted
• button-title: The text that appears on the button

<lisk-button-vote votes="goodDelegate1,goodDelegate2" unvotes="badDelegate1,badDelegate2" button-title="Vote"></lisk-button-vote>

Sign Button

Params:

• type: 'nano' or 'hub' (optional, default is 'hub')
• source-id: id of an input field used as message source (mutual-exclusive with 'message')
• message: the message to sign (priority is given to 'source-id')
• button-title: The text that appears on the button

Example with Message

<lisk-button-sign type="hub" message="message to sign" button-title="Sign it!"></lisk-button-sign>

Example with Source ID

<input type="text" id="message-input" placeholder="Message...">
<lisk-button-sign type="hub" source-id="message-input" button-title="Sign it!"></lisk-button-sign>

Examples

Here!