How to go about interacting with browser API?

sourabhxyz commented 3 months ago

Suppose I want to get access to a field inside window.* object and want to perform some operations on it, how do you suggest approaching it? Specifically, my use case involves first getting access to user's wallet api, which is achieved in JS like so const api = await window.cardano.eternl.enable(); and then calling different functions on it, like const userChangeAddress = await api.getChangeAddress().

HTML frameworks such as Alpine.js provide this functionality, I am wondering if this can be worked out with hyperbole.

Thanks!

seanhess commented 2 months ago

Hey @sourabhxyz, Can you send me a link to where Alpine handles this?

A similar question came up last week about embedded web components: https://www.reddit.com/r/haskell/comments/1cxh7wg/comment/lfcfnyt/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

It might be time to get serious about a custom javascript API. The basic idea is that you could communicate with JS by setting custom data- attributes on a tag to send data, and also set custom event handlers that will trigger server actions.

So in your case, you would have a custom element in HTML

<div data-cardano-on-address="UpdateAddress" data-cardano>...</div>

Custom JS code would look up any elements with the attribute data-cardano, and use the API to trigger UpdateAddress when that address changes.

Would that solve your use-case? Any thoughts or feedback?

seanhess commented 2 months ago

Before I get to this, I need to close out the redesign of forms. @sourabhxyz while I have your attention, do you have any thoughts on the different options in #21?

sourabhxyz commented 2 months ago

Hey @seanhess! Here is a sample HTML I wrote making use of Alpine, of course, same could be written in Haskell by making use of libraries such as lucid.

<html>

<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>

<body>
    <div x-data="
        { 
            changeAddress: null,
            populatedEntry: false,
            async updateWalletApi() {
                this.walletApi = await window.cardano.nami.enable();
                this.changeAddress = await this.walletApi.getChangeAddress();
                this.populatedEntry = true;
            } 

        }">
        <button x-on:click="updateWalletApi">Update Wallet API</button>
        <p x-show="populatedEntry">Change address: <span x-text="changeAddress"></span></p>
        <p x-show="!populatedEntry">Wallet not connected</p>

    </div>

</body>

</html>

Below is the demo of it:

https://github.com/user-attachments/assets/8470a789-e3c2-45fc-8dbc-bb7c21f95a85

Custom JS code would look up any elements with the attribute data-cardano, and use the API to trigger UpdateAddress when that address changes.

The approach is not 100% clear to me (maybe an example mimicking above code example would help? Note that given code assumed nami wallet to be installed) but I think the idea is, say, I can execute some JS when a button is clicked (which had data-cardano attribute), now UpdateAddress would be executed for <div data-cardano-on-address="UpdateAddress" data-cardano>...</div> as it had data-cardano attribute?

Also, I'll look at #21 over this weekend!

seanhess / hyperbole

How to go about interacting with browser API? #25