Instadapp/vue-web3
1
0
Fork 0
mirror of https://github.com/Instadapp/vue-web3.git synced 2024-07-29 21:48:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

support viem

Browse Source
This commit is contained in:
Georges KABBOUCHI 2023-09-28 19:45:53 +03:00
parent 9da073d3b0
commit 9d74a5ff4e
3 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
README.md
View File

@ -32,8 +32,24 @@ const walletconnect = new WalletConnectConnector({
qrcode: true, qrcode: true,
}) })
// web3.js v1
setWeb3LibraryCallback((provider) => new Web3(provider)) 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({ defineComponent({
setup() { setup() {
const { active, activate, account, library } = useWeb3() const { active, activate, account, library } = useWeb3()
@ -55,9 +71,11 @@ defineComponent({
}, },
}) })
``` ```
#### Typescript: #### Typescript:
using generic: using generic:
```js ```js
import Web3 from 'web3' import Web3 from 'web3'
@ -71,16 +89,16 @@ const { library } = useWeb3<Web3Provider>()
``` ```
using global types: using global types:
```ts ```ts
// global.d.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 {} interface IVueWeb3Library extends Web3 {}
} }
``` ```
#### Nuxt 3 #### Nuxt 3
```bash ```bash
@ -88,31 +106,31 @@ yarn add @instadapp/vue-web3-nuxt -D
``` ```
```ts ```ts
// nuxt.config.ts // nuxt.config.ts
export default defineNuxtConfig({ export default defineNuxtConfig({
modules: [ modules: ['@instadapp/vue-web3-nuxt'],
'@instadapp/vue-web3-nuxt' web3: {
], autoImport: false, // default `true`
web3 :{ },
autoImport: false, // default `true`
}
}) })
``` ```
If you disabled `@instadapp/vue-web3-nuxt` auto import: If you disabled `@instadapp/vue-web3-nuxt` auto import:
```ts ```ts
//composables/useWeb3.ts //composables/useWeb3.ts
import Web3 from "web3"; import Web3 from 'web3'
// import { Web3Provider } from "@ethersproject/providers"; // import { Web3Provider } from "@ethersproject/providers";
import { useWeb3 as useWeb3Generic } from "@instadapp/vue-web3"; import { useWeb3 as useWeb3Generic } from '@instadapp/vue-web3'
const useWeb3 = () => useWeb3Generic<Web3>(); const useWeb3 = () => useWeb3Generic<Web3>()
// const useWeb3 = () => useWeb3Generic<Web3Provider>(); // const useWeb3 = () => useWeb3Generic<Web3Provider>();
export { useWeb3 }; export { useWeb3 }
``` ```
<br /> ## <br />
---
<br /> <br />
Demo (Nuxt 2): https://github.com/KABBOUCHI/nuxt-vue-web3 Demo (Nuxt 2): https://github.com/KABBOUCHI/nuxt-vue-web3

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@instadapp/vue-web3", "name": "@instadapp/vue-web3",
"version": "0.10.1", "version": "0.11.0",
"description": "Vue web3 composition api", "description": "Vue web3 composition api",
"license": "MIT", "license": "MIT",
"main": "index.js", "main": "index.js",

8
src/index.ts
View File

@ -37,7 +37,9 @@ const active = computed(
) )
const library = shallowRef() 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 = ( export const setWeb3LibraryCallback = (
cb: (provider?: any, connector?: any) => any, cb: (provider?: any, connector?: any) => any,
@ -160,13 +162,13 @@ export const useWeb3 = <TVueWeb3Library extends IVueWeb3Library>() => {
library.value = undefined library.value = undefined
} }
watch([active, provider, connector, chainId], () => { watch([active, provider, connector, chainId, account], () => {
library.value = library.value =
active.value && active.value &&
chainId.value !== undefined && chainId.value !== undefined &&
Number.isInteger(chainId.value) && Number.isInteger(chainId.value) &&
!!connector.value !!connector.value
? getLibrary(provider.value, connector.value) ? getLibrary(provider.value, connector.value, account.value)
: undefined : undefined
}) })