如何将 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 的最佳方式是什么?
我发现 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
本身可能会出现问题。