From 6029da43954abe7db868c336fcdd4c74b9641ad6 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sat, 22 Jul 2023 11:34:05 +0700
Subject: [PATCH 01/18] make Auth size prop optional (remove console warning)

---
 components/shared/Auth.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/shared/Auth.vue b/components/shared/Auth.vue
index 7e58a3590a..9ee289ace3 100644
--- a/components/shared/Auth.vue
+++ b/components/shared/Auth.vue
@@ -25,7 +25,7 @@ const account = computed({
 
 withDefaults(
   defineProps<{
-    size: number
+    size?: number
   }>(),
   {
     size: 24,

From 825b84f7703d1d6574018091e63d54281b9ba42d Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sat, 22 Jul 2023 11:34:52 +0700
Subject: [PATCH 02/18] refactor transfer page

---
 components/transfer/Transfer.vue | 432 ++++++++++++++++++++++++++++
 composables/useChain.ts          |   4 +
 pages/_prefix/transfer.vue       | 472 +------------------------------
 3 files changed, 441 insertions(+), 467 deletions(-)
 create mode 100644 components/transfer/Transfer.vue

diff --git a/components/transfer/Transfer.vue b/components/transfer/Transfer.vue
new file mode 100644
index 0000000000..137ac943ed
--- /dev/null
+++ b/components/transfer/Transfer.vue
@@ -0,0 +1,432 @@
+<template>
+  <section>
+    <Loader v-model="isLoading" :status="status" />
+    <nuxt-link
+      v-if="$route.query.target"
+      :to="`/${urlPrefix}/u/${correctAddress}`"
+      class="pl-4 is-flex is-align-items-center">
+      <NeoIcon icon="chevron-left" class="mr-2" />
+      {{ $t('teleport.artistProfile') }}
+    </nuxt-link>
+    <p class="title is-size-3">
+      {{ $t('transfer') }} {{ unit }}
+      <span class="has-text-primary">${{ getCurrentTokenValue(unit) }}</span>
+    </p>
+
+    <NeoField>
+      <Auth />
+    </NeoField>
+
+    <div v-if="targets && hasBlockExplorer" class="mb-3">
+      {{ $t('teleport.donationSentTo') }}
+      <a
+        v-for="target in targets"
+        :key="target"
+        :href="addressExplorerUrl(target)"
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+        class="has-text-weight-bold">
+        <Identity ref="identity" :address="target" show-onchain-identity />
+      </a>
+    </div>
+
+    <div class="is-flex is-align-items-center">
+      <NeoField>
+        {{ $t('general.balance') }}
+        <Money :value="balance" inline />
+      </NeoField>
+    </div>
+
+    <div
+      v-for="(destinationAddress, index) in destinationAddresses"
+      :key="destinationAddress">
+      <div class="is-flex">
+        <NeoField class="is-flex-grow-1">
+          <AddressInput v-model="destinationAddresses[index]" :strict="false" />
+        </NeoField>
+        <b-button
+          v-show="index == destinationAddresses.length - 1"
+          type="is-primary"
+          size="is-small"
+          icon-left="plus"
+          class="ml-2 mt-2"
+          outlined
+          @click="addAddress">
+          Add
+        </b-button>
+      </div>
+
+      <DisabledInput
+        v-show="
+          correctAddress(destinationAddress) &&
+          correctAddress(destinationAddress) !== destinationAddress
+        "
+        :label="$t('general.correctAddress')"
+        :value="correctAddress(destinationAddress)" />
+    </div>
+    <div class="container mb-3">
+      <NeoField>
+        <BalanceInput
+          v-model="price"
+          :label="$t('amount')"
+          :calculate="false"
+          @input="onAmountFieldChange" />
+      </NeoField>
+      <NeoField>
+        <ReadOnlyBalanceInput
+          v-model="usdValue"
+          :label-input="$t('teleport.usdInput')"
+          label="USD"
+          @input="onUSDFieldChange" />
+      </NeoField>
+    </div>
+
+    <div class="buttons">
+      <b-button
+        type="is-primary"
+        icon-left="paper-plane"
+        :loading="isLoading"
+        :disabled="disabled"
+        outlined
+        @click="submit">
+        {{ $t('general.submit') }}
+      </b-button>
+      <b-button
+        v-if="transactionValue && hasBlockExplorer"
+        type="is-success"
+        class="ml-4"
+        icon-left="external-link-alt"
+        outlined
+        @click="getExplorerUrl">
+        {{ $t('View Transaction') }} {{ transactionValue.substring(0, 6)
+        }}{{ '...' }}
+      </b-button>
+      <b-button
+        v-if="transactionValue && hasBlockExplorer"
+        v-clipboard:copy="getUrl()"
+        type="is-primary"
+        @click="toast($t('toast.urlCopy'))">
+        <NeoIcon pack="fas" icon="link" />
+      </b-button>
+      <b-button
+        v-if="hasAddress"
+        v-clipboard:copy="generatePaymentLink()"
+        type="is-success"
+        icon-left="money-bill"
+        :loading="isLoading"
+        outlined
+        @click="toast($t('toast.paymentLinkCopy'))">
+        {{ $t('Copy Payment link') }}
+      </b-button>
+      <b-button
+        v-if="accountId"
+        v-clipboard:copy="generatePaymentLink(accountId)"
+        type="is-info"
+        icon-left="wallet"
+        :loading="isLoading"
+        outlined
+        @click="toast($t('general.copyRewardTooltip'))">
+        {{ $t('general.copyRewardLink') }}
+      </b-button>
+    </div>
+    <div v-if="transactionValue && $route.query.donation">
+      <div class="is-size-5">
+        🎉 {{ $t('teleport.congratsSupport') }}
+        <Identity ref="identity" :address="$route.query.target" />
+      </div>
+      <b-button
+        type="is-info"
+        class="mt-2"
+        icon-left="share-square"
+        outlined
+        @click="shareInTweet">
+        {{ $t('teleport.tweetDonation') }}
+      </b-button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import Connector from '@kodadot1/sub-api'
+import { ALTERNATIVE_ENDPOINT_MAP } from '@kodadot1/static'
+
+import { encodeAddress, isAddress } from '@polkadot/util-crypto'
+import { DispatchError } from '@polkadot/types/interfaces'
+
+import { calculateKsmFromUsd, calculateUsdFromKsm } from '@/utils/calculation'
+import exec, { execResultValue, txCb } from '@/utils/transactionExecutor'
+import { notificationTypes, showNotification } from '@/utils/notification'
+import { calculateBalance } from '@/utils/format/balance'
+import correctFormat from '@/utils/ss58Format'
+import { urlBuilderTransaction } from '@/utils/explorerGuide'
+
+import { useFiatStore } from '@/stores/fiat'
+import { useIdentityStore } from '@/stores/identity'
+
+import { getExplorer, hasExplorer } from '@kodadot1/static'
+import { emptyObject } from '@kodadot1/minimark/utils'
+import { NeoField, NeoIcon } from '@kodadot1/brick'
+
+const Identity = defineAsyncComponent(
+  () => import('@/components/identity/IdentityIndex.vue')
+)
+
+const Money = defineAsyncComponent(
+  () => import('@/components/shared/format/Money.vue')
+)
+
+const route = useRoute()
+const router = useRouter()
+const { $consola } = useNuxtApp()
+const { chainProperties, unit, decimals, blockExplorer } = useChain()
+const { apiInstance } = useApi()
+const { urlPrefix } = usePrefix()
+const { isLogIn, accountId } = useAuth()
+const { getAuthBalance } = useIdentityStore()
+const { fetchFiatPrice, getCurrentTokenValue } = useFiatStore()
+const { initTransactionLoader, isLoading, resolveStatus, status } =
+  useTransactionStatus()
+const { toast } = useToast()
+
+type Target = 'target' | `target${number}`
+type TargetMap = Record<Target, string>
+
+const destinationAddresses = ref([''])
+const transactionValue = ref('')
+const price = ref(0)
+const usdValue = ref(0)
+const targets = ref(emptyObject<TargetMap>())
+
+const ss58Format = computed(() => chainProperties.value?.ss58Format)
+const hasAddress = computed(() => Object.keys(targets.value).length > 0)
+const disabled = computed(
+  () => !hasAddress.value || !price.value || !isLogIn.value
+)
+const hasBlockExplorer = computed(() => hasExplorer(urlPrefix.value))
+const balance = getAuthBalance
+
+const checkQueryParams = () => {
+  const { query } = route
+  const targets = Object.entries(query)
+    .filter(([key]) => key.startsWith('target'))
+    .filter(([_, address]) => {
+      if (isAddress(address as string)) {
+        return true
+      }
+      showNotification(
+        `Unable to use target address ${address}`,
+        notificationTypes.warn
+      )
+      return false
+    })
+    .map(([_, address]) => address as string)
+  if (targets.length > 0) {
+    destinationAddresses.value = targets
+  }
+
+  if (query.amount) {
+    price.value = Number(query.amount)
+  }
+
+  if (query.usdamount) {
+    usdValue.value = Number(query.usdamount)
+
+    price.value = calculateKsmFromUsd(
+      Number(getCurrentTokenValue(unit.value)),
+      usdValue.value
+    )
+  }
+}
+
+const onAmountFieldChange = () => {
+  /* calculating usd value on the basis of price entered */
+  if (price.value) {
+    usdValue.value = calculateUsdFromKsm(
+      Number(getCurrentTokenValue(unit.value)),
+      price.value
+    )
+  } else {
+    usdValue.value = 0
+  }
+}
+
+const onUSDFieldChange = () => {
+  /* calculating price value on the basis of usd entered */
+  if (usdValue.value) {
+    price.value = calculateKsmFromUsd(
+      Number(getCurrentTokenValue(unit.value)),
+      usdValue.value
+    )
+  } else {
+    price.value = 0
+  }
+}
+
+const submit = async (
+  event: any,
+  usedNodeUrls: string[] = []
+): Promise<void> => {
+  showNotification(`${route.query.target ? 'Sent for Sign' : 'Dispatched'}`)
+  initTransactionLoader()
+
+  try {
+    const api = await apiInstance.value
+    const amountToTansfer = String(
+      calculateBalance(price.value, decimals.value)
+    )
+    const numOfTargetAddresses = Object.keys(targets.value).length
+    const cb =
+      numOfTargetAddresses > 1 ? api.tx.utility.batch : api.tx.balances.transfer
+    const arg =
+      numOfTargetAddresses > 1
+        ? [
+            Object.values(targets.value).map((target) =>
+              api.tx.balances.transfer(target, amountToTansfer)
+            ),
+          ]
+        : [targets.value['target'], amountToTansfer]
+
+    const tx = await exec(
+      accountId.value,
+      '',
+      cb,
+      arg,
+      txCb(
+        async (blockHash) => {
+          transactionValue.value = execResultValue(tx)
+          const header = await api.rpc.chain.getHeader(blockHash)
+          const blockNumber = header.number.toString()
+
+          showNotification(
+            `[${unit.value}] Transfered ${price.value * numOfTargetAddresses} ${
+              unit.value
+            } in block ${blockNumber}`,
+            notificationTypes.success
+          )
+
+          destinationAddresses.value = ['']
+          price.value = 0
+          usdValue.value = 0
+          if (route.query && !route.query.donation) {
+            router.push(route.path)
+          }
+
+          isLoading.value = false
+        },
+        (dispatchError) => {
+          execResultValue(tx)
+          onTxError(dispatchError)
+          isLoading.value = false
+        },
+        (res) => resolveStatus(res.status)
+      )
+    )
+  } catch (e: any) {
+    if (e.message === 'Cancelled') {
+      showNotification(e.message, notificationTypes.warn)
+      isLoading.value = false
+      return
+    }
+
+    const availableUrls = ALTERNATIVE_ENDPOINT_MAP[urlPrefix.value]
+    if (usedNodeUrls.length < availableUrls.length) {
+      const nextTryUrls = availableUrls.filter(
+        (url) => !usedNodeUrls.includes(url)
+      )
+      const { getInstance: Api } = Connector
+      // try to connect next possible url
+      await Api().connect(nextTryUrls[0])
+      submit(event, [nextTryUrls[0], ...usedNodeUrls])
+    }
+
+    if (e instanceof Error) {
+      $consola.error('[ERR: TRANSFER SUBMIT]', e)
+      showNotification(e.toString(), notificationTypes.warn)
+      isLoading.value = false
+    }
+  }
+}
+
+const onTxError = async (dispatchError: DispatchError): Promise<void> => {
+  const api = await apiInstance.value
+  if (dispatchError.isModule) {
+    const decoded = api.registry.findMetaError(dispatchError.asModule)
+    const { docs, name, section } = decoded
+    showNotification(
+      `[ERR] ${section}.${name}: ${docs.join(' ')}`,
+      notificationTypes.warn
+    )
+  } else {
+    showNotification(
+      `[ERR] ${dispatchError.toString()}`,
+      notificationTypes.warn
+    )
+  }
+
+  isLoading.value = false
+}
+
+const getUrl = (): string =>
+  urlBuilderTransaction(transactionValue.value, blockExplorer.value)
+
+const getExplorerUrl = (): void => {
+  const url = getUrl()
+  window.open(url, '_blank')
+}
+
+const generatePaymentLink = (address?): string => {
+  let addressQueryString: string
+  if (address) {
+    addressQueryString = `target=${address}`
+  } else {
+    addressQueryString = new URLSearchParams(targets.value).toString()
+  }
+  return `${window.location.origin}/${urlPrefix.value}/transfer?${addressQueryString}&usdamount=${usdValue.value}&donation=true`
+}
+
+const shareInTweet = () => {
+  const text =
+    'I have just helped a really cool creator by donating. Check my donation proof:'
+  const url = `https://twitter.com/intent/tweet?text=${text}&via=KodaDot&url=${getUrl()}`
+  window.open(url, '_blank')
+}
+
+const addAddress = () => {
+  destinationAddresses.value.push('')
+}
+const correctAddress = (destinationAddress): string =>
+  isAddress(destinationAddress)
+    ? encodeAddress(destinationAddress, correctFormat(ss58Format.value))
+    : ''
+const addressExplorerUrl = (address): string =>
+  getExplorer(urlPrefix.value, address) || '#'
+
+onMounted(() => {
+  fetchFiatPrice().then(checkQueryParams)
+})
+
+watch(
+  destinationAddresses,
+  () => {
+    const { usdamount } = route.query
+
+    targets.value = destinationAddresses.value
+      .filter((addr) => isAddress(addr))
+      .reduce(
+        (object, address, i) => ({
+          ...object,
+          [`target${i == 0 ? '' : i}`]: address,
+        }),
+        {} as TargetMap
+      )
+    router.replace({ query: { ...targets.value, usdamount } }).catch(() => null) // null to further not throw navigation errors
+  },
+  { deep: true }
+)
+
+watch(usdValue, (usdamount) => {
+  router
+    .replace({ query: { ...route.query, usdamount: usdamount.toString() } })
+    .catch(() => null) // null to further not throw navigation errors
+})
+</script>
diff --git a/composables/useChain.ts b/composables/useChain.ts
index 92696d243e..a520497973 100644
--- a/composables/useChain.ts
+++ b/composables/useChain.ts
@@ -30,6 +30,9 @@ export default function () {
       : symbol
   })
 
+  const blockExplorer = computed<string>(() => {
+    return chainProperties.value.blockExplorer ?? 'https://kusama.subscan.io/'
+  })
   return {
     decimals,
     unit,
@@ -37,5 +40,6 @@ export default function () {
     chainProperties,
     availableChains,
     chainSymbol,
+    blockExplorer,
   }
 }
diff --git a/pages/_prefix/transfer.vue b/pages/_prefix/transfer.vue
index a3baeecb04..81899233da 100644
--- a/pages/_prefix/transfer.vue
+++ b/pages/_prefix/transfer.vue
@@ -1,477 +1,15 @@
 <template>
-  <section>
-    <Loader v-model="isLoading" :status="status" />
-    <nuxt-link
-      v-if="$route.query.target"
-      :to="`/${urlPrefix}/u/${correctAddress}`"
-      class="pl-4 is-flex is-align-items-center">
-      <NeoIcon icon="chevron-left" class="mr-2" />
-      {{ $t('teleport.artistProfile') }}
-    </nuxt-link>
-    <p class="title is-size-3">
-      {{ $t('transfer') }} {{ unit }}
-      <span class="has-text-primary"
-        >${{ fiatStore.getCurrentTokenValue(unit) }}</span
-      >
-    </p>
-
-    <NeoField>
-      <Auth />
-    </NeoField>
-
-    <div v-if="targets && hasBlockExplorer" class="mb-3">
-      {{ $t('teleport.donationSentTo') }}
-      <a
-        v-for="target in targets"
-        :key="target"
-        :href="addressExplorerUrl(target)"
-        target="_blank"
-        rel="nofollow noopener noreferrer"
-        class="has-text-weight-bold">
-        <Identity ref="identity" :address="target" show-onchain-identity />
-      </a>
-    </div>
-
-    <div class="is-flex is-align-items-center">
-      <NeoField>
-        {{ $t('general.balance') }}
-        <Money :value="balance" inline />
-      </NeoField>
-    </div>
-
-    <div
-      v-for="(destinationAddress, index) in destinationAddresses"
-      :key="destinationAddress">
-      <div class="is-flex">
-        <NeoField class="is-flex-grow-1">
-          <AddressInput v-model="destinationAddresses[index]" :strict="false" />
-        </NeoField>
-        <b-button
-          v-show="index == destinationAddresses.length - 1"
-          type="is-primary"
-          size="is-small"
-          icon-left="plus"
-          class="ml-2 mt-2"
-          outlined
-          @click="addAddress">
-          Add
-        </b-button>
-      </div>
-
-      <DisabledInput
-        v-show="
-          correctAddress(destinationAddress) &&
-          correctAddress(destinationAddress) !== destinationAddress
-        "
-        :label="$t('general.correctAddress')"
-        :value="correctAddress(destinationAddress)" />
-    </div>
-    <div class="container mb-3">
-      <NeoField>
-        <BalanceInput
-          v-model="price"
-          :label="$t('amount')"
-          :calculate="false"
-          @input="onAmountFieldChange" />
-      </NeoField>
-      <NeoField>
-        <ReadOnlyBalanceInput
-          v-model="usdValue"
-          :label-input="$t('teleport.usdInput')"
-          label="USD"
-          @input="onUSDFieldChange" />
-      </NeoField>
-    </div>
-
-    <div class="buttons">
-      <b-button
-        type="is-primary"
-        icon-left="paper-plane"
-        :loading="isLoading"
-        :disabled="disabled"
-        outlined
-        @click="submit">
-        {{ $t('general.submit') }}
-      </b-button>
-      <b-button
-        v-if="transactionValue && hasBlockExplorer"
-        type="is-success"
-        class="ml-4"
-        icon-left="external-link-alt"
-        outlined
-        @click="getExplorerUrl">
-        {{ $t('View Transaction') }} {{ transactionValue.substring(0, 6)
-        }}{{ '...' }}
-      </b-button>
-      <b-button
-        v-if="transactionValue && hasBlockExplorer"
-        v-clipboard:copy="getUrl()"
-        type="is-primary"
-        @click="toast($t('toast.urlCopy'))">
-        <NeoIcon pack="fas" icon="link" />
-      </b-button>
-      <b-button
-        v-if="hasAddress"
-        v-clipboard:copy="generatePaymentLink()"
-        type="is-success"
-        icon-left="money-bill"
-        :loading="isLoading"
-        outlined
-        @click="toast($t('toast.paymentLinkCopy'))">
-        {{ $t('Copy Payment link') }}
-      </b-button>
-      <b-button
-        v-if="accountId"
-        v-clipboard:copy="generatePaymentLink(accountId)"
-        type="is-info"
-        icon-left="wallet"
-        :loading="isLoading"
-        outlined
-        @click="toast($t('general.copyRewardTooltip'))">
-        {{ $t('general.copyRewardLink') }}
-      </b-button>
-    </div>
-    <div v-if="transactionValue && $route.query.donation">
-      <div class="is-size-5">
-        🎉 {{ $t('teleport.congratsSupport') }}
-        <Identity ref="identity" :address="$route.query.target" />
-      </div>
-      <b-button
-        type="is-info"
-        class="mt-2"
-        icon-left="share-square"
-        outlined
-        @click="shareInTweet">
-        {{ $t('teleport.tweetDonation') }}
-      </b-button>
-    </div>
-  </section>
+  <Transfer />
 </template>
 
 <script lang="ts">
-import { Component, Watch, mixins } from 'nuxt-property-decorator'
-import Connector from '@kodadot1/sub-api'
-import { ALTERNATIVE_ENDPOINT_MAP } from '@kodadot1/static'
-
-import { encodeAddress, isAddress } from '@polkadot/util-crypto'
-import { DispatchError } from '@polkadot/types/interfaces'
-
-import { calculateKsmFromUsd, calculateUsdFromKsm } from '@/utils/calculation'
-import exec, { execResultValue, txCb } from '@/utils/transactionExecutor'
-import { notificationTypes, showNotification } from '@/utils/notification'
-import { calculateBalance } from '@/utils/format/balance'
-import correctFormat from '@/utils/ss58Format'
-import { urlBuilderTransaction } from '@/utils/explorerGuide'
-
-import AuthMixin from '@/utils/mixins/authMixin'
-import ChainMixin from '@/utils/mixins/chainMixin'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
-import TransactionMixin from '@/utils/mixins/txMixin'
-import UseApiMixin from '@/utils/mixins/useApiMixin'
-import { useFiatStore } from '@/stores/fiat'
-import { useIdentityStore } from '@/stores/identity'
-
-import { getExplorer, hasExplorer } from '@kodadot1/static'
-import { emptyObject } from '@kodadot1/minimark/utils'
-import { NeoField, NeoIcon } from '@kodadot1/brick'
-
-type Target = 'target' | `target${number}`
-type TargetMap = Record<Target, string>
-
-@Component({
+export default {
+  name: 'TransferPage',
   components: {
-    Auth: () => import('@/components/shared/Auth.vue'),
-    BalanceInput: () => import('@/components/shared/BalanceInput.vue'),
-    ReadOnlyBalanceInput: () =>
-      import('@/components/shared/ReadOnlyBalanceInput.vue'),
-    Identity: () => import('@/components/identity/IdentityIndex.vue'),
-    Loader: () => import('@/components/shared/Loader.vue'),
-    AddressInput: () => import('@/components/shared/AddressInput.vue'),
-    Money: () => import('@/components/shared/format/Money.vue'),
-    DisabledInput: () => import('@/components/shared/DisabledInput.vue'),
-    NeoField,
-    NeoIcon,
+    Transfer: () => import('@/components/transfer/Transfer.vue'),
   },
-})
-export default class Transfer extends mixins(
-  TransactionMixin,
-  AuthMixin,
-  ChainMixin,
-  PrefixMixin,
-  UseApiMixin
-) {
-  protected destinationAddresses = ['']
-  protected transactionValue = ''
-  protected price = 0
-  protected usdValue = 0
-  protected targets = emptyObject<TargetMap>()
-
   layout() {
     return 'centered-half-layout'
-  }
-
-  get fiatStore() {
-    return useFiatStore()
-  }
-
-  get identityStore() {
-    return useIdentityStore()
-  }
-
-  get disabled(): boolean {
-    return (
-      !this.hasAddress || !this.price || !this.accountId || this.$nuxt.isOffline
-    )
-  }
-  get ss58Format(): number {
-    return this.chainProperties?.ss58Format
-  }
-  get hasAddress(): boolean {
-    return Object.keys(this.targets).length > 0
-  }
-  correctAddress(destinationAddress): string {
-    return isAddress(destinationAddress)
-      ? encodeAddress(destinationAddress, correctFormat(this.ss58Format))
-      : ''
-  }
-
-  get isKSM(): boolean {
-    return this.unit === 'KSM'
-  }
-
-  get hasBlockExplorer(): boolean {
-    return hasExplorer(this.urlPrefix)
-  }
-
-  addressExplorerUrl(address): string {
-    return getExplorer(this.urlPrefix, address) || '#'
-  }
-
-  get balance(): string {
-    return this.identityStore.getAuthBalance
-  }
-
-  protected addAddress() {
-    this.destinationAddresses.push('')
-  }
-
-  protected created() {
-    this.fiatStore.fetchFiatPrice().then(this.checkQueryParams)
-  }
-
-  protected onAmountFieldChange() {
-    /* calculating usd value on the basis of price entered */
-    if (this.price) {
-      this.usdValue = calculateUsdFromKsm(
-        Number(this.fiatStore.getCurrentTokenValue(this.unit)),
-        this.price
-      )
-    } else {
-      this.usdValue = 0
-    }
-  }
-
-  protected onUSDFieldChange() {
-    /* calculating price value on the basis of usd entered */
-    if (this.usdValue) {
-      this.price = calculateKsmFromUsd(
-        Number(this.fiatStore.getCurrentTokenValue(this.unit)),
-        this.usdValue
-      )
-    } else {
-      this.price = 0
-    }
-  }
-
-  protected checkQueryParams() {
-    const { query } = this.$route
-    const targets = Object.entries(query)
-      .filter(([key]) => key.startsWith('target'))
-      .filter(([_, address]) => {
-        if (isAddress(address as string)) {
-          return true
-        }
-        showNotification(
-          `Unable to use target address ${address}`,
-          notificationTypes.warn
-        )
-        return false
-      })
-      .map(([_, address]) => address as string)
-    if (targets.length > 0) {
-      this.destinationAddresses = targets
-    }
-
-    if (query.amount) {
-      this.price = Number(query.amount)
-    }
-
-    if (query.usdamount) {
-      this.usdValue = Number(query.usdamount)
-
-      this.price = calculateKsmFromUsd(
-        Number(this.fiatStore.getCurrentTokenValue(this.unit)),
-        this.usdValue
-      )
-    }
-  }
-
-  public async submit(event: any, usedNodeUrls: string[] = []): Promise<void> {
-    showNotification(
-      `${this.$route.query.target ? 'Sent for Sign' : 'Dispatched'}`
-    )
-    this.initTransactionLoader()
-
-    try {
-      const api = await this.useApi()
-      const amountToTansfer = String(
-        calculateBalance(this.price, this.decimals)
-      )
-      const numOfTargetAddresses = Object.keys(this.targets).length
-      const cb =
-        numOfTargetAddresses > 1
-          ? api.tx.utility.batch
-          : api.tx.balances.transfer
-      const arg =
-        numOfTargetAddresses > 1
-          ? [
-              Object.values(this.targets).map((target) =>
-                api.tx.balances.transfer(target, amountToTansfer)
-              ),
-            ]
-          : [this.targets['target'], amountToTansfer]
-
-      const tx = await exec(
-        this.accountId,
-        '',
-        cb,
-        arg,
-        txCb(
-          async (blockHash) => {
-            this.transactionValue = execResultValue(tx)
-            const header = await api.rpc.chain.getHeader(blockHash)
-            const blockNumber = header.number.toString()
-
-            showNotification(
-              `[${this.unit}] Transfered ${this.price * numOfTargetAddresses} ${
-                this.unit
-              } in block ${blockNumber}`,
-              notificationTypes.success
-            )
-
-            this.destinationAddresses = ['']
-            this.price = 0
-            this.usdValue = 0
-            if (this.$route.query && !this.$route.query.donation) {
-              this.$router.push(this.$route.path)
-            }
-
-            this.isLoading = false
-          },
-          (dispatchError) => {
-            execResultValue(tx)
-            this.onTxError(dispatchError)
-            this.isLoading = false
-          },
-          (res) => this.resolveStatus(res.status)
-        )
-      )
-    } catch (e: any) {
-      if (e.message === 'Cancelled') {
-        showNotification(e.message, notificationTypes.warn)
-        this.isLoading = false
-        return
-      }
-
-      const availableUrls = ALTERNATIVE_ENDPOINT_MAP[this.urlPrefix]
-      if (usedNodeUrls.length < availableUrls.length) {
-        const nextTryUrls = availableUrls.filter(
-          (url) => !usedNodeUrls.includes(url)
-        )
-        const { getInstance: Api } = Connector
-        // try to connect next possible url
-        await Api().connect(nextTryUrls[0])
-        this.submit(event, [nextTryUrls[0], ...usedNodeUrls])
-      }
-
-      if (e instanceof Error) {
-        this.$consola.error('[ERR: TRANSFER SUBMIT]', e)
-        showNotification(e.toString(), notificationTypes.warn)
-        this.isLoading = false
-      }
-    }
-  }
-
-  protected async onTxError(dispatchError: DispatchError): Promise<void> {
-    const api = await this.useApi()
-    if (dispatchError.isModule) {
-      const decoded = api.registry.findMetaError(dispatchError.asModule)
-      const { docs, name, section } = decoded
-      showNotification(
-        `[ERR] ${section}.${name}: ${docs.join(' ')}`,
-        notificationTypes.warn
-      )
-    } else {
-      showNotification(
-        `[ERR] ${dispatchError.toString()}`,
-        notificationTypes.warn
-      )
-    }
-
-    this.isLoading = false
-  }
-
-  protected getUrl(): string {
-    return urlBuilderTransaction(this.transactionValue, this.blockExplorer)
-  }
-
-  protected getExplorerUrl(): void {
-    const url = this.getUrl()
-    window.open(url, '_blank')
-  }
-
-  protected generatePaymentLink(address?): string {
-    let addressQueryString: string
-    if (address) {
-      addressQueryString = `target=${address}`
-    } else {
-      addressQueryString = new URLSearchParams(this.targets).toString()
-    }
-    return `${window.location.origin}/${this.urlPrefix}/transfer?${addressQueryString}&usdamount=${this.usdValue}&donation=true`
-  }
-
-  protected shareInTweet() {
-    const text =
-      'I have just helped a really cool creator by donating. Check my donation proof:'
-    const url = `https://twitter.com/intent/tweet?text=${text}&via=KodaDot&url=${this.getUrl()}`
-    window.open(url, '_blank')
-  }
-
-  @Watch('destinationAddresses', { deep: true })
-  destinationChanged(destinationAddresses: string[]): void {
-    const { usdamount } = this.$route.query
-    const targets = destinationAddresses
-      .filter((addr) => isAddress(addr))
-      .reduce(
-        (object, address, i) => ({
-          ...object,
-          [`target${i == 0 ? '' : i}`]: address,
-        }),
-        {} as TargetMap
-      )
-    this.targets = targets
-    this.$router.replace({ query: { ...targets, usdamount } }).catch(() => null) // null to further not throw navigation errors
-  }
-
-  @Watch('usdValue')
-  usdValueChanged(usdamount: string): void {
-    this.$router
-      .replace({ query: { ...this.$route.query, usdamount } })
-      .catch(() => null) // null to further not throw navigation errors
-  }
-
-  private toast(message: string): void {
-    this.$buefy.toast.open(message)
-  }
+  },
 }
 </script>

From 5ea8887e1cdfb231aa81283b59c733fd816ceaa8 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 23 Jul 2023 09:51:44 +0700
Subject: [PATCH 03/18] =?UTF-8?q?=F0=9F=94=A5=20remove=20tabs=20from=20mas?=
 =?UTF-8?q?smint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/massmint/Massmint.vue | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/components/massmint/Massmint.vue b/components/massmint/Massmint.vue
index 7cf20eab35..bc87401b86 100644
--- a/components/massmint/Massmint.vue
+++ b/components/massmint/Massmint.vue
@@ -8,16 +8,6 @@
             <NeoIcon icon="arrow-left" size="small" class="mr-1" />
             {{ $t('massmint.backToOnbaording') }}
           </NeoButton>
-          <div class="is-flex">
-            <TabItem
-              v-for="tab in tabs"
-              :key="tab"
-              :active="tab === 'Mass Mint'"
-              :text="tab"
-              :to="route.path"
-              :class="{ 'tab-nft': tab === 'NFT' }"
-              class="mobile-width" />
-          </div>
         </section>
         <hr class="m-0" />
         <section
@@ -109,7 +99,6 @@ import { FileObject } from '@/composables/massmint/useZipValidator'
 const preferencesStore = usePreferencesStore()
 const { $consola, $i18n } = useNuxtApp()
 const router = useRouter()
-const route = useRoute()
 const { urlPrefix } = usePrefix()
 
 const selectedCollection = ref<MintedCollection>()
@@ -199,8 +188,6 @@ const startMint = () => {
   )
 }
 
-const tabs = ['Collection', 'NFT', 'Mass Mint']
-
 const onCollectionSelected = (collection) => {
   selectedCollection.value = collection
 }

From 18077576d830a1c7118ded3fb450c4ba85544943 Mon Sep 17 00:00:00 2001
From: Luke Fishman <daiagi@gmail.com>
Date: Mon, 24 Jul 2023 15:49:16 +0700
Subject: [PATCH 04/18] Nuxt-propert-decorator/more-pages (#6457)

* home page

* snke/assets

* snek/claim

* snek/imcomingOffers

* snek/offers

* snek/stats

* stmn/waifu
---
 pages/index.vue               | 10 +---------
 pages/snek/assets.vue         |  8 +++-----
 pages/snek/claim.vue          |  7 +++----
 pages/snek/incomingOffers.vue |  8 +++-----
 pages/snek/offers.vue         |  8 +++-----
 pages/snek/stats.vue          |  8 +++-----
 pages/stmn/waifu.vue          |  7 +++----
 7 files changed, 19 insertions(+), 37 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 18b4133076..1f983c17f3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,18 +3,10 @@
 </template>
 
 <script lang="ts">
-import { Component, mixins } from 'nuxt-property-decorator'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
-
-@Component({
+export default {
   name: 'HomePage',
   components: {
     LandingPage: () => import('@/components/landing/LandingPage.vue'),
   },
-})
-export default class HomePage extends mixins(PrefixMixin) {
-  layout() {
-    return 'full-width-layout'
-  }
 }
 </script>
diff --git a/pages/snek/assets.vue b/pages/snek/assets.vue
index d4449c751d..29faba4c54 100644
--- a/pages/snek/assets.vue
+++ b/pages/snek/assets.vue
@@ -3,12 +3,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
-
-@Component({
+export default {
+  name: 'AssetPage',
   components: {
     AssetList: () => import('@/components/bsx/Asset/AssetList.vue'),
   },
-})
-export default class AssetPage extends Vue {}
+}
 </script>
diff --git a/pages/snek/claim.vue b/pages/snek/claim.vue
index 3e32a6ab37..37decbc720 100644
--- a/pages/snek/claim.vue
+++ b/pages/snek/claim.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
 import ClaimForm from '@/components/poap/claim/ClaimForm.vue'
 
-@Component({
+export default {
+  name: 'ClaimPage',
   components: {
     ClaimForm,
   },
@@ -27,6 +27,5 @@ import ClaimForm from '@/components/poap/claim/ClaimForm.vue'
       meta: [...this.$seoMeta(metaData)],
     }
   },
-})
-export default class SimpleMintPage extends Vue {}
+}
 </script>
diff --git a/pages/snek/incomingOffers.vue b/pages/snek/incomingOffers.vue
index 2102ecbb06..6405abfe12 100644
--- a/pages/snek/incomingOffers.vue
+++ b/pages/snek/incomingOffers.vue
@@ -3,12 +3,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
-
-@Component({
+export default {
+  name: 'IncomingOffersPage',
   components: {
     MyOffer: () => import('@/components/bsx/Offer/MyOffer.vue'),
   },
-})
-export default class IncomingOffersPage extends Vue {}
+}
 </script>
diff --git a/pages/snek/offers.vue b/pages/snek/offers.vue
index 5c7d32c685..d373e8ebc3 100644
--- a/pages/snek/offers.vue
+++ b/pages/snek/offers.vue
@@ -3,13 +3,11 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
-
-@Component({
+export default {
+  name: 'OffersPage',
   components: {
     MasterOfferTable: () =>
       import('@/components/bsx/Offer/MasterOfferTable.vue'),
   },
-})
-export default class Offers extends Vue {}
+}
 </script>
diff --git a/pages/snek/stats.vue b/pages/snek/stats.vue
index 8498742836..5f6d7a1fe6 100644
--- a/pages/snek/stats.vue
+++ b/pages/snek/stats.vue
@@ -3,12 +3,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
-
-@Component({
+export default {
+  name: 'OfferStatsPage',
   components: {
     OfferStats: () => import('@/components/bsx/Offer/OfferStats.vue'),
   },
-})
-export default class OfferStatsPage extends Vue {}
+}
 </script>
diff --git a/pages/stmn/waifu.vue b/pages/stmn/waifu.vue
index 14df201c8b..a67116629e 100644
--- a/pages/stmn/waifu.vue
+++ b/pages/stmn/waifu.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
 import GenerativeMint from '@/components/bsx/Create/GenerativeMint.vue'
 
-@Component({
+export default {
+  name: 'GenerativeMintPage',
   components: {
     GenerativeMint,
   },
@@ -27,6 +27,5 @@ import GenerativeMint from '@/components/bsx/Create/GenerativeMint.vue'
       meta: [...this.$seoMeta(metaData)],
     }
   },
-})
-export default class SimpleMintPage extends Vue {}
+}
 </script>

From a10bdeab0503f94d7c4d80a93a26bd7410b616cc Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Mon, 24 Jul 2023 16:57:29 +0800
Subject: [PATCH 05/18] migrate/remove inlineMixin  and rmrkVersionMixin 
 (#6458)

* refactor: migrate inlineMixin

* refactor: migrate rmrkVersionMixin

* fix: rmrk version
---
 components/rmrk/Create/CreateToken.vue |  6 ++--
 components/rmrk/Create/SimpleMint.vue  | 12 ++++++--
 components/shared/LinkResolver.vue     | 39 ++++++++++++++------------
 utils/mixins/inlineMixin.ts            | 14 ---------
 utils/mixins/rmrkVersionMixin.ts       | 14 ---------
 5 files changed, 35 insertions(+), 50 deletions(-)
 delete mode 100644 utils/mixins/inlineMixin.ts
 delete mode 100644 utils/mixins/rmrkVersionMixin.ts

diff --git a/components/rmrk/Create/CreateToken.vue b/components/rmrk/Create/CreateToken.vue
index d071980fcc..4add2395a1 100644
--- a/components/rmrk/Create/CreateToken.vue
+++ b/components/rmrk/Create/CreateToken.vue
@@ -86,7 +86,6 @@ import AuthMixin from '@/utils/mixins/authMixin'
 import ChainMixin from '@/utils/mixins/chainMixin'
 import MetaTransactionMixin from '@/utils/mixins/metaMixin'
 import PrefixMixin from '@/utils/mixins/prefixMixin'
-import RmrkVersionMixin from '@/utils/mixins/rmrkVersionMixin'
 import UseApiMixin from '@/utils/mixins/useApiMixin'
 import {
   notificationTypes,
@@ -130,7 +129,6 @@ const components = {
 
 @Component({ components })
 export default class CreateToken extends mixins(
-  RmrkVersionMixin,
   MetaTransactionMixin,
   ChainMixin,
   PrefixMixin,
@@ -170,6 +168,10 @@ export default class CreateToken extends mixins(
     this.price = value
   }
 
+  get version() {
+    return useRmrkVersion().version.value
+  }
+
   get hasPrice() {
     return Number(this.price)
   }
diff --git a/components/rmrk/Create/SimpleMint.vue b/components/rmrk/Create/SimpleMint.vue
index 551ce5f29a..742597c8c3 100644
--- a/components/rmrk/Create/SimpleMint.vue
+++ b/components/rmrk/Create/SimpleMint.vue
@@ -189,7 +189,6 @@ import { uploadDirectWhenMultiple } from '@/utils/directUpload'
 import { emptyObject } from '@/utils/empty'
 import ChainMixin from '@/utils/mixins/chainMixin'
 import PrefixMixin from '@/utils/mixins/prefixMixin'
-import RmrkVersionMixin from '@/utils/mixins/rmrkVersionMixin'
 import SubscribeMixin from '@/utils/mixins/subscribeMixin'
 import TransactionMixin from '@/utils/mixins/txMixin'
 import UseApiMixin from '@/utils/mixins/useApiMixin'
@@ -262,7 +261,6 @@ const components = {
 })
 export default class SimpleMint extends mixins(
   SubscribeMixin,
-  RmrkVersionMixin,
   TransactionMixin,
   ChainMixin,
   PrefixMixin,
@@ -315,6 +313,10 @@ export default class SimpleMint extends mixins(
     return useIdentityStore()
   }
 
+  get version() {
+    return useRmrkVersion().version.value
+  }
+
   get balanceNotEnoughMessage() {
     return this.balanceNotEnough ? this.$t('tooltip.notEnoughBalance') : ''
   }
@@ -434,6 +436,9 @@ export default class SimpleMint extends mixins(
 
   protected async estimateTx() {
     const { accountId, version } = this
+    if (!version) {
+      return
+    }
     const api = await this.useApi()
 
     const toRemark = mapAsSystemRemark(api)
@@ -516,6 +521,9 @@ export default class SimpleMint extends mixins(
     this.isLoading = true
     this.status = 'loader.ipfs'
     const { accountId, version } = this
+    if (!version) {
+      return
+    }
     this.rmrkMint.max = Number(this.rmrkMint.max)
     const api = await this.useApi()
     const toRemark = mapAsSystemRemark(api)
diff --git a/components/shared/LinkResolver.vue b/components/shared/LinkResolver.vue
index 0905934915..1c6e1baa20 100644
--- a/components/shared/LinkResolver.vue
+++ b/components/shared/LinkResolver.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="is">
+  <div>
     <template v-if="profileMode">
       <slot name="extra" />
       <nuxt-link :to="`${route}/${param}`" :tag="tag">
@@ -11,27 +11,30 @@
         <slot />
       </a>
     </template>
-  </component>
+  </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, mixins } from 'nuxt-property-decorator'
-import InlineMixin from '@/utils/mixins/inlineMixin'
+<script lang="ts" setup>
 import isShareMode from '@/utils/isShareMode'
 
-@Component
-export default class LinkResolver extends mixins(InlineMixin) {
-  @Prop({ default: '/rmrk/gallery' }) public route!: string
-  @Prop({ default: 'rmrk/gallery' }) public link!: string
-  @Prop({ default: 'a' }) public tag!: string
-  @Prop({}) public param!: string
-
-  get profileMode() {
-    return !isShareMode
+const props = withDefaults(
+  defineProps<{
+    route?: string
+    link?: string
+    tag?: string
+    param?: string
+  }>(),
+  {
+    route: '/rmrk/gallery',
+    link: 'rmrk/gallery',
+    tag: 'a',
+    param: '',
   }
+)
 
-  get hrefLink() {
-    return `${window.location.origin}/${this.link}/${this.param}`
-  }
-}
+const profileMode = !isShareMode
+
+const hrefLink = computed(
+  () => `${window.location.origin}/${props.link}/${props.param}`
+)
 </script>
diff --git a/utils/mixins/inlineMixin.ts b/utils/mixins/inlineMixin.ts
deleted file mode 100644
index 850ebb739e..0000000000
--- a/utils/mixins/inlineMixin.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, Vue, Prop } from 'nuxt-property-decorator'
-/*
- * refer to https://stackoverflow.com/questions/51873087/unable-to-use-mixins-in-vue-with-typescript
- * usage import Component, { mixins } from 'vue-class-component';
- * class ExtendedClass extends mixins(SubscribeMixin) {
- */
-@Component
-export default class InlineMixin extends Vue {
-  @Prop(Boolean) inline!: boolean
-
-  get is() {
-    return this.inline ? 'span' : 'div'
-  }
-}
diff --git a/utils/mixins/rmrkVersionMixin.ts b/utils/mixins/rmrkVersionMixin.ts
deleted file mode 100644
index 96dcf11b1b..0000000000
--- a/utils/mixins/rmrkVersionMixin.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, mixins } from 'nuxt-property-decorator'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
-
-/*
- * refer to https://stackoverflow.com/questions/51873087/unable-to-use-mixins-in-vue-with-typescript
- * usage import Component, { mixins } from 'vue-class-component';
- * class ExtendedClass extends mixins(SubscribeMixin) {
- */
-@Component
-export default class RmrkVersionMixin extends mixins(PrefixMixin) {
-  get version() {
-    return this.urlPrefix === 'rmrk' ? '1.0.0' : '2.0.0'
-  }
-}

From ac3aee22b09c633274616517fe332ff4c9daa48d Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Mon, 24 Jul 2023 16:59:50 +0800
Subject: [PATCH 06/18] fix: collectionId in path of url (#6454)

* fix: collectionId in path of url

* fix: remove unused code

* fix: remove navigation warning

---------

Co-authored-by: Viki Val <viktorko99@gmail.com>
---
 .../items/ItemsGrid/utils/useSearchParams.ts  |  8 -------
 components/search/SearchBar.vue               | 24 ++++---------------
 .../search/utils/useCollectionSearch.ts       | 13 ++++++----
 composables/useListInfiniteScroll.ts          | 10 ++++----
 stores/search.ts                              | 19 +++++++++++++++
 5 files changed, 38 insertions(+), 36 deletions(-)
 create mode 100644 stores/search.ts

diff --git a/components/items/ItemsGrid/utils/useSearchParams.ts b/components/items/ItemsGrid/utils/useSearchParams.ts
index abfc511e67..c5af6c65ae 100644
--- a/components/items/ItemsGrid/utils/useSearchParams.ts
+++ b/components/items/ItemsGrid/utils/useSearchParams.ts
@@ -80,14 +80,6 @@ function useSearchByCollections() {
             },
           },
         ]
-      } else if (route.query.collectionId) {
-        return [
-          {
-            collection: {
-              id_eq: route.query.collectionId,
-            },
-          },
-        ]
       }
       return []
     }),
diff --git a/components/search/SearchBar.vue b/components/search/SearchBar.vue
index 9f1d8f2259..ece726538e 100644
--- a/components/search/SearchBar.vue
+++ b/components/search/SearchBar.vue
@@ -69,8 +69,8 @@ import {
 import { SearchQuery } from './types'
 import PrefixMixin from '~/utils/mixins/prefixMixin'
 import KeyboardEventsMixin from '~/utils/mixins/keyboardEventsMixin'
-import { useWindowSize } from '@vueuse/core'
 import { NeoAutocomplete } from '@kodadot1/brick'
+import { useCollectionSearch } from '@/components/search/utils/useCollectionSearch'
 
 @Component({
   components: {
@@ -93,20 +93,11 @@ export default class SearchBar extends mixins(
     this.initKeyboardEventHandler({
       k: this.bindSearchEvents,
     })
-  }
-
-  get isMobile() {
-    return useWindowSize().width.value < 1024
-  }
-
-  get isCollectionPage() {
-    return this.$route.name === 'prefix-collection-id'
+    this.onSearchInCollectionModeChanged()
   }
 
   get isSearchInCollectionMode() {
-    return (
-      this.enableSearchInCollection && this.isCollectionPage && !this.isMobile
-    )
+    return useCollectionSearch().isCollectionSearchMode.value
   }
 
   get placeholderContent() {
@@ -164,14 +155,9 @@ export default class SearchBar extends mixins(
     this.searchRef.isActive = false
   }
 
-  @Watch('isSearchInCollectionMode', { immediate: true })
+  @Watch('enableSearchInCollection', { immediate: true })
   private onSearchInCollectionModeChanged() {
-    const { replaceUrl } = useReplaceUrl()
-    replaceUrl({
-      collectionId: this.isSearchInCollectionMode
-        ? this.$route.params.id
-        : undefined,
-    })
+    useCollectionSearch().setCollectionSearchMode(this.enableSearchInCollection)
   }
 }
 </script>
diff --git a/components/search/utils/useCollectionSearch.ts b/components/search/utils/useCollectionSearch.ts
index e6ca44d0fd..f33ef65815 100644
--- a/components/search/utils/useCollectionSearch.ts
+++ b/components/search/utils/useCollectionSearch.ts
@@ -1,16 +1,21 @@
-import { readParam } from '@/composables/useReplaceUrl'
+import { useSearchStore } from '@/stores/search'
 
 export const useCollectionSearch = () => {
-  const query = useRoute().query
   const route = useRoute()
 
-  const collectionId = readParam(query?.collectionId)
+  const isMobile = computed(() => useWindowSize().width.value < 1024)
 
+  const searchStore = useSearchStore()
   const isCollectionSearchMode = computed(() => {
-    return route.name === 'prefix-collection-id' && collectionId
+    return (
+      route.name === 'prefix-collection-id' &&
+      searchStore.isCollectionSearchMode &&
+      !isMobile.value
+    )
   })
 
   return {
     isCollectionSearchMode,
+    setCollectionSearchMode: searchStore.setCollectionSearchMode,
   }
 }
diff --git a/composables/useListInfiniteScroll.ts b/composables/useListInfiniteScroll.ts
index 3069ea1bd7..7144d9c219 100644
--- a/composables/useListInfiniteScroll.ts
+++ b/composables/useListInfiniteScroll.ts
@@ -96,7 +96,8 @@ export default function ({
   useResizeObserver(document.body, onResize)
 
   const replaceUrlPage = (targetPage: string) => {
-    if (targetPage === route.query.page) {
+    const isFirstPage = targetPage === '1'
+    if (targetPage === route.query.page || (isFirstPage && !route.query.page)) {
       return
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -104,10 +105,9 @@ export default function ({
     router
       .replace({
         path: String(route.path),
-        query:
-          targetPage === '1'
-            ? { ...restQuery }
-            : { ...restQuery, page: targetPage },
+        query: isFirstPage
+          ? { ...restQuery }
+          : { ...restQuery, page: targetPage },
       })
       .catch($consola.warn)
   }
diff --git a/stores/search.ts b/stores/search.ts
new file mode 100644
index 0000000000..bf33653822
--- /dev/null
+++ b/stores/search.ts
@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia'
+
+interface State {
+  isCollectionSearch: boolean
+}
+
+export const useSearchStore = defineStore('search', {
+  state: (): State => ({
+    isCollectionSearch: true,
+  }),
+  getters: {
+    isCollectionSearchMode: (state) => state.isCollectionSearch,
+  },
+  actions: {
+    setCollectionSearchMode(payload) {
+      this.isCollectionSearch = payload
+    },
+  },
+})

From b46e2e6e4ef68d155cc6c136c07eae42b9a851eb Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Mon, 24 Jul 2023 16:14:40 +0700
Subject: [PATCH 07/18] feat: KodaDot blog

---
 components/blog/BlogPost.vue    |  81 +++++++++++
 content/blog/what-is-erc6551.md |  24 ++++
 nuxt.config.js                  |  13 +-
 package.json                    |   2 +-
 pages/blog/_slug.vue            |   3 +
 pages/blog/index.vue            | 112 +++++++++++++++
 pages/first-time.vue            |   9 --
 pnpm-lock.yaml                  | 248 +++++++++++---------------------
 8 files changed, 314 insertions(+), 178 deletions(-)
 create mode 100644 components/blog/BlogPost.vue
 create mode 100644 content/blog/what-is-erc6551.md
 create mode 100644 pages/blog/_slug.vue
 create mode 100644 pages/blog/index.vue
 delete mode 100644 pages/first-time.vue

diff --git a/components/blog/BlogPost.vue b/components/blog/BlogPost.vue
new file mode 100644
index 0000000000..a864bbf8bd
--- /dev/null
+++ b/components/blog/BlogPost.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="article">
+    <div
+      class="is-flex is-justify-content-space-between has-text-grey is-size-5">
+      <div>{{ attributes.tags }}</div>
+      <div v-if="attributes.date">
+        {{ format(new Date(attributes.date), 'dd.MM.yyyy') }}
+      </div>
+    </div>
+    <h1>{{ attributes.title }}</h1>
+    <h2 v-if="attributes.subtitle">{{ attributes.subtitle }}</h2>
+    <img
+      v-if="attributes.image"
+      :src="attributes.image"
+      :alt="attributes.title"
+      width="100%" />
+    <component :is="singlePostComponent" />
+  </div>
+</template>
+
+<script setup>
+import { format } from 'date-fns'
+import { convertMarkdownToText } from '@/utils/markdown'
+
+const { $seoMeta } = useNuxtApp()
+const route = useRoute()
+
+const slug = route.params.slug
+const attributes = ref({})
+const singlePostComponent = ref('')
+
+onMounted(async () => {
+  const post = await import(`~/content/blog/${slug}.md`)
+
+  attributes.value = post.attributes
+  singlePostComponent.value = post.vue.component
+})
+
+const title = computed(() => attributes.value.title)
+const meta = computed(() => {
+  return [
+    ...$seoMeta({
+      title: attributes.value.title,
+      description: convertMarkdownToText(attributes.value.subtitle),
+      url: route.path,
+      image: attributes.value.image,
+    }),
+  ]
+})
+
+useNuxt2Meta({
+  title,
+  meta,
+})
+</script>
+
+<style lang="scss">
+.article {
+  margin: 0 auto;
+  max-width: 40rem;
+
+  h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    margin: 1rem 0;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  img {
+    margin-bottom: 1rem;
+  }
+
+  p {
+    margin-bottom: 1rem;
+  }
+}
+</style>
diff --git a/content/blog/what-is-erc6551.md b/content/blog/what-is-erc6551.md
new file mode 100644
index 0000000000..a9bb014c53
--- /dev/null
+++ b/content/blog/what-is-erc6551.md
@@ -0,0 +1,24 @@
+---
+date: 2023-03-18
+tags: Tokens
+image: https://eips.ethereum.org/assets/eip-6551/diagram.png
+title: What is ERC6551 - Token Bound Accounts (TBA) ?
+subtitle: Understand ERC6551 which redefines how ERC-721 tokens interact with the Ethereum blockchain by giving every non-fungible token its very own smart contract account.
+---
+
+## What is ERC6551?
+
+EIP6551 is a proposal made to extend the functionality of every ERC-721 token by attaching them to specific smart contract accounts, effectively providing on-chain identity to these tokens. Each non-fungible token gets a unique, global identifier which gives it a distinct identity.
+
+## How does ERC6551 operate?
+
+EIP6551 operates by creating uniquely, deterministically addressed smart contract accounts for each ERC-721 token via a permissionless registry. It maintains complete compatibility with existing ERC-721 token contracts, therefore not requiring any changes to previously deployed ERC-721 contracts. Control over each token-bound account is given to the owner of the ERC-721 token, enabling the owner to initiate on-chain actions on behalf of their token.
+
+## Unique features of ERC6551
+
+The unique feature of ERC6551 lies in its ability to turn each ERC-721 token into a standalone entity capable of owning assets and interacting with applications on the Ethereum blockchain. This expands the functionality of non-fungible tokens, allowing them to accumulate assets and record transaction history.
+
+## Conclusion
+
+ERC6551 is a breakthrough in enhancing the capabilities of non-fungible tokens. Through ERC6551, ERC-721 tokens not only represent a unique digital asset but can also interact independently with the blockchain and other on-chain applications. This opens a plethora of possibilities in the world of non-fungible tokens on the KodaDot platform.
+​
diff --git a/nuxt.config.js b/nuxt.config.js
index 6df596f226..5f728e8b96 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -2,6 +2,8 @@ import path from 'path'
 import * as fs from 'fs'
 import { defineNuxtConfig } from '@nuxt/bridge'
 import SentryWebpackPlugin from '@sentry/webpack-plugin'
+import Mode from 'frontmatter-markdown-loader/mode'
+
 import { manifestIcons } from './utils/config/pwa'
 import { URLS, apolloClientConfig } from './utils/constants'
 
@@ -405,10 +407,17 @@ export default defineNuxtConfig({
         )
       }
 
-      // add markdown loader
+      // add frontmatter-markdown-loader
       config.module.rules.push({
         test: /\.md$/,
-        use: 'raw-loader',
+        include: path.resolve(__dirname, 'content'),
+        loader: 'frontmatter-markdown-loader',
+        options: {
+          mode: [Mode.VUE_COMPONENT, Mode.META],
+          vue: {
+            root: 'markdown-body',
+          },
+        },
       })
 
       config.module.rules.push({
diff --git a/package.json b/package.json
index ea92be5f7b..c1c1fc32d8 100644
--- a/package.json
+++ b/package.json
@@ -162,13 +162,13 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-unicorn": "^42.0.0",
     "eslint-plugin-vue": "^8.7.1",
+    "frontmatter-markdown-loader": "^3.7.0",
     "glob": "^8.1.0",
     "graphql-tag": "^2.12.6",
     "husky": "^7.0.4",
     "jsdom": "^19.0.0",
     "lint-staged": "^12.5.0",
     "prettier": "^2.8.8",
-    "raw-loader": "^4.0.2",
     "sass": "^1.64.0",
     "sass-loader": "^10.4.1",
     "typescript": "^4.9.5",
diff --git a/pages/blog/_slug.vue b/pages/blog/_slug.vue
new file mode 100644
index 0000000000..61ada8c59c
--- /dev/null
+++ b/pages/blog/_slug.vue
@@ -0,0 +1,3 @@
+<template>
+  <BlogPost />
+</template>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
new file mode 100644
index 0000000000..a9a6a3d59c
--- /dev/null
+++ b/pages/blog/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="content">
+    <div class="content-headline">
+      <h1>KodaDot Blog</h1>
+      <p>Let’s explore the NFT universe</p>
+    </div>
+
+    <div
+      v-for="post in posts"
+      :key="post.attributes.title"
+      class="content-list">
+      <img :src="post.attributes.image" :alt="post.attributes.title" />
+
+      <div class="content-list-card">
+        <div>
+          <div class="has-text-grey">{{ post.attributes.tags }}</div>
+          <div class="content-list-card-title">{{ post.attributes.title }}</div>
+          <div>{{ post.attributes.subtitle }}</div>
+        </div>
+
+        <div>
+          <NeoButton
+            no-shadow
+            rounded
+            tag="a"
+            size="small"
+            :href="getPermalink(post)"
+            icon="arrow-right-long">
+            View Article
+          </NeoButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { NeoButton } from '@kodadot1/brick'
+
+export default {
+  components: {
+    NeoButton,
+  },
+  async asyncData() {
+    const resolve = require.context('~/content/blog/', true, /\.md$/)
+    const imports = resolve.keys().map((key) => resolve(key))
+
+    return {
+      posts: imports,
+    }
+  },
+  methods: {
+    getPermalink(post) {
+      const filePath = post.meta.resourcePath
+      const fileName = filePath.match(/\/([^/]+)\.\w+$/)[1]
+
+      return fileName
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.content {
+  margin: 0 auto;
+  max-width: 60rem;
+
+  &-headline {
+    text-align: center;
+
+    h1 {
+      font-size: 3rem;
+      margin-bottom: 0.5rem;
+      color: #fff !important;
+      text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
+        -1px -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000,
+        0 -1px 0 #000, 4px 4px #000;
+    }
+
+    p {
+      font-size: 1.5rem;
+      font-weight: 500;
+      margin-bottom: 5rem;
+    }
+  }
+
+  &-list {
+    border-radius: 2.5rem;
+    border: 1px solid #000;
+    background: #fff;
+    box-shadow: 4px 4px 0px 0px #000;
+    display: flex;
+
+    img {
+      width: 40rem;
+    }
+
+    &-card {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 1.5rem;
+
+      &-title {
+        font-size: 1.25rem;
+        font-weight: 700;
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/first-time.vue b/pages/first-time.vue
deleted file mode 100644
index a5fd56aec6..0000000000
--- a/pages/first-time.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <section class="content">
-    <Markdown :source="FirstTimeMD" />
-  </section>
-</template>
-
-<script lang="ts" setup>
-import FirstTimeMD from '../FIRST_TIME.md'
-</script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6559ebf183..b1e917a4f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: false
@@ -317,6 +317,9 @@ importers:
       eslint-plugin-vue:
         specifier: ^8.7.1
         version: 8.7.1(eslint@8.45.0)
+      frontmatter-markdown-loader:
+        specifier: ^3.7.0
+        version: 3.7.0
       glob:
         specifier: ^8.1.0
         version: 8.1.0
@@ -335,9 +338,6 @@ importers:
       prettier:
         specifier: ^2.8.8
         version: 2.8.8
-      raw-loader:
-        specifier: ^4.0.2
-        version: 4.0.2
       sass:
         specifier: ^1.64.0
         version: 1.64.0
@@ -422,7 +422,7 @@ importers:
         version: 0.16.2(sass@1.64.0)(vite@3.2.7)
       vite:
         specifier: ^3.2.7
-        version: 3.2.7(sass@1.64.0)(terser@5.17.7)
+        version: 3.2.7(@types/node@20.2.5)(sass@1.64.0)
       vue:
         specifier: 2.7.14
         version: 2.7.14
@@ -686,11 +686,6 @@ packages:
     dependencies:
       '@babel/highlight': 7.22.5
 
-  /@babel/compat-data@7.22.3:
-    resolution: {integrity: sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==}
-    engines: {node: '>=6.9.0'}
-    dev: false
-
   /@babel/compat-data@7.22.9:
     resolution: {integrity: sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==}
     engines: {node: '>=6.9.0'}
@@ -726,16 +721,6 @@ packages:
       jsesc: 2.5.2
     dev: false
 
-  /@babel/generator@7.22.5:
-    resolution: {integrity: sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.22.5
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.18
-      jsesc: 2.5.2
-    dev: true
-
   /@babel/generator@7.22.9:
     resolution: {integrity: sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==}
     engines: {node: '>=6.9.0'}
@@ -764,20 +749,6 @@ packages:
     dependencies:
       '@babel/types': 7.22.5
 
-  /@babel/helper-compilation-targets@7.22.5(@babel/core@7.22.9):
-    resolution: {integrity: sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/core': 7.22.9
-      '@babel/helper-validator-option': 7.22.5
-      browserslist: 4.21.9
-      lru-cache: 5.1.1
-      semver: 6.3.1
-    dev: false
-
   /@babel/helper-compilation-targets@7.22.9(@babel/core@7.22.9):
     resolution: {integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==}
     engines: {node: '>=6.9.0'}
@@ -970,11 +941,11 @@ packages:
     resolution: {integrity: sha512-ut4qrkE4AuSfrwHSps51ekR1ZY/ygrP1tp0WFm8oVq6nzc/hvfV/22JylndIbsf2U2M9LOMwiSddr6y+78j+OQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-environment-visitor': 7.22.1
-      '@babel/helper-member-expression-to-functions': 7.22.3
-      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-member-expression-to-functions': 7.22.5
+      '@babel/helper-optimise-call-expression': 7.22.5
       '@babel/template': 7.22.5
-      '@babel/traverse': 7.22.5
+      '@babel/traverse': 7.22.8
       '@babel/types': 7.22.5
     transitivePeerDependencies:
       - supports-color
@@ -1018,13 +989,6 @@ packages:
       '@babel/types': 7.22.5
     dev: true
 
-  /@babel/helper-split-export-declaration@7.22.5:
-    resolution: {integrity: sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.22.5
-    dev: true
-
   /@babel/helper-split-export-declaration@7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
@@ -2235,24 +2199,6 @@ packages:
       - supports-color
     dev: false
 
-  /@babel/traverse@7.22.5:
-    resolution: {integrity: sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.22.5
-      '@babel/generator': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-function-name': 7.22.5
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.5
-      '@babel/parser': 7.22.5
-      '@babel/types': 7.22.5
-      debug: 4.3.4(supports-color@9.3.1)
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/traverse@7.22.8:
     resolution: {integrity: sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==}
     engines: {node: '>=6.9.0'}
@@ -3775,7 +3721,7 @@ packages:
       chokidar: 3.5.3
       pathe: 0.2.0
       picocolors: 1.0.0
-      vite: 3.2.7(sass@1.64.0)(terser@5.17.7)
+      vite: 3.2.7(@types/node@20.2.5)(sass@1.64.0)
     dev: true
 
   /@histoire/vendors@0.16.0:
@@ -4089,9 +4035,9 @@ packages:
   /@nuxt/babel-preset-app-edge@2.16.0-27720022.54e852f(vue@2.7.14):
     resolution: {integrity: sha512-pjLqKdZaz2DORKuIpclWgZ3himMmWT0Awh6gcq8PwYy4NeR1VvNQWXpJKRL7QWw/OZT89oSU3WFv8KF8GrvRAA==}
     dependencies:
-      '@babel/compat-data': 7.22.3
+      '@babel/compat-data': 7.22.9
       '@babel/core': 7.22.9
-      '@babel/helper-compilation-targets': 7.22.5(@babel/core@7.22.9)
+      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9)
       '@babel/helper-module-imports': 7.22.5
       '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.22.9)
       '@babel/plugin-proposal-decorators': 7.22.3(@babel/core@7.22.9)
@@ -4103,7 +4049,7 @@ packages:
       '@babel/runtime': 7.22.3
       '@vue/babel-preset-jsx': 1.4.0(@babel/core@7.22.9)(vue@2.7.14)
       core-js: 3.30.2
-      core-js-compat: 3.30.2
+      core-js-compat: 3.31.1
       regenerator-runtime: 0.13.11
     transitivePeerDependencies:
       - supports-color
@@ -4141,7 +4087,7 @@ packages:
       hash-sum: 2.0.0
       knitwork: 1.0.0
       magic-string: 0.27.0
-      mlly: 1.3.0
+      mlly: 1.4.0
       nitropack: 1.0.0
       node-fetch: 3.3.1
       nuxi: 3.0.0
@@ -4317,7 +4263,7 @@ packages:
       minimist: 1.2.8
       opener: 1.5.2
       pretty-bytes: 5.6.0
-      semver: 7.5.1
+      semver: 7.5.4
       serve-static: 1.15.0
       std-env: 3.3.3
       upath: 2.0.1
@@ -4338,7 +4284,7 @@ packages:
       glob: 7.2.3
       globby: 11.1.0
       scule: 0.2.1
-      semver: 7.5.1
+      semver: 7.5.4
       upath: 2.0.1
       vue-template-compiler: 2.7.14
     dev: false
@@ -4442,11 +4388,11 @@ packages:
       ignore: 5.2.4
       jiti: 1.18.2
       knitwork: 1.0.0
-      mlly: 1.3.0
+      mlly: 1.4.0
       pathe: 1.1.1
       pkg-types: 1.0.3
       scule: 1.0.0
-      semver: 7.5.1
+      semver: 7.5.4
       unctx: 2.3.1
       unimport: 3.0.7
       untyped: 1.3.2
@@ -4574,7 +4520,7 @@ packages:
       nanoid: 3.3.6
       node-fetch: 2.6.11
       parse-git-config: 3.0.0
-      rc9: 2.1.0
+      rc9: 2.1.1
       std-env: 3.3.3
     transitivePeerDependencies:
       - encoding
@@ -4628,7 +4574,7 @@ packages:
       jiti: 1.18.2
       lodash: 4.17.21
       proper-lockfile: 4.1.2
-      semver: 7.5.1
+      semver: 7.5.4
       serialize-javascript: 6.0.1
       signal-exit: 3.0.7
       ua-parser-js: 1.0.35
@@ -4693,7 +4639,7 @@ packages:
       '@nuxt/utils-edge': 2.16.0-27720022.54e852f
       babel-loader: 8.3.0(@babel/core@7.22.9)(webpack@4.46.0)
       cache-loader: 4.1.0(webpack@4.46.0)
-      caniuse-lite: 1.0.30001495
+      caniuse-lite: 1.0.30001517
       consola: 2.15.3
       css-loader: 4.3.0(webpack@4.46.0)
       cssnano: 4.1.11
@@ -4715,7 +4661,7 @@ packages:
       postcss-loader: 3.0.0
       postcss-preset-env: 6.7.1
       postcss-url: 8.0.0
-      semver: 7.5.1
+      semver: 7.5.4
       std-env: 3.3.3
       style-resources-loader: 1.5.0(webpack@4.46.0)
       terser-webpack-plugin: 4.2.3(webpack@4.46.0)
@@ -4730,7 +4676,7 @@ packages:
       webpack: 4.46.0
       webpack-bundle-analyzer: 4.9.0
       webpack-dev-middleware: 5.3.3(webpack@4.46.0)
-      webpack-hot-middleware: 2.25.3
+      webpack-hot-middleware: 2.25.4
       webpack-node-externals: 3.0.0
       webpackbar: 5.0.2(webpack@4.46.0)
     transitivePeerDependencies:
@@ -5480,7 +5426,7 @@ packages:
       '@polkadot/api-augment': 10.8.1
       '@polkadot/api-base': 10.8.1
       '@polkadot/api-derive': 10.8.1
-      '@polkadot/keyring': 12.3.2(@polkadot/util@12.3.2)
+      '@polkadot/keyring': 12.3.2(@polkadot/util-crypto@12.3.2)(@polkadot/util@12.3.2)
       '@polkadot/rpc-augment': 10.8.1
       '@polkadot/rpc-core': 10.8.1
       '@polkadot/rpc-provider': 10.8.1
@@ -5507,7 +5453,7 @@ packages:
       '@polkadot/api-augment': 10.9.1
       '@polkadot/api-base': 10.9.1
       '@polkadot/api-derive': 10.9.1
-      '@polkadot/keyring': 12.3.2(@polkadot/util@12.3.2)
+      '@polkadot/keyring': 12.3.2(@polkadot/util-crypto@12.3.2)(@polkadot/util@12.3.2)
       '@polkadot/rpc-augment': 10.9.1
       '@polkadot/rpc-core': 10.9.1
       '@polkadot/rpc-provider': 10.9.1
@@ -5687,11 +5633,12 @@ packages:
       tslib: 2.5.3
     dev: false
 
-  /@polkadot/keyring@12.3.2(@polkadot/util@12.3.2):
+  /@polkadot/keyring@12.3.2(@polkadot/util-crypto@12.3.2)(@polkadot/util@12.3.2):
     resolution: {integrity: sha512-NTdtDeI0DP9l/45hXynNABeP5VB8piw5YR+CbUxK2e36xpJWVXwbcOepzslg5ghE9rs8UKJb30Z/HqTU4sBY0Q==}
     engines: {node: '>=16'}
     peerDependencies:
       '@polkadot/util': 12.3.2
+      '@polkadot/util-crypto': 12.3.2
     dependencies:
       '@polkadot/util': 12.3.2
       '@polkadot/util-crypto': 12.3.2(@polkadot/util@12.3.2)
@@ -6008,7 +5955,7 @@ packages:
     resolution: {integrity: sha512-4QzT2QzD+320+eT6b79sGAA85Tt3Bb8fQvse4r5Mom2iiBd2SO81vOhxSAOaIe4GUsw25VzFJmsbe7+OObItdg==}
     engines: {node: '>=16'}
     dependencies:
-      '@polkadot/keyring': 12.3.2(@polkadot/util@12.3.2)
+      '@polkadot/keyring': 12.3.2(@polkadot/util-crypto@12.3.2)(@polkadot/util@12.3.2)
       '@polkadot/types': 10.9.1
       '@polkadot/types-support': 10.9.1
       '@polkadot/util': 12.3.2
@@ -6351,7 +6298,7 @@ packages:
     resolution: {integrity: sha512-m6UvsvQOZ7sRGbonb6QLs4mZ6TmYKdAXAcHakiJl2xArqsgOghJsKhgaTqcigPkSq4947MXtIkEzdrwFEnkYkQ==}
     engines: {node: '>=16'}
     dependencies:
-      '@polkadot/keyring': 12.3.2(@polkadot/util@12.3.2)
+      '@polkadot/keyring': 12.3.2(@polkadot/util-crypto@12.3.2)(@polkadot/util@12.3.2)
       '@polkadot/types-augment': 10.8.1
       '@polkadot/types-codec': 10.8.1
       '@polkadot/types-create': 10.8.1
@@ -6365,7 +6312,7 @@ packages:
     resolution: {integrity: sha512-AG33i2ZGGfq7u+5rkAdGrXAQHHl844/Yv+junH5ZzX69xiCoWO1bH/yzDUNBdpki2GlACWvF9nLYh3F2tVF93w==}
     engines: {node: '>=16'}
     dependencies:
-      '@polkadot/keyring': 12.3.2(@polkadot/util@12.3.2)
+      '@polkadot/keyring': 12.3.2(@polkadot/util-crypto@12.3.2)(@polkadot/util@12.3.2)
       '@polkadot/types-augment': 10.9.1
       '@polkadot/types-codec': 10.9.1
       '@polkadot/types-create': 10.9.1
@@ -8011,6 +7958,7 @@ packages:
 
   /@substrate/smoldot-light@0.7.9:
     resolution: {integrity: sha512-HP8iP7sFYlpSgjjbo0lqHyU+gu9lL2hbDNce6dWk5/10mFFF9jKIFGfui4zCecUY808o/Go9pan/31kMJoLbug==}
+    requiresBuild: true
     dependencies:
       pako: 2.1.0
       ws: 8.13.0
@@ -8843,7 +8791,7 @@ packages:
       vite: ^3.0.0 || ^4.0.0
       vue: ^2.7.0-0
     dependencies:
-      vite: 3.2.7(sass@1.64.0)(terser@5.17.7)
+      vite: 3.2.7(@types/node@20.2.5)(sass@1.64.0)
       vue: 2.7.14
     dev: true
 
@@ -9350,14 +9298,6 @@ packages:
       acorn: 8.10.0
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.8.2):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.8.2
-    dev: true
-
   /acorn-walk@7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
@@ -9579,6 +9519,7 @@ packages:
 
   /anymatch@2.0.0:
     resolution: {integrity: sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==}
+    requiresBuild: true
     dependencies:
       micromatch: 3.1.10
       normalize-path: 2.1.1
@@ -10482,6 +10423,7 @@ packages:
 
   /async-each@1.0.6:
     resolution: {integrity: sha512-c646jH1avxr+aVpndVMeAfYw7wAa6idufrlN3LPA4PmKS0QEGp6PIC9nwz0WQkkvBGAMEki3pFdtxaF39J9vvg==}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -10721,6 +10663,7 @@ packages:
   /binary-extensions@1.13.1:
     resolution: {integrity: sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -11284,10 +11227,6 @@ packages:
       lodash.uniq: 4.5.0
     dev: false
 
-  /caniuse-lite@1.0.30001495:
-    resolution: {integrity: sha512-F6x5IEuigtUfU5ZMQK2jsy5JqUUlEFRVZq8bO2a+ysq5K7jD6PPc9YXZj78xDNS3uNchesp1Jw47YXEqr+Viyg==}
-    dev: false
-
   /caniuse-lite@1.0.30001517:
     resolution: {integrity: sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==}
 
@@ -11443,6 +11382,7 @@ packages:
   /chokidar@2.1.8:
     resolution: {integrity: sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==}
     deprecated: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
+    requiresBuild: true
     dependencies:
       anymatch: 2.0.0
       async-each: 1.0.6
@@ -12289,12 +12229,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /core-js-compat@3.30.2:
-    resolution: {integrity: sha512-nriW1nuJjUgvkEjIot1Spwakz52V9YkYHZAQG6A1eCgC8AA1p0zngrQEP9R0+V6hji5XilWKG1Bd0YRppmGimA==}
-    dependencies:
-      browserslist: 4.21.9
-    dev: false
-
   /core-js-compat@3.31.1:
     resolution: {integrity: sha512-wIDWd2s5/5aJSdpOJHfSibxNODxoGoWOBHt8JSPB41NOE94M7kuTPZCYLOlTtuoXTsBPKobpJ6T+y0SSy5L9SA==}
     dependencies:
@@ -13178,7 +13112,7 @@ packages:
     resolution: {integrity: sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==}
     dependencies:
       domelementtype: 2.3.0
-      entities: 2.2.0
+      entities: 2.1.0
     dev: false
 
   /dom-serializer@1.4.1:
@@ -13186,7 +13120,7 @@ packages:
     dependencies:
       domelementtype: 2.3.0
       domhandler: 4.3.1
-      entities: 2.2.0
+      entities: 2.1.0
     dev: false
 
   /domain-browser@1.2.0:
@@ -13394,10 +13328,6 @@ packages:
   /entities@2.1.0:
     resolution: {integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==}
 
-  /entities@2.2.0:
-    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
-    dev: false
-
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -14196,8 +14126,8 @@ packages:
     resolution: {integrity: sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.8.2
-      acorn-jsx: 5.3.2(acorn@8.8.2)
+      acorn: 8.10.0
+      acorn-jsx: 5.3.2(acorn@8.10.0)
       eslint-visitor-keys: 3.4.1
     dev: true
 
@@ -14902,6 +14832,20 @@ packages:
     resolution: {integrity: sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==}
     dev: false
 
+  /front-matter@4.0.2:
+    resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==}
+    dependencies:
+      js-yaml: 3.14.1
+    dev: true
+
+  /frontmatter-markdown-loader@3.7.0:
+    resolution: {integrity: sha512-AApxrNtVTlvvfHcj/7u+bLRozMVOedPMEESPzlVJiRPwidKvPDkbGOmaj7wps/M63fYzlwo6iXQtrjNrtuYh9A==}
+    dependencies:
+      front-matter: 4.0.2
+      loader-utils: 2.0.4
+      markdown-it: 12.3.2
+    dev: true
+
   /fs-capacitor@2.0.4:
     resolution: {integrity: sha512-8S4f4WsCryNw2mJJchi46YgB6CR5Ze+4L1h8ewl9tEpL4SJ3ZO+c/bS4BWhB8bK+O3TMqhuZarTitd0S0eh2pA==}
     engines: {node: '>=8.5'}
@@ -15173,6 +15117,7 @@ packages:
 
   /glob-parent@3.1.0:
     resolution: {integrity: sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==}
+    requiresBuild: true
     dependencies:
       is-glob: 3.1.0
       path-dirname: 1.0.2
@@ -15725,7 +15670,7 @@ packages:
       sade: 1.8.1
       shiki-es: 0.2.0
       sirv: 2.0.3
-      vite: 3.2.7(sass@1.64.0)(terser@5.17.7)
+      vite: 3.2.7(@types/node@20.2.5)(sass@1.64.0)
       vite-node: 0.28.4(sass@1.64.0)
     transitivePeerDependencies:
       - '@types/node'
@@ -15776,8 +15721,8 @@ packages:
       whatwg-encoding: 2.0.0
     dev: true
 
-  /html-entities@2.3.5:
-    resolution: {integrity: sha512-72TJlcMkYsEJASa/3HnX7VT59htM7iSHbH59NSZbtc+22Ap0Txnlx91sfeB+/A7wNZg7UxtZdhAW4y+/jimrdg==}
+  /html-entities@2.4.0:
+    resolution: {integrity: sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==}
     dev: false
 
   /html-escaper@2.0.2:
@@ -15840,7 +15785,7 @@ packages:
       domelementtype: 2.3.0
       domhandler: 4.3.1
       domutils: 2.8.0
-      entities: 2.2.0
+      entities: 2.1.0
     dev: false
 
   /http-cache-semantics@4.1.1:
@@ -16222,6 +16167,7 @@ packages:
   /is-binary-path@1.0.1:
     resolution: {integrity: sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
     dependencies:
       binary-extensions: 1.13.1
     dev: false
@@ -16370,6 +16316,7 @@ packages:
   /is-glob@3.1.0:
     resolution: {integrity: sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
     dependencies:
       is-extglob: 2.1.1
     dev: false
@@ -17583,8 +17530,8 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
-  /memfs@3.5.2:
-    resolution: {integrity: sha512-4kbWXbVZ+LU4XFDS2CuA7frnwz2HxCMB/0yOXc86q7aCQrfWKkL11t6al1e2CsVC7uhnBNTQ1TfUsAxVauO9IQ==}
+  /memfs@3.5.3:
+    resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==}
     engines: {node: '>= 4.0.0'}
     dependencies:
       fs-monkey: 1.0.4
@@ -17695,13 +17642,6 @@ packages:
     resolution: {integrity: sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==}
     engines: {node: '>=4.0.0'}
     hasBin: true
-    dev: true
-
-  /mime@2.6.0:
-    resolution: {integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==}
-    engines: {node: '>=4.0.0'}
-    hasBin: true
-    dev: false
 
   /mime@3.0.0:
     resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
@@ -18232,7 +18172,7 @@ packages:
       string_decoder: 1.3.0
       timers-browserify: 2.0.12
       tty-browserify: 0.0.0
-      url: 0.11.0
+      url: 0.11.1
       util: 0.11.1
       vm-browserify: 1.1.2
     dev: false
@@ -18923,6 +18863,7 @@ packages:
 
   /path-dirname@1.0.2:
     resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -19083,7 +19024,7 @@ packages:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
       jsonc-parser: 3.2.0
-      mlly: 1.3.0
+      mlly: 1.4.0
       pathe: 1.1.1
 
   /pluralize@8.0.0:
@@ -20141,7 +20082,7 @@ packages:
     resolution: {integrity: sha512-E2cbOQ5aii2zNHh8F6fk1cxls7QVFZjLPSrqvmiza8OuXLzIpErij8BDS5Y3STPfJgpIMNCPEr8JlKQWEoozUw==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      mime: 2.6.0
+      mime: 2.5.2
       minimatch: 3.1.2
       mkdirp: 0.5.6
       postcss: 7.0.39
@@ -20404,10 +20345,6 @@ packages:
       pump: 2.0.1
     dev: false
 
-  /punycode@1.3.2:
-    resolution: {integrity: sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==}
-    dev: false
-
   /punycode@1.4.1:
     resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==}
     dev: false
@@ -20476,12 +20413,6 @@ packages:
     engines: {node: '>=0.4.x'}
     dev: false
 
-  /querystring@0.2.0:
-    resolution: {integrity: sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==}
-    engines: {node: '>=0.4.x'}
-    deprecated: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
-    dev: false
-
   /querystring@0.2.1:
     resolution: {integrity: sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==}
     engines: {node: '>=0.4.x'}
@@ -20540,16 +20471,6 @@ packages:
       unpipe: 1.0.0
     dev: false
 
-  /raw-loader@4.0.2:
-    resolution: {integrity: sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==}
-    engines: {node: '>= 10.13.0'}
-    peerDependencies:
-      webpack: ^4.0.0 || ^5.0.0
-    dependencies:
-      loader-utils: 2.0.4
-      schema-utils: 3.1.2
-    dev: true
-
   /rc9@1.2.4:
     resolution: {integrity: sha512-YD1oJO9LUzMdmr2sAsVlwQVtEoDCmvuyDwmSWrg2GKFprl3BckP5cmw9rHPunei0lV6Xl4E5t2esT+0trY1xfQ==}
     dependencies:
@@ -20558,14 +20479,6 @@ packages:
       flat: 5.0.2
     dev: false
 
-  /rc9@2.1.0:
-    resolution: {integrity: sha512-ROO9bv8PPqngWKoiUZU3JDQ4sugpdRs9DfwHnzDSxK25XtQn6BEHL6EOd/OtKuDT2qodrtNR+0WkPT6l0jxH5Q==}
-    dependencies:
-      defu: 6.1.2
-      destr: 1.2.2
-      flat: 5.0.2
-    dev: false
-
   /rc9@2.1.1:
     resolution: {integrity: sha512-lNeOl38Ws0eNxpO3+wD1I9rkHGQyj1NU1jlzv4go2CtEnEQEUfqnIvZG7W+bC/aXdJ27n5x/yUjb6RoT9tko+Q==}
     dependencies:
@@ -20647,6 +20560,7 @@ packages:
   /readdirp@2.2.1:
     resolution: {integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==}
     engines: {node: '>=0.10'}
+    requiresBuild: true
     dependencies:
       graceful-fs: 4.2.11
       micromatch: 3.1.10
@@ -21177,8 +21091,8 @@ packages:
       ajv: 6.12.6
       ajv-keywords: 3.5.2(ajv@6.12.6)
 
-  /schema-utils@4.0.1:
-    resolution: {integrity: sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==}
+  /schema-utils@4.2.0:
+    resolution: {integrity: sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==}
     engines: {node: '>= 12.13.0'}
     dependencies:
       '@types/json-schema': 7.0.12
@@ -21532,6 +21446,7 @@ packages:
 
   /smoldot@1.0.4:
     resolution: {integrity: sha512-N3TazI1C4GGrseFH/piWyZCCCRJTRx2QhDfrUKRT4SzILlW5m8ayZ3QTKICcz1C/536T9cbHHJyP7afxI6Mi1A==}
+    requiresBuild: true
     dependencies:
       pako: 2.1.0
       ws: 8.13.0
@@ -22959,6 +22874,7 @@ packages:
   /upath@1.2.0:
     resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
     engines: {node: '>=4'}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -23025,11 +22941,11 @@ packages:
       requires-port: 1.0.0
     dev: true
 
-  /url@0.11.0:
-    resolution: {integrity: sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==}
+  /url@0.11.1:
+    resolution: {integrity: sha512-rWS3H04/+mzzJkv0eZ7vEDGiQbgquI1fGfOad6zKvgYQi1SzMmhl7c/DdRGxhaWrVH6z0qWITo8rpnxK/RfEhA==}
     dependencies:
-      punycode: 1.3.2
-      querystring: 0.2.0
+      punycode: 1.4.1
+      qs: 6.11.2
     dev: false
 
   /use@3.1.1:
@@ -23180,7 +23096,7 @@ packages:
       picocolors: 1.0.0
       source-map: 0.6.1
       source-map-support: 0.5.21
-      vite: 3.2.7(sass@1.64.0)(terser@5.17.7)
+      vite: 3.2.7(@types/node@20.2.5)(sass@1.64.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -23988,18 +23904,18 @@ packages:
       webpack: ^4.0.0 || ^5.0.0
     dependencies:
       colorette: 2.0.20
-      memfs: 3.5.2
+      memfs: 3.5.3
       mime-types: 2.1.35
       range-parser: 1.2.1
-      schema-utils: 4.0.1
+      schema-utils: 4.2.0
       webpack: 4.46.0
     dev: false
 
-  /webpack-hot-middleware@2.25.3:
-    resolution: {integrity: sha512-IK/0WAHs7MTu1tzLTjio73LjS3Ov+VvBKQmE8WPlJutgG5zT6Urgq/BbAdRrHTRpyzK0dvAvFh1Qg98akxgZpA==}
+  /webpack-hot-middleware@2.25.4:
+    resolution: {integrity: sha512-IRmTspuHM06aZh98OhBJtqLpeWFM8FXJS5UYpKYxCJzyFoyWj1w6VGFfomZU7OPA55dMLrQK0pRT1eQ3PACr4w==}
     dependencies:
       ansi-html-community: 0.0.8
-      html-entities: 2.3.5
+      html-entities: 2.4.0
       strip-ansi: 6.0.1
     dev: false
 

From 242693ccb28114d1c5cd5b52754e6f2a0fc94726 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Mon, 24 Jul 2023 16:22:52 +0700
Subject: [PATCH 08/18] chore: deepsource

---
 pages/blog/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index a9a6a3d59c..77dbee9713 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -38,10 +38,11 @@
 import { NeoButton } from '@kodadot1/brick'
 
 export default {
+  name: 'BlogList',
   components: {
     NeoButton,
   },
-  async asyncData() {
+  asyncData() {
     const resolve = require.context('~/content/blog/', true, /\.md$/)
     const imports = resolve.keys().map((key) => resolve(key))
 

From 8a517f925b40925fde0532c73ca6e25b1a488c75 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Mon, 24 Jul 2023 16:41:28 +0700
Subject: [PATCH 09/18] style: adjust mobile size

---
 components/blog/BlogPost.vue | 13 +++++++++++++
 pages/blog/index.vue         | 25 +++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/components/blog/BlogPost.vue b/components/blog/BlogPost.vue
index a864bbf8bd..f025a7dcd6 100644
--- a/components/blog/BlogPost.vue
+++ b/components/blog/BlogPost.vue
@@ -55,6 +55,8 @@ useNuxt2Meta({
 </script>
 
 <style lang="scss">
+@import '@/styles/abstracts/variables';
+
 .article {
   margin: 0 auto;
   max-width: 40rem;
@@ -67,6 +69,7 @@ useNuxt2Meta({
 
   h2 {
     font-size: 1.5rem;
+    font-weight: bold;
     margin-bottom: 1rem;
   }
 
@@ -77,5 +80,15 @@ useNuxt2Meta({
   p {
     margin-bottom: 1rem;
   }
+
+  @include touch {
+    h1 {
+      font-size: 1.75rem;
+    }
+
+    h2 {
+      font-size: 1rem;
+    }
+  }
 }
 </style>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index 77dbee9713..a536a8e29d 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -62,6 +62,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '@/styles/abstracts/variables';
+
 .content {
   margin: 0 auto;
   max-width: 60rem;
@@ -83,6 +85,17 @@ export default {
       font-weight: 500;
       margin-bottom: 5rem;
     }
+
+    @include touch {
+      h1 {
+        font-size: 2rem;
+      }
+
+      p {
+        font-size: 1rem;
+        margin-bottom: 2.5rem;
+      }
+    }
   }
 
   &-list {
@@ -108,6 +121,18 @@ export default {
         margin-bottom: 1rem;
       }
     }
+
+    @include touch {
+      flex-direction: column;
+
+      img {
+        width: 100%;
+      }
+
+      .o-btn {
+        margin-top: 1rem;
+      }
+    }
   }
 }
 </style>

From 561903f01d7bcd6cfe8df16e2ea1b51e7d330fa1 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Tue, 25 Jul 2023 18:15:18 +0700
Subject: [PATCH 10/18] style: adjust dark mode

---
 components/blog/BlogPost.vue | 29 ++++++++++++++++++++++++++---
 pages/blog/index.vue         | 23 ++++++++++++++++++-----
 styles/abstracts/_theme.scss |  2 ++
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/components/blog/BlogPost.vue b/components/blog/BlogPost.vue
index f025a7dcd6..e77b2b9242 100644
--- a/components/blog/BlogPost.vue
+++ b/components/blog/BlogPost.vue
@@ -8,7 +8,7 @@
       </div>
     </div>
     <h1>{{ attributes.title }}</h1>
-    <h2 v-if="attributes.subtitle">{{ attributes.subtitle }}</h2>
+    <p v-if="attributes.subtitle" class="subtitle">{{ attributes.subtitle }}</p>
     <img
       v-if="attributes.image"
       :src="attributes.image"
@@ -61,6 +61,11 @@ useNuxt2Meta({
   margin: 0 auto;
   max-width: 40rem;
 
+  .subtitle {
+    font-size: 25px;
+    margin-bottom: 0;
+  }
+
   h1 {
     font-size: 3rem;
     font-weight: 700;
@@ -74,19 +79,37 @@ useNuxt2Meta({
   }
 
   img {
-    margin-bottom: 1rem;
+    border-radius: 1rem;
+    margin: 2.5rem 0;
   }
 
   p {
+    font-size: 20px;
+    line-height: 30px;
     margin-bottom: 1rem;
   }
 
+  @include ktheme() {
+    .markdown-body {
+      color: theme('k-accentlight2-dark');
+    }
+
+    img {
+      border: 1px solid theme('border-color');
+    }
+  }
+
   @include touch {
+    .subtitle {
+      font-size: 1.25rem;
+    }
+
     h1 {
       font-size: 1.75rem;
     }
 
-    h2 {
+    h2,
+    p {
       font-size: 1rem;
     }
   }
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index a536a8e29d..f98e5f097c 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -23,7 +23,6 @@
             no-shadow
             rounded
             tag="a"
-            size="small"
             :href="getPermalink(post)"
             icon="arrow-right-long">
             View Article
@@ -100,9 +99,6 @@ export default {
 
   &-list {
     border-radius: 2.5rem;
-    border: 1px solid #000;
-    background: #fff;
-    box-shadow: 4px 4px 0px 0px #000;
     display: flex;
 
     img {
@@ -116,19 +112,36 @@ export default {
       padding: 1.5rem;
 
       &-title {
-        font-size: 1.25rem;
+        font-size: 31px;
         font-weight: 700;
         margin-bottom: 1rem;
       }
     }
 
+    @include ktheme() {
+      background-color: theme('k-white');
+      border: 1px solid theme('border-color');
+      box-shadow: 4px 4px 0px 0px theme('border-color');
+
+      img {
+        border-right: 1px solid theme('border-color');
+      }
+    }
+
     @include touch {
       flex-direction: column;
 
       img {
+        border-right: none !important;
         width: 100%;
       }
 
+      &-card {
+        &-title {
+          font-size: 1.5rem;
+        }
+      }
+
       .o-btn {
         margin-top: 1rem;
       }
diff --git a/styles/abstracts/_theme.scss b/styles/abstracts/_theme.scss
index 1610c48712..eab3481821 100644
--- a/styles/abstracts/_theme.scss
+++ b/styles/abstracts/_theme.scss
@@ -12,6 +12,7 @@ $themes: (
     'k-accentlight': #ffe5f3,
     'k-accentHover': #ffe5f3,
     'k-accentlight2': #ffe5f3,
+    'k-accentlight2-dark': #363234,
     'k-green': #04af00,
     'k-red': #ff5757,
     'k-orange': #cf9a10,
@@ -50,6 +51,7 @@ $themes: (
     'k-accentlight': #ffe5f3,
     'k-accentHover': #363234,
     'k-accentlight2': #363234,
+    'k-accentlight2-dark': #ccc,
     'k-green': #04af00,
     'k-red': #ff5757,
     'k-orange': #cf9a10,

From 1f3588d46eb09b1d5c37e6cb01d0ac8547538856 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 26 Jul 2023 15:48:20 +0700
Subject: [PATCH 11/18] fix: switch network

---
 components/navbar/NavbarExploreOptions.vue    |  1 +
 components/rmrk/Gallery/Pagination.vue        |  6 ++-
 components/shared/BlockExplorerLink.vue       |  2 +-
 components/shared/CommonTokenMoney.vue        | 31 ++++++++-------
 components/shared/view/BasicImage.vue         |  2 +-
 composables/usePrefix.ts                      |  4 +-
 .../src/components/NeoNftCard/NeoNftCard.vue  |  2 +-
 tests/cypress/e2e/prefix.cy.ts                | 39 +++++++++++++++++++
 8 files changed, 66 insertions(+), 21 deletions(-)
 create mode 100644 tests/cypress/e2e/prefix.cy.ts

diff --git a/components/navbar/NavbarExploreOptions.vue b/components/navbar/NavbarExploreOptions.vue
index 3fc616eeef..efdf3e32a0 100644
--- a/components/navbar/NavbarExploreOptions.vue
+++ b/components/navbar/NavbarExploreOptions.vue
@@ -4,6 +4,7 @@
       <nuxt-link
         :to="`/${urlPrefix}/explore/items`"
         class="menu-item mr-2"
+        data-cy="explore-items"
         @click.native="emit('closeMobileNavbar')">
         {{ $t('items') }}
       </nuxt-link>
diff --git a/components/rmrk/Gallery/Pagination.vue b/components/rmrk/Gallery/Pagination.vue
index 4149bc14d3..a7b62b3b1a 100644
--- a/components/rmrk/Gallery/Pagination.vue
+++ b/components/rmrk/Gallery/Pagination.vue
@@ -36,14 +36,16 @@ const props = withDefaults(
     value: number
     total: number
     perPage?: number
-    simple: boolean
+    simple?: boolean
     replace: boolean
     preserveScroll?: boolean
-    hasMagicBtn: boolean
+    hasMagicBtn?: boolean
     enableListenKeyboardEvent?: boolean
   }>(),
   {
     perPage: 20,
+    hasMagicBtn: false,
+    simple: false,
   }
 )
 const emit = defineEmits(['input'])
diff --git a/components/shared/BlockExplorerLink.vue b/components/shared/BlockExplorerLink.vue
index a159cc4d80..e990c0dd65 100644
--- a/components/shared/BlockExplorerLink.vue
+++ b/components/shared/BlockExplorerLink.vue
@@ -15,7 +15,7 @@ const { urlPrefix } = usePrefix()
 
 const props = withDefaults(
   defineProps<{
-    provider: string
+    provider?: string
     blockId: string
     text: string
   }>(),
diff --git a/components/shared/CommonTokenMoney.vue b/components/shared/CommonTokenMoney.vue
index 295f2ebc1a..678220835a 100644
--- a/components/shared/CommonTokenMoney.vue
+++ b/components/shared/CommonTokenMoney.vue
@@ -15,20 +15,23 @@ import Money from '@/components/shared/format/Money.vue'
 import TokenMoney from '@/components/bsx/format/TokenMoney.vue'
 import { getKusamaAssetId } from '@/utils/api/bsx/query'
 
-withDefaults(
-  defineProps<{
-    value: number | string | undefined
-    customTokenId?: string | undefined
-    dataCy: string
-    round: number
-  }>(),
-  {
-    value: '0',
-    customTokenId: '',
-    dataCy: '',
-    round: 4,
-  }
-)
+defineProps({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  value: {
+    type: [Number, String, BigInt],
+    default: '0',
+  },
+  dataCy: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  round: {
+    type: Number,
+    default: 4,
+  },
+})
 
 const { urlPrefix } = usePrefix()
 const tokenId = computed(() => getKusamaAssetId(urlPrefix.value))
diff --git a/components/shared/view/BasicImage.vue b/components/shared/view/BasicImage.vue
index e198872462..28acf65a08 100644
--- a/components/shared/view/BasicImage.vue
+++ b/components/shared/view/BasicImage.vue
@@ -23,7 +23,7 @@ const { $consola } = useNuxtApp()
 const { placeholder } = useTheme()
 const props = withDefaults(
   defineProps<{
-    src: string
+    src?: string
     alt?: string
     customClass?: string
     rounded?: boolean
diff --git a/composables/usePrefix.ts b/composables/usePrefix.ts
index 5f15ad5a71..1bf3f27d1d 100644
--- a/composables/usePrefix.ts
+++ b/composables/usePrefix.ts
@@ -15,8 +15,8 @@ export default function () {
   const prefix = computed<Prefix>(
     () =>
       (route.params.prefix ||
-        initialPrefixFromPath ||
-        storage.value.selected) as Prefix
+        storage.value.selected ||
+        initialPrefixFromPath) as Prefix
   )
   const urlPrefix = computed<Prefix>(() => {
     storage.value = { selected: prefix.value }
diff --git a/libs/ui/src/components/NeoNftCard/NeoNftCard.vue b/libs/ui/src/components/NeoNftCard/NeoNftCard.vue
index 43192f9e17..cbac615b17 100644
--- a/libs/ui/src/components/NeoNftCard/NeoNftCard.vue
+++ b/libs/ui/src/components/NeoNftCard/NeoNftCard.vue
@@ -24,7 +24,7 @@
           <span
             class="is-ellipsis has-text-weight-bold"
             data-cy="nft-name"
-            :title="name"
+            :title="nft.name"
             >{{ nft.name || '--' }}</span
           >
 
diff --git a/tests/cypress/e2e/prefix.cy.ts b/tests/cypress/e2e/prefix.cy.ts
new file mode 100644
index 0000000000..280402452f
--- /dev/null
+++ b/tests/cypress/e2e/prefix.cy.ts
@@ -0,0 +1,39 @@
+describe('switch network', () => {
+  it('should switch network', () => {
+    cy.visit('/')
+    cy.getCy('explore').realHover().find('[data-cy="explore-items"]').click()
+    cy.getCy('tabs').eq(2).click()
+    cy.getCy('0').click()
+    cy.getCy('chain-select').click()
+    cy.getCy('chain-dropdown-bsx').click()
+    cy.getCy('explore').realHover().find('[data-cy="explore-items"]').click()
+    cy.getCy('chain').should('contain.text', 'bsx')
+
+    cy.getCy('0').click()
+    cy.getCy('chain-select').click()
+    cy.getCy('chain-dropdown-rmrk').click()
+    cy.getCy('explore').realHover().find('[data-cy="explore-items"]').click()
+    cy.getCy('chain').should('contain.text', 'rmrk')
+
+    cy.getCy('0').click()
+    cy.getCy('chain-select').click()
+    cy.getCy('chain-dropdown-stt').click()
+    cy.getCy('explore').realHover().find('[data-cy="explore-items"]').click()
+    cy.getCy('chain').should('contain.text', 'stt')
+
+    cy.getCy('0').click()
+    cy.getCy('chain-select').click()
+    cy.getCy('chain-dropdown-stmn').click()
+    cy.getCy('explore').realHover().find('[data-cy="explore-items"]').click()
+    cy.getCy('chain').should('contain.text', 'stmn')
+
+    cy.getCy('0').click()
+    cy.getCy('chain-select').click()
+    cy.getCy('chain-dropdown-ksm').click()
+    cy.getCy('explore').realHover().find('[data-cy="explore-items"]').click()
+    cy.getCy('chain').should('contain.text', 'rmrk2')
+
+    cy.getCy('0').click()
+    cy.getCy('chain').should('contain.text', 'rmrk2')
+  })
+})

From 1e7af9a931d2b96fb85261dc0b29aee38bb2e4e8 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Wed, 26 Jul 2023 16:37:04 +0700
Subject: [PATCH 12/18] align massmint buttons

---
 components/massmint/Massmint.vue | 166 +++++++++++++++++--------------
 1 file changed, 94 insertions(+), 72 deletions(-)

diff --git a/components/massmint/Massmint.vue b/components/massmint/Massmint.vue
index bc87401b86..74a630b74a 100644
--- a/components/massmint/Massmint.vue
+++ b/components/massmint/Massmint.vue
@@ -1,79 +1,78 @@
 <template>
   <div>
     <Loader v-model="isMinting" :status="mintStatus" :can-cancel="false" />
-    <div class="pt-4">
-      <div>
-        <section class="is-flex pb-8 is-flex-wrap-wrap row-gap">
-          <NeoButton class="mr-8" @click.native="toOnborading">
-            <NeoIcon icon="arrow-left" size="small" class="mr-1" />
-            {{ $t('massmint.backToOnbaording') }}
-          </NeoButton>
-        </section>
-        <hr class="m-0" />
-        <section
-          class="pt-8 is-flex is-flex-direction-column is-align-items-center">
-          <p class="mb-4">{{ $t('massmint.chooseCollection') }}</p>
-          <ChooseCollectionDropdown
-            @selectedCollection="onCollectionSelected" />
-        </section>
-        <section class="border k-shadow mt-7">
-          <UploadMediaZip
-            :disabled="!selectedCollection"
-            @zipLoaded="onMediaZipLoaded" />
-          <UploadDescription
-            :disabled="!mediaLoaded"
-            @fileLoaded="onDescriptionLoaded" />
-          <OverviewTable
-            :disabled="!mediaLoaded"
-            :nfts="NFTS"
-            @openSideBarWith="openSideBarWith"
-            @delete="openDeleteModalWith" />
-        </section>
-      </div>
-      <EditPanel
-        :nft="nftBeingEdited"
-        :open="sideBarOpen"
-        @close="sideBarOpen = false"
-        @save="updateNFT" />
-      <div class="mt-6 is-flex is-justify-content-center w-full">
-        <NeoButton
-          class="is-flex is-flex-grow-1 limit-width"
-          variant="k-accent"
-          size="large"
+    <div>
+      <section class="is-flex controls">
+        <NeoButton class="left" @click.native="toOnborading">
+          <NeoIcon icon="arrow-left" size="small" class="mr-1" />
+          {{ $t('massmint.backToOnbaording') }}
+        </NeoButton>
+        <div class="dropdown-container">
+          <div>
+            <p class="mb-4">{{ $t('massmint.chooseCollection') }}</p>
+            <ChooseCollectionDropdown
+              @selectedCollection="onCollectionSelected" />
+          </div>
+        </div>
+      </section>
+
+      <section class="border k-shadow mt-7">
+        <UploadMediaZip
+          :disabled="!selectedCollection"
+          @zipLoaded="onMediaZipLoaded" />
+        <UploadDescription
           :disabled="!mediaLoaded"
-          @click.native="openReviewModal">
-          <span class="is-size-5"
-            >{{ $t('massmint.mintNFTs') }}
-            <span v-if="numOfValidNFTs" class="has-text-weight-bold">
-              ({{ numOfValidNFTs }})
-            </span>
+          @fileLoaded="onDescriptionLoaded" />
+        <OverviewTable
+          :disabled="!mediaLoaded"
+          :nfts="NFTS"
+          @openSideBarWith="openSideBarWith"
+          @delete="openDeleteModalWith" />
+      </section>
+    </div>
+    <EditPanel
+      :nft="nftBeingEdited"
+      :open="sideBarOpen"
+      @close="sideBarOpen = false"
+      @save="updateNFT" />
+    <div class="mt-6 is-flex is-justify-content-center w-full">
+      <NeoButton
+        class="is-flex is-flex-grow-1 limit-width"
+        variant="k-accent"
+        size="large"
+        :disabled="!mediaLoaded"
+        @click.native="openReviewModal">
+        <span class="is-size-5"
+          >{{ $t('massmint.mintNFTs') }}
+          <span v-if="numOfValidNFTs" class="has-text-weight-bold">
+            ({{ numOfValidNFTs }})
           </span>
-        </NeoButton>
-      </div>
-      <DeleteModal
-        v-if="nftInDeleteModal"
-        v-model="deleteModalOpen"
-        :nft="nftInDeleteModal"
-        @close="closeDeleteModal"
-        @delete="deleteNFT" />
-      <MissingInfoModal
-        v-model="missingInfoModalOpen"
-        :num-missing-names="numberOfMissingNames"
-        :num-missing-descriptions="numberOfMissingDescriptions"
-        :num-missing-prices="numberOfMissingPrices"
-        @close="missingInfoModalOpen = false" />
-      <ReviewModal
-        v-model="overViewModalOpen"
-        :num-missing-descriptions="numberOfMissingDescriptions"
-        :num-missing-prices="numberOfMissingPrices"
-        :num-nfts="Object.keys(NFTS).length"
-        @close="overViewModalOpen = false"
-        @mint="startMint" />
-      <MintingModal
-        v-model="mintModalOpen"
-        :loading="isMinting"
-        @close="mintModalOpen = false" />
+        </span>
+      </NeoButton>
     </div>
+    <DeleteModal
+      v-if="nftInDeleteModal"
+      v-model="deleteModalOpen"
+      :nft="nftInDeleteModal"
+      @close="closeDeleteModal"
+      @delete="deleteNFT" />
+    <MissingInfoModal
+      v-model="missingInfoModalOpen"
+      :num-missing-names="numberOfMissingNames"
+      :num-missing-descriptions="numberOfMissingDescriptions"
+      :num-missing-prices="numberOfMissingPrices"
+      @close="missingInfoModalOpen = false" />
+    <ReviewModal
+      v-model="overViewModalOpen"
+      :num-missing-descriptions="numberOfMissingDescriptions"
+      :num-missing-prices="numberOfMissingPrices"
+      :num-nfts="Object.keys(NFTS).length"
+      @close="overViewModalOpen = false"
+      @mint="startMint" />
+    <MintingModal
+      v-model="mintModalOpen"
+      :loading="isMinting"
+      @close="mintModalOpen = false" />
   </div>
 </template>
 
@@ -246,8 +245,31 @@ const onDescriptionLoaded = (entries: Record<string, Entry>) => {
 }
 </script>
 <style lang="scss" scoped>
-.row-gap {
-  row-gap: 2rem;
+@import '@/styles/abstracts/variables.scss';
+
+.controls {
+  justify-content: center;
+  align-items: flex-end;
+
+  .left {
+    position: absolute;
+    left: 2.5rem;
+  }
+}
+
+@include touch {
+  .controls {
+    flex-direction: column;
+    gap: 2rem;
+    align-items: flex-start;
+
+    .dropdown-container {
+      align-self: center;
+    }
+    .left {
+      position: unset;
+    }
+  }
 }
 
 .limit-width {

From df155b99ccbdf104cf3d9780b46e7e9ebac897f4 Mon Sep 17 00:00:00 2001
From: Matej yangwao <5887929+yangwao@users.noreply.github.com>
Date: Thu, 27 Jul 2023 12:03:08 +0200
Subject: [PATCH 13/18] Update bug_statemine.yml - assets hub

---
 .github/ISSUE_TEMPLATE/bug_statemine.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_statemine.yml b/.github/ISSUE_TEMPLATE/bug_statemine.yml
index 307162a74c..0114f98c1f 100644
--- a/.github/ISSUE_TEMPLATE/bug_statemine.yml
+++ b/.github/ISSUE_TEMPLATE/bug_statemine.yml
@@ -1,5 +1,5 @@
-name: 🐞₷ Bug Report Statemine
-description: Create a report to help us improve KodaDot on Statemine
+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
 title: 'Be descriptive and short'
 labels: ['A-statemine', 'bug', 'p2']
 body:

From 055ce6455ebf96318e1e5f9c66f6e319cb3894cf Mon Sep 17 00:00:00 2001
From: Matej yangwao <5887929+yangwao@users.noreply.github.com>
Date: Thu, 27 Jul 2023 12:04:11 +0200
Subject: [PATCH 14/18] Rename bug_statemine.yml to bug_assetshub.yml

---
 .github/ISSUE_TEMPLATE/{bug_statemine.yml => bug_assetshub.yml} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename .github/ISSUE_TEMPLATE/{bug_statemine.yml => bug_assetshub.yml} (100%)

diff --git a/.github/ISSUE_TEMPLATE/bug_statemine.yml b/.github/ISSUE_TEMPLATE/bug_assetshub.yml
similarity index 100%
rename from .github/ISSUE_TEMPLATE/bug_statemine.yml
rename to .github/ISSUE_TEMPLATE/bug_assetshub.yml

From 3928f53a76823f79827c95002d4302a26dd4a378 Mon Sep 17 00:00:00 2001
From: Viki Val <viktorko99@gmail.com>
Date: Fri, 28 Jul 2023 13:54:46 +0200
Subject: [PATCH 15/18] :wrench: use preffered squid

---
 libs/static/src/indexers.ts | 2 +-
 utils/constants.ts          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/static/src/indexers.ts b/libs/static/src/indexers.ts
index a03ec35b1e..d06b70f8cb 100644
--- a/libs/static/src/indexers.ts
+++ b/libs/static/src/indexers.ts
@@ -11,7 +11,7 @@ export const INDEXERS: Config<SquidEndpoint> = {
   movr: 'https://squid.subsquid.io/antick/v/001-rc0/graphql',
   ksm: 'https://squid.subsquid.io/marck/v/v2/graphql',
   snek: 'https://squid.subsquid.io/snekk/v/004/graphql',
-  stmn: 'https://squid.subsquid.io/stick/v/v4/graphql',
+  stmn: 'https://squid.subsquid.io/stick/graphql',
   dot: 'https://squid.subsquid.io/rubick/graphql', // TODO: change to dot indexer when available
   stt: 'https://squid.subsquid.io/speck/v/v1/graphql',
 }
diff --git a/utils/constants.ts b/utils/constants.ts
index 31de95e8a8..1ad0834d36 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -48,7 +48,7 @@ export const URLS = {
     click: 'https://squid.subsquid.io/click/v/002/graphql',
     antick: 'https://squid.subsquid.io/antick/v/001-rc0/graphql',
     marck: 'https://squid.subsquid.io/marck/graphql',
-    stick: 'https://squid.subsquid.io/stick/v/v4/graphql',
+    stick: 'https://squid.subsquid.io/stick/graphql',
     speck: 'https://squid.subsquid.io/speck/v/v1/graphql',
     replicate: 'https://replicate.kodadot.workers.dev/',
     search: 'https://polysearch.w.kodadot.xyz',

From 31042d2010f350772411501cd484d87fa9e83594 Mon Sep 17 00:00:00 2001
From: Viki Val <viktorko99@gmail.com>
Date: Fri, 28 Jul 2023 14:07:43 +0200
Subject: [PATCH 16/18] Set Stick v3 (#6479)

* :wrench: use preffered squid

* :bookmark: static@0.0.3-rc.5
---
 libs/static/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/static/package.json b/libs/static/package.json
index 7f385d55cb..d86c93e198 100644
--- a/libs/static/package.json
+++ b/libs/static/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kodadot1/static",
-  "version": "0.0.3-rc.4",
+  "version": "0.0.3-rc.5",
   "description": "Static constants in the KodaDot development",
   "repository": "kodadot/nft-gallery",
   "license": "MIT",

From bbcbaf887c7933036a7f4da2e24524885d3efb70 Mon Sep 17 00:00:00 2001
From: Matej yangwao <5887929+yangwao@users.noreply.github.com>
Date: Fri, 28 Jul 2023 14:24:13 +0200
Subject: [PATCH 17/18] production branch is now production-cf

---
 .github/push_release_production.sh | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/push_release_production.sh b/.github/push_release_production.sh
index be26de30e1..4bac3b05ce 100755
--- a/.github/push_release_production.sh
+++ b/.github/push_release_production.sh
@@ -2,4 +2,5 @@
 # experimental 
 # https://github.com/kodadot/nft-gallery/issues/5770 
 
-gh pr list -s merged --json url -B main --jq ".[] | .url" | sed 's/^/- /' $1 | awk 'BEGIN{print "copilot:summary \n"}{ print}' $1 | gh pr create -t "release update" -d -H beta -B production -l release --body-file -
+gh pr list -s merged --json url -B main --jq ".[] | .url" | sed 's/^/- /' $1 | awk 'BEGIN{print "copilot:summary \n"}{ print}' $1 | gh pr create -t "release update" -d -H 
+beta -B production-cf -l release --body-file -

From e0f8cfe9e2f5d54efd1e11a5f8e1a6ac36ba3f1b Mon Sep 17 00:00:00 2001
From: Luke Fishman <daiagi@gmail.com>
Date: Sat, 29 Jul 2023 17:34:51 +0700
Subject: [PATCH 18/18] resource.meta null check (#6485)

---
 components/gallery/useGalleryItem.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/gallery/useGalleryItem.ts b/components/gallery/useGalleryItem.ts
index 3462e86289..3547255ed2 100644
--- a/components/gallery/useGalleryItem.ts
+++ b/components/gallery/useGalleryItem.ts
@@ -98,9 +98,9 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     const resources = nftEntity.resources?.map((resource) => {
       return {
         ...resource,
-        src: sanitizeIpfsUrl(resource.meta.animationUrl || resource.src),
-        thumb: sanitizeIpfsUrl(resource.thumb || resource.meta.image),
-        animation: sanitizeIpfsUrl(resource.meta.animationUrl),
+        src: sanitizeIpfsUrl(resource.meta?.animationUrl || resource.src),
+        thumb: sanitizeIpfsUrl(resource.thumb || resource.meta?.image),
+        animation: sanitizeIpfsUrl(resource.meta?.animationUrl),
       }
     })