From c801d284469b2fb2ab83f5da3cea80f742c0a284 Mon Sep 17 00:00:00 2001
From: HolgerHatGarKeineNode <fsociety.mkv@pm.me>
Date: Fri, 31 Mar 2023 17:51:47 +0200
Subject: [PATCH] mempool weather added

---
 app/Console/Commands/Test.php                 |   2 +-
 app/Http/Livewire/Banner/MempoolWeather.php   |  13 -
 resources/views/layouts/app.blade.php         |   1 +
 resources/views/layouts/guest.blade.php       |   1 +
 .../livewire/banner/mempool-weather.blade.php | 309 ++++++++++--------
 5 files changed, 176 insertions(+), 150 deletions(-)

diff --git a/app/Console/Commands/Test.php b/app/Console/Commands/Test.php
index 4f009865..d3b08b57 100644
--- a/app/Console/Commands/Test.php
+++ b/app/Console/Commands/Test.php
@@ -45,6 +45,6 @@ class Test extends Command
                              'temperature' => 1
                          ]);
 
-        cache()->put('mempool-weather', $result['choices'][0]['text'], now()->addMinutes(60));
+       echo $result['choices'][0]['text'];
     }
 }
diff --git a/app/Http/Livewire/Banner/MempoolWeather.php b/app/Http/Livewire/Banner/MempoolWeather.php
index fd8321ef..ac32e963 100644
--- a/app/Http/Livewire/Banner/MempoolWeather.php
+++ b/app/Http/Livewire/Banner/MempoolWeather.php
@@ -10,12 +10,6 @@ use Livewire\Component;
 class MempoolWeather extends Component
 {
     public string $weather = '';
-
-    public $fastestFee;
-    public $halfHourFee;
-    public $hourFee;
-    public $economyFee;
-    public $minimumFee;
     public $changed;
 
     public function mount()
@@ -26,13 +20,6 @@ class MempoolWeather extends Component
             Artisan::call(CacheRecommendedFees::class);
             $this->weather = cache()->get('mempool-weather');
         }
-        $result = Http::get('https://mempool.space/api/v1/fees/recommended');
-        $result = $result->json();
-        $this->fastestFee = $result['fastestFee'];
-        $this->halfHourFee = $result['halfHourFee'];
-        $this->hourFee = $result['hourFee'];
-        $this->economyFee = $result['economyFee'];
-        $this->minimumFee = $result['minimumFee'];
         $this->changed = cache()->get('mempool-weather-changed');
     }
 
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 873661f4..9addba18 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -14,6 +14,7 @@
     <!-- Fonts -->
     @googlefonts
     <!-- Scripts -->
+    <script src="https://mempool.space/mempool.js"></script>
     <script src="{{ asset('dist/jquery.js') }}"></script>
     <script src="{{ asset('vendor/jvector/jquery-jvectormap-2.0.5.min.js') }}"></script>
     <script src="{{ asset('vendor/jvector/maps/world-mill.js') }}"></script>
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
index 309d44eb..d471776a 100644
--- a/resources/views/layouts/guest.blade.php
+++ b/resources/views/layouts/guest.blade.php
@@ -16,6 +16,7 @@
     <!-- Scripts -->
     <link rel="stylesheet" href="{{ asset('vendor/jvector/jquery-jvectormap-2.0.5.css') }}" type="text/css"
           media="screen"/>
+    <script src="https://mempool.space/mempool.js"></script>
     <script src="{{ asset('dist/jquery.js') }}"></script>
     <script src="{{ asset('vendor/jvector/jquery-jvectormap-2.0.5.min.js') }}"></script>
     <script src="{{ asset('vendor/jvector/maps/world-mill.js') }}"></script>
diff --git a/resources/views/livewire/banner/mempool-weather.blade.php b/resources/views/livewire/banner/mempool-weather.blade.php
index 1bc07b91..d047ed1e 100644
--- a/resources/views/livewire/banner/mempool-weather.blade.php
+++ b/resources/views/livewire/banner/mempool-weather.blade.php
@@ -14,35 +14,72 @@
         <div class="text-md leading-6 text-gray-900 text-center max-w-screen-2xl">
             {{ $weather }} (um {{ \App\Support\Carbon::parse($changed)->asTime() }} Uhr aktualisiert - stündlich)
         </div>
-        <div>
-            <div
-                _ngcontent-serverapp-c131=""
-                class="flex flex-col justify-around p-5 leading-6 text-center text-white break-words"
-                style="min-height: 1px; list-style: outside;"
-            >
-                <app-fees-box
+        <div
+            x-data="{
+                fastestFee: null,
+                halfHourFee: null,
+                hourFee: null,
+                economyFee: null,
+                minimumFee: null,
+                init() {
+                    const that = this;
+                    const init = async () => {
+                        const { bitcoin: { websocket } } = mempoolJS({
+                            hostname: 'mempool.space'
+                        });
+                        const ws = websocket.initClient({
+                            options: ['stats'],
+                        });
+                        ws.addEventListener('message', function incoming({data}) {
+                            const res = JSON.parse(data.toString());
+                            that.fastestFee = res.fees.fastestFee;
+                            that.halfHourFee = res.fees.halfHourFee;
+                            that.hourFee = res.fees.hourFee;
+                            that.economyFee = res.fees.economyFee;
+                            that.minimumFee = res.fees.minimumFee;
+                        });
+                    };
+                    init();
+                }
+            }"
+        >
+            <template x-if="!minimumFee">
+                <div class="text-amber-500 w-[384px]">
+                    <div class="h-3 w-3">
+                        <span class="animate-ping inline-flex h-full w-full rounded-full bg-amber-500 opacity-75"></span>
+                    </div>
+                    Loading fees...
+                </div>
+            </template>
+            <template x-if="minimumFee">
+                <div
                     _ngcontent-serverapp-c131=""
-                    class="block text-center break-words"
-                    _nghost-serverapp-c126=""
-                    style="list-style: outside;"
+                    class="flex flex-col justify-around p-5 leading-6 text-center text-white break-words"
+                    style="min-height: 1px; list-style: outside;"
                 >
-                    <div
-                        _ngcontent-serverapp-c126=""
-                        class="text-white"
+                    <app-fees-box
+                        _ngcontent-serverapp-c131=""
+                        class="block text-center break-words"
+                        _nghost-serverapp-c126=""
                         style="list-style: outside;"
                     >
                         <div
                             _ngcontent-serverapp-c126=""
-                            class="flex break-words"
+                            class="text-white"
                             style="list-style: outside;"
                         >
                             <div
                                 _ngcontent-serverapp-c126=""
-                                class="flex flex-row mb-3 w-1/4 h-5 bg-lime-700"
-                                style="background: rgb(93, 125, 1); --darkreader-inline-bgcolor: #4a6401; --darkreader-inline-bgimage: none; transition: background-color 1s ease 0s; list-style: outside;"
-                                data-darkreader-inline-bgcolor=""
-                                data-darkreader-inline-bgimage=""
+                                class="flex break-words"
+                                style="list-style: outside;"
                             >
+                                <div
+                                    _ngcontent-serverapp-c126=""
+                                    class="flex flex-row mb-3 w-1/4 h-5 bg-lime-700"
+                                    style="background: rgb(93, 125, 1); --darkreader-inline-bgcolor: #4a6401; --darkreader-inline-bgimage: none; transition: background-color 1s ease 0s; list-style: outside;"
+                                    data-darkreader-inline-bgcolor=""
+                                    data-darkreader-inline-bgimage=""
+                                >
                               <span
                                   _ngcontent-serverapp-c126=""
                                   ngbtooltip="Either 2x the minimum, or the Low Priority rate (whichever is lower)"
@@ -50,19 +87,19 @@
                                   class="px-1 pt-px w-full text-xs leading-4 truncate"
                                   style="list-style: outside;"
                               >No Priority</span>
-                            </div>
-                            <div
-                                _ngcontent-serverapp-c126=""
-                                class="h-5 bg-white bg-opacity-[0]"
-                                style="width: 4%; background-image: repeating-linear-gradient(90deg, rgb(36, 41, 58), rgb(36, 41, 58) 2px, rgb(23, 25, 39) 2px, rgb(23, 25, 39) 4px); list-style: outside;"
-                            ></div>
-                            <div
-                                _ngcontent-serverapp-c126=""
-                                class="flex flex-row mb-3 w-3/4 h-5"
-                                style="background: linear-gradient(to right, rgb(93, 125, 1), rgb(166, 125, 14)); --darkreader-inline-bgcolor: rgba(0, 0, 0, 0); --darkreader-inline-bgimage: linear-gradient(to right, #4a6401, #85640b); transition: background-color 1s ease 0s; border-radius: 0px 10px 10px 0px; list-style: outside;"
-                                data-darkreader-inline-bgcolor=""
-                                data-darkreader-inline-bgimage=""
-                            >
+                                </div>
+                                <div
+                                    _ngcontent-serverapp-c126=""
+                                    class="h-5 bg-white bg-opacity-[0]"
+                                    style="width: 4%; background-image: repeating-linear-gradient(90deg, rgb(36, 41, 58), rgb(36, 41, 58) 2px, rgb(23, 25, 39) 2px, rgb(23, 25, 39) 4px); list-style: outside;"
+                                ></div>
+                                <div
+                                    _ngcontent-serverapp-c126=""
+                                    class="flex flex-row mb-3 w-3/4 h-5"
+                                    style="background: linear-gradient(to right, rgb(93, 125, 1), rgb(166, 125, 14)); --darkreader-inline-bgcolor: rgba(0, 0, 0, 0); --darkreader-inline-bgimage: linear-gradient(to right, #4a6401, #85640b); transition: background-color 1s ease 0s; border-radius: 0px 10px 10px 0px; list-style: outside;"
+                                    data-darkreader-inline-bgcolor=""
+                                    data-darkreader-inline-bgimage=""
+                                >
                           <span
                               _ngcontent-serverapp-c126=""
                               ngbtooltip="Usually places your transaction in between the second and third mempool blocks"
@@ -70,151 +107,151 @@
                               class="px-1 pt-px w-1/3 text-xs leading-4 truncate"
                               style="list-style: outside;"
                           >Hour</span><span
-                                    _ngcontent-serverapp-c126=""
-                                    ngbtooltip="Usually places your transaction in between the first and second mempool blocks"
-                                    placement="top"
-                                    class="px-1 pt-px w-1/3 text-xs leading-4 truncate"
-                                    style="list-style: outside;"
-                                >Half Hour</span
-                                ><span
-                                    _ngcontent-serverapp-c126=""
-                                    ngbtooltip="Places your transaction in the first mempool block"
-                                    placement="top"
-                                    class="px-1 pt-px w-1/3 text-xs leading-4 truncate"
-                                    style="list-style: outside;"
-                                >Fastest</span
-                                >
-                            </div>
-                        </div>
-                        <div
-                            _ngcontent-serverapp-c126=""
-                            class="flex flex-row justify-between break-words"
-                            style="list-style: outside;"
-                        >
-                            <div
-                                _ngcontent-serverapp-c126=""
-                                class="my-0 mx-auto w-24"
-                                style="list-style: outside;"
-                            >
-                                <div
-                                    _ngcontent-serverapp-c126=""
-                                    class="mb-0 text-xl leading-8"
-                                    style="list-style: outside;"
-                                >
-                                    <div
                                         _ngcontent-serverapp-c126=""
-                                        class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
+                                        ngbtooltip="Usually places your transaction in between the first and second mempool blocks"
+                                        placement="top"
+                                        class="px-1 pt-px w-1/3 text-xs leading-4 truncate"
                                         style="list-style: outside;"
+                                    >Half Hour</span
+                                    ><span
+                                        _ngcontent-serverapp-c126=""
+                                        ngbtooltip="Places your transaction in the first mempool block"
+                                        placement="top"
+                                        class="px-1 pt-px w-1/3 text-xs leading-4 truncate"
+                                        style="list-style: outside;"
+                                    >Fastest</span
                                     >
-                                        {{ $minimumFee }}
-                                        <span
-                                            _ngcontent-serverapp-c126=""
-                                            class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
-                                            style="list-style: outside;"
-                                        >sat/vB</span
-                                        >
-                                    </div>
                                 </div>
                             </div>
                             <div
                                 _ngcontent-serverapp-c126=""
-                                class=""
-                                style="width: 4%; list-style: outside;"
-                            ></div>
-                            <div
-                                _ngcontent-serverapp-c126=""
-                                class="my-0 mx-auto w-24"
+                                class="flex flex-row justify-between break-words"
                                 style="list-style: outside;"
                             >
                                 <div
                                     _ngcontent-serverapp-c126=""
-                                    class="mb-0 text-xl leading-8"
+                                    class="my-0 mx-auto w-24"
                                     style="list-style: outside;"
                                 >
                                     <div
                                         _ngcontent-serverapp-c126=""
-                                        class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
+                                        class="mb-0 text-xl leading-8"
                                         style="list-style: outside;"
                                     >
-                                        {{ $hourFee }}
-                                        <span
+                                        <div
                                             _ngcontent-serverapp-c126=""
-                                            class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
+                                            class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
                                             style="list-style: outside;"
-                                        >sat/vB</span>
-                                    </div>
-                                    <span
-                                        _ngcontent-serverapp-c126=""
-                                        class="block relative top-0 text-xs leading-5 text-gray-900"
-                                        style="list-style: outside;"
-                                    ></span>
-                                </div>
-                            </div>
-                            <div
-                                _ngcontent-serverapp-c126=""
-                                class="my-0 mx-auto w-24"
-                                style="list-style: outside;"
-                            >
-                                <div
-                                    _ngcontent-serverapp-c126=""
-                                    class="mb-0 text-xl leading-8"
-                                    style="list-style: outside;"
-                                >
-                                    <div
-                                        _ngcontent-serverapp-c126=""
-                                        class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
-                                        style="list-style: outside;"
-                                    >
-                                        {{ $halfHourFee }}
-                                        <span
-                                            _ngcontent-serverapp-c126=""
-                                            class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
-                                            style="list-style: outside;"
-                                        >sat/vB</span
                                         >
+                                            <span x-text="minimumFee"></span>
+                                            <span
+                                                _ngcontent-serverapp-c126=""
+                                                class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
+                                                style="list-style: outside;"
+                                            >sat/vB</span
+                                            >
+                                        </div>
                                     </div>
-                                    <span
-                                        _ngcontent-serverapp-c126=""
-                                        class="block relative top-0 text-xs leading-5 text-gray-900"
-                                        style="list-style: outside;"
-                                    ></span>
                                 </div>
-                            </div>
-                            <div
-                                _ngcontent-serverapp-c126=""
-                                class="my-0 mx-auto w-24"
-                                style="list-style: outside;"
-                            >
                                 <div
                                     _ngcontent-serverapp-c126=""
-                                    class="mb-0 text-xl leading-8"
+                                    class=""
+                                    style="width: 4%; list-style: outside;"
+                                ></div>
+                                <div
+                                    _ngcontent-serverapp-c126=""
+                                    class="my-0 mx-auto w-24"
                                     style="list-style: outside;"
                                 >
                                     <div
                                         _ngcontent-serverapp-c126=""
-                                        class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
+                                        class="mb-0 text-xl leading-8"
                                         style="list-style: outside;"
                                     >
-                                        {{ $fastestFee }}
+                                        <div
+                                            _ngcontent-serverapp-c126=""
+                                            class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
+                                            style="list-style: outside;"
+                                        >
+                                            <span x-text="hourFee"></span>
+                                            <span
+                                                _ngcontent-serverapp-c126=""
+                                                class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
+                                                style="list-style: outside;"
+                                            >sat/vB</span>
+                                        </div>
                                         <span
                                             _ngcontent-serverapp-c126=""
-                                            class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
+                                            class="block relative top-0 text-xs leading-5 text-gray-900"
                                             style="list-style: outside;"
-                                        >sat/vB</span
-                                        >
+                                        ></span>
                                     </div>
-                                    <span
+                                </div>
+                                <div
+                                    _ngcontent-serverapp-c126=""
+                                    class="my-0 mx-auto w-24"
+                                    style="list-style: outside;"
+                                >
+                                    <div
                                         _ngcontent-serverapp-c126=""
-                                        class="block relative top-0 text-xs leading-5 text-gray-900"
+                                        class="mb-0 text-xl leading-8"
                                         style="list-style: outside;"
-                                    ></span>
+                                    >
+                                        <div
+                                            _ngcontent-serverapp-c126=""
+                                            class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
+                                            style="list-style: outside;"
+                                        >
+                                            <span x-text="halfHourFee"></span>
+                                            <span
+                                                _ngcontent-serverapp-c126=""
+                                                class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
+                                                style="list-style: outside;"
+                                            >sat/vB</span
+                                            >
+                                        </div>
+                                        <span
+                                            _ngcontent-serverapp-c126=""
+                                            class="block relative top-0 text-xs leading-5 text-gray-900"
+                                            style="list-style: outside;"
+                                        ></span>
+                                    </div>
+                                </div>
+                                <div
+                                    _ngcontent-serverapp-c126=""
+                                    class="my-0 mx-auto w-24"
+                                    style="list-style: outside;"
+                                >
+                                    <div
+                                        _ngcontent-serverapp-c126=""
+                                        class="mb-0 text-xl leading-8"
+                                        style="list-style: outside;"
+                                    >
+                                        <div
+                                            _ngcontent-serverapp-c126=""
+                                            class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
+                                            style="list-style: outside;"
+                                        >
+                                            <span x-text="fastestFee"></span>
+                                            <span
+                                                _ngcontent-serverapp-c126=""
+                                                class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
+                                                style="list-style: outside;"
+                                            >sat/vB</span
+                                            >
+                                        </div>
+                                        <span
+                                            _ngcontent-serverapp-c126=""
+                                            class="block relative top-0 text-xs leading-5 text-gray-900"
+                                            style="list-style: outside;"
+                                        ></span>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
                     </app-fees-box>
-            </div>
-
+                </div>
+            </template>
         </div>
     </div>
 </div>