Refactor DepositRewardCard and TreasuryRewardCard components

src/components/wallet/earn/DepositRewardCard.vue

@@ -89,6 +89,7 @@
             :amount="reward.amountToClaim"
             :rewardOwner="reward.deposit.rewardOwner"
             :canExecuteMultisigTx="canExecuteMultisigTx"
+            @updatePendingDepositClaim="updatePendingDepositClaim"
         />
         <ModalAbortSigning
             ref="modal_abort_signing"
@@ -213,6 +214,7 @@ export default class DepositRewardCard extends Vue {
                     message: this.$t('transfer.multisig.transaction_aborted'),
                     type: 'success',
                 })
+                this.updatePendingDepositClaim(false)
             }
         } catch (err) {
             console.log(err)
@@ -273,13 +275,19 @@ export default class DepositRewardCard extends Vue {
     }
 
     signatureStatus(depositTxID: string): number {
+        const depositId = this.signedDepositID()
+        if (depositId === depositTxID) this.updatePendingDepositClaim(true)
         if (!this.getPendingMultisigTx(depositTxID)?.tx) return -1
         else if (!this.canExecuteMultisigTx(depositTxID)) return 1
         else if (this.canExecuteMultisigTx(depositTxID)) return 2
 
         return -1
     }
 
+    updatePendingDepositClaim(status: boolean) {
+        this.$emit('updatePendingDepositClaim', status)
+    }
+
     canExecuteMultisigTx(depositTxID: string): boolean {
         let signers = 0
         let threshold = this.getPendingMultisigTx(depositTxID)?.tx?.threshold

src/components/wallet/earn/ModalClaimDepositReward.vue

@@ -222,6 +222,7 @@ export default class ModalClaimDepositReward extends Vue {
             this.issueMultisigTx()
             this.updateBalance()
         }
+        this.$emit('updatePendingDepositClaim', false)
     }
 
     async issueMultisigTx() {

src/components/wallet/earn/ModalDepositFunds.vue

@@ -45,6 +45,7 @@
                                         :error="depositOwnerError"
                                         :errorMessage="depositOwnerError"
                                         style="flex: 1"
+                                        :disabled="pendingDepositTX"
                                     />
                                 </div>
                                 <!-- <label style="margin-top: 16px">Deposit Owner</label>

src/components/wallet/earn/TreasuryRewardCard.vue

@@ -80,7 +80,7 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 
 import ModalClaimReward from '@/components/modals/ClaimRewardModal.vue'
 import { cleanAvaxBN } from '@/helpers/helper'
-import { PlatformRewardDeposit } from '@/store/modules/platform/types'
+import { PlatformRewardTreasury } from '@/store/modules/platform/types'
 
 import { bintools } from '@/AVA'
 import Alert from '@/components/Alert.vue'
@@ -92,7 +92,6 @@ import { WalletType } from '@/js/wallets/types'
 import { MultisigTx as SignavaultTx } from '@/store/modules/signavault/types'
 import { BN, Buffer } from '@c4tplatform/caminojs/dist'
 import { ClaimTx, UnsignedTx } from '@c4tplatform/caminojs/dist/apis/platformvm'
-import { DepositOffer } from '@c4tplatform/caminojs/dist/apis/platformvm/interfaces'
 import { ModelMultisigTxOwner } from '@c4tplatform/signavaultjs'
 import ModalAbortSigning from './ModalAbortSigning.vue'
 import ModalClaimDepositReward from './ModalClaimDepositReward.vue'
@@ -116,7 +115,8 @@ export default class TreasuryRewardCard extends Vue {
     helpers = this.globalHelper()
     signedclaimedAmount: BN = new BN(0)
     // signedDepositID: string = ''
-    @Prop() reward!: PlatformRewardDeposit
+    @Prop() reward!: PlatformRewardTreasury
+    @Prop() pendingDepositClaimStatus!: boolean
 
     $refs!: {
         // modal_claim_reward: ModalClaimReward
@@ -239,10 +239,17 @@ export default class TreasuryRewardCard extends Vue {
         return this.pendingSendMultisigTX?.tx?.owners ?? []
     }
 
+    getPendingMultisigTx(): SignavaultTx | undefined {
+        const tx = this.pendingSendMultisigTX
+        if (!tx) return undefined
+
+        return tx
+    }
+
     signatureStatus(): number {
-        if (!this.pendingSendMultisigTX?.tx) return -1
-        else if (!this.canExecuteMultisigTx()) return 1
-        else if (this.canExecuteMultisigTx()) return 2
+        if (!this.getPendingMultisigTx()?.tx && !this.pendingDepositClaimStatus) return -1
+        else if (!this.canExecuteMultisigTx() && !this.pendingDepositClaimStatus) return 1
+        else if (this.canExecuteMultisigTx() && !this.pendingDepositClaimStatus) return 2
 
         return -1
     }

src/components/wallet/earn/UserRewards.vue

@@ -3,14 +3,17 @@
         <TreasuryRewardCard
             v-if="firstTreasuryReward"
             class="reward_card"
+            :key="'reward_TreasuryReward'"
             :reward="firstTreasuryReward"
+            :pendingDepositClaimStatus="pendingDepositClaimStatus"
         />
         <div class="user_offers">
             <DepositRewardCard
                 v-for="(reward, index) in platformRewards.depositRewards"
                 :key="'reward_' + index"
                 :reward="reward"
                 class="reward_card"
+                @updatePendingDepositClaim="updatePendingDepositClaim"
             />
         </div>
     </div>
@@ -31,10 +34,16 @@ import TreasuryRewardCard from './TreasuryRewardCard.vue'
     },
 })
 export default class UserRewards extends Vue {
+    pendingDepositClaimStatus = false
+
     mounted() {
         this.updateExpiredDepositRewards()
     }
 
+    updatePendingDepositClaim(status: boolean) {
+        this.pendingDepositClaimStatus = status
+    }
+
     updateExpiredDepositRewards() {
         const { depositRewards } = this.$store.state.Platform.rewards
         depositRewards.forEach((reward: any) => {