coinbase / onchainkit

React components and TypeScript utilities to help you build top-tier onchain apps.
https://onchainkit.xyz
MIT License
534 stars 123 forks source link

ConnectAccount does nothing in Safari, opens Phantom in Chrome, and nav's to Brave wallet in Brave 🤔 #723

Open richardrauser opened 3 months ago

richardrauser commented 3 months ago

Describe the bug and the steps to reproduce it

I use many different wallets in my desktop browsers and am finding the OnchainKit ConnectAccount button a little troublesome. Here is an outline of the behaviour:

Safari: tapping the ConnectAccount button does nothing. Obviously I don't have any wallets installed in desktop Safari, but doing nothing doesn't seem like a good way to handle this.

Chrome: I have MetaMask, Coinbase Wallet, and Phantom installed here, amongst other wallets. Tapping the ConnectAccount opens Phantom. No option to select MM or CBW instead is provided, which would be incredibly helpful.

Brave: I have just MetaMask installed here. Instead of connecting to MetaMask, I am routed to Brave's wallet page: brave://wallet/crypto/onboarding/welcome

The docs don't explain how I might modify the behaviour of ConnectAccount to address this.

At present this makes the ConnectAccount unusable for me. Would love to see these issues addressed.

What's the expected behaviour?

Users should be able to select the wallet they'd like to use.

What version of the libraries are you using?

kyhyco commented 3 months ago

Ah we haven't tested with multiple wallets loaded into the browsers. This is a great call out!

richardrauser commented 3 months ago

@kyhyco Ah gotcha, yes there do seem be some issues there. FYI Coinbase Wallet handles multi-wallet situations well, so you've got a reference point there.

As for my situation, I was hoping to use OnchainKit in my submission to Base Onchain Summer, with the submission deadline this Sunday. Is it possible to use other elements of OnchainKit that require a provider without ConnectAccount? I can't see from the docs how to do this.

kyhyco commented 3 months ago

Yes you can. We use wagmi under the hood. So you should be able to use any other wallet provider that uses wagmi. I think walletconnect or privy should work.

kyhyco commented 3 months ago

We are releasing a new Wallet component that will replace ConnectAccount. FYI, think it will have the same issue that you experienced here. We will take a look at this shortly.

kyhyco commented 3 months ago

Ok actually check your wagmi config. This is what we have on the doc site:

import { WagmiProvider, createConfig, http } from 'wagmi';
import { base } from 'wagmi/chains';
import { coinbaseWallet } from 'wagmi/connectors';

const wagmiConfig = createConfig({
  chains: [base],
  connectors: [
    coinbaseWallet({
      appName: 'onchainkit',
    }),
  ],
  ssr: true,
  transports: {
    [base.id]: http(),
  },
});

Haven't tested multi wallet browser plugin but this should pop up the smart wallet if user does not have any wallet browser extensions installed.

richardrauser commented 3 months ago

@kyhyco thanks for the tips! I've managed to get this all working with some finessing of wagmi config.. you can see an example of this on a project I'll be submitting to the Base Onchain Summer hackathon this week!

https://www.anglez.xyz/

Still needs a little work 😁