Whenever i click on connect metamask button why it connects the coinbase wallet?

Question

Actually, I want to connect wallet on Onclick and whenever i do click on diconnect button it disconnects the wallet. I had visited many web apps like moralis , thirdweb , coinbase but can't understand fully.

These are the buttons to connect to wallets

Here you can see the coin base wallet is open while i click on connect metamask

Here is the code:

App.js

>  import { ChainId,ThirdwebProvider } from "@thirdweb-dev/react";
> function App() {   return (
>     <CanvasProvider>
>       <ChakraProvider theme={theme}>
>       <ThirdwebProvider desiredChainId={ChainId.Mainnet}>
>         <Editor />
>         </ThirdwebProvider>
>       </ChakraProvider>
>     </CanvasProvider>   ); }
> 
> export default App;

Wallet.js

import { useAddress, useDisconnect, useMetamask, useCoinbaseWallet, useWalletConnect } from "@thirdweb-dev/react";



const Wallet = () => {
    const connectWithMetamask = useMetamask();
    const connectWithCoinBase = useCoinbaseWallet()
    const connectWithWalletConnect = useWalletConnect();
    const address = useAddress();
    const disconnectWallet = useDisconnect()
    const { isOpen, onOpen, onClose } = useDisclosure()
    return (
        <>
            <Button
                onClick={onOpen}
                bgColor={'#1890ff'}
                color={'white'}
                _hover={{ bgColor: '', color: 'white' }}
            >
                Connect Wallet
            </Button>

            <Modal isOpen={isOpen} onClose={onClose} >
                <ModalOverlay />
                <ModalContent bgColor={'#001529'} textColor={'white'}>
                    <ModalHeader>Connect a Wallet</ModalHeader>
                    <ModalCloseButton />
                    <ModalBody>
                        <VStack align={'center'} justify={'center'}>
                            <Button onClick={() => connectWithMetamask()} w={'full'} bgColor={'#205375'} _hover={{ color: "#001529" }}>
                                <Stack direction={'row'} align={'center'}>
                                    <Text>Connect MetaMask</Text>
                                    <Img src={meta} boxSize={'6'} />
                                </Stack>
                            </Button>

                            <Button onClick={() => connectWithCoinBase()} w={'full'} bgColor={'#205375'} _hover={{ color: "#001529" }}>
                                <Stack direction={'row'} align={'center'}>
                                    <Text>Connect Coinbase</Text>
                                    <Img src={coinbase} boxSize={'6'} />

                                </Stack>

                            </Button>

                            <Button onClick={() => connectWithWalletConnect()} w={'full'} bgColor={'#205375'} _hover={{ color: "#001529" }}>
                                <Stack direction={'row'} align={'center'}>
                                    <Text> Connect WalletConnect</Text>
                                    <Img src={coinbase} boxSize={'6'} />
                                </Stack>
                            </Button>


                            <Button onClick={disconnectWallet} w={'full'} bgColor={'#205375'} _hover={{ color: "#001529" }}>
                                <Stack direction={'row'} align={'center'}>
                                    <Text> Disconnect Wallet</Text>

                                </Stack>

                            </Button>
                        </VStack>
                    </ModalBody>
                </ModalContent>
            </Modal>
        </>
    )
}

Answer 1

MetaMask and Coinbase wallet both use “injected” Ethereum providers, the error you're seeing happens when you have both Coinbase and MetaMask installed in the same browser.

A future version of the thirdweb SDK will fix this behaviour, but right now this is the reason you're seeing the error.

My recommendation would be to just use either wallet connector, but not both until it's fixed.