vue-web3/README.md

121 lines
2.3 KiB
Markdown
Raw Normal View History

2021-09-03 10:43:57 +00:00
# @instadapp/vue-web3
2021-08-28 18:25:21 +00:00
2022-03-02 14:16:01 +00:00
Vue 2/3 wrapper for web3 built on top of [react-web3@v6](https://github.com/NoahZinsmeister/web3-react/tree/v6).
2021-08-28 18:25:21 +00:00
## 🚀 Quick Start
2022-10-17 13:35:04 +00:00
#### Install:
2021-08-28 18:25:21 +00:00
```bash
# npm
2021-09-03 10:43:57 +00:00
npm i @instadapp/vue-web3
2021-08-28 18:25:21 +00:00
# yarn
2021-09-03 10:43:57 +00:00
yarn add @instadapp/vue-web3
2021-08-28 18:25:21 +00:00
```
2022-10-17 13:35:04 +00:00
#### Usage:
2021-08-28 18:25:21 +00:00
```js
2021-09-03 10:43:57 +00:00
import { useWeb3, setWeb3LibraryCallback } from '@instadapp/vue-web3'
2021-08-28 18:25:21 +00:00
import { InjectedConnector } from '@web3-react/injected-connector'
import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
import Web3 from 'web3'
const injected = new InjectedConnector({
supportedChainIds: [1, 137],
})
const walletconnect = new WalletConnectConnector({
rpc: { 1: 'https://mainnet.infura.io/v3/YOUR_API_KEY' },
qrcode: true,
})
setWeb3LibraryCallback((provider) => new Web3(provider))
defineComponent({
setup() {
const { active, activate, account, library } = useWeb3()
const connectUsingMetamask = async () => {
await activate(injected)
}
const connectUsingWalletConnect = async () => {
await activate(walletconnect)
}
return {
active,
connect,
connectUsingMetamask,
connectUsingWalletConnect,
}
},
})
```
2022-10-17 13:35:04 +00:00
#### Typescript:
2021-08-29 11:18:56 +00:00
2022-10-17 13:35:04 +00:00
using generic:
2021-08-29 11:18:56 +00:00
```js
import Web3 from 'web3'
const { library } = useWeb3<Web3>()
```
```js
import { Web3Provider } from "@ethersproject/providers";
const { library } = useWeb3<Web3Provider>()
2021-08-31 17:35:21 +00:00
```
2022-10-17 13:35:04 +00:00
using global types:
```ts
2022-10-17 13:36:24 +00:00
// global.d.ts
2022-10-17 13:35:04 +00:00
import type Web3 from "web3";
declare module "@instadapp/vue-web3" {
interface IVueWeb3Library extends Web3 {}
}
```
#### Nuxt 3
2022-10-07 17:29:00 +00:00
```bash
yarn add @instadapp/vue-web3-nuxt -D
```
2022-10-07 17:33:57 +00:00
```ts
2022-10-17 12:01:11 +00:00
// nuxt.config.ts
2022-10-07 17:29:00 +00:00
export default defineNuxtConfig({
modules: [
'@instadapp/vue-web3-nuxt'
],
2022-10-17 12:01:11 +00:00
web3 :{
autoImport: false, // default `true`
}
2022-10-07 17:29:00 +00:00
})
```
2022-10-17 12:01:11 +00:00
If you disabled `@instadapp/vue-web3-nuxt` auto import:
```ts
//composables/useWeb3.ts
import Web3 from "web3";
2022-10-17 12:02:19 +00:00
// import { Web3Provider } from "@ethersproject/providers";
2022-10-17 12:01:11 +00:00
import { useWeb3 as useWeb3Generic } from "@instadapp/vue-web3";
const useWeb3 = () => useWeb3Generic<Web3>();
2022-10-17 12:02:19 +00:00
// const useWeb3 = () => useWeb3Generic<Web3Provider>();
2022-10-17 12:01:11 +00:00
export { useWeb3 };
```
2021-08-31 17:35:21 +00:00
2022-04-29 17:12:49 +00:00
<br />
---
<br />
Demo (Nuxt 2): https://github.com/KABBOUCHI/nuxt-vue-web3
Demo (Nuxt 3): https://github.com/KABBOUCHI/nuxt3-vue-web3