vu3th / vue-dapp Goto Github PK

View Code? Open in Web Editor NEW

194.0 9.0 49.0 3.86 MB

Empower dapp developers with Vue integration for crypto wallets

Home Page: https://vue-dapp.vercel.app/

License: MIT License

JavaScript 1.57% TypeScript 50.86% Vue 46.07% Shell 0.06% SCSS 1.17% HTML 0.27%

vue3 dapp typescript vite ethereum vuejs vue nuxt nuxt3

vue-dapp's People

Contributors

Stargazers

Watchers

vue-dapp's Issues

Test Vue 2 Composition API with `vue-demi`

I'm not sure this package works for Vue 2 composition API and how vue-demi works.

https://github.com/vueuse/vue-demi

This should be changed to an exact version number : 0.6.8

https://github.com/chnejohnson/vue-dapp/blob/9a948222a60622f8b339c50877ab41e10aabbcb1/yarn.lock#L3103

Tag latest release

Hi @chnejohnson, would you be able to tag the latest release please, so that I can use the deep link to MetaMask functionality.

Thanks!

metamask is not connected

If I install both metamask and coinbase, connect to metamask will prompt "metamask is not connected"

error:Uncaught ReferenceError: global is not defined at vue-dapp.js，just running a simple Hello World example

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?

Walletconnect is not suitable for integration by vite ES modules environment

Problem

Vite is ES module only. There are many codes in Walletconnect that rely on node builtins or others.

Reproduce

checkout branch issue#3

Run yarn dev for demo

index.ts:19

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)

Code

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
  }

Error when running a simple Hello World example (Module parse failed: Unexpected token (630:66))

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?

Rollup Config Problems

Does this project need to use @rollup/plugin-node-resolve in rollup.config.js?
But if I use resolve() or `{ nodeResolve } in rollup.config.js plugin, the compiled file can't be used in the new project.

Changing network on Metamask after you disconnect wallet generate errors

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

Add Gnosis Safe

sdk: https://docs.gnosis-safe.io/build/sdks/safe-apps/build

How to prevent ethers from installing in vue-dapp/node_modules?

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?

Outdated WalletLink Code --> Needs to be updated to Coinbase Wallet SDK

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

Write tests

List some essential test cases to write one day

QRcode shows up after clicking WalletConnect button
isActivated should be reactive between connect and disconnect

disconnect() doesn't fire in sample code

disconnect from useWallet doesn't fire in my app. I reproduced this in the sample code just now.

To repro:

Download latest
yarn && yarn dev
connect to metamask
press blue disconnect button observe no console.log that says 'disconnect'

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)

bug-repro.mov

Is it possible to inject custom RPC URL?

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?

Using yarn link for testing library but cannot display reactive data on the screen

Build .d.ts error: Return type of exported function has or is using name 'UncheckedJsonRpcSigner'

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...

Update Documentation for v0.5.0

Coinbase wallet support
Vite, Vue CLI, and Nuxt 3 support
Vite config instruction

Possible to extend the supported networks ? chainId.ts

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!

Error: walletconnect standalone

@walletconnect/client v1 and v2 have the same problem below...

How to build vue3 component library?

Problem

Rollup can't figure out vue SFC, and it's difficult to output it.
Using WindiCSS is also a problem, but it's acceptable to build it by pure css.

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:

Metamask on mobile devices

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.

Gitcoin grants

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/

Failed to serve on production: Uncaught ReferenceError: require is not defined

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.

Reference

I referred dgrants to resolve this problem: https://github.com/dcgtc/dgrants/blob/main/app/vite.config.ts
Similar problems with Vite:

Remove @metamask/detect-provider

rewrite with https://github.com/MetaMask/detect-provider/blob/main/src/index.ts

Repeating pop-ups when MetaMask & Walletlink inject both installed

When Walletlink and Metamask are installed at the same time, connecting to metamask will trigger two pop-ups at the same time

Fix reference

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

Add github action to check `yarn build` before PR merge

Using balance from the useEthers hook, doesn't update after Metamask transaction

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

wish i can have this work in vue 2 or something similar to this wonderful library of yours😔

Uncaught ReferenceError: global is not defined

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?

Type checking error while building but works fine on vscode and demo

In the useWallet.ts, if we don't add "any" type in try...catch(e: any), it will fail to build.

https://github.com/chnejohnson/vue-dapp/blob/0e35ef0ce0bfb213dbc08d4727691ceb35c2a838/src/useWallet.ts#L31

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.

Can't catch error when infura key is not working

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}`
    }
  }

Logo for vue-dapp

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

using vue-dapp with nuxt3 error

``/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)
`

Disconnect event never callback

Because clear() is called before the callback, the disconnect event will not be called back.

Custom RPC URL for WalletConnect

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? 🙂

Update MeteMask to MetaMask

Fail to process `vue-tsc --noEmit`

❯ 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.

Todos

Auto close board after clicking metamask or walletconnect

Doesn't work quick start

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.

Demand advice

Can you add a WalletConnect scan method?

Vite build error

After packaging with Vite, error is Uncaught ReferenceError: exports is not defined

repo is https://github.com/MetaplasiaTeam/castable-nft-web

Add more features

eth-hooks https://github.com/scaffold-eth/eth-hooks
wagmi https://github.com/tmm/wagmi
useDApp 1.0 Released!
vagmi https://github.com/wobsoriano/vagmi

Fail to compile with Vue CLI webpack environment

 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.

Is it possible to use my own "board" UI, or even none at all?

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!

When extended the new connector doesn't show up inside the modal

Here you list the connectors:

https://github.com/chnejohnson/vue-dapp/blob/main/src/components/Board.vue#L82

It's not printing the name/icon or anything from the new Connector.

['metamask', 'walletconnect', 'walletlink']

vu3th / vue-dapp Goto Github PK

vue-dapp's People

Contributors

Stargazers

Watchers

Forkers

vue-dapp's Issues

Problem

Reproduce

index.ts:19

Code

Problem

Reference

Fix reference

Recommend Projects

Recommend Topics

Recommend Org