mirror of
https://github.com/Instadapp/vue-web3.git
synced 2024-07-29 21:48:25 +00:00
support viem
This commit is contained in:
parent
9da073d3b0
commit
9d74a5ff4e
44
README.md
44
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<Web3Provider>()
|
|||
```
|
||||
|
||||
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
|
||||
|
@ -90,29 +108,29 @@ 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`
|
||||
}
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
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<Web3>();
|
||||
const useWeb3 = () => useWeb3Generic<Web3>()
|
||||
// const useWeb3 = () => useWeb3Generic<Web3Provider>();
|
||||
|
||||
export { useWeb3 };
|
||||
export { useWeb3 }
|
||||
```
|
||||
|
||||
<br />
|
||||
---
|
||||
## <br />
|
||||
|
||||
<br />
|
||||
|
||||
Demo (Nuxt 2): https://github.com/KABBOUCHI/nuxt-vue-web3
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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 = <TVueWeb3Library extends IVueWeb3Library>() => {
|
|||
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
|
||||
})
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user