How to detect and connect to metamask mobile app inside the webapp like on opensea?

Support
1

I implemented a shortcode that connects to metamask browser extension and shows the user account using web3 and reactjs , this code works well when using the desktop browser, but when I try it on mobile browser, metamask mobile version doesn’t open due to the non-existence of its extension in the mobile browser, How a web app like opensea opens metamask mobile app using the button on the mobile web browser?

export const connectWallet = async () => {
          if (window.ethereum) {
            try {
              const addressArray = await window.ethereum.request({
                method: "eth_requestAccounts",
              });
              const obj = {
                status: "👆🏽 Write a message in the text-field above.",
                address: addressArray[0],
              };
              return obj;
            } catch (err) {
              return {
                address: "",
                status: "... " + err.message,
              };
            }
          } else {
            return {
              address: "",
              status: (
                <span>
                  <p>
                    {" "}
                    {" "}
                    <a target="_blank" href={`https://metamask.io/download.html`}>
                      You must install Metamask, a virtual Ethereum wallet, in your
                      browser.
                    </a>
                  </p>
                </span>
              ),
            };
          }
        };
2

On mobile this doesn’t work, as you point out there is no MetaMask extension. Most apps seem to use Blocknative’s Onboard library for this, and I also found web3modal.