1.2.4 • Published 2 years ago
wallets-connect v1.2.4
wallets-connect
Wallets:
- Metamask
- WalletConnect
Setup
yarn add wallets-connect
in plugin eth.js
import Web3Model from "wallets-connect";
export default {
async install(Vue){
Vue.prototype.$eth = Web3Model;
}
}
in main.js
...
import WalletsConnect from './plugins/eth';
Vue.use(WalletsConnect);
...
Usage
After install in components will be available global object $eth
$eth.wallets - List of available wallets
$eth.connect() - Method for connect wallet. Return wallet address
$eth.request() - Provider methods
$eth.provider - Provider object
Connection
<!--in template-->
<div
v-for="(wallet, i) of $eth.wallets" :key="i"
@click="connect(wallet)"
>
<img :src="wallet.icon" :alt="wallet.name">
{{ wallet.name }}
</div>
/**
connect method takes 2 arguments:
- wallet name (Required)
- rpc (Optional. Only for WalletConnect)
*/
async connect(wallet){
const walletAddress = await this.$eth.connect(wallet.name)
console.log(walletAddress, this.$eth)
}
RPC URL Mapping
The RPC URL mapping should indexed by chainId and it requires at least one value. Default value:
"rpc": {
"1": "https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161",
"3": "https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161",
"4": "https://rinkeby.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161",
"5": "https://goerli.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161",
"42": "https://kovan.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161",
"56": "https://bsc-dataseed.binance.org/",
"97": "https://data-seed-prebsc-1-s1.binance.org:8545/"
}
Request methods
interface RequestArguments {
method: string;
params?: unknown[] | object;
}
// Send JSON RPC requests
const result = await this.$eth.request(payload: RequestArguments);
Send transaction
async sendTransaction(){
const tx = {
from: "0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3", // Required
to: "0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359", // Required (for non contract deployments)
data: "0x", // Required
gasPrice: "0x02540be400", // Optional
gasLimit: "0x9c40", // Optional
value: "0x00", // Optional
nonce: "0x0114", // Optional
};
const hash = await this.$eth.request({
method: 'eth_sendTransaction',
params: [tx],
});
}
Events
// Subscribe to accounts change
$eth.provider.on("accountsChanged", (accounts: string[]) => {
console.log(accounts);
});
// Subscribe to chainId change
$eth.provider.on("chainChanged", (chainId: number) => {
console.log(chainId);
});
// Subscribe to session connection
$eth.provider.on("connect", () => {
console.log("connect");
});
// Subscribe to session disconnection
$eth.provider.on("disconnect", (code: number, reason: string) => {
console.log(code, reason);
});