DEV Community

Emilie Ma
Emilie Ma

Posted on • Updated on

Revshare.js - a Revshare Web Component

What I built

I went through a bunch of ideas - a Vue component library, implementing this in another site, or adding it to my existing sites.

Eventually, I settled on this idea, and for the entire month of May (minus an OS reinstall and plus tonnes of Google searching), I spent some time exploring Web Components and Javascript!

I've built Revshare.js, a small Javascript library to make revsharing with Web Monetization easier. It provides an interface for a <rev-share> element with a pointers attribute to make probabilistic revsharing easier.

Submission Category:

Foundational Technology (or perhaps Creative Catalyst, I'm not sure where it fits...)

Demo

Add a <script src="http://unpkg.com/@kewbish/revshare"/> tag to your head, and that's all you need to get started.

...
<rev-share pointers='["$jackie.wallet": 60, "$charlie.wallet": 40]'>
    <p>This is your revshared content!</p>
</rev-share>
...
Enter fullscreen mode Exit fullscreen mode

If you'd also like to make your <rev-share> element exclusive, just add the exclusive attribute as well. (This will hide the element when Web Monetization is not enabled.)

...
<rev-share pointers='["$jackie.wallet": 60, "$charlie.wallet": 40]' exclusive>
    <p>This is your revshared, exclusive content!</p>
</rev-share>
...
Enter fullscreen mode Exit fullscreen mode

It works using probabilistic revsharing, and the docs I used as a guideline are available here.

Link to Code

The project is available on GitHub:

GitHub logo kewbish / revshare

A JS library created for #gftwhackathon.

Revshare.js 💸

A JS library for revenue sharing, made for the #gftwhackathon.
Available on NPM at @kewbish/revshare.
Made in JS, May 2020.
Created by Kewbish.
Released under the MIT License.

Installation Usage

This package is available on NPM at @kewbish/revshare.

  • Run npm i @kewbish/revshare to install it in your project.
  • It can then be referenced as below:
<script src="./node_modules/@kewbish/revshare/dist/index.min.js"></script&gt

Alternatively, add a <script> tag in your <head>:

<script src="https://unpkg.com/@kewbish/revshare"></script&gt

Basic Usage

Add a <rev-share> tag anywhere in your body.
This tag requires a pointers attribute, formatted in JSON.

...
<rev-share pointers='{"$john.wallet": 50, "$alicia.wallet": 50}'>
    <p>This is your revenue-shared content!</p>
</rev-share>
...

Additional documentation can be found in the docs folder.

⚠️ This rev-share specification is not 100% accurate, due to the probablistic nature and the limitations of the Web Monetization format.

Project Information

This project is based on the proposed Web Monetization interface. It's…

...on NPM, and on UnPkg.

How I built it

This is built with the basic Web Components API. This was also my first proper Javascript project, and a great learning experience.

I was a bit confused with all the callbacks available, and when exactly they fired. The Mozilla Docs were super useful in this case.

If you'd like to see what else I've posted regarding the GFTW hackathon:

Additional Resources/Info

There are a couple other Web Component submissions that also add Web Monetization functionality - go check those out!

If you have any feedback, let me know! (I'm a complete newbie with Javascript - be gentle :).)

Top comments (4)

Collapse
 
wobsoriano profile image
Robert

Awesome!

Collapse
 
kewbish profile image
Emilie Ma

Thanks :)

Collapse
 
chrislarry33 profile image
Chris Lawrence

Huge congrats on the win!!

Collapse
 
kewbish profile image
Emilie Ma

Thank you! :)