mirror of
https://github.com/Instadapp/vue-web3.git
synced 2024-07-29 21:48:25 +00:00
Compare commits
5 Commits
Author | SHA1 | Date | |
---|---|---|---|
![]() |
1d10cfb64f | ||
![]() |
382192068b | ||
![]() |
ddfdab416c | ||
![]() |
1b8472b128 | ||
![]() |
9d74a5ff4e |
1
.github/workflows/npm-publish.yml
vendored
1
.github/workflows/npm-publish.yml
vendored
|
@ -1,6 +1,7 @@
|
||||||
name: npm-publish
|
name: npm-publish
|
||||||
|
|
||||||
on:
|
on:
|
||||||
|
workflow_dispatch:
|
||||||
release:
|
release:
|
||||||
types: [released]
|
types: [released]
|
||||||
|
|
||||||
|
|
48
README.md
48
README.md
|
@ -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
|
||||||
|
@ -90,29 +108,29 @@ 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
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@instadapp/vue-web3-nuxt",
|
"name": "@instadapp/vue-web3-nuxt",
|
||||||
"version": "0.10.1",
|
"version": "0.11.1",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"exports": {
|
"exports": {
|
||||||
|
@ -21,7 +21,7 @@
|
||||||
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
|
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@instadapp/vue-web3": "^0.10.0",
|
"@instadapp/vue-web3": "^0.11.1",
|
||||||
"@nuxt/kit": "^3.1.0",
|
"@nuxt/kit": "^3.1.0",
|
||||||
"mkdirp-promise": "4",
|
"mkdirp-promise": "4",
|
||||||
"vite-plugin-node-polyfills": "^0.7.0"
|
"vite-plugin-node-polyfills": "^0.7.0"
|
||||||
|
|
|
@ -722,10 +722,10 @@
|
||||||
kolorist "^1.6.0"
|
kolorist "^1.6.0"
|
||||||
local-pkg "^0.4.2"
|
local-pkg "^0.4.2"
|
||||||
|
|
||||||
"@instadapp/vue-web3@^0.9.8":
|
"@instadapp/vue-web3@^0.11.1":
|
||||||
version "0.9.8"
|
version "0.11.1"
|
||||||
resolved "https://registry.yarnpkg.com/@instadapp/vue-web3/-/vue-web3-0.9.8.tgz#4d7acf14518c96037c181cffa9a1865d8c3537b0"
|
resolved "https://registry.yarnpkg.com/@instadapp/vue-web3/-/vue-web3-0.11.1.tgz#3abcd28d39346aaf7a87bc4c3cb0221680ee5371"
|
||||||
integrity sha512-sFh20QxHm9U07v03PgpAH7Ox9YlLipPiEriwnBRPigwyDbyrKe9w6bj4eNklPzKcYbOqVQ3rxt/TTderzFuuKQ==
|
integrity sha512-SSz2bnD1jMSlbznpV6oFEwlNQ4OR8mzXTuvVw/QCeY21nBuzQKy97e911691Ixdui1dfO6wadYrkke6c5meePQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@ethersproject/bytes" "^5.4.0"
|
"@ethersproject/bytes" "^5.4.0"
|
||||||
"@ethersproject/keccak256" "^5.4.0"
|
"@ethersproject/keccak256" "^5.4.0"
|
||||||
|
@ -733,7 +733,7 @@
|
||||||
"@web3-react/types" "^6.0.7"
|
"@web3-react/types" "^6.0.7"
|
||||||
events "^3.3.0"
|
events "^3.3.0"
|
||||||
tiny-invariant "^1.1.0"
|
tiny-invariant "^1.1.0"
|
||||||
vue-demi "^0.11.4"
|
vue-demi "^0.13.11"
|
||||||
|
|
||||||
"@ioredis/commands@^1.1.1":
|
"@ioredis/commands@^1.1.1":
|
||||||
version "1.2.0"
|
version "1.2.0"
|
||||||
|
@ -7696,16 +7696,11 @@ vue-bundle-renderer@^1.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
ufo "^1.0.0"
|
ufo "^1.0.0"
|
||||||
|
|
||||||
vue-demi@*:
|
vue-demi@*, vue-demi@^0.13.11:
|
||||||
version "0.13.11"
|
version "0.13.11"
|
||||||
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
|
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
|
||||||
integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
|
integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
|
||||||
|
|
||||||
vue-demi@^0.11.4:
|
|
||||||
version "0.11.4"
|
|
||||||
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.4.tgz#6101992fe4724cf5634018a16e953f3052e94e2a"
|
|
||||||
integrity sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==
|
|
||||||
|
|
||||||
vue-devtools-stub@^0.1.0:
|
vue-devtools-stub@^0.1.0:
|
||||||
version "0.1.0"
|
version "0.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz#a65b9485edecd4273cedcb8102c739b83add2c81"
|
resolved "https://registry.yarnpkg.com/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz#a65b9485edecd4273cedcb8102c739b83add2c81"
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@instadapp/vue-web3",
|
"name": "@instadapp/vue-web3",
|
||||||
"version": "0.10.1",
|
"version": "0.11.1",
|
||||||
"description": "Vue web3 composition api",
|
"description": "Vue web3 composition api",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
|
|
10
src/index.ts
10
src/index.ts
|
@ -37,10 +37,12 @@ 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, account: `0x${string}`) => any,
|
||||||
) => {
|
) => {
|
||||||
getLibrary = cb
|
getLibrary = cb
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user