feat: window.ethereum link to Metamask

package-lock.json

@@ -8,6 +8,7 @@
       "name": "web",
       "version": "0.0.0",
       "dependencies": {
+        "@metamask/detect-provider": "^2.0.0",
         "bootstrap": "^5.2.3",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6"
@@ -380,6 +381,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/@metamask/detect-provider": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@metamask/detect-provider/-/detect-provider-2.0.0.tgz",
+      "integrity": "sha512-sFpN+TX13E9fdBDh9lvQeZdJn4qYoRb/6QF2oZZK/Pn559IhCFacPMU1rMuqyXoFQF3JSJfii2l98B87QDPeCQ==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.6",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
@@ -975,6 +984,11 @@
       "dev": true,
       "optional": true
     },
+    "@metamask/detect-provider": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@metamask/detect-provider/-/detect-provider-2.0.0.tgz",
+      "integrity": "sha512-sFpN+TX13E9fdBDh9lvQeZdJn4qYoRb/6QF2oZZK/Pn559IhCFacPMU1rMuqyXoFQF3JSJfii2l98B87QDPeCQ=="
+    },
     "@popperjs/core": {
       "version": "2.11.6",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",

package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@metamask/detect-provider": "^2.0.0",
     "bootstrap": "^5.2.3",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"

src/router/index.js

@@ -1,6 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-import AboutView from '../views/AboutView.vue'
 import FaucetView from '../views/FaucetView.vue'
 
 const router = createRouter({
@@ -9,19 +7,6 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: AboutView
-    },
-    {
-      path: '/faucet',
-      name: 'faucet',
       component: FaucetView
     }
   ]

src/views/FaucetView.vue

@@ -1,3 +1,55 @@
+<script>
+import detectEthereumProvider from '@metamask/detect-provider'
+
+export default {
+  name: 'MyComponent',
+  data() {
+    return {
+      msg: '',
+      linked: false,
+      amount: 100000000
+    }
+  },
+  methods: {
+    async detectMetamask() {
+      this.msg = "Detecting..."
+      const provider = await detectEthereumProvider()
+      if (provider) {
+        this.msg = "Detect Metamask. "
+        const chainId = await ethereum.request({method: 'eth_chainId'})
+        if(chainId == 0x5){
+          const account = await ethereum.request({ method: 'eth_requestAccounts' });
+          this.msg += "> Network which you connected is Goerli. @ " + account[0]
+          this.linked = true
+        }else{
+          this.msg += "> But the network which you connected isn't Goerli, this faucet only accept Goerli address"
+        }
+      } else {
+        this.msg = "ERROR: no Metamask"
+      }
+    },
+
+    withdraw() {
+      const encodeFunctionCall = web3.eth.abi.encodeFunctionCall({
+        name: "withdraw",
+        type: "function",
+        inputs: [{
+          type: "unit256",
+          name: "amount"
+        }, [95000000000000000]]
+      }, [123])
+      const transactionParameters = {
+        from: ethereum.selectedAddress,
+        to: '0x629fe41fd008a169fc073ac7a016401dfd7f17d9',
+        data: encodeFunctionCall
+      }
+      console.log(encodeFunctionCall)
+    }
+  }
+}
+</script>
+
+
 <template>
   <section class="page-section portfolio" id="portfolio">
       <div class="container">
@@ -12,15 +64,27 @@
 
           <!-- Portfolio Grid Items-->
           <div class="row justify-content-center">
-              <button class='btn btn-primary'> Test </button>
+              <p>{{ msg }}</p>
+              <template v-if='!linked'>
+                  <button class='btn btn-info' v-on:click="detectMetamask"> link to Metamask </button>
+              </template>
+              <template v-else>
+                <div>
+                  <div class="container">
+                    <div class="row">
+                      <div class="col-sm">
+                        <form>
+                          <input type='number' class="form-control" v-model="amount" >
+                        </form>
+                      </div>
+                      <div class="col-sm">
+                        <button class='btn btn-info' v-on:click="withdraw"> withdraw ETH ({{amount}} wei) </button>
+                      </div>
+                    </div>
+                  </div>                    
+                </div>
+              </template>
           </div>
       </div>
   </section>
-</template>
+</template>
-
-<script>
-
-export default {
-  name: 'MyComponent',
-}
-</script>