Vue 2/3 wrapper for web3 built on top of react-web3@v6
Go to file
2022-11-23 21:26:12 +02:00
.github wip 2022-10-17 15:35:45 +03:00
nuxt wip 2022-11-23 21:21:04 +02:00
scripts 0.3.0 2021-09-03 14:18:41 +03:00
src Update index.ts 2022-10-17 15:50:12 +03:00
.gitignore Initial commit 2021-08-28 21:14:29 +03:00
.prettierrc Initial commit 2021-08-28 21:14:29 +03:00
index.cjs refactor cjs + mjs 2021-10-31 01:29:33 +02:00
index.js refactor cjs + mjs 2021-10-31 01:29:33 +02:00
jest.config.js Initial commit 2021-08-28 21:14:29 +03:00
package.json wip 2022-11-23 21:21:04 +02:00
README.md Update README.md 2022-10-17 16:36:24 +03:00
rollup.config.js refactor cjs + mjs 2021-10-31 01:29:33 +02:00
tsconfig.json wip 2021-08-29 00:51:54 +03:00
yarn.lock wip 2022-10-17 15:35:45 +03:00

@instadapp/vue-web3

Vue 2/3 wrapper for web3 built on top of react-web3@v6.

🚀 Quick Start

Install:

# npm
npm i @instadapp/vue-web3

# yarn
yarn add @instadapp/vue-web3

Usage:

import { useWeb3, setWeb3LibraryCallback } from '@instadapp/vue-web3'
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,
    }
  },
})

Typescript:

using generic:

import Web3 from 'web3'

const { library } = useWeb3<Web3>()
import { Web3Provider } from "@ethersproject/providers";

const { library } = useWeb3<Web3Provider>()

using global types:

// global.d.ts
import type Web3 from "web3";

declare module "@instadapp/vue-web3" {
  interface IVueWeb3Library extends Web3 {}
}

Nuxt 3

yarn add @instadapp/vue-web3-nuxt -D
// nuxt.config.ts 
export default defineNuxtConfig({
    modules: [
        '@instadapp/vue-web3-nuxt'
    ],
    web3 :{
        autoImport: false, // default `true`
    }
})

If you disabled @instadapp/vue-web3-nuxt auto import:

//composables/useWeb3.ts
import Web3 from "web3";
// import { Web3Provider } from "@ethersproject/providers";
import { useWeb3 as useWeb3Generic } from "@instadapp/vue-web3";

const useWeb3 = () => useWeb3Generic<Web3>();
// const useWeb3 = () => useWeb3Generic<Web3Provider>();

export { useWeb3 };

---

Demo (Nuxt 2): https://github.com/KABBOUCHI/nuxt-vue-web3

Demo (Nuxt 3): https://github.com/KABBOUCHI/nuxt3-vue-web3