feat: Success notification unlockable drop

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">
@@ -181,9 +175,10 @@ import { collectionId, countDownTime } from './const'
 import { UNLOCKABLE_CAMPAIGN, createUnlockableMetadata } from './utils'
 import { endOfHour, startOfHour } from 'date-fns'
 import { useCountDown } from './utils/useCountDown'
+const { redesign } = useExperiments()
 
 const Loader = defineAsyncComponent(
- () => import('@/components/shared/Loader.vue')
+ () => import('@/components/collection/unlockable/UnlockableLoader.vue')
 )
 
 const { toast } = useToast()
@@ -193,8 +188,7 @@ const resultList = ref<any[]>([])
 const selectedImage = ref('')
 const MAX_PER_WINDOW = 10
 const { urlPrefix } = usePrefix()
-const isLoading = ref(false)
-const status = ref('')
+const isLoading = ref(redesign.value || false)
 const { accountId, isLogIn } = useAuth()
 const { hours, minutes, seconds } = useCountDown(countDownTime)
 const justMinted = ref('')
@@ -203,6 +197,13 @@ onMounted(async () => {
  const res = await getLatestWaifuImages()
  imageList.value = res.result.map((item) => item.output)
  resultList.value = res.result
+
+ // for preview test
+ if (redesign.value) {
+ setTimeout(() => {
+ justMinted.value = '123'
+ }, 5000)
+ }
 })
 
 const leftTime = computed(() => {

components/collection/unlockable/UnlockableLoader.vue

@@ -0,0 +1,108 @@
+<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" />
+ <svg
+ width="385"
+ height="155"
+ viewBox="0 0 385 155"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M36.6838 58.5671C36.6838 62.8979 33.1804 66.4087 28.859 66.4087C24.5375 66.4087 21.0342 62.8979 21.0342 58.5671C21.0342 54.2363 24.5375 50.7254 28.859 50.7254C33.1804 50.7254 36.6838 54.2369 36.6838 58.5671ZM130.47 103.434C126.657 103.434 123.565 106.532 123.565 110.353C123.565 114.175 126.657 117.273 130.47 117.273C134.283 117.273 137.374 114.175 137.374 110.353C137.374 106.532 134.283 103.434 130.47 103.434ZM369.615 24.6705C365.801 24.6705 362.71 27.7683 362.71 31.5898C362.71 35.4113 365.801 38.5091 369.615 38.5091C373.428 38.5091 376.519 35.4113 376.519 31.5898C376.519 27.7683 373.428 24.6705 369.615 24.6705Z"
+ fill="#6188E7"
+ fill-opacity="0.99" />
+ <path
+ d="M-44.1244 141.572C-44.1244 146.575 -48.1717 150.631 -53.1639 150.631C-58.1561 150.631 -62.2034 146.575 -62.2034 141.572C-62.2034 136.569 -58.1561 132.513 -53.1639 132.513C-48.1711 132.512 -44.1244 136.568 -44.1244 141.572ZM96.8441 9.01993C93.543 5.62884 88.9093 3.34423 83.7959 2.58698C80.8131 2.14372 78.0258 4.21285 77.5835 7.20937C77.1417 10.2053 79.2064 12.9925 82.1959 13.4352C84.9134 13.8376 87.3975 15.0197 89.0121 16.6774C89.7353 17.4207 90.9109 18.9234 90.6579 20.6394C90.4049 22.3554 88.8457 23.4529 87.9387 23.9544C85.9142 25.0743 83.1961 25.484 80.478 25.0821C69.3711 23.4389 59.2292 29.5764 57.8721 38.7691C56.5161 47.9612 64.4503 56.779 75.559 58.425C75.6171 58.4334 75.674 58.4311 75.7321 58.4379C81.1225 59.302 84.4259 62.8856 84.0238 65.6107C83.7708 67.3261 82.2115 68.4242 81.3046 68.9257C79.2801 70.045 76.562 70.4569 73.8439 70.0534C62.7375 68.4091 52.595 74.5476 51.238 83.7403C49.882 92.9325 57.8162 101.75 68.9249 103.396C69.1957 103.436 69.4654 103.456 69.7318 103.456C72.3991 103.456 74.7352 101.498 75.1373 98.7739C75.5791 95.7785 73.5144 92.9913 70.5249 92.548C65.0317 91.7342 61.6563 88.098 62.0629 85.3444C62.4694 82.5896 66.7485 80.084 72.2433 80.9017C73.4669 81.083 74.6906 81.1725 75.9002 81.1725C79.7414 81.1725 83.443 80.2681 86.5911 78.5269C91.1505 76.0056 94.1601 71.8824 94.8487 67.2142C96.2047 58.022 88.2704 49.2043 77.1618 47.5583C77.0886 47.5476 77.0166 47.5448 76.9434 47.537C71.5804 46.66 68.296 43.0898 68.6964 40.3731C69.103 37.6184 73.3831 35.1138 78.8769 35.9304C80.101 36.1117 81.3241 36.2013 82.5338 36.2013C86.3755 36.2013 90.0765 35.2968 93.2246 33.5557C97.784 31.0343 100.794 26.9112 101.482 22.2429C102.171 17.5746 100.48 12.7552 96.8441 9.01993Z"
+ fill="#FF7AC3"
+ fill-opacity="0.99" />
+ <path
+ d="M374.508 131.524C374.508 136.527 370.46 140.583 365.468 140.583C360.476 140.583 356.429 136.527 356.429 131.524C356.429 126.521 360.476 122.465 365.468 122.465C370.46 122.465 374.508 126.521 374.508 131.524ZM243.908 21.1043C240.395 17.6797 235.539 15.4387 230.235 14.7951C230.16 14.7861 230.087 14.7856 230.013 14.7794C225.236 14.1184 222 11.0727 222.284 8.72592C222.7 5.27997 220.25 2.14801 216.812 1.73049C213.377 1.31633 210.248 3.76829 209.832 7.21367C208.644 17.0411 216.942 25.8605 228.723 27.2916C228.789 27.2994 228.853 27.2977 228.919 27.3033C231.4 27.6419 233.667 28.6572 235.163 30.1146C235.799 30.7347 236.841 31.9817 236.675 33.3613C236.508 34.7398 235.198 35.7007 234.433 36.1507C232.586 37.2354 230.062 37.6803 227.505 37.3691C222.199 36.7238 216.951 37.738 212.723 40.2229C208.014 42.99 204.971 47.4081 204.374 52.3428C203.185 62.1707 211.483 70.9896 223.265 72.4212C223.521 72.4526 223.776 72.4677 224.028 72.4677C227.154 72.4677 229.86 70.1271 230.245 66.9386C230.662 63.4927 228.212 60.3607 224.774 59.9432C219.875 59.3483 216.537 56.2382 216.825 53.8556C216.992 52.4765 218.302 51.5156 219.068 51.0656C220.914 49.9809 223.439 49.536 225.995 49.8472C227.038 49.9742 228.078 50.0364 229.109 50.0364C233.323 50.0364 237.38 48.9903 240.777 46.9934C245.486 44.2263 248.529 39.8082 249.126 34.8735C249.723 29.9377 247.821 24.9191 243.908 21.1043ZM441.684 130.804C444.58 128.901 445.389 125.005 443.489 122.102C422.471 89.9844 438.585 67.3448 448.212 53.8185C449.383 52.1736 450.489 50.6194 451.391 49.2258C453.276 46.3138 452.449 42.4218 449.542 40.5329C446.636 38.644 442.753 39.4734 440.868 42.3854C440.117 43.5468 439.136 44.9241 438 46.5198C428.028 60.5313 407.277 89.6872 433 128.996C433.571 129.869 434.35 130.586 435.266 131.081C436.183 131.577 437.209 131.836 438.25 131.834C439.471 131.835 440.665 131.477 441.684 130.804Z"
+ fill="#B6CBFF"
+ fill-opacity="0.99" />
+ <path
+ d="M334.918 78.4648C334.918 81.9309 332.114 84.7405 328.655 84.7405C325.197 84.7405 322.393 81.9309 322.393 78.4648C322.393 74.9987 325.197 72.1892 328.655 72.1892C332.114 72.1892 334.918 74.9987 334.918 78.4648ZM161.196 41.9243C157.839 41.9243 155.117 44.6522 155.117 48.0164C155.117 51.3806 157.839 54.1085 161.196 54.1085C164.554 54.1085 167.275 51.3806 167.275 48.0164C167.275 44.6522 164.553 41.9243 161.196 41.9243ZM263.559 132.675C264.503 131.651 265.636 130.499 266.836 129.28C272.921 123.094 281.256 114.622 284.863 103.035C289.196 89.1162 285.476 74.3239 273.805 59.0687C271.78 56.4203 267.996 55.9211 265.354 57.9499C262.713 59.9799 262.213 63.7712 264.238 66.419C273.514 78.5444 276.497 89.3451 273.355 99.4372C270.619 108.226 263.761 115.197 258.251 120.798C256.981 122.09 255.782 123.309 254.704 124.478C252.445 126.929 252.597 130.75 255.042 133.013C256.154 134.046 257.614 134.619 259.13 134.617C259.962 134.618 260.786 134.446 261.548 134.112C262.31 133.778 262.995 133.289 263.559 132.675Z"
+ fill="#FF7AC3"
+ fill-opacity="0.99" />
+ <path
+ d="M34.753 135.748L17.6517 135.979L21.3501 122.147L35.1531 125.853L34.753 135.748Z"
+ fill="#FF7AC3"
+ fill-opacity="0.99" />
+ <path
+ d="M183.734 120.857L167.276 125.516L167.276 111.196L181.565 111.196L183.734 120.857Z"
+ fill="#B6CBFF"
+ fill-opacity="0.99" />
+ </svg>
+
+ <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 class="is-size-7">
+ Get ready for the big reveal! Your NFT will be visible in just
+ <span class="has-text-weight-bold">30 seconds.</span>
+ </div>
+ <NeoButton
+ class="mb-2 mt-5 loading-button"
+ 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'
+
+const props = withDefaults(
+ defineProps<{
+ value: boolean
+ canCancel?: boolean
+ minted?: string
+ }>(),
+ {
+ value: false,
+ canCancel: true,
+ minted: '',
+ }
+)
+const { urlPrefix } = usePrefix()
+const isLoading = useVModel(props, 'value')
+const emit = defineEmits(['input'])
+
+const closeLoading = () => {
+ emit('input', false)
+}
+const buttonLabel = computed(() =>
+ props.minted ? 'View Item' : 'Preparing Your Item...'
+)
+</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>