Style enhancement and upgrading CaminoJS

package.json

@@ -179,6 +179,7 @@
         "vue": "^2.6.11",
         "vue-cli-plugin-vuetify": "^2.0.3",
         "vuetify": "^2.6.14",
-        "vuetify-loader": "^1.9.2"
+        "vuetify-loader": "^1.9.2",
+        "xss": "1.0.14"
     }
 }

src/components/CamOfferCard.vue

@@ -104,6 +104,23 @@
                 </div>
             </div>
         </template>
+        <template v-else-if="isTreasuryRewards">
+            <div class="offer_detail">
+                <div class="offer_detail_left">
+                    <p>
+                        {{ $t('earn.rewards.pending_rewards.description') }}
+                    </p>
+                </div>
+                <div class="offer_detail_right">
+                    <div class="reward_row">
+                        <label>{{ $t('earn.rewards.pending_rewards.pending_reward') }}:</label>
+                        <p class="reward">
+                            {{ cleanAvaxBN(treasuryRewards.amountToClaim) }} {{ nativeAssetSymbol }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </template>
         <slot></slot>
     </CamCard>
 </template>
@@ -113,7 +130,7 @@ import { cleanAvaxBN, formatDuration } from '@/helpers/helper'
 import { WalletHelper } from '@/helpers/wallet_helper'
 import AvaAsset from '@/js/AvaAsset'
 import { WalletType } from '@/js/wallets/types'
-import { PlatformRewardDeposit } from '@/store/modules/platform/types'
+import { PlatformRewardDeposit, PlatformRewardTreasury } 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'
@@ -126,9 +143,10 @@ import CamCard from './CamCard.vue'
 })
 export default class CamOfferCard extends Vue {
     @Prop() readonly title!: string
-    @Prop() readonly type!: 'offer' | 'reward'
+    @Prop() readonly type!: 'offer' | 'reward' | 'treasuryRewards'
     @Prop() readonly offer!: DepositOffer
     @Prop() readonly reward!: PlatformRewardDeposit
+    @Prop() readonly treasuryRewards!: PlatformRewardTreasury
 
     get isOffer() {
         return this.type === 'offer'
@@ -138,6 +156,10 @@ export default class CamOfferCard extends Vue {
         return this.type === 'reward'
     }
 
+    get isTreasuryRewards() {
+        return this.type === 'treasuryRewards'
+    }
+
     get activeWallet(): WalletType {
         return this.$store.state.activeWallet
     }
@@ -326,6 +348,7 @@ label {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 1rem;
+    height: 100%;
     .offer_detail_left {
         border-right: 2px solid var(--border-color);
     }

src/components/modals/SaveAccount/SaveAccountModal.vue

@@ -33,6 +33,12 @@
                         <b>private key</b>
                         saved.
                     </p>
+                    <Alert
+                        v-for="(error, index) in errors"
+                        variant="negative"
+                        :title="error"
+                        :key="index"
+                    ></Alert>
                     <CamBtn
                         variant="primary"
                         :disabled="!canSubmit"
@@ -48,7 +54,7 @@
 </template>
 <script lang="ts">
 import 'reflect-metadata'
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 
 import Modal from '../Modal.vue'
 import { SaveAccountInput } from '@/store/types'
@@ -77,23 +83,29 @@ export default class SaveAccountModal extends Vue {
     accountName = ''
     existsInLocalStorage: boolean = false
     index: number = 0
+    errors: string[] = []
     foundAccount: iUserAccountEncrypted | null = null
     $refs!: {
         modal: Modal
     }
 
     get canSubmit() {
-        if (this.error !== null) return false
+        if (this.errors.length !== 0) return false
         return true
     }
 
-    get error() {
-        if (!this.password) return this.$t('keys.password_validation')
-        if (!this.password_confirm) return this.$t('keys.password_validation2')
-        if (this.accountName.length < 1) return this.$t('keys.account_name_required')
-        if (this.password.length < 9) return this.$t('keys.password_validation')
-        if (this.password !== this.password_confirm) return this.$t('keys.password_validation2')
-
+    @Watch('password_confirm')
+    @Watch('accountName')
+    @Watch('password')
+    checkError() {
+        this.errors = []
+        if (this.password && this.password !== this.password_confirm)
+            this.errors.push(this.$t('keys.password_validation2') as string)
+        if (!this.password || this.password.length < 9)
+            this.errors.push(this.$t('keys.password_validation') as string)
+
+        if (this.accountName.length < 1)
+            this.errors.push(this.$t('keys.account_name_required') as string)
         return null
     }