Vue3 Web3 Plugin

This Vue 3 plugin integrates Ethereum blockchain functionality into your Vue application using the Ethers.js library. It provides a $web3 object that you can use within your components to interact with Ethereum wallets and smart contracts.

Installation

npm install your-vue3-web3-plugin

Usage

In your main.js:

import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // Ensure you have a Vuex store
import Web3Plugin from 'your-vue3-web3-plugin';

const app = createApp(App);

// Use the plugin
app.use(store).use(Web3Plugin, { store }).mount('#app');

In your components, you can access the $web3 methods as follows:

<script>
export default {
  mounted() {
    // Connect to the user's wallet
    this.$web3.connectWallet();
  },
  methods: {
    async getBalance() {
      const balance = await this.$web3.getBalance(this.$web3.address());
      console.log(balance);
    }
  }
};
</script>

$web3 Methods

• $web3.address(): Returns the connected wallet address or null if not connected.
• $web3.canConnect(): Checks if the current network is among the available networks specified in the options.
• $web3.connectWallet(): Connects to the user's wallet and stores the address in the Vuex store.
• $web3.contract(abi, address): Returns an ethers.js Contract instance to interact with a smart contract.
• $web3.ERC20(address): Returns an ethers.js Contract instance pre-configured for an ERC20 token.
• $web3.ERC721(address): Returns an ethers.js Contract instance pre-configured for an ERC721 token.
• $web3.ERC1155(address): Returns an ethers.js Contract instance pre-configured for an ERC1155 token.
• $web3.getBalance(address): Returns the balance of the given address.
• $web3.getBlock(blockNumber): Returns the block details for the given block number.
• $web3.getBlockNumber(): Returns the current block number.
• $web3.getChainId(): Returns the current chain ID.
• $web3.getGasPrice(): Returns the current gas price.
• $web3.getNetwork(): Returns the network details.
• $web3.getProvider(): Returns the connected provider, or false if no provider is connected.
• $web3.getTransaction(transactionHash): Returns the transaction details for the given transaction hash.
• $web3.getTransactionReceipt(transactionHash): Returns the transaction receipt for the given transaction hash.
• $web3.isConnected(): Returns true if the wallet is connected, otherwise false.
• $web3.multicall(): Returns a Multicall instance to batch multiple readonly calls.
• $web3.toEth(wei, decimals): Converts Wei to Ether with the specified number of decimals.
• $web3.toWei(eth, decimals): Converts Ether to Wei with the specified number of decimals.

Contributing

Please feel free to contribute to the development of this plugin by submitting issues or pull requests.

License

This project is licensed under the MIT License.

This README provides a brief overview of the plugin, how to install and use it, and a description of the `$web3` methods provided. Adjust the content as necessary to fit the specifics of your plugin and the methods it offers.