forked from go/golangs_learn
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
303 lines
9.4 KiB
303 lines
9.4 KiB
<template>
|
|
<div :class="darkMode ? 'theme--dark' : 'theme--light'">
|
|
<vue-progress-bar></vue-progress-bar>
|
|
<div :class="{'nav-open': $sidebar.showSidebar}">
|
|
<notifications></notifications>
|
|
<router-view></router-view>
|
|
</div>
|
|
<page-overlay text="Applying Update. Please wait..." :isActive="overlay" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
import ErrorNotification from "./pages/Notifications/ErrorMessage";
|
|
import WarningNotification from "./pages/Notifications/Warning";
|
|
import SuccessNotification from "./pages/Notifications/Success";
|
|
import NewRelease from "./pages/Notifications/NewRelease";
|
|
import Swal from "sweetalert2/dist/sweetalert2";
|
|
|
|
export default {
|
|
components: {
|
|
},
|
|
computed: {
|
|
...mapState('app', ['isLoggedIn', 'downloading']),
|
|
...mapState('wallet', ['darkMode'])
|
|
},
|
|
data() {
|
|
return {
|
|
overlay: false
|
|
};
|
|
},
|
|
onIdle() {
|
|
let timerInterval, closeInSeconds = 10
|
|
const swalPopup = Swal.mixin({
|
|
customClass: {
|
|
container: this.darkMode
|
|
? "theme--dark"
|
|
: "theme--light"
|
|
}
|
|
});
|
|
if (this.isLoggedIn) {
|
|
swalPopup.fire({
|
|
title: "You have been idle for 5 minutes.",
|
|
html: "To keep your Molly wallet safe from unauthorised access it will automatically logout in <b>10</b> seconds",
|
|
showConfirmButton: false,
|
|
showCancelButton: false,
|
|
timer: closeInSeconds * 1000,
|
|
timerProgressBar: true,
|
|
onBeforeOpen: () => {
|
|
Swal.showLoading();
|
|
timerInterval = setInterval(() => {
|
|
closeInSeconds--;
|
|
const content = Swal.getContent();
|
|
if (content) {
|
|
const b = content.querySelector('b');
|
|
if (b) {
|
|
b.textContent = closeInSeconds;
|
|
}
|
|
}
|
|
}, 1000)
|
|
},
|
|
onClose: () => {
|
|
clearInterval(timerInterval)
|
|
}
|
|
}).then(() => {
|
|
if (this.$store.state.idleVue.isIdle) {
|
|
window.backend.WalletApplication.LogOut().then(txFinishedState => {
|
|
if (txFinishedState) {
|
|
this.logout();
|
|
}
|
|
}), (this.random = "1");
|
|
}
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
// Backend Errors
|
|
window.wails.Events.On("error_handling", (m, err) => {
|
|
this.$store.commit('app/setErrorMessage', m + err);
|
|
this.$notifications.clear();
|
|
setTimeout(() => {
|
|
this.$notifications.clear();
|
|
}, 60000);
|
|
this.$notify({
|
|
component: ErrorNotification,
|
|
timeout: 50000,
|
|
icon: "fa fa-times",
|
|
horizontalAlign: "right",
|
|
verticalAlign: "top",
|
|
type: "danger",
|
|
onClick: () => {
|
|
this.$notifications.clear();
|
|
}
|
|
});
|
|
});
|
|
|
|
window.wails.Events.On("warning", m => {
|
|
this.$store.commit('app/setWarningMessage', m);
|
|
this.$notifications.clear();
|
|
setTimeout(() => {
|
|
this.$notifications.clear();
|
|
}, 60000);
|
|
this.$notify({
|
|
component: WarningNotification,
|
|
timeout: 50000,
|
|
icon: "fa fa-times",
|
|
horizontalAlign: "right",
|
|
verticalAlign: "top",
|
|
type: "warning",
|
|
onClick: () => {
|
|
this.$notifications.clear();
|
|
}
|
|
});
|
|
});
|
|
|
|
window.wails.Events.On("success", m => {
|
|
this.$store.commit('app/setSuccessMessage', m);
|
|
this.$notifications.clear();
|
|
setTimeout(() => {
|
|
this.$notifications.clear();
|
|
}, 60000);
|
|
this.$notify({
|
|
component: SuccessNotification,
|
|
timeout: 50000,
|
|
icon: "fa fa-check",
|
|
horizontalAlign: "right",
|
|
verticalAlign: "top",
|
|
type: "success",
|
|
onClick: () => {
|
|
this.$notifications.clear();
|
|
}
|
|
});
|
|
});
|
|
|
|
window.wails.Events.On("new_release", m => {
|
|
this.$store.commit('app/setNewRelease', m);
|
|
var self = this;
|
|
this.$notifications.clear();
|
|
this.$notify({
|
|
component: NewRelease,
|
|
timeout: 500000,
|
|
icon: "fa fa-info",
|
|
horizontalAlign: "right",
|
|
verticalAlign: "bottom",
|
|
type: "info",
|
|
onClick: () => {
|
|
const swalPopup = Swal.mixin({
|
|
customClass: {
|
|
container: this.darkMode
|
|
? "theme--dark"
|
|
: "theme--light"
|
|
}
|
|
|
|
});
|
|
|
|
swalPopup.fire({
|
|
title: "Update Molly Wallet",
|
|
html: "Do you want to update your Molly Wallet? Selecting update will download the latest build and apply the update. <br><br> <b>The application will restart once update is complete. </b>",
|
|
showCloseButton: true,
|
|
showCancelButton: true,
|
|
focusConfirm: false,
|
|
confirmButtonText:
|
|
'<i class="fa fa-thumbs-up"></i> <b>Update</b>',
|
|
confirmButtonAriaLabel: "Text",
|
|
cancelButtonText:
|
|
'Cancel',
|
|
cancelButtonAriaLabel: "Cancel"
|
|
}).then(result => {
|
|
if (result.value) {
|
|
self.$Progress.start(2000);
|
|
self.overlay = true;
|
|
window.backend.WalletApplication.UpdateMolly()
|
|
self.$notifications.clear();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
window.wails.Events.On("login_error", (m, err) => {
|
|
this.$store.commit('app/setLoginErrorMessage', m);
|
|
this.$store.commit('app/setDisplayLoginError', err);
|
|
setTimeout(() => {
|
|
this.$store.commit('app/setDisplayLoginError', false);
|
|
}, 10000);
|
|
});
|
|
|
|
// Transactions.vue sockets
|
|
window.wails.Events.On("update_tx_history", txHistoryFull => {
|
|
if (Object.entries(txHistoryFull).length != 0) {
|
|
this.$store.commit({type: 'transaction/updateFullTxHistory', txHistoryFull});
|
|
}
|
|
});
|
|
window.wails.Events.On("tx_in_transit", txFinished => {
|
|
this.$store.commit('transaction/setTxFinished', txFinished);
|
|
});
|
|
window.wails.Events.On("new_transaction", txObject => {
|
|
this.$store.commit("transaction/updateTxHistory", txObject);
|
|
});
|
|
window.wails.Events.On("tx_pending", txStatus => {
|
|
this.$store.commit("transaction/updateTxStatus", txStatus);
|
|
});
|
|
|
|
window.wails.Events.On("downloading", (filename, size) => {
|
|
if (this.downloading.filename !== filename) {
|
|
this.$store.commit('app/setDownloadFileName', filename);
|
|
}
|
|
this.$store.commit('app/setDownloadFileSize', size);
|
|
});
|
|
|
|
// Login.vue sockets
|
|
// window.wails.Events.On("registeredLogin", event => {});
|
|
|
|
// Dashboard.vue sockets
|
|
window.wails.Events.On("token", (amount, available, total) => {
|
|
this.$store.commit('wallet/setTokenAmount', amount);
|
|
this.$store.commit('wallet/setAvailableBalance', available);
|
|
this.$store.commit('wallet/setTotalBalance', total);
|
|
});
|
|
window.wails.Events.On("blocks", number => {
|
|
this.$store.commit('dashboard/setBlocks', number);
|
|
});
|
|
window.wails.Events.On("totalValue", (currency, value) => {
|
|
this.$store.commit('wallet/setCurrency', currency);
|
|
this.$store.commit('wallet/setTotalValue', value);
|
|
});
|
|
window.wails.Events.On("token_counter", count => {
|
|
this.$store.commit('dashboard/setTokenCounter', count);
|
|
});
|
|
window.wails.Events.On("value_counter", valueCount => {
|
|
this.$store.commit('dashboard/setValueCounter', valueCount);
|
|
});
|
|
window.wails.Events.On("block_counter", blockCount => {
|
|
this.$store.commit('dashboard/setBlockCounter', blockCount);
|
|
});
|
|
window.wails.Events.On("chart_counter", pieChartCount => {
|
|
this.$store.commit('dashboard/setChartCounter', pieChartCount);
|
|
});
|
|
window.wails.Events.On("node_stats", (series, labels) => {
|
|
if (Object.entries(series).length != 0 &&
|
|
Object.entries(labels).length != 0) {
|
|
this.$store.commit({type: 'dashboard/setNodeOnlineChart', series, labels});
|
|
}
|
|
});
|
|
window.wails.Events.On("tx_stats", (seriesOne, seriesTwo, labels) => {
|
|
if (Object.entries(seriesOne).length != 0 &&
|
|
Object.entries(seriesTwo).length != 0 &&
|
|
Object.entries(labels).length != 0) {
|
|
this.$store.commit({type: 'dashboard/setTransactionStatsChart', seriesOne, seriesTwo, labels});
|
|
}
|
|
});
|
|
window.wails.Events.On("network_stats", (seriesOne, seriesTwo, labels) => {
|
|
if (Object.entries(seriesOne).length != 0 &&
|
|
Object.entries(seriesTwo).length != 0 &&
|
|
Object.entries(labels).length != 0) {
|
|
this.$store.commit({type: 'dashboard/setNetworkStatsChart', seriesOne, seriesTwo, labels});
|
|
}
|
|
});
|
|
|
|
// Settings.vue sockets
|
|
window.wails.Events.On("wallet_keys", address => {
|
|
this.$store.commit('wallet/setAddress', address);
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.vue-notifyjs.notifications {
|
|
.alert {
|
|
z-index: 10000;
|
|
font-size: 0.875rem;
|
|
}
|
|
.alert[data-notify="container"] {
|
|
width: 21.875rem;
|
|
}
|
|
.alert-icon {
|
|
margin-left: -0.5em;
|
|
margin-top: -0.5em;
|
|
}
|
|
.list-move {
|
|
transition: transform 0.3s, opacity 0.4s;
|
|
}
|
|
.list-item {
|
|
display: inline-block;
|
|
margin-right: 0.625em;
|
|
}
|
|
.list-enter-active {
|
|
transition: transform 0.2s ease-in, opacity 0.4s ease-in;
|
|
}
|
|
.list-leave-active {
|
|
transition: transform 1s ease-out, opacity 0.4s ease-out;
|
|
}
|
|
.list-enter {
|
|
opacity: 0;
|
|
transform: scale(1.1);
|
|
}
|
|
.list-leave-to {
|
|
opacity: 0;
|
|
transform: scale(1.2, 0.7);
|
|
}
|
|
}
|
|
</style>
|
|
|