kodadot/nft-gallery

View on GitHub
components/collection/drop/MintStepper.vue

Summary

Maintainability
Test Coverage
<template>
  <NeoStepper
    v-if="show"
    v-model="amountToMint"
    data-testid="drop-stepper-container"
    :max="max"
    :min="min"
    class="[&>.neo-input]:h-full [&>.neo-input>input]:h-full md:w-[200px]"
  />
</template>

<script lang="ts" setup>
import { NeoStepper } from '@kodadot1/brick'
import useHolderOfCollection from '@/composables/drop/useHolderOfCollection'
import { hasBatchMint } from '@/composables/transaction/evm/utils'

const { availableNfts } = useHolderOfCollection()
const { amountToMint, drop } = storeToRefs(useDropStore())
const { isEvm } = useIsChain(usePrefix().urlPrefix)

const show = computed(() => isEvm.value ? hasBatchMint(drop.value?.abi || []) : drop.value.type !== 'free')
const isHolder = computed(() => drop.value.type === 'holder')
const availableNftsAmount = computed(() => availableNfts.serialNumbers.length)

const min = computed(() =>
  isHolder.value ? Math.min(1, availableNftsAmount.value) : 1,
)

const max = computed(() => isHolder.value ? availableNftsAmount.value : undefined)

function bindDropsEvents(event: KeyboardEvent) {
  switch (event.key) {
    case '-':
      amountToMint.value--
      break
    case '+':
      amountToMint.value++
      break
  }
}

useKeyboardEvents({ v: bindDropsEvents })
</script>