mirror of
https://github.com/Instadapp/vue-web3.git
synced 2024-07-29 21:48:25 +00:00
Compare commits
No commits in common. "master" and "v0.7.0" have entirely different histories.
10
.github/workflows/npm-publish.yml
vendored
10
.github/workflows/npm-publish.yml
vendored
|
|
@ -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
|
||||
74
README.md
74
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,51 +69,4 @@ 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 />
|
||||
|
||||
Demo (Nuxt 2): https://github.com/KABBOUCHI/nuxt-vue-web3
|
||||
|
||||
Demo (Nuxt 3): https://github.com/KABBOUCHI/nuxt3-vue-web3
|
||||
Demo: https://github.com/KABBOUCHI/nuxt-vue-web3
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
dist
|
||||
node_modules
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"extends": [
|
||||
"@nuxtjs/eslint-config-typescript"
|
||||
],
|
||||
"rules": {
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"off"
|
||||
]
|
||||
}
|
||||
}
|
||||
51
nuxt/.gitignore
vendored
51
nuxt/.gitignore
vendored
|
|
@ -1,51 +0,0 @@
|
|||
# Dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
*.log*
|
||||
|
||||
# Temp directories
|
||||
.temp
|
||||
.tmp
|
||||
.cache
|
||||
|
||||
# Yarn
|
||||
**/.yarn/cache
|
||||
**/.yarn/*state*
|
||||
|
||||
# Generated dirs
|
||||
dist
|
||||
|
||||
# Nuxt
|
||||
.nuxt
|
||||
.output
|
||||
.vercel_build_output
|
||||
.build-*
|
||||
.env
|
||||
.netlify
|
||||
|
||||
# Env
|
||||
.env
|
||||
|
||||
# Testing
|
||||
reports
|
||||
coverage
|
||||
*.lcov
|
||||
.nyc_output
|
||||
|
||||
# VSCode
|
||||
.vscode
|
||||
|
||||
# Intellij idea
|
||||
*.iml
|
||||
.idea
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
.AppleDB
|
||||
.AppleDesktop
|
||||
Network Trash Folder
|
||||
Temporary Items
|
||||
.apdisk
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
# Nuxt Module
|
||||
|
||||
## Development
|
||||
|
||||
- Run `npm run dev:prepare` to generate type stubs.
|
||||
- Use `npm run dev` to start [playground](./playground) in development mode.
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
{
|
||||
"name": "@instadapp/vue-web3-nuxt",
|
||||
"version": "0.11.1",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/module.mjs",
|
||||
"require": "./dist/module.cjs"
|
||||
}
|
||||
},
|
||||
"main": "./dist/module.cjs",
|
||||
"types": "./dist/types.d.ts",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"prepack": "nuxt-module-build",
|
||||
"dev": "nuxi dev playground",
|
||||
"dev:build": "nuxi build playground",
|
||||
"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"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<template>
|
||||
<div class="relative p-10 n-bg-base">
|
||||
<div class="container w-full mx-auto flex flex-col gap-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-4xl">
|
||||
Web3 + Nuxt
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NCard class="p4">
|
||||
<pre>{{ {account, active, error} }}</pre>
|
||||
</NCard>
|
||||
|
||||
<NCard class="p4 flex gap-4">
|
||||
<NButton @click="connectMetamask">
|
||||
Connect using MetaMask
|
||||
</NButton>
|
||||
|
||||
<NButton @click="connectWalletConnect">
|
||||
Connect using WalletConnect
|
||||
</NButton>
|
||||
</NCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { active, account, activate, error } = useWeb3()
|
||||
|
||||
const connectMetamask = async () => {
|
||||
const { InjectedConnector } = await import('@web3-react/injected-connector')
|
||||
|
||||
await activate(
|
||||
new InjectedConnector({})
|
||||
)
|
||||
}
|
||||
|
||||
const connectWalletConnect = async () => {
|
||||
const { WalletConnectConnector } = await import('@web3-react/walletconnect-connector')
|
||||
|
||||
await activate(
|
||||
new WalletConnectConnector({})
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import MyModule from '..'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui', MyModule],
|
||||
|
||||
web3: {},
|
||||
})
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"private": true,
|
||||
"name": "my-module-playground",
|
||||
"dependencies": {
|
||||
"@web3-react/injected-connector": "^6.0.7",
|
||||
"@web3-react/walletconnect-connector": "^6.2.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/ui": "^0.3.3"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,26 +0,0 @@
|
|||
import { addImports, addVitePlugin, defineNuxtModule } from '@nuxt/kit'
|
||||
import { nodePolyfills } from 'vite-plugin-node-polyfills'
|
||||
|
||||
export interface ModuleOptions {
|
||||
autoImport: boolean
|
||||
}
|
||||
|
||||
export default defineNuxtModule<ModuleOptions>({
|
||||
meta: {
|
||||
name: 'vue-web3',
|
||||
configKey: 'web3',
|
||||
},
|
||||
defaults: {
|
||||
autoImport: true,
|
||||
},
|
||||
setup(options, nuxt) {
|
||||
addVitePlugin(nodePolyfills())
|
||||
|
||||
if (options.autoImport) {
|
||||
addImports({
|
||||
name: 'useWeb3',
|
||||
from: '@instadapp/vue-web3',
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"extends": "./playground/.nuxt/tsconfig.json"
|
||||
}
|
||||
7970
nuxt/yarn.lock
7970
nuxt/yarn.lock
File diff suppressed because it is too large
Load Diff
25
package.json
25
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@instadapp/vue-web3",
|
||||
"version": "0.11.1",
|
||||
"version": "0.7.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,24 +26,17 @@
|
|||
"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": {
|
||||
"prepublishOnly": "yarn install && yarn build && cd nuxt && yarn install && yarn dev:prepare && yarn prepack",
|
||||
"prepublishOnly": "npm i && npm run build",
|
||||
"build": "rollup -c rollup.config.js",
|
||||
"dev": "rollup -w -c rollup.config.js",
|
||||
"lint": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
|
||||
"lint:fix": "yarn run lint --write"
|
||||
},
|
||||
"files": [
|
||||
"nuxt/package.json",
|
||||
"nuxt/dist/**/*",
|
||||
"dist/**/*",
|
||||
"index.js",
|
||||
"index.cjs",
|
||||
|
|
@ -51,13 +48,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 +63,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",
|
||||
|
|
|
|||
33
src/index.ts
33
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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user