From fdd418ad63146e899ffbe892876b5d0876b01b14 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Thu, 10 Oct 2024 16:46:02 +0200
Subject: [PATCH] chore: show button for crypto map if the iframe cannot be
 loaded

---
 app/slices/CryptoMapContinentSelector/index.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/slices/CryptoMapContinentSelector/index.vue b/app/slices/CryptoMapContinentSelector/index.vue
index 45219284..1d49bad0 100644
--- a/app/slices/CryptoMapContinentSelector/index.vue
+++ b/app/slices/CryptoMapContinentSelector/index.vue
@@ -64,10 +64,12 @@ watch([activeItemIndex, iframe], () => {
 }, { immediate: true })
 
 const allowMapInteraction = ref(false)
+
+const iframeState = ref()
 </script>
 
 <template>
-  <section flex="col lg:row gap-x-24 gap-y-64 lg:gap-y-32" px="0 lg:64 xl:0" max-w="$nq-max-width" nq-wide bg-neutral-100>
+  <section v-if="iframeState !== 'error'" flex="col lg:row gap-x-24 gap-y-64 lg:gap-y-32" px="0 lg:64 xl:0" max-w="$nq-max-width" nq-wide bg-neutral-100>
     <div max-lg:w-full>
       <ul flex="~ lg:col gap-16" max-lg="snap-x snap-mandatory scroll-pl-32 md:scroll-pl-64 of-x-auto nq-scrollbar-hide py-20 lg:py-40">
         <li
@@ -118,11 +120,18 @@ const allowMapInteraction = ref(false)
       <iframe
         ref="iframe"
         loading="lazy"
-        w-full aspect="9/16 lg:initial" rounded-8 lg:h-full max-lg:max-h-80dvh ring="1.5 neutral-200" title="Crypto Map"
-        :src="cryptoMapUrl"
+        w-full
+        aspect="9/16 lg:initial" rounded-8 lg:h-full max-lg:max-h-80dvh ring="1.5 neutral-200" title="Crypto Map" :src="cryptoMapUrl"
         sandbox="allow-scripts allow-same-origin allow-popups"
         frameborder="0"
+        @load="() => iframeState = 'load'"
+        @error="() => iframeState = 'error'"
       />
     </div>
   </section>
+  <section v-else bg-neutral-100 pt-0>
+    <NuxtLink to="https://map.nimiq.com" target="_blank" w-max nq-arrow nq-pill-lg nq-pill-blue md:mx-auto>
+      Explore the Crypto Map
+    </NuxtLink>
+  </section>
 </template>