Merge pull request #424 from chain4travel/aeddaqqa/fix-wallet-switche…

…r-name

Aeddaqqa/fix wallet switcher name

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
     }
 

src/components/wallet/manage/KeyRow.vue

@@ -29,7 +29,11 @@
                 <div class="header_cols">
                     <div class="detail">
                         <div class="edit-wallet-name-container">
-                            <h3 v-show="!isEditable" class="addressVal" style="max-width: 300px">
+                            <h3
+                                v-show="!isEditable"
+                                class="addressVal"
+                                :style="isSuite ? { maxWidth: '395px' } : { maxWidth: 'none' }"
+                            >
                                 {{ walletName }}
                             </h3>
                             <input
@@ -166,6 +170,7 @@ import { privateToPublic } from '@ethereumjs/util'
     },
 })
 export default class KeyRow extends Vue {
+    @Prop() isSuite?: boolean
     @Prop() wallet!: WalletType
     @Prop({ default: false }) is_default?: boolean
 
@@ -514,12 +519,45 @@ export default class KeyRow extends Vue {
     margin-right: 6px;
 }
 
+@include mixins.medium-device {
+    .addressVal {
+        max-width: 395px !important;
+    }
+}
+
+@include mixins.large-device {
+    .addressVal {
+        max-width: 395px !important;
+    }
+}
+
+@include mixins.large-device {
+    .addressVal {
+        max-width: 500px !important;
+    }
+}
+
+@include mixins.xl-device {
+    .addressVal {
+        max-width: 500px !important;
+    }
+}
+
+@include mixins.largest-device {
+    .addressVal {
+        max-width: 800px !important;
+    }
+}
+
 @include mixins.mobile-device {
     .addressVal-value {
         white-space: normal;
         word-break: break-all;
         text-align: left;
     }
+    .addressVal {
+        max-width: 395px !important;
+    }
     .header_cols {
         display: flex;
         flex-direction: column;

src/components/wallet/manage/MyKeys.vue

@@ -6,6 +6,7 @@
             :wallet="activeWallet"
             class="key_row"
             :is_default="true"
+            :isSuite="isSuite"
         ></key-row>
         <hr v-if="inactiveWallets.length > 0" />
         <p class="label" v-if="hasOtherKeys">
@@ -30,6 +31,7 @@
         </div>
         <transition-group name="fade" class="other-keys">
             <key-row
+                :isSuite="isSuite"
                 v-for="wallet in inactiveWallets"
                 :wallet="wallet"
                 :key="wallet.id"
@@ -43,7 +45,7 @@
 
 <script lang="ts">
 import 'reflect-metadata'
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
 
 import { bintools } from '@/AVA'
 import RememberKey from '@/components/misc/RememberKey.vue'
@@ -62,6 +64,7 @@ import Alert from '@/components/Alert.vue'
     },
 })
 export default class MyKeys extends Vue {
+    @Prop() isSuite?: boolean
     error: string = ''
     isLoading: boolean = false
     imported: boolean = false

src/components/wallet/manage/mountKyesComponent.ts

@@ -14,7 +14,7 @@ Vue.use(BootstrapVue)
 Vue.component('datetime', Datetime)
 
 export const mountKyesComponent = (el: string, props: any) => {
-    const { dispatchNotification, dispatchSetNewName, setAccount } = props
+    const { dispatchNotification, dispatchSetNewName, setAccount, isSuite: boolean } = props
     const MyPlugin = {
         install(Vue) {
             Vue.prototype.globalHelper = () => {