Make multiTx modal, limit to 20 actions / transactions

components/modals/MultiTx.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-if="visible && current === 'MultiTx'" class="modal-container multitx">
+    <div class="modal-layerclose" @click="close"></div>
+    <div class="modal-content">
+      <div class="modal-xmark neon-button"><fa-icon @click="close" :icon="['fas','xmark']" /></div>
+      <h2>Sign transactions</h2>
+      <p>Please sign several transactions</p>
+      <ul>
+      	<li @click="sendTx(i)" v-for="(acts, i) in actions">
+      		<span>Transaction {{ i + 1 }}</span>
+      		<div v-if="results[i] === 'loading'"><ClipLoader color="#ff00ec"/></div>
+      		<div v-else-if="results[i] === 'sent'"><fa-icon :icon="['fas','check']" /></div>
+      		<button v-else class="neon-button">Sign</button>
+      	</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+import ClipLoader from 'vue-spinner/src/ClipLoader.vue'
+
+export default {
+  components: {
+		ClipLoader
+  },
+
+
+  computed: {
+    ...mapState('modal', ['current', 'visible']),
+    ...mapState('MultiTx', ['actions', 'results']),
+  },
+
+  mounted() {
+
+  },
+
+  methods: {
+    close() {
+      this.$store.dispatch('modal/closeModal')
+    },
+    ...mapActions('MultiTx', ['sendTx'])
+  }
+}
+</script>
+<style scoped>
+.modal-content ul {
+	margin-top: 1em;
+}
+.modal-content ul li {
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	margin-bottom: 0.5em;
+}
+.modal-content ul li div {
+	width: 52px;
+	height: 42px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.modal-content ul li .svg-inline--fa {
+	color: #ff00ec;
+}
+</style>

layouts/default.vue

@@ -16,4 +16,49 @@ export default {
 }
 </script>
 
+<style>
+.modal-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 200;
+    text-align: center;
+  }
+  .modal-layerclose {
+    background: rgba(0, 0, 0, 0.6);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 200;
+  }
+  .modal-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 800px;
+    padding: 0 30px;
+    background: rgba(0, 0, 0, 0.8);
+    z-index: 201;
+    border: 5px solid #ff00ec;
+    animation: boxPinkPulsate 1.5s infinite alternate;
+  }
+  .modal-content .modal-xmark {
+    display: inline-block;
+    font-size: 30px;
+    position: absolute;
+    right: 40px;
+    top: 15px;
+    padding: 0 5px;
+    transition: 0.2s;
+    cursor: pointer;
+  }
+  .modal-content h2 {
+    color: #fff;
+    animation: neonPinkPulsate 2.5s infinite alternate; 
+  }
 </style>

pages/index.vue

@@ -1,19 +1,22 @@
 <template>
   <div>
     <LoginModal />
+    <MultiTxModal />
     <LPdistrib/>
     <notifications position="bottom right" classes="neonnotifications"/>
   </div>
 </template>
 
 <script>
 import LoginModal from '~/components/modals/Login.vue'
+import MultiTxModal from '~/components/modals/MultiTx.vue'
 
 export default {
   name: 'IndexPage',
   layout: 'default',
   components: {
-    LoginModal
+    LoginModal,
+    MultiTxModal
   },
 }
 </script>

store/MultiTx.js

@@ -0,0 +1,58 @@
+export const state = () => ({
+  actions: [], // array of array of actions
+  results: [], // array of tx state
+})
+
+export const mutations = {
+	setActions: (state, actions) => state.actions = actions,
+	setResults: (state, results) => state.results = results,
+}
+
+export const actions = {
+	async sendTx({commit, dispatch, state}, i) {
+		dispatch('chain/sendTransaction',
+		  {
+		    updateRoute: 'MultiTx/TxSent',
+		    updateFailedRoute: 'MultiTx/TxFailed',
+		    updateDelay: 500,
+		    updateParam: i,
+		    actions: state.actions[i]
+		  },
+		  {root: true}
+		)
+
+		let results = state.results.slice()
+		results[i] = 'loading'
+		commit('setResults', results)
+	},
+	async TxSent({commit, state}, {updateParam}) {
+    let results = state.results.slice()
+		results[updateParam] = 'sent'
+		commit('setResults', results)
+  },
+  async TxFailed({commit, state}, {updateParam}) {
+    let results = state.results.slice()
+		results[updateParam] = 'ready'
+		commit('setResults', results)
+  },
+	initModal({commit, dispatch}, actions) {
+		const maxTx = 20
+
+		let commitActions = [];
+		let commitResults = [];
+		commit('setActions', commitActions)
+	  commit('setResults', commitResults)
+	  for (let i = 0; i < actions.length; i += maxTx) {
+	    commitActions.push(actions.slice(i, i + maxTx))
+	    commitResults.push('ready')
+	  }
+	  commit('setActions', commitActions)
+	  commit('setResults', commitResults)
+
+	  dispatch('modal/open', 'MultiTx', {root: true})
+	}
+}
+
+export const getters = {
+
+}

store/chain.js

@@ -97,15 +97,19 @@ export const actions = {
         }
       })
     }
-    return dispatch('sendTransaction',
-      {
-        updateRoute: null,
-        updateDelay: 4000,
-        actions: actions
-      }
-    )
+    if(actions.length > 20)
+      return dispatch('MultiTx/initModal', actions, {root: true})
+    else
+      return dispatch('sendTransaction',
+        {
+          updateRoute: null,
+          updateDelay: 4000,
+          actions: actions
+        }
+      )
   },
-  async sendTransaction({ state, rootState, dispatch, getters, commit }, {actions, updateRoute, updateDelay, updateParam}) {
+  async sendTransaction({ state, rootState, dispatch, getters, commit }, {actions, updateRoute, updateFailedRoute, updateDelay, updateParam}) {
+    let failed = false
     try {
       const res = await getters.wallet.transact(actions)
       let tx_id = res.transaction_id
@@ -121,15 +125,19 @@ export const actions = {
       })
       return res
     } catch (e) {
+      failed = true
       this._vm.$notify({
         duration: this.$notificationDuration,
         type: 'error',
         title: 'Transaction error',
-        text: e
+        text: (e.message !== undefined) ? e.message : e
       })
-      //throw e
+      if(updateFailedRoute === undefined)
+        throw e
+      else
+        setTimeout(() => {dispatch(updateFailedRoute, {updateParam, e}, { root: true })}, updateDelay)
     } finally {
-      if(updateRoute !== null)
+      if((!failed && updateFailedRoute !== undefined) || updateFailedRoute === undefined)
         setTimeout(() => {dispatch(updateRoute, {updateParam}, { root: true })}, updateDelay)
     }
   }

store/modal.js

@@ -13,6 +13,10 @@ export const actions = {
     commit('setCurrent', 'login') 
     commit('setVisible', true)
   },
+  open({commit, dispatch}, name) {
+    commit('setCurrent', name) 
+    commit('setVisible', true)
+  },
   closeModal({ commit }) {
     commit('setVisible', false)
   }