From e553fc77c8d320905d4634bd2cd6d38eab493c94 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Fri, 16 May 2025 14:38:32 +0200
Subject: [PATCH 1/2] fix: enhance Coinify and Letsexchange widgets with
 loading states and client-side rendering

---
 app/components/CoinifyWidget.vue      | 32 +++++++++++++++++++++++++-
 app/components/LetsexchangeWidget.vue | 33 ++++++++++++++++++++++++++-
 app/pages/index.vue                   |  4 ++--
 3 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/app/components/CoinifyWidget.vue b/app/components/CoinifyWidget.vue
index a8c0261..ead1cb7 100644
--- a/app/components/CoinifyWidget.vue
+++ b/app/components/CoinifyWidget.vue
@@ -1,9 +1,39 @@
 <script setup lang="ts">
 const runtimeConfig = useRuntimeConfig()
+const frameKey = ref(0)
+
+// Ensure this component only runs on client-side
+const mounted = ref(false)
+
+onMounted(() => {
+  mounted.value = true
+  frameKey.value = Date.now()
+})
+
+// Handle component reactivation (when navigating back to this page)
+onActivated(() => {
+  frameKey.value = Date.now()
+})
 </script>
 
 <template>
   <div class="min-w-screen-sm w-[398px] min-h-[659px]">
-    <iframe :src="runtimeConfig.public.coinifyUrl" width="100%" height="100%" allow="camera;fullscreen;accelerometer;gyroscope;magnetometer;payment" />
+    <ClientOnly>
+      <iframe 
+        v-if="mounted" 
+        :key="frameKey" 
+        :src="runtimeConfig.public.coinifyUrl" 
+        width="100%" 
+        height="100%" 
+        allow="camera;fullscreen;accelerometer;gyroscope;magnetometer;payment" 
+      />
+      <template #fallback>
+        <div class="flex items-center justify-center w-full h-[659px] bg-gray-100 rounded-xl">
+          <div class="text-center">
+            <div class="animate-pulse mb-2 font-semibold">Loading payment widget...</div>
+          </div>
+        </div>
+      </template>
+    </ClientOnly>
   </div>
 </template>
diff --git a/app/components/LetsexchangeWidget.vue b/app/components/LetsexchangeWidget.vue
index e5addbc..d471c21 100644
--- a/app/components/LetsexchangeWidget.vue
+++ b/app/components/LetsexchangeWidget.vue
@@ -1,9 +1,40 @@
 <script setup lang="ts">
 const runtimeConfig = useRuntimeConfig()
+const frameKey = ref(0)
+
+// Ensure this component only runs on client-side
+const mounted = ref(false)
+
+onMounted(() => {
+  mounted.value = true
+  frameKey.value = Date.now()
+})
+
+// Handle component reactivation (when navigating back to this page)
+onActivated(() => {
+  frameKey.value = Date.now()
+})
 </script>
 
 <template>
   <div id="lets_widget_Jqu53Q2FL2yQ81cj" class="lets-widget min-w-screen-sm max-w-[400px] min-h-[480px]">
-    <iframe :src="runtimeConfig.public.letsexchangeUrl" width="100%" height="100%" frameBorder="0" allow="clipboard-read; clipboard-write" />
+    <ClientOnly>
+      <iframe 
+        v-if="mounted" 
+        :key="frameKey" 
+        :src="runtimeConfig.public.letsexchangeUrl" 
+        width="100%" 
+        height="100%" 
+        frameBorder="0" 
+        allow="clipboard-read; clipboard-write" 
+      />
+      <template #fallback>
+        <div class="flex items-center justify-center w-full h-[480px] bg-gray-100 rounded-xl">
+          <div class="text-center">
+            <div class="animate-pulse mb-2 font-semibold">Loading exchange widget...</div>
+          </div>
+        </div>
+      </template>
+    </ClientOnly>
   </div>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 9c2b603..007b5cb 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -94,8 +94,8 @@ function scrollToWidget() {
 
       <!-- Widget -->
       <div ref="widgetRef" data-section="widget" class="flex justify-center">
-        <CoinifyWidget v-if="!swap" />
-        <LetsexchangeWidget v-else />
+        <CoinifyWidget v-if="!swap" :key="`coinify-${swap}`" />
+        <LetsexchangeWidget v-else :key="`letsexchange-${swap}`" />
       </div>
     </section>
 

From e9381ad5c8ab494cedfd5795f8fe52b70c6ab85c Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Fri, 16 May 2025 14:40:32 +0200
Subject: [PATCH 2/2] lint

---
 app/app.vue                           |  7 +++----
 app/components/CoinifyWidget.vue      | 18 ++++++++++--------
 app/components/LetsexchangeWidget.vue | 20 +++++++++++---------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 7485da8..8596d5b 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -4,13 +4,12 @@ import { NuxtLayout } from '#components'
 useHead({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-    { charset: 'utf-8' }
+    { charset: 'utf-8' },
   ],
   link: [
-    { rel: 'icon', type: 'image/png', href: '/favicon-32x32.png' }
-  ]
+    { rel: 'icon', type: 'image/png', href: '/favicon-32x32.png' },
+  ],
 })
-
 </script>
 
 <template>
diff --git a/app/components/CoinifyWidget.vue b/app/components/CoinifyWidget.vue
index ead1cb7..1711aa3 100644
--- a/app/components/CoinifyWidget.vue
+++ b/app/components/CoinifyWidget.vue
@@ -19,18 +19,20 @@ onActivated(() => {
 <template>
   <div class="min-w-screen-sm w-[398px] min-h-[659px]">
     <ClientOnly>
-      <iframe 
-        v-if="mounted" 
-        :key="frameKey" 
-        :src="runtimeConfig.public.coinifyUrl" 
-        width="100%" 
-        height="100%" 
-        allow="camera;fullscreen;accelerometer;gyroscope;magnetometer;payment" 
+      <iframe
+        v-if="mounted"
+        :key="frameKey"
+        :src="runtimeConfig.public.coinifyUrl"
+        width="100%"
+        height="100%"
+        allow="camera;fullscreen;accelerometer;gyroscope;magnetometer;payment"
       />
       <template #fallback>
         <div class="flex items-center justify-center w-full h-[659px] bg-gray-100 rounded-xl">
           <div class="text-center">
-            <div class="animate-pulse mb-2 font-semibold">Loading payment widget...</div>
+            <div class="animate-pulse mb-2 font-semibold">
+              Loading payment widget...
+            </div>
           </div>
         </div>
       </template>
diff --git a/app/components/LetsexchangeWidget.vue b/app/components/LetsexchangeWidget.vue
index d471c21..2f2fa69 100644
--- a/app/components/LetsexchangeWidget.vue
+++ b/app/components/LetsexchangeWidget.vue
@@ -19,19 +19,21 @@ onActivated(() => {
 <template>
   <div id="lets_widget_Jqu53Q2FL2yQ81cj" class="lets-widget min-w-screen-sm max-w-[400px] min-h-[480px]">
     <ClientOnly>
-      <iframe 
-        v-if="mounted" 
-        :key="frameKey" 
-        :src="runtimeConfig.public.letsexchangeUrl" 
-        width="100%" 
-        height="100%" 
-        frameBorder="0" 
-        allow="clipboard-read; clipboard-write" 
+      <iframe
+        v-if="mounted"
+        :key="frameKey"
+        :src="runtimeConfig.public.letsexchangeUrl"
+        width="100%"
+        height="100%"
+        frameBorder="0"
+        allow="clipboard-read; clipboard-write"
       />
       <template #fallback>
         <div class="flex items-center justify-center w-full h-[480px] bg-gray-100 rounded-xl">
           <div class="text-center">
-            <div class="animate-pulse mb-2 font-semibold">Loading exchange widget...</div>
+            <div class="animate-pulse mb-2 font-semibold">
+              Loading exchange widget...
+            </div>
           </div>
         </div>
       </template>