vue-eth-wallet-model v1.0.0

Vue Eth Wallet Model Component

Ethereum provider solution for matemask/walletconnect Wallets

Installation

npm install vue-eth-wallet-model

Usage

Import

import 'vue-eth-wallet-model/vue-eth-wallet-model.min.css';
import { EthWalletModel } from 'vue-eth-wallet-model';

demo

 /src/main.js   


import { createApp } from 'vue'
import App from './App.vue'
import '../lib/vue-eth-wallet-model.css'
import 'vue-eth-wallet-model/vue-eth-wallet-model.min.css';
import { EthWalletModel } from 'vue-eth-wallet-model';

const app = createApp(App);
app.use(EthWalletModel);
app.mount("#app");

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      this plugin is Dapp wallet model Demo,
    </p>
    <button @click="handleClickConnect">Click Connect</button>
    <eth-wallet-model ref="ethWalletModelRef"
                      @connect="connect"
                      @closeConnectModel="closeConnectModel"></eth-wallet-model>
  </div>
</template>

<script>
// import EthWalletModel from '../packages/index'
// Vue.use(TagTextarea)

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    connect (provider) {
      console.log(provider)
    },
    handleClickConnect () {
      this.$refs.ethWalletModelRef.connectModel();
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

具体使用可参考该文件。

Options

providerOptions providerOptions

eg:  
var providerOptions =
{
        network: "mainnet", // optional
        cacheProvider: true, // optional
        walletconnect: {
          options: {
            rpc: {
              1: 'https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161',
              4: 'https://rinkeby.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'
            },
            bridge: 'https://bridge.walletconnect.org'
          }
        }
 }

 walletconnect  config reference resources  https://docs.walletconnect.com/quick-start/dapps/web3-provider

Provider Events

// Subscribe to accounts change
provider.on("accountsChanged", (accounts: string[]) => {
  console.log(accounts);
});

// Subscribe to chainId change
provider.on("chainChanged", (chainId: number) => {
  console.log(chainId);
});

// Subscribe to provider connection
provider.on("connect", (info: { chainId: number }) => {
  console.log(info);
});

// Subscribe to provider disconnection
provider.on("disconnect", (error: { code: number; message: string }) => {
  console.log(error);
});

Features

• Built for Ethereum using Web3.
• Implements Graph Protocol to read blockchain.

Changelog

2022.02.21

v1.0.0 * init