wagmi: bug: No prompt to connect with TrustWallet with custom InjectedProvider getProvider

Is there an existing issue for this?

• I have searched the existing issues

Package Version

1.4.2

Current Behavior

We need to have support for 3 wallets in our dApp: Metamask, Trust Wallet and WalletConnect SDK.

Metamask and WalletConnect both work perfectly, but Trust Wallet eventually stopped working for us, and we have no idea what caused that issue.

In our main codebase, the return data from useConnect({connector: trustWalletCustomConnector}) is stuck at ‘Loading…’

In the reproduction example on Codesandbox it just has no effect, no loading, nothing happens.

@jxom, could you please advice on the best way to integrate multiple Injected Connectors (Metamask and Trust Wallet).

As can be seen from the video (uploaded on YouTube because its size is too large for GitHub assets storage): https://youtu.be/VF3Rva-sj6g, window.trustwallet is injected in my browser, but no prompt window to it is initiated.

Could someone please help me figure that out? I really appreciate your help!

Maybe I’m specifying the InjectedConnector incorrectly? Please help me.

import { WagmiConfig, configureChains, createConfig } from "wagmi";
import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { InjectedConnector } from "wagmi/connectors/injected";
import { goerli } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import ConnectAccount from "./ConnectAccount";

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [goerli],
  [publicProvider()]
);

export const metamaskConnector = new MetaMaskConnector({
  chains,
  options: {
    UNSTABLE_shimOnConnectSelectAccount: true,
    shimDisconnect: true
  }
});

export const walletConnectConnector = new WalletConnectConnector({
  chains,
  options: {
    projectId: "2a42e5f44eaac002e60ba61a895028f6",
    metadata: {
      name: "Seedify",
      description: "Seedworld is a UGC based Gaming Metaverse.",
      url: document.URL,
      icons: ["https://seedworld.io/favicon.ico"]
    }
  }
});

export const trustWalletConnector = new InjectedConnector({
  chains,
  options: {
    name: "trustwallet",
    shimDisconnect: true,
    getProvider: () =>
      typeof window !== "undefined" ? window.trustwallet : undefined
  }
});
/*new TrustWalletConnector({
  chains,
});*/

const config = createConfig({
  publicClient,
  webSocketPublicClient,
  connectors: [trustWalletConnector, metamaskConnector]
});

export default function App() {
  return (
    <WagmiConfig config={config}>
      <div className="App">
        <ConnectAccount />
      </div>
    </WagmiConfig>
  );
}

import { useAccount, useConnect } from "wagmi";
import { metamaskConnector, trustWalletConnector } from "./App";

export default function ConnectAccount() {
  const { isLoading, address, isConnected } = useAccount();
  const { connect } = useConnect();

  return (
    <>
      <button
        onClick={() => {
          connect({
            connector: trustWalletConnector
          });
        }}
      >
        {isLoading ? "Is loading..." : "Connect your Trust Wallet"}
      </button>

      <button
        onClick={() => {
          connect({
            connector: metamaskConnector
          });
        }}
      >
        {isLoading ? "Is loading..." : "Connect your Metamask Wallet"}
      </button>
      {isConnected ? <span>{address}</span> : <></>}
    </>
  );
}

Expected Behavior

It should prompt Trust Wallet to connect to the dApp.

Steps To Reproduce

1. Visit https://codesandbox.io/s/strange-morning-lmml82?file=/src/ConnectAccount.js
2. Click on “Connect with Trust Wallet” button

Link to Minimal Reproducible Example (StackBlitz, CodeSandbox, GitHub repo etc.)

https://codesandbox.io/s/strange-morning-lmml82?file=/src/App.js

Anything else?

🙏🙏🙏