feat: different style for names provided by the network & ui fixes

src/renderer/components/Wallet/WalletSidebar/WalletSidebar.vue

@@ -88,8 +88,19 @@
           }"
           class="WalletSidebar__wallet__info flex flex-col font-semibold overflow-hidden"
         >
-          <span class="block truncate">
-            {{ wallet_name(wallet.address) || wallet_truncate(wallet.address, isSlim ? 6 : 24) }}
+          <span
+            class="flex items-center"
+            :class="{ 'justify-center': isSlim }"
+          >
+            <span class="block truncate">
+              {{ wallet_name(wallet.address) || wallet_truncate(wallet.address, isSlim ? 6 : 24) }}
+            </span>
+            <span
+              v-if="wallet.isLedger"
+              class="WalletSidebar__ledger-badge bg-red-light text-white p-1 text-xs font-bold rounded pointer-events-none ml-2"
+            >
+              {{ isSlim ? $t('COMMON.LEDGER').charAt(0) : $t('COMMON.LEDGER') }}
+            </span>
           </span>
           <span
             v-if="!isSlim"
@@ -105,6 +116,7 @@
 </template>
 
 <script>
+import { uniqBy } from 'lodash'
 import Loader from '@/components/utils/Loader'
 import { MenuNavigation, MenuNavigationItem } from '@/components/Menu'
 import { sortByProp } from '@/components/utils/Sorting'
@@ -187,7 +199,10 @@ export default {
 
     refreshLedgerWallets () {
       const ledgerWallets = this.$store.getters['ledger/wallets']
-      this.selectableWallets = [...ledgerWallets, ...this.wallets]
+      this.selectableWallets = uniqBy([
+        ...ledgerWallets,
+        ...this.wallets
+      ], 'address')
     },
 
     ledgerDisconnected () {
@@ -227,6 +242,9 @@ export default {
   @apply .mb-2
 }
 
+.WalletSidebar__ledger-badge {
+  opacity: 0.85
+}
 .WalletIdenticon__placeholder {
   filter: opacity(20%)
 }

src/renderer/components/Wallet/WalletTable.vue

@@ -32,15 +32,27 @@
 
         <div
           v-else-if="data.column.field === 'name'"
+          class="flex"
         >
-          <span class="flex items-center whitespace-no-wrap">
-            {{ walletName(data.row) | truncate(30) }}
+          <span
+            class="flex items-center whitespace-no-wrap"
+            :class="{ 'text-theme-page-text-light': !data.row.name }"
+          >
+            <span
+              v-tooltip="{
+                content: !data.row.name ? $t('COMMON.NETWORK_NAME') : '',
+                placement: 'right'
+              }"
+              class="pr-1"
+            >
+              {{ walletName(data.row) | truncate(30) }}
+            </span>
             <span
               v-if="data.row.isLedger"
               class="WalletTable__ledger-badge bg-red-light text-white p-1 text-xs font-bold rounded pointer-events-none"
-              :class="{ 'ml-3': walletName(data.row) }"
+              :class="{ 'ml-2': walletName(data.row) }"
             >
-              {{ $t('WALLET_TABLE.LEDGER') }}
+              {{ $t('COMMON.LEDGER') }}
             </span>
           </span>
         </div>
@@ -194,8 +206,16 @@ export default {
     },
 
     sortByName (x, y, col, rowX, rowY) {
-      const one = this.wallet_name(rowX.address) || ''
-      const two = this.wallet_name(rowY.address) || ''
+      let one = this.wallet_name(rowX.address) || ''
+      let two = this.wallet_name(rowY.address) || ''
+
+      if (!isNaN(one)) {
+        one = one.padStart(10, 0)
+      }
+
+      if (!isNaN(two)) {
+        two = two.padStart(10, 0)
+      }
 
       return (one < two ? -1 : one > two ? 1 : 0)
     },

src/renderer/i18n/locales/en-US.js

@@ -15,7 +15,9 @@ export default {
     FETCH: 'Fetch',
     FINISH: 'Finish',
     LANGUAGE: 'Application Language',
+    LEDGER: 'Ledger',
     NETWORK: 'Network',
+    NETWORK_NAME: 'This name is provided by the network',
     NEXT: 'Next',
     NOT: 'not',
     OF: 'of',
@@ -872,7 +874,6 @@ export default {
   },
 
   WALLET_TABLE: {
-    LEDGER: 'Ledger',
     NO_DELETE: 'Ledger wallets cannot be deleted',
     ACTIONS: 'Actions'
   }

src/renderer/pages/Contact/ContactAll.vue

@@ -43,60 +43,76 @@
         v-if="hasWalletGridLayout && !isLoading"
       >
         <div class="ContactAll__grid mt-10 justify-center">
-          <div class="ContactAll__grid__contact w-full overflow-hidden bg-theme-feature lg:bg-transparent rounded-lg border-theme-wallet-overview-border border-b border-r mb-3">
-            <div class="flex flex-row items-center">
-              <RouterLink :to="{ name: 'contact-new' }">
-                <WalletIdenticonPlaceholder
-                  :size="60"
-                  class="identicon opacity-50"
-                />
-              </RouterLink>
-              <div class="flex flex-col justify-center overflow-hidden pl-4 font-semibold">
-                <RouterLink :to="{ name: 'contact-new' }">
-                  {{ $t('PAGES.CONTACT_ALL.CREATE_CONTACT') }}
-                </RouterLink>
-                <span class="font-bold mt-2 opacity-50 text-lg">
-                  {{ formatter_networkCurrency(0, 2) }}
-                </span>
+          <div
+            class="ContactAll__grid__contact w-full overflow-hidden bg-theme-feature lg:bg-transparent rounded-lg cursor-pointer border-theme-wallet-overview-border border-b border-r mb-3"
+            @click="createContact"
+          >
+            <div class="ContactAll__grid__contact__wrapper">
+              <div class="flex flex-col">
+                <div class="flex items-center">
+                  <WalletIdenticonPlaceholder
+                    :size="60"
+                    class="identicon identicon-placeholder cursor-pointer opacity-50"
+                  />
+
+                  <div class="flex flex-col justify-center overflow-hidden pl-4 font-semibold">
+                    <div class="ContactAll__grid__contact__name font-semibold text-base block">
+                      <span>
+                        {{ $t('PAGES.CONTACT_ALL.CREATE_CONTACT') }}
+                      </span>
+                    </div>
+                    <span class="font-bold mt-2 opacity-50 text-lg">
+                      {{ formatter_networkCurrency(0, 2) }}
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
 
           <div
             v-for="contact in selectableContacts"
             :key="contact.id"
-            class="ContactAll__grid__contact w-full overflow-hidden bg-theme-feature lg:bg-transparent rounded-lg border-theme-wallet-overview-border border-b border-r mb-3"
+            class="ContactAll__grid__contact w-full overflow-hidden bg-theme-feature lg:bg-transparent rounded-lg cursor-pointer border-theme-wallet-overview-border border-b border-r mb-3"
+            @click="showContact(contact.id)"
           >
-            <div class="flex flex-row items-center">
-              <RouterLink
-                :to="{ name: 'wallet-show', params: { address: contact.id } }"
-                class="flex flex-row"
-              >
-                <WalletIdenticon
-                  :value="contact.address"
-                  :size="60"
-                  class="identicon cursor-pointer"
-                />
-              </RouterLink>
-              <div class="flex flex-col justify-center overflow-hidden pl-4">
-                <div class="ContactAll__grid__contact__name font-semibold text-base truncate block">
-                  <RouterLink :to="{ name: 'wallet-show', params: { address: contact.id } }">
-                    {{ wallet_nameOnContact(contact.address) || wallet_truncate(contact.address) }}
-                  </RouterLink>
+            <div class="ContactAll__grid__contact__wrapper">
+              <div class="flex flex-col">
+                <div class="flex items-center">
+                  <WalletIdenticon
+                    :value="contact.address"
+                    :size="60"
+                    class="identicon cursor-pointer"
+                  />
+
+                  <div class="flex flex-col justify-center overflow-hidden pl-4">
+                    <div class="ContactAll__grid__contact__name font-semibold text-base truncate block">
+                      <span
+                        v-tooltip="{
+                          content: !contact.name && wallet_name(contact.address) ? $t('COMMON.NETWORK_NAME') : '',
+                          placement: 'right'
+                        }"
+                        class="pr-1"
+                      >
+                        {{ contact.name || wallet_name(contact.address) || wallet_truncate(contact.address) }}
+                      </span>
+                    </div>
+                    <span class="font-bold mt-2 text-lg">
+                      {{ formatter_networkCurrency(contact.balance, 2) }}
+                    </span>
+                  </div>
+                </div>
+
+                <div class="flex flex-row w-full justify-end">
+                  <button
+                    class="ContactAll__grid__contact__select font-semibold flex text-xs cursor-pointer hover:underline hover:text-red text-theme-page-text-light mt-4"
+                    @click.stop="openRemovalConfirmation(contact)"
+                  >
+                    {{ $t('PAGES.CONTACT_ALL.DELETE_CONTACT') }}
+                  </button>
                 </div>
-                <span class="font-bold mt-2 text-lg">
-                  {{ formatter_networkCurrency(contact.balance, 2) }}
-                </span>
               </div>
             </div>
-            <div class="flex flex-row w-full justify-end">
-              <button
-                class="ContactAll__grid__contact__select font-semibold flex text-xs cursor-pointer hover:underline hover:text-red text-theme-page-text-light mt-4"
-                @click="openRemovalConfirmation(contact)"
-              >
-                {{ $t('PAGES.CONTACT_ALL.DELETE_CONTACT') }}
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -249,6 +265,10 @@ export default {
 
     createContact () {
       this.$router.push({ name: 'contact-new' })
+    },
+
+    showContact (contactId) {
+      this.$router.push({ name: 'wallet-show', params: { address: contactId } })
     }
   }
 }
@@ -263,16 +283,25 @@ export default {
   grid-template-columns: repeat(auto-fill, calc(var(--contact-identicon-lg) * 3));
   grid-gap: 1rem;
 }
-.ContactAll__grid__contact {
-  @apply .p-6
+.ContactAll__grid__contact__wrapper {
+  @apply .m-6;
 }
 .ContactAll__grid__contact:hover .identicon {
   transition: 0.5s;
   opacity: 0.5;
 }
+.ContactAll__grid__contact:hover .identicon-placeholder {
+  opacity: 0.25;
+}
 .ContactAll__grid__contact .identicon {
   transition: 0.5s;
 }
+.ContactAll__grid__contact__name {
+  color: #037cff;
+}
+.ContactAll__grid__contact__name:hover {
+  @apply .text-blue-dark .underline;
+}
 .ContactAll__CreateButton {
   transition: all .1s ease-in;
   @apply .flex .items-center .mx-auto .font-semibold .bg-theme-button .rounded .cursor-pointer .text-theme-option-button-text .mr-6;
@@ -289,8 +318,8 @@ export default {
   @apply .text-white;
 }
 @screen lg {
-  .ContactAll__grid__contact {
-    @apply .p-4
+  .ContactAll__grid__contact__wrapper {
+    @apply .m-4
   }
 }
 </style>