.github/workflows/npm-publish.yml

@@ -1,7 +1,6 @@
 name: npm-publish
 
 on:
-  workflow_dispatch:
   release:
     types: [released]
 
@@ -13,16 +12,9 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 14
       - uses: JS-DevTools/npm-publish@v1
         with:
           token: ${{ secrets.NPM_AUTH_TOKEN }}
           access: public
           check-version: true
-          package: ./package.json
-      - uses: JS-DevTools/npm-publish@v1
-        with:
-          token: ${{ secrets.NPM_AUTH_TOKEN }}
-          access: public
-          check-version: true
-          package: ./nuxt/package.json

README.md

@@ -1,10 +1,10 @@
 # @instadapp/vue-web3
 
-Vue 2/3 wrapper for web3 built on top of [react-web3@v6](https://github.com/NoahZinsmeister/web3-react/tree/v6).
+Vue 2/3 wrapper for web3 built on top of [react-web3](https://github.com/NoahZinsmeister/web3-react).
 
 ## 🚀 Quick Start
 
-#### Install:
+Install:
 
 ```bash
 # npm
@@ -14,7 +14,7 @@ npm i @instadapp/vue-web3
 yarn add @instadapp/vue-web3
 ```
 
-#### Usage:
+Usage:
 
 ```js
 import { useWeb3, setWeb3LibraryCallback } from '@instadapp/vue-web3'
@@ -32,24 +32,8 @@ const walletconnect = new WalletConnectConnector({
   qrcode: true,
 })
 
-// web3.js v1
 setWeb3LibraryCallback((provider) => new Web3(provider))
 
-// ethers.js v5
-setWeb3LibraryCallback((provider) => new Web3Provider(provider, "any"))
-
-// viem
-setWeb3LibraryCallback((provider, _connector, account) => ({
-  public: createPublicClient({
-      transport: custom(provider),
-  }),
-  wallet: createWalletClient({
-      account,
-      chain: null as unknown as Chain,
-      transport: custom(provider),
-  }),
-}))
-
 defineComponent({
   setup() {
     const { active, activate, account, library } = useWeb3()
@@ -71,10 +55,7 @@ defineComponent({
   },
 })
 ```
-
+Typescript:
-#### Typescript:
-
-using generic:
 
 ```js
 import Web3 from 'web3'
@@ -88,51 +69,4 @@ import { Web3Provider } from "@ethersproject/providers";
 const { library } = useWeb3<Web3Provider>()
 ```
 
-using global types:
+Demo: https://github.com/KABBOUCHI/nuxt-vue-web3
-
-```ts
-// global.d.ts
-import type Web3 from 'web3'
-
-declare module '@instadapp/vue-web3' {
-  interface IVueWeb3Library extends Web3 {}
-}
-```
-
-#### Nuxt 3
-
-```bash
-yarn add @instadapp/vue-web3-nuxt -D
-```
-
-```ts
-// 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:
-
-```ts
-//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 }
-```
-
-## <br />
-
-<br />
-
-Demo (Nuxt 2): https://github.com/KABBOUCHI/nuxt-vue-web3
-
-Demo (Nuxt 3): https://github.com/KABBOUCHI/nuxt3-vue-web3

index.cjs

@@ -1,7 +0,0 @@
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./dist/vue-web3.prod.cjs')
-} else {
-  module.exports = require('./dist/vue-web3.cjs')
-}

index.js

@@ -1,7 +0,0 @@
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./dist/vue-web3.prod.cjs')
-} else {
-  module.exports = require('./dist/vue-web3.cjs')
-}

nuxt/.editorconfig

@@ -1,12 +0,0 @@
-root = true
-
-[*]
-indent_size = 2
-indent_style = space
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false

nuxt/.eslintignore

@@ -1,2 +0,0 @@
-dist
-node_modules

nuxt/.eslintrc

@@ -1,10 +0,0 @@
-{
-  "extends": [
-    "@nuxtjs/eslint-config-typescript"
-  ],
-  "rules": {
-    "@typescript-eslint/no-unused-vars": [
-      "off"
-    ]
-  }
-}

nuxt/.gitignore

@@ -1,51 +0,0 @@
-# Dependencies
-node_modules
-
-# Logs
-*.log*
-
-# Temp directories
-.temp
-.tmp
-.cache
-
-# Yarn
-**/.yarn/cache
-**/.yarn/*state*
-
-# Generated dirs
-dist
-
-# Nuxt
-.nuxt
-.output
-.vercel_build_output
-.build-*
-.env
-.netlify
-
-# Env
-.env
-
-# Testing
-reports
-coverage
-*.lcov
-.nyc_output
-
-# VSCode
-.vscode
-
-# Intellij idea
-*.iml
-.idea
-
-# OSX
-.DS_Store
-.AppleDouble
-.LSOverride
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk

nuxt/README.md

@@ -1,6 +0,0 @@
-# Nuxt Module
-
-## Development
-
-- Run `npm run dev:prepare` to generate type stubs.
-- Use `npm run dev` to start [playground](./playground) in development mode.

nuxt/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "@instadapp/vue-web3-nuxt",
-  "version": "0.11.1",
-  "license": "MIT",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
-    }
-  },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "prepack": "nuxt-module-build",
-    "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
-  },
-  "dependencies": {
-    "@instadapp/vue-web3": "^0.11.1",
-    "@nuxt/kit": "^3.1.0",
-    "mkdirp-promise": "4",
-    "vite-plugin-node-polyfills": "^0.7.0"
-  },
-  "devDependencies": {
-    "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/ui": "^0.4.0",
-    "@nuxtjs/eslint-config-typescript": "11.0.0",
-    "@web3-react/injected-connector": "^6.0.7",
-    "@web3-react/network-connector": "^6.2.9",
-    "@web3-react/walletconnect-connector": "^6.2.13",
-    "eslint": "8.32.0",
-    "nuxt": "^3.1.0"
-  }
-}

nuxt/playground/app.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="relative p-10 n-bg-base">
-    <div class="container w-full mx-auto flex flex-col gap-4">
-      <div class="flex justify-between items-center">
-        <div class="text-4xl">
-          Web3 + Nuxt
-        </div>
-      </div>
-
-      <NCard class="p4">
-        <pre>{{ {account, active, error} }}</pre>
-      </NCard>
-
-      <NCard class="p4 flex gap-4">
-        <NButton @click="connectMetamask">
-          Connect using MetaMask
-        </NButton>
-
-        <NButton @click="connectWalletConnect">
-          Connect using WalletConnect
-        </NButton>
-      </NCard>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const { active, account, activate, error } = useWeb3()
-
-const connectMetamask = async () => {
-  const { InjectedConnector } = await import('@web3-react/injected-connector')
-
-  await activate(
-    new InjectedConnector({})
-  )
-}
-
-const connectWalletConnect = async () => {
-  const { WalletConnectConnector } = await import('@web3-react/walletconnect-connector')
-
-  await activate(
-    new WalletConnectConnector({})
-  )
-}
-</script>

nuxt/playground/nuxt.config.ts

@@ -1,7 +0,0 @@
-import MyModule from '..'
-
-export default defineNuxtConfig({
-  modules: ['@nuxt/ui', MyModule],
-
-  web3: {},
-})

nuxt/playground/package.json

@@ -1,11 +0,0 @@
-{
-  "private": true,
-  "name": "my-module-playground",
-  "dependencies": {
-    "@web3-react/injected-connector": "^6.0.7",
-    "@web3-react/walletconnect-connector": "^6.2.13"
-  },
-  "devDependencies": {
-    "@nuxt/ui": "^0.3.3"
-  }
-}

nuxt/src/module.ts

@@ -1,26 +0,0 @@
-import { addImports, addVitePlugin, defineNuxtModule } from '@nuxt/kit'
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
-
-export interface ModuleOptions {
-  autoImport: boolean
-}
-
-export default defineNuxtModule<ModuleOptions>({
-  meta: {
-    name: 'vue-web3',
-    configKey: 'web3',
-  },
-  defaults: {
-    autoImport: true,
-  },
-  setup(options, nuxt) {
-    addVitePlugin(nodePolyfills())
-
-    if (options.autoImport) {
-      addImports({
-        name: 'useWeb3',
-        from: '@instadapp/vue-web3',
-      })
-    }
-  },
-})

nuxt/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "./playground/.nuxt/tsconfig.json"
-}

package.json

@@ -1,48 +1,22 @@
 {
   "name": "@instadapp/vue-web3",
-  "version": "0.11.1",
+  "version": "0.3.0",
   "description": "Vue web3 composition api",
   "license": "MIT",
-  "main": "index.js",
+  "main": "dist/cjs/index.js",
-  "module": "dist/vue-web3.mjs",
+  "module": "dist/esm/index.js",
-  "unpkg": "dist/vue-web3.iife.js",
+  "unpkg": "dist/global/index.js",
-  "jsdelivr": "dist/vue-web3.iife.js",
+  "types": "dist/esm/src/index.d.ts",
-  "types": "dist/src/index.d.ts",
-  "exports": {
-    ".": {
-      "browser": "./dist/vue-web3.esm-browser.js",
-      "node": {
-        "import": "./dist/vue-web3.mjs",
-        "require": {
-          "production": "./dist/vue-web3.prod.cjs",
-          "development": "./dist/vue-web3.cjs",
-          "default": "./index.js"
-        }
-      },
-      "import": "./dist/vue-web3.mjs"
-    },
-    "./package.json": "./package.json",
-    "./dist/*": "./dist/*",
-    "./nuxt/*": "./nuxt/*",
-    "./nuxt": {
-      "import": "./nuxt/dist/module.mjs",
-      "require": "./nuxt/dist/module.cjs"
-    }
-  },
   "sideEffects": false,
   "scripts": {
-    "prepublishOnly": "yarn install && yarn build && cd nuxt && yarn install && yarn dev:prepare && yarn prepack",
+    "prepublishOnly": "npm i && npm run build",
     "build": "rollup -c rollup.config.js",
     "dev": "rollup -w -c rollup.config.js",
     "lint": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
     "lint:fix": "yarn run lint --write"
   },
   "files": [
-    "nuxt/package.json",
-    "nuxt/dist/**/*",
     "dist/**/*",
-    "index.js",
-    "index.cjs",
     "LICENSE",
     "README.md"
   ],
@@ -51,13 +25,10 @@
     "@ethersproject/keccak256": "^5.4.0",
     "@web3-react/abstract-connector": "^6.0.7",
     "@web3-react/types": "^6.0.7",
-    "events": "^3.3.0",
     "tiny-invariant": "^1.1.0",
-    "vue-demi": "^0.13.11"
+    "vue-demi": "^0.11.3"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
-    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
     "@rollup/plugin-alias": "^3.1.2",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
@@ -69,12 +40,11 @@
     "prettier": "^2.2.1",
     "rollup": "^2.39.0",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-node-polyfills": "^0.2.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
     "typescript": "^4.1.5",
-    "vue": "^3.2.6",
+    "yorkie": "^2.0.0",
-    "yorkie": "^2.0.0"
+    "vue": "^3.2.6"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.0-rc.1",

rollup.config.js

@@ -1,21 +1,25 @@
-import path from 'path'
+// @ts-nocheck
-import ts from 'rollup-plugin-typescript2'
-import replace from '@rollup/plugin-replace'
-import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
 import pascalcase from 'pascalcase'
+import path from 'path'
+import del from 'rollup-plugin-delete'
+import ts from 'rollup-plugin-typescript2'
 
 const pkg = require('./package.json')
-const name = 'vue-web3'
+const name = pkg.name
 
 function getAuthors(pkg) {
   const { contributors, author } = pkg
 
   const authors = new Set()
+
   if (contributors && contributors)
     contributors.forEach((contributor) => {
       authors.add(contributor.name)
     })
+
   if (author) authors.add(author.name)
 
   return Array.from(authors).join(', ')
@@ -33,60 +37,47 @@ let hasTSChecked = false
 const outputConfigs = {
   // each file name has the format: `dist/${name}.${format}.js`
   // format being a key of this object
-  mjs: {
+  esm: {
-    file: pkg.module,
+    dir: 'dist/esm',
     format: `es`,
   },
   cjs: {
-    file: pkg.module.replace('mjs', 'cjs'),
+    dir: 'dist/cjs',
-    format: `cjs`,
+    format: 'cjs',
+    exports: 'named',
   },
   global: {
-    file: pkg.unpkg,
+    dir: 'dist/global',
-    format: `iife`,
+    format: 'iife',
-  },
-  browser: {
-    file: 'dist/vue-web3.esm-browser.js',
-    format: `es`,
   },
 }
 
-const packageBuilds = Object.keys(outputConfigs)
+const allFormats = Object.keys(outputConfigs)
-const packageConfigs = packageBuilds.map((format) =>
+const packageFormats = allFormats
-  createConfig(format, outputConfigs[format]),
+const packageConfigs = packageFormats.map((format) =>
+  format === 'global'
+    ? createMinifiedConfig(format)
+    : createConfig(format, outputConfigs[format]),
 )
 
-// only add the production ready if we are bundling the options
-packageBuilds.forEach((buildName) => {
-  if (buildName === 'cjs') {
-    packageConfigs.push(createProductionConfig(buildName))
-  } else if (buildName === 'global') {
-    packageConfigs.push(createMinifiedConfig(buildName))
-  }
-})
-
 export default packageConfigs
 
-function createConfig(buildName, output, plugins = []) {
+function createConfig(format, output, plugins = []) {
   if (!output) {
-    console.log(require('chalk').yellow(`invalid format: "${buildName}"`))
+    console.log(require('chalk').yellow(`invalid format: "${format}"`))
     process.exit(1)
   }
 
   output.sourcemap = !!process.env.SOURCE_MAP
   output.banner = banner
   output.externalLiveBindings = false
-  output.globals = {
+  output.globals = { vue: 'Vue' }
-    'vue-demi': 'VueDemi',
-    vue: 'Vue',
-    '@vue/composition-api': 'vueCompositionApi',
-  }
 
-  const isProductionBuild = /\.prod\.[cmj]s$/.test(output.file)
+  const isProductionBuild = /\.prod\.js$/.test(output.file)
-  const isGlobalBuild = buildName === 'global'
+  const isGlobalBuild = format === 'global'
-  const isRawESMBuild = buildName === 'browser'
+  const isRawESMBuild = format === 'esm'
-  const isNodeBuild = buildName === 'cjs'
+  const isNodeBuild = format === 'cjs'
-  const isBundlerESMBuild = buildName === 'browser' || buildName === 'mjs'
+  const isBundlerESMBuild = /esm-bundler/.test(format)
 
   if (isGlobalBuild) output.name = pascalcase(pkg.name)
 
@@ -94,14 +85,15 @@ function createConfig(buildName, output, plugins = []) {
 
   const tsPlugin = ts({
     check: !hasTSChecked,
-    tsconfig: path.resolve(__dirname, './tsconfig.json'),
+    tsconfig: path.resolve(__dirname, 'tsconfig.json'),
-    cacheRoot: path.resolve(__dirname, './node_modules/.rts2_cache'),
+    cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
     tsconfigOverride: {
       compilerOptions: {
         sourceMap: output.sourcemap,
         declaration: shouldEmitDeclarations,
         declarationMap: shouldEmitDeclarations,
       },
+      exclude: ['__tests__', 'test-dts'],
     },
   })
   // we only need to check TS and generate declarations once for each build.
@@ -109,7 +101,11 @@ function createConfig(buildName, output, plugins = []) {
   // during a single build.
   hasTSChecked = true
 
-  const external = ['vue-demi', 'vue', '@vue/composition-api']
+  const external = ['vue']
+
+  if (!isGlobalBuild) {
+    external.push('vue-demi')
+  }
 
   const nodePlugins = [resolve(), commonjs()]
 
@@ -118,12 +114,13 @@ function createConfig(buildName, output, plugins = []) {
     // Global and Browser ESM builds inlines everything so that they can be
     // used alone.
     external,
+    inlineDynamicImports: isGlobalBuild,
     plugins: [
+      del({ targets: `dist/${format}` }),
       tsPlugin,
       createReplacePlugin(
         isProductionBuild,
         isBundlerESMBuild,
-        // isBrowserBuild?
         isGlobalBuild || isRawESMBuild || isBundlerESMBuild,
         isGlobalBuild,
         isNodeBuild,
@@ -132,11 +129,6 @@ function createConfig(buildName, output, plugins = []) {
       ...plugins,
     ],
     output,
-    // onwarn: (msg, warn) => {
-    //   if (!/Circular/.test(msg)) {
-    //     warn(msg)
-    //   }
-    // },
   }
 }
 
@@ -150,25 +142,22 @@ function createReplacePlugin(
   const replacements = {
     __COMMIT__: `"${process.env.COMMIT}"`,
     __VERSION__: `"${pkg.version}"`,
-    __DEV__:
+    __DEV__: isBundlerESMBuild
-      isBundlerESMBuild || (isNodeBuild && !isProduction)
+      ? // preserve to be handled by bundlers
-        ? // preserve to be handled by bundlers
+        `(process.env.NODE_ENV !== 'production')`
-          `(process.env.NODE_ENV !== 'production')`
+      : // hard coded dev/prod builds
-        : // hard coded dev/prod builds
+        !isProduction,
-          JSON.stringify(!isProduction),
     // this is only used during tests
-    __TEST__:
+    __TEST__: isBundlerESMBuild ? `(process.env.NODE_ENV === 'test')` : false,
-      isBundlerESMBuild || isNodeBuild
-        ? `(process.env.NODE_ENV === 'test')`
-        : 'false',
     // If the build is expected to run directly in the browser (global / esm builds)
-    __BROWSER__: JSON.stringify(isBrowserBuild),
+    __BROWSER__: isBrowserBuild,
     // is targeting bundlers?
-    __BUNDLER__: JSON.stringify(isBundlerESMBuild),
+    __BUNDLER__: isBundlerESMBuild,
-    __GLOBAL__: JSON.stringify(isGlobalBuild),
+    __GLOBAL__: isGlobalBuild,
     // is targeting Node (SSR)?
-    __NODE_JS__: JSON.stringify(isNodeBuild),
+    __NODE_JS__: isNodeBuild,
   }
+
   // allow inline overrides like
   //__RUNTIME_COMPILE__=true yarn build
   Object.keys(replacements).forEach((key) => {
@@ -176,27 +165,20 @@ function createReplacePlugin(
       replacements[key] = process.env[key]
     }
   })
-  return replace({
-    preventAssignment: true,
-    values: replacements,
-  })
-}
 
-function createProductionConfig(format) {
+  return replace({
-  const extension = format === 'cjs' ? 'cjs' : 'js'
+    values: replacements,
-  const descriptor = format === 'cjs' ? '' : `.${format}`
+    preventAssignment: true,
-  return createConfig(format, {
-    file: `dist/${name}${descriptor}.prod.${extension}`,
-    format: outputConfigs[format].format,
   })
 }
 
 function createMinifiedConfig(format) {
   const { terser } = require('rollup-plugin-terser')
+
   return createConfig(
     format,
     {
-      file: `dist/${name}.${format === 'global' ? 'iife' : format}.prod.js`,
+      dir: `dist/${format}/`,
       format: outputConfigs[format].format,
     },
     [

src/index.ts

@@ -1,14 +1,7 @@
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { normalizeAccount, normalizeChainId } from './normalizers'
 import { ConnectorEvent, ConnectorUpdate } from '@web3-react/types'
-import {
+import { computed, onBeforeUnmount, Ref, ref, watch } from 'vue-demi'
-  computed,
-  onBeforeUnmount,
-  Ref,
-  ref,
-  shallowRef,
-  watch,
-} from 'vue-demi'
 
 export class UnsupportedChainIdError extends Error {
   public constructor(
@@ -16,17 +9,15 @@ export class UnsupportedChainIdError extends Error {
     supportedChainIds?: readonly number[],
   ) {
     super()
-    this.name = 'UnsupportedChainIdError'
+    this.name = this.constructor.name
     this.message = `Unsupported chain id: ${unsupportedChainId}. Supported chain ids are: ${supportedChainIds}.`
-
-    Object.setPrototypeOf(this, UnsupportedChainIdError.prototype)
   }
 }
 
-const connector = shallowRef<AbstractConnector>()
+const connector = ref<AbstractConnector>()
 const chainId = ref()
 const account = ref<null | string>()
-const provider = shallowRef<any>()
+const provider = ref<any>()
 const error = ref<Error>()
 const active = computed(
   () =>
@@ -35,23 +26,17 @@ const active = computed(
     account.value !== undefined &&
     !!!error.value,
 )
-const library = shallowRef()
+const library = ref()
 
-let getLibrary: any =
+let getLibrary: any = (provider?: any, connector?: any) => (): any => null
-  (provider: any, connector: any, account: `0x${string}`) => (): any =>
-    null
 
 export const setWeb3LibraryCallback = (
-  cb: (provider: any, connector: any, account: `0x${string}`) => any,
+  cb: (provider?: any, connector?: any) => any,
 ) => {
   getLibrary = cb
 }
 
-export interface IVueWeb3Library {
+export const useWeb3 = <TLibrary = any>() => {
-  [key: string]: any
-}
-
-export const useWeb3 = <TVueWeb3Library extends IVueWeb3Library>() => {
   const onErrorCb = ref<(error: Error) => void>()
 
   const activate = async (
@@ -162,13 +147,13 @@ export const useWeb3 = <TVueWeb3Library extends IVueWeb3Library>() => {
     library.value = undefined
   }
 
-  watch([active, provider, connector, chainId, account], () => {
+  watch([active, provider, connector, chainId], () => {
     library.value =
       active.value &&
       chainId.value !== undefined &&
       Number.isInteger(chainId.value) &&
       !!connector.value
-        ? getLibrary(provider.value, connector.value, account.value)
+        ? getLibrary(provider.value, connector.value)
         : undefined
   })
 
@@ -195,7 +180,7 @@ export const useWeb3 = <TVueWeb3Library extends IVueWeb3Library>() => {
   })
 
   return {
-    library: library as Ref<TVueWeb3Library>,
+    library: library as Ref<TLibrary>,
     active,
     activate,
     deactivate,