Merge pull request #16 from sktbrd/patch-3

Make mint Noggles Modal work again

src/common/modals/compositions/MintNogsModal.vue

@@ -1,24 +1,34 @@
 <template>
   <iframe-modal
-    v-bind="props"
+    :is-shown="props.isShown"
+    @update:is-shown="handleModalClose"
     class="mint-nogs-modal"
-    @update:is-shown="emit('update:is-shown', $event)"
   >
     <template #default="{ modal }">
       <link rel="stylesheet" href="https://mint.highlight.xyz/assets/embed.css" />
-      <div data-widget="highlight-mint-card" data-mint-collection-id="663d2717dffb7b3a490f398f"  ></div>
-      <component is="script" type="module" crossorigin="true" src="https://mint.highlight.xyz/assets/embed.js?v=1" id="highlight-embed-script" data-embed-version="2.0"></component>
+      <div data-widget="highlight-mint-card" data-mint-collection-id="663d2717dffb7b3a490f398f"></div>
+      <component
+        is="script"
+        type="module"
+        crossorigin="true"
+        src="https://mint.highlight.xyz/assets/embed.js?v=1"
+        id="highlight-embed-script"
+        data-embed-version="2.0"
+      ></component>
     </template>
   </iframe-modal>
 </template>
 
 <script lang="ts" setup>
-import IframeModal from '../IframeModal.vue'
+import { defineEmits, defineProps, withDefaults, watch, onMounted } from 'vue';
+import IframeModal from '../IframeModal.vue';
 
+// Emit event for closing the modal
 const emit = defineEmits<{
   (e: 'update:is-shown', v: boolean): void
 }>()
 
+// Define props with defaults
 const props = withDefaults(
   defineProps<{
     isShown: boolean
@@ -28,6 +38,27 @@ const props = withDefaults(
     isCloseByClickOutside: true,
   },
 )
+
+// Log when modal props change
+watch(() => props.isShown, (newVal) => {
+  console.log(`Modal isShown prop changed: ${newVal}`);
+  if (newVal) {
+    console.log("Modal opened");
+  } else {
+    console.log("Modal closed");
+  }
+});
+
+// Function to handle modal closing
+function handleModalClose(event: boolean) {
+  console.log(`Modal closing: ${event}`);
+  emit('update:is-shown', event); // Emit event to update parent
+}
+
+// Log when component mounts
+onMounted(() => {
+  console.log('mint-nogs-modal component mounted');
+});
 </script>
 
 <style lang="scss" scoped>