[FEATURE] <dev-stake-on>

[aggre]

Detailed description

This issue doesn't have a more in-depth spec, it just suggests a feature.

---

By declaring HTML as follows, the button which is the default slot element is displayed. Clicking that button will bring up a modal dialog with tier slots as child elements and start the staking flow.

<dev-stake-on connection="CONNECTION_ID" destination="0x..." network="NETWORK_NAME">
    <section slot="tier" amount="100">This is the 1st tier</section>
    <section slot="tier" amount="200">This is the 2nd tier</section>
    <section slot="tier" amount="300">This is the 3rd tier</section>
    <button>Please stake on me</button>
</dev-stake-on>

Options

• *connection: the id of dev-connection element [FEATURE] <dev-connection> #126
• *destination: the address of the staking destination
• *network: the network name

Context

You can easily build such paywalls by using this combined with <dev-when-staked> #118 .

Possible implementation

No response

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[MatteuSan]

I feel like we can use the currently in the works hashi dialog, but the design would change a bit. As for the styling, I don't think we can use the hashi lib directly since shadow DOM works in a different way than regular DOM and virtual DOM. So styling is going to be a special implementation for a start.

Also for the buttons, we can use the hashi-lit button, but that's still in development so I don't really know about that.

[aggre]

The design does not have to be as per this attached image, we are free to think as we please. By the way, wouldn't it be cool if we could build it with just lit (i.e. just lit-html) instead of LitElement?

[aggre]

I'm thinking about what kind of implementation can be done to use Hashi in Shadow DOM. In essence, the child elements of top-level Custom Elements don't have to be Shadow DOM. Therefore, if the top-level Custom Elements have Hashi and Tailwind class declarations in the Shadow DOM, we can use them in child elements.

Also, with ullr, we can use Shadow DOM inline without class definition, and there is also an API for declaring Custom Elements. using LitElement just for Shadow DOM and Custom Elements may be a bit of an exaggeration.

dev-elements/src/stake-on-me-button/index.ts

Lines 5 to 12 in 2fa74c8

	const showAddress = (addr: string | null): DirectiveResult =>
	shadow(
	html`<style>
	span {
	color: red;
	}</style
	><span>${addr}</span>`
	)

dev-elements/src/stake-on-me-button/element.ts

Lines 4 to 10 in 2fa74c8

	window.customElements.define(
	'stake-on-me',
	customElements(
	([address, network]) => stakeOnMeButton({ address, network }),
	['address', 'network']
	)
	)

[aggre]

@MatteuSan I've changed to using the Tailwind classes in Shadow DOM in #129, so I ping you!

[MatteuSan]

@MatteuSan I've changed to using the Tailwind classes in Shadow DOM in #129, so I ping you!
aight gotcha