🏗 webln-v4v

A library for easily rendering a form on-page that lets your webpage visitors send Bitcoin Lightning payments with a WebLN compatible browser extension. This library is intended to be used with the Podcasting 2.0 RSS namespace podcast:value for keysend payments..

DISCLAIMER 🚨🚨🚨

This is an experimental library. The software is provided AS-IS, we make no guarantees of its reliability, we are not responsible if your funds go missing or are sent to the wrong address, and you and your users assume all risks associated with using it.

Quick Start

The best place to start is with the quick start guide. Hopefully it's as easy as copy/pasting a few lines into html.

Supported Browser Extensions

This widget will only render on a web page if it detects that the user has an LNURL compatible browser extension installed.

Currently supported browser extensions include:

Alby

Attribution / Donate to Patrick

Thank you to @ptkdev for creating the svelte-webcomponent-boilerplate. This project was built on top of this boilerplate. Please consider donating to Patrick for his great work.

Support Podverse

Podverse is free / open source / copylefted libre software, and we would greatly appreciate your donations or pull requests 🙏

📎 Menu

• 💡 Features
• 🕹 Demo - TODO: coming soon
• 👔 Screenshot - TODO: coming soon
• 🚀 How to use
• • 🌎 Web
• • 📦 Webpack/Browserify
• • 📖 Wordpress
• • 🔵 React
• • 🔴 Angular
• • 🟠 Svelte
• • 🟢 Vue
• 📚 Documentation
• • 🧰 Options / Attributes
• • 🎨 CSS Customization
• 🔨 Developer Mode
• • 🏁 Run Project
• • 💾 Setup Project
• 🐛 Known Bugs
• 🍻 Community:
• Discord)
• Twitter

💡 Features

• [✔️] Easy to use
• [✔️] MIT License
• [✔️] Text animation by Nooray Yemon on Codepen
• [✔️] Friendly boilerplate + Github templates
• [✔️] Powered by svelte framework
• [✔️] Without jQuery depencence
• [✔️] Configurable with attributes
• [✔️] Customization with CSS Style
• [✔️] HTML5 Custom Elements - Native webcomponents
• [✔️] Work with: Browserify / Webpack / ReactJS / Svelte / Angular / Vue / Wordpress
• [✔️] Typescript + TSPaths preconfigured
• [✔️] Userfriendly folders tree
• [✔️] Prettiers and ESLint preconfigured
• [✔️] all-contributors-cli and all-shields-cli preconfigured
• [✔️] JEST Test preconfigured
• [✔️] Full async code
• [✔️] Github and Vscode dotfiles preconfigured
• [✔️] Translations i18n (Help me ❤️)

🚀 Installation (Web)

1. Add html code to your page:

<webln-v4v header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></webln-v4v>

2. Require javascript in yourpage (before </body>):

<script src="https://cdn.jsdelivr.net/npm/webln-v4v@latest/dist/webcomponent.js"></script>

You can replace @latest with specific version, example @2.0.1.

Below is available a description of options values.

📦 Installation (NPM Module - Browserify/Webpack)

1. Install npm module: npm install webln-v4v --save
2. Add html code to your page:

<webln-v4v header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></webln-v4v>

3. Require javascript in your app:

require("webln-v4v");

or

import "webln-v4v";

Below is available a description of options values.

📖 Installation (Wordpress)

1. Download wordpress plugin from mirror and install it.
2. Add code to your html widget, example: Appearance --> Widget --> insert HTML Widget and paste html code:

<webln-v4v header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></webln-v4v>

You can insert this html code in posts, widget, html box or theme.

🔵 Installation (React)

1. Install npm module with npm install webln-v4v@latest --save:
2. Import module in your src/App.js on header:

import "webln-v4v";

3. Add html code to your App.js template:

<webln-v4v header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></webln-v4v>

🔴 Installation (Angular)

1. Install npm module with npm install webln-v4v@latest --save:
2. Import module in your app/app.modules.ts on header:

import "webln-v4v";

3. Add html code to your html component:

<webln-v4v header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></webln-v4v>

🟠 Installation (Svelte)

1. Install npm module with npm install webln-v4v@latest --save:
2. Import module in your src/App.svelte on header:

import "webln-v4v";

3. Add html code to your html component:

<webln-v4v header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></webln-v4v>

🟢 Installation (Vue)

1. Install npm module with npm install webln-v4v@latest --save:
2. Import module in your src/App.vue and add webcomponent to ignoreElements of vue config:

import Vue from "vue";
import "webln-v4v";

Vue.config.ignoredElements = ["webln-v4v"];

3. Add html code to your html component:

<webln-v4v header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></webln-v4v>

🧰 Options / Attributes

Parameter	Description	Values	Default value	Available since
header	Setup top text	String	make	v1.0.20210319
flip	Setup middle flip text (separte with commas)	String with commas	svelte,webcomponents,opensource	v1.0.20210319
footer	Setup bottom text	String	awesome!	v1.0.20210319

HTML Code with attributes:

<webln-v4v header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></webln-v4v>

🎨 CSS Customization

You can overwrite default css with selector ::part, example:

<style>
	webln-v4v::part(flip) {
		border: 2px solid red;
	}
</style>

Part attribute is, generally, suffix of a class. Use chrome inspector for get the correct value of part="" attributes. See MDN selector ::part docs.

🔨 Developer Mode

🏁 Run Project

1. Clone this repository or download nightly, beta or stable.
2. Run npm install
3. Run npm run dev
4. Run http://localhost:5000

💾 Setup Project

If you want replace all strings (example: package name, author, urls, etc...) in markdown file, source files and others files of this project you need edit setup.json with correct values and run npm run setup.

📚 Documentation

Run npm run docs

💫 License

• Code and Contributions have MIT License
• Images and logos have CC BY-NC 4.0 License
• Documentations and Translations have CC BY 4.0 License

Copyleft (c) 2021 Mitch Downey (@Podverse)