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