nuxt 0.11.1

.github/workflows/npm-publish.yml

@@ -1,6 +1,7 @@
 name: npm-publish
 
 on:
+  workflow_dispatch:
   release:
     types: [released]
 
@@ -12,9 +13,16 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
       - 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](https://github.com/NoahZinsmeister/web3-react).
+Vue 2/3 wrapper for web3 built on top of [react-web3@v6](https://github.com/NoahZinsmeister/web3-react/tree/v6).
 
 ## 🚀 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,8 +32,24 @@ 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()
@@ -55,7 +71,10 @@ defineComponent({
   },
 })
 ```
-Typescript:
+
+#### Typescript:
+
+using generic:
 
 ```js
 import Web3 from 'web3'
@@ -69,4 +88,51 @@ import { Web3Provider } from "@ethersproject/providers";
 const { library } = useWeb3<Web3Provider>()
 ```
 
-Demo: https://github.com/KABBOUCHI/nuxt-vue-web3
+using global types:
+
+```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

@@ -0,0 +1,7 @@
+'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

@@ -0,0 +1,7 @@
+'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

@@ -0,0 +1,12 @@
+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

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

nuxt/.eslintrc

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

nuxt/.gitignore

@@ -0,0 +1,51 @@
+# 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

@@ -0,0 +1,6 @@
+# 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

@@ -0,0 +1,39 @@
+{
+  "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

@@ -0,0 +1,45 @@
+<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

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

nuxt/playground/package.json

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,26 @@
+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

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

package.json

@@ -1,22 +1,48 @@
 {
   "name": "@instadapp/vue-web3",
-  "version": "0.3.0",
+  "version": "0.11.1",
   "description": "Vue web3 composition api",
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "unpkg": "dist/global/index.js",
-  "types": "dist/esm/src/index.d.ts",
+  "main": "index.js",
+  "module": "dist/vue-web3.mjs",
+  "unpkg": "dist/vue-web3.iife.js",
+  "jsdelivr": "dist/vue-web3.iife.js",
+  "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": "npm i && npm run build",
+    "prepublishOnly": "yarn install && yarn build && cd nuxt && yarn install && yarn dev:prepare && yarn prepack",
     "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"
   ],
@@ -25,10 +51,13 @@
     "@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.11.3"
+    "vue-demi": "^0.13.11"
   },
   "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",
@@ -40,11 +69,12 @@
     "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",
-    "yorkie": "^2.0.0",
-    "vue": "^3.2.6"
+    "vue": "^3.2.6",
+    "yorkie": "^2.0.0"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.0-rc.1",

rollup.config.js

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

src/index.ts

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