fix: isNFTMinting ref

Kolektivo-Labs · Jan 16, 2024 · aabc990 · aabc990
1 parent 49d4964
commit aabc990
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue b/src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue
@@ -7,7 +7,7 @@ import useWeb3 from '@/services/web3/useWeb3';
 const { startConnectWithInjectedProvider } = useWeb3();
 const { isMobile, bp } = useBreakpoints();
 
-const { NFTData, isLoading, MintNFT } = useRFNFT();
+const { NFTData, isLoading, MintNFT, isMintingNFT } = useRFNFT();
 const { isWalletReady } = useWeb3();
 
 const nftImageSrc = computed(() => NFTData.value?.imageData || NFTImage);
@@ -67,9 +67,9 @@ const levels = ref([
             >Connect wallet</BalBtn
           >
           <BalBtn
-            v-else-if="!NFTData"
-            :disabled="MintingNFT"
-            color="gradient-blue-light"
+            v-else
+            :color="isMintingNFT ? 'gray' : 'gradient-blue-light'"
+            :disabled="isMintingNFT"
             class="self-end w-fit"
             size="sm"
             @click="() => MintNFT()"
@@ -121,9 +121,9 @@ const levels = ref([
             >Connect wallet</BalBtn
           >
           <BalBtn
-            v-else-if="!NFTData"
-            color="gradient-blue-light"
-            :disabled="MintingNFT"
+            v-else
+            :color="isMintingNFT ? 'gray' : 'gradient-blue-light'"
+            :disabled="isMintingNFT"
             class="self-end w-fit"
             size="sm"
             @click="() => MintNFT()"
@@ -184,8 +184,8 @@ const levels = ref([
           >
           <BalBtn
             v-else
-            color="gradient-blue-light"
-            :disabled="MintingNFT"
+            :color="isMintingNFT ? 'gray' : 'gradient-blue-light'"
+            :disabled="isMintingNFT"
             class="self-end w-fit"
             size="sm"
             @click="() => MintNFT()"

diff --git a/src/composables/campaigns/useRFNFT.ts b/src/composables/campaigns/useRFNFT.ts
@@ -11,6 +11,8 @@ export function useRFNFT() {
   const { addNotification } = useNotifications();
   const { addTransaction } = useTransactions();
   const { account } = useWeb3();
+  const isMintingNFT = ref(false);
+
   const fetchNFTImage = async (ipfsHash: string) => {
     try {
       const imageUrl = `https://${
@@ -55,6 +57,7 @@ export function useRFNFT() {
   });
 
   const MintNFT = async () => {
+    isMintingNFT.value = true;
     try {
       const txResponse = await campaignsService.mintNFT();
       addTransaction({
@@ -70,12 +73,15 @@ export function useRFNFT() {
         message: 'The NFT could not be minted',
         type: 'error',
       });
+    } finally {
+      isMintingNFT.value = false;
     }
   };
 
   return {
     NFTData: data,
     isLoading,
     MintNFT,
+    isMintingNFT,
   };
 }