Conflicting extensions Metamask and Trust Wallet with window.ethereum

I'm creating a service for myself that I want to be able to work with the browser extensions Metamask and Trust Wallet, and possibly others in the future. However, I'm having trouble finding information on how to call what I need when both extensions are installed.

For example, I want to have a button for Metamask and a button for Trust Wallet. Clicking each button would open the necessary connection window (but only one extension can be connected at a time).

I came across web3-react, but it doesn't work with newer versions of React. I'm working with Next.js and I don't have much experience with it yet.

I know that it's possible to implement this. It's done on https://daomaker.com/. Perhaps someone has experience with this.

If Metamask is disabled, then Trust Wallet should be called instead. I've tried using window.ethereum and window.web3, but they both seem to only open the Metamask extension for me.

First of all I am hoping you are using wagmi package for connecting and interacting with wallets. It makes interaction with wallets a lot easier.

Now coming to interacting with "metamask" and "trust wallet" separately in browser. Since they both are injected wallets so things get a bit tricky.

But we know one thing for sure that when we install any wallet extension then they gets attached to window object.

In case of "metamask", you can find it in "window.ethereum.isMetaMask" key and if its true then that means "metamask" is installed as an extension.

In case of "trustwallet", you can find it in "window.trustwallet" key and if its an object then that means "trustwallet" is installed as an extension.

Now using wagmi you can start using both of them.

For metamask you can use wagmi's official "Metamask Connector".
Link: https://wagmi.sh/react/connectors/metaMask

new MetaMaskConnector({
  options: { UNSTABLE_shimOnConnectSelectAccount: true, shimDisconnect: true },
});

For trust wallet you can use wagmi's official "Injected Connector" and return window.trustwallet as value in getProvider function in configuration.
Link: https://wagmi.sh/react/connectors/injected

new InjectedConnector({
  options: {
    shimDisconnect: true,
    name: 'Trust Wallet',
    getProvider: () =>
      typeof window !== 'undefined' ? (window as any).trustwallet : undefined,
  },
});

I hope this helps!