vu3th / vue-dapp Goto Github PK
View Code? Open in Web Editor NEWEmpower dapp developers with Vue integration for crypto wallets
Home Page: https://vue-dapp.vercel.app/
License: MIT License
Empower dapp developers with Vue integration for crypto wallets
Home Page: https://vue-dapp.vercel.app/
License: MIT License
I'm not sure this package works for Vue 2 composition API and how vue-demi
works.
Hi @chnejohnson, would you be able to tag the latest release please, so that I can use the deep link to MetaMask functionality.
Thanks!
I'm getting this weird error when I try to run an app with vue-dapp installed:
Uncaught ReferenceError: global is not defined at vue-dapp.js:71622
It's just a basic hello world project at this point.
main.js:
import { createApp } from 'vue';
import App from './App.vue';
import { VueDapp } from 'vue-dapp';
const app = createApp(App);
app.use(VueDapp);
app.mount('#app');
App.vue:
<template>
<vdapp-board />
<img alt="Vue logo" src="./assets/logo.png">
<p>Hello</p>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
And that's it.
I don't even need WalletConnect, I just want to run a simple app to try vue-dapp out.
Any idea how to solve this?
Vite is ES module only. There are many codes in Walletconnect that rely on node builtins or others.
checkout branch issue#3
Run yarn dev
for demo
I don't know where this file comes from.
@walletconnect/socket-transport/src/index.ts
Could not load content for http://localhost:3000/@fs/Users/***/Desktop/vue-dapp/node_modules/@walletconnect/socket-transport/src/index.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)
The problem is import @walletconnect/web3-provider. If remove this line, it works.
import WalletConnectProvider from '@walletconnect/web3-provider'
export function useWalletconnect() {
async function getProvider() {
// Create WalletConnect Provider
const provider = new WalletConnectProvider({
infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
})
// Enable session (triggers QR Code modal)
await provider.enable()
return provider
}
I'm getting this weird error when I try to run an app with vue-dapp installed:
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 1 error 23:49:45
error in ./node_modules/vue-dapp/dist/index.esm.js
Module parse failed: Unexpected token (630:66)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|
> const WalletConnectProviderDerived = window.WalletConnectProvider?.default || null;
| class Walletconnect {
| static async check() {
@ ./src/main.js 7:0-35 9:8-15
@ multi (webpack)-dev-server/client?http://192.168.1.205:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
It's just a basic hello world project at this point.
main.js:
import { createApp } from 'vue';
import App from './App.vue';
import { VueDapp } from 'vue-dapp';
const app = createApp(App);
app.use(VueDapp);
app.mount('#app');
App.vue:
<template>
<vdapp-board />
<img alt="Vue logo" src="./assets/logo.png">
<p>Hello</p>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
And that's it.
I don't even need WalletConnect, I just want to run a simple app to try vue-dapp out.
Any idea how to solve this?
resolve()
or `{ nodeResolve } in rollup.config.js plugin, the compiled file can't be used in the new project.If you connect your wallet and change networks inside Metamask works well.
But if you disconnect your wallet and after that switch networks on Metamask it will break.
https://github.com/chnejohnson/vue-dapp/blob/main/src/composables/useWallet.ts#L42
I create a new vite project and install [email protected].
In the project's node_modules, vue-dapp folder has a node_modules folder with ethersproject and ethers, why and how to prevent it?
Hi team,
I work on the DevRel team at Coinbase and am submitting this issue to inform you that the WalletLink SDK has been deprecated in favor of our new Coinbase Wallet SDK. You can find more on that and how to upgrade to the latest version here.
Please let me know if you have any questions!
Thanks,
Trevor
List some essential test cases to write one day
isActivated
should be reactive between connect and disconnectdisconnect from useWallet doesn't fire in my app. I reproduced this in the sample code just now.
To repro:
However, changing network does fire the change event.
Metamask is still connected after pressing disconnect. (which I figured it would be since the callback didn't fire)
Hey @chnejohnson
I see options to connect to blockchain are MetaMask, Coinbase, and Infura ID.
But what about connecting with a specific RPC URL?
Let's say I want users to see blockchain data from a smart contract no matter if they are connected with their wallet, or not. For example, for the Polygon blockchain I'd use https://polygon-rpc.com/
. This way I'd get data from Polygon even if a user is not connected with MetaMask yet.
Can I insert this RPC URL somewhere in vue-dapp? Or would I need to inject it into ethers.js?
On branch dev
, src/composables/useEthers.ts do not import any 'UncheckedJsonRpcSigner' but get the error below when I build .d.ts with rollup plugin dts()...
src/index.ts → dist/index.d.ts...
src/composables/useEthers.ts(10,17): error TS4058: Return type of exported function has or is using name 'UncheckedJsonRpcSigner' from external module "/Users/***/Desktop/vue-dapp/node_modules/@ethersproject/providers/lib/json-rpc-provider" but cannot be named.
It seems to the problem of '@ethersproject/providers'...
// src/composables/useEthers.ts
import {
Web3Provider,
Network,
ExternalProvider,
} from '@ethersproject/providers'
But the branch main
works fine...weird...
Thanks for the amazing work done! Works like a charm.
I'm new to it, and I'm looking for a way to extent the default list of chains.
That is because you already store the chains and all that information inside the plugin store.
Is there any way to extend the current list ? without I'm having to keep track of the current chain outside of the plugin?
I'm taking about this file:
https://github.com/chnejohnson/vue-dapp/blob/main/src/constants/chainId.ts
Also using the provided method displayChainName
would resolve correctly:
import { displayChainName } from 'vue-dapp';
Thanks!
run yarn dev:dist
rollup v2.40.0
bundles src/index.ts → dist/index.esm-bundler.js...
[!] (plugin commonjs) SyntaxError: Unexpected token (2:2) in /Users/***/Desktop/vue-dapp/src/components/Board.vue?vue&type=template&id=e1ee1034&lang.js
src/components/Board.vue?vue&type=template&id=e1ee1034&lang.js (2:2)
1:
2: <Modal
^
3: :modalOpen="boardOpen"
4: @close="closeBoard"
SyntaxError: Unexpected token (2:2) in /Users/***/Desktop/vue-dapp/src/components/Board.vue?vue&type=template&id=e1ee1034&lang.js
...
[2021-08-22 17:37:58] waiting for changes...
In some case, vue-dapp/src/components/Board.vue would come up with follow error because using @apply in <style>:
.wallet-item {
@apply flex justify-center sm:w-sm py-8 px-10 cursor-pointer hover:bg-gray-100 m-2 rounded-xl;
}
.item {
@apply flex flex-col justify-center space-y-4 items-center text-2xl;
}
Some resources:
I've noticed on my dapps using this package that on mobile devices the MetaMask option is greyed out as it is not available. This is the currently the expected behavior. However they can still use MetaMask via the WalletConnect option, but currently this is unclear to the end user.
What are your thoughts on the best way to handle this? I am thinking in the greyed out MetaMask option, update the text on mobile devices to say something like "Use WalletConnect on Mobile Device" something like the below
I'm happy to make a pull request for this, but wanted to see your thoughts on it first.
Hi @chnejohnson! I love this project ❤️ Us Vue devs also need a web3 library/starter kit like this (everything else is made for React).
That said, I'm wondering if you intend to apply for a Gitcoin grant in the upcoming round 12?
If you do, please let me know, I'll be happy to donate to it (and you'll also get matched by Gitcoin sponsors).
P.S.: The hackathon for the Gitcoin Grants Round 12 starts on 1 Dec, not sure if you need to apply in order to post a grant, but here's the link anyway: https://gitcoin.co/hackathon/gr12/
Because Vite is only for ES module, I used resolve.alias to solve the problem that Vite can't import the built-in node.js package from the third-party modules. Most of the effort is to resolve @walletconnect/web3-provider. There're lots of node.js built-in packages being used.
See these lines:
But in this scenario, when I build the demo files and run yarn serve:demo
, it failed to run the app and give me: require is not defined
.
This is hard to resolve. I don't know why yarn dev
works but it failed on production.
When Walletlink and Metamask are installed at the same time, connecting to metamask will trigger two pop-ups at the same time
export interface MetaMaskProvider extends providers.ExternalProvider {
isMetaMask: boolean
+ providers?: MetaMaskProvider[]
isConnected: () => boolean
request: (request: {
method: string
params?: any[] | undefined
}) => Promise<any>
on: (event: string, callback: (param: any) => void) => void
}
...
- const provider = (await detectEthereumProvider()) as MetaMaskProvider
+ const detectMetaMask = (await detectEthereumProvider()) as MetaMaskProvider
+ const provider = detectMetaMask?.providers?.find((e:MetaMaskProvider)=> e.isMetaMask) as MetaMaskProvider
Setup a component using useEthers
import { useEthers } from 'vue-dapp';
const { balance, chainId, signer, address } = useEthers();
Use {{ balance }}
in the template
After a transaction I expected that the balance would be updated but it doesn't happen.
Not sure if this is a bug or not expected behaviour.
Thanks
I installed vue with npm init vue@latest
and then did npm i ethers vue-dapp
but as soon as I add import { VueDapp } from "vue-dapp";
to my main.ts I get this error in the console:
[vite] connecting...
client.ts:53 [vite] connected.
_stream_readable.js:48 Uncaught ReferenceError: global is not defined
at node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:48:21)
at __require (chunk-7TBCKYSC.js?v=84f0b049:11:50)
at node_modules/readable-stream/readable-browser.js (readable-browser.js:1:28)
at __require (chunk-7TBCKYSC.js?v=84f0b049:11:50)
at node_modules/keccak/lib/api/keccak.js (keccak.js:1:23)
at __require (chunk-7TBCKYSC.js?v=84f0b049:11:50)
at node_modules/keccak/lib/api/index.js (index.js:1:22)
at __require (chunk-7TBCKYSC.js?v=84f0b049:11:50)
at node_modules/keccak/js.js (js.js:1:18)
at __require (chunk-7TBCKYSC.js?v=84f0b049:11:50)
I'm new to both vue and vue-dapp. Any idea how to fix?
In the useWallet.ts, if we don't add "any" type in try...catch(e: any)
, it will fail to build.
Reproduce: remove ": any" and run yarn build
yarn run v1.22.5
$ rm -rf dist/ && rollup -c
src/index.ts → dist/index.common.js, dist/index.esm.js...
(node:67130) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/***/Desktop/vue-dapp/node_modules/rollup-plugin-typescript2/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
[!] (plugin rpt2) Error: /Users/***/Desktop/vue-dapp/src/useWallet.ts(34,23): semantic error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'string | undefined'.
Type 'unknown' is not assignable to type 'string'.
src/useWallet.ts
Error: /Users/***/Desktop/vue-dapp/src/useWallet.ts(34,23): semantic error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'string | undefined'.
Type 'unknown' is not assignable to type 'string'.
at error (/Users/***/Desktop/vue-dapp/node_modules/rollup/dist/shared/rollup.js:151:30)
at throwPluginError (/Users/***/Desktop/vue-dapp/node_modules/rollup/dist/shared/rollup.js:19344:12)
at Object.error (/Users/***/Desktop/vue-dapp/node_modules/rollup/dist/shared/rollup.js:20013:20)
at Object.error (/Users/***/Desktop/vue-dapp/node_modules/rollup/dist/shared/rollup.js:19520:38)
at RollupContext.error (/Users/***/Desktop/vue-dapp/node_modules/rollup-plugin-typescript2/src/rollupcontext.ts:37:18)
at /Users/***/Desktop/vue-dapp/node_modules/rollup-plugin-typescript2/src/print-diagnostics.ts:41:11
at arrayEach (/Users/***/Desktop/vue-dapp/node_modules/rollup-plugin-typescript2/node_modules/lodash/lodash.js:516:11)
at Function._.each [as forEach] (/Users/***/Desktop/vue-dapp/node_modules/rollup-plugin-typescript2/node_modules/lodash/lodash.js:9368:14)
at printDiagnostics (/Users/***/Desktop/vue-dapp/node_modules/rollup-plugin-typescript2/src/print-diagnostics.ts:9:2)
at Object.transform (/Users/***/Desktop/vue-dapp/node_modules/rollup-plugin-typescript2/src/index.ts:244:5)
error Command failed with exit code 1.
If the type checking of building is right, why my vscode type checking does nothing to warn about this.
When the infura api key has set some domain into origins allowlist, and the site is not in the allowlist, it would have a problem while using WalletConnect like below:
And the error can't be caught like below:
// useEthers > function activate
async function activate(walletProvider: WalletProvider) {
const _provider = new Web3Provider(walletProvider as ExternalProvider)
const _signer = _provider.getSigner()
console.log('useEthers')
let _network: any
try {
_network = await _provider.getNetwork()
} catch (e) {
console.log('useEthers: problem')
}
const _address = await _signer.getAddress()
const _balance = await _signer.getBalance()
Neither this:
// useWallet > function connect
async function connect(
_walletName: WalletName,
infuraAPI?: string,
appName?: string,
) {
let _provider: WalletProvider | null = null
error.value = ''
...
try {
options.library === 'ethers' &&
(await activate(provider.value as WalletProvider))
} catch (err: any) {
console.log(`Failed to use ethers: ${err.message}`)
error.value = `Failed to use ethers: ${err.message}`
}
}
hey hey chnejohnson, you reached out some days ago on dgrants so i checked out your library. nice job.
checkout : https://schumanncombo.com/web3modal/
if you would like to enable custom dom-structures like my simple html example
or wana use my icons - you can find all the icons here. https://fusion.li
theres also a primitive vue library what i do not maintain as i lack in that skill :)
https://www.npmjs.com/package/@fusion-icons/vue
all the best, richard from berlin
``/Users/jevan/nuxt3-app/node_modules/@ethersproject/basex/lib.esm/index.js:40`
import { arrayify } from "@ethersproject/bytes";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap. (node:internal/modules/esm/translators:190:29)
at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
[vite dev] Error loading external "/Users/jevan/nuxt3-app/node_modules/@ethersproject/basex/lib.esm/index.js".
at file://./.nuxt/dist/server/server.mjs:12284:286
at async instantiateModule (file://./.nuxt/dist/server/server.mjs:21383:3)
m.default is not a function
at file://./.nuxt/dist/server/server.mjs:10:126
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async renderToString (file://./node_modules/vue-bundle-renderer/dist/index.mjs:247:19)
at async renderMiddleware (file://./.nuxt/nitro/index.mjs:191:20)
at async handle (file://./node_modules/h3/dist/index.mjs:601:19)
`
Hi!
Currently WalletConnect only works with Infura ID. The problem with Infura is that it does not support many chains, like for example Gnosis Chain (former xDai Chain).
So I was wondering if I can somehow use WalletConnect without Infura ID (with a custom RPC URL)?
In src/wallets/walletconnect.ts
there's the connect function which takes infuraID as an input:
static async connect(
infuraId: string,
options?: IWalletConnectProviderOptions,
) {
const provider = new WalletConnectProviderDerived!({
infuraId,
...options,
})
The ...options
part can include many things, among them also rpcUrl
. So how can I inject the RPC URL in this case?
Maybe in main.ts like this:
app.use(VueDapp, {
infuraId: '',
{
rpcUrl: 'https://rpc.gnosischain.com'
}
})
Also I'd need the RPC URL to change when the network is changed (for example from Gnosis to Polygon)...
Any advice on how to make this work? 🙂
❯ yarn build
yarn run v1.22.5
warning package.json: No license field
$ vue-tsc --noEmit && vite build
node_modules/@ethersproject/providers/lib/base-provider.d.ts:1:23 - error TS2688: Cannot find type definition file for 'node'.
1 /// <reference types="node" />
~~~~
node_modules/@ethersproject/providers/lib/base-provider.d.ts:51:14 - error TS2503: Cannot find namespace 'NodeJS'.
51 _poller: NodeJS.Timer;
~~~~~~
node_modules/@ethersproject/providers/lib/base-provider.d.ts:52:21 - error TS2503: Cannot find namespace 'NodeJS'.
52 _bootstrapPoll: NodeJS.Timer;
~~~~~~
node_modules/@ethersproject/providers/lib/json-rpc-batch-provider.d.ts:1:23 - error TS2688: Cannot find type definition file for 'node'.
1 /// <reference types="node" />
~~~~
node_modules/@ethersproject/providers/lib/json-rpc-batch-provider.d.ts:4:30 - error TS2503: Cannot find namespace 'NodeJS'.
4 _pendingBatchAggregator: NodeJS.Timer;
~~~~~~
node_modules/vue-dapp/dist/index.d.ts:34:1 - error TS1046: Top-level declarations in .d.ts files must start with either a 'declare' or 'export' modifier.
34 var Multicall2$1 = [
~~~
node_modules/vue-dapp/dist/index.d.ts:34:20 - error TS1039: Initializers are not allowed in ambient contexts.
34 var Multicall2$1 = [
~
35 {
~~
...
351 }
~~
352 ];
~
node_modules/vue-dapp/dist/index.d.ts:354:20 - error TS1039: Initializers are not allowed in ambient contexts.
354 var contractName = "ERC20";
~~~~~~~
node_modules/vue-dapp/dist/index.d.ts:355:11 - error TS1039: Initializers are not allowed in ambient contexts.
355 var abi = [
~
356 {
~~
...
579 }
~~
580 ];
~
node_modules/vue-dapp/dist/index.d.ts:581:16 - error TS1039: Initializers are not allowed in ambient contexts.
581 var bytecode = "0x608060405234801561001057600080fd5b506105dd806100206000396000f3fe608060405234801561001057600080fd5b50600436106100a5576000357c01000000000000000000000000000000000000000000000000000000009004806370a082311161007857806370a0823114610166578063a457c2d71461018c578063a9059cbb146101b8578063dd62ed3e146101e4576100a5565b8063095ea7b3146100aa57806318160ddd146100ea57806323b872dd14610104578063395093511461013a575b600080fd5b6100d6600480360360408110156100c057600080fd5b50600160a060020a038135169060200135610212565b604080519115158252519081900360200190f35b6100f2610290565b60408051918252519081900360200190f35b6100d66004803603606081101561011a57600080fd5b50600160a060020a03813581169160208101359091169060400135610296565b6100d66004803603604081101561015057600080fd5b50600160a060020a03813516906020013561035f565b6100f26004803603602081101561017c57600080fd5b5035600160a060020a031661040f565b6100d6600480360360408110156101a257600080fd5b50600160a060020a03813516906020013561042a565b6100d6600480360360408110156101ce57600080fd5b50600160a060020a038135169060200135610475565b6100f2600480360360408110156101fa57600080fd5b50600160a060020a038135811691602001351661048b565b6000600160a060020a038316151561022957600080fd5b336000818152600160209081526040808320600160a060020a03881680855290835292819020869055805186815290519293927f8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925929181900390910190a350600192915050565b60025490565b600160a060020a03831660009081526001602090815260408083203384529091528120546102ca908363ffffffff6104b616565b600160a060020a03851660009081526001602090815260408083203384529091529020556102f98484846104cb565b600160a060020a0384166000818152600160209081526040808320338085529083529281902054815190815290519293927f8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925929181900390910190a35060019392505050565b6000600160a060020a038316151561037657600080fd5b336000908152600160209081526040808320600160a060020a03871684529091529020546103aa908363ffffffff61059816565b336000818152600160209081526040808320600160a060020a0389168085529083529281902085905580519485525191937f8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925929081900390910190a350600192915050565b600160a060020a031660009081526020819052604090205490565b6000600160a060020a038316151561044157600080fd5b336000908152600160209081526040808320600160a060020a03871684529091529020546103aa908363ffffffff6104b616565b60006104823384846104cb565b50600192915050565b600160a060020a03918216600090815260016020908152604080832093909416825291909152205490565b6000828211156104c557600080fd5b50900390565b600160a060020a03821615156104e057600080fd5b600160a060020a038316600090815260208190526040902054610509908263ffffffff6104b616565b600160a060020a03808516600090815260208190526040808220939093559084168152205461053e908263ffffffff61059816565b600160a060020a038084166000818152602081815260409182902094909455805185815290519193928716927fddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef92918290030190a3505050565b6000828201838110156105aa57600080fd5b939250505056fea165627a7a72305820722c0187518ce2856a424bdba350d5a263c8f98fcb19cb4cc161372bc3b794c90029";
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/vue-dapp/dist/index.d.ts:582:24 - error TS1039: Initializers are not allowed in ambient contexts.
582 var deployedBytecode = "0x608060405234801561001057600080fd5b50600436106100a5576000357c01000000000000000000000000000000000000000000000000000000009004806370a082311161007857806370a0823114610166578063a457c2d71461018c578063a9059cbb146101b8578063dd62ed3e146101e4576100a5565b8063095ea7b3146100aa57806318160ddd146100ea57806323b872dd14610104578063395093511461013a575b600080fd5b6100d6600480360360408110156100c057600080fd5b50600160a060020a038135169060200135610212565b604080519115158252519081900360200190f35b6100f2610290565b60408051918252519081900360200190f35b6100d66004803603606081101561011a57600080fd5b50600160a060020a03813581169160208101359091169060400135610296565b6100d66004803603604081101561015057600080fd5b50600160a060020a03813516906020013561035f565b6100f26004803603602081101561017c57600080fd5b5035600160a060020a031661040f565b6100d6600480360360408110156101a257600080fd5b50600160a060020a03813516906020013561042a565b6100d6600480360360408110156101ce57600080fd5b50600160a060020a038135169060200135610475565b6100f2600480360360408110156101fa57600080fd5b50600160a060020a038135811691602001351661048b565b6000600160a060020a038316151561022957600080fd5b336000818152600160209081526040808320600160a060020a03881680855290835292819020869055805186815290519293927f8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925929181900390910190a350600192915050565b60025490565b600160a060020a03831660009081526001602090815260408083203384529091528120546102ca908363ffffffff6104b616565b600160a060020a03851660009081526001602090815260408083203384529091529020556102f98484846104cb565b600160a060020a0384166000818152600160209081526040808320338085529083529281902054815190815290519293927f8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925929181900390910190a35060019392505050565b6000600160a060020a038316151561037657600080fd5b336000908152600160209081526040808320600160a060020a03871684529091529020546103aa908363ffffffff61059816565b336000818152600160209081526040808320600160a060020a0389168085529083529281902085905580519485525191937f8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925929081900390910190a350600192915050565b600160a060020a031660009081526020819052604090205490565b6000600160a060020a038316151561044157600080fd5b336000908152600160209081526040808320600160a060020a03871684529091529020546103aa908363ffffffff6104b616565b60006104823384846104cb565b50600192915050565b600160a060020a03918216600090815260016020908152604080832093909416825291909152205490565b6000828211156104c557600080fd5b50900390565b600160a060020a03821615156104e057600080fd5b600160a060020a038316600090815260208190526040902054610509908263ffffffff6104b616565b600160a060020a03808516600090815260208190526040808220939093559084168152205461053e908263ffffffff61059816565b600160a060020a038084166000818152602081815260409182902094909455805185815290519193928716927fddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef92918290030190a3505050565b6000828201838110156105aa57600080fd5b939250505056fea165627a7a72305820722c0187518ce2856a424bdba350d5a263c8f98fcb19cb4cc161372bc3b794c90029";
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/vue-dapp/dist/index.d.ts:583:16 - error TS1039: Initializers are not allowed in ambient contexts.
583 var compiler = {
~
584 name: "solc",
~~~~~~~~~~~~~~
585 version: "0.5.4+commit.9549d8ff.Emscripten.clang"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
586 };
~
node_modules/vue-dapp/dist/index.d.ts:587:13 - error TS1039: Initializers are not allowed in ambient contexts.
587 var ERC20 = {
~
588 contractName: contractName,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
592 compiler: compiler
~~~~~~~~~~~~~~~~~~~
593 };
~
node_modules/vue-dapp/dist/index.d.ts:753:3 - error TS7010: 'constructor', which lacks return-type annotation, implicitly has an 'any' return type.
753 constructor(url: string)
~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/vue-dapp/dist/index.d.ts:1002:3 - error TS7008: Member 'initialize' implicitly has an 'any' type.
1002 initialize
~~~~~~~~~~
node_modules/vue-dapp/dist/index.d.ts:1003:3 - error TS7008: Member 'configWallet' implicitly has an 'any' type.
1003 configWallet
~~~~~~~~~~~~
node_modules/vue-dapp/dist/index.d.ts:1771:122 - error TS2526: A 'this' type is available only in a non-static member of a class or interface.
1771 <S extends any>(predicate: (value: any, index: number, array: readonly any[]) => value is S, thisArg?: any): this is readonly S[];
~~~~
Found 17 errors.
error Command failed with exit code 2.
Hello everybody! I am really want to use this cool plugin, but I have problems with starting. I have created a new Vue 3 default project, and did everything what was in "getting started". But my webpack doesnt want to compile, it shows me 13 errors and each about this:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
Was anyone interacted with that? I was googling about it, and the solution was to add target: 'node' in webpack.config.js. Now I can compile, but there are some errors in browser console instead.
This problem about migrating webpack 4 to 5? If you have some information or expirience tell me please.
Thanks.
Can you add a WalletConnect scan method?
After packaging with Vite, error is Uncaught ReferenceError: exports is not defined
ERROR Failed to compile with 1 error 上午9:46:03
error in ./node_modules/vue-dapp/dist/index.esm.js
Module parse failed: Unexpected token (630:66)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|
> const WalletConnectProviderDerived = window.WalletConnectProvider?.default || null;
| class Walletconnect {
| static async check() {
@ ./src/main.ts 7:0-35 9:8-15
@ multi (webpack)-dev-server/client?http://192.168.0.100:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
No issues found.
I like the board UI a lot and have been using it from the beginning. (useBoard) Now that our UI has grown in complexity we need to have full control over the UI.
For example, I'm in a dialog or two already and the useBoard call presents behind my dialogs.
Question: is there a way to call the same function that selecting "metamask" or "coinbase" would call on the board, thereby letting us programmatically specify the connector to use? (including just auto choosing a wallet for the user without giving them a choice)
Thanks for a great library!
Hey @chnejohnson - trying to use this in a Vue app. How do you call a contract method using this?
If you would like to reduce the number of wallets options or customize their order, you can provide an array of wallet names to filter or sort available wallets on the board.
['metamask', 'walletconnect', 'walletlink']
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.