getalby / bitcoin-connect Goto Github PK

Currently SVGs are unoptimized, but we also set colors inside them and sometimes classes. This is quite a mess.

• set CSP to avoid XSS attacks https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
• suggest setting budgets where possible (e.g. with Alby NWC) - note: need to add support in Bitcoin Connect to pass those parameters
• ?

• how to add a new connector
• how to add a new wrapper package for a different framework
• how to make improvements to the library

https://www.figma.com/proto/XYlv0E7SY3R20XHjFcn5kI/Lightning-Connect?page-id=0%3A1&type=design&node-id=55-4168&viewport=1199%2C-1150%2C0.34&t=So5wHGNq4xwfnJsI-1&scaling=min-zoom&starting-point-node-id=55%3A4168&hotspot-hints=0

Users who see the bitcoin connect button SHOULD in some way be able to connect the wallet they have on their phone and helps build a connection there because the user thinks they should be able to use the wallet they already have. Maybe it does not work in all cases where realtime/frequent payments are required (like Zappy Bird), but for many cases it is OK. We can also somehow notify the user that their wallet does not support some features.

Once clicked, the enable() function would just return true. Some webln functions would be disabled (we can notify there). This would also be a huge timer saver for developers who just want a way to allow users to pay invoices, no matter what method they choose.

We would need to maintain a list of all popular mobile wallets, but hopefully we can start it off and the community can help there if we setup a nice contributing guide.

Bitrefill has something similar in their checkout:

• Pick the wallet
• Some wallets have unique schemes to immediately open them on the right payment page, otherwise a lightning link, or the worst fallback is just "copy invoice".

Another issue: If the user makes a payment from their mobile wallet, how does the site update?

• A backend may receive a webhook from the lightning service (e.g. Alby).
• The backend could send something to the frontend via a websocket.
• The frontend should be able to programmatically call Bitcoin Connect to close or show a success screen.

This is required because there is currently no standard to check a status of an invoice.

Right now it uses window.prompt to get the NWC URL. It should show a page where the user can import the NWC URL

Should show connecting animation when connector is initializing (should work with both list and modal)

Figma: https://www.figma.com/file/98bWDLs9dRVnYwW5ZVEqos/Nostr-Wallet-Connect?type=design&node-id=0-1&mode=design

change to lwc:connected

See https://github.com/getAlby/nostr-wallet-connect/blob/main/views/apps/create.html#L107

• So callbacks can be set on the components rather than relying on window events
• So components can be typed without ts-ignore

move buttons outside of modal component into new list component

• Connect directly on the page
  • maybe when they connect we can do something?
• Cool animation so people can see it in action - maybe we have both a desktop and mobile example running in parallel
• Basic info about what it is and what it can do
• Directory of apps where you can try it
• UI Customization
• Package size info
• Info for developers

https://www.figma.com/proto/XYlv0E7SY3R20XHjFcn5kI/Lightning-Connect?page-id=0%3A1&type=design&node-id=55-4168&viewport=1199%2C-1150%2C0.34&t=So5wHGNq4xwfnJsI-1&scaling=min-zoom&starting-point-node-id=55%3A4168&hotspot-hints=0

I propose using gradient only on our landing/branding. But within the customizable UI there's only one custom branding color. SVGs were optimized. Plain color version is in 2 versions: with B filled and B cut out.

No bg (not visable on white bg):

From W3modal: they only allow you to set one accent color, everything else is generated.
Now we have many colors, new shades for the ruler lines and help.

How can we make a nice API for users that can easily add 1 or 2 colors and it just looks great? it's too easy for a developer to make something that looks bad right now.

requires repository to be cleaned up a bit and made public

Currently we cannot render the modal on its own - an example, in Nostrudel when you zap on the main page, it should open the modal without the button having to be visible.

1. Button should be able to pass the open state as an attribute to the modal?
2. Modal should also be able to have its own state, so you can render a modal on its own: <lwc-modal open></lwc-modal>

How to programmatically control the open state:

• using React: just control the open property
• using pure JS: document.querySelector("lwc-modal").setAttribute('open', true);

Currently it uses the browserify build so the compile speeds are super slow on changes.

The dev site should import the index.modern.js file instead, or run a vite build or something?

• loading state while modal open
• partially transparent overlay
• once connected can click to see your balance and connection etc.
• save connection to local storage

Button padding's updated a bit, with a wrap around copy and updated icon to make it more balanced.

Link to Figma

add a nice header image for the README, maybe something like the below:

Currently there are only tests for the example component

See https://github.com/getAlby/lightning-wallet-connect/blob/26653ccf5ffa4104bcc1ef120f8129d779a8e3ed/src/connectors/lwc-alby-nwc-connector.ts#L22

• deploy
• add official domain
• add some content

• what is LWC?
• add screenshots
• add info about how to install and use LWC in different environments with simple code examples (codepen, React, Vue, ...)
• add info about how to use different components (button (to launch modal), modal, list, render individual buttons)

https://app.mutinywallet.com/settings/connections

with the link and some info and an input field for the connection.

for improved developer experience in React apps

https://lit.dev/docs/frameworks/react/

From hzrd149/nostrudel#11

Currently we depend on nostr-tools and some other packages, which are more bloated than necessary. We might be able to replace these with more cut-down versions or implement the code ourselves.

This will get worse when we add further integrations which require their own packages such as LNC.

https://github.com/lightninglabs/lnc-web/

From Bumi:

can we avoid loading fonts from google? let us host them. Is this the way how to add fonts? can't that be done in CSS?

Also we need to replace with Open Runde. Where can we import them from, https://getalby.com/?

It looks like we can use https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API instead of injecting into the head

This is actually about naming conflicts - how could we describe the components better so we don't need bc-button and bci-button?

CC @reneaaron @bumi

For e.g. ZapPlanner or Zapple Pay that can only execute asynchronously

Should e.g. the Alby extension fire a webln:enabled message that LWC can listen to?

If extension / webln already exists, we can then know when it is enabled or not.

Requires:
WebBTC/webln-types#5
WebBTC/webln-types#6

In figma many of the icons have inconsistent sizing. Should they all be 24x24?

Currently shows just a spinner which doesn't look good and causes the modal height to jump. Instead it should show the connected content, with skeleton loaders for any content that is loading.

There should be a help button on the modal.

Also consider routing for e.g. Generic NWC URL input screen

e.g. automatically enable budget permission

We should specify classnames. Remove the color and gradientText helper methods.

The button currently stays showing the initial balance. On successful payment, should it update? I don't think we can do periodic re-syncs because these could cause unwanted popups in the extension.

also make sure linter throws an error if relative paths are used

Right now all connection code is in the modal component

for example, button. Does this work overriding the existing button, or do we need to use a unique tag?

import {html} from 'lit';
import {withTwind} from '../twind/withTwind';
import {LwcElement} from '../lwc-element';
import {color} from '../css/colors';
import {gradientText} from '../css/gradientText';

export class Button extends withTwind()(LwcElement) {
  override render() {
    return html`<button
      @click=${this.click}
      class="relative mt-4 h-8 px-3 font-medium font-sans shadow rounded-lg flex gap-2 justify-center items-center"
    >
      <div
        class="absolute -z-10 top-0 left-0 w-full h-full border-2 border-solid border-transparent rounded-lg"
        style="
              background-image: linear-gradient(${color('bg-primary')}, ${color(
          'bg-primary'
        )}), linear-gradient(to bottom, ${color('primary')}, ${color(
          'secondary'
        )});
              background-origin: border-box;
              background-clip: content-box, border-box;"
      ></div>
    </button>`;
  }
}

Make sure to also add example to README

That happens when I am connected via the extension or via NWC