.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

@@ -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,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:
-
-using generic:
+Typescript:
 
 ```js
 import Web3 from 'web3'
@@ -88,49 +69,8 @@ import { Web3Provider } from "@ethersproject/providers";
 const { library } = useWeb3<Web3Provider>()
 ```
 
-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 />
+---
 <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.11.1",
+  "version": "1.0.0",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -21,19 +21,17 @@
     "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"
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
+    "@instadapp/vue-web3": "^0.7.0",
+    "@nuxt/kit": "^3.0.0-rc.3",
+    "rollup-plugin-node-polyfills": "^0.2.1"
   },
   "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/module-builder": "latest",
+    "@nuxt/ui": "^0.1.1",
+    "@nuxtjs/eslint-config-typescript": "latest",
+    "eslint": "latest",
+    "nuxt": "^3.0.0-rc.3"
   }
 }

nuxt/playground/app.vue

@@ -39,7 +39,7 @@ const connectWalletConnect = async () => {
   const { WalletConnectConnector } = await import('@web3-react/walletconnect-connector')
 
   await activate(
-    new WalletConnectConnector({})
+    new WalletConnectConnector({ })
   )
 }
 </script>

nuxt/playground/nuxt.config.ts

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

nuxt/playground/package.json

@@ -6,6 +6,6 @@
     "@web3-react/walletconnect-connector": "^6.2.13"
   },
   "devDependencies": {
-    "@nuxt/ui": "^0.3.3"
+    "@nuxt/ui": "^0.1.1"
   }
 }

nuxt/src/module.ts

@@ -1,5 +1,7 @@
-import { addImports, addVitePlugin, defineNuxtModule } from '@nuxt/kit'
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import { resolve } from 'path'
+import { addAutoImport, defineNuxtModule, extendViteConfig } from '@nuxt/kit'
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
+import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
 
 export interface ModuleOptions {
   autoImport: boolean
@@ -8,19 +10,45 @@ export interface ModuleOptions {
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: 'vue-web3',
-    configKey: 'web3',
+    configKey: 'web3'
   },
   defaults: {
-    autoImport: true,
+    autoImport: true
   },
-  setup(options, nuxt) {
-    addVitePlugin(nodePolyfills())
+  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
+        })
+      )
+    })
 
     if (options.autoImport) {
-      addImports({
-        name: 'useWeb3',
-        from: '@instadapp/vue-web3',
+      addAutoImport({
+        name: 'useWeb3', from: '@instadapp/vue-web3'
       })
     }
-  },
+  }
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instadapp/vue-web3",
-  "version": "0.11.1",
+  "version": "0.8.0",
   "description": "Vue web3 composition api",
   "license": "MIT",
   "main": "index.js",
@@ -12,7 +12,11 @@
     ".": {
       "browser": "./dist/vue-web3.esm-browser.js",
       "node": {
-        "import": "./dist/vue-web3.mjs",
+        "import": {
+          "production": "./dist/vue-web3.prod.cjs",
+          "development": "./dist/vue-web3.mjs",
+          "default": "./dist/vue-web3.mjs"
+        },
         "require": {
           "production": "./dist/vue-web3.prod.cjs",
           "development": "./dist/vue-web3.cjs",
@@ -22,12 +26,7 @@
       "import": "./dist/vue-web3.mjs"
     },
     "./package.json": "./package.json",
-    "./dist/*": "./dist/*",
-    "./nuxt/*": "./nuxt/*",
-    "./nuxt": {
-      "import": "./nuxt/dist/module.mjs",
-      "require": "./nuxt/dist/module.cjs"
-    }
+    "./dist/*": "./dist/*"
   },
   "sideEffects": false,
   "scripts": {
@@ -51,13 +50,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.4"
   },
   "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,7 +65,6 @@
     "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",

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 {
-  computed,
-  onBeforeUnmount,
-  Ref,
-  ref,
-  shallowRef,
-  watch,
-} from 'vue-demi'
+import { computed, onBeforeUnmount, Ref, ref, watch } from 'vue-demi'
 
 export class UnsupportedChainIdError extends Error {
   public constructor(
@@ -23,10 +16,10 @@ export class UnsupportedChainIdError extends Error {
   }
 }
 
-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 +28,17 @@ const active = computed(
     account.value !== undefined &&
     !!!error.value,
 )
-const library = shallowRef()
+const library = ref()
 
-let getLibrary: any =
-  (provider: any, connector: any, account: `0x${string}`) => (): any =>
-    null
+let getLibrary: any = (provider?: any, connector?: any) => (): 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 {
-  [key: string]: any
-}
-
-export const useWeb3 = <TVueWeb3Library extends IVueWeb3Library>() => {
+export const useWeb3 = <TLibrary = any>() => {
   const onErrorCb = ref<(error: Error) => void>()
 
   const activate = async (
@@ -162,13 +149,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 +182,7 @@ export const useWeb3 = <TVueWeb3Library extends IVueWeb3Library>() => {
   })
 
   return {
-    library: library as Ref<TVueWeb3Library>,
+    library: library as Ref<TLibrary>,
     active,
     activate,
     deactivate,