UX improvements

package.json

@@ -10,12 +10,12 @@
     "move-wasm": "node wasm_path_fixer.js"
   },
   "dependencies": {
-    "@internet-of-people/sdk": "3.1.1",
     "@fortawesome/fontawesome-svg-core": "1.2.19",
     "@fortawesome/free-brands-svg-icons": "5.9.0",
     "@fortawesome/free-regular-svg-icons": "5.9.0",
     "@fortawesome/free-solid-svg-icons": "5.9.0",
     "@fortawesome/vue-fontawesome": "0.1.6",
+    "@internet-of-people/sdk": "3.1.1",
     "axios": "0.20.0",
     "bignumber.js": "9.0.0",
     "bootstrap": "4.5.0",
@@ -26,6 +26,7 @@
     "optional-js": "2.1.1",
     "vue": "2.6.11",
     "vue-class-component": "7.2.3",
+    "vue-clipboard2": "^0.3.1",
     "vue-property-decorator": "8.4.1",
     "vue-router": "3.1.6",
     "vuex": "3.1.3",

src/App.scss

@@ -1,3 +1,14 @@
+body {
+  background-color: #f7f7f7;
+}
+
+.card-with-shadow {
+  -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.1);
+  -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.1);
+  box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.1);
+  border: none;
+}
+
 .navbar {
   .navbar-brand {
     img {

src/components/AddressHamburgerMenu/AddressHamburgerMenu.vue

@@ -2,8 +2,17 @@
   <div>
     <b-dropdown size="sm" no-caret variant="light" right>
       <template v-slot:button-content>
-        <fa icon="ellipsis-v" />
+        <template v-if="hamburgerStyle">Actions <fa icon="bars" /></template>
+        <fa v-else icon="ellipsis-v" />
       </template>
+      <b-dropdown-item
+        v-clipboard:copy="address"
+        v-clipboard:success="onAddressCopied"
+      >
+        <fa :icon="['far', 'copy']" class="mr-2" />
+        Copy Address
+      </b-dropdown-item>
+      <b-dropdown-divider></b-dropdown-divider>
       <b-dropdown-item @click="onSendClick">
         <fa :icon="['far', 'money-bill-alt']" class="mr-2" />
         Send
@@ -28,7 +37,7 @@
       </b-dropdown-item>
     </b-dropdown>
     <b-modal
-      id="delete-address-modal"
+      :visible="deleteAddressModalVisible"
       :title="`Delete ${addressAlias}?`"
       no-close-on-esc
       hide-header-close
@@ -46,7 +55,7 @@
       <div>
         <b-button
           variant="outline-primary"
-          @click="$bvModal.hide('delete-address-modal')"
+          @click="() => deleteAddressModalVisible = false"
           class="mr-3"
         >
           CANCEL
@@ -78,19 +87,23 @@ import { RenameAddressParams } from '@/store/persisted/types';
   },
 })
 export default class AddressHamburgerMenu extends Vue {
+  @Prop({ type: Boolean, required: false }) hamburgerStyle!: boolean;
   @Prop({ type: Number, required: true }) addressIndex!: number;
   @Prop({ type: String, required: true }) addressAlias!: string;
   @Prop({ type: String, required: true }) address!: string;
   @Getter('selectedNetwork', { namespace: persisted }) selectedNetwork!: WalletNetworkInfo;
   private aliasAddressModalVisible = false;
+  private deleteAddressModalVisible = false;
 
   private onDeleteAddressClick(): void {
-    this.$bvModal.show('delete-address-modal');
+    this.deleteAddressModalVisible = true;
   }
 
   private onConfirmDeleteClick(): void {
     this.$store.dispatch(`${persisted}/removeAddress`, this.addressIndex);
-    this.$router.push({ name: 'Dashboard' });
+    this.deleteAddressModalVisible = false;
+    this.$emit('onAddressDeleted');
+    this.$emit('onDataChanged');
   }
 
   private onViewAddressClick(): void {
@@ -120,5 +133,16 @@ export default class AddressHamburgerMenu extends Vue {
     } as RenameAddressParams);
     this.$emit('onDataChanged');
   }
+
+  private onAddressCopied(): void {
+    this.$bvToast.toast('Address copied', {
+      variant: 'success',
+      toaster: 'b-toaster-bottom-center',
+      solid: true,
+      autoHideDelay: 2000,
+      noCloseButton: true,
+      bodyClass: 'text-center font-weight-bold',
+    });
+  }
 }
 </script>

src/components/AddressList/AddressList.scss

@@ -1,6 +1,6 @@
 .card {
   &:hover {
-    transform: scale(1.05,1.05);
+    transform: scale(1.02,1.02);
     transition: all .2s ease-in-out;
     cursor: pointer;
     -webkit-box-shadow: 0px 0px 15px 0px rgba(207,207,207,1);

src/components/AddressList/AddressList.vue

@@ -1,39 +1,15 @@
 <template>
-  <b-overlay :show="loading" rounded="sm" spinner-variant="primary">
-    <b-row class="mt-4 mx-2">
-      <b-col cols="6" lg="10">
-        <b-card-title>Addresses</b-card-title>
-      </b-col>
-      <b-col cols="6" lg="2" class="text-right">
-        <b-button
-          size="sm"
-          pill
-          variant="outline-primary"
-          class="hover-button mr-2"
-          @click="onAddClick"
-        >
-          <fa icon="plus" />
-        </b-button>
-        <b-button
-          size="sm"
-          pill
-          variant="outline-primary"
-          class="hover-button"
-          @click="onRefreshClick"
-        >
-          <fa icon="sync-alt" />
-        </b-button>
-      </b-col>
-    </b-row>
+  <b-overlay :show="loading || preparingData" rounded="sm" spinner-variant="primary">
     <b-row>
       <b-col
         sm="12"
         md="6"
         lg="4"
         xl="3"
         :key="info.address"
-        v-for="info in rows"
+        v-for="info in addressRows"
         class="mt-3"
+        :style="`z-index: 5${1000-info.addressIndex}`"
       >
         <b-card @click="onCardClicked(info.accountIndex, info.addressIndex, $event)">
           <b-card-title class="mb-0">
@@ -46,6 +22,7 @@
                   :addressIndex="info.addressIndex"
                   :addressAlias="info.alias"
                   :address="info.address"
+                  @onDataChanged="rebuildAddressRows"
                 />
               </b-col>
             </b-row>
@@ -56,43 +33,58 @@
         </b-card>
       </b-col>
     </b-row>
-    <b-row v-if="rows.length===0 && !loading">
-      <b-alert show variant="info">
-        No available address.
-      </b-alert>
+    <b-row v-if="addressRows.length===0 && !loading" class="p-3">
+      You have no wallets at the moment.
     </b-row>
-
-
   </b-overlay>
 </template>
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 import { Getter } from 'vuex-class';
 import { AddressHamburgerMenu } from '@/components/AddressHamburgerMenu';
 import { WalletNetworkInfo } from '@/types';
 import { namespace as persisted } from '@/store/persisted';
+import { namespace as inMemory } from '@/store/inmemory';
+import { sdk } from '@/sdk';
+import { networkKindToCoin } from '@/utils';
 import { AddressListRowInfo } from './types';
+import { buildRowsFromState } from './utils';
 
 @Component({
   components: {
     AddressHamburgerMenu,
   },
 })
 export default class AddressList extends Vue {
-  @Prop({ type: Boolean, required: true }) loading = true;
-  @Prop({ type: Array, required: true }) rows!: Array<AddressListRowInfo>;
+  @Prop({ type: Boolean, required: true }) preparingData!: boolean;
+  @Getter('unlockPassword', { namespace: inMemory }) unlockPassword!: string;
   @Getter('selectedNetwork', { namespace: persisted }) selectedNetwork!: WalletNetworkInfo;
+  @Getter('selectedAccountIndex', { namespace: persisted }) selectedAccountIndex!: number;
+  @Getter('serializedVault', { namespace: inMemory }) serializedVault!: string;
+  private loading = true;
+  private vault: any;
+  private account: any;
+  private addressRows: Array<AddressListRowInfo> = [];
 
   get ticker(): string {
     return this.selectedNetwork.ticker;
   }
 
-  private onRefreshClick(): void {
-    this.$emit('onRefreshClicked');
+  private beforeMount(): void {
+    this.loading = true;
+    this.vault = sdk.Crypto.Vault.load(JSON.parse(this.serializedVault));
+    const hydraParams = new sdk.Crypto.HydraParameters(
+      networkKindToCoin(this.selectedNetwork.kind),
+      this.selectedAccountIndex,
+    );
+    sdk.Crypto.HydraPlugin.rewind(this.vault, this.unlockPassword, hydraParams);
+    this.account = sdk.Crypto.HydraPlugin.get(this.vault, hydraParams);
+    this.rebuildAddressRows();
   }
 
-  private onAddClick(): void {
-    this.$emit('onAddClicked');
+  private rebuildAddressRows(): void {
+    this.addressRows = buildRowsFromState(this.account, this.$store);
+    this.loading = false;
   }
 
   private onCardClicked(accountIndex: number, addressIndex: number, event: Event): void {

src/components/ConfirmTXModal/ConfirmTXModal.vue

@@ -22,7 +22,7 @@
 
         <b-list-group-item class="flex-column align-items-start">
           <div class="text-center">
-            <h3 class="my-4">
+            <h4 class="my-4">
               <template v-if="params.txType === TxType.TRANSFER">
                 <fa icon="arrow-down" />
                 {{ humanAmount }} {{ selectedNetwork.ticker }}
@@ -36,15 +36,15 @@
                 UNVOTE<br>
                 {{ params.target }}
               </template>
-            </h3>
+            </h4>
           </div>
         </b-list-group-item>
         <b-list-group-item
           class="flex-column align-items-start"
           v-if="params.txType === TxType.TRANSFER"
         >
           <div class="text-center">
-            <h5 class="mb-1">{{ params.target }}</h5>
+            <h6 class="mb-1">{{ params.target }}</h6>
           </div>
         </b-list-group-item>
       </b-list-group>

src/components/DelegatesList/DelegatesList.vue

@@ -82,7 +82,7 @@ export default class DelegatesList extends Vue {
   get delegatesTableFields(): Array<any> {
     const fields = [
       {
-        key: 'rank', label: 'Rank', thClass: 'delegatesRankCol', tdClass: 'text-center',
+        key: 'rank', label: '#', thClass: 'delegatesRankCol text-center', tdClass: 'text-center',
       },
       { key: 'username', label: 'Username', thClass: 'delegatesUsernameCol' },
     ];