Connecting multiple wallets to Dapp

Question

What I want:

• A user to connect a wallet to my dapp (1 of 4 choices, say: Metamask, WalletConnect, Formatic and Portis).
• The flexibility to create a custom "wallet connect modal" (I've tried web3modal, which is great, and is ALMOST EXACTLY what I need, but lacks the customisation I need, design wise).

What I'm doing:

• I'm building a front-end with React.js and TypeScript to interact with smart contracts on the Ethereum blockchain.

Any tips for libraries to consider or any help about how I should be going about this would be greatly appreciated.

Answer 1

Web3Modal

A single Web3 / Ethereum provider solution for all Wallets

https://www.npmjs.com/package/web3modal

https://github.com/web3modal/web3modal

Answer 2

Your best bet may be to use Noah Zinsmeister's web3-react. It is fully customizable and will let you achieve all of your goals.

Another alternative is Blocknative's Onboard achieves what you want. Their interface is relatively customizable.

Integration is very similar to that of the options you have tried so far.

Answer 3

useDapp offers a multi-chain functionality:

See a demo at example.usedapp.io/multichain

Answer 4

You can use Wagmi. It has lots of react hooks that make it easy to work with. you can have your custom design for each wallet connection option and trigger the connect or disconnect programmatically. And this is the example that I think you want to implement. https://wagmi.sh/examples/connect-wallet

Answer 5

Check out dynamic.xyz as well. It can work with wagmi.sh as well as with ethers.js directly, and you can also control colors/themes directly: https://docs.dynamic.xyz/docs/css-variables