kodadot · yangwao · Nov 1, 2023 · Oct 17, 2023 · Oct 18, 2023 · Oct 18, 2023
@@ -79,7 +79,7 @@ body:
       multiple: true
       options:
         - Basilisk
-        - MoonSama
+        - Asset Hub
         - Kusama
   - type: textarea
     id: Screenshots

@@ -1,5 +1,5 @@
-name: 🐞₷ Bug Report Polkadot Assests Hub & Kusama Assets Hub (known as Statemint & Statemine)
-description: Create a report to help us improve KodaDot on Assets Hub
+name: 🐞₷ Bug Report Polkadot & Kusama Asset Hubs (known as Statemint & Statemine)
+description: Create a report to help us improve KodaDot on Asset Hubs
 title: 'Be descriptive and short'
 labels: ['A-statemine', 'bug', 'p2']
 body:
@@ -70,6 +70,7 @@ body:
         - PolkadotJS
         - Talisman
         - SubWallet
+        - Nova Wallet
   - type: textarea
     id: Screenshots
     attributes:

@@ -3,9 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-useHead({
-  script: [{ src: 'https://substackapi.com/widget.js', async: true }],
-})
+const substackScript = document.createElement('script')
 
 window.CustomSubstackWidget = {
   substackUrl: 'kodadot.substack.com',
@@ -18,4 +16,14 @@ window.CustomSubstackWidget = {
     text: '#000000',
   },
 }
+
+onMounted(() => {
+  substackScript.src = 'https://substackapi.com/widget.js'
+  substackScript.async = true
+  document.head.append(substackScript)
+})
+
+onUnmounted(() => {
+  substackScript?.remove()
+})
 </script>
@@ -9,7 +9,9 @@
             :to="urlOf({ id: item.id, url: 'gallery', chain: item.chain })"
             :title="item.name"
             class="has-text-weight-bold carousel-info-name">
-            <span class="is-ellipsis">{{ item.name || '--' }}</span>
+            <span class="is-ellipsis"
+              >{{ item.name || '--' }}#{{ item.id }}</span
+            >
           </nuxt-link>
 
           <div class="is-flex is-flex-direction-column is-align-items-start">

@@ -143,6 +143,8 @@ useSeoMeta({
       width: 5.5rem;
       height: 5.5rem;
       border: 1px solid;
+      padding: 1rem;
+      object-fit: contain;
     }
   }
 

@@ -1,11 +1,11 @@
 <template>
   <div class="is-flex">
     <SidebarFilter />
-    <div ref="wrapper" class="w-full mt-5">
+    <div ref="wrapper" class="w-full mt-4">
       <div v-if="tablet">
         <div class="columns">
           <div class="column is-two-thirds">
-            <ActivityChart :events="events" />
+            <ActivityChart :events="events" class="mt-2" />
           </div>
           <div class="column">
             <OwnerInsights :owners="owners" :flippers="flippers" />

@@ -16,7 +16,7 @@
             <div>Total available items</div>
             <div>{{ totalAvailableMintCount }} / {{ totalCount }}</div>
           </div>
-          <UnlockableTag />
+          <UnlockableTag :collection-id="collectionId" />
 
           <div>
             <div
@@ -77,48 +77,7 @@
           <ImageSlider v-if="imageList.length" :image-list="imageList" />
         </div>
       </div>
-      <hr class="text-color my-4" />
-      <div class="columns is-desktop">
-        <div
-          class="column is-half-desktop is-flex is-flex-direction-column is-justify-content-center order-1">
-          <div
-            class="is-flex is-align-items-center has-text-weight-bold is-size-6 mb-2">
-            <svg
-              class="mr-2"
-              width="20"
-              height="21"
-              viewBox="0 0 20 21"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M7.5 6.65137V8.65137H15.5H17V10.1514V17.1514V18.6514H15.5H4.5H3V17.1514V10.1514V8.65137H4.5H6V6.65137C6 4.46387 7.78125 2.65137 10 2.65137C11.7812 2.65137 13.2812 3.83887 13.7812 5.43262L12.375 5.90137C12.0312 4.90137 11.0938 4.15137 10 4.15137C8.59375 4.15137 7.5 5.27637 7.5 6.65137ZM4.5 17.1514H15.5V10.1514H4.5V17.1514Z"
-                fill="currentColor" />
-            </svg>
-            How unlockable item works
-          </div>
-          <div>
-            Experience the excitement of unlocking hidden rewards! Get your
-            hands on exclusive merchandise (and an NFT!) linked to unlockable
-            content. For the next ten hours, the fastest ten individuals can
-            mint their very own anime waifu character NFT for free. Simply log
-            in with your wallet, click on the "Mint" button, and sign the
-            transaction. Afterward, check your profile to find the NFT and click
-            "Unlockable Content" to reveal the surprise. Follow the schedule so
-            you don't miss this!
-          </div>
-          <NeoButton
-            tag="a"
-            href="https://hello.kodadot.xyz/fandom-toolbox/audience-growth/unlockables"
-            target="_blank"
-            variant="secondary"
-            class="mt-2">
-            Learn More
-          </NeoButton>
-        </div>
-        <div class="column">
-          <img src="/unlockable-introduce.svg" alt="Unlockable" />
-        </div>
-      </div>
+      <CollectionUnlockableItemInfo :collection-id="collectionId" />
       <div class="my-4">
         <CarouselTypeLatestMints
           :collection-id="collectionId"

@@ -1,8 +1,7 @@
 <template>
   <div class="unlockable-container">
     <CollectionUnlockableLoader v-model="isLoading" :minted="justMinted" />
-    <CountdownTimer />
-    <div class="container is-fluid">
+    <div class="container is-fluid border-top">
       <div class="columns is-desktop">
         <div class="column is-half-desktop mobile-padding">
           <UnlockableCollectionInfo
@@ -15,7 +14,7 @@
             <div>{{ $t('mint.unlockable.totalAvailableItem') }}</div>
             <div>{{ totalAvailableMintCount }} / {{ totalCount }}</div>
           </div>
-          <UnlockableTag />
+          <UnlockableTag :collection-id="collectionId" />
 
           <div>
             <div
@@ -65,6 +64,7 @@
                   ref="root"
                   class="my-2 mint-button"
                   variant="k-accent"
+                  :loading="isImageFetching"
                   :disabled="mintButtonDisabled"
                   :label="$t('mint.unlockable.mintThisNft')"
                   @click="handleSubmitMint" />
@@ -79,38 +79,7 @@
             @select="handleSelectImage" />
         </div>
       </div>
-      <hr class="text-color my-4" />
-      <div class="columns is-desktop">
-        <div
-          class="column is-half-desktop is-flex is-flex-direction-column is-justify-content-center order-1">
-          <div
-            class="is-flex is-align-items-center has-text-weight-bold is-size-6 mb-2">
-            <NeoIcon icon="unlock" class="mr-2" />
-            {{ $t('mint.unlockable.howItemWork') }}
-          </div>
-          <div>
-            Experience the excitement of unlocking hidden rewards! Get your
-            hands on exclusive merchandise (and an NFT!) linked to unlockable
-            content. For the next ten hours, the fastest ten individuals can
-            mint their very own anime waifu character NFT for free. Simply log
-            in with your wallet, click on the "Mint" button, and sign the
-            transaction. Afterward, check your profile to find the NFT and click
-            "Unlockable Content" to reveal the surprise. Follow the schedule so
-            you don't miss this!
-          </div>
-          <NeoButton
-            tag="a"
-            href="https://hello.kodadot.xyz/fandom-toolbox/audience-growth/unlockables"
-            target="_blank"
-            variant="secondary"
-            class="mt-2">
-            {{ $t('helper.learnMore') }}
-          </NeoButton>
-        </div>
-        <div class="column">
-          <img src="/unlockable-introduce.svg" alt="Unlockable" />
-        </div>
-      </div>
+      <CollectionUnlockableItemInfo :collection-id="collectionId" />
       <div class="my-4">
         <CarouselTypeLatestMints
           :collection-id="collectionId"
@@ -121,17 +90,20 @@
 </template>
 
 <script setup lang="ts">
-import CountdownTimer from '@/components/collection/unlockable/CountdownTimer.vue'
 import UnlockableCollectionInfo from '@/components/collection/unlockable/UnlockableCollectionInfo.vue'
 import UnlockableSlider from '@/components/collection/unlockable/UnlockableSlider.vue'
 import UnlockableTag from '@/components/collection/unlockable/UnlockableTag.vue'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
 import CarouselTypeLatestMints from '@/components/carousel/CarouselTypeLatestMints.vue'
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { NeoButton } from '@kodadot1/brick'
 import { createUnlockableMetadata } from '../unlockable/utils'
 import GenerativePreview from '@/components/collection/drop/GenerativePreview.vue'
 import { DropItem } from '@/params/types'
 import { doWaifu } from '@/services/waifu'
+import { makeScreenshot } from '@/services/capture'
+import { pinFileToIPFS } from '@/services/nftStorage'
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+
 const NuxtLink = resolveComponent('NuxtLink')
 
 const props = defineProps({
@@ -156,6 +128,7 @@ const selectedImage = ref<string>('')
 const { isLogIn } = useAuth()
 const justMinted = ref('')
 const isLoading = ref(false)
+const isImageFetching = ref(false)
 
 const handleSelectImage = (image: string) => {
   selectedImage.value = image
@@ -222,7 +195,8 @@ const mintButtonDisabled = computed(() =>
   Boolean(
     currentMintedLoading.value ||
       !mintCountAvailable.value ||
-      !selectedImage.value,
+      !selectedImage.value ||
+      !accountId.value,
   ),
 )
 
@@ -247,36 +221,42 @@ const handleSubmitMint = async () => {
     })
     return
   }
-  if (isLoading.value) {
+  if (isLoading.value || isImageFetching.value) {
     return false
   }
 
-  const hash = await createUnlockableMetadata(
-    props.drop.image,
-    description.value,
-    collectionName.value,
-    'text/html',
-    selectedImage.value,
-  )
+  try {
+    isImageFetching.value = true
 
-  const { accountId } = useAuth()
+    const imgFile = await makeScreenshot(sanitizeIpfsUrl(selectedImage.value))
+    const imageHash = await pinFileToIPFS(imgFile)
 
-  isLoading.value = true
+    const hash = await createUnlockableMetadata(
+      imageHash,
+      description.value,
+      collectionName.value,
+      'text/html',
+      selectedImage.value,
+    )
+
+    isImageFetching.value = false
+
+    const { accountId } = useAuth()
+    isLoading.value = true
 
-  try {
     const id = await doWaifu(
       {
         address: accountId.value,
         metadata: hash,
-        image: props.drop.image,
+        image: imageHash,
       },
       props.drop.id,
     ).then((res) => {
       toast('mint success', { duration: 20000 })
       scrollToTop()
       return `${collectionId.value}-${res.result.sn}`
     })
-    // 44s timeout
+
     setTimeout(() => {
       isLoading.value = false
       justMinted.value = id
@@ -286,6 +266,7 @@ const handleSubmitMint = async () => {
   } catch (error) {
     toast($i18n.t('drops.mintPerAddress'))
     isLoading.value = false
+    isImageFetching.value = false
   }
 }
 </script>

@@ -17,8 +17,7 @@
         :loading="isLoading"
         no-shadow
         loading-with-label
-        :disabled="!accountId"
-        @click="generateNft">
+        @click="generateNft()">
         {{
           $t(
             isLoading
@@ -64,7 +63,10 @@ const getHash = (isDefault?: boolean) => {
     ? chainProperties.value?.ss58Format
     : getRandomInt(15000)
   // https://github.com/paritytech/ss58-registry/blob/30889d6c9d332953a6e3333b30513eef89003f64/ss58-registry.json#L1292C17-L1292C22
-  return stringToHex(encodeAddress(accountId.value, ss58Format))
+  return accountId.value
+    ? stringToHex(encodeAddress(accountId.value, ss58Format))
+    : // random value
+      ss58Format
 }
 
 const generativeImageUrl = ref(
@@ -73,15 +75,15 @@ const generativeImageUrl = ref(
 
 const isLoading = ref(false)
 
-onMounted(() => {
-  generativeImageUrl.value && emit('select', generativeImageUrl.value)
+watch([accountId], () => {
+  generateNft(true)
 })
 const displayUrl = computed(() => {
   return generativeImageUrl.value || props.image
 })
-const generateNft = async () => {
+const generateNft = (isDefault: boolean = false) => {
   isLoading.value = true
-  const metadata = `${props.content}/?hash=${getHash()}`
+  const metadata = `${props.content}/?hash=${getHash(isDefault)}`
   generativeImageUrl.value = metadata
   emit('select', generativeImageUrl.value)
 
@@ -133,6 +135,9 @@ const generateNft = async () => {
 .fixed-right {
   position: absolute;
   right: 2rem;
+  @include mobile {
+    right: 1rem;
+  }
 }
 
 .fixed-width {