1. EIP6963#
Problem Introduction#
When connecting to certain websites, we may click on "Metamask Login", but a login box for OKX Wallet or other wallets pops up instead. This is because the current website is using the old EIP-1193 to operate on the global window.ethereum object. In reality, different browser wallet plugins may have a loading order issue, where the last loaded wallet hijacks the window.ethereum object.
Solution:#
In May 2023, the EIP-6963 solution was introduced to address this issue. With EIP-6963, it is possible to obtain an independent EIP1193Provider for each wallet. This avoids mutual interference.
So how do we integrate it?
- Use WAGMI 2.x, which natively supports EIP-6963. I checked the wallet login on the xlog platform and it also uses wagmi, but when logging in to Metamask, it is still intercepted by OKX. After looking at the code, it seems to be using wagmi 1.x, which probably doesn't support EIP6963.
- Use the mipd library to obtain the corresponding wallet's EIP1193Provider. Then use ethers for integration.
After window.ethereum is hijacked, some wallets, like OKX Wallet, still provide users with an option to choose Metamask. However, most wallets simply replace it. For users, clicking on Metamask Login results in a different wallet popping up. This is a confusing user experience and can be considered a bug. It is recommended to upgrade.
Related Resources#
- https://metamask.io/news/developers/how-to-implement-eip-6963-support-in-your-web-3-dapp/
- https://github.com/MetaMask/vite-react-ts-eip-6963
2. Typescript Version#
Problem Introduction#
When opening a new project, it is common to encounter TypeScript errors even though the dependencies have been installed. There are generally two possible reasons for this: either TypeScript hasn't caught up yet and simply reloading the project can fix it, or the TypeScript version is incorrect and defaults to the version used by VSCode. Switching the version can resolve the issue. Is there a way to avoid this situation through configuration?
Solution#
- VSCode has a confusing configuration called "typescript.tsdk" which doesn't take effect on the first opening. However, it will take effect on subsequent loads.
- VSCode also has a configuration called "typescript.enablePromptUseWorkspaceTsdk" which can be set to true. This way, every time you open a project, there will be a prompt in the bottom right corner to switch to the workspace's TypeScript version. If you don't switch, it will pop up every time you open the project.
In reality, this doesn't fundamentally solve the problem. Since VSCode already has the functionality to trust the workspace, why can't it automatically load the TypeScript version of the project files? Looking forward to better solutions.