classic-ui/layouts/error.vue

77 lines
1.7 KiB
Vue
Raw Normal View History

2022-04-22 06:05:56 +03:00
<template>
<div class="has-text-centered">
2022-05-27 12:28:20 +03:00
<ErrorIcon :is404="statusCode === 404" />
2022-04-22 06:05:56 +03:00
<h1 class="title is-1">{{ $t('errorPage.title') }}</h1>
2022-05-27 12:28:20 +03:00
<template v-if="statusCode === 204">
<p class="p mb-6">
{{
$t('errorPage.switchNetwork.description', {
pageName: $t(`errorPage.switchNetwork.pageName.${error.pageName}`)
})
}}
</p>
<b-button type="is-primary" icon-left="logo" outlined @click="handleSwitchNetwork">{{
$t('errorPage.switchNetwork.button')
}}</b-button>
</template>
<template v-else>
<p class="p mb-6">{{ $t('errorPage.description') }}</p>
<b-button type="is-primary" icon-left="logo" outlined @click="handleRedirect">{{
$t('errorPage.button')
}}</b-button>
</template>
2022-04-22 06:05:56 +03:00
</div>
</template>
<script>
2022-05-27 12:28:20 +03:00
import { mapActions } from 'vuex'
import { ErrorIcon } from '@/components/icons'
2022-04-22 06:05:56 +03:00
export default {
name: 'ErrorPage',
components: {
2022-05-27 12:28:20 +03:00
ErrorIcon
2022-04-22 06:05:56 +03:00
},
2022-05-27 12:28:20 +03:00
props: {
error: {
type: Object,
default: null
}
},
computed: {
statusCode() {
return this.error?.statusCode || 404
}
2022-04-22 06:05:56 +03:00
},
methods: {
2022-05-27 12:28:20 +03:00
...mapActions('metamask', ['networkChangeHandler']),
2022-04-22 06:05:56 +03:00
handleRedirect() {
this.$router.push('/')
2022-05-27 12:28:20 +03:00
},
async handleSwitchNetwork() {
const providerName = window.localStorage.getItem('provider')
await this.networkChangeHandler({ netId: 1 })
if (!providerName) {
this.$router.go()
}
2022-04-22 06:05:56 +03:00
}
},
head() {
return {
bodyAttrs: {
class: 'is-centered-main-content'
}
}
}
}
</script>
2022-05-27 12:28:20 +03:00
<style scoped>
.p {
max-width: 560px;
margin: 0 auto;
}
</style>