diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue index a7a81db..cf70669 100644 --- a/src/components/TopBar.vue +++ b/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; +}; diff --git a/src/store/ether.ts b/src/store/ether.ts index d5c308d..b777179 100644 --- a/src/store/ether.ts +++ b/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; - }, }, }); diff --git a/src/utils/ethers.ts b/src/utils/ethers.ts index 242b58e..351691b 100644 --- a/src/utils/ethers.ts +++ b/src/utils/ethers.ts @@ -1,29 +1,44 @@ import { useEtherStore } from "@/store/ether"; import { ethers } from "ethers"; -const connectProvider = - async (): Promise => { - 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 }; diff --git a/src/views/EthersView.vue b/src/views/EthersView.vue index 1b2298e..c753af0 100644 --- a/src/views/EthersView.vue +++ b/src/views/EthersView.vue @@ -2,9 +2,7 @@ import ethers from "../utils/ethers"; const connectMetaMask = () => { - ethers.connectProvider().then((web3Provider) => { - console.log(web3Provider); - }); + ethers.connectProvider(); };