ZAP with Lightning wallet

[MSghais]

Description

We have a NWC screen to use a LN Wallet and a screen for it ZAP with Lightning wallet.
Also we have a modal for zap directly through Nostr note.

Improve the overall UI and UX of it.
Fix the zap through the Tip modal for ZAP

TODO

• Fix tip ln invoice in Zap.
• Fix css ui of the Lightning screens.
• Nostr wallet connect NIP-47.
• Link NWC URL of Lightning wallet to a Nostr address

[ikemHood]

Hey @MSghais is this open for contribution?

[MSghais]

Hey @MSghais is this open for contribution?

Gm! This issue is gonna be available on the OD Hack 7!
We are gonna assign contributors tomorrow.

Please register in the Only Dust hackathon, apply from the platform, and join the telegram:
https://t.me/afk_aligned_fam_kernel

[ikemHood]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey @MSghais, I am ikem Peter. a fullstack software developer with 3+ years of working experience

How I plan on tackling this issue

Here is how i would do this...

• Implement the necessary code to integrate with the WebLN API, which allows the Lightning wallet to interact with web applications.

• Ensure the wallet can be detected and connected to the web application.

• Handle the user's authentication and authorization to access the Lightning wallet.

• Create a button and modal to initiate the Zap process.

• Implement the logic to send a Zap request to a relayer that accepts the NIP-57 protocol.

• Handle the response from the relayer and update the user interface accordingly.

[onlydustapp]

Hey @ikemHood!
Thanks for showing interest.
We've created an application for you to contribute to AFK - Aligned Fam Kernel.
Go check it out on OnlyDust!

[Supa-mega]

My background and how it can be leveraged
hello @MSghais i'm a frontend dev and i have skills in react, typescript, next.js, tailwind, sass, boostrap etc. i would love to work on this if i'm giving the oppotunity

[onlydustapp]

Hey @Supa-mega!
Thanks for showing interest.
We've created an application for you to contribute to AFK - Aligned Fam Kernel.
Go check it out on OnlyDust!

[sajalbnl]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have 2 years of experience as a front-end developer, with expertise in JavaScript, React.js, CSS, and HTML. I've built full-stack projects like Crypto Bank, handling both front-end and back-end development. My skills in creating responsive, dynamic interfaces make me well-equipped to contribute effectively to your project.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @MSghais

I’m interested in tackling the ZAP functionality with the Lightning wallet (Issue #4). With 3 years of experience in Next.js, TypeScript, and UI/UX enhancements, I’m well-equipped to handle this task. My name is Benjamin

How I plan on tackling this issue

Goal

The goal is to integrate the ZAP feature with a Lightning wallet using WebLN and NIP-57. This involves:

1. UI Implementation:

   • Creating a button and modal for initiating ZAP transactions.

2. Backend Integration:

   • Connecting to a relayer that supports NIP-57 for handling these transactions.

My Proposed Solution

1. Integrate with WebLN:

   I will set up the WebLN connection to enable ZAP functionality with the Lightning wallet. This includes ensuring proper communication between the frontend and WebLN services.

2. Develop UI Components:

   I’ll design and implement a button and modal for ZAP functionality. This will involve making sure the UI is intuitive and integrates seamlessly with the existing design. I will also test the modal to ensure it captures user input correctly and initiates the ZAP process as intended.

3. Connect to Relayer:

   I’ll implement the necessary integration to connect with a relayer that accepts NIP-57, ensuring that ZAP requests are processed smoothly and accurately.

Testing and Validation

1. Local Testing:

   I will verify the WebLN connection and UI components locally to ensure they work as expected.

2. Integration Testing:

   Once the features are implemented, I’ll test them in a staging environment to ensure full functionality and smooth transaction processing.

[ScottyDavies]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am front end developer with years of experience.
this will be my first time contributing to the ecosystem and i am ready to work

How I plan on tackling this issue

I would approach this issue with following step
Understanding the Requirements:
Clearly understand the requirements for the ZAP feature, including the expected user flow, the integration with the Lightning wallet, and the overall user experience.
Familiarize myself with the NIP-57 (LNURL-withdraw) standard, which is the proposed way to handle the ZAP transaction.
Research and Planning:
Investigate existing solutions and libraries for integrating Lightning wallets and handling LNURL-withdraw transactions.
Assess the feasibility and complexity of the implementation, and plan the approach accordingly.
Identify any potential challenges or edge cases that might need to be addressed.
User Interface Design:
Design the user interface for the ZAP feature, including the button, modal, and any other necessary UI elements.
Ensure the design is intuitive, visually appealing, and consistent with the overall application's branding and style.
Consider the responsive behavior of the UI, ensuring it works well on different device sizes and screen resolutions.
WebLN Integration:
Implement the integration with the WebLN API, which provides a standardized way for web applications to interact with Lightning wallets.
Ensure the integration is robust and handles various user scenarios, such as the user having multiple Lightning wallets installed or the wallet being unavailable.
ZAP Functionality:
Implement the logic for the ZAP feature, including the button click event, the modal display, and the overall user flow.
Integrate the WebLN API calls to initiate the LNURL-withdraw transaction, handling the user authentication and authorization as necessary.
Relayer Integration:
Research and identify a suitable relayer that accepts the NIP-57 LNURL-withdraw standard.
Implement the integration with the selected relayer, ensuring the correct parameters and data are passed to the relayer's API.
Handle any error cases or failure scenarios during the relayer integration.
Error Handling and Feedback:
Implement robust error handling and provide clear and informative feedback to the user throughout the ZAP process.
This includes handling errors during the WebLN integration, the LNURL-withdraw transaction, and the relayer integration.
Ensure the error messages are user-friendly and provide guidance on how to resolve any issues.
Testing and Validation:
Thoroughly test the ZAP feature, including end-to-end testing of the complete user flow.
Validate the integration with the WebLN API and the selected relayer, ensuring the ZAP transactions are successfully processed.
Conduct cross-browser and cross-device testing to ensure the feature works as expected on different platforms.
Documentation and Knowledge Sharing:
Document the implementation details, including the overall architecture, the integration points, and any best practices or lessons learned.
Share this documentation with the rest of the development team to facilitate knowledge transfer and future maintenance of the feature.

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience integrating payment systems and developing user interfaces. I can efficiently handle connecting with WebLN, implementing buttons and modals, and ensuring smooth interaction with a relayer for NIP-57 requests.

How I plan on tackling this issue

1. Connect with WebLN: Integrate WebLN for Lightning wallet functionality.
2. UI Implementation: Add a button and modal for ZAP transactions.
3. Send Request: Implement logic to handle and send requests.
4. Relayer Integration: Connect to a NIP-57-compatible relayer for processing.

[pheobeayo]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a web3 frontend developer skilled in Typescript, Javascript, Cairo and Solidity

How I plan on tackling this issue

I intend to create the function for connecting to WebLN using a button and a modal to zap.
Enable this button to send request
Make this connectable to the layer that accept NIP-57

[MullerTheScientist]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a full-stack developer with experience in different languages, such as Python, Cairo, Solidity, and JavaScript.

How I plan on tackling this issue

I will Understand the Requirements:
ZAP: Zero-Asset Protocol, a way to connect to the Lightning Network.
Lightning Wallet: A wallet that supports Lightning Network transactions.
WebLN: Web Lightning Network, a protocol for interacting with the Lightning Network on the web.
NIP-57: A standard for relayers to communicate with each other.

[MSghais]

Someone have an ETA for this?

[Ayoazeez26]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi I would love to pick up this issue, ETA should be 48hrs

[onlydustapp]

The maintainer MSghais has assigned Ayoazeez26 to this issue via OnlyDust Platform.
Good luck!

[addegbenga]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Frontend Engineer with over 5 years experience.

How I plan on tackling this issue

-Go through nips and webLN doc and integrate Nostr wallet connect
-Create a Lighting wallet that will allow me to test my integration.
-Create a UI for seamless user interaction

ETA: 48hrs

[onlydustapp]

The maintainer MSghais has assigned addegbenga to this issue via OnlyDust Platform.
Good luck!

[ooochoche]

@MSghais Please is this open for contribution?

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a blockchain developer and i have a strong background experience working with React, ,javascript, typescript , cario and solidity.
i have contributed successfully to open source projects like Arkprojects and Shinigami .

How I plan on tackling this issue

1. Fix Tip Zap: Debug the LN invoice creation in the tip modal, ensuring it works for various wallets.
2. Improve UI: Refine the CSS for Lightning screens to improve spacing, layout, and responsiveness.
3. NIP-47:Implement Nostr Wallet Connect (NIP-47) and test wallet connection functionality.
4. Link NWC: Ensure NWC URL links correctly to the Nostr address and works with supported wallets.

[suhas-sensei]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Whew, looks like a ton of applications up there. Working as a Meme-Driven Dev back at Gobblchain, im left kind of feeling that i have the required go-to's that can fix the issue at stake on your end.

with my previous experiences in personal projects and hackathons, I can whip up some real solutions—probably with a one-liner or two and a laugh along the way. [it's my first ODHack :)]

How I plan on tackling this issue

This is how im going to enhance the design and how Zap will be solved through the Tip modal

1. I’ll attempt to reduce screen complexity by making LN Wallet look, act and feel more like the Zap screen and the modal for direct Zaps.
2. To this, I will concentrate on the attempt to make the navigation as easy as possible and when taking an action the environment should display something like Zap Now and a confirmation that the task is done. When creating the theme, using of uniform color, fonts and buttons enable the creation of a unified experience.
3. Increasing interaction with the tip modal while enhancing the responsiveness of the modal for Zapping, as a redesign is due. Put comments in actual time like installing zaps or messages like ‘zap in progress.’
4. Making sure that the wallet can easily be detected and authenticated for interaction that has been enabled by the WebLN to interrelate between the lightning wallet and the web application Only users who are authorized will be able to connect their wallets and run Zaps safely.
5. Making sure when the invoice is created the Zap is checked again to verify that when payment is transacted there are no problems that may arise.
6. I will connect with the relayer that is using NIP-57 protocol to manage the Zaps. Also ensuring that the Tip modal passes the right data i.e. the amount, payment reference..etc to be processed to the relayer. Later possibly give an instant response to the user.Testing of both local and integration where the WebLN connection needs to be validated, the interface is tested under different circumstances and the relayer as well. for LN Wallet screen, Zap screen and the modal for direct Zaps.
7. I'll focus on trying to simplify the navigation by making sure each action feels intuitive, with clear call-to-actions like Zap Now and sure feedback when the action is completed. Using of uniform colors, fonts and buttons for creating a cohesive experience.
8. Improving the modal for Zapping by making sure it is responsive while also making sure to redesign the tip modal for better user engagement. Add real-time feedback such as animations or 'zap in progress' messages during the process.
9. Ensuring the wallet can be detected and authenticated effortlessly by implementation of WebLN to enable seamless interaction b/w the Lightning wallet and the web app. Allowing only authorized users to connect their wallets and initiate Zaps by handling user authorization securely.
10. Ensuring when invoice is generated, it's validated correctly before processing the Zap to prevent transaction issues.
11. I'll integrate with a relayer that supports the NIP-57 protocol that will handle the Zaps. Also making sure the Tip modal sends the correct data i.e. the amount, payment reference..etc for processing, to the relayer. Later provide immediate feedback to the user.
12. Conducting of both local and integration testing for validating the WebLN connection, user interface under different scenarios as well as relayer integration.
13. Better management of errors through transmission of success or failure of transactions in real time for example ‘zap was sent successfully’ ‘failed to send zap, please try again’.

I hope my solution appeases you and we can work for a solution :)

[0xdevcollins]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Collins Ikechukwu. I'm a full stack blockchain developer developer.

How I plan on tackling this issue

Fix LN Invoice in Zap Modal: Ensure that the LN invoice generation and display in the Zap Tip modal works seamlessly by troubleshooting any issues with the API or logic behind invoice generation and payment processing.

CSS/UI Fixes for Lightning Screens: Review the UI design of the Lightning wallet screens and apply responsive CSS fixes for a clean, intuitive, and user-friendly interface. Ensure the design is consistent with the overall app style.

NIP-47 Integration for Nostr Wallet: Implement NIP-47 (Nostr Wallet Connect) for easy integration between Nostr and Lightning wallets. This will allow users to connect their wallet to Nostr and authorize payments.

Link NWC URL to Nostr Address: Add functionality to associate a Nostr address with the NWC (Lightning Wallet URL) so users can easily link and manage their wallet through their Nostr profile.

[aniruddhaaps]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a go dev. A new-comer here, willing and ready to contribute to contribute to solve the issue.

[jaiminRaiyani]

Can I tackle this one?

[Kaminar-i]

Can I solve this issue, please.

[Jemiiah]

pls kindly assign @MSghais

[OWK50GA]

I am applying to this issue via OnlyDust platform.

I am Wilfrid Okorie, a seasoned React and Next.js developer, with experience with Cairo for Starknet Smart contracts, and frontend Integration of Smart contracts using Next.js, and I would like to work on this issue.

Here's how I plan to take on this issue:

• First of all, I will examine the existing data flow i.e. the method that displays the current static wallet amount, checking how and where the data is managed.
• Next, I will use the network tab on Argent's official website to inspect the relevant API calls for obtaining wallet amount.
• I will then set it up to fetch the wallet balance dynamically, handling response formats and errors, and making sure to stick to the current convention, with only the static wallet balance replaced.
• I will use loading states indicators to ensure it is non-blocking. After this, I will test different cases to make sure the call works, and edge cases do not break the user interface.
• In all of this, I will make sure my code is clean and well commented, for the sake of future contributors.

I will also welcome any feedback for something to be changed or improved.

It will be a privilege to work on this issue

Hi maintainer, I am Wilfrid Okorie, a Frontend Developer adept at writing intuitive UIs would like to work on this task

Here's how I intend going about this:
Firs of all, I will go through the current implementation of invoice generation to find the break in the sequence and fix the break. I will then confirm that the invoices are displayed accurately and users are fed the right feedback for both successful and unsuccessful transactions.
Next, I will identify misalignments, overflow issues and other css-related issues in the UI of the lightning screen and apply fixes.
Next, I will go through the requirements for NIP-47 and what it takes to support Nostr Wallet Connect, and integrate the frontend and backend necessary to make this support possible. I will then make sure the user is able to connect their Nostr address using NWC.

My Estimated time for this project is 4 days

[jedstroke]

I want to solve this issue

[mimisavage]

Let me handle this issue!

[MrRoudyk]

May I try my hand at this?