Superhero Button

Installation

You can get it as npm package or from the unpkg.com.

With npm

• run $ npm install @aeternity/superhero-button --save in the root or your project
• import this package by import superheroButton from '@aeternity/superhero-button';

With unpkg.com and <script> tag

Add this to your website's HTML:

<script src="https://unpkg.com/@aeternity/[email protected]/dist/superhero-button.styles.js"></script>

This will define superheroButton in the global scope.

With custom styles

You can import and process styles manually by importing dist/style.css and dist/superhero-button.js separately. Or even you can don't import styles at all, and write your own instead.

Usage

Button (superheroButton)

This library exports a function that creates buttons. This function accepts arguments:

• class name of nodes that should become buttons, or the DOM node itself (this option simplifies integration into Frontend frameworks like Vue/React)
• options object

Option | Description --- | --- size | Default icon. Possible values icon, large, medium, small. See the screenshots section below. account | Optional. When set you can easily claim your tips. Accepts account public key or name ending with .chain. url | Optional. Url to be tipped. Default is set to the current page url.

Example

<div class="my-button">Donate</div>
<script type="text/javascript">
  superheroButton('.my-button', {
    size: 'large',
    account: 'example.chain',
    url: 'https://example.com',
  });
</script>

Select the button style you like the most and adopt this code to your website's HTML. Additional examples can be found here.

Screenshots

Size value | Screenshot --- | --- icon | small | medium | large |

Paywall (superheroButton.ensurePayed)

This function asks the user to send a tip to the specified page. It won't ask to send a tip if it was sent before using the current browser. The function accepts options object.

Option | Description --- | --- url | Optional. Url to be required to pay for. Default is set to the current page url.

Example

<script type="text/javascript">
  superheroButton.ensurePayed({ url: 'https://example.com' });
</script>

Additional examples can be found here.

Screenshots

Start the project for development

You need to install Node.js firstly.

$ npm install
$ npm start

Build for production

$ npm run build