I’ve been playing around with a React library for Web Monetization, using React Hooks
The goal is to enable React developers to:
- Hide ads for users that have Web Monetization enabled
- Show a thank-you message to users who have Web Monetization enabled
- Display counters to show Web Monetized users how much the site has received
Things that it cannot do:
- Securely show premium content (this library can help but it requires server-side code too)
- Add the Web Monetization meta tag to your site (the meta tag must be there at page load before any JS runs, as per the RFC)
I’d love to get some feedback on the API, especially from anyone who wants to try it out on their own site! It’s available on NPM as react-web-monetization.
8 Likes
I’ve been using Vue.js for our development and have utilized the “vue-meta” package to accomplish the task of placing the web-monetization script into into the head of our app’s pages/components.
For our apps that are meant to be web-monetized entirely (all pages/components) it is easiest to simply load the vue-meta plugin within the main.js of your Vue app and then indicate the meta information within the component/page.
For apps that require selective use of the web-monetization script - you can simply load vue-meta as needed per page/component and then specify it within the export section of the page/component.
This is obviously a very simple implementation - but it seems to be working as intended.
I haven’t combed through the test code or specification to see what is required to get the payment pointer to point at the tip bot. update the paymentPointer variables.
Got a few things on my plate before I get there, but any pointers or suggestions until then are welcomed.
Great work on the react-web-monetization package. I didn’t modify what you did in any way other than changing the meta tag on the index page. It built and published correctly. Not sure if the funds I have are from Coil or this site, but I just signed up for the tip bot and Coil. Love ILP. Had a Codius app hosted with limited functionality, it only displays a static page, but the value is understandable.
Peek definition works fine.
It must be populating from the variable monitizationDetails which is part of the object returned from the getGlobalWebMonitizationState() function. Not clear to me how the GlobalWedMonitizationState is set and if it initializes with the meta tag pointer in the header.
function useMonetizationCounter() {
// get the singleton WM state
var webMonetizationState = getGlobalWebMonetizationState();
webMonetizationState.init();
var _useState = React.useState(webMonetizationState.getState()),
_useState2 = _slicedToArray(_useState, 2),
monetizationDetails = _useState2[0],
setMonetizationDetails = _useState2[1]; // create something we can mutate
var monetizationDetailsCopy = Object.assign({}, monetizationDetails);
React.useEffect(function () {
var onMonetizationStart = function onMonetizationStart() {
// this is purposely mutating because sometimes we get multiple state
// updates before reload
setMonetizationDetails(Object.assign(monetizationDetailsCopy, webMonetizationState.getState()));
};
var onMonetizationProgress = function onMonetizationProgress() {
// this is purposely mutating because sometimes we get multiple state
// updates before reload
setMonetizationDetails(Object.assign(monetizationDetailsCopy, webMonetizationState.getState()));
};
webMonetizationState.on('monetizationstart', onMonetizationStart);
webMonetizationState.on('monetizationprogress', onMonetizationProgress);
return function () {
webMonetizationState.removeListener('monetizationstart', onMonetizationStart);
webMonetizationState.removeListener('monetizationprogress', onMonetizationProgress);
};
});
return monetizationDetails;
}
Both invoke the getGlobalWebMonitizationState() function so it’s not an order of operations issue. How do we set those variables?
function useMonetizationState() {
// get the singleton WM state
var webMonetizationState = getGlobalWebMonetizationState();
webMonetizationState.init();
var _webMonetizationState = webMonetizationState.getState(),
state = _webMonetizationState.state,
requestId = _webMonetizationState.requestId,
paymentPointer = _webMonetizationState.paymentPointer;
var _useState = React.useState({
state: state,
requestId: requestId,
paymentPointer: paymentPointer
}),
_useState2 = _slicedToArray(_useState, 2),
monetizationState = _useState2[0],
setMonetizationState = _useState2[1];
React.useEffect(function () {
if (!document.monetization) return;
var onStart = function onStart() {
var _webMonetizationState2 = webMonetizationState.getState(),
state = _webMonetizationState2.state,
requestId = _webMonetizationState2.requestId,
paymentPointer = _webMonetizationState2.paymentPointer;
setMonetizationState({
state: state,
requestId: requestId,
paymentPointer: paymentPointer
});
};
webMonetizationState.on('monetizationstart', onStart);
return function () {
webMonetizationState.removeListener('monetizationstart', onStart);
};
});
return monetizationState;
}
The payment pointer comes from the events which comes from the meta tag in the page. Beyond that I’m not quite sure what you’re asking, can you clarify?
The event or likely listener to the event doesn’t seem to parse the response to that event because my payment pointer doesn’t get updated. Is the event the initialization of the webMonitizationState and then the function that calls the webMonitizationState.getState()?
Hmm, so is the issue that when you update the meta tag on the page the payment pointer in react-web-monetization’s global state is not updated?
Because React is one of the most popular web frameworks, I began looking into existing React Libraries to see if there were any Web Monetization libraries. I found a few, but they were overly aggressive. As a newcomer to web monetization, I wanted something as simple as adding a few lines of code to my React Development. That’s what I set out to create: a super simple library for enabling web monetization in a React project.
