classic-ui/layouts/default.vue
2022-07-11 17:15:23 +10:00

217 lines
5.4 KiB
Vue

<template>
<div class="wrapper">
<Navbar />
<div v-show="mismatchNetwork" class="network has-background-warning">
{{ $t('pleaseChangeNetwork', { network: netId }) }}
<b-button type="is-warning is-dark" class="ml-3" @click="changeNetwork">{{
$t('changeNetwork')
}}</b-button>
</div>
<section class="main-content section">
<div class="container">
<nuxt />
</div>
</section>
<Footer />
<Loader />
<Notices />
<v-idle
v-if="isSetupAccount && !isOpen"
v-show="false"
:loop="true"
:duration="300"
@idle="handleOpenModal"
/>
</div>
</template>
<script>
/* eslint-disable no-console */
import { mapGetters, mapActions } from 'vuex'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import Loader from '@/components/Loaders/Loader'
import Settings from '@/components/Settings'
import Notices from '@/components/Notices'
import { openConfirmModal } from '@/modules/account'
import NetworkModal from '@/components/NetworkModal'
export default {
middleware: 'provider',
components: {
Navbar,
Footer,
Loader,
Notices
},
data() {
return {
isOpen: false
}
},
computed: {
...mapGetters('encryptedNote', ['isSetupAccount']),
...mapGetters('metamask', ['netId', 'mismatchNetwork']),
...mapGetters('encryptedNote', ['accounts'])
},
watch: {
netId(value, oldValue) {
if (value !== oldValue) {
this.checkRecoveryKey()
}
}
},
created() {
this.checkRecoveryKey()
this.newNotify()
this.$store.dispatch('gasPrices/setDefault')
},
mounted() {
this.$preventMultitabs()
window.addEventListener('focus', this.$preventMultitabs)
if (process.browser) {
window.onNuxtReady(() => {
setTimeout(async () => {
await this.selectRpc({ netId: this.netId, action: this.checkCurrentRpc })
if (this.netId !== 1) {
await this.selectRpc({ netId: 1, action: this.preselectRpc })
}
this.$store.dispatch('gasPrices/fetchGasPrice')
this.$store.dispatch('price/fetchTokenPrice', {}, { root: true })
try {
this.$store.dispatch('application/loadAllNotesData')
this.$nextTick(() => {
this.$nuxt.$loading.start()
let progress = 0
const increase = () => {
progress++
setTimeout(() => {
this.$nuxt.$loading.increase(5)
if (progress < 15) {
increase()
}
}, 500)
}
increase()
this.$nuxt.$loading.finish()
})
} catch (e) {
console.error('default', e)
}
this.$store.dispatch('relayer/runAllJobs')
this.$store.dispatch('governance/gov/checkActiveProposals')
}, 500)
})
}
},
beforeDestroy() {
window.removeEventListener('focus', this.$preventMultitabs)
},
methods: {
...mapActions('settings', ['checkCurrentRpc', 'preselectRpc']),
checkRecoveryKey() {
this.$store.dispatch('encryptedNote/checkRecoveryKey', {}, { root: true })
},
changeNetwork() {
this.$buefy.modal.open({
parent: this,
component: NetworkModal,
hasModalCard: true,
width: 440
})
},
newNotify() {
const hasNotify = window.localStorage.getItem('hasNotify')
if (!hasNotify) {
this.$store.dispatch(
'notice/addNotice',
{
notice: {
untranslatedTitle: 'New version',
type: 'info',
nova: true
},
interval: 10000
},
{ root: true }
)
window.localStorage.setItem('hasNotify', true)
}
},
handleOpenModal() {
const recoveryKey = this.$sessionStorage.getItem(this.accounts.encrypt)
if (recoveryKey) {
this.isOpen = true
openConfirmModal({
onCancel: () => {
this.isOpen = false
this.$sessionStorage.clear()
this.checkRecoveryKey()
},
onConfirm: () => {
this.isOpen = false
},
parent: this
})
}
},
async selectRpc({ netId, action }) {
try {
await action({ netId })
} catch (e) {
console.error(e)
this.$buefy.snackbar.open({
message: this.$t('rpcSelectError'),
type: 'is-danger',
duration: 10000,
indefinite: true,
position: 'is-top',
actionText: 'Open Settings',
onAction: () => {
this.$buefy.modal.open({
parent: this,
component: Settings,
hasModalCard: true,
width: 440,
customClass: 'is-pinned',
props: {
netId
},
onCancel: () => {
this.selectRpc({ netId, action })
}
})
}
})
}
}
}
}
</script>
<style lang="scss" scoped>
.network {
color: white;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
margin-top: 1rem;
::v-deep .is-dark {
background-color: darken(#ff8a00, 15);
font-size: 0.9rem;
&:hover {
background-color: darken(#ff8a00, 10);
}
}
}
</style>