javascript - 每当我点击连接元掩码按钮时，为什么它会连接 coinbase 钱包？

Question

实际上，我想在 Onclick 上连接钱包，每当我单击断开连接按钮时，它就会断开钱包连接。我访问过许多网络应用程序，例如moralis、thirdweb、coinbase，但无法完全理解。

These are the buttons to connect to wallets

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

这是代码:

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;

钱包.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 和 Coinbase 钱包都使用“注入(inject)”以太坊提供商，当您在同一浏览器中安装 Coinbase 和 MetaMask 时，您会看到错误。

future 版本的thirdweb SDK将修复此行为，但现在这就是您看到错误的原因。

我的建议是只使用其中一个钱包连接器，但在修复之前不要同时使用两者。