feat: Add UX improvements and remove mint button when the user has an…

… NFT
Kolektivo-Labs · Jan 22, 2024 · 87b9c77 · 87b9c77
1 parent 374f1e2
commit 87b9c77
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 12 deletions.
diff --git a/src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue b/src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue
@@ -7,13 +7,27 @@ import useWeb3 from '@/services/web3/useWeb3';
 const { startConnectWithInjectedProvider } = useWeb3();
 const { isMobile, bp } = useBreakpoints();
 
-const { NFTData, isLoading, MintNFT, isMintingNFT } = useRFNFT();
+const {
+  NFTData,
+  isLoading,
+  MintNFT,
+  UpgradeNFT,
+  isMintingNFT,
+  isUpgradingNFT,
+} = useRFNFT();
 const { isWalletReady } = useWeb3();
 
 const nftImageSrc = computed(() => NFTData.value?.imageData);
 const hasNFT = computed(
   () => !!NFTData.value?.imageData && isWalletReady.value
 );
+
+const isAbleToUpgradeNFT = computed(() =>
+  NFTData?.value?.points
+    ? NFTData?.value?.points >= levels.value[NFTData?.value?.id - 1].votes &&
+      !isUpgradingNFT.value
+    : false
+);
 const levels = ref([
   { nextLevel: '100', votes: 1 },
   { nextLevel: '250', votes: 10 },
@@ -72,6 +86,15 @@ const levels = ref([
             @click="startConnectWithInjectedProvider"
             >Connect wallet</BalBtn
           >
+          <BalBtn
+            v-else-if="hasNFT"
+            :disabled="!isAbleToUpgradeNFT"
+            :color="!isAbleToUpgradeNFT ? 'gray' : 'gradient-blue-light'"
+            class="self-end w-fit"
+            size="sm"
+            @click="() => UpgradeNFT()"
+            >Upgrade</BalBtn
+          >
           <BalBtn
             v-else
             :color="isMintingNFT ? 'gray' : 'gradient-blue-light'"
@@ -131,6 +154,15 @@ const levels = ref([
             @click="startConnectWithInjectedProvider"
             >Connect wallet</BalBtn
           >
+          <BalBtn
+            v-else-if="hasNFT"
+            :disabled="!isAbleToUpgradeNFT"
+            :color="!isAbleToUpgradeNFT ? 'gray' : 'gradient-blue-light'"
+            class="self-end w-fit"
+            size="sm"
+            @click="() => UpgradeNFT()"
+            >Upgrade</BalBtn
+          >
           <BalBtn
             v-else
             :color="isMintingNFT ? 'gray' : 'gradient-blue-light'"
@@ -195,6 +227,15 @@ const levels = ref([
             @click="startConnectWithInjectedProvider"
             >Connect wallet</BalBtn
           >
+          <BalBtn
+            v-else-if="hasNFT"
+            :disabled="!isAbleToUpgradeNFT"
+            :color="!isAbleToUpgradeNFT ? 'gray' : 'gradient-blue-light'"
+            class="self-end w-fit"
+            size="sm"
+            @click="() => UpgradeNFT()"
+            >Upgrade</BalBtn
+          >
           <BalBtn
             v-else
             :color="isMintingNFT ? 'gray' : 'gradient-blue-light'"

diff --git a/src/components/contextual/pages/dashboard/DashboardTable/ClaimsTable.vue b/src/components/contextual/pages/dashboard/DashboardTable/ClaimsTable.vue
@@ -26,7 +26,8 @@ export type ClaimRow = {
  */
 const { t } = useI18n();
 const { fNum } = useNumbers();
-const { currentAllocation, isLoading, claimReward } = useAllocations();
+const { currentAllocation, isLoading, claimReward, isClaimingReward } =
+  useAllocations();
 watch(currentAllocation, () => {
   console.debug(currentAllocation.value);
 });
@@ -133,7 +134,8 @@ const hasCurrentAllocation = computed(() => {
       </template>
       <template #claimTotalCell>
         <BalBtn
-          :color="selectedRows.length ? 'blue' : 'gray'"
+          :color="selectedRows.length || isClaimingReward ? 'blue' : 'gray'"
+          :disabled="isClaimingReward || !selectedRows.length"
           class="w-fit"
           size="sm"
           @click="handleButtonClick"

diff --git a/src/composables/campaigns/useAllocations.ts b/src/composables/campaigns/useAllocations.ts
@@ -1,9 +1,15 @@
-import { QueryKey, useMutation, useQuery } from '@tanstack/vue-query';
+import { QueryKey, useQuery } from '@tanstack/vue-query';
 import { campaignsService } from '@/services/campaigns/campaigns.service';
 import useWeb3 from '@/services/web3/useWeb3';
+import useNotifications from '../useNotifications';
+import useTransactions from '../useTransactions';
 
 export function useAllocations() {
   const { account, chainId } = useWeb3();
+  const { addNotification } = useNotifications();
+  const { addTransaction } = useTransactions();
+  const isClaimingReward = ref(false);
+
   const queryKey = reactive(['currentAllocation']);
   const queryFn = async () => {
     return await campaignsService.getCurrentAllocation(
@@ -19,12 +25,27 @@ export function useAllocations() {
       enabled: true,
     }
   );
-  const mutationKey = reactive(['claimReward']);
-  const mutationFn = async () => {
-    return await campaignsService.claimAllocantions();
+  const claimReward = async () => {
+    isClaimingReward.value = true;
+    try {
+      const txResponse = await campaignsService.claimAllocantions();
+      addTransaction({
+        id: txResponse.hash,
+        type: 'tx',
+        action: 'claimRewards',
+        summary: 'Regenerative Finance Rewards',
+      });
+    } catch (error) {
+      console.error('Error upgrading NFT:', error);
+      addNotification({
+        title: 'Error',
+        message: 'The reward could not be claimed',
+        type: 'error',
+      });
+    } finally {
+      isClaimingReward.value = false;
+    }
   };
 
-  const { mutate } = useMutation(mutationKey as QueryKey, mutationFn);
-
-  return { currentAllocation, isLoading, claimReward: mutate };
+  return { currentAllocation, isLoading, claimReward, isClaimingReward };
 }
diff --git a/src/composables/campaigns/useRFNFT.ts b/src/composables/campaigns/useRFNFT.ts
@@ -12,6 +12,7 @@ export function useRFNFT() {
   const { addTransaction } = useTransactions();
   const { account, chainId } = useWeb3();
   const isMintingNFT = ref(false);
+  const isUpgradingNFT = ref(false);
 
   const fetchNFTImage = async (ipfsHash: string) => {
     try {
@@ -81,10 +82,33 @@ export function useRFNFT() {
     }
   };
 
+  const UpgradeNFT = async () => {
+    isUpgradingNFT.value = true;
+    try {
+      const txResponse = await campaignsService.upgradeNFT(chainId.value);
+      addTransaction({
+        id: txResponse.hash,
+        type: 'tx',
+        action: 'upgradeNFT',
+        summary: 'Regenerative Finance NFT',
+      });
+    } catch (error) {
+      console.error('Error upgrading NFT:', error);
+      addNotification({
+        title: 'Error',
+        message: 'The NFT could not be upgraded',
+        type: 'error',
+      });
+    } finally {
+      isUpgradingNFT.value = false;
+    }
+  };
   return {
     NFTData: data,
     isLoading,
     MintNFT,
+    UpgradeNFT,
     isMintingNFT,
+    isUpgradingNFT,
   };
 }
diff --git a/src/composables/useTransactions.ts b/src/composables/useTransactions.ts
@@ -57,7 +57,9 @@ export type TransactionAction =
   | 'sync'
   | 'userGaugeCheckpoint'
   | 'claimSubmission'
-  | 'mintNFT';
+  | 'mintNFT'
+  | 'upgradeNFT'
+  | 'claimRewards';
 
 export type TransactionType = 'order' | 'tx';
 

diff --git a/src/locales/default.json b/src/locales/default.json
@@ -1503,7 +1503,9 @@
     "sync": "Sync",
     "userGaugeCheckpoint": "Pool gauge veBAL update",
     "claimSubmission": "Claim submission",
-    "mintNFT": "Mint"
+    "mintNFT": "Mint",
+    "upgradeNFT": "Upgrade",
+    "claimRewards": "Claim rewards"
   },
   "transactionDeadline": "Transaction deadline",
   "transactionDeadlineTooltip": "Your swap will expire and not execute if it is pending for more than the selected duration. Only executed transactions incur fees for swaps between ERC-20 tokens.",

diff --git a/src/services/campaigns/campaigns.service.ts b/src/services/campaigns/campaigns.service.ts
@@ -89,6 +89,22 @@ export default class CampaignsService {
     });
   }
 
+  public async upgradeNFT(chainId: Network) {
+    const provider = getRpcProviderService().getJsonProvider(chainId);
+    const currentUserAddress = await this.walletService.getUserAddress();
+    const currentNFTId = await call(provider, RFNFTAbi, [
+      this.addresses.RFNFT,
+      'ownerTokenId',
+      [currentUserAddress],
+    ]);
+    return await this.walletService.txBuilder.contract.sendTransaction({
+      contractAddress: this.addresses.RFNFT,
+      abi: RFNFTAbi,
+      action: 'levelUp',
+      params: [currentNFTId],
+    });
+  }
+
   public async claimAllocantions() {
     const currentUserAddress = await this.walletService.getUserAddress();
     return this.walletService.txBuilder.contract.sendTransaction({