add connect to ethers provider function and use pinia as ether params store

Co-authored-by: geovanne97 <geovannessaraiva97@gmail.com>
Co-authored-by: brunoedcf <brest.dallacosta@outlook.com>

src/App.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import ethers from "./ethers";
+import { storeToRefs } from "pinia";
+import { useEtherStore } from "./store/ether";
+import ethers from "./utils/ethers";
+
+const etherStore = useEtherStore();
+
+const { walletAddress } = storeToRefs(etherStore);
 
 const connectMetaMask = () => {
-  ethers.getProvider().then((web3Provider) => {
-    console.log(web3Provider);
-  });
+  ethers.getProvider();
 };
 </script>
 
@@ -17,15 +21,19 @@ const connectMetaMask = () => {
       width="75"
       height="75"
     />
-    <div class="flex gap-4">
+    <div class="flex gap-4 items-center">
       <button type="button" class="p-2 text-gray-50">Quero vender</button>
       <button
         type="button"
+        v-if="!walletAddress"
         class="p-2 border-amber-400 border-2 rounded text-gray-50"
         @click="connectMetaMask()"
       >
         Conectar carteira
       </button>
+      <span v-if="walletAddress">
+        {{ walletAddress[0] }}
+      </span>
     </div>
     <!-- <div class="wrapper">
       <HelloWorld msg="You did it!" />

src/main.ts

@@ -1,11 +1,13 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
+import { createPinia } from "pinia";
 
 import "./assets/main.css";
 
 const app = createApp(App);
 
 app.use(router);
+app.use(createPinia());
 
 app.mount("#app");

src/store/ether.ts

@@ -0,0 +1,21 @@
+import type { ethers } from "ethers";
+import { defineStore } from "pinia";
+
+export const useEtherStore = defineStore("ether", {
+  state: () => ({
+    walletAddress: "",
+    balance: 0,
+    provider: null as ethers.providers.Web3Provider | null,
+  }),
+  actions: {
+    setWalletAddress(walletAddress: string) {
+      this.walletAddress = walletAddress;
+    },
+    setBalance(balance: number) {
+      this.balance = balance;
+    },
+    setProvider(provider: ethers.providers.Web3Provider | null) {
+      this.provider = provider;
+    },
+  },
+});

src/utils/ethers.ts

@@ -1,18 +1,23 @@
+import { useEtherStore } from "@/store/ether";
 import { ethers } from "ethers";
 
-const getProvider = async (): Promise<ethers.providers.Web3Provider> => {
+const getProvider = async (): Promise<ethers.providers.Web3Provider | null> => {
+  const etherStore = useEtherStore();
   const window_ = window as any;
+  let provider: ethers.providers.Web3Provider | null = null;
 
   if (window_.ethereum) {
-    const provider = new ethers.providers.Web3Provider(window_.ethereum);
+    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;
+    etherStore.setProvider(provider);
+    etherStore.setWalletAddress(walletAddress);
+    etherStore.setBalance(Number(balance));
   } else console.log("Browser não suporta conexão com metamask");
+
+  return provider;
 };
 
 export default { getProvider };

src/views/EthersView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ethers from "../ethers";
+import ethers from "../utils/ethers";
 
 const connectMetaMask = () => {
   ethers.getProvider().then((web3Provider) => {