Merge pull request #11188 from hassnian/issue-mm-0001

fix: massmint not checking balance when minting

components/create/Confirm/MintConfirmModal.vue

@@ -55,7 +55,6 @@ import { CreateComponent } from '@/composables/useCreate'
 import { useFiatStore } from '@/stores/fiat'
 import { usePreferencesStore } from '@/stores/preferences'
 import { availablePrefixes } from '@/utils/chain'
-import { getTransitionFee } from '@/utils/transactionExecutor'
 import { calculateBalanceUsdValue } from '@/utils/format/balance'
 import { BASE_FEE } from '@/utils/support'
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
@@ -183,7 +182,7 @@ const confirm = (params) => {
 watchEffect(async () => {
   networkFee.value = 0
 
-  const fee = await getTransitionFee(accountId.value, [''], decimals.value)
+  const fee = await estimateTransactionFee(accountId.value, decimals.value)
   networkFee.value = props.nftInformation.listForSale
     ? Number(fee) * 2
     : Number(fee)

components/create/CreateCollection.vue

@@ -288,7 +288,7 @@ const submitButtonLabel = computed(() => {
     ? $i18n.t('mint.nft.connect')
     : canDeposit.value
       ? $i18n.t('mint.collection.create')
-      : $i18n.t('confirmPurchase.notEnoughFuns')
+      : $i18n.t('confirmPurchase.notEnoughFunds')
 })
 
 const currentChain = computed(() => {

components/massmint/Massmint.vue

@@ -53,12 +53,12 @@
         class="flex flex-grow limit-width"
         variant="primary"
         size="large"
-        :disabled="!mediaLoaded"
+        :disabled="!mediaLoaded || !hasEnoughBalance"
         @click="openReviewModal"
       >
-        <span class="text-xl">{{ $t('massmint.mintNFTs') }}
+        <span class="text-xl">{{ hasEnoughBalance ? $t('massmint.mintNFTs') : $t('confirmPurchase.notEnoughFunds') }}
           <span
-            v-if="numOfValidNFTs"
+            v-if="numOfValidNFTs && !hasEnoughBalance"
             class="font-bold"
           >
             ({{ numOfValidNFTs }})
@@ -130,8 +130,11 @@ const preferencesStore = usePreferencesStore()
 const { $consola, $i18n } = useNuxtApp()
 const router = useRouter()
 const { urlPrefix } = usePrefix()
-const { selectedCollection, preselectedCollectionId, onCollectionSelected }
-  = useCollectionDropdown()
+const { accountId } = useAuth()
+const { selectedCollection, preselectedCollectionId, onCollectionSelected } = useCollectionDropdown()
+const { itemDeposit, metadataDeposit } = useDeposit(urlPrefix)
+const { decimals } = useChain()
+const { transferableCurrentChainBalance } = useMultipleBalance(true)
 
 const NFTS = ref<{ [nftId: string]: NFT }>({})
 const mediaLoaded = ref(false)
@@ -146,9 +149,13 @@ const mintModalOpen = ref(false)
 const MobileDisclaimerModalOpen = ref(false)
 const smallerThenDesktop = computed(() => width.value < 1024)
 
+const transactionFee = ref(0)
 const isMinting = ref(false)
 const mintStatus = ref('')
 
+const neededAmount = computed(() => ((itemDeposit.value + metadataDeposit.value) * Object.keys(NFTS.value).length) + transactionFee.value)
+const hasEnoughBalance = computed(() => (transferableCurrentChainBalance.value ?? 0) >= neededAmount.value)
+
 const numberOfMissingNames = computed(
   () => Object.values(NFTS.value).filter(nft => !nft.name).length,
 )
@@ -275,6 +282,10 @@ const onDescriptionLoaded = (entries: Record<string, Entry>) => {
 onMounted(() => {
   MobileDisclaimerModalOpen.value = smallerThenDesktop.value
 })
+
+watch(urlPrefix, async () => {
+  transactionFee.value = Number(await estimateTransactionFee(accountId.value, decimals.value))
+}, { immediate: true })
 </script>
 
 <style lang="scss" scoped>

composables/useMigrate.ts

@@ -158,7 +158,7 @@ export function useMigrateDeposit(
 
   const chainNetworkFee = computedAsync(async () => {
     if (account) {
-      const fee = await getTransitionFee(account, [''], chainDecimals.value)
+      const fee = await estimateTransactionFee(account, chainDecimals.value)
       return parseDeposit(
         parseInt(fee) * itemCount * itemCount,
         chainDecimals.value,

locales/en.json

@@ -271,7 +271,7 @@
   "confirmPurchase": {
     "action": "Confirm Purchase",
     "connectedWith": "Connected as",
-    "notEnoughFuns": "Not Enough Funds",
+    "notEnoughFunds": "Not Enough Funds",
     "priceForNFTs": "Price for NFT(s)",
     "royalties": "Royalties",
     "youWillPay": "You Will Pay"

locales/hi.json

@@ -199,7 +199,7 @@
   "confirmPurchase": {
     "action": "खरीदी की पुष्टि करें",
     "connectedWith": "के साथ कनेक्ट किया गया है",
-    "notEnoughFuns": "पर्याप्त धन नहीं है",
+    "notEnoughFunds": "पर्याप्त धन नहीं है",
     "priceForNFTs": "NFT(s) के लिए मूल्य",
     "royalties": "Royalty",
     "youWillPay": "आपको भुगतान करना होगा"

utils/transactionExecutor.ts

@@ -187,6 +187,8 @@ export const getActionTransactionFee = ({
   })
 }
 
+export const estimateTransactionFee = (account: string, decimals: number): Promise<string> => getTransitionFee(account, [''], decimals)
+
 export const getTransitionFee = async (
   accountId: string,
   targetAddresses: Array<string>,