From bbd0dca3da006d52bbfcdac9a9798e2266f8b651 Mon Sep 17 00:00:00 2001
From: Ayagoumi <agoumi94@gmail.com>
Date: Fri, 15 Dec 2023 10:17:55 +0100
Subject: [PATCH 1/4] feat: undeposit funds from a deposit

---
 .../wallet/earn/ClaimableRewardCard.vue       |  14 +-
 .../wallet/earn/DepositRewardCard.vue         |  99 ++++----
 src/components/wallet/earn/ModalUndeposit.vue | 213 ++++++++++++++++++
 src/helpers/wallet_helper.ts                  |  65 ++++--
 src/locales/en.json                           |   3 +-
 src/views/CreateMultisigWallet.vue            |  12 +-
 6 files changed, 331 insertions(+), 75 deletions(-)
 create mode 100644 src/components/wallet/earn/ModalUndeposit.vue

diff --git a/src/components/wallet/earn/ClaimableRewardCard.vue b/src/components/wallet/earn/ClaimableRewardCard.vue
index b3a40b60c..80706eec1 100644
--- a/src/components/wallet/earn/ClaimableRewardCard.vue
+++ b/src/components/wallet/earn/ClaimableRewardCard.vue
@@ -6,13 +6,9 @@
             <p class="reward">{{ cleanAvaxBN(reward.amountToClaim) }} {{ nativeAssetSymbol }}</p>
         </div>
         <div class="claim_button_container">
-            <button
-                class="claim_button button_primary"
-                @click="openModal"
-                :disabled="!isClaimDisabled"
-            >
+            <CamBtn variant="primary" @click="openModal" :disabled="!isClaimDisabled">
                 {{ $t('earn.rewards.active_earning.claim') }}
-            </button>
+            </CamBtn>
         </div>
         <ModalClaimReward
             ref="modal_claim_reward"
@@ -23,17 +19,19 @@
 </template>
 <script lang="ts">
 import 'reflect-metadata'
+
+import { BN } from '@c4tplatform/caminojs/dist'
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
+import CamBtn from '@/components/CamBtn.vue'
 import ModalClaimReward from '@/components/modals/ClaimRewardModal.vue'
 import { cleanAvaxBN } from '@/helpers/helper'
 import { PlatformRewardTreasury } from '@/store/modules/platform/types'
 
-import { BN } from '@c4tplatform/caminojs/dist'
-
 @Component({
     components: {
         ModalClaimReward,
+        CamBtn,
     },
 })
 export default class ClaimableRewardCard extends Vue {
diff --git a/src/components/wallet/earn/DepositRewardCard.vue b/src/components/wallet/earn/DepositRewardCard.vue
index 2cc57ee96..7feb20161 100644
--- a/src/components/wallet/earn/DepositRewardCard.vue
+++ b/src/components/wallet/earn/DepositRewardCard.vue
@@ -43,41 +43,32 @@
             </div>
         </div>
         <div v-if="!isMultiSig" class="button_group">
-            <v-btn
-                class="claim_button button_primary"
-                @click="openModal"
-                :disabled="isClaimDisabled"
-            >
+            <CamBtn variant="primary" @click="openUndepositModal" :disabled="isClaimDisabled">
+                {{ $t('earn.rewards.active_earning.undeposit') }}
+            </CamBtn>
+            <CamBtn variant="primary" @click="openModal" :disabled="isClaimDisabled">
                 {{ $t('earn.rewards.active_earning.claim') }}
-            </v-btn>
+            </CamBtn>
         </div>
         <template v-else>
             <div v-if="signatureStatus(reward.deposit.depositTxID) === 2" class="button_group">
-                <v-btn
-                    class="claim_button button_secondary"
-                    @click="openModal"
-                    :disabled="isClaimDisabled"
-                >
+                <CamBtn variant="primary" @click="openModal" :disabled="isClaimDisabled">
                     {{ $t('earn.rewards.active_earning.execute_claim') }}
-                </v-btn>
-                <v-btn class="claim_button button_primary" @click="openAbortModal">
+                </CamBtn>
+                <CamBtn variant="negative" @click="openAbortModal">
                     {{ $t('earn.rewards.active_earning.abort') }}
-                </v-btn>
+                </CamBtn>
             </div>
             <div
                 v-else-if="signatureStatus(reward.deposit.depositTxID) === -1 && disclamer"
                 class="button_group"
             >
-                <v-btn
-                    class="claim_button bordered_button"
-                    @click="openModal"
-                    :disabled="isClaimDisabled"
-                >
+                <CamBtn variant="primary" @click="openModal" :disabled="isClaimDisabled">
                     {{ $t('earn.rewards.active_earning.initiate_transaction') }}
-                </v-btn>
-                <v-btn class="claim_button button_primary" @click="disclamer = false">
+                </CamBtn>
+                <CamBtn variant="transparent" @click="disclamer = false">
                     {{ $t('earn.rewards.active_earning.cancel') }}
-                </v-btn>
+                </CamBtn>
             </div>
             <div
                 v-else-if="
@@ -86,16 +77,16 @@
                 "
                 class="button_group"
             >
-                <v-btn
-                    class="claim_button bordered_button"
+                <CamBtn
+                    variant="primary"
                     @click="signMultisigTx"
                     :disabled="alreadySigned(reward.deposit.depositTxID)"
                 >
                     {{ $t('earn.rewards.active_earning.sign') }}
-                </v-btn>
-                <v-btn class="claim_button button_primary" @click="openAbortModal">
+                </CamBtn>
+                <CamBtn variant="negative" @click="openAbortModal">
                     {{ $t('earn.rewards.active_earning.abort') }}
-                </v-btn>
+                </CamBtn>
             </div>
             <div
                 v-else-if="
@@ -104,8 +95,8 @@
                 "
                 class="button_group"
             >
-                <v-btn
-                    class="claim_button bordered_button"
+                <CamBtn
+                    variant="primary"
                     @click="signMultisigTx"
                     :disabled="alreadySigned(reward.deposit.depositTxID)"
                 >
@@ -115,24 +106,32 @@
                             threshold: threshold,
                         })
                     }}
-                </v-btn>
-                <v-btn class="claim_button button_primary" @click="openAbortModal">
+                </CamBtn>
+                <CamBtn variant="negative" @click="openAbortModal">
                     {{ $t('earn.rewards.active_earning.abort') }}
-                </v-btn>
+                </CamBtn>
             </div>
             <div v-else class="button_group">
-                <v-btn
-                    class="claim_button button_primary"
+                <!-- <CamBtn
+                    variant="primary"
+                    @click="disclamer = true"
+                    :disabled="isClaimDisabled || disallowedClaim(reward.deposit.depositTxID)"
+                >
+                    Undeposit
+                </CamBtn> -->
+                <CamBtn
+                    variant="primary"
                     @click="disclamer = true"
                     :disabled="isClaimDisabled || disallowedClaim(reward.deposit.depositTxID)"
                 >
                     {{ $t('earn.rewards.active_earning.claim') }}
-                </v-btn>
+                </CamBtn>
             </div>
             <div v-if="disclamer && !alreadySigned(reward.deposit.depositTxID)" class="err">
                 {{ $t('earn.rewards.active_earning.are_you_sure') }}
             </div>
         </template>
+        <ModalUndeposit ref="modal_undeposit" />
         <ModalClaimDepositReward
             ref="modal_claim_reward"
             :depositTxID="reward.deposit.depositTxID"
@@ -156,31 +155,36 @@
 </template>
 <script lang="ts">
 import 'reflect-metadata'
-import { Component, Prop, Vue } from 'vue-property-decorator'
 
-import ModalClaimReward from '@/components/modals/ClaimRewardModal.vue'
-import { cleanAvaxBN } from '@/helpers/helper'
-import AvaAsset from '@/js/AvaAsset'
-import { PlatformRewardDeposit } from '@/store/modules/platform/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 { Component, Prop, Vue } from 'vue-property-decorator'
 
 import { bintools } from '@/AVA'
+import CamBtn from '@/components/CamBtn.vue'
+import ModalClaimReward from '@/components/modals/ClaimRewardModal.vue'
 import { ZeroBN } from '@/constants'
+import { cleanAvaxBN } from '@/helpers/helper'
 import { WalletHelper } from '@/helpers/wallet_helper'
+import AvaAsset from '@/js/AvaAsset'
 import { MultisigWallet } from '@/js/wallets/MultisigWallet'
 import { WalletType } from '@/js/wallets/types'
+import { PlatformRewardDeposit } from '@/store/modules/platform/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'
+import ModalUndeposit from './ModalUndeposit.vue'
 
 @Component({
     components: {
         ModalClaimReward,
         ModalClaimDepositReward,
         ModalAbortSigning,
+        ModalUndeposit,
+        CamBtn,
     },
 })
 export default class DepositRewardCard extends Vue {
@@ -188,6 +192,7 @@ export default class DepositRewardCard extends Vue {
     intervalID: any = null
     claimDisabled: boolean = true
     disclamer: boolean = false
+    // @ts-ignore
     helpers = this.globalHelper()
     // signedDepositID: string = ''
     @Prop() reward!: PlatformRewardDeposit
@@ -196,6 +201,7 @@ export default class DepositRewardCard extends Vue {
         // modal_claim_reward: ModalClaimReward
         modal_claim_reward: ModalClaimDepositReward
         modal_abort_signing: ModalAbortSigning
+        modal_undeposit: ModalUndeposit
     }
 
     openAbortModal() {
@@ -452,6 +458,11 @@ export default class DepositRewardCard extends Vue {
         this.disclamer = false
         this.$refs.modal_claim_reward.open()
     }
+
+    openUndepositModal() {
+        this.disclamer = false
+        this.$refs.modal_undeposit.open()
+    }
 }
 </script>
 <style scoped lang="scss">
diff --git a/src/components/wallet/earn/ModalUndeposit.vue b/src/components/wallet/earn/ModalUndeposit.vue
new file mode 100644
index 000000000..13cd7f531
--- /dev/null
+++ b/src/components/wallet/earn/ModalUndeposit.vue
@@ -0,0 +1,213 @@
+<template>
+    <modal ref="modal" title="Claim Reward" @beforeClose="beforeClose">
+        <div class="claim-reward-modal">
+            <div v-if="claimed === 0">
+                <div v-if="canExecuteMultisigTx">
+                    <h3>
+                        {{
+                            $t('earn.rewards.claim_modal.are_you_sure', {
+                                amount: claimableAmount,
+                                symbol: nativeAssetSymbol,
+                            })
+                        }}
+                    </h3>
+                </div>
+                <div v-if="!canExecuteMultisigTx">
+                    <AvaxInput v-model="amt" :max="amount" :initial="amount"></AvaxInput>
+                    <br />
+                    <p class="text-modal">
+                        {{
+                            $t('earn.rewards.claim_modal.note_message', {
+                                fee: feeAmt,
+                                symbol: nativeAssetSymbol,
+                            })
+                        }}
+                    </p>
+                </div>
+                <div class="modal-buttons">
+                    <v-btn depressed class="button_secondary btn-claim" @click="confirmClaim()">
+                        {{ $t('earn.rewards.claim_modal.confirm') }}
+                    </v-btn>
+                    <v-btn depressed class="button_primary" @click="close()">
+                        {{ $t('earn.rewards.claim_modal.cancel') }}
+                    </v-btn>
+                </div>
+            </div>
+            <div class="confirmed-claimed" v-else-if="claimed === 1">
+                <br />
+                <h2>
+                    {{
+                        $t('earn.rewards.claim_modal.confirmation_message', {
+                            amount: confiremedClaimedAmount,
+                            symbol: nativeAssetSymbol,
+                        })
+                    }}
+                </h2>
+                <br />
+            </div>
+            <div class="confirmed-claimed" v-else>
+                <br />
+                <h2>{{ $t('earn.rewards.claim_modal.signature_collected') }}</h2>
+                <br />
+            </div>
+        </div>
+    </modal>
+</template>
+<script lang="ts">
+import 'reflect-metadata'
+
+import { BN } from '@c4tplatform/caminojs'
+import { ONEAVAX } from '@c4tplatform/caminojs/dist/utils'
+import Big from 'big.js'
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+import { ava } from '@/AVA'
+import AvaxInput from '@/components/misc/AvaxInput.vue'
+import { WalletHelper } from '@/helpers/wallet_helper'
+import AvaAsset from '@/js/AvaAsset'
+import { MultisigWallet } from '@/js/wallets/MultisigWallet'
+import { MultisigTx as SignavaultTx } from '@/store/modules/signavault/types'
+
+import Modal from '../../modals/Modal.vue'
+
+@Component({
+    components: {
+        AvaxInput,
+        Modal,
+    },
+})
+export default class ModalUndeposit extends Vue {
+    @Prop({ required: true }) depositTxID!: string
+    @Prop({ required: true }) amount!: BN
+    @Prop() validatorClaim!: boolean
+    @Prop() canExecuteMultisigTx!: boolean
+
+    claimed: number = 0 // 0:false, 1:true, 2:pending
+    confiremedClaimedAmount: string = ''
+    amt: BN = this.amount
+
+    // @ts-ignore
+    helpers = this.globalHelper()
+
+    $refs!: {
+        modal: Modal
+    }
+
+    open() {
+        this.$refs.modal.open()
+    }
+
+    close() {
+        this.$refs.modal.close()
+    }
+
+    beforeClose() {
+        this.confiremedClaimedAmount = ''
+        this.$emit('beforeCloseModal', this.claimed)
+        this.claimed = 0
+    }
+
+    updateBalance(): void {
+        this.$store.dispatch('updateBalances')
+    }
+
+    formattedAmount(val: BN): string {
+        let big = Big(val.toString()).div(Big(ONEAVAX.toString()))
+        return big.toLocaleString()
+    }
+
+    get activeWallet(): MultisigWallet {
+        return this.$store.state.activeWallet
+    }
+
+    get isMultiSig(): boolean {
+        return this.activeWallet.type === 'multisig'
+    }
+
+    get feeAmt(): string {
+        return this.formattedAmount(ava.PChain().getTxFee())
+    }
+
+    get claimableAmount(): string {
+        return this.confiremedClaimedAmount.toLocaleString()
+    }
+
+    get ava_asset(): AvaAsset | null {
+        return this.$store.getters['Assets/AssetAVA']
+    }
+
+    get nativeAssetSymbol(): string {
+        return this.ava_asset?.symbol ?? ''
+    }
+
+    get pendingSendMultisigTX(): SignavaultTx | undefined {
+        return this.$store.getters['Signavault/transactions'].find(
+            (item: any) =>
+                item?.tx?.alias === this.activeWallet.getAllAddressesP()[0] &&
+                WalletHelper.getUnsignedTxType(item?.tx?.unsignedTx) === 'ClaimTx'
+        )
+    }
+
+    async updateRewards() {
+        await this.$store.dispatch('Assets/updateUTXOs')
+        await this.$store.dispatch('History/updateTransactionHistory')
+        await this.$store.dispatch('Platform/updateAllDepositOffers')
+        await this.$store.dispatch('Platform/updateRewards')
+    }
+
+    async confirmClaim() {
+        // @ts-ignore
+        let { dispatchNotification } = this.globalHelper()
+
+        await WalletHelper.buildUnlockDepositTx(this.$store.state.activeWallet, this.amt)
+            .then(async (value) => {
+                // this.updateBalance()
+                // this.$store.dispatch('Platform/updateActiveDepositOffer')
+                this.helpers.dispatchNotification({
+                    message: `Claim Successful (TX: ${value})`,
+                    type: 'success',
+                })
+
+                this.claimed = 1
+            })
+            .catch((err) => {
+                dispatchNotification({
+                    message: this.$t('notifications.something_went_wrong'),
+                    type: 'error',
+                })
+                this.claimed = 0
+                console.log(err)
+            })
+    }
+}
+</script>
+<style scoped lang="scss">
+.claim-reward-modal {
+    padding: 30px 22px;
+    text-align: center;
+    width: 600px;
+    overflow-x: hidden;
+}
+
+.modal-buttons {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    gap: 10px;
+}
+
+.text-modal {
+    color: var(--warning);
+}
+
+@media screen and (max-width: 720px) {
+    .claim-reward-modal {
+        width: 350px;
+    }
+}
+@media screen and (min-width: 720px) and (max-width: 1440px) {
+    .claim-reward-modal {
+        width: 475px;
+    }
+}
+</style>
diff --git a/src/helpers/wallet_helper.ts b/src/helpers/wallet_helper.ts
index 9119cd66c..6e0aac3f3 100644
--- a/src/helpers/wallet_helper.ts
+++ b/src/helpers/wallet_helper.ts
@@ -1,18 +1,7 @@
-import { ava, bintools } from '@/AVA'
-import {
-    buildCreateNftFamilyTx,
-    buildEvmTransferERCNftTx,
-    buildEvmTransferErc20Tx,
-    buildEvmTransferNativeTx,
-    buildMintNftTx,
-} from '@/js/TxHelper'
-import { WalletType } from '@/js/wallets/types'
-import { AmountOutput } from '@c4tplatform/caminojs/dist/apis/avm'
-import { UnsignedTx } from '@c4tplatform/caminojs/dist/apis/platformvm'
-
-import { ITransaction } from '@/components/wallet/transfer/types'
 import { BN, Buffer } from '@c4tplatform/caminojs/dist'
+import { AmountOutput } from '@c4tplatform/caminojs/dist/apis/avm'
 import { UTXO as AVMUTXO } from '@c4tplatform/caminojs/dist/apis/avm/utxos'
+import { UnsignedTx } from '@c4tplatform/caminojs/dist/apis/platformvm'
 import {
     ClaimAmountParams,
     ClaimType,
@@ -20,22 +9,32 @@ import {
     UTXO as PlatformUTXO,
     UTXOSet as PlatformUTXOSet,
 } from '@c4tplatform/caminojs/dist/apis/platformvm'
+import { MultisigAliasParams } from '@c4tplatform/caminojs/dist/apis/platformvm'
+import { OutputOwners, SignatureError } from '@c4tplatform/caminojs/dist/common'
 import { PayloadBase } from '@c4tplatform/caminojs/dist/utils'
+import { ModelDepositOfferSig } from '@c4tplatform/signavaultjs'
 
+import { ava, bintools } from '@/AVA'
 import { ValidatorRaw } from '@/components/misc/ValidatorList/types'
+import { ITransaction } from '@/components/wallet/transfer/types'
 import { ChainIdType, ZeroBN } from '@/constants'
 import { web3 } from '@/evm'
 import { bnToBig } from '@/helpers/helper'
 import { getStakeForAddresses } from '@/helpers/utxo_helper'
-import ERCNftToken from '@/js/ERCNftToken'
 import Erc20Token from '@/js/Erc20Token'
+import ERCNftToken from '@/js/ERCNftToken'
+import {
+    buildCreateNftFamilyTx,
+    buildEvmTransferErc20Tx,
+    buildEvmTransferERCNftTx,
+    buildEvmTransferNativeTx,
+    buildMintNftTx,
+} from '@/js/TxHelper'
 import MnemonicWallet from '@/js/wallets/MnemonicWallet'
 import { MultisigWallet } from '@/js/wallets/MultisigWallet'
 import { SingletonWallet } from '@/js/wallets/SingletonWallet'
+import { WalletType } from '@/js/wallets/types'
 import { GetValidatorsResponse } from '@/store/modules/platform/types'
-import { MultisigAliasParams } from '@c4tplatform/caminojs/dist/apis/platformvm'
-import { OutputOwners, SignatureError } from '@c4tplatform/caminojs/dist/common'
-import { ModelDepositOfferSig } from '@c4tplatform/signavaultjs'
 class WalletHelper {
     static async getStake(wallet: WalletType): Promise<BN> {
         let addrs = wallet.getAllAddressesP()
@@ -634,6 +633,38 @@ class WalletHelper {
         return await ava.PChain().issueTx(tx)
     }
 
+    static async buildUnlockDepositTx(wallet: WalletType, amount: BN) {
+        const pAddressStrings = wallet.getAllAddressesP()
+        const signerAddresses = wallet.getSignerAddresses('P')
+        const changeAddress = wallet.getChangeAddressPlatform()
+
+        const threshold =
+            wallet.type === 'multisig' ? (wallet as MultisigWallet)?.keyData?.owner?.threshold : 1
+
+        const unsignedTx = await ava
+            .PChain()
+            .buildUnlockDepositTx(
+                wallet.platformUtxoset,
+                [pAddressStrings, signerAddresses],
+                [changeAddress],
+                Buffer.alloc(0),
+                ZeroBN,
+                amount,
+                threshold
+            )
+
+        try {
+            const tx = await wallet.signP(unsignedTx)
+            return await ava.PChain().issueTx(tx)
+        } catch (err) {
+            if (err instanceof SignatureError) {
+                return undefined
+            } else {
+                throw err
+            }
+        }
+    }
+
     static async buildAddDepositOfferTx(wallet: WalletType, offer: DepositOffer) {
         const pAddressStrings = wallet.getAllAddressesP()
         const signerAddresses = wallet.getSignerAddresses('P')
diff --git a/src/locales/en.json b/src/locales/en.json
index a202493f2..284f7e8e9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -571,7 +571,8 @@
                 "deposit_start": "Deposit Start",
                 "deposit_end": "Deposit End",
                 "deposit_amount": "Deposit Amount",
-                "deposited_amount": "Deposited Amount"
+                "deposited_amount": "Deposited Amount",
+                "undeposit": "Undeposit"
             },
             "claim_modal": {
                 "are_you_sure": "Are you sure you want to claim {amount} {symbol} rewards?",
diff --git a/src/views/CreateMultisigWallet.vue b/src/views/CreateMultisigWallet.vue
index 72a906e13..dcd527d93 100644
--- a/src/views/CreateMultisigWallet.vue
+++ b/src/views/CreateMultisigWallet.vue
@@ -95,23 +95,25 @@
     </div>
 </template>
 <script lang="ts">
+import { BN } from '@c4tplatform/caminojs'
+import { ONEAVAX } from '@c4tplatform/caminojs/dist/utils'
+import { TranslateResult } from 'vue-i18n'
+import { Component, Vue, Watch } from 'vue-property-decorator'
+
 import { ava } from '@/AVA'
 import Alert from '@/components/Alert.vue'
 import CamBtn from '@/components/CamBtn.vue'
 import CamInput from '@/components/CamInput.vue'
 import CamTooltip from '@/components/misc/CamTooltip.vue'
+import { isValidPChainAddress } from '@/helpers/address_helper'
 import AvaAsset from '@/js/AvaAsset'
 import { AvaNetwork } from '@/js/AvaNetwork'
 import { MultisigWallet } from '@/js/wallets/MultisigWallet'
 import { SingletonWallet } from '@/js/wallets/SingletonWallet'
 import { WalletType } from '@/js/wallets/types'
 import { getMultisigAliasesFromTxId } from '@/utils/multisig'
-import { BN } from '@c4tplatform/caminojs'
-import { ONEAVAX } from '@c4tplatform/caminojs/dist/utils'
-import { Component, Vue, Watch } from 'vue-property-decorator'
+
 import { WalletHelper } from '../helpers/wallet_helper'
-import { TranslateResult } from 'vue-i18n'
-import { isValidPChainAddress } from '@/helpers/address_helper'
 
 const MAX_ADDRESS_COUNT = 128
 const UPDATE_ALIAS_TIMEOUT = 3000

From fef7754b9071552cd7a51772b33adae39379a5ab Mon Sep 17 00:00:00 2001
From: Ayagoumi <agoumi94@gmail.com>
Date: Fri, 15 Dec 2023 10:18:18 +0100
Subject: [PATCH 2/4] feat: simple-import-sort plugin and update dependencies

---
 .eslintrc.js | 3 +++
 package.json | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 727375fc1..7ae622fa1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,5 +23,8 @@ module.exports = {
         'no-unused-vars': 'off',
         'no-var': 'off',
         'vue/multi-word-component-names': 'off',
+        'simple-import-sort/imports': 'error',
+        'simple-import-sort/exports': 'error',
     },
+    plugins: ['simple-import-sort'],
 }
diff --git a/package.json b/package.json
index 5eb82a75d..fe0c9282f 100644
--- a/package.json
+++ b/package.json
@@ -166,8 +166,8 @@
         "vue-template-compiler": "^2.7.14",
         "vue-virtual-scroll-list": "^2.3.2",
         "vuex": "3.1.2",
-        "web3-eth": "1.3.6",
         "web3": "^1.8.2",
+        "web3-eth": "1.3.6",
         "webpack": "^5.57.1",
         "webpack-cli": "^5.0.0",
         "webpack-dev-server": "^4.3.1",
@@ -176,6 +176,7 @@
     "dependencies": {
         "@c4tplatform/signavaultjs": "^1.1",
         "@cypress/xpath": "^2.0.3",
+        "eslint-plugin-simple-import-sort": "^10.0.0",
         "vue": "^2.6.11",
         "vue-cli-plugin-vuetify": "^2.0.3",
         "vuetify": "^2.6.14",

From b4d87826eb89504624783cd44b71b3d0f0bb06be Mon Sep 17 00:00:00 2001
From: Ayagoumi <agoumi94@gmail.com>
Date: Fri, 15 Dec 2023 14:05:21 +0100
Subject: [PATCH 3/4] fix: display issue in DepositRewardCard and UserRewards
 components

---
 .../wallet/earn/DepositRewardCard.vue         | 19 ++++++++++++++++++-
 src/components/wallet/earn/UserRewards.vue    |  3 ++-
 src/locales/en.json                           |  2 ++
 src/views/wallet/Earn.vue                     |  7 ++++---
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/wallet/earn/DepositRewardCard.vue b/src/components/wallet/earn/DepositRewardCard.vue
index 7feb20161..a86caa5a6 100644
--- a/src/components/wallet/earn/DepositRewardCard.vue
+++ b/src/components/wallet/earn/DepositRewardCard.vue
@@ -27,12 +27,24 @@
                         {{ cleanAvaxBN(reward.deposit.amount) }} {{ nativeAssetSymbol }}
                     </p>
                 </div>
+                <div>
+                    <label>{{ $t('earn.rewards.active_earning.undepositable_amount') }}:</label>
+                    <p class="reward">
+                        {{ cleanAvaxBN(reward?.deposit?.unlockableAmount) }} {{ nativeAssetSymbol }}
+                    </p>
+                </div>
                 <div>
                     <label>{{ $t('earn.rewards.active_earning.pending_reward') }}:</label>
                     <p class="reward">
                         {{ cleanAvaxBN(reward.amountToClaim) }} {{ nativeAssetSymbol }}
                     </p>
                 </div>
+                <div>
+                    <label>{{ $t('earn.rewards.active_earning.already_undeposited') }}:</label>
+                    <p class="reward">
+                        {{ cleanAvaxBN(reward?.deposit?.unlockedAmount) }} {{ nativeAssetSymbol }}
+                    </p>
+                </div>
                 <div>
                     <label>{{ $t('earn.rewards.active_earning.already_claimed') }}:</label>
                     <p class="reward">
@@ -43,7 +55,7 @@
             </div>
         </div>
         <div v-if="!isMultiSig" class="button_group">
-            <CamBtn variant="primary" @click="openUndepositModal" :disabled="isClaimDisabled">
+            <CamBtn variant="primary" @click="openUndepositModal" :disabled="isUndepositDisabled">
                 {{ $t('earn.rewards.active_earning.undeposit') }}
             </CamBtn>
             <CamBtn variant="primary" @click="openModal" :disabled="isClaimDisabled">
@@ -450,6 +462,10 @@ export default class DepositRewardCard extends Vue {
         return this.reward.amountToClaim.isZero()
     }
 
+    get isUndepositDisabled() {
+        return this.reward.deposit.unlockableAmount.isZero()
+    }
+
     cleanAvaxBN(val: BN): string {
         return cleanAvaxBN(val)
     }
@@ -487,6 +503,7 @@ export default class DepositRewardCard extends Vue {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 1.25rem;
+    margin-bottom: 1rem;
     .offer_detail_left {
         border-right: 2px solid var(--bg-wallet-light);
     }
diff --git a/src/components/wallet/earn/UserRewards.vue b/src/components/wallet/earn/UserRewards.vue
index 3454fe3af..edcf94c99 100644
--- a/src/components/wallet/earn/UserRewards.vue
+++ b/src/components/wallet/earn/UserRewards.vue
@@ -20,6 +20,7 @@
 </template>
 <script lang="ts">
 import 'reflect-metadata'
+
 import { Component, Vue } from 'vue-property-decorator'
 
 import ClaimableRewardCard from '@/components/wallet/earn/ClaimableRewardCard.vue'
@@ -77,7 +78,7 @@ label {
     margin-bottom: 3px;
 }
 
-@include mixins.medium-device {
+@include mixins.large-device {
     .user_offers {
         display: grid;
         grid-template-rows: repeat(1, 1fr);
diff --git a/src/locales/en.json b/src/locales/en.json
index 284f7e8e9..fb9e05055 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -572,6 +572,8 @@
                 "deposit_end": "Deposit End",
                 "deposit_amount": "Deposit Amount",
                 "deposited_amount": "Deposited Amount",
+                "undepositable_amount": "Undepositable Amount",
+                "already_undeposited": "Already Undeposited",
                 "undeposit": "Undeposit"
             },
             "claim_modal": {
diff --git a/src/views/wallet/Earn.vue b/src/views/wallet/Earn.vue
index 08ad0b834..1188c330a 100644
--- a/src/views/wallet/Earn.vue
+++ b/src/views/wallet/Earn.vue
@@ -30,13 +30,14 @@
 </template>
 <script lang="ts">
 import 'reflect-metadata'
+
+import { BN } from '@c4tplatform/caminojs/dist'
+import Big from 'big.js'
 import { Component, Vue } from 'vue-property-decorator'
 
 import DepositOffers from '@/components/wallet/earn/DepositOffers.vue'
 import UserRewards from '@/components/wallet/earn/UserRewards.vue'
 import { bnToBig } from '@/helpers/helper'
-import { BN } from '@c4tplatform/caminojs/dist'
-import Big from 'big.js'
 
 @Component({
     name: 'earn',
@@ -49,7 +50,7 @@ export default class Earn extends Vue {
     pageNow: any = null
     subtitle: string = ''
     intervalID: any = null
-    tab: string = 'actine_earning'
+    tab: string = 'earn_now'
     loadingRefreshDepositRewards: boolean = false
 
     transfer() {

From 60b3c80042f9865a4b9cfa891af2028e94747030 Mon Sep 17 00:00:00 2001
From: Ayagoumi <agoumi94@gmail.com>
Date: Tue, 19 Dec 2023 14:29:57 +0100
Subject: [PATCH 4/4] feat: undeposit for multisig wallet

---
 src/components/wallet/earn/DepositRewardCard.vue | 10 +++++-----
 src/components/wallet/earn/ModalUndeposit.vue    | 12 +++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/wallet/earn/DepositRewardCard.vue b/src/components/wallet/earn/DepositRewardCard.vue
index a86caa5a6..66e7b7847 100644
--- a/src/components/wallet/earn/DepositRewardCard.vue
+++ b/src/components/wallet/earn/DepositRewardCard.vue
@@ -124,13 +124,13 @@
                 </CamBtn>
             </div>
             <div v-else class="button_group">
-                <!-- <CamBtn
+                <CamBtn
                     variant="primary"
-                    @click="disclamer = true"
-                    :disabled="isClaimDisabled || disallowedClaim(reward.deposit.depositTxID)"
+                    @click="openUndepositModal"
+                    :disabled="isUndepositDisabled"
                 >
-                    Undeposit
-                </CamBtn> -->
+                    {{ $t('earn.rewards.active_earning.undeposit') }}
+                </CamBtn>
                 <CamBtn
                     variant="primary"
                     @click="disclamer = true"
diff --git a/src/components/wallet/earn/ModalUndeposit.vue b/src/components/wallet/earn/ModalUndeposit.vue
index 13cd7f531..0850e3aab 100644
--- a/src/components/wallet/earn/ModalUndeposit.vue
+++ b/src/components/wallet/earn/ModalUndeposit.vue
@@ -38,7 +38,7 @@
                 <h2>
                     {{
                         $t('earn.rewards.claim_modal.confirmation_message', {
-                            amount: confiremedClaimedAmount,
+                            amount: formattedAmount(amt),
                             symbol: nativeAssetSymbol,
                         })
                     }}
@@ -144,7 +144,7 @@ export default class ModalUndeposit extends Vue {
         return this.$store.getters['Signavault/transactions'].find(
             (item: any) =>
                 item?.tx?.alias === this.activeWallet.getAllAddressesP()[0] &&
-                WalletHelper.getUnsignedTxType(item?.tx?.unsignedTx) === 'ClaimTx'
+                WalletHelper.getUnsignedTxType(item?.tx?.unsignedTx) === 'UnlockDepositTx'
         )
     }
 
@@ -161,10 +161,12 @@ export default class ModalUndeposit extends Vue {
 
         await WalletHelper.buildUnlockDepositTx(this.$store.state.activeWallet, this.amt)
             .then(async (value) => {
-                // this.updateBalance()
-                // this.$store.dispatch('Platform/updateActiveDepositOffer')
+                this.updateBalance()
+                this.$store.dispatch('Platform/updateActiveDepositOffer')
                 this.helpers.dispatchNotification({
-                    message: `Claim Successful (TX: ${value})`,
+                    message: `Undeposit Successful for ${this.formattedAmount(this.amt)} ${
+                        this.nativeAssetSymbol
+                    }`,
                     type: 'success',
                 })