Merge branch 'master' into feature/view-per-account-transactions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ldpos-wallet",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "private": true,
   "description": "A LDPoS Wallet application",
   "author": {
@@ -41,6 +41,7 @@
     "@vue/cli-plugin-router": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
     "@vue/compiler-sfc": "^3.2.19",
+    "cypress-wait-until": "^1.7.1",
     "electron": "^11.4.8",
     "electron-devtools-installer": "^3.1.0",
     "vue-cli-plugin-electron-builder": "~2.1.1"

src/components/Copy.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="nowrap">
     <template v-if="value">
-      <span ref="copyRef">{{ shrink ? shrinkValue(value) : value }}</span>
+      <span ref="copyRef" :class="{ wrap, ellipsis }">{{
+        shrink ? shrinkValue(value) : value
+      }}</span>
       <i
         class="far fa-copy cursor-pointer pl-1"
         @click.prevent.stop
@@ -20,6 +22,8 @@ export default {
   props: {
     value: { type: [String, Number], default: '' },
     shrink: { type: Boolean, default: false },
+    wrap: { type: Boolean, default: false },
+    ellipsis: { type: Boolean, default: false },
   },
   setup(props) {
     const store = inject('store');

src/components/DataTable.vue

@@ -125,6 +125,7 @@ export default {
     offset: { type: Number, default: 0 },
     arg: { type: String, default: null },
     prefix: { type: String, default: null },
+    prependFn: { type: Function, default: null },
   },
   setup(props, { emit, slots }) {
     const store = inject('store');
@@ -274,7 +275,8 @@ export default {
         store.toggleOrBrowseModal({
           type: DETAIL_MODAL,
           data,
-          hasPrefix: props.prefix ? true : false,
+          hasPrefix: !!props.prefix,
+          prependFn: props.prependFn,
         });
       },
       hasHeaderSlot: !!slots.header,

src/components/DetailedData.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex column fullwidth">
-    <template v-for="(value, key) in data" :key="key">
+    <template v-for="(value, key) in detailedData" :key="key">
       <div v-if="!Array.isArray(value)" class="flex column my-2 px-1">
         <div class="title">
           <strong>{{ transformTitle(key) }}</strong>
         </div>
         <div>
-          <Copy :value="transformValue(key, value)" />
+          <Copy wrap :value="transformValue(key, value)" />
         </div>
       </div>
       <div v-else class="my-2">
@@ -15,16 +15,21 @@
         </div>
         <div>
           <div v-for="(a, i) in value" :key="i">
-            <template v-for="(v, k) in a" :key="k">
-              <div class="flex">
-                <div class="flex-2">
-                  <strong class="subtitle">{{ transformTitle(k) }}:</strong>
+            <template v-if="typeof a === 'object'">
+              <template v-for="(v, k) in a" :key="k">
+                <div class="flex">
+                  <div class="flex-2">
+                    <strong class="subtitle">{{ transformTitle(k) }}:</strong>
+                  </div>
+                  <div class="flex-9">
+                    <Copy :value="v" />
+                  </div>
                 </div>
-                <div class="flex-9">
-                  <Copy :value="v" />
-                </div>
-              </div>
+              </template>
             </template>
+            <div class="flex" v-else>
+              -&nbsp; <Copy wrap :value="transformValue(key, a)" />
+            </div>
           </div>
         </div>
       </div>
@@ -34,7 +39,7 @@
 </template>
 
 <script>
-import { inject } from 'vue';
+import { inject, onMounted, onUnmounted, reactive } from 'vue';
 import {
   _parseDate,
   _transformMonetaryUnit,
@@ -48,6 +53,7 @@ export default {
   name: 'DetailedData',
   props: {
     data: { type: Object, default: {} },
+    prependFn: { type: Function, default: null },
   },
   components: { Copy },
   setup(props) {
@@ -57,6 +63,15 @@ export default {
       timestamp: 'Date',
     };
 
+    const detailedData = reactive({ ...props.data });
+
+    onMounted(async () => {
+      if (props.prependFn) {
+        const { key, value } = await props.prependFn(detailedData);
+        detailedData[key] = value;
+      }
+    });
+
     const valueTransformations = {
       timestamp: val => _parseDate(val),
       balance: val =>
@@ -74,6 +89,7 @@ export default {
       valueTransformations[key] ? valueTransformations[key](value) : value;
 
     return {
+      detailedData,
       transformTitle,
       transformValue,
     };

src/components/Modal.vue

@@ -130,17 +130,17 @@ export default {
 @media screen and (max-width: 768px) {
   .wrapper {
     width: 100vw;
-    height: 100vh;
-    max-height: 100vh;
+    height: 100%;
+    max-height: 100%;
   }
 
   .section {
     border-radius: 0 !important;
-    padding: var(--unit-2) var(--unit-2) var(--unit-2) var(--unit-2);
+    padding: var(--unit-2) 0;
   }
 
   .force-modal-scroll {
-    max-height: 100vh;
+    max-height: 95vh;
   }
 
   .close-btn {

src/components/Notification.vue

@@ -12,7 +12,7 @@
       "
     >
       <div class="close-btn cursor-pointer" @click="denotify(i)">&#10005;</div>
-      <div class="break mr-2">{{ notification.message }}</div>
+      <div class="wrap mr-2">{{ notification.message }}</div>
     </div>
   </template>
 </template>

src/components/Section.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="section pa-2">
-    <h2 v-if="title" :class="{ 'ml-4': backButton }">{{ title }}</h2>
+    <div>
+      <h2 v-if="title" :class="{ 'ml-4': backButton }">{{ title }}</h2>
+    </div>
 
     <Loading v-if="loading" />
     <p v-else-if="!loading && error" class="text-danger">

src/components/Wallet.vue

@@ -286,6 +286,7 @@ export default {
             )} will be deducted from your account.`,
             showCancelButton: true,
           });
+
           if (response) {
             const newNextForgingKeyIndex = 0;
             if (!passphrase.value)

src/components/modals/DetailModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <DetailedData :data="data" />
+  <DetailedData :data="data" :prepend-fn="prependFn" />
 </template>
 
 <script>
@@ -14,6 +14,7 @@ export default {
 
     return {
       data: computed(() => store.state.modal.data),
+      prependFn: store.state.modal.prependFn,
     };
   },
   components: { DetailedData },

src/store/index.js

@@ -138,6 +138,7 @@ export default {
     title = null,
     back = false,
     hasPrefix = false,
+    prependFn = null,
   } = {}) {
     // We changed the URL on opening the modal we need to change it back when we close it.
     if (state.modal.routerGoBack) {
@@ -154,12 +155,13 @@ export default {
       state.modal.stack = [];
     } else {
       if (back) state.modal.stack = state.modal.stack.slice(0, -1);
-      else state.modal.stack.push({ type, data, title });
+      else state.modal.stack.push({ type, data, title, prependFn });
 
       const i = state.modal.stack.length - 1;
       state.modal.type = state.modal.stack[i].type;
       state.modal.title = state.modal.stack[i].title;
       state.modal.data = state.modal.stack[i].data;
+      state.modal.prependFn = state.modal.stack[i].prependFn;
       state.modal.active = true;
     }
 

src/styles/main.css

@@ -240,7 +240,7 @@ th {
 }
 
 .text-center {
-  text-align: center;
+  text-align: center !important;
 }
 
 .fullwidth {
@@ -493,8 +493,10 @@ th {
   position: absolute;
 }
 
-.break {
+.wrap {
   word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: initial !important;
 }
 
 .bg-primary-darker {
@@ -567,6 +569,10 @@ th {
   display: none;
 }
 
+.ellipsis {
+  text-overflow: ellipsis;
+}
+
 @media screen and (max-width: 768px) {
   .flex-3 {
     flex-basis: 100%;

src/utils.js

@@ -28,9 +28,15 @@ export const _parseDate = d => {
     timeStyle: 'short',
   };
 
-  if (!isToday) options.dateStyle = 'short';
+  const formattedDate = new Intl.DateTimeFormat('nl-BE', options).format(d);
 
-  return new Intl.DateTimeFormat('nl-BE', options).format(d);
+  if (isToday) {
+    return `Today at ${formattedDate}`;
+  } else {
+    options.dateStyle = 'short';
+  }
+
+  return formattedDate;
 };
 
 export const _transformMonetaryUnit = (amount, symbol = 'CLSK') =>

src/views/Accounts.vue

@@ -5,6 +5,7 @@
     clickable
     fn="getAccountsByBalance"
     prefix="accounts"
+    :prependFn="getVotes"
   >
     <template v-slot:address="slotProps">
       <Copy :value="slotProps.row.address" :shrink="slotProps.shrink" />
@@ -79,6 +80,11 @@ export default {
       columns,
       viewAccountTransactions: address =>
         router.push(`/accounts/${address}/transactions`),
+      getVotes: async account => {
+        const votes = await store.client.value.getAccountVotes(account.address);
+
+        return { key: 'votes', value: votes };
+      },
     };
   },
   components: { DataTable, Navbar, Copy, Button },

src/views/Delegates.vue

@@ -28,6 +28,7 @@
     fn="getDelegatesByVoteWeight"
     clickable
     prefix="delegates"
+    :prependFn="getVotes"
   >
     <template v-slot:vote="slotProps">
       <Button
@@ -179,7 +180,6 @@ export default {
               : 'Vote for delegate via ldpos-wallet',
           });
         } else {
-          debugger;
           voteTxn = await store.client.value.prepareTransaction({
             type: 'vote',
             delegateAddress: vote.value,
@@ -225,6 +225,11 @@ export default {
       },
       delegateCount,
       recentForgers,
+      getVotes: async account => {
+        const votes = await store.client.value.getAccountVotes(account.address);
+
+        return { key: 'votes', value: votes };
+      },
     };
   },
   components: { Navbar, Button, DataTable, Input, Section, Copy, Dot },

tests/e2e/specs/modal.spec.js

@@ -10,4 +10,17 @@ describe('Modal tests', () => {
 
     cy.get('.close-btn').click();
   });
+
+  it('should open a stacked modal', () => {
+    cy.visit('/');
+    cy.get('a.first')
+      .contains('CLSK')
+      .click();
+
+    cy.get('a.button')
+      .contains('Add blockchain')
+      .click();
+
+    cy.get('.back-btn')
+  });
 });