configuring connection to metamask wallet

src/App.vue

@@ -17,8 +17,8 @@ import HelloWorld from "./components/HelloWorld.vue";
       <HelloWorld msg="You did it!" />
       <nav>
         <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
         <RouterLink to="/pix">QrCode Pix</RouterLink>
+        <RouterLink to="/ethers">Ethers</RouterLink>
       </nav>
     </div>
   </header>

src/ethers.ts

@@ -0,0 +1,21 @@
+import { ethers } from "ethers";
+
+const getProvider = async (): Promise<ethers.providers.Web3Provider> => {
+    const window_ = window as any;
+
+    if(window_.ethereum){
+
+        const provider = new ethers.providers.Web3Provider(window_.ethereum)
+
+        const walletAddress = await provider.send("eth_requestAccounts", []);
+        const balance = await provider.getBalance(walletAddress[0]);
+        console.log(walletAddress);
+        console.log(ethers.utils.formatEther(balance));
+
+        return provider
+    }
+    else
+        console.log("Browser não suporta conexão com metamask")
+};
+
+export default { getProvider };

src/router/index.ts

@@ -10,12 +10,12 @@ const router = createRouter({
       component: HomeView,
     },
     {
-      path: "/about",
-      name: "about",
+      path: "/ethers",
+      name: "ethers",
       // 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: () => import("../views/AboutView.vue"),
+      component: () => import("../views/EthersView.vue"),
     },
     {
       path: "/pix",

src/views/AboutView.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

src/views/EthersView.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import ethers from '../ethers'
+
+const connectMetaMask = () => {
+  ethers.getProvider().then((web3Provider) => {
+    console.log(web3Provider);
+  })
+}
+
+</script>
+
+<template>
+  <div class="about">
+    <button class="rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500 mt-4" @click="connectMetaMask()">Conectar metaMask</button>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+}
+</style>