Revshare.js - a Revshare Web Component
Emilie Ma

Emilie Ma @kewbish

About: ​I primarily write on my personal blog (https://kewbi.sh/blog) - please check out my writing there!

Location:
Vancouver, BC
Joined:
Apr 16, 2020

Revshare.js - a Revshare Web Component

Publish Date: May 31 '20
15 4

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 for Web Monetization revenue splitting. #gftwhackathon Winner.

Revshare.js 💸

A JS library for revenue sharing. Made for the #gftwhackathon, won the Grand Prize as a Creative Catalyst.
Available on NPM at @kewbish/revshare.
Made in vanilla JS, May 2020.
Created by Kewbish.
Released under the MIT License.

See the project landing page. Issues and feature requests are welcome!

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>

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 done probablistically nature due to limitations of…

View on GitHub

...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:

kewbish

Halfway through GFTW!

Emilie Ma ・ May 21 '20

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 :).)

Comments 4 total

Add comment