nuxt 0.11.1

.github/workflows/npm-publish.yml

@@ -1,6 +1,7 @@
 name: npm-publish
 
 on:
+  workflow_dispatch:
   release:
     types: [released]
 
@@ -18,6 +19,7 @@ jobs:
           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 }}

README.md

@@ -4,7 +4,7 @@ Vue 2/3 wrapper for web3 built on top of [react-web3@v6](https://github.com/Noah
 
 ## 🚀 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'
@@ -68,22 +87,50 @@ import { Web3Provider } from "@ethersproject/providers";
 
 const { library } = useWeb3<Web3Provider>()
 ```
-Nuxt 3
+
+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'
-    ],
+  modules: ['@instadapp/vue-web3-nuxt'],
+  web3: {
+    autoImport: false, // default `true`
+  },
 })
 ```
 
-<br />
----
+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

nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instadapp/vue-web3-nuxt",
-  "version": "0.9.3",
+  "version": "0.11.1",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -21,22 +21,19 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
-    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
-    "@instadapp/vue-web3": "^0.9.1",
-    "@nuxt/kit": "^3.0.0-rc.11",
-    "events": "^3.3.0",
+    "@instadapp/vue-web3": "^0.11.1",
+    "@nuxt/kit": "^3.1.0",
     "mkdirp-promise": "4",
-    "rollup-plugin-node-polyfills": "^0.2.1"
+    "vite-plugin-node-polyfills": "^0.7.0"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "latest",
-    "@nuxt/ui": "^0.3.3",
+    "@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.24.0",
-    "nuxt": "^3.0.0-rc.11"
+    "eslint": "8.32.0",
+    "nuxt": "^3.1.0"
   }
 }

nuxt/src/module.ts

@@ -1,11 +1,5 @@
-import {
-  addAutoImport,
-  addImportsDir,
-  defineNuxtModule,
-  extendViteConfig,
-} from '@nuxt/kit'
-import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
-import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
+import { addImports, addVitePlugin, defineNuxtModule } from '@nuxt/kit'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 export interface ModuleOptions {
   autoImport: boolean
@@ -20,41 +14,10 @@ export default defineNuxtModule<ModuleOptions>({
     autoImport: true,
   },
   setup(options, nuxt) {
-    // nuxt.hook('vite:extendConfig', (clientConfig, { isClient }) => {
-    //   if (isClient && process.env.NODE_ENV === 'production') {
-    //     clientConfig.resolve.alias = {
-    //       ...clientConfig.resolve.alias,
-    //       web3: resolve('./node_modules/web3/dist/web3.min.js')
-    //     }
-    //   }
-    // })
-
-    extendViteConfig((config) => {
-      config.build = config.build || {}
-      config.build.rollupOptions = config.build.rollupOptions || {}
-      config.build.rollupOptions.plugins =
-        config.build.rollupOptions.plugins || []
-      config.build.rollupOptions.plugins.push(rollupNodePolyFill())
-
-      config.optimizeDeps = config.optimizeDeps || {}
-      config.optimizeDeps.esbuildOptions =
-        config.optimizeDeps.esbuildOptions || {}
-      config.optimizeDeps.esbuildOptions.define =
-        config.optimizeDeps.esbuildOptions.define || {}
-      config.optimizeDeps.esbuildOptions.define.global = 'globalThis'
-
-      config.optimizeDeps.esbuildOptions.plugins =
-        config.optimizeDeps.esbuildOptions.plugins || []
-      config.optimizeDeps.esbuildOptions.plugins.push(
-        NodeGlobalsPolyfillPlugin({
-          process: true,
-          buffer: true,
-        }),
-      )
-    })
+    addVitePlugin(nodePolyfills())
 
     if (options.autoImport) {
-      addAutoImport({
+      addImports({
         name: 'useWeb3',
         from: '@instadapp/vue-web3',
       })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instadapp/vue-web3",
-  "version": "0.9.3",
+  "version": "0.11.1",
   "description": "Vue web3 composition api",
   "license": "MIT",
   "main": "index.js",
@@ -53,7 +53,7 @@
     "@web3-react/types": "^6.0.7",
     "events": "^3.3.0",
     "tiny-invariant": "^1.1.0",
-    "vue-demi": "^0.11.4"
+    "vue-demi": "^0.13.11"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",

src/index.ts

@@ -37,15 +37,21 @@ const active = computed(
 )
 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 (
@@ -156,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
   })
 
@@ -189,7 +195,7 @@ export const useWeb3 = <TLibrary = any>() => {
   })
 
   return {
-    library: library as Ref<TLibrary>,
+    library: library as Ref<TVueWeb3Library>,
     active,
     activate,
     deactivate,