From fec428f9cb1a6141b07fca3cb4b21dfa62ded858 Mon Sep 17 00:00:00 2001
From: Achraf Eddaqqaq <51858084+aeddaqqa@users.noreply.github.com>
Date: Mon, 6 Nov 2023 13:58:44 +0100
Subject: [PATCH] Create Deposits fixes (#334)

* refactor create offer single sig

* add multisig logic to create offer form

* change duration from seconds to days
---
 src/components/misc/AvaxInput.vue             |    2 +-
 .../wallet/earn/CreateOfferForm.vue           | 1554 ++++++++---------
 .../wallet/earn/ModalDepositFunds.vue         |    6 +-
 src/locales/en.json                           |   12 +-
 4 files changed, 704 insertions(+), 870 deletions(-)

diff --git a/src/components/misc/AvaxInput.vue b/src/components/misc/AvaxInput.vue
index a3d366437..0a6f80fbe 100644
--- a/src/components/misc/AvaxInput.vue
+++ b/src/components/misc/AvaxInput.vue
@@ -162,7 +162,7 @@ export default class AvaxInput extends Vue {
     .ticker,
     .amt_in,
     .max_but {
-        background-color: var(--bg-light);
+        background-color: transparent;
     }
 }
 
diff --git a/src/components/wallet/earn/CreateOfferForm.vue b/src/components/wallet/earn/CreateOfferForm.vue
index a2aa42680..97f00f4b0 100644
--- a/src/components/wallet/earn/CreateOfferForm.vue
+++ b/src/components/wallet/earn/CreateOfferForm.vue
@@ -1,194 +1,155 @@
 <template>
-    <div>
-        <form class="form__container">
-            <div class="form__container" v-if="!pendingSendMultisigTX">
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.memo').toString() }}
-                    </label>
-                    <CamInput
-                        v-model="offer.memo"
-                        :placeholder="$t('earn.rewards.create.memo')"
-                        :error="nameLengthError"
-                        :errorMessage="$t('earn.rewards.errors.title')"
-                    />
-                </div>
-
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.offer_start') }}
-                    </label>
-                    <DateForm
-                        class="form__container__element__date-picker"
-                        :minDurationMs="minDuration"
-                        :maxDurationMs="maxDuration"
-                        :defaultDurationMs="defaultDuration"
-                        @change_end="setStartDate"
-                    ></DateForm>
-                </div>
-
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.offer_end') }}
-                    </label>
-                    <DateForm
-                        class="form__container__element__date-picker"
-                        :minDurationMs="minDuration"
-                        :maxDurationMs="maxDuration"
-                        :defaultDurationMs="maxDuration"
-                        @change_end="setEndDate"
-                    ></DateForm>
-                </div>
-
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.min_amount') }}
-                    </label>
-                    <AvaxInput
-                        v-model="offer.minAmount"
-                        :initial="offer.minAmount"
-                        :max="maxDepositAmount"
-                        :camInput="true"
-                        :error="minAmountError"
-                        :errorMessage="
-                            $t('earn.rewards.errors.min_amount', {
-                                minAmount: 0.001,
-                                symbol: nativeAssetSymbol,
-                            })
-                        "
-                    ></AvaxInput>
-                </div>
-
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.total_max_amount') }}
-                    </label>
-                    <AvaxInput
-                        v-model="offer.totalMaxAmount"
-                        :initial="offer.totalMaxAmount"
-                        :max="maxDepositAmount"
-                        :camInput="true"
-                    ></AvaxInput>
-                </div>
-
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.min_duration') }}
-                    </label>
-                    <CamInput
-                        class="form__container__element__input"
-                        :placeholder="`minDuration`"
-                        v-model="offer.minDuration"
-                        :error="minDurationError"
-                        :errorMessage="`Min duration must be greater than 0`"
-                    />
-                </div>
-
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.max_duration') }}
-                    </label>
-                    <CamInput
-                        class="form__container__element__input"
-                        :placeholder="`maxDuration`"
-                        v-model="offer.maxDuration"
-                        :error="maxDurationError"
-                        :errorMessage="`Max duration must be greater than min duration`"
-                    />
-                </div>
-
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.unlock_duration') }}
-                    </label>
-                    <CamInput
-                        v-model="offer.unlockPeriodDuration"
-                        :placeholder="`unlockPeriodDuration`"
-                        :error="unlockDurationError"
-                        :errorMessage="`Unlock duration must be greater than 0`"
-                    />
-                </div>
-
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.interrest_rate') }}
-                    </label>
-                    <CamInput
-                        v-model="interestRateNominator"
-                        v-on:input="setInterestRate"
-                        :placeholder="`interestRateNominator`"
-                        :error="interestRateAndTotalMaxRewardAmountError"
-                        :errorMessage="`Interest rate must be 0 if total max reward amount is 0, and vice versa`"
-                    />
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.no_rewards_duration') }}
-                    </label>
-                    <CamInput
-                        v-model="offer.noRewardsPeriodDuration"
-                        :placeholder="`noRewardsPeriodDuration`"
-                        :error="noRewardsPeriodDurationError"
-                        :errorMessage="`No rewards duration must be greater or equal to 0`"
-                    />
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.total_max_reward_amount') }}
-                    </label>
-                    <CamInput
-                        v-model="totalMaxRewardAmount"
-                        v-on:input="setTotalMaxRewardAmount"
-                        :placeholder="`totalMaxRewardAmount`"
-                        :readonly="sunrisePhase === 0"
-                        :error="interestRateAndTotalMaxRewardAmountError"
-                        :errorMessage="`Interest rate must be 0 if total max reward amount is 0, and vice versa`"
-                    ></CamInput>
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.flags') }}
-                    </label>
-                    <input
-                        class="form__container__element__input"
-                        type="number"
-                        :value="offer.flags.toString(10)"
-                        v-on:input="setFlags"
-                        min="0"
-                        inputmode="numeric"
-                    />
-                </div>
-
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.owner_address') }}
-                    </label>
-                    <CamInput
-                        class="form__container__element__input"
-                        :placeholder="`ownerAddress`"
-                        v-model.number="offer.ownerAddress"
-                        :disabled="sunrisePhase === 0"
-                        :error="ownerAddressCheck()"
-                        :errorMessage="ownerAddressCheck()"
-                    />
-                    <!-- <input
-                        class="form__container__element__input"
-                        type="text"
-                        v-model="offer.ownerAddress"
-                        :disabled="sunrisePhase === 0"
-                    /> -->
-                </div>
-
-                <div v-if="!isMultisigWallet" class="form__container__element">
-                    <label class="form__container__element__label" style="margin-bottom: 8px">
-                        Addresses allowed to deposit
-                    </label>
-                    <div
-                        v-for="(address, index) in addresses"
-                        :key="index"
-                        class="form__container__element__addresses"
-                    >
-                        <div class="addresses_container">
+    <div class="create-offer__container">
+        <div v-if="!pendingCreateOfferMultisigTX" class="create-offer__container__form">
+            <div class="create-offer__container__form__element full-width">
+                <label>{{ $t('earn.rewards.create.memo').toString() }}</label>
+                <cam-input
+                    class="input"
+                    v-model="offer.memo"
+                    :placeholder="$t('earn.rewards.create.memo')"
+                    :error="nameLengthError"
+                    :errorMessage="$t('earn.rewards.errors.title')"
+                />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>{{ $t('earn.rewards.create.offer_start') }}</label>
+                <DateForm
+                    class="input"
+                    :minDurationMs="minDuration"
+                    :maxDurationMs="maxDuration"
+                    :defaultDurationMs="defaultDuration"
+                    @change_end="setStartDate"
+                ></DateForm>
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>{{ $t('earn.rewards.create.offer_end') }}</label>
+                <DateForm
+                    class="input"
+                    :minDurationMs="minDuration"
+                    :maxDurationMs="maxDuration"
+                    :defaultDurationMs="maxDuration"
+                    @change_end="setEndDate"
+                ></DateForm>
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>{{ $t('earn.rewards.create.min_amount') }}</label>
+                <AvaxInput
+                    class="input"
+                    v-model="offer.minAmount"
+                    :initial="offer.minAmount"
+                    :max="maxDepositAmount"
+                    :camInput="true"
+                    :error="minAmountError"
+                    :errorMessage="
+                        $t('earn.rewards.errors.min_amount', {
+                            minAmount: 0.001,
+                            symbol: nativeAssetSymbol,
+                        })
+                    "
+                />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.total_max_amount') }}
+                </label>
+                <AvaxInput
+                    class="input"
+                    v-model="offer.totalMaxAmount"
+                    :initial="offer.totalMaxAmount"
+                    :max="maxDepositAmount"
+                    :camInput="true"
+                ></AvaxInput>
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.min_duration') }}
+                </label>
+                <CamInput class="input" :placeholder="`minDuration`" v-model="offer.minDuration" />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.max_duration') }}
+                </label>
+                <CamInput class="input" :placeholder="`maxDuration`" v-model="offer.maxDuration" />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.unlock_duration') }}
+                </label>
+                <CamInput
+                    class="input"
+                    v-model="offer.unlockPeriodDuration"
+                    :placeholder="`unlockPeriodDuration`"
+                />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.no_rewards_duration') }}
+                </label>
+                <CamInput
+                    class="input"
+                    v-model="offer.noRewardsPeriodDuration"
+                    :placeholder="`noRewardsPeriodDuration`"
+                />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.interrest_rate') }}
+                </label>
+                <CamInput
+                    class="input"
+                    v-model="interestRateNominator"
+                    v-on:input="setInterestRate"
+                    :placeholder="`interestRateNominator`"
+                    :error="interestRateAndTotalMaxRewardAmountError"
+                    :errorMessage="`Interest rate must be 0 if total max reward amount is 0, and vice versa`"
+                />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.total_max_reward_amount') }}
+                </label>
+                <CamInput
+                    class="input"
+                    v-model="totalMaxRewardAmount"
+                    v-on:input="setTotalMaxRewardAmount"
+                    :placeholder="`totalMaxRewardAmount`"
+                    :readonly="sunrisePhase === 0"
+                    :error="interestRateAndTotalMaxRewardAmountError"
+                    :errorMessage="`Interest rate must be 0 if total max reward amount is 0, and vice versa`"
+                ></CamInput>
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.flags') }}
+                </label>
+                <input
+                    class="input"
+                    type="number"
+                    :value="offer.flags.toString(10)"
+                    v-on:input="setFlags"
+                    min="0"
+                    inputmode="numeric"
+                />
+            </div>
+            <div v-if="!isMultisigWallet" class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.owner_address') }}
+                </label>
+                <CamInput
+                    class="input"
+                    :placeholder="`ownerAddress`"
+                    v-model.number="offer.ownerAddress"
+                    :disabled="sunrisePhase === 0"
+                    :error="ownerAddressCheck"
+                    :errorMessage="ownerAddressCheck"
+                />
+            </div>
+            <div v-if="!isMultisigWallet" class="create-offer__container__form__element full-width">
+                <label>Addresses allowed to deposit</label>
+                <div class="addresses_container input">
+                    <div v-for="(address, index) in addresses" :key="index">
+                        <div class="address_container">
                             <button @click="removeAddress(index)" class="circle delete-button">
                                 <CamTooltip
                                     :content="$t('edit_multisig.label.remove_owner')"
@@ -197,282 +158,245 @@
                                     <fa icon="minus"></fa>
                                 </CamTooltip>
                             </button>
-                            <!-- <div class="circle number">{{ index + 1 }}</div> -->
                             <CamInput
-                                class="form__container__element__input"
+                                class="input"
                                 v-model="address.address"
+                                :disabled="
+                                    !offer.ownerAddress || ownerAddressCheck === 'Invalid address'
+                                "
                             />
                         </div>
                     </div>
-                    <Alert style="margin-top: 16px" variant="negative" v-if="validAddressError">
-                        {{ $t('edit_multisig.errors.invalid_addresses') }}
-                    </Alert>
-                    <div class="form__container__element__new-addresses">
-                        <button @click.prevent="addAddress" class="circle plus-button">
-                            <fa icon="plus"></fa>
-                        </button>
-                    </div>
                 </div>
+                <button @click.prevent="addAddress" class="circle plus-button">
+                    <fa icon="plus"></fa>
+                </button>
             </div>
-            <div class="form__container" v-else-if="pendingOffer">
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.memo').toString() }}
-                    </label>
-                    <input
-                        class="form__container__element__input"
-                        placeholder="Memo"
-                        v-model="pendingOffer.memo"
-                        :disabled="true"
-                    />
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.offer_start') }}
-                    </label>
-                    <DateForm
-                        class="form__container__element__date-picker"
-                        :minDurationMs="minDuration"
-                        :maxDurationMs="maxDuration"
-                        :defaultDurationMs="defaultDuration"
-                        @change_end="setStartDate"
-                        :pendingTxDate="pendingOffer.start"
-                    ></DateForm>
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.offer_end') }}
-                    </label>
-                    <DateForm
-                        class="form__container__element__date-picker"
-                        :minDurationMs="minDuration"
-                        :maxDurationMs="maxDuration"
-                        :defaultDurationMs="maxDuration"
-                        @change_end="setEndDate"
-                        :pendingTxDate="pendingOffer.end"
-                    ></DateForm>
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.min_amount') }}
-                    </label>
-                    <AvaxInput
-                        v-model="pendingOffer.minAmount"
-                        :initial="pendingOffer.minAmount"
-                        :readonly="true"
-                        :camInput="true"
-                    ></AvaxInput>
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.total_max_amount') }}
-                    </label>
-                    <AvaxInput
-                        v-model="pendingOffer.totalMaxAmount"
-                        :initial="pendingOffer.totalMaxAmount"
-                        :readonly="true"
-                        :camInput="true"
-                    ></AvaxInput>
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.min_duration') }}
-                    </label>
-                    <input
-                        :disabled="true"
-                        class="form__container__element__input"
-                        type="number"
-                        v-model="pendingOffer.minDuration"
-                        inputmode="numeric"
-                    />
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.max_duration') }}
-                    </label>
-                    <input
-                        :disabled="true"
-                        class="form__container__element__input"
-                        type="number"
-                        v-model="pendingOffer.maxDuration"
-                        inputmode="numeric"
-                    />
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.unlock_duration') }}
-                    </label>
-                    <input
-                        :disabled="true"
-                        class="form__container__element__input"
-                        type="number"
-                        v-model="pendingOffer.unlockPeriodDuration"
-                        inputmode="numeric"
-                    />
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.interrest_rate') }}
-                    </label>
-                    <input
-                        class="form__container__element__input"
-                        type="number"
-                        :value="pendingOffer.interestRateNominator"
-                        v-on:input="setInterestRate"
-                        min="0"
-                        inputmode="numeric"
-                        :disabled="true"
-                    />
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.no_rewards_duration') }}
-                    </label>
-                    <input
-                        :disabled="true"
-                        class="form__container__element__input"
-                        type="number"
-                        v-model="pendingOffer.noRewardsPeriodDuration"
-                        inputmode="numeric"
-                    />
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.total_max_reward_amount') }}
-                    </label>
-                    <AvaxInput
-                        v-model="pendingOffer.totalMaxRewardAmount"
-                        :initial="pendingOffer.totalMaxRewardAmount"
-                        :readonly="true"
-                        :camInput="true"
-                    ></AvaxInput>
-                </div>
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.flags') }}
-                    </label>
-                    <input
-                        :disabled="true"
-                        class="form__container__element__input"
-                        type="number"
-                        :value="pendingOffer.flags"
-                        v-on:input="setFlags"
-                        min="0"
-                        inputmode="numeric"
-                    />
-                </div>
-
-                <div class="form__container__element">
-                    <label class="form__container__element__label">
-                        {{ $t('earn.rewards.create.owner_address') }}
-                    </label>
-                    <input
-                        class="form__container__element__input"
-                        type="text"
-                        v-model="pendingOffer.ownerAddress"
-                        :disabled="true"
-                    />
-                </div>
-
-                <div v-if="!isMultisigWallet" class="form__container__element">
-                    <label class="form__container__element__label">
-                        Addresses allowed to deposit
-                    </label>
-                    <div
-                        v-for="(address, index) in addresses"
-                        :key="index"
-                        class="form__container__element__addresses"
-                    >
-                        <!-- <div class="circle number">{{ index + 1 }}</div> -->
-                        <input
-                            :disabled="true"
-                            class="form__container__element__input"
-                            v-model="address.address"
-                        />
-                    </div>
-                </div>
+        </div>
+        <div v-else class="create-offer__container__form">
+            <div class="create-offer__container__form__element full-width">
+                <label>{{ $t('earn.rewards.create.memo').toString() }}</label>
+                <cam-input
+                    class="input"
+                    v-model="pendingOffer.memo"
+                    :placeholder="$t('earn.rewards.create.memo')"
+                    :disabled="true"
+                />
             </div>
-            <div class="form__container__actions">
-                <div class="actions__container">
-                    <Alert v-if="hasExclusiveTotalMaxAmountOrReward" variant="negative">
-                        can only use either TotalMaxAmount or TotalMaxRewardAmount
-                    </Alert>
-                    <Alert v-if="isMinDurationLessThanNoRewardsPeriod" variant="negative">
-                        deposit offer minimum duration ({{ offer.minDuration }}) is less than
-                        no-rewards period duration ({{ offer.noRewardsPeriodDuration }})
-                    </Alert>
-                </div>
-                <template v-if="!pendingSendMultisigTX">
-                    <div class="actions__container">
-                        <Alert variant="warning">
-                            Creating this depositOffer will incurr a fee of
-                            {{ feeAmt }} {{ nativeAssetSymbol }}
-                        </Alert>
-                        <!-- <div class="actions__container__buttons">
-                            <button
-                                v-if="$listeners['selectOffer']"
-                                :class="[
-                                    'camino__primary--button',
-                                    { 'camino--button--disabled': !formValid },
-                                ]"
-                                @click.prevent="submitCreateOffer"
-                                :disabled="!formValid"
-                            >
-                                {{ $t('earn.rewards.create.submit') }}
+            <div class="create-offer__container__form__element">
+                <label>{{ $t('earn.rewards.create.offer_start') }}</label>
+                <DateForm
+                    class="input"
+                    :minDurationMs="minDuration"
+                    :maxDurationMs="maxDuration"
+                    :defaultDurationMs="defaultDuration"
+                    @change_end="setStartDate"
+                    :pendingTxDate="pendingOffer.start"
+                ></DateForm>
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>{{ $t('earn.rewards.create.offer_end') }}</label>
+                <DateForm
+                    class="input"
+                    :minDurationMs="minDuration"
+                    :maxDurationMs="maxDuration"
+                    :defaultDurationMs="maxDuration"
+                    @change_end="setEndDate"
+                    :pendingTxDate="pendingOffer.end"
+                ></DateForm>
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>{{ $t('earn.rewards.create.min_amount') }}</label>
+                <CamInput
+                    class="input"
+                    v-model="pendingOffer.minAmount"
+                    :disabled="true"
+                ></CamInput>
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.total_max_amount') }}
+                </label>
+                <CamInput
+                    class="input"
+                    v-model="pendingOffer.totalMaxAmount"
+                    :disabled="true"
+                ></CamInput>
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.min_duration') }}
+                </label>
+                <CamInput
+                    class="input"
+                    :placeholder="`minDuration`"
+                    :disabled="true"
+                    v-model="pendingOffer.minDuration"
+                />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.max_duration') }}
+                </label>
+                <CamInput
+                    class="input"
+                    :placeholder="`maxDuration`"
+                    v-model="pendingOffer.maxDuration"
+                    :disabled="true"
+                />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.unlock_duration') }}
+                </label>
+                <CamInput
+                    class="input"
+                    v-model="pendingOffer.unlockPeriodDuration"
+                    :placeholder="`unlockPeriodDuration`"
+                    :disabled="true"
+                />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.no_rewards_duration') }}
+                </label>
+                <CamInput
+                    class="input"
+                    v-model="pendingOffer.noRewardsPeriodDuration"
+                    :placeholder="`noRewardsPeriodDuration`"
+                    :disabled="true"
+                />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.interrest_rate') }}
+                </label>
+                <CamInput
+                    class="input"
+                    v-model="pendingOffer.interestRateNominator"
+                    :placeholder="`interestRateNominator`"
+                    :disabled="true"
+                />
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.total_max_reward_amount') }}
+                </label>
+                <CamInput
+                    class="input"
+                    v-model="pendingOffer.totalMaxRewardAmount"
+                    :placeholder="`totalMaxRewardAmount`"
+                    :disabled="true"
+                ></CamInput>
+            </div>
+            <div class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.flags') }}
+                </label>
+                <input class="input" :value="pendingOffer.flags" :disabled="true" />
+            </div>
+            <div v-if="!isMultisigWallet" class="create-offer__container__form__element">
+                <label>
+                    {{ $t('earn.rewards.create.owner_address') }}
+                </label>
+                <CamInput
+                    class="input"
+                    :placeholder="`ownerAddress`"
+                    v-model.number="offer.ownerAddress"
+                    :disabled="sunrisePhase === 0"
+                    :error="ownerAddressCheck"
+                    :errorMessage="ownerAddressCheck"
+                />
+            </div>
+            <div v-if="!isMultisigWallet" class="create-offer__container__form__element full-width">
+                <label>Addresses allowed to deposit</label>
+                <div class="addresses_container input">
+                    <div v-for="(address, index) in addresses" :key="index">
+                        <div class="address_container">
+                            <button @click="removeAddress(index)" class="circle delete-button">
+                                <CamTooltip
+                                    :content="$t('edit_multisig.label.remove_owner')"
+                                    placement="left"
+                                >
+                                    <fa icon="minus"></fa>
+                                </CamTooltip>
                             </button>
-                        </div> -->
-                        <div class="actions__container__buttons">
-                            <CamBtn
-                                v-if="$listeners['selectOffer']"
-                                variant="primary"
-                                @click.prevent="submitCreateOffer"
-                                :disabled="!formValid"
-                            >
-                                {{ $t('earn.rewards.create.submit') }}
-                            </CamBtn>
+                            <CamInput
+                                class="input"
+                                v-model="address.address"
+                                :disabled="
+                                    !offer.ownerAddress || ownerAddressCheck === 'Invalid address'
+                                "
+                            />
                         </div>
                     </div>
+                </div>
+                <button @click.prevent="addAddress" class="circle plus-button">
+                    <fa icon="plus"></fa>
+                </button>
+            </div>
+        </div>
+        <div class="create-offer__container__actions">
+            <div class="create-offer__container__actions__aletrs">
+                <Alert style="margin-top: 16px" variant="negative" v-if="validAddressError">
+                    {{ $t('edit_multisig.errors.invalid_addresses') }}
+                </Alert>
+                <Alert v-if="hasExclusiveTotalMaxAmountOrReward" variant="negative">
+                    can only use either TotalMaxAmount or TotalMaxRewardAmount
+                </Alert>
+                <Alert v-if="isMinDurationLessThanNoRewardsPeriod" variant="negative">
+                    deposit offer minimum duration ({{ offer.minDuration }}) is less than no-rewards
+                    period duration ({{ offer.noRewardsPeriodDuration }})
+                </Alert>
+                <Alert v-if="isMinDurationLessThanUnlockPeriod" variant="negative">
+                    deposit offer minimum duration ({{ offer.minDuration }}) is less than unlock
+                    period duration ({{ offer.unlockPeriodDuration }})
+                </Alert>
+                <Alert v-if="isMaxDirationLessThanMinDuration" variant="negative">
+                    deposit offer max duration ({{ offer.maxDuration }}) is less than minimum
+                    duration ({{ offer.minDuration }})
+                </Alert>
+                <Alert v-if="isMinDurationEqualtoZero" variant="negative">
+                    deposit offer has zero minimum duration
+                </Alert>
+                <Alert v-if="isStartDateGreaterThanEndDate" variant="negative">
+                    deposit offer start date is greater than end date
+                </Alert>
+                <Alert variant="warning">
+                    Creating this depositOffer will incurr a fee of
+                    {{ feeAmt }} {{ nativeAssetSymbol }}
+                </Alert>
+            </div>
+            <div class="create-offer__container__actions__buttons">
+                <template v-if="!pendingCreateOfferMultisigTX">
+                    <CamBtn
+                        v-if="$listeners['selectOffer']"
+                        variant="primary"
+                        @click.prevent="submitCreateOffer"
+                        :disabled="!formValid"
+                    >
+                        {{ $t('earn.rewards.create.submit') }}
+                    </CamBtn>
                 </template>
                 <template v-else>
-                    <div class="actions__container">
-                        <Alert v-if="pendingSendMultisigTX" variant="info" style="margin-top: 16px">
-                            {{
-                                $t('earn.validate.pending_multisig.threshold', {
-                                    value: sigValue,
-                                    threshold: pendingSendMultisigTX?.tx.threshold,
-                                })
-                            }}
-                        </Alert>
-                        <Alert style="margin-top: 16px" v-if="SignStatus" variant="info">
-                            {{ $t('earn.validate.pending_multisig.already_signed') }}
-                        </Alert>
-                        <div class="actions__container__buttons">
-                            <button
-                                class="camino__negative--button"
-                                @click.prevent="openAbortModal"
-                            >
-                                {{ $t('transfer.multisig.abort_transaction') }}
-                            </button>
-                            <button
-                                v-if="canExecuteMultisigTx"
-                                :class="['camino__primary--button']"
-                                @click.prevent="issueMultisigTx"
-                            >
-                                {{ $t('transfer.multisig.execute_transaction') }}
-                            </button>
-                            <button
-                                v-else
-                                :class="[
-                                    'camino__primary--button',
-                                    { 'camino--button--disabled': disableSignButton() },
-                                ]"
-                                @click.prevent="signMultisigTx"
-                                :disabled="disableSignButton()"
-                            >
-                                {{ $t('transfer.multisig.sign_transaction') }}
-                            </button>
-                        </div>
-                    </div>
+                    <CamBtn variant="negative" :onClick="openAbortModal">
+                        {{ $t('transfer.multisig.abort_transaction') }}
+                    </CamBtn>
+                    <CamBtn
+                        v-if="canExecuteMultisigTx"
+                        variant="primary"
+                        :onClick="issueMultisigTx"
+                    >
+                        {{ $t('transfer.multisig.execute_transaction') }}
+                    </CamBtn>
+                    <CamBtn
+                        v-else
+                        variant="primary"
+                        :onClick="signMultisigTx"
+                        :disabled="disableSignButton()"
+                    >
+                        {{ $t('transfer.multisig.sign_transaction') }}
+                    </CamBtn>
                     <ModalAbortSigning
                         ref="modal_abort_signing"
                         :title="$t('transfer.multisig.abort_transaction')"
@@ -481,55 +405,51 @@
                     />
                 </template>
             </div>
-        </form>
+        </div>
     </div>
 </template>
 <script lang="ts">
+import { ava, bintools } from '@/AVA'
 import Alert from '@/components/Alert.vue'
+import CamBtn from '@/components/CamBtn.vue'
+import CamInput from '@/components/CamInput.vue'
 import AvaxInput from '@/components/misc/AvaxInput.vue'
 import { DAY_MS, ZeroBN } from '@/constants'
-import { bnToBig, cleanAvaxBN, formatDuration } from '@/helpers/helper'
-import { DepositOffer, WalletHelper } from '@/helpers/wallet_helper'
+import { isValidPChainAddress } from '@/helpers/address_helper'
+import { bnToBig } from '@/helpers/helper'
 import AvaAsset from '@/js/AvaAsset'
-import { WalletType } from '@/js/wallets/types'
-import { MultisigTx as SignavaultTx } from '@/store/modules/signavault/types'
 import { BN, Buffer } from '@c4tplatform/caminojs/dist'
-import 'reflect-metadata'
+import {
+    AddDepositOfferTx,
+    DepositOffer,
+    Offer,
+    UnsignedTx,
+} from '@c4tplatform/caminojs/dist/apis/platformvm'
+import { ONEAVAX } from '@c4tplatform/caminojs/dist/utils'
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
-import DateForm from './DateForm.vue'
 
-import { ava, bintools } from '@/AVA'
-import CamBtn from '@/components/CamBtn.vue'
-import CamInput from '@/components/CamInput.vue'
+const MAX_TITLE_BYTE_SIZE = 64
+
 import ModalAbortSigning from '@/components/wallet/earn/ModalAbortSigning.vue'
-import { isValidPChainAddress } from '@/helpers/address_helper'
+import { WalletHelper } from '@/helpers/wallet_helper'
 import { MultisigWallet } from '@/js/wallets/MultisigWallet'
-import { AddDepositOfferTx, Offer, UnsignedTx } from '@c4tplatform/caminojs/dist/apis/platformvm'
+import { WalletType } from '@/js/wallets/types'
+import { MultisigTx as SignavaultTx } from '@/store/modules/signavault/types'
 import { SignatureError } from '@c4tplatform/caminojs/dist/common'
-import { ONEAVAX } from '@c4tplatform/caminojs/dist/utils'
-
-const MAX_NAME_BYTE_SIZE = 64
+import DateForm from './DateForm.vue'
 
 @Component({
-    components: {
-        DateForm,
-        AvaxInput,
-        ModalAbortSigning,
-        Alert,
-        CamInput,
-        CamBtn,
-    },
+    components: { CamInput, CamBtn, Alert, DateForm, AvaxInput, ModalAbortSigning },
 })
 export default class CreateOfferForm extends Vue {
-    @Prop() isSuite!: boolean
     @Prop() maxDepositAmount!: BN
-
-    addresses: { address: string }[] = [{ address: '' }]
-    // @ts-ignore
-    helpers = this.globalHelper()
     interestRateNominator = ZeroBN
     totalMaxRewardAmount = ZeroBN
-    offer: DepositOffer = {
+    pendingOffer: any = { memo: '' }
+    // @ts-ignore
+    helpers = this.globalHelper()
+    addresses: { address: string }[] = [{ address: '' }]
+    offer: DepositOffer | any = {
         upgradeVersion: 1,
         id: '',
         interestRateNominator: ZeroBN,
@@ -539,7 +459,7 @@ export default class CreateOfferForm extends Vue {
         totalMaxAmount: ZeroBN,
         depositedAmount: ZeroBN,
         minDuration: 1,
-        maxDuration: 86400,
+        maxDuration: 2,
         unlockPeriodDuration: 1,
         noRewardsPeriodDuration: 0,
         memo: '',
@@ -548,53 +468,14 @@ export default class CreateOfferForm extends Vue {
         rewardedAmount: ZeroBN,
         ownerAddress: '',
     }
-    pendingOffer: any = null
-    $refs!: {
-        modal_abort_signing: ModalAbortSigning
-    }
-    @Watch('interestRateNominator')
-    onInterestRateNominatorChange() {
-        this.offer.interestRateNominator = new BN(this.interestRateNominator)
-    }
-    @Watch('totalMaxRewardAmount')
-    onTotalMaxRewardAmountChange() {
-        this.offer.totalMaxRewardAmount = new BN(this.totalMaxRewardAmount)
-    }
-    ownerAddressCheck() {
-        if (!this.offer.ownerAddress) return ''
-        return !isValidPChainAddress(this.offer.ownerAddress as string) ||
-            this.offer.ownerAddress != this.wallet?.getStaticAddress('P')
-            ? 'Invalid address'
-            : ''
-    }
-
-    get hasExclusiveTotalMaxAmountOrReward() {
-        const hasTotalMaxAmount =
-            BN.isBN(this.offer.totalMaxAmount) && !this.offer.totalMaxAmount.isZero()
-        const hasTotalMaxRewardAmount =
-            BN.isBN(this.offer.totalMaxRewardAmount) && !this.offer.totalMaxRewardAmount.isZero()
-
-        return hasTotalMaxAmount && hasTotalMaxRewardAmount
-    }
-
-    get isMinDurationLessThanNoRewardsPeriod() {
-        return Number(this.offer.unlockPeriodDuration) < Number(this.offer.noRewardsPeriodDuration)
-    }
-
+    /* errors */
     get nameLengthError() {
         const bytes = new TextEncoder().encode(this.offer.memo)
-        return bytes.length > MAX_NAME_BYTE_SIZE || bytes.length === 0
+        return bytes.length > MAX_TITLE_BYTE_SIZE || bytes.length === 0
     }
     get minAmountError() {
-        if (/[a-zA-Z]/.test(this.offer.minAmount.toString())) return true
         return this.offer.minAmount.lt(new BN(1000000))
     }
-
-    get maxAmountError() {
-        if (/[a-zA-Z]/.test(this.offer.totalMaxAmount.toString())) return true
-        return this.offer.totalMaxAmount.lt(this.offer.minAmount)
-    }
-
     get minDurationError() {
         const minDurationString = String(this.offer.minDuration)
 
@@ -605,7 +486,6 @@ export default class CreateOfferForm extends Vue {
             /^0[0-9]/.test(minDurationString)
         )
     }
-
     get maxDurationError() {
         const maxDurationString = String(this.offer.maxDuration)
 
@@ -617,7 +497,6 @@ export default class CreateOfferForm extends Vue {
             this.offer.maxDuration < this.offer.minDuration
         )
     }
-
     get unlockDurationError() {
         const unlockDurationString = String(this.offer.unlockPeriodDuration)
 
@@ -628,7 +507,6 @@ export default class CreateOfferForm extends Vue {
             /^0[0-9]/.test(unlockDurationString)
         )
     }
-
     get noRewardsPeriodDurationError() {
         const noRewardsPeriodDurationString = String(this.offer.noRewardsPeriodDuration)
 
@@ -639,21 +517,30 @@ export default class CreateOfferForm extends Vue {
             /^0[0-9]/.test(noRewardsPeriodDurationString)
         )
     }
+    get hasExclusiveTotalMaxAmountOrReward() {
+        const hasTotalMaxAmount =
+            BN.isBN(this.offer.totalMaxAmount) && !this.offer.totalMaxAmount.isZero()
+        const hasTotalMaxRewardAmount =
+            BN.isBN(this.offer.totalMaxRewardAmount) && !this.offer.totalMaxRewardAmount.isZero()
 
-    get totalMaxRewardAmountError() {
-        if (!BN.isBN(this.offer.totalMaxRewardAmount)) {
-            try {
-                this.offer.totalMaxRewardAmount = new BN(this.offer.totalMaxRewardAmount)
-            } catch (e) {
-                console.error('totalMaxRewardAmount is not a valid BN object:', e)
-                return true
-            }
-        }
-
-        if (/[a-zA-Z]/.test(this.offer.totalMaxRewardAmount.toString())) return true
-        return this.offer.totalMaxRewardAmount.lt(ZeroBN)
+        return hasTotalMaxAmount && hasTotalMaxRewardAmount
+    }
+    get isMinDurationLessThanNoRewardsPeriod() {
+        return Number(this.offer.minDuration) < Number(this.offer.noRewardsPeriodDuration)
+    }
+    // deposit offer minimum duration (86400) is less than unlock period duration (864002)
+    get isMinDurationLessThanUnlockPeriod() {
+        return Number(this.offer.minDuration) < Number(this.offer.unlockPeriodDuration)
+    }
+    get isMaxDirationLessThanMinDuration() {
+        return Number(this.offer.maxDuration) < Number(this.offer.minDuration)
+    }
+    get isMinDurationEqualtoZero() {
+        return Number(this.offer.minDuration) === 0
+    }
+    get isStartDateGreaterThanEndDate() {
+        return this.offer.start > this.offer.end
     }
-
     get interestRateAndTotalMaxRewardAmountError() {
         // Ensure that the values are instances of BN and then compare
         const interestRateNotZero =
@@ -664,149 +551,47 @@ export default class CreateOfferForm extends Vue {
         // Error if only one of them is non-zero (XOR condition)
         return interestRateNotZero !== totalMaxRewardAmountNotZero
     }
-
-    get activeWallet(): MultisigWallet {
-        return this.$store.state.activeWallet
-    }
-    get sigValue() {
-        return this.pendingSendMultisigTX?.tx.owners?.filter((owner) => !!owner.signature)?.length
-    }
-    get SignStatus(): boolean {
-        let isSigned = false
-        this.txOwners.forEach((owner) => {
-            if (
-                this.activeWallet.wallets.find((w) => w?.getAllAddressesP()?.[0] === owner.address)
-            ) {
-                if (owner.signature) isSigned = true
-            }
-        })
-        return isSigned
-    }
-    get minDuration() {
-        return 1
-    }
-    get maxDuration() {
-        return 1 * 365 * DAY_MS
-    }
-
-    get defaultDuration() {
-        return 1
-    }
-
-    get ava_asset(): AvaAsset | null {
-        let ava = this.$store.getters['Assets/AssetAVA']
-        return ava
-    }
-
-    get sunrisePhase(): number {
-        return this.$store.getters['Platform/getSunrisePhase']
+    get ownerAddressCheck() {
+        if (!this.offer.ownerAddress) return ''
+        return !isValidPChainAddress(this.offer.ownerAddress as string) ||
+            this.offer.ownerAddress != this.wallet?.getStaticAddress('P')
+            ? 'Invalid address'
+            : ''
     }
+    get validAddressError(): boolean {
+        const filledAddresses = this.addresses.filter((a) => a.address !== '')
 
-    get nativeAssetSymbol(): string {
-        return this.ava_asset?.symbol ?? ''
-    }
+        for (const addressObj of filledAddresses) {
+            if (!isValidPChainAddress(addressObj.address)) return true
+        }
 
-    get isMultisigWallet(): boolean {
-        return this.activeWallet instanceof MultisigWallet
+        return false
     }
-
+    /* validation */
     get formValid(): boolean {
-        if (
-            this.nameLengthError ||
-            this.minAmountError ||
-            this.minDurationError ||
-            this.maxDurationError ||
-            this.unlockDurationError ||
-            this.noRewardsPeriodDurationError ||
-            this.hasExclusiveTotalMaxAmountOrReward ||
-            this.isMinDurationLessThanNoRewardsPeriod
-        )
-            return false
         if (this.offer.start > this.offer.end) return false
         return true
     }
-    get wallet(): WalletType {
-        return this.$store.state.activeWallet
-    }
-    get pendingSendMultisigTX(): SignavaultTx | undefined {
-        return this.$store.getters['Signavault/transactions'].find(
-            (item: SignavaultTx) =>
-                item?.tx?.alias === this.wallet?.getStaticAddress('P') &&
-                WalletHelper.getUnsignedTxType(item?.tx?.unsignedTx) === 'AddDepositOfferTx'
-        )
-    }
-    get feeAmt(): string {
-        return this.formattedAmount(ava.PChain().getTxFee())
-    }
-    formattedAmount(val: BN): string {
-        return `${(Number(val.toString()) / Number(ONEAVAX.toString())).toLocaleString()}`
-    }
-    async mounted() {
-        await this.$store.dispatch('Signavault/updateTransaction')
-    }
-    @Watch('pendingSendMultisigTX')
-    upd() {
-        if (this.pendingSendMultisigTX) {
-            let unsignedTx = new UnsignedTx()
-            unsignedTx.fromBuffer(Buffer.from(this.pendingSendMultisigTX.tx?.unsignedTx, 'hex'))
-            const utx = unsignedTx.getTransaction() as AddDepositOfferTx
-            let offer = utx.getDepositOffer() as Offer
-            this.pendingOffer = {
-                interestRateNominator: bintools
-                    .fromBufferToBN(offer.getInterestRateNominator())
-                    .toString(10),
-                minAmount: bintools.fromBufferToBN(offer.getMinAmount()),
-                totalMaxAmount: bintools.fromBufferToBN(offer.getTotalMaxAmount()),
-                minDuration: Number(bnToBig(bintools.fromBufferToBN(offer.getMinDuration()))),
-                maxDuration: Number(bnToBig(bintools.fromBufferToBN(offer.getMaxDuration()))),
-                unlockPeriodDuration: Number(
-                    bnToBig(bintools.fromBufferToBN(offer.getUnlockPeriodDuration()))
-                ),
-                noRewardsPeriodDuration: Number(
-                    bnToBig(bintools.fromBufferToBN(offer.getNoRewardsPeriodDuration()))
-                ),
-                flags: bintools.fromBufferToBN(offer.getFlags()).toString(10),
-                totalMaxRewardAmount: bintools.fromBufferToBN(offer.getTotalMaxRewardAmount()),
-                memo: offer.getMemo().toString(),
-                ownerAddress: bintools.addressToString(ava.getHRP(), 'P', offer.getOwnerAddress()),
-                start: new Date(
-                    Number(bnToBig(bintools.fromBufferToBN(offer.getStart()))) * 1000
-                ).toISOString(),
-                end: new Date(
-                    Number(bnToBig(bintools.fromBufferToBN(offer.getEnd()))) * 1000
-                ).toISOString(),
-            }
-            if (this.pendingOffer.ownerAddress === ava.PChain().addressFromBuffer(Buffer.alloc(20)))
-                this.pendingOffer.ownerAddress = ''
-        }
-    }
-    async submitCreateOffer(): Promise<void> {
+
+    /* methods */
+    async submitCreateOffer() {
         if (this.offer.ownerAddress === '') this.offer.ownerAddress = undefined
         const wallet: WalletType = this.$store.state.activeWallet
+        let offer = {
+            ...this.offer,
+            minDuration: this.offer.minDuration * 24 * 60 * 60,
+            maxDuration: this.offer.maxDuration * 24 * 60 * 60,
+            unlockPeriodDuration: this.offer.unlockPeriodDuration * 24 * 60 * 60,
+            noRewardsPeriodDuration: this.offer.noRewardsPeriodDuration * 24 * 60 * 60,
+        }
+        let addresses = this.addresses.filter((a) => a.address !== '')
         try {
-            const result = await WalletHelper.buildAddDepositOfferTx(wallet, this.offer)
-            this.offer = {
-                upgradeVersion: 1,
-                id: '',
-                interestRateNominator: ZeroBN,
-                start: ZeroBN,
-                end: ZeroBN,
-                minAmount: new BN(1000000000),
-                totalMaxAmount: ZeroBN,
-                depositedAmount: ZeroBN,
-                minDuration: 1,
-                maxDuration: 86400,
-                unlockPeriodDuration: 1,
-                noRewardsPeriodDuration: 0,
-                memo: '',
-                flags: ZeroBN,
-                totalMaxRewardAmount: ZeroBN,
-                rewardedAmount: ZeroBN,
-                ownerAddress: '',
-            }
+            const result = await WalletHelper.buildAddDepositOfferTx(wallet, offer)
+            this.offer = this.offer
+            this.clearOffer()
             this.$store.dispatch('Platform/addAllowedAddresses', {
                 depositOfferID: result,
-                allowedAddresses: this.addresses,
+                allowedAddresses: addresses,
                 timestamp: this.offer.start.toNumber(),
             })
             this.helpers.dispatchNotification({
@@ -831,34 +616,16 @@ export default class CreateOfferForm extends Vue {
         }
         this.cancelCreateOffer()
     }
-    get validAddressError(): boolean {
-        const filledAddresses = this.addresses.filter((a) => a.address !== '')
-
-        for (const addressObj of filledAddresses) {
-            if (!isValidPChainAddress(addressObj.address)) return true
-        }
-
-        return false
-    }
-    addAddress(): void {
-        if (this.addresses.length >= 128) return
-        this.addresses.push({ address: '' })
-    }
-    removeAddress(index: number): void {
-        this.addresses.splice(index, 1)
-        if (this.addresses.length === 0) this.addAddress()
-    }
     async updateMultisigTxDetails() {
         await this.$store.dispatch('Assets/updateUTXOs')
         await this.$store.dispatch('Signavault/updateTransaction')
     }
     async signMultisigTx() {
-        const wallet = this.activeWallet
-        if (!wallet || !(wallet instanceof MultisigWallet))
+        if (!this.wallet || !(this.wallet instanceof MultisigWallet))
             return console.debug('MultiSigTx::sign: Invalid wallet')
-        if (!this.pendingSendMultisigTX) return console.debug('MultiSigTx::sign: Invalid Tx')
+        if (!this.pendingCreateOfferMultisigTX) return console.debug('MultiSigTx::sign: Invalid Tx')
         try {
-            await wallet.addSignatures(this.pendingSendMultisigTX?.tx)
+            await this.wallet.addSignatures(this.pendingCreateOfferMultisigTX?.tx)
             this.helpers.dispatchNotification({
                 message: 'Your signature saved successfully!',
                 type: 'success',
@@ -872,57 +639,34 @@ export default class CreateOfferForm extends Vue {
         }
     }
     async issueMultisigTx() {
-        const wallet = this.activeWallet
-        if (!wallet || !(wallet instanceof MultisigWallet))
+        if (!this.wallet || !(this.wallet instanceof MultisigWallet))
             return console.log('MultiSigTx::sign: Invalid wallet')
-        if (!this.pendingSendMultisigTX) return console.log('MultiSigTx::sign: Invalid Tx')
+        if (!this.pendingCreateOfferMultisigTX) return console.log('MultiSigTx::sign: Invalid Tx')
         try {
-            let txID = await wallet.issueExternal(this.pendingSendMultisigTX?.tx)
+            let txID = await this.wallet.issueExternal(this.pendingCreateOfferMultisigTX?.tx)
             this.$store.dispatch('Assets/updateUTXOs')
             this.$store.dispatch('Signavault/updateTransaction').then(() => {
                 this.$store.dispatch('updateBalances')
                 this.helpers.dispatchNotification({
-                    message: this.$t('notifications.transfer_success_msg'),
+                    message: `Create Offer Successful (TX: ${txID})`,
                     type: 'success',
                 })
             })
             this.updateMultisigTxDetails()
         } catch (e: any) {
+            let err = e as Error
             this.helpers.dispatchNotification({
-                message: this.$t('notifications.execute_multisig_transaction_error'),
+                message: err.message,
                 type: 'error',
             })
         }
     }
-    get txOwners() {
-        return this.pendingSendMultisigTX?.tx?.owners ?? []
-    }
-    disableSignButton(): boolean {
-        let isSigned = false
-        this.txOwners.forEach((owner) => {
-            if (
-                this.activeWallet.wallets.find((w) => w?.getAllAddressesP()?.[0] === owner.address)
-            ) {
-                if (owner.signature) isSigned = true
-            }
-        })
-        return isSigned
-    }
-    get canExecuteMultisigTx(): boolean {
-        let signers = 0
-        let threshold = this.pendingSendMultisigTX?.tx?.threshold
-        this.txOwners.forEach((owner) => {
-            if (owner.signature) signers++
-        })
-        if (threshold) return signers >= threshold
-        return false
-    }
     async cancelMultisigTx() {
         try {
             const wallet = this.wallet as MultisigWallet
-            if (this.pendingSendMultisigTX) {
+            if (this.pendingCreateOfferMultisigTX) {
                 // cancel from the wallet
-                await wallet.cancelExternal(this.pendingSendMultisigTX?.tx)
+                await wallet.cancelExternal(this.pendingCreateOfferMultisigTX?.tx)
                 this.helpers.dispatchNotification({
                     message: this.$t('transfer.multisig.transaction_aborted'),
                     type: 'success',
@@ -940,192 +684,286 @@ export default class CreateOfferForm extends Vue {
     openAbortModal() {
         this.$refs.modal_abort_signing.open()
     }
-    cancelCreateOffer(): void {
-        this.$emit('selectOffer')
-    }
-
-    cleanAvaxBN(val: BN): string {
-        return cleanAvaxBN(val)
+    disableSignButton(): boolean {
+        let isSigned = false
+        const wallet = this.wallet as MultisigWallet
+        this.txOwners.forEach((owner) => {
+            if (wallet.wallets.find((w) => w?.getAllAddressesP()?.[0] === owner.address)) {
+                if (owner.signature) isSigned = true
+            }
+        })
+        return isSigned
     }
-
-    formatDuration(dur: number): string {
-        return formatDuration(dur)
+    formattedAmount(val: BN): string {
+        return `${(Number(val.toString()) / Number(ONEAVAX.toString())).toLocaleString()}`
     }
-
     setStartDate(val: string) {
         this.offer.start = new BN(new Date(val).getTime() / 1000)
     }
-
     setEndDate(val: string) {
         this.offer.end = new BN(new Date(val).getTime() / 1000)
     }
-
     setInterestRate(ev: any) {
         if (ev && ev.target) {
             const interestRateValue = ev.target.value
             this.offer.interestRateNominator = new BN(interestRateValue)
         }
     }
-
+    setFlags(ev: any) {
+        this.offer.flags = new BN(ev.target.value)
+    }
     setTotalMaxRewardAmount(ev: any) {
         if (ev && ev.target) {
             const totalMaxRewardAmountValue = ev.target.value
             this.offer.totalMaxRewardAmount = new BN(totalMaxRewardAmountValue)
         }
     }
-
-    setFlags(ev: any) {
-        this.offer.flags = new BN(ev.target.value)
+    cancelCreateOffer(): void {
+        this.$emit('selectOffer')
+    }
+    addAddress(): void {
+        if (this.addresses.length >= 128) return
+        this.addresses.push({ address: '' })
+    }
+    removeAddress(index: number): void {
+        this.addresses.splice(index, 1)
+        if (this.addresses.length === 0) this.addAddress()
+    }
+    /* computed */
+    get pendingCreateOfferMultisigTX(): SignavaultTx | undefined {
+        return this.$store.getters['Signavault/transactions'].find(
+            (item: SignavaultTx) =>
+                item?.tx?.alias === this.wallet?.getStaticAddress('P') &&
+                WalletHelper.getUnsignedTxType(item?.tx?.unsignedTx) === 'AddDepositOfferTx'
+        )
+    }
+    get canExecuteMultisigTx(): boolean {
+        let signers = 0
+        let threshold = this.pendingCreateOfferMultisigTX?.tx?.threshold
+        this.txOwners.forEach((owner) => {
+            if (owner.signature) signers++
+        })
+        if (threshold) return signers >= threshold
+        return false
+    }
+    get txOwners() {
+        return this.pendingCreateOfferMultisigTX?.tx?.owners ?? []
+    }
+    get wallet(): WalletType {
+        return this.$store.state.activeWallet
+    }
+    get feeAmt(): string {
+        return this.formattedAmount(ava.PChain().getTxFee())
+    }
+    get ava_asset(): AvaAsset | null {
+        let ava = this.$store.getters['Assets/AssetAVA']
+        return ava
+    }
+    get nativeAssetSymbol(): string {
+        return this.ava_asset?.symbol ?? ''
+    }
+    get minDuration() {
+        return 1
+    }
+    get maxDuration() {
+        return 1 * 365 * DAY_MS
+    }
+    get defaultDuration() {
+        return 1
+    }
+    get sunrisePhase(): number {
+        return this.$store.getters['Platform/getSunrisePhase']
+    }
+    get isMultisigWallet(): boolean {
+        return this.wallet instanceof MultisigWallet
+    }
+    /* lifecycle */
+    async mounted() {
+        await this.$store.dispatch('Signavault/updateTransaction')
+    }
+    /* watchers */
+    @Watch('interestRateNominator')
+    onInterestRateNominatorChange() {
+        this.offer.interestRateNominator = new BN(this.interestRateNominator)
+    }
+    @Watch('totalMaxRewardAmount')
+    onTotalMaxRewardAmountChange() {
+        this.offer.totalMaxRewardAmount = new BN(this.totalMaxRewardAmount)
+    }
+    @Watch('pendingCreateOfferMultisigTX')
+    getPandingCreateOfferTxData() {
+        if (this.pendingCreateOfferMultisigTX) {
+            let unsignedTx = new UnsignedTx()
+            unsignedTx.fromBuffer(
+                Buffer.from(this.pendingCreateOfferMultisigTX.tx?.unsignedTx, 'hex')
+            )
+            const utx = unsignedTx.getTransaction() as AddDepositOfferTx
+            let offer = utx.getDepositOffer() as Offer
+            this.pendingOffer = {
+                interestRateNominator: bintools
+                    .fromBufferToBN(offer.getInterestRateNominator())
+                    .toString(10),
+                minAmount: bnToBig(bintools.fromBufferToBN(offer.getMinAmount()), 9).toString(),
+                totalMaxAmount: bnToBig(
+                    bintools.fromBufferToBN(offer.getTotalMaxAmount()),
+                    9
+                ).toString(),
+                minDuration: Number(bnToBig(bintools.fromBufferToBN(offer.getMinDuration()))),
+                maxDuration: Number(bnToBig(bintools.fromBufferToBN(offer.getMaxDuration()))),
+                unlockPeriodDuration: Number(
+                    bnToBig(bintools.fromBufferToBN(offer.getUnlockPeriodDuration()))
+                ),
+                noRewardsPeriodDuration: Number(
+                    bnToBig(bintools.fromBufferToBN(offer.getNoRewardsPeriodDuration()))
+                ),
+                flags: bintools.fromBufferToBN(offer.getFlags()).toString(10),
+                totalMaxRewardAmount: bintools.fromBufferToBN(offer.getTotalMaxRewardAmount()),
+                memo: offer.getMemo().toString(),
+                ownerAddress: bintools.addressToString(ava.getHRP(), 'P', offer.getOwnerAddress()),
+                start: new Date(
+                    Number(bnToBig(bintools.fromBufferToBN(offer.getStart()))) * 1000
+                ).toISOString(),
+                end: new Date(
+                    Number(bnToBig(bintools.fromBufferToBN(offer.getEnd()))) * 1000
+                ).toISOString(),
+            }
+            if (this.pendingOffer.ownerAddress === ava.PChain().addressFromBuffer(Buffer.alloc(20)))
+                this.pendingOffer.ownerAddress = ''
+        }
+    }
+    /* refs */
+    $refs!: {
+        modal_abort_signing: ModalAbortSigning
+    }
+    /* utiils */
+    clearOffer() {
+        this.offer = {
+            ...this.offer,
+            interestRateNominator: ZeroBN,
+            minAmount: new BN(1000000),
+            totalMaxAmount: ZeroBN,
+            depositedAmount: ZeroBN,
+            minDuration: 1,
+            maxDuration: 2,
+            unlockPeriodDuration: 1,
+            noRewardsPeriodDuration: 0,
+            memo: '',
+            flags: ZeroBN,
+            totalMaxRewardAmount: ZeroBN,
+            rewardedAmount: ZeroBN,
+            ownerAddress: '',
+        }
+        this.setInterestRate({ target: { value: 0 } })
+        this.setFlags({ target: { value: 0 } })
+        this.setTotalMaxRewardAmount({ target: { value: 0 } })
     }
 }
 </script>
 <style scoped lang="scss">
 @use '../../../styles/abstracts/mixins';
-.multisig_address {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-.add-new-address {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    &--button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex: 1;
-    }
-}
-.actions__container {
+.create-offer__container {
     display: flex;
     flex-direction: column;
     gap: 16px;
-    &__buttons {
+    &__form {
         display: flex;
+        flex-wrap: wrap;
         gap: 16px;
+        &__element {
+            min-width: 300px;
+            flex: 1 1 45%;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 4px;
+            align-self: stretch;
+            .input {
+                width: 100%;
+            }
+            input {
+                padding: 10px 12px;
+                border-radius: 8px;
+                border: 1px solid var(--camino-slate-slate-600);
+                &:disabled {
+                    border: 1px solid var(--camino-slate-slate-600) !important;
+                }
+            }
+        }
+        .full-width {
+            flex: 1 1 100%;
+        }
     }
-}
-.circle {
-    border: var(--primary-border);
-    cursor: pointer;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    border-radius: 100%;
-    border-width: 2px;
-    padding: 10px;
-}
-input {
-    padding: 10px 12px;
-    border-radius: 8px;
-    border: 1px solid var(--camino-slate-slate-600);
-    &:disabled {
-        border: 1px solid var(--camino-slate-slate-600) !important;
-    }
-}
-.form__container {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    align-items: flex-start;
-    color: var(--primary-color);
-
-    &__element {
-        width: 450px;
+    &__actions {
         display: flex;
         flex-direction: column;
-        align-items: flex-start;
-        gap: 1.25rem;
-        align-self: stretch;
-        &__label {
-            color: var(--primary-color);
-            font-family: 'Inter';
-            font-size: 14px;
-            font-style: normal;
-            font-weight: 600;
-            line-height: 20px;
-        }
-        &__input {
-            width: 450px !important;
-        }
-        &__addresses {
-            width: 100%;
+        gap: 16px;
+        &__aletrs {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
         }
-        &__new-addresses {
-            width: 100%;
+        &__buttons {
             display: flex;
-            justify-content: center;
-            align-items: center;
+            gap: 16px;
         }
     }
-    &__actions {
+    .addresses_container {
         display: flex;
+        flex-direction: column;
+        gap: 16px;
+        margin-bottom: 16px;
+    }
+    .address_container {
+        display: flex;
+        flex-direction: row;
         align-items: center;
         gap: 16px;
     }
-}
-.cam-input {
-    width: 100%;
-}
-
-.addresses_container {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-}
-
-.circle {
-    border: 2px solid var(--camino-slate-slate-600);
-    cursor: pointer;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    border-radius: 100%;
-    padding: 10px;
-}
-
-.number {
-    width: 35px !important;
-    height: 35px !important;
-    cursor: default;
-}
 
-.plus-button {
-    border: 2px solid var(--camino-success-color);
-    font-size: 10px;
-    width: 40px !important;
-    height: 40px !important;
-    svg {
-        color: var(--camino-success-color);
+    .circle {
+        border: 2px solid var(--camino-slate-slate-600);
+        cursor: pointer;
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        border-radius: 100%;
+        padding: 10px;
     }
-}
 
-.delete-button {
-    border: 2px solid var(--camino-error-color);
-    width: 35px !important;
-    height: 35px !important;
-    svg {
-        color: var(--camino-error-color);
+    .plus-button {
+        border: 2px solid var(--camino-success-color);
+        font-size: 10px;
+        width: 40px !important;
+        height: 40px !important;
+        svg {
+            color: var(--camino-success-color);
+        }
     }
-}
-.delete-button.mobile {
-    display: none;
-}
 
-.delete-button.desktop {
-    display: flex;
-}
-
-@include mixins.mobile-device {
+    .delete-button {
+        border: 2px solid var(--camino-error-color);
+        width: 35px !important;
+        height: 35px !important;
+        svg {
+            color: var(--camino-error-color);
+        }
+    }
     .delete-button.mobile {
-        display: flex;
+        display: none;
     }
 
     .delete-button.desktop {
-        display: none;
+        display: flex;
+    }
+
+    @include mixins.mobile-device {
+        .delete-button.mobile {
+            display: flex;
+        }
+
+        .delete-button.desktop {
+            display: none;
+        }
     }
 }
 </style>
diff --git a/src/components/wallet/earn/ModalDepositFunds.vue b/src/components/wallet/earn/ModalDepositFunds.vue
index 4cdb3859c..1368e8043 100644
--- a/src/components/wallet/earn/ModalDepositFunds.vue
+++ b/src/components/wallet/earn/ModalDepositFunds.vue
@@ -205,7 +205,7 @@ import { MultisigWallet } from '@/js/wallets/MultisigWallet'
 import { WalletType } from '@/js/wallets/types'
 import { BN } from '@c4tplatform/caminojs'
 import { DepositOffer } from '@c4tplatform/caminojs/dist/apis/platformvm'
-import { ZeroBN } from '@c4tplatform/caminojs/dist/common'
+import { SignatureError, ZeroBN } from '@c4tplatform/caminojs/dist/common'
 import 'reflect-metadata'
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 import Modal from '../../modals/Modal.vue'
@@ -400,10 +400,6 @@ export default class ModalDepositFunds extends Vue {
         return `${(Number(val.toString()) / Number(ONEAVAX.toString())).toLocaleString()}`
     }
     async submitDeposit(): Promise<void> {
-        console.log({
-            rewardOwner: this.rewardOwner,
-            isValid: isValidPChainAddress(this.rewardOwner),
-        })
         if (this.rewardOwner && !isValidPChainAddress(this.rewardOwner)) {
             this.rewardOwnerError = 'Invalid address'
             return
diff --git a/src/locales/en.json b/src/locales/en.json
index 73911447c..14199d540 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -498,18 +498,18 @@
                 "interrest_rate": "Interrest rate ( *1 000 000 )",
                 "min_amount": "Min Amount",
                 "total_max_amount": "Total Max Amount",
-                "min_duration": "Minimum Duration (Sec)",
-                "max_duration": "Maximum Duration (Sec)",
-                "unlock_duration": "Unlock Duration (Sec)",
-                "no_rewards_duration": "No Rewards Duration (Sec)",
+                "min_duration": "Minimum Duration (Day)",
+                "max_duration": "Maximum Duration (Day)",
+                "unlock_duration": "Unlock Duration (Day)",
+                "no_rewards_duration": "No Rewards Duration (Day)",
                 "memo": "Title",
                 "flags": "Flags (Blocked:1)",
                 "total_max_reward_amount": "Total Max Reward Amount",
-                "owner_address": "Owner Address (optional)",
+                "owner_address": "Owner Address (If filled, only allowed addresses can see and deposit funds.)",
                 "submit": "Create Offer"
             },
             "errors": {
-                "title": "Credit Offre title must be at least 64 characters long.",
+                "title": "Offer title must be at least 64 characters long.",
                 "min_amount": "Minimum amount must be at least {minAmount} {symbol}."
             },
             "offer": {