Merge pull request #11232 from kodadot/main

(beta): 32% of December 2024 Fig 💜

components/collection/EditModal.vue

@@ -12,12 +12,45 @@
         class="flex flex-col gap-6"
         @submit.prevent
       >
-        <CollectionEditSection :title="$t('edit.collection.image.label')">
-          <FormLogoField
-            v-model:file="image"
-            v-model:url="imageUrl"
-            :title="$t('edit.collection.image.message')"
+        <NeoField
+          :label="$t('mint.collection.name.label')"
+          required
+          :error="!name"
+        >
+          <NonRecommendFieldNotification
+            :show="name && nameChanged"
+            @undo="name = props.collection.name"
+          >
+            <NeoInput
+              v-model="name"
+              required
+              :placeholder="$t('mint.collection.name.placeholder')"
+            />
+          </NonRecommendFieldNotification>
+        </NeoField>
+
+        <!-- collection description -->
+        <NeoField :label="$t('mint.collection.description.label')">
+          <NeoInput
+            v-model="description"
+            type="textarea"
+            has-counter
+            maxlength="1000"
+            height="10rem"
+            :placeholder="$t('mint.collection.description.placeholder')"
           />
+        </NeoField>
+        <CollectionEditSection :title="$t('edit.collection.image.label')">
+          <NonRecommendFieldNotification
+            :show="hasImageChanged"
+            @undo="initLogoImage"
+          >
+            <FormLogoField
+              v-model:file="image"
+              v-model:url="imageUrl"
+              :title="$t('edit.collection.image.message')"
+            />
+          </NonRecommendFieldNotification>
         </CollectionEditSection>
 
         <CollectionEditSection :title="$t('edit.collection.banner.label')">
@@ -131,6 +164,8 @@ const props = defineProps<{
 
 const isModalActive = useVModel(props, 'modelValue')
 
+const name = ref<string>()
+const description = ref<string>()
 const image = ref<File>()
 const banner = ref<File>()
 const imageUrl = ref<string>()
@@ -140,20 +175,30 @@ const unlimited = ref(true)
 const min = computed(() => props.min || 1)
 const max = ref<number | null>(null)
 
+const nameChanged = computed(() => props.collection.name !== name.value)
+const hasImageChanged = computed(() => (!imageUrl.value && Boolean(props.collection.image)) || Boolean(image.value))
+const originalLogoImageUrl = computed(() => sanitizeIpfsUrl(props.collection.image))
+
 const disabled = computed(() => {
   const hasImage = imageUrl.value
+  const isNameFilled = Boolean(name.value)
 
-  const hasImagechanged = (!imageUrl.value && Boolean(props.collection?.image)) || Boolean(image.value)
-  const hasBannerChanged = (!bannerUrl.value && Boolean(props.collection?.banner)) || Boolean(banner.value)
-  const hasMaxChanged = max.value !== props.collection?.max
+  const descriptionChanged = props.collection.description !== description.value
+  const hasBannerChanged = (!bannerUrl.value && Boolean(props.collection.banner)) || Boolean(banner.value)
+  const hasMaxChanged = max.value !== props.collection.max
 
-  return !hasImage || (!hasImagechanged && !hasBannerChanged && !hasMaxChanged)
+  return !hasImage || !isNameFilled || (!nameChanged.value && !descriptionChanged && !hasImageChanged.value && !hasBannerChanged && !hasMaxChanged)
 })
 
+const initLogoImage = () => {
+  imageUrl.value = originalLogoImageUrl.value
+  image.value = undefined
+}
+
 const editCollection = async () => {
   emit('submit', {
-    name: props.collection.name,
-    description: props.collection.description,
+    name: name.value,
+    description: description.value,
     image: image.value || props.collection.image,
     imageType: props.collection.imageType,
     banner: bannerUrl.value ? banner.value || props.collection.banner : undefined,
@@ -163,10 +208,11 @@ const editCollection = async () => {
 
 watch(isModalActive, (value) => {
   if (value && props.collection) {
-    imageUrl.value = sanitizeIpfsUrl(props.collection.image)
+    name.value = props.collection.name
+    description.value = props.collection.description
     bannerUrl.value = props.collection.banner && sanitizeIpfsUrl(props.collection.banner)
-    image.value = undefined
     banner.value = undefined
+    initLogoImage()
     unlimited.value = !props.collection.max
     max.value = props.collection.max
   }

components/collection/HeroButtonDeleteNfts.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script setup lang="ts">
+import { Interaction } from '@kodadot1/minimark/v1'
 import { NeoDropdownItem } from '@kodadot1/brick'
-import { NFTs } from '@/composables/transaction/types'
 
 type NftIds = {
   nfts?: {
@@ -53,7 +53,7 @@ const deleteNfts = async () => {
     isLoading.value = true
 
     await transaction({
-      interaction: NFTs.BURN_MULTIPLE,
+      interaction: Interaction.CONSUME,
       nftIds: ids,
       urlPrefix: urlPrefix.value,
     })

components/collection/HeroButtonEditCollection.vue

@@ -13,9 +13,9 @@
   />
 
   <CollectionEditModal
-    v-if="collectinoMetadata"
+    v-if="collectionMetadata"
     v-model="isModalActive"
-    :collection="collectinoMetadata"
+    :collection="collectionMetadata"
     :min="collection.nftCount"
     @submit="editCollection"
   />
@@ -37,7 +37,7 @@ const route = useRoute()
 
 const isModalActive = ref(false)
 
-const collectinoMetadata = computed(() =>
+const collectionMetadata = computed(() =>
   props.collection
     ? {
         name: props.collection.meta.name,
@@ -61,7 +61,7 @@ const updateMetadata = (a: UpdateCollection, b: UpdateCollection) => {
 const editCollection = async (collection: UpdateCollection) => {
   isModalActive.value = false
 
-  if (!collectinoMetadata.value) {
+  if (!collectionMetadata.value) {
     return
   }
 
@@ -70,8 +70,8 @@ const editCollection = async (collection: UpdateCollection) => {
     collectionId: route.params.id.toString(),
     collection,
     update: {
-      metadata: updateMetadata(collection, collectinoMetadata.value),
-      max: collection.max !== collectinoMetadata.value.max,
+      metadata: updateMetadata(collection, collectionMetadata.value),
+      max: collection.max !== collectionMetadata.value.max,
     },
     urlPrefix: urlPrefix.value,
     successMessage: $i18n.t('edit.collection.success'),

components/collection/utils/types.ts

@@ -18,4 +18,5 @@ export type CollectionEntityMinimal = {
   name: string
   currentOwner: string
   type: string
+  ownerCount?: number
 }

components/common/ChainDropdown.vue

@@ -4,9 +4,10 @@
       <template #trigger="{ active }">
         <NeoButton
           class="chain-dropdown-text"
+          :variant
           :label="
             isMobile || !showNetworkLabel
-              ? selected?.text
+              ? label || selected?.text
               : `Network: ${selected?.text}`
           "
           :icon="active ? 'chevron-up' : 'chevron-down'"
@@ -27,28 +28,32 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
+import { NeoButton, NeoDropdown, NeoDropdownItem, type NeoButtonVariant } from '@kodadot1/brick'
 import { type Prefix } from '@kodadot1/static'
 
 const props = withDefaults(
   defineProps<{
     showNetworkLabel: boolean
     position?: 'bottom-auto'
     redirect?: boolean
-    exclude: Prefix[]
+    exclude?: Prefix[]
+    variant?: NeoButtonVariant
+    label?: string
+    filterByVm?: boolean
   }>(),
   {
     showNetworkLabel: true,
     position: undefined,
     redirect: true,
     mobileModal: false,
     exclude: () => [],
+    filterByVm: false,
   },
 )
 
 const route = useReactiveRoute()
 const { setUrlPrefix, urlPrefix } = usePrefix()
-const { availableChains: allChains } = useChain()
+const { availableChains: allChains, availableChainsByVm: allChainInVm } = useChain()
 const { redirectAfterChainChange } = useChainRedirect()
 const { isMobile } = useViewport()
 
@@ -58,11 +63,10 @@ const selected = computed(() =>
   allChains.value.find(chain => chain.value === prefix.value),
 )
 
-const availableChains = computed(() =>
-  allChains.value.filter(
-    chain => !props.exclude.includes(chain.value as Prefix),
-  ),
-)
+const availableChains = computed(() => {
+  return (props.filterByVm ? allChainInVm.value : allChains.value)
+    .filter(chain => !props.exclude.includes(chain.value as Prefix))
+})
 
 function onSwitchChain(chain) {
   setUrlPrefix(chain)

components/common/ConnectWallet/ConnectWalletModal.vue

@@ -56,10 +56,14 @@ import WalletAsset from '@/components/common/ConnectWallet/WalletAsset.vue'
 import { ModalCloseType } from '@/components/navbar/types'
 import { arePrefixesOfSameVm } from '@/utils/config/chain.config'
 
+const NO_PREFIX_CHANGE_ROUTES_NAMES = [
+  'prefix-u-id',
+]
+
 const emit = defineEmits(['close', 'connect'])
 const props = defineProps<{ preselected?: ChainVM }>()
 const { isWalletModalOpen } = useWallet()
-
+const route = useRoute()
 const { urlPrefix, setUrlPrefix } = usePrefix()
 const { redirectAfterChainChange } = useChainRedirect()
 const walletStore = useWalletStore()
@@ -76,7 +80,7 @@ const setAccount = ({ account, prefix }: { account: WalletAccount, prefix?: Pref
   walletStore.setWallet(account)
   identityStore.setAuth({ address: account.address })
 
-  if (!arePrefixesOfSameVm(prefix, urlPrefix.value)) {
+  if (!arePrefixesOfSameVm(prefix, urlPrefix.value) && !NO_PREFIX_CHANGE_ROUTES_NAMES.includes(route.name?.toString() || '')) {
     setUrlPrefix(prefix)
     redirectAfterChainChange(urlPrefix.value)
   }

components/common/ConnectWallet/WalletAssetMenu.vue

@@ -82,11 +82,11 @@
 import { NeoDropdown, NeoDropdownItem, NeoIcon } from '@kodadot1/brick'
 import type { Prefix } from '@kodadot1/static'
 import { langsFlags, setUserLocale } from '@/utils/config/i18n'
-import { transferVisible, teleportVisible } from '@/utils/config/permission.config'
+import { transferVisible, teleportVisible, swapVisible } from '@/utils/config/permission.config'
 
 const { urlPrefix } = usePrefix()
-// const { isAssetHub } = useIsChain(urlPrefix)
 const { neoModal } = useProgrammatic()
+const { $i18n } = useNuxtApp()
 
 const menus = ref<{ label: string, to: string, check: (v: Prefix) => boolean }[]>([
   {
@@ -99,23 +99,13 @@ const menus = ref<{ label: string, to: string, check: (v: Prefix) => boolean }[]
     to: `/${urlPrefix.value}/teleport`,
     check: teleportVisible,
   },
+  {
+    label: $i18n.t('swap.swap'),
+    to: `/${urlPrefix.value}/swap`,
+    check: swapVisible,
+  },
 ])
 
-// TODO: enable when asset hub offers are ready
-// watchEffect(() => {
-//   if (isAssetHub.value) {
-//     menus.value.push({
-//       label: 'Incoming Offers',
-//       to: `/${urlPrefix.value}/incomingoffers`,
-//     })
-
-//     menus.value.push({
-//       label: 'Assets',
-//       to: `/${urlPrefix.value}/assets`,
-//     })
-//   }
-// })
-
 const filteredMenus = computed(() =>
   menus.value.filter(menu => menu.check(urlPrefix.value)),
 )