Fixing provider state and wallet change listener, formatting balance

Co-authored-by: RcleydsonR <rafael.cleydson@gmail.com>

src/components/TopBar.vue

@@ -5,7 +5,7 @@ import ethers from "../utils/ethers";
 
 const etherStore = useEtherStore();
 
-const { walletAddress } = storeToRefs(etherStore);
+const { walletAddress, balance } = storeToRefs(etherStore);
 
 const connectMetaMask = () => {
   ethers.connectProvider();
@@ -20,6 +20,13 @@ const formatWalletAddress = (): string => {
   );
   return `${initialText} ... ${finalText}`;
 };
+
+const formatWalletBalance = (): string => {
+  const formattedBalance = ethers.formatEther(balance.value);
+  const fixed = formattedBalance.substring(0, 8);
+
+  return fixed;
+};
 </script>
 
 <template>
@@ -41,9 +48,12 @@ const formatWalletAddress = (): string => {
       >
         Conectar carteira
       </button>
-      <span v-if="walletAddress" class="text-gray-50">
+      <div v-if="walletAddress" class="flex gap-4">
+        <span class="text-gray-50">
           {{ formatWalletAddress() }}
         </span>
+        <span class="text-gray-50"> ETH: {{ formatWalletBalance() }} </span>
+      </div>
     </div>
   </header>
 </template>

src/store/ether.ts

@@ -1,21 +1,16 @@
-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,
+    balance: "",
   }),
   actions: {
     setWalletAddress(walletAddress: string) {
       this.walletAddress = walletAddress;
     },
-    setBalance(balance: number) {
+    setBalance(balance: string) {
       this.balance = balance;
     },
-    setProvider(provider: ethers.providers.Web3Provider | null) {
-      this.provider = provider;
-    },
   },
 });

src/utils/ethers.ts

@@ -1,8 +1,21 @@
 import { useEtherStore } from "@/store/ether";
 import { ethers } from "ethers";
 
-const connectProvider =
-  async (): Promise<ethers.providers.Web3Provider | null> => {
+const updateWalletStatus = async (walletAddress: string) => {
+  const etherStore = useEtherStore();
+  const window_ = window as any;
+  const connection = window_.ethereum;
+
+  if (!connection) return;
+
+  const provider = new ethers.providers.Web3Provider(connection);
+  const balance = await provider.getBalance(walletAddress);
+
+  etherStore.setBalance(String(balance));
+  etherStore.setWalletAddress(walletAddress);
+};
+
+const connectProvider = async () => {
   const etherStore = useEtherStore();
   const window_ = window as any;
   const connection = window_.ethereum;
@@ -14,16 +27,18 @@ const connectProvider =
     const walletAddress = await provider.send("eth_requestAccounts", []);
     const balance = await provider.getBalance(walletAddress[0]);
 
-      etherStore.setProvider(provider);
     etherStore.setWalletAddress(walletAddress[0]);
-      etherStore.setBalance(Number(balance));
+    etherStore.setBalance(String(balance));
 
     connection.on("accountsChanged", (accounts: string[]) => {
-        etherStore.setWalletAddress(accounts[0]);
+      updateWalletStatus(accounts[0]);
     });
-    } else console.log("Browser não suporta conexão com metamask");
+  }
+};
 
-    return provider;
-  };
+const formatEther = (balance: string) => {
+  const formatted = ethers.utils.formatEther(balance);
+  return formatted;
+};
 
-export default { connectProvider };
+export default { connectProvider, formatEther };

src/views/EthersView.vue

@@ -2,9 +2,7 @@
 import ethers from "../utils/ethers";
 
 const connectMetaMask = () => {
-  ethers.connectProvider().then((web3Provider) => {
-    console.log(web3Provider);
-  });
+  ethers.connectProvider();
 };
 </script>