From cf15c22116406721955b41422185ba653775bf77 Mon Sep 17 00:00:00 2001
From: fsociety <fsociety.mp3@pm.me>
Date: Tue, 10 Sep 2024 21:15:21 +0200
Subject: [PATCH] feat(payment): add WebLN payment functionality

Implemented functionality to create an invoice and make payment using WebLN. Also added error handling and logging for payment process. Updated UI to display payment information and a button to initiate payment.
---
 app/Http/Livewire/Test/WebLN.php              | 23 +++++++++++++++++++
 resources/js/webln/webln.js                   | 19 +++++++++++++++
 .../views/livewire/test/web-l-n.blade.php     | 14 +++++++++--
 3 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/app/Http/Livewire/Test/WebLN.php b/app/Http/Livewire/Test/WebLN.php
index 572cd5fe..b070dd95 100644
--- a/app/Http/Livewire/Test/WebLN.php
+++ b/app/Http/Livewire/Test/WebLN.php
@@ -2,11 +2,34 @@
 
 namespace App\Http\Livewire\Test;
 
+use App\Traits\LNBitsTrait;
 use Illuminate\Support\Facades\Log;
 use Livewire\Component;
 
 class WebLN extends Component
 {
+    use LNBitsTrait;
+
+    public $invoice;
+
+    public function mount()
+    {
+        $this->invoice = $this->createInvoice(
+            sats: 1,
+            memo: 'Test Payment from WebLN',
+            lnbits: [
+                'read_key' => '97f6120563e3498b8be4c67023c912ae',
+                'url' => 'https://bits.codingarena.top',
+            ]
+        );
+    }
+
+    public function reloadMe()
+    {
+        // full reload current page
+        return redirect()->route('webln');
+    }
+
     public function logThis($text)
     {
         Log::info('WEBLN: ' . $text);
diff --git a/resources/js/webln/webln.js b/resources/js/webln/webln.js
index 5dcbdc21..4bacb519 100644
--- a/resources/js/webln/webln.js
+++ b/resources/js/webln/webln.js
@@ -2,11 +2,30 @@ import {requestProvider} from "webln";
 
 export default (livewireComponent) => ({
 
+    invoice: livewireComponent.entangle('invoice'),
+
+    async pay() {
+        console.log('payment_request: ' + this.invoice.payment_request);
+        await webln.sendPayment(this.invoice.payment_request)
+            .then(response => {
+                console.log('Payment response:', response);
+                this.$wire.call('logThis', 'Payment response: ' + JSON.stringify(response));
+                this.$wire.call('reloadMe');
+            })
+            .catch(error => {
+                console.error('Payment failed:', error);
+                this.$wire.call('logThis', 'Payment failed: ' + error);
+                this.$wire.call('reloadMe');
+            });
+    },
+
     async init() {
         console.log('WebLN initialized');
 
         let webln;
         try {
+            console.log(this.invoice);
+
             webln = await requestProvider();
             console.log('WebLN provider acquired');
             this.$wire.call('logThis', 'WebLN provider acquired');
diff --git a/resources/views/livewire/test/web-l-n.blade.php b/resources/views/livewire/test/web-l-n.blade.php
index 6b953f08..f5591b61 100644
--- a/resources/views/livewire/test/web-l-n.blade.php
+++ b/resources/views/livewire/test/web-l-n.blade.php
@@ -1,3 +1,13 @@
-<div x-data="webln(@this)">
-    <webview id="webln-webview" src="https://webln-capable-site.com" style="width:100%; height:100%;"></webview>
+<div x-data="webln(@this)" class="p-2 sm:p-4" wire:ignore>
+    <div class="font-mono space-y-1 p-2 sm:p-4 text-white break-words">
+        <div class="text-xs sm:text-base break-words">Test Payment from WebLN to The Ben</div>
+        <div class="text-xs sm:text-base break-words">1 sat</div>
+        <div class="text-xs sm:text-base break-words">hash: {{ $invoice['payment_hash'] }}</div>
+        <div class="text-xs sm:text-base break-words">payment_request: {{ $invoice['payment_request'] }}</div>
+        <div class="mt-6">
+            <div class="flex justify-center">
+                <button x-on:click="pay" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Pay Invoice</button>
+            </div>
+        </div>
+    </div>
 </div>