Merge pull request #7429 from kodadot/beta

components/bsx/Create/RoyaltyForm.vue

@@ -29,7 +29,7 @@ const { accountId } = useAuth()
 
 const props = defineProps({
  amount: {
- type: Number,
+ type: [Number, String],
  required: true,
  },
  address: {

components/carousel/module/CarouselMedia.vue

@@ -6,11 +6,18 @@
  :to="urlOf({ id: item.id, url, chain: item.chain })"
  :aria-label="`slide ${index + 1} of ${length}`"
  rel="nofollow">
+ <img
+ v-if="showCardIcon"
+ class="card-icon"
+ :src="cardIcon"
+ alt="Card Icon" />
  <MediaItem
  class="carousel-media-wrapper"
  :src="imageSrc || ''"
  :animation-src="item.animationUrl || ''"
- :title="item.name" />
+ :title="item.name"
+ :audio-player-cover="imageSrc || ''"
+ audio-hover-on-cover-play />
  </nuxt-link>
  </div>
 </template>
@@ -35,6 +42,7 @@ const isCollection = inject('isCollection', false)
 
 const { urlPrefix } = usePrefix()
 const imageSrc = ref(props.item.image)
+const { showCardIcon, cardIcon } = useNftCardIcon(computed(() => props.item))
 
 onMounted(async () => {
  if (!props.item.image) {
@@ -43,3 +51,11 @@ onMounted(async () => {
  }
 })
 </script>
+<style lang="scss" scoped>
+.card-icon {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ z-index: 1;
+}
+</style>

components/massmint/ChooseCollectionDropdown.vue → components/common/ChooseCollectionDropdown.vue

@@ -1,14 +1,26 @@
 <template>
- <NeoDropdown class="dropdown-width" :disabled="!isLogIn">
+ <NeoDropdown
+ required
+ :class="[
+ 'dropdown-width',
+ {
+ 'full-width': fullWidth,
+ 'no-shadow': noShadow,
+ },
+ ]"
+ :no-shadow="noShadow"
+ :disabled="!isLogIn">
  <template #trigger="{ active }">
  <NeoButton
  v-if="!selectedCollection"
  class="dropdown-width"
+ :no-shadow="noShadow"
  :label="$t('massmint.selectCollection')"
  :icon="active ? 'chevron-up' : 'chevron-down'" />
  <NeoButton
  v-else
  class="dropdown-width"
+ :no-shadow="noShadow"
  :icon="active ? 'chevron-up' : 'chevron-down'">
  {{ selectedCollection.name || selectedCollection.id }}
  <NeoIcon
@@ -25,10 +37,10 @@
  :key="collection.id"
  class="dropdown-width"
  @click.native="selectCollection(collection)">
- {{ collection.name || collection.id }}
+ {{ collection.name || collection.id }} - ({{ collection.totalCount }})
  </NeoDropdownItem>
  <NeoDropdownItem class="dropdown-width">
- <nuxt-link :to="`/${urlPrefix}/create`" class="w-full">
+ <nuxt-link to="/create/collection" class="w-full">
  <div class="w-full">
  <NeoIcon icon="plus" class="mr-1" />
  {{ $t('massmint.createNewCollection') }}
@@ -41,7 +53,7 @@
  {{ $t('massmint.noCollection') }}
  </NeoDropdownItem>
  <NeoDropdownItem class="dropdown-width">
- <nuxt-link :to="`/${urlPrefix}/create`" class="w-full">
+ <nuxt-link to="/create/collection" class="w-full">
  <div class="w-full">
  <NeoIcon icon="plus" class="mr-1" />
  {{ $t('massmint.createNewCollection') }}
@@ -62,7 +74,11 @@ import {
 import { MintedCollection } from '@/composables/transaction/types'
 import { useCollectionForMint } from '@/composables/massmint/useMassMint'
 
-const { urlPrefix } = usePrefix()
+defineProps({
+ fullWidth: { type: Boolean, default: false },
+ noShadow: { type: Boolean, default: false },
+})
+
 const { isLogIn, accountId } = useAuth()
 
 const { collectionsEntites } = useCollectionForMint()
@@ -85,6 +101,14 @@ const selectCollection = (collection) => {
  width: 30rem;
 }
 
+.full-width {
+ width: 100%;
+ .dropdown-width,
+ :deep(.o-drop__menu) {
+ width: 100%;
+ }
+}
+
 @include mobile {
  .dropdown-width {
  width: 100%;

components/common/IdentityForm.vue

@@ -3,7 +3,7 @@
  <Loader v-model="isLoading" :status="status" />
  <form @submit.prevent>
  <h1 class="title is-size-3">
- {{ $i18n.t('identity.set') }}
+ {{ $i18n.t('identity.set', [getChainName(identityPrefix)]) }}
  <NeoTooltip
  :label="$i18n.t('identity.fundsReserve')"
  position="bottom"
@@ -12,11 +12,31 @@
  </NeoTooltip>
  </h1>
 
- <p v-if="accountId" class="subtitle is-size-6">
- <Auth />
- <span>{{ $i18n.t('general.balance') }}: </span>
- <Money :value="balance" inline />
- </p>
+ <div v-if="hasIdentity" class="is-size-6">
+ <hr class="my-7" />
+ <div class="mb-4">
+ {{ $t('identity.establishedIdentity') }}
+ </div>
+ <div
+ class="is-flex is-justify-content-space-between is-align-items-flex-end">
+ <div
+ class="is-flex is-justify-content-space-between is-align-items-center">
+ <Avatar :value="accountId" :size="34" />
+ <div class="ml-4">
+ <div class="has-text-grey">{{ $t('identity.existing') }}</div>
+ <div>{{ identityData.display }}</div>
+ </div>
+ </div>
+ <NeoButton
+ :label="$i18n.t('identity.clear')"
+ class="mb-1"
+ no-shadow
+ rounded
+ size="small"
+ @click.native="deleteIdentity" />
+ </div>
+ <hr class="my-7" />
+ </div>
 
  <NeoField label="Handle">
  <NeoInput
@@ -73,16 +93,15 @@
  :disabled="disabled"
  :loading="isLoading"
  expanded
- @click="submit" />
+ @click="setIdentity" />
  </form>
  </section>
 </template>
 
 <script lang="ts" setup>
 import { notificationTypes, showNotification } from '@/utils/notification'
-import { NeoField, NeoIcon, NeoInput, NeoTooltip } from '@kodadot1/brick'
+import { NeoButton, NeoField, NeoInput } from '@kodadot1/brick'
 import type { IdentityFields } from '@/composables/useIdentity'
-const Auth = defineAsyncComponent(() => import('@/components/shared/Auth.vue'))
 const BasicInput = defineAsyncComponent(
  () => import('@/components/shared/form/BasicInput.vue')
 )
@@ -98,9 +117,9 @@ const SubmitButton = defineAsyncComponent(
 
 const { $i18n } = useNuxtApp()
 import { useIdentityStore } from '@/stores/identity'
+import { getChainName } from '@/utils/chain'
 
-const { apiInstance } = useApi()
-const { accountId, balance } = useAuth()
+const { accountId } = useAuth()
 const { urlPrefix } = usePrefix()
 const identityStore = useIdentityStore()
 const { howAboutToExecute, isLoading, initTransactionLoader, status } =
@@ -109,7 +128,12 @@ const identity = ref<IdentityFields>({})
 const deposit = ref('0')
 const inputLengthLimit = ref(32)
 
-const { identity: identityData } = useIdentity({
+const {
+ identity: identityData,
+ identityApi,
+ identityPrefix,
+ refetchIdentity,
+} = useIdentity({
  address: accountId,
 })
 
@@ -125,6 +149,14 @@ watch(identityData, () => {
  }
 })
 
+const hasIdentity = computed(() => {
+ const { display, legal, web, twitter, riot, email } = identityData.value
+ return (
+ accountId.value &&
+ Boolean(display || legal || web || twitter || riot || email)
+ )
+})
+
 const handleUrlPrefixChange = async () => {
  deposit.value = await fetchDeposit()
 
@@ -147,23 +179,35 @@ const enhanceIdentityData = (): Record<string, any> => {
 }
 
 const fetchDeposit = async () => {
- const api = await apiInstance.value
+ const api = await identityApi.value
  return api.consts.identity?.basicDeposit?.toString()
 }
 
-const submit = async (): Promise<void> => {
- const api = await apiInstance.value
+const deleteIdentity = async (): Promise<void> => {
+ const api = await identityApi.value
+ initTransactionLoader()
+ const cb = api.tx.identity.clearIdentity
+ howAboutToExecute(accountId.value, cb, [], (block: string) => {
+ identity.value = {}
+ refetchIdentity()
+
+ showNotification(
+ `[Identity] You have cleared your account's identity since block ${block}`,
+ notificationTypes.success
+ )
+ })
+}
+const setIdentity = async (): Promise<void> => {
+ const api = await identityApi.value
  initTransactionLoader()
  const cb = api.tx.identity.setIdentity
  const args = [enhanceIdentityData()]
- howAboutToExecute(accountId.value, cb, args, onSuccess)
-}
-
-const onSuccess = (block: string) => {
- showNotification(
- `[Identity] You are known as ${identity.value.display} since block ${block}`,
- notificationTypes.success
- )
+ howAboutToExecute(accountId.value, cb, args, (block: string) => {
+ showNotification(
+ `[Identity] You are known as ${identity.value.display} since block ${block}`,
+ notificationTypes.success
+ )
+ })
 }
 
 const disabled = computed(