Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <template>
<div class="row q-mt-lg flex justify-center">
<q-card
v-dm-class="{ dark: 'bg-grey-9', light: 'bg-green-1' }"
class="col-xs-12 col-sm-10 col-md-8 col-lg-6 q-pa-lg"
>
<div class="q-pa-lg text-center">
<span class="text-h5">{{ $t("not_auth.connect_to_metamask") }}</span>
<div class="text-center q-py-lg">
<a href="https://metamask.io" rel="noreferrer" target="_blank">
<img
class="metamask-img"
src="~/assets/download-metamask.png"
alt="download metamask"
/>
</a>
</div>
<div class="text-center q-pt-lg">
<q-btn
class="q-pa-md"
size="md"
icon="fas fa-redo-alt fa-2x"
:label="$t('not_auth.retry_btn')"
color="info"
@click="initializeWeb3"
/>
</div>
</div>
</q-card>
</div>
</template>
<script lang="ts">
import { mapActions } from "vuex";
import { ActionsName } from "src/store";
import { Vue, Component, Prop } from "vue-property-decorator";
import { darkModeClassDirectives } from "src/directives/darkModeClass";
@Component({
name: "NotAuthComponent",
directives: {
"dm-class": darkModeClassDirectives
},
methods: {
...mapActions({ initializeWeb3: ActionsName.web3.initializeWeb3 })
}
})
class NotAuthComponent extends Vue {}
export default NotAuthComponent;
</script>
<style scoped>
.metamask-img {
max-width: 400px;
width: 100%;
height: auto;
}
</style>
|