An "official" example of using useDapp with "Web3Modal" in the useDapp docs would increase adoption a lot

[JayWelsh]

I think having this would enable a lot more adoption of useDapp

[chrishol]

+1 this would be extremely helpful!

[JayWelsh]

cc: @nezouse @quagliero @marekkirejczyk

Seems to be some interest here, just letting you know. 🌈 🙏

[tt-marek]

It is in the backlog, no specific target date thou

[JayWelsh]

Thanks a lot @tt-marek !

[alexiskattan]

I am trying to make this work but am having issues with it. Here is the minimal code. It works for MetaMask but not for WalletConnect or Formatic.

export default function ConnectButton({ handleOpenModal }: Props) {
  // const { activateBrowserWallet, account } = useEthers();
  // const { activate } = useEthers()
  const {activateBrowserWallet, account, chainId, active, activate, deactivate} = useEthers()

  async function handleConnectWallet() {
    const provider = await web3Modal.connect();
    const ethersProvider = new ethers.providers.Web3Provider(provider);
    const ethersSigner = ethersProvider.getSigner();
    activate(provider)
  }
}

I think the issue is with the activate(provider) part. I'm not sure how to tell useDapp that I want to use a specific ethersProvider and ethersSigner. If anyone has any place to take it from here or could correct my mis-understanding it would be helpful.

[kesar]

+1

[ItsShadowl]

I am trying to make this work but am having issues with it. Here is the minimal code. It works for MetaMask but not for WalletConnect or Formatic.

export default function ConnectButton({ handleOpenModal }: Props) {
  // const { activateBrowserWallet, account } = useEthers();
  // const { activate } = useEthers()
  const {activateBrowserWallet, account, chainId, active, activate, deactivate} = useEthers()

  async function handleConnectWallet() {
    const provider = await web3Modal.connect();
    const ethersProvider = new ethers.providers.Web3Provider(provider);
    const ethersSigner = ethersProvider.getSigner();
    activate(provider)
  }
}

I think the issue is with the activate(provider) part. I'm not sure how to tell useDapp that I want to use a specific ethersProvider and ethersSigner. If anyone has any place to take it from here or could correct my mis-understanding it would be helpful.

You shouldn't be connecting Web3Provider to activate function, you should get the name of the wallet from web3Modal and get a connector for it, i don't know much about web3Modal, but this is the idea :

// import { TorusConnector } from '@web3-react/torus-connector'
// import { FortmaticConnector } from '@web3-react/fortmatic-connector'

          if (wallet.type === 'injected') {
            const injected = new InjectedConnector({
              supportedChainIds: [
                ChainId.Mainnet,
                ChainId.Kovan,
                ChainId.Localhost
              ]
            })
            activate(injected)
          } else if (wallet.type === 'hardware') {
            if (wallet.name === 'walletConnect') {
                const walletconnect = new WalletConnectConnector({
                   rpc: { 1: RPC_URLS[1] },
                   qrcode: true,
                   pollingInterval: POLLING_INTERVAL
                 })
             activate(walletconnect)
            }
          }
        }

I pray and hope you get the idea, but that works for me in various other cases, you still have to persist the connection onLoad somehow.

If you can't get it to work, i can check out web3Modal and post a full example here in Typescript

[yukydev]

I am trying to make this work but am having issues with it. Here is the minimal code. It works for MetaMask but not for WalletConnect or Formatic.

export default function ConnectButton({ handleOpenModal }: Props) {
  // const { activateBrowserWallet, account } = useEthers();
  // const { activate } = useEthers()
  const {activateBrowserWallet, account, chainId, active, activate, deactivate} = useEthers()

  async function handleConnectWallet() {
    const provider = await web3Modal.connect();
    const ethersProvider = new ethers.providers.Web3Provider(provider);
    const ethersSigner = ethersProvider.getSigner();
    activate(provider)
  }
}

I think the issue is with the activate(provider) part. I'm not sure how to tell useDapp that I want to use a specific ethersProvider and ethersSigner. If anyone has any place to take it from here or could correct my mis-understanding it would be helpful.

You shouldn't be connecting Web3Provider to activate function, you should get the name of the wallet from web3Modal and get a connector for it, i don't know much about web3Modal, but this is the idea :

// import { TorusConnector } from '@web3-react/torus-connector'
// import { FortmaticConnector } from '@web3-react/fortmatic-connector'

          if (wallet.type === 'injected') {
            const injected = new InjectedConnector({
              supportedChainIds: [
                ChainId.Mainnet,
                ChainId.Kovan,
                ChainId.Localhost
              ]
            })
            activate(injected)
          } else if (wallet.type === 'hardware') {
            if (wallet.name === 'walletConnect') {
                const walletconnect = new WalletConnectConnector({
                   rpc: { 1: RPC_URLS[1] },
                   qrcode: true,
                   pollingInterval: POLLING_INTERVAL
                 })
             activate(walletconnect)
            }
          }
        }

I pray and hope you get the idea, but that works for me in various other cases, you still have to persist the connection onLoad somehow.

If you can't get it to work, i can check out web3Modal and post a full example here in Typescript

Hey would be interested in having the full example :) Thanks in advance for your help

[ItsShadowl]

Checked web3Modal, it prefers Providers instead which is somehow difficult to implement directly with this current useDapp version...

FYI, just yesterday i noticed a merge that might change the problem, especially in regards to setting provider and connector aside using activate function in #479 PR, check the files and you can see the example to work with web3Modal is there, i think that PR is unfinished

[marekkirejczyk]

Hi All,

We recognise this as important feature.

We are working now on a series of cross-dependent features and refactorings, including:

• remove web3react dependency 🚮 Remove web3-react dependency from core #491
• add example for Web3Dialog (draft in 🥶 Bump web3-react to 8.0.0-beta, add Web3Modal to example (#479) #489)
• enable multichain support

There might be major changes to framework and it might take a bit more time. Thank you for your patience.

[yukydev]

Hi Thanks for the answers @noobshow @marekkirejczyk

For now I created my own model with web3-react for multi wallet connexion

Thanks for your help

[tt-marek]

There is a new version released: 0.10 with working example with web3Modal.

App here:
https://example.usedapp.io/balance

Source here:
https://github.com/EthWorks/useDApp/blob/master/packages/example/src/components/account/Web3ModalButton.tsx

[tt-marek]

Take a look at Connector example that uses web3react connectors to connect to various different wallets:
https://example.usedapp.io/web3react

[tt-marek]

@vanruch Would you investigate?

[ItsShadowl]

Do you install and import the Connector you were activating?
One of the connectors are InjectedConnector, you can check web3-react repo for more

#320 (comment)
Do you confirm you're using the latest web3-react or the version in use/supported by usedapp?

[JayWelsh]

Hi @tt-marek & @vanruch,

Firstly, thanks so much for making this change! I think this is going to help a lot with the adoption of useDapp!

I just wanted to raise that it seems that there might be one small thing worth looking into, consider the following situation (assume that this is using Web3ModalButton.tsx from the example implementation):

1. User clicks "connect"
2. User selects "WalletConnect" from the Web3Modal
3. User clicks the top-right "x" of the WalletConnect modal opened by Web3Modal

Closing the WalletConnect modal in this fashion leads to an unhandled error (in the example implementation you can see the error printed out into the console), it seems that this error needs to be handled within @useDapp/core itself, unless I am maybe missing a good place to handle it outside of the library.

Thanks again!

Peace.

[JayWelsh]

Another thing I would like to add is that when using the Web3ModalButton.tsx, even when connecting to MetaMask through it, when switching networks (e.g. Rinkeby <-> Mainnet), the client now shows an error (it handles network switches smoothly with the original "connect" button on https://example.usedapp.io/balance).

[vanruch]

Hi @JayWelsh!

Web3Modal UI errors should be handled, but I don't think @usedapp/core is a good place for it - at the moment it's decoupled from Web3Modal or any other wallet library. It simply accepts a generic EIP-1193 compatible provider that Web3Modal returns.

Error when switching networks looks like a bug, feel free to open an issue!

[marekkirejczyk]

@vanruch Perhaps a better error handling in example?