Merge pull request #6213 from Jarsen136/issue-6204

components/collection/unlockable/UnlockableContainer.vue

@@ -1,12 +1,6 @@
 <template>
  <div class="unlockable-container">
- <Loader v-model="isLoading" :status="status" />
- <MessageNotify
- v-if="justMinted"
- :duration="60000"
- :title="$t('mint.success')"
- :subtitle="$t('mint.unlockable.readyIn', ['60 sec'])"
- @close="redirectToMyWaifu" />
+ <Loader v-model="isLoading" :minted="justMinted" />
  <CountdownTimer />
  <hr class="text-color my-0" />
  <div class="container is-fluid">
@@ -183,7 +177,7 @@ import { endOfHour, startOfHour } from 'date-fns'
 import { useCountDown } from './utils/useCountDown'
 
 const Loader = defineAsyncComponent(
- () => import('@/components/shared/Loader.vue')
+ () => import('@/components/collection/unlockable/UnlockableLoader.vue')
 )
 
 const { toast } = useToast()
@@ -194,7 +188,6 @@ const selectedImage = ref('')
 const MAX_PER_WINDOW = 10
 const { urlPrefix } = usePrefix()
 const isLoading = ref(false)
-const status = ref('')
 const { accountId, isLogIn } = useAuth()
 const { hours, minutes, seconds } = useCountDown(countDownTime)
 const justMinted = ref('')
@@ -318,10 +311,6 @@ const handleSubmitMint = async () => {
  isLoading.value = false
  }
 }
-
-const redirectToMyWaifu = () => {
- navigateTo(`/${urlPrefix.value}/gallery/${justMinted.value}`)
-}
 </script>
 
 <style scoped lang="scss">

components/collection/unlockable/UnlockableLoader.vue

@@ -0,0 +1,82 @@
+<template>
+ <NeoLoading :active.sync="isLoading" is-full-page :can-cancel="canCancel">
+ <div class="loading-container py-2">
+ <NeoIcon class="close-icon" icon="close" @click.native="closeLoading" />
+ <img :src="unloackableLoaderImg" />
+ <div class="is-flex is-flex-direction-column is-align-items-center px-7">
+ <div class="has-text-weight-bold my-2">Congratulations</div>
+ <div>
+ Get ready for the big reveal! Your NFT will be visible in just
+ <span class="has-text-weight-bold">30 seconds</span> on your profile.
+ </div>
+ <NeoButton
+ class="mb-2 mt-4 loading-button is-size-6"
+ variant="secondary"
+ tag="nuxt-link"
+ :to="`/${urlPrefix}/gallery/${minted}`"
+ :disabled="!minted"
+ :label="buttonLabel" />
+ </div>
+ </div>
+ </NeoLoading>
+</template>
+
+<script lang="ts" setup>
+import { NeoButton, NeoIcon, NeoLoading } from '@kodadot1/brick'
+import unloackableLoaderImg from '@/assets/unlockable-loader.svg'
+
+const props = withDefaults(
+ defineProps<{
+ value: boolean
+ canCancel?: boolean
+ minted?: string
+ }>(),
+ {
+ value: false,
+ canCancel: true,
+ minted: '',
+ }
+)
+const { urlPrefix } = usePrefix()
+const { $i18n } = useNuxtApp()
+
+const isLoading = useVModel(props, 'value')
+const emit = defineEmits(['input'])
+
+const closeLoading = () => {
+ emit('input', false)
+}
+const buttonLabel = computed(() =>
+ $i18n.t(
+ props.minted ? 'mint.unlockable.viewItem' : 'mint.unlockable.preparing'
+ )
+)
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.loading-container {
+ background: $white;
+ backdrop-filter: $frosted-glass-backdrop-filter;
+ margin: 0rem 1rem;
+ width: 385px;
+ min-height: 336px;
+
+ @include ktheme() {
+ box-shadow: theme('primary-shadow');
+ border: 1px solid theme('border-color');
+ background: theme('background-color');
+ }
+ .close-icon {
+ position: absolute;
+ right: 28px;
+ top: 17px;
+ cursor: pointer;
+ }
+ .loading-button {
+ height: 35px;
+ min-width: 126px;
+ }
+}
+</style>

locales/en.json

@@ -477,6 +477,8 @@
  "unlockable": {
  "phaseIntroduction": "We will have a 60-minute window every phase, each featuring only 10 exclusive items.",
  "readyIn": "Your mint will be ready in {0}, DO NOT CLOSE THIS WINDOW",
+ "viewItem": "View Item",
+ "preparing": "Preparing Your Item...",
  "alreadyMinted": "🎉 You already have this NFT, check it here"
  }
  },