英文:
Web3Modal connectors issue with typescript
问题
我的Dapp使用TypeScript和React的Web3Modal wagmi库，升级到最新版本的Web3Modal后，遇到了连接问题。以下是相关的代码、错误和使用的包：
import {
EthereumClient,
w3mConnectors,
w3mProvider,
} from '@web3modal/ethereum';
import { polygonMumbai } from 'wagmi/chains';
import './index.css';
import { WagmiConfig } from 'wagmi';
import { createConfig, configureChains } from 'wagmi';
const projectId = window._env_.REACT_APP_WAGMI_CLIENT_ID as string;
export const chains = [polygonMumbai];
const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
export const wagmiClient = createConfig({
autoConnect: true,
connectors: w3mConnectors({ chains, projectId }),
publicClient,
});
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement,
);
root.render(
<React.StrictMode>
<WagmiConfig config={wagmiClient}>
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
</WagmiConfig>
</React.StrictMode>,
);
以下是相关的包版本：
"dependencies": {
"@types/react": "^18.2.8",
"@types/react-dom": "^18.2.4",
"@web3modal/ethereum": "2.6.2",
"@web3modal/react": "2.6.2",
"react": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^5.1.3",
"viem": "1.2.5",
"wagmi": "1.3.3",
},
我遇到了以下与连接器相关的错误：
Failed to compile.
TS2322: Type '(WalletConnectConnector | InjectedConnector)[]' is not assignable to type '(() => Connector<any, any>[]) | Connector<any, any>[] | undefined'.
Type '(WalletConnectConnector | InjectedConnector)[]' is not assignable to type 'Connector<any, any>[]'.
Type 'WalletConnectConnector | InjectedConnector' is not assignable to type 'Connector<any, any>'.
Type 'WalletConnectConnector' is not assignable to type 'Connector<any, any>'.
Property 'storage' is protected but type 'Connector<Provider, Options>' is not a class derived from 'Connector<Provider, Options>'.
28 | export const wagmiClient = createConfig({
29 | autoConnect: true,
> 30 | connectors: w3mConnectors({ chains, projectId }),
| ^^^^^^^^^^
31 | publicClient,
32 | });
33 |
希望这些信息能帮助你解决连接问题。
英文:
My Dapp is on typescript using web3modal for react wagmi, and after upgrading my apps to latest web3modal, I'm getting connector issues. I'm attaching code, error and packages used accordingly.
import {
EthereumClient,
w3mConnectors,
w3mProvider,
} from '@web3modal/ethereum';
import { polygonMumbai } from 'wagmi/chains';
import './index.css';
import { WagmiConfig } from 'wagmi';
import { createConfig, configureChains } from 'wagmi';
const projectId = window._env_.REACT_APP_WAGMI_CLIENT_ID as string;
export const chains = [polygonMumbai];
const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
export const wagmiClient = createConfig({
autoConnect: true,
connectors: w3mConnectors({ chains, projectId }),
publicClient,
});
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement,
);
root.render(
<React.StrictMode>
<WagmiConfig config={wagmiClient}>
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
</WagmiConfig>
</React.StrictMode>,
);
Follwoing are the relevant package versions:
"dependencies": {
"@types/react": "^18.2.8",
"@types/react-dom": "^18.2.4",
"@web3modal/ethereum": "2.6.2",
"@web3modal/react": "2.6.2",
"react": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^5.1.3",
"viem": "1.2.5",
"wagmi": "1.3.3",
},
And I'm getting the following error with connectors:
Failed to compile.
TS2322: Type '(WalletConnectConnector | InjectedConnector)[]' is not assignable to type '(() => Connector<any, any>[]) | Connector<any, any>[] | undefined'.
Type '(WalletConnectConnector | InjectedConnector)[]' is not assignable to type 'Connector<any, any>[]'.
Type 'WalletConnectConnector | InjectedConnector' is not assignable to type 'Connector<any, any>'.
Type 'WalletConnectConnector' is not assignable to type 'Connector<any, any>'.
Property 'storage' is protected but type 'Connector<Provider, Options>' is not a class derived from 'Connector<Provider, Options>'.
28 | export const wagmiClient = createConfig({
29 | autoConnect: true,
> 30 | connectors: w3mConnectors({ chains, projectId }),
| ^^^^^^^^^^
31 | publicClient,
32 | });
33 |
答案1
得分: 1
以下是翻译好的部分：
我通过以下方式成功解决了这个问题：
- 确保 wagmi/viem 的依赖项与 web3modal 使用的依赖项相匹配（你的依赖项似乎没问题）
- 从
wagmi而不是wagmi/chains导入链
也许与此无关，但我还需要向 createConfig 添加一个 webSocketPublicClient 实例：
const { publicClient, webSocketPublicClient } = configureChains(chains, [
w3mProvider({ projectId }),
]);
export const wagmiConfig = createConfig({
autoConnect: true,
connectors: w3mConnectors({ projectId, chains }),
publicClient,
webSocketPublicClient, <---
});
对于其他遇到此升级问题的人，我还建议查看 wagmi 1.x 迁移指南：https://wagmi.sh/core/migration-guide#1xx-breaking-changes
英文:
I was able to fix this issue by doing the following:
- Making sure wagmi/viem dependencies correspond to those used by web3modal (yours seem okay)
- Importing chains from
wagmiand not fromwagmi/chains
Maybe unrelated, but I also needed to add a webSocketPublicClient instance to createConfig:
const { publicClient, webSocketPublicClient } = configureChains(chains, [
w3mProvider({ projectId }),
]);
export const wagmiConfig = createConfig({
autoConnect: true,
connectors: w3mConnectors({ projectId, chains }),
publicClient,
webSocketPublicClient, <---
});
For other people having issues doing this upgrade, I'd also suggest to take a look at the wagmi 1.x migration guide: https://wagmi.sh/core/migration-guide#1xx-breaking-changes
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论