Merge pull request #7919 from kodadot/beta

.github/ISSUE_TEMPLATE/bug.yml

@@ -79,7 +79,7 @@ body:
  multiple: true
  options:
  - Basilisk
- - MoonSama
+ - Asset Hub
  - Kusama
  - type: textarea
  id: Screenshots

.github/ISSUE_TEMPLATE/bug_assetshub.yml

@@ -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:

components/CustomSubstackEmbed.vue

@@ -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>

components/carousel/CarouselTypeLatestMints.vue

@@ -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">

components/collection/CollectionHeader/CollectionBanner.vue

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

components/collection/activity/Activity.vue

@@ -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" />

components/collection/drop/DropContainer.vue

@@ -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"

components/collection/drop/Generative.vue

@@ -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>

components/collection/drop/GenerativePreview.vue

@@ -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 {