Wallet Connect on mobile

// Typescript

import { isMobile, isChrome, isSafari } from "react-device-detect"

  // constants
  const shouldShowWalletConnect = !(
    isMobile &&
    isChrome &&
    typeof window !== undefined &&
    window?.ethereum?.isMetaMask
  )

  const shouldShowMetaMaskOption = !(
    isMobile &&
    (isChrome || isSafari) &&
    shouldShowWalletConnect
  )
  
    {shouldShowMetaMaskOption ? (
                <WalletButton                  
                  icon={<MetaMaskIcon height={8} width={8} />}
                  walletName="MetaMask"
                  onClick={activateMetamask}
                />
              ) : null}
              {shouldShowWalletConnect ? (
                <WalletButton
                  icon={<WalletConnectIcon height={8} width={8} />}
                  walletName="WalletConnect"
                  onClick={activateWalletConnect}
                />
              ) : null}