feat: confirmation modal for mint

components/base/SubmitButton.vue

@@ -1,6 +1,7 @@
 <template>
   <NeoField>
     <NeoButton
+      :class="customClass"
       :size="size"
       :type="type"
       :icon-left="icon"
@@ -28,6 +29,7 @@ export interface Props {
   loading?: boolean
   type?: string
   size?: 'small' | 'medium' | 'large'
+  customClass: string
 }
 
 withDefaults(defineProps<Props>(), {

components/bsx/Create/CreateToken.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+    <MintConfirmModal
+      v-model="modalShowStatus"
+      :nft-information="nftInformation"
+      @confirm="submit" />
     <Loader
       v-model="isTransactionLoading"
       :status="transactionStatus"
@@ -62,16 +66,13 @@
         <NeoField key="token">
           <MultiPaymentFeeButton :account-id="accountId" :prefix="urlPrefix" />
         </NeoField>
-        <NeoField
+        <SubmitButton
           key="submit"
-          variant="danger"
-          :message="balanceNotEnoughMessage">
-          <SubmitButton
-            expanded
-            label="mint.submit"
-            :loading="isTransactionLoading"
-            @click="submit()" />
-        </NeoField>
+          expanded
+          custom-class="is-size-6"
+          label="mint.submit"
+          :loading="isTransactionLoading"
+          @click="showConfirm" />
       </template>
     </BaseTokenForm>
   </div>
@@ -95,13 +96,14 @@ import { unwrapSafe } from '@/utils/uniquery'
 import { Royalty } from '@/utils/royalty'
 import { fetchCollectionMetadata } from '@/utils/ipfs'
 import { CollectionMetadata } from '@/components/rmrk/types'
-import { Token, getBalance, getDeposit, getFeesToken } from './utils'
 import { MintedCollection } from '@/composables/transaction/types'
 import { NeoField } from '@kodadot1/brick'
 import type TokenBalanceInputComponent from '@/components/bsx/input/TokenBalanceInput.vue'
 import type BaseTokenFormComponent from '@/components/base/BaseTokenForm.vue'
+import MintConfirmModal from '@/components/create/MintConfirmModal.vue'
+import { CreateComponent } from '@/composables/useCreate'
 
-const { $i18n, $apollo, $consola, $router } = useNuxtApp()
+const { $apollo, $consola, $router } = useNuxtApp()
 
 const CustomAttributeInput = () =>
   import('@/components/rmrk/Create/CustomAttributeInput.vue')
@@ -130,6 +132,7 @@ withDefaults(
 const { apiUrl } = useApi()
 const { urlPrefix, tokenId } = usePrefix()
 const { accountId } = useAuth()
+const { chain } = useDeposit(urlPrefix)
 const {
   status: transactionStatus,
   isLoading: isTransactionLoading,
@@ -158,32 +161,28 @@ const nsfw = ref(false)
 const price = ref('0')
 const listed = ref(false)
 const hasRoyalty = ref(true)
-const feesToken = ref<Token>('BSX')
 const royalty = ref<Royalty>({
   amount: 0.15,
   address: accountId.value,
 })
-const balanceNotEnough = ref(false)
+const modalShowStatus = ref(false)
 
 const balanceInput = ref<typeof TokenBalanceInputComponent | null>(null)
 const baseTokenForm = ref<typeof BaseTokenFormComponent | null>(null)
 
+const nftInformation = computed(() => ({
+  ...base.value,
+  price: price.value.toString(),
+  listForSale: listed.value,
+  paidToken: chain.value,
+  mintType: CreateComponent.NFT,
+}))
+
 watch(price, (value) => {
   price.value = value
   balanceInput.value?.checkValidity()
 })
 
-const balanceOfToken = computed(() => getBalance(feesToken.value))
-const depositOfToken = computed(() =>
-  getDeposit(feesToken.value, parseFloat(deposit.value))
-)
-const balanceNotEnoughMessage = computed(() => {
-  if (balanceNotEnough.value) {
-    return $i18n.t('tooltip.notEnoughBalance')
-  }
-  return ''
-})
-
 const loadCollectionMeta = async () => {
   const metadata = collections.value.map(({ metadata }) => metadata)
 
@@ -251,20 +250,25 @@ const navigateToDetail = (collection: string, id: string): void => {
   setTimeout(go, DETAIL_TIMEOUT)
 }
 
-const submit = async (retryCount = 0): Promise<void> => {
+const showConfirm = () => {
+  if (preCheck()) {
+    modalShowStatus.value = true
+  }
+}
+
+const preCheck = () => {
   if (!base.value.selectedCollection) {
     throw ReferenceError('[MINT] Unable to mint without collection')
   }
   // check fields
   if (!checkValidity()) {
-    return
-  }
-  // check balance
-  if (!!deposit.value && balanceOfToken.value < depositOfToken.value) {
-    balanceNotEnough.value = true
-    return
+    return false
   }
+  return true
+}
 
+const submit = async (retryCount = 0): Promise<void> => {
+  modalShowStatus.value = false
   isTransactionLoading.value = true
   transactionStatus.value = 'loader.ipfs'
   const {
@@ -322,7 +326,6 @@ watch(
   async (value, oldVal) => {
     if (shouldUpdate(value, oldVal)) {
       await fetchCollections()
-      feesToken.value = await getFeesToken()
     }
   },
   { immediate: true }

components/create/ConfirmMintItem.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="is-flex is-justify-content-space-between">
+      <div class="is-flex pr-2">
+        <div>
+          <BasicImage
+            :src="avatar"
+            :alt="nft.name"
+            class="border image is-48x48" />
+        </div>
+        <div
+          class="is-flex is-flex-direction-column is-justify-content-space-between ml-4 limit-width">
+          <div class="has-text-color line-height-1 no-wrap is-clipped ellipsis">
+            {{ nft.name }}
+          </div>
+          <div class="line-height-1 no-wrap has-text-grey is-clipped ellipsis">
+            {{ label }}:
+          </div>
+        </div>
+      </div>
+      <div
+        class="is-flex is-align-items-end no-wrap has-text-grey line-height-1">
+        <template v-if="isNFT">
+          <template v-if="showPrice">
+            <CommonTokenMoney :value="price" />
+          </template>
+          <template v-else> Not Listed </template>
+        </template>
+        <template v-else>
+          {{ blockchain.text }}
+        </template>
+      </div>
+    </div>
+    <div v-if="isNFT" class="is-flex mt-4 is-align-items-center">
+      <div class="has-text-grey mr-2">
+        {{ $t('mint.nft.modal.intoCollection') }}
+      </div>
+      <NeoIcon pack="fa-sharp" icon="arrow-right-long" class="k-grey mr-4" />
+      <div>{{ nft.selectedCollection.name }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicImage from '@/components/shared/view/BasicImage.vue'
+import { ExtendedInformation } from './MintConfirmModal.vue'
+import { NeoIcon } from '@kodadot1/brick'
+import { CreateComponent } from '@/composables/useCreate'
+import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
+
+const { $i18n } = useNuxtApp()
+
+const props = defineProps<{ nft: ExtendedInformation }>()
+const avatar = ref<string>()
+
+const isNFT = computed(() => props.nft.mintType === CreateComponent.NFT)
+const label = computed(() =>
+  isNFT.value
+    ? $i18n.t('mint.nft.modal.price')
+    : $i18n.t('mint.nft.modal.network')
+)
+const price = computed(() => props.nft.price)
+const showPrice = computed(() => props.nft.listForSale)
+const blockchain = computed(() => props.nft.blockchain)
+watch(
+  () => props.nft.file,
+  () => {
+    const file = props.nft.file
+    const reader = new FileReader()
+    avatar.value = URL.createObjectURL(file)
+    reader.readAsText(file)
+  },
+  {
+    immediate: true,
+  }
+)
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.limit-width {
+  max-width: 170px;
+}
+
+.ellipsis {
+  text-overflow: ellipsis;
+}
+
+.line-height-1 {
+  line-height: 1;
+}
+</style>

components/create/CreateCollection.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="is-centered" :class="{ columns: classColumn }">
+    <MintConfirmModal
+      v-model="modalShowStatus"
+      :nft-information="collectionInformation"
+      @confirm="createCollection" />
     <Loader v-model="isLoading" :status="status" />
     <form
       class="is-half"
       :class="{ column: classColumn }"
-      @submit.prevent="createCollection">
+      @submit.prevent="showConfirm">
       <h1 class="title is-size-3">
         {{ $t('mint.collection.create') }}
       </h1>
@@ -123,37 +127,32 @@
       <hr class="my-6" />
 
       <!-- create collection button -->
-      <NeoField>
-        <div>
-          <NeoButton
-            expanded
-            :label="`${canDeposit ? 'Create Collection' : 'Not Enough Funds'}`"
-            type="submit"
-            size="medium"
-            data-testid="collection-create"
-            :loading="isLoading"
-            :disabled="!canDeposit" />
-
-          <div class="p-4 is-flex">
-            <NeoIcon icon="circle-info" size="medium" class="mr-4" />
-            <p class="is-size-7">
-              <span
-                v-dompurify-html="
-                  $t('mint.requiredDeposit', [
-                    `${totalCollectionDeposit} ${chainSymbol}`,
-                  ])
-                " />
-              <a
-                href="https://hello.kodadot.xyz/multi-chain/fees"
-                target="_blank"
-                class="has-text-link"
-                rel="nofollow noopener noreferrer">
-                {{ $t('helper.learnMore') }}
-              </a>
-            </p>
-          </div>
-        </div>
-      </NeoField>
+      <NeoButton
+        class="is-size-6"
+        expanded
+        :label="$t('mint.collection.submit')"
+        type="submit"
+        size="medium"
+        data-testid="collection-create"
+        :loading="isLoading" />
+      <div class="p-4 is-flex">
+        <NeoIcon icon="circle-info" size="medium" class="mr-4" />
+        <p class="is-size-7">
+          <span
+            v-dompurify-html="
+              $t('mint.requiredDeposit', [
+                `${totalCollectionDeposit} ${chainSymbol}`,
+              ])
+            " />
+          <a
+            href="https://hello.kodadot.xyz/multi-chain/fees"
+            target="_blank"
+            class="has-text-link"
+            rel="nofollow noopener noreferrer">
+            {{ $t('helper.learnMore') }}
+          </a>
+        </p>
+      </div>
     </form>
   </div>
 </template>
@@ -180,6 +179,7 @@ import { availablePrefixes } from '@/utils/chain'
 import { Interaction } from '@kodadot1/minimark/v1'
 import { notificationTypes, showNotification } from '@/utils/notification'
 import { makeSymbol } from '@kodadot1/minimark/shared'
+import MintConfirmModal from './MintConfirmModal.vue'
 
 // props
 withDefaults(
@@ -204,6 +204,8 @@ const unlimited = ref(true)
 const max = ref(1)
 const symbol = ref('')
 
+const modalShowStatus = ref(false)
+
 const menus = availablePrefixes().filter(
   (menu) => menu.value !== 'movr' && menu.value !== 'glmr'
 )
@@ -215,16 +217,28 @@ const currentChain = computed(() => {
 })
 
 const { isAssetHub, isBasilisk, isRemark } = useIsChain(currentChain)
-const { balance, totalCollectionDeposit, chainSymbol } =
+const { balance, totalCollectionDeposit, chainSymbol, chain } =
   useDeposit(currentChain)
 
 // balance state
 const canDeposit = computed(() => {
   return parseFloat(balance.value) >= parseFloat(totalCollectionDeposit.value)
 })
 
+const collectionInformation = computed(() => ({
+  file: logo.value,
+  name: name.value,
+  paidToken: chain.value,
+  mintType: CreateComponent.Collection,
+}))
+
 watchEffect(() => setUrlPrefix(currentChain.value as Prefix))
 
+const showConfirm = () => {
+  console.log('show confirm')
+  modalShowStatus.value = true
+}
+
 const createCollection = async () => {
   let collection: BaseCollectionType = {
     file: logo.value,
@@ -255,6 +269,7 @@ const createCollection = async () => {
       notificationTypes.info
     )
     isLoading.value = true
+    modalShowStatus.value = false
 
     await transaction(
       {