diff --git a/README.md b/README.md index a98904e..76f4af1 100644 --- a/README.md +++ b/README.md @@ -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,9 +71,11 @@ defineComponent({ }, }) ``` + #### Typescript: using generic: + ```js import Web3 from 'web3' @@ -71,16 +89,16 @@ const { library } = useWeb3() ``` using global types: + ```ts // global.d.ts -import type Web3 from "web3"; +import type Web3 from 'web3' -declare module "@instadapp/vue-web3" { +declare module '@instadapp/vue-web3' { interface IVueWeb3Library extends Web3 {} } ``` - #### Nuxt 3 ```bash @@ -88,31 +106,31 @@ yarn add @instadapp/vue-web3-nuxt -D ``` ```ts -// nuxt.config.ts +// nuxt.config.ts export default defineNuxtConfig({ - modules: [ - '@instadapp/vue-web3-nuxt' - ], - web3 :{ - autoImport: false, // default `true` - } + 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 Web3 from 'web3' // import { Web3Provider } from "@ethersproject/providers"; -import { useWeb3 as useWeb3Generic } from "@instadapp/vue-web3"; +import { useWeb3 as useWeb3Generic } from '@instadapp/vue-web3' -const useWeb3 = () => useWeb3Generic(); +const useWeb3 = () => useWeb3Generic() // const useWeb3 = () => useWeb3Generic(); -export { useWeb3 }; +export { useWeb3 } ``` -
---- +##
+
Demo (Nuxt 2): https://github.com/KABBOUCHI/nuxt-vue-web3 diff --git a/package.json b/package.json index 6c076a2..00f2f0c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@instadapp/vue-web3", - "version": "0.10.1", + "version": "0.11.0", "description": "Vue web3 composition api", "license": "MIT", "main": "index.js", diff --git a/src/index.ts b/src/index.ts index c13061c..dd1937a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -37,7 +37,9 @@ 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, @@ -160,13 +162,13 @@ export const useWeb3 = () => { 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 })