123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217 |
- <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>
|