78 lines
2.8 KiB
Vue
78 lines
2.8 KiB
Vue
<script>
|
||
import PageTitle from '../components/PageTitle.vue'
|
||
import detectEthereumProvider from '@metamask/detect-provider'
|
||
import WarningModal from '../components/WarningModal.vue'
|
||
import SuccessModal from '../components/SuccessModal.vue'
|
||
import { useClientStore } from '../stores/Client.js'
|
||
|
||
export default {
|
||
components: { PageTitle, WarningModal, SuccessModal },
|
||
data () {
|
||
return {
|
||
warningModalStatus: false,
|
||
successModalStatus: false,
|
||
msg: '',
|
||
client: useClientStore()
|
||
}
|
||
},
|
||
methods: {
|
||
async detect () {
|
||
const provider = await detectEthereumProvider()
|
||
if (provider) {
|
||
const chainId = await window.ethereum.request({ method: 'eth_chainId' })
|
||
console.log(chainId)
|
||
if (chainId == import.meta.env.VITE_CHAIN_ID) {
|
||
const account = await window.ethereum.request({ method: 'eth_requestAccounts' })
|
||
this.client.address = account[0]
|
||
this.client.linked = true
|
||
this.msg = '已經成功連接 MetaMask，繼續完成 Soulbound Token 設定'
|
||
this.successModalStatus = true
|
||
} else {
|
||
this.msg = '你連接的不是 Sepolia 測試網路，目前只接受 Sepolia address'
|
||
this.warningModalStatus = true
|
||
}
|
||
} else {
|
||
this.msg = 'no Metamask'
|
||
this.warningModalStatus = true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="blog-posts">
|
||
<div class="container">
|
||
<div class="block">
|
||
<PageTitle title="Sign Up" subtitle="連接 MetaMask 錢包並使用 Soulbound Token (SBT) 進行身份驗證"></PageTitle>
|
||
</div>
|
||
<div class="block">
|
||
<div class="box">
|
||
<div class="content">
|
||
<h5 class="title is-5">流程說明</h5>
|
||
<ol>
|
||
<li>連接 MetaMask 個人錢包</li>
|
||
<li>Mint 新的或連接已有的 Soulbound Token(SBT) 以紀錄個人信用並作為身份驗證憑證</li>
|
||
<li>申請信用評分並設定信用額度</li>
|
||
<li>進行消費</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="columns">
|
||
|
||
<div class="column is-2 is-offset-4">
|
||
<button @click="detect" class="button is-primary is-fullwidth is-medium is-outlined">Link to MetaMask</button>
|
||
</div>
|
||
<div class="column is-2">
|
||
<RouterLink to="/" class="button is-danger is-fullwidth is-medium is-outlined">Cancel</RouterLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<WarningModal :active="warningModalStatus" :errorMsg="msg" @closeModal="warningModalStatus=false"></WarningModal>
|
||
<SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus=false" link="/signup/linksbt" btnName="繼續"></SuccessModal>
|
||
</template>
|