Trust Wallet not connected through useConnect() and useCreateWalletInstance()

[TahaKhanAbdalli]

I'm facing an issue where Trust Wallet doesn't connect when using the useConnect or useCreateWalletInstance methods. Strangely, it works perfectly fine when I attempt to connect through the ConnectWallet button. However, I can't use that button because I'm relying on the wallet dropdown, where I need to connect the selected wallet. While other wallets connect successfully, Trust Wallet's configuration doesn't provide any feedback or errors.

Using useConnect():

const connect = useConnect();
const config = trustWallet({
projectId: "57e1cfc18509bb9cc4d51638ce8d18ed",
recommended: true
})
await connect(config, {chainId: 1});

Using useCreateWalletInstance()

const config = trustWallet({
            projectId: "57e1cfc18509bb9cc4d51638ce8d18ed",
            recommended: true
          })
const createWalletInstance = useCreateWalletInstance();
const response = createWalletInstance(config);
await response.connect();

[joaquim-verges]

thanks for the report @TahaKhanAbdalli . adding @MananTank to take a look

[MananTank]

hey @TahaKhanAbdalli. I can confirm the issue. For now you can use walletConnect instead of trustWallet to connect the wallet as shown below:

import {
  ConnectWallet,
  useConnectionStatus,
  useCreateWalletInstance,
  useSetConnectedWallet,
  useSetConnectionStatus,
  walletConnect,
} from "@thirdweb-dev/react";

const config = walletConnect({
  projectId: "57e1cfc18509bb9cc4d51638ce8d18ed",
  recommended: true,
  qrModal: "walletConnect", // must specify this to open official Modal
});

export default function Example() {
  const createWalletInstance = useCreateWalletInstance();
  const setConnectedWallet = useSetConnectedWallet();
  const setConnectionStatus = useSetConnectionStatus();
  const conectionStatus = useConnectionStatus();

  async function handleConnect() {
    const wallet = createWalletInstance(config);

    setConnectionStatus("connecting");
    try {
      await wallet.connect();
      setConnectedWallet(wallet);
    } catch {
      setConnectionStatus("disconnected");
    }
  }

  return (
    <div>
      <button onClick={handleConnect}>connect</button>
      <p> {conectionStatus === "connecting" && "Connecting...."}</p>
    </div>
  );
}

or you can just use the useConnect hook:

export default function Example() {
  const connect = useConnect();
  const connectionStatus = useConnectionStatus();

  async function handleConnect() {
    await connect(config);
  }

  return (
    <div>
      <button onClick={handleConnect}>connect</button>
      <p> {connectionStatus === "connecting" && "Connecting...."}</p>
    </div>
  );
}

This issue is happening because trustWallet is also supposed to take the qrModal option similar to walletConnect - Since it's not specified - it's defaulting to "custom" which does not open the official walletConnect Modal.

Let me fix this issue and get back to you ASAP, meanwhile you can use the above code to connect to trust wallet

[TahaKhanAbdalli]

@MananTank I attempted the proposed solution, but it appears to have an impact on the functionality of WalletConnect. After connecting with WalletConnect first, trying to connect Trust Wallet using the same hook (walletConnect) doesn't open the QR modal as expected. Instead, it automatically connects with the WalletConnect wallet ID rather than the Trust Wallet ID.

If I try to disconnect previous wallet (walletConnect) and try to connect trust wallet, it throws an error below:

[TahaKhanAbdalli]

@MananTank Can you please fix it ASAP considering its a small fix? It's extremely critical for us.

[MananTank]

Hey @TahaKhanAbdalli - The error you mentioned is an issue in WalletConnect SDK, can you clear your storage and try again? Are you always seeing this error?

Can you also try connecting trust wallet in thirdweb Dashboard - Do you see the issue there as well?

I would also recommend using ConnectWallet component as it handles a lot of edge cases and provides a good UI for connecting wallets out of the box

[TahaKhanAbdalli]

Hi @MananTank, I'm using the mentioned component in another page, but in this particular scenario, I'm unable to use that component. As mentioned in the images above, I have multiple wallets, and a wallet connection request will be triggered based on the selected wallet. Additionally, I'm using internal wallet (own created wallet), which is why I cannot replace the wallets dropdown with the ConnectWallet component.

I've customized the integration for WalletConnect, MetaMask, and Coinbase without using ConnectWallet. But I'm unable to configuring only Trust Wallet for connection.

For the time being, I'll implement my own created wallet into the ConnectWallet component. However, I'll need a custom integration for Trust Wallet later on.

[TahaKhanAbdalli]

Hi @MananTank can we please resolve the issue with the Trust Wallet Modal not opening as everything else seems fine and working to me. I am just struggling with Trust Wallet.

[MananTank]

Hi @TahaKhanAbdalli - I've already attached the code in my comment to open the Wallet Connect Modal for connecting Trust wallet.

You can also see it working as expected here:
https://vite-typescript-starter-git-mnn-trust-connect-hook.thirdweb-preview.com/

( Code: thirdweb-example/vite-typescript-starter#39 )

Screen.Recording.2024-03-19.at.5.29.37.PM.mov

[TahaKhanAbdalli]

@MananTank I store the details of wallets that have been connected once in the database.
When attempting to link Trust Wallet with a WalletConnect modal, it alters the wallet address associated with the actual WalletConnect instance stored in the database. This occurs because the connected wallet shares identical configurations with WalletConnect. Consequently, when retrieving wallets from the database, all wallets are fetched, but the Trust Wallet address is displayed in the WalletConnect instance, which is inaccurate.

I require a distinct configuration for Trust Wallet, eliminating the necessity for WalletConnect configuration when dealing specifically with Trust Wallet.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.