mempool weather added

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'];
     }
 }

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');
     }
 

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>

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>

resources/views/livewire/banner/mempool-weather.blade.php

@@ -14,7 +14,44 @@
         <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
+            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="flex flex-col justify-around p-5 leading-6 text-center text-white break-words"
@@ -106,7 +143,7 @@
                                             class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
                                             style="list-style: outside;"
                                         >
-                                        {{ $minimumFee }}
+                                            <span x-text="minimumFee"></span>
                                             <span
                                                 _ngcontent-serverapp-c126=""
                                                 class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
@@ -136,7 +173,7 @@
                                             class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
                                             style="list-style: outside;"
                                         >
-                                        {{ $hourFee }}
+                                            <span x-text="hourFee"></span>
                                             <span
                                                 _ngcontent-serverapp-c126=""
                                                 class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
@@ -165,7 +202,7 @@
                                             class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
                                             style="list-style: outside;"
                                         >
-                                        {{ $halfHourFee }}
+                                            <span x-text="halfHourFee"></span>
                                             <span
                                                 _ngcontent-serverapp-c126=""
                                                 class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
@@ -195,7 +232,7 @@
                                             class="m-auto leading-7 border-b border-gray-200 border-solid text-gray-900"
                                             style="list-style: outside;"
                                         >
-                                        {{ $fastestFee }}
+                                            <span x-text="fastestFee"></span>
                                             <span
                                                 _ngcontent-serverapp-c126=""
                                                 class="inline-flex relative top-0 text-xs leading-4 text-gray-900"
@@ -214,7 +251,7 @@
                         </div>
                     </app-fees-box>
                 </div>
-
+            </template>
         </div>
     </div>
 </div>