suguo
/
vue3-metamask
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

metamask sign

This commit is contained in:
suguo.yao 2022-07-14 10:53:58 +08:00
parent 1a68aca753
commit 77412cb6d1
7 changed files with 82 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -1,7 +1,7 @@
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<router-link to="/login">Login</router-link>
</nav>
<router-view />
</template>

138
src/components/HelloWorld.vue
View File

@ -1,138 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
target="_blank"
rel="noopener"
>pwa</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
target="_blank"
rel="noopener"
>router</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
target="_blank"
rel="noopener"
>vuex</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

14
src/components/metamask.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>

6
src/router/index.js
View File

@ -7,9 +7,9 @@ const routes = [
component: () => import("../views/HomeView.vue"),
},
{
path: "/about",
name: "about",
component: () => import("../views/AboutView.vue"),
path: "/login",
name: "login",
component: () => import("../views/LoginView.vue"),
},
];

23
src/views/AboutView.vue
View File

@ -1,23 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
<HelloWorld :msg="message" />
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "AboutView",
data() {
return {
message: "about app",
};
},
components: {
HelloWorld,
},
};
</script>

2
src/views/HomeView.vue
View File

@ -7,7 +7,7 @@
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import HelloWorld from "@/components/metamask.vue";
export default {
name: "HomeView",

63
src/views/LoginView.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<div class="about">
<h1>sign in with MetaMask</h1>
<h3 v-text="wallet"></h3>
<button @click="toggleButton">{{ btnName }}</button>
</div>
</template>
<script>
export default {
name: "LoginView",
data() {
return {
wallet: "-",
btnName: "Sign in with MetaMask",
};
},
methods: {
toggleButton() {
if (this.$data.btnName == "MetaMask is not installed") {
return;
}
if (this.$data.btnName == "Sign in with MetaMask") {
this.signinWithMetaMask();
}
if (this.$data.btnName == "Sign out of MetaMask") {
this.signOutOfMetaMask();
}
},
async signinWithMetaMask() {
const accounts = await window.ethereum
.request({ method: "eth_requestAccounts" })
.catch((e) => {
console.error(e.message);
//debugger //代码运行至此暂停
return;
});
if (!accounts) {
return;
}
//正常登录，赋钱包地址
this.$data.wallet = accounts[0];
this.$data.btnName = "Sign out of MetaMask";
},
signOutOfMetaMask() {
this.$data.wallet = "-";
this.$data.btnName = "Sign in with MetaMask";
},
},
created() {
//测试metamask是否安装，仅测试使用
if (typeof window.ethereum !== "undefined") {
console.log("MetaMask is installed!");
}
//没有安装metamask时按钮不启用
if (!window.ethereum) {
this.$data.btnName = "MetaMask is not installed";
}
},
};
</script>