✨ minting Modal

components/massmint/Massmint.vue

@@ -37,15 +37,15 @@
  <EditPanel
  :nft="nftBeingEdited"
  :open="sideBarOpen"
- @close="closeSideBar"
+ @close="sideBarOpen = false"
  @save="updateNFT" />
  <div class="mt-6 is-flex is-justify-content-center w-full">
  <NeoButton
  class="is-flex is-flex-grow-1 limit-width"
  :label="mintButtonLabel"
  variant="k-accent"
  :disabled="!mediaLoaded"
- @click.native="openMintModal" />
+ @click.native="openReviewModal" />
  </div>
  <DeleteModal
  v-if="nftInDeleteModal"
@@ -62,7 +62,12 @@
  v-model="overViewModalOpen"
  :num-missing-descriptions="numberOfMissingDescriptions"
  :num-nfts="Object.keys(NFTS).length"
- @close="overViewModalOpen = false" />
+ @close="overViewModalOpen = false"
+ @mint="startMint" />
+ <MintingModal
+ v-model="mintModalOpen"
+ :loading="isMinting"
+ @close="mintModalOpen = false" />
  </div>
 </template>
 
@@ -79,27 +84,33 @@ import { NFT } from './types'
 import MissingInfoModal from './modals/MissingInfoModal.vue'
 import ReviewModal from './modals/ReviewModal.vue'
 import DeleteModal from './modals/DeleteModal.vue'
+import MintingModal from './modals/MintingModal.vue'
 
 const preferencesStore = usePreferencesStore()
 const { $consola, $i18n } = useNuxtApp()
 const router = useRouter()
 const route = useRoute()
 const { urlPrefix } = usePrefix()
 
+const selectedCollection = ref<MintedCollection>()
+const NFTS = ref<{ [nftId: string]: NFT }>({})
+const mediaLoaded = ref(false)
+
 const nftBeingEdited = ref<NFT>()
 const nftInDeleteModal = ref<NFT>()
 const sideBarOpen = ref(false)
 const deleteModalOpen = ref(false)
+const missingInfoModalOpen = ref(false)
+const overViewModalOpen = ref(false)
+const mintModalOpen = ref(false)
+const isMinting = ref(false)
 const numberOfMissingNames = computed(
  () => Object.values(NFTS.value).filter((nft) => !nft.name).length
 )
 const numberOfMissingDescriptions = computed(
  () => Object.values(NFTS.value).filter((nft) => !nft.description).length
 )
 
-const missingInfoModalOpen = ref(false)
-const overViewModalOpen = ref(false)
-
 const openSideBarWith = (nft: NFT) => {
  nftBeingEdited.value = nft
  sideBarOpen.value = true
@@ -113,22 +124,26 @@ const closeDeleteModal = () => {
  nftInDeleteModal.value = undefined
 }
 
-const openMintModal = () => {
+const openReviewModal = () => {
  if (numberOfMissingNames.value > 0) {
  missingInfoModalOpen.value = true
  return
  }
  overViewModalOpen.value = true
 }
 
-const closeSideBar = () => {
- sideBarOpen.value = false
+const startMint = () => {
+ overViewModalOpen.value = false
+ mintModalOpen.value = true
+ isMinting.value = true
+
+ // fake mint
+ setTimeout(() => {
+ isMinting.value = false
+ }, 5000)
 }
-const tabs = ['Collection', 'NFT', 'Mass Mint']
 
-const selectedCollection = ref<MintedCollection>()
-const NFTS = ref<{ [nftId: string]: NFT }>({})
-const mediaLoaded = ref(false)
+const tabs = ['Collection', 'NFT', 'Mass Mint']
 
 const onCollectionSelected = (collection) => {
  selectedCollection.value = collection

components/massmint/modals/MintingModal.vue

@@ -0,0 +1,44 @@
+<template>
+ <NeoModal v-model="isModalActive" scroll="clip" :can-cancel="!loading">
+ <div class="p-7">
+ <div
+ v-if="loading"
+ class="is-flex is-flex-direction-column is-align-items-center">
+ <img src="/preloader.svg" width="200" />
+ <span class="mt-6">Minting Your NFTS...</span>
+ </div>
+ <div
+ v-else
+ class="is-flex is-flex-direction-column is-align-items-center">
+ <NeoIcon icon="circle-check" class="check-icon has-text-k-green" />
+ <span class="mt-4">All of your NFTs were successfuly minted.</span>
+ <div class="is-flex w-full is-justify-content-center pt-5 px-7">
+ <NeoButton
+ :label="'Done'"
+ variant="k-accent"
+ class="is-flex is-flex-grow-1"
+ @click.native="emit('close')" />
+ </div>
+ </div>
+ </div>
+ </NeoModal>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoIcon, NeoModal } from '@kodadot1/brick'
+
+const props = defineProps<{
+ value: boolean
+ loading: boolean
+}>()
+
+const isModalActive = useVModel(props, 'value')
+
+const emit = defineEmits(['close'])
+</script>
+
+<style lang="scss" scoped>
+.check-icon {
+ font-size: 2.5rem;
+}
+</style>

components/massmint/modals/ReviewModal.vue

@@ -35,7 +35,7 @@
  :label="$t('massmint.yesMint')"
  :variant="mintBtnVariant"
  class="min-width is-flex is-flex-grow-1"
- @click.native="emit('close')" />
+ @click.native="emit('mint')" />
  <NeoButton
  :label="$t('massmint.cancel')"
  :variant="cancelBtnVariant"
@@ -65,7 +65,7 @@ const cancelBtnVariant = computed(() =>
 
 const isModalActive = useVModel(props, 'value')
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'mint'])
 </script>
 
 <style lang="scss" scoped>

libs/ui/src/components/NeoModal/NeoModal.vue

@@ -3,6 +3,7 @@
  class="neo-modal"
  :scroll="scroll"
  :active.sync="isModalActive"
+ :can-cancel="canCancel"
  @close="updateClose">
  <slot />
  </o-modal>
@@ -11,10 +12,17 @@
 <script lang="ts" setup>
 import { OModal } from '@oruga-ui/oruga'
 
-const props = defineProps<{
- value: boolean
- scroll?: 'clip' | 'keep'
-}>()
+const props = withDefaults(
+ defineProps<{
+ value: boolean
+ scroll?: 'clip' | 'keep'
+ canCancel?: string[] | boolean
+ }>(),
+ {
+ canCancel: true,
+ scroll: 'keep',
+ }
+)
 
 const emit = defineEmits(['close'])