walletconnect / web3modal

A single Web3 provider solution for all Wallets

Note

Looking for v2? switch the branch.

📚 Documentation

🧪 Laboratory

🔗 Website

Web3Modal

Your on-ramp to web3 multichain. Web3Modal is a versatile library that makes it super easy to connect users with your Dapp and start interacting with the blockchain.

Dev setup

1. Create apps/laboratory/.env.local file using the template from apps/laboratory/.env.example

2. In each of the examples create .env.local file with following contents

VITE_PROJECT_ID="your_project_id"

3. Run npm run watch to build and watch for file changes in a separate tab
4. Run gallery, laboratory or examples in a separate tab i.e. npm run laboratory

Releasing new versions

Enter prelease mode [Optional]

If you need to release a canary/alpha/beta you need to enter prelease mode first

npm run changeset:pre <release tag>

For example: npm run changeset:pre a123bas2

Generate changeset

If you need to release a canary/alpha/beta you need to enter prelease mode first

npm run changeset

For example: npm run changeset:pre a123bas2

Steps

1. Run npm outdated and update dependencies
2. Run npm install and verify if everything still works correctly
3. Merge your feature branch into V4
4. Create a new branch from V4 and name it with the version tag
5. Run npm run changeset and set new custom version, enter prelease mode first if you want to add a tag to the version.
6. Update version in ConstantsUtil in @web3modal/scaffold-utils to the correct version
7. Create a new PR with Release Notes and merge into V4
8. Checkout V4 and run npm run publish:latest
9. Draft a new release in GitHub and create new tag
10. Click on Generate Change and only leave the link with difference. Paste in your changelog from PR.
11. Check Set as the last release and publish release.
12. Update Web3Modal for https://web3modal.com/ (https://github.com/WalletConnect/www-web3modal) and create a PR
13. Update Web3Modal for https://app.web3inbox.com (https://github.com/WalletConnect/web3inbox) and create a PR

Running tests

See <app/laboratory/tests/README.md>

web3modal's Issues

Introduce the iframe provider as an option

Add the @ethvault/iframe-provider to the list of options when embedded in an iframe

Custom Providers

Allow a developer to configure a custom provider without requiring a PR.

This way the developer can pass within the options a logo, title, description and connector callback for their custom provider which will be displayed as an option to the user

Web3Connect modal is not scrollable on mobile

On a mobile browser, the user can't scroll up or down to see the other providers.

As a user, I want to be able to choose between any number of web3 browser providers

Hey folks.

I just tested with two web3 provider extensions installed (Dapper & MetaMask) and it doesn't quite work. I'm wondering, is Web3Connect supposed to handle that case?

The two in question are Dapper and MetaMask. I've attached a gif to show the weirdness.

In the first bit, you can see if I have just one provider (MM), it works fine. I tested with just Dapper as well, also works fine.

In the second sequence though, you can see I have both MM and Dapper installed. Web3Connect picks up Dapper in the modal UI, but when I press "connect", it actually connects to my MM wallet 😅 0x59... is the MM address. Note that in this sequence, both wallets are "unlocked" and "approved", hence there is no popup from either Dapper or MM.

I think what's happening here is the classic race to injection / overwriting. As a user, I want to avoid that issue and not have to have only one extension enabled at a time, and be able to choose either Dapper or MM from the Web3Connect interface.

I'm not exactly sure if that's even possible given the current provider implementations, but I did speak to @crisgarner in Discord, and he mentioned he'd take a look.

Gif here:

Also, for reference, my other musings on all of this (posted in Discord, but now captured here):

In my mind, the ideal scenario consists a few things:

1. The provider spec changed a bit and became more standardized
2. Providers don't actually inject anything (i.e. no race, no overwrites, no hacky nonsense)
3. Dapps -- and thus Web3Connect -- also have a standard way of interfacing with providers / allowing users to choose which one they want to use / connect, disconnect, etc.

make IProviderInfo.check be a function rather than a string

It would be potentially possible to identify more types of providers if IProviderInfo.check were a function rather than a string. So like this:

type CheckProviderIdentity = (provider: any) => boolean;

export interface IProviderInfo {
  name: string;
  type: string;
  logo: string;
  check: CheckProviderIdentity;
  styled: {
    [prop: string]: any;
  };
}

Use it:

const providerInfo = {
    name: "WalletConnect",
    logo: WalletConnectLogo,
    type: "qrcode",
    check: (provider:any): boolean => !!provider["isWalletConnect"],
    styled: {
      noShadow: false
    }
  };

const isWalletConnect = providerInfo .check(aProvider);

It would be cool to be able use this pattern to identify a provider like Opera which doesn't lend itself to identification using the current Web3Connect check. But theoretically a check function could make this possible, though I must say, in the case of Opera I'm at pains to figure out how to do it using the provider itself, but one could check the browser like this:

const providerInfo = {
    name: "Opera",
    logo: someLogo,
    type: "injected",
    check: (_provider:any): boolean => (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0,
    styled: {
      noShadow: false
    }
  };

Web3Connect scan code prompt does not go away

Scanning the QR code seems to satisfy the TrustWallet wallet, but doesn't cause the Web3Connect scan code prompt to go away.

This is using toggleModal and the WalletConnect button.

I believe it happens when the TrustWallet already knows about the dApp (Alchemy) and has previously sync'd to it with my account.

cancelling WalletConnect popup never fulfills the promise

Cancelling out of the WalletConnect popup does not resolve nor reject the promise returned by Web3Connect.ConnectToWalletConnect({}). Instead what I see is in the console:

index.js:206 Uncaught (in promise) Error: User closed WalletConnect modal
at eval (index.js:206)
at HTMLDivElement.eval (index.js:88)

I have the call wrapped in a try/catch.

This is a pretty significant issue since the call doesn't seem to ever complete.

Reproducible builds

Is there a .js compilation for not requiring NodeJS?

@crisgarner @pedrouid

Using from unpkg

We do not want to include web3connect in our main bundle, so we are trying to use it with <script src="http://unpkg.......web3connect.js"> But it does not work for web3connect (although we managed it to work with web3.js already). Any working eample with that please? We get web3connect.Core is node defined. Or if we use new web3connect.default.Core() we got e() is undefined or other random errors that make no sense.

Reduce Web3Connect bundle size

Context

Currently the package is gigantic with a bundle size of 1.89 MB, even though this library has a lot of UI elements, I'm pretty sure that the way I setup my webpack config and even the assets that I've bundled could be improved dramatically.

Goal

The goal is to reduce the bundle size to at least 50% of the current bundle size. Ideally it would be around 600kb maximum but submissions that reduce the bundle size up to 900kb will also be accepted

Acceptance Criteria

• No breaking changes
• Bundle size smaller than 900 kb

unique "key" prop warning in Modal popup

When I bring up the modal popup I get this in the console:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Modal`. See https://fb.me/react-warning-keys for more information.
    in Provider (created by Modal)
    in Modal

The popup looks like this:

Trezor Integration

OnError causes Web3Connect to die if not explicitly provided

Background for reproduction: I'm using Web3Connect in a "beta" / "testing" online location that doesn't use SSL, and I'm using React and react-scripts to build the deployment code, so it took a bit of digging around to figure out what's happening here -- but Portis and WalletConnect both die when the OnError callback is called when there's no OnError function provided. (The reason they error out is that the crypto functions aren't provided in Chrome when using HTTP.)

Here's my code, using React:

<Web3Connect.Button className="web3connectBtn"
	providerOptions={{
		portis: {
			id: "PORTIS_ID",
			network: this.ethNetwork
		}
	}}
	onConnect={(provider: any) => {
		// stuff here ...
	}}
	onClose={() => {
		// stuff here
	}}
/>

The core of the bug is that OnError is being called during connection failures, but there's no callback, so the script is crashing.

The workaround is just to add a function parameter for OnError in the Web3Connect.Button component. As a stopgap, the OnError function should be provided in the README so that people include an OnError function when using the provided code.

Workaround:

<Web3Connect.Button className="web3connectBtn"
	providerOptions={{
		portis: {
			id: "PORTIS_ID",
			network: this.ethNetwork
		}
	}}
	onConnect={(provider: any) => {
		// stuff here ...
	}}
	onError={(error: any) => {
		// this has to exist
	}}
	onClose={() => {
		// stuff here
	}}
/>

I'm not sure how the Web3Connect maintainers want the default functionality to be when OnError is called without a callback, but IMO, a possible true fix would be to recognize when no callback is provided and to use a fallback.

Improve documentation

There are new providers. Documentation should reflect this.

Provide a way to configure not to show the WalletConnect provider button

There seems to be no way to configure not to show the WalletConnect provider button. Can we have this?

Come to think of it, I don't see a way to avoid seeing injected providers either.

Coinbase wallet showed as Cipher

Tried on our DApp and your example, button showed as Cipher wallet, but trick is after login it detects provider correctly if being passed through getProviderInfo().
Cipher wallet works as intended, showing it's logo in both ways.

Web3Connect Crashes on use of Status

When using Web3Connect with Status it raises an exception:

It seems like the crash is on line 14 of src/helpers/utils.ts as window.web3 is null:

 providers.forEach(provider => {
      result[provider.check] = window.ethereum
        ? window.ethereum[provider.check] ||
          (window.web3 && window.web3.currentProvider)
          ? window.web3.currentProvider[provider.check] // ! Error is here
          : false
        : window.web3 && window.web3.currentProvider
        ? window.web3.currentProvider[provider.check]
        : false;
      if (result[provider.check] === true) {
        fallbackProvider = false;
      }
    });

Additional Components or Layouts for the Provider Grid

As a developer I want to be able to include Web3Connect components in a variety of ways, the Provider Grid as its own component exported would enable an easier integration experience for the multiple providers configured throughout the core, and remove the requirement to connect through providers through the modal interface.

Connecting to Portis does not close the Web3Connect provider dialog

Connecting to Portis does not close the Web3Connect provider modal. Normally the Web3Connect modal disappears after selecting a provider.

Metamask integration

Button style props or className ?

Thanks for this project!

A nice option would be style props for the <Web3Connect.Button>, or ability to pass a className to it.

I can create my own button and use core, but that feels overkill when I just want to tweak the border-radius of the button. 😄

package is massive

1.92 MB

Opera is listed as a supported injection, but doesn't work

Opera is listed here as a supported injection, but doesn't work as there is no provider property named "isOpera".

utils functions are not documented

Utils functions are not documented, neither in the readme nor in the code. Would be nice if they were, particularly in the readme Otherwise one has to look through the source code to figure out what they do.

Related: #36

npm start fails

npm install worked:

⋊> ~/g/3/walletconnect.js on master ◦ npm install                       13:12:12

> [email protected] install /home/ligi/git/3rd/walletconnect.js/node_modules/deasync
> node ./build.js

`linux-x64-node-6` exists; testing
Binary is fine; exiting

> [email protected] postinstall /home/ligi/git/3rd/walletconnect.js/node_modules/parcel-bundler
> node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"

Love Parcel? You can now donate to our open collective:
 > https://opencollective.com/parcel/donate
[email protected] /home/ligi/git/3rd/walletconnect.js
└─┬ [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ ├── [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └─┬ [email protected] 
  │ │ │ │   └── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ └── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├─┬ [email protected] 
  │ │   │ │ └─┬ [email protected] 
  │ │   │ │   └── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ └── [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ └─┬ [email protected] 
  │   └─┬ [email protected] 
  │     ├─┬ [email protected] 
  │     │ ├── [email protected] 
  │     │ └── [email protected] 
  │     ├── [email protected] 
  │     └─┬ [email protected] 
  │       └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └─┬ [email protected] 
  │ │ │ │   ├── [email protected] 
  │ │ │ │   ├── [email protected] 
  │ │ │ │   ├── [email protected] 
  │ │ │ │   ├── [email protected] 
  │ │ │ │   ├── [email protected] 
  │ │ │ │   └── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ └─┬ [email protected] 
  │   ├── [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   ├─┬ [email protected] 
  │ │ │   │ ├── [email protected] 
  │ │ │   │ └── [email protected] 
  │ │ │   ├── [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └─┬ [email protected] 
  │ │ │ │   ├─┬ [email protected] 
  │ │ │ │   │ └── [email protected] 
  │ │ │ │   ├─┬ [email protected] 
  │ │ │ │   │ └── [email protected] 
  │ │ │ │   └── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├─┬ [email protected] 
  │ │ │ │ │ ├── [email protected] 
  │ │ │ │ │ └── [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├─┬ [email protected] 
  │ │ │ │ │ └─┬ [email protected] 
  │ │ │ │ │   └── [email protected] 
  │ │ │ │ ├─┬ [email protected] 
  │ │ │ │ │ └── [email protected] 
  │ │ │ │ ├─┬ [email protected] 
  │ │ │ │ │ └── [email protected] 
  │ │ │ │ ├─┬ [email protected] 
  │ │ │ │ │ └─┬ [email protected] 
  │ │ │ │ │   └── [email protected] 
  │ │ │ │ └─┬ [email protected] 
  │ │ │ │   └─┬ [email protected] 
  │ │ │ │     ├── [email protected] 
  │ │ │ │     └── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├─┬ [email protected] 
  │ │ │ │ │ └─┬ [email protected] 
  │ │ │ │ │   ├─┬ [email protected] 
  │ │ │ │ │   │ └── [email protected] 
  │ │ │ │ │   ├─┬ [email protected] 
  │ │ │ │ │   │ └── [email protected] 
  │ │ │ │ │   └── [email protected] 
  │ │ │ │ └─┬ [email protected] 
  │ │ │ │   ├─┬ [email protected] 
  │ │ │ │   │ └─┬ [email protected] 
  │ │ │ │   │   ├─┬ [email protected] 
  │ │ │ │   │   │ └── [email protected] 
  │ │ │ │   │   ├─┬ [email protected] 
  │ │ │ │   │   │ └── [email protected] 
  │ │ │ │   │   └── [email protected] 
  │ │ │ │   └─┬ [email protected] 
  │ │ │ │     ├── [email protected] 
  │ │ │ │     ├─┬ [email protected] 
  │ │ │ │     │ └─┬ [email protected] 
  │ │ │ │     │   ├── [email protected] 
  │ │ │ │     │   ├── [email protected] 
  │ │ │ │     │   └── [email protected] 
  │ │ │ │     └── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   ├─┬ [email protected] 
  │ │ │   │ └── [email protected] 
  │ │ │   ├─┬ [email protected] 
  │ │ │   │ └── [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └─┬ [email protected] 
  │ │ │     └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ └─┬ [email protected] 
  │   ├── [email protected] 
  │   ├── [email protected] 
  │   ├─┬ [email protected] 
  │   │ └─┬ [email protected] 
  │   │   └── [email protected] 
  │   └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ └── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ └─┬ [email protected] 
  │   ├── [email protected] 
  │   ├── [email protected] 
  │   ├── [email protected] 
  │   ├── [email protected] 
  │   ├─┬ [email protected] 
  │   │ └── [email protected] 
  │   ├── [email protected] 
  │   ├─┬ [email protected] 
  │   │ └── [email protected] 
  │   ├── [email protected] 
  │   └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  └─┬ [email protected] 
    ├── [email protected] 
    └── [email protected] 

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

but npm start fails

⋊> ~/g/3/walletconnect.js on master ◦ npm start                         13:14:10

> [email protected] start /home/ligi/git/3rd/walletconnect.js
> parcel src/html/index.html -p 4444 --open

(node:11701) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Cannot find module './SourceMapPackager'

Fortmatic shows no response to the user

Fortmatic needs an onLogin / onConnect function to display something to the users.

Web3Connect modal missing images

The Web3Connect modal is very much a work in progress but I need someone to debug why the images are not being imported to NPM or are not being packaged properly with Webpack.

Expected Behavior

Actual Behavior

Display loading animation while connecting

Each button should track the connector promise and add a shimmer animation on top.

WalletConnect web integration

Support Frame

@floating
https://frame.sh/

How to get the `torus` instance

When connecting with Torus, how to get the torus instance?
With Portis is portis instance is put on the provider, can the same be done with Torus?

Don't mess with parent window scrollbars

Currently when the modal popup appears, the dApps' scrollbars disappear. The space gained by hiding the scrollbar(s) causes all the dApp's content to shift around. This is messy UX.

Would be cleaner if the popup did not mess with parent window scrollbars.

UX issue when choosing WalletConnect without signing in mobile dapp browser

if you choose walletconnect as a provider, then scan in your mobile dapp browser, but do not sign and hit cancel instead, every time you select walletconnect as a provider, it is using (or expecting to use) the signature from the mobile dapp browser that it never got in the first place. so signing in to a dapp with wallet connect just waits forever. there should be some way (I think?) where the user can restart this process so that it can finish correctly.
I think right now you have to clear application cache to start this process over.
I understand this is an edge case, and 3box won't need this to be finished for us to release, just something to think about!

Modal style broken?

Hello,
I'm currently having a problem related to UI. You can see in the image below that it is broken. The component is totally empty (code is also below). Although I was able to fix it with a few CSS. I'm asking myself if I'm missing something or it is really broken.

The package is working well, I've tried to connect to metamask, and fortmatic, all cool, except the UI.

import Web3Connect from "web3connect";
import Web3 from "web3";
import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                <Web3Connect.Button
                    providerOptions={{
                        fortmatic: {
                            key: "my_key" // required
                        }
                    }}
                    onConnect={(provider) => {
                        const web3 = new Web3(provider); // add provider to web3
                        console.log('web3', web3);
                    }}
                    onClose={() => {
                        console.log("Web3Connect Modal Closed"); // modal has closed
                    }}
                />
            </div>
        );
    }
}

export default App;

Missing images on Mobile Dapp Browsers

Context

A previous issue (#12) was open to solve the issue with missing images that weren't bundled with Webpack. This was successful and you can know see on the live demo at web3connect.netlify.com that the images are present on the modal when you click the button.

However this issue still remains for a very specific use-case. It works on Mobile browsers but not a Mobile Dapp Browser. For example: open the same live demo on Trust Wallet's Dapp Browser (only tested on iOS) and you will see that the image is not loaded.

Goal

Find a solution that will display bundled images on Trust Wallet's Dapp Browser for both Android and iOS

BUG: Multiple Connect Buttons spawn different modals?

Hi! I'd like to share some unexpected behaviour we got while integrating web3connect to our dapp using Web3Connect.Button component. We were planning to have two buttons: one on welcome page and one in the header. But after testing we had a bug that sometimes after clicking the provider inside the modal, the onConnect would fire, but modal would be still shown. After looking at the DOM, we had roughly 10 divs with WEB3_CONNECT_MODAL_ID id. It looks like clicking a button opened two modals at the same time.
I think the reason for this that every Web3Connect.Button initializes its own core inside the constructor:
https://github.com/web3connect/web3connect/blob/master/src/components/ConnectButton.tsx#L10

We solved the bug by initializing the core outside the component and using our own button component:

// @flow
import * as React from 'react'
import Web3Connect from 'web3connect'
import Button from '~/components/layout/Button'
import Web3Integration from '~/logic/wallets/web3Integration'

const web3Connect = new Web3Connect.Core({
  providerOptions: {
    portis: {
      id: 'PORTIS_ID', // required
      network: 'mainnet', // optional
    },
    fortmatic: {
      key: 'FORTMATIC_KEY', // required
      network: 'mainnet', // optional
    },
  },
})

web3Connect.on('connect', (provider: any) => {
  if (provider) {
    Web3Integration.setWeb3(provider)
  }
})

const ConnectButton = () => (
  <Button
    color="primary"
    variant="contained"
    minWidth={140}
    onClick={() => {
      web3Connect.toggleModal()
    }}
  >
    Connect
  </Button>
)

export default ConnectButton

I don't know if this is the expected behaviour, but I think it should be fixed/mentioned in the docs

Access denied to local storage with Torus

I'm trying to use Torus but i receive the following error when i try to connect with it.

DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

Replace EventManager with EventEmitter

Instead of using the custom EventManager, extend Core and ProviderManager classes to use the NodeJS EventEmitter module

Ledger Integration

Modal is hidden when dApp window is scrolled

When the dApp window is scrolled down and I try to show the Web3Connect modal, the modal window is scrolled up and can be completely out of sight. Should be centered regardless of the scroll position.

Add web3-react support

Web3-React allows the integration of multiple providers, developers can configure the connectors they want to support. for example portis, fortmatic, trezor or ledger

provider and providerInfo are referenced the same way

In the code, provider as any and provider as IProviderInfo are both referenced as "provider". This is quite confusing when trying to understand the code.

Web3Connect.getProviderInfo(provider) with Authereum as provider returns `name` with value `MetaMask`

Hey guys :] - We're saving this name in localStorage as their default wallet, which we use on direct logins. The issue is, of course, that this now triggers a login using metamask instead of authereum the next time users try to login using their default wallet.

Unable to use Opera & imToken with WalletConnect

Walletconnect is working great via Tokenary & Metamask Mobile, but is not working on Opera Touch & imToken
On both OT & imT, the app is passing `wc:XXXXX.....' into the browser url bar after scanning.

Logging out using MetaMask UI freezes "Please log in!" button

Logging out using the MetaMask UI freezes Alchemy's "Please log in!" button.

onClose event should extend to provider widget

Currently, the onClose event handler provided for the web3connect modal works, however when selecting a provider and cancelling out, the web3connect modal disappears and the event is not called.

This should extend to the provider level, either catching any provider error and effectively closing the modal, or catching provider errors and handling them via another event handler, something like

onProviderError (e)

can't hide the fallback Web3 Wallet

When there is no injected provider, Web3Connect used the "fallback" provider which is called "Web3", type "injected", check "isWeb3".

What is the point of this? In what typical conditions will this fallback succeed? Seems like it should not be displayed unless it has a chance to succeed. For me, it is showing up and failing. It is not even needed because I have Portis and Fortmatic showing (but not WalletConnect, and no extensions are available).

So to get rid of this, I tried supplying disableInjectedProvider and when I do, when the Modal comes up the fallback is not hidden (even though it is "injected"), and there is a console log message, even though I am passing true:

Warning: Failed prop type: The prop `injectedProvider` is marked as required in `Modal`, but its value is `null`.
    in Modal
checkPropTypes.js:20

How can I cause this fallback to not be shown? Thanks.

No way to logout of Portis

Portis has a portis.logout() function. But what is given is typically the provider, such as portis.provider instead of the portis variable. Or a logout feature built in.

grant OAuth access to GitKraken to access your repo

Would it be possible for you to grant OAUTH access to GitKraken to access your GitHub repository? Thanks!

https://www.gitkraken.com/