如何将Trust Wallet与Wagmi的InjectedConnector连接？

Question

如何将 Wagmi 与 Trust Wallet 连接，以便用户可以将他们的 Trust Wallet 帐户与我的 dApp 连接？ Trust Wallet 连接器不包含在官方 Wagmi 连接器基础中，因此我尝试使用以下代码来实现：

App.jsx

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>
  );
}

ConnectWalletButton.jsx

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> : <></>}
    </>
  );
}

点击 “连接 Trust Wallet” 按钮时没有任何提示，只是停留在 '正在加载...' 永远。

---

请在 Codesandbox 上查看这个最小的可重现示例：https://codesandbox.io/s/strange-morning-lmml82?file=/src/ConnectAccount.js

请大家帮我出出主意！

集成 Trust Wallet 提供商和 Wagmi/Viem 的最佳方式是什么？

Answer 1

我发现 Wagmi 本身并不能很好地与 TrustWallet 配合使用。

所以我必须编写一些自定义连接器挂钩才能使其工作：

hooks/useConnectCustom.tsx

import React from "react";
import { useConnect } from "wagmi";
import { trustWalletConnector, metamaskConnector, walletConnectConnector } from "../wagmi";

type ConnectorName = 'metamask' | 'wc' | 'trust';

interface UseConnectProps {
  onConnect: () => void;
}

export const useConnectCustom = ({
  onConnect
}: UseConnectProps): {
    isLoading: boolean;
    connect: (connectorName: ConnectorName) => void;
    isTWConnecting: boolean;
} => {
    const {pendingConnector, connect : connectMetamask, isLoading: isMetamaskLoading} = useConnect({
        connector: metamaskConnector
      });
    
      const {connect : connectWalletConnect, isLoading: isWalletConnectLoading} = useConnect({
        connector: walletConnectConnector
      }); 
    
      const {connect : connectTrustWallet, isLoading: isTrustWalletLoading} = useConnect({
        connector: trustWalletConnector
      });

      const connect = (connectorName: ConnectorName) => {
        switch(connectorName) {
            case 'metamask': 
                connectMetamask();
            break;
            case 'wc':
                connectWalletConnect();
            break;
            case 'trust': 
                onConnect();
                connectTrustWallet()
            break;
        }
      }

      return {
        connect,
        isTWConnecting: pendingConnector === trustWalletConnector,
        isLoading: isMetamaskLoading || isWalletConnectLoading
    }
}

钩子/useAccountCustom.tsx

import React, { useEffect, useState } from "react";
import { Address, useAccount, useDisconnect } from "wagmi";
import { isAddress } from "viem";
import useLocalStorage from "use-local-storage";

export const useAccountCustom = (): {
    address: Address | undefined;
    isConnected: boolean;
    onConnect: () => void;
    disconnect: () => void;
    isConnecting: boolean;
} => {
    const { address: wagmiAddress } = useAccount();
    const { disconnect } = useDisconnect();

    const [isDisconnected, setIsDisconnected] = useLocalStorage<boolean>('is-tw-disconnected', false);

    const [trustWalletAddress, setTrustWalletAddress] = useState<Address | undefined>();

    useEffect(() => {
        setInterval(() => {
            window.trustwallet.request({method:'eth_accounts'}).then((res: string[]) => {
                isAddress(res[0]) && setTrustWalletAddress(res[0]);
            })
        }, 1000);
    }, []);

    return {
        isConnecting: false,
        address: wagmiAddress || (!isDisconnected ? trustWalletAddress : undefined),
        isConnected: !!(wagmiAddress || (!isDisconnected && trustWalletAddress)),
        onConnect: () => {
            setIsDisconnected(false);
        },
        disconnect: () => {
            disconnect();
            setIsDisconnected(true);
        }
    };
};

从上面的代码可以看出，当第一次请求已经完成时（通过 Wagmi 的调用），我正在重新获取 TrustWallet 的值。

useEffect(() => {
            setInterval(() => {
                window.trustwallet.request({method:'eth_accounts'}).then((res: string[]) => {
                    isAddress(res[0]) && setTrustWalletAddress(res[0]);
                })
            }, 1000);
        }, []);

此配置适用于我使 TrustWallet、Metamask 和 WalletConnect 都能与 Wagmi/Viem 配合使用，但我不确定

useContractWrite()

将如何与该配置配合使用。

由于

EIP-6963

，多个 InjectedConnectors 本身可能会出现问题。