@aeternity/superhero-button

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/superhero-button@0.3.0/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