ElementsProject / cln-application

Official core lightning application by Blockstream
MIT License
32 stars 8 forks source link

Display Invoice Rune #56

Closed evansmj closed 4 months ago

evansmj commented 6 months ago

This commit adds an invoice rune to the ConnectWallet component. Most values in that screen come from the backend method /shared/connectwallet and the type is found at app-config.type.ts/WalletConnect.

An invoice rune is added to WalletConnect because that is what is shown on the ConnectWallet.tsx component. ApplicationActions.SET_WALLET_CONNECT appends an invoice rune if one is found. If one is not found, ConnectWallet.tsx has a useEffect that checks for a missing invoice rune, and makes a createrune rpc call and then refreshes the component.

This commit adds an invoice rune to the ConnectWallet component.

On application start, we try to read an INVOICE_RUNE from .commando-env. One will be written to .commando-env when the user clicks to create one, if none exist already. If one does exist, it gets passed through and shown on the screen.

evansmj commented 6 months ago

I refactored sendRequestToSetStore to take Request as a parameter, so that I could bundle api calls that use different urls or methods, and send them to the same callback, such as for:

sendRequestToSetStore(
      appCtx.setWalletConnect, 
      { method: 'get', url: '/shared/connectwallet' },
      { method: 'post', url: '/cln/call', body: { method: 'showrunes' } });
ShahanaFarooqui commented 5 months ago

Hi @evansmj, Thank you for the PR.

Here are my inputs after reviewing it:

In summary, invoice rune user story should look like:

1: On application start, read the INVOICE_RUNE value from COMMANDO_CONFIG. 2: Set the value in backend's CONNECT_WALLET_SETTINGS either by step 1 or set to empty string if missing. 3: Show invoice rune value on the connect wallet screen. Show Add button with tooltip if it is empty otherwise simple copy button. 4: On Add button click, call create rune from the frontend. 5: Once the rune value in received in the backend, save that in the COMMANDO_CONFIG. 6: Also set it in the backend (APP_CONSTANTS?, CONNECT_WALLET_SETTINGS?, lightning.service.ts's constructor(), etc.). 7: Send the whole connectWallet response back to the UI and update the UI with Invoice rune value.

Screenshot from 2024-05-16 16-17-21

evansmj commented 5 months ago

Hey @ShahanaFarooqui im looking through figma and the existing app but i can't find a nice + icon svg. Is there one you have in mind? otherwise i have this one:

Screenshot 2024-05-27 at 9 36 37 PM Screenshot 2024-05-27 at 9 36 47 PM

ShahanaFarooqui commented 5 months ago

It looks fine but I would recommend to tag Basak on figma asking for plus icon svg. It will save us some time and reworking effort.

evansmj commented 5 months ago

It looks fine but I would recommend to tag Basak on figma asking for plus icon svg. It will save us some time and reworking effort.

Sure i've added the request here https://www.figma.com/design/09CUihPE1P6CDf7KlqTExu?node-id=203-2197#818167883

evansmj commented 5 months ago

hey @ShahanaFarooqui ready for review. I also added a loading state and disable the invoice rune buttons while loading. And I show toasts for successfully creating an invoice rune and if an error occurs.

john-zaprite commented 4 months ago

Thanks everyone. Looking forward to integrating CLN soon!