以封装良好的方式使用类型化@web3-react/core、Web3ReactProvider、useWeb3React

Question

我正在研究@web3-Reaction/core的良好使用模式，特别是查看Uniswap的V3代码和其他地方.

这里的例子：

https://github.com/Uniswap/interface/blob/main/src/index.tsx#L53-L63

https://github.com/Uniswap/interface/blob/main/src/utils/getLibrary.ts

https://github.com/Uniswap/interface/search?q=useWeb3React

这是我能找到的@web3-Reaction/core的最干净的用法之一，而且绝对不会试图调用任何人的代码。:-)

然而，这里似乎有一种“代码味”，只是想知道其他人是如何解决这个问题的。

在上面链接的示例代码中，不通过键入来抽象使用醚提供程序。

理想情况下，我想要一个getLibrary.ts文件，它是代码库的一个点，它知道我是在使用web3.js还是ethers.js。这样，如果我想切换库，我只需要在一个地方更改代码。

但是，在我看到的每个示例中使用它的方式是，在导入和使用useWeb3React的任何地方，提供者库也大多是为正确的键入目的而导入的。例：

import { Web3Provider } from '@ethersproject/providers'
import { useWeb3React } from '@web3-react/core'

export function useActiveWeb3React() {
  const context = useWeb3React<Web3Provider>()
  ...
}

我不是TypeScript专家，但在getLibrary.ts代码中，除了导出操作类型ProviderType之外，似乎还可以导出一个类型化的getLibrary(): ProviderType，这样，底层web3 3/醚库的所有知识都可以保存在一个文件中，如果要更改，只需要更新一个文件(即getLibrary.ts)。

认为getLibrary.ts代码可能类似于：

import { Web3Provider } from '@ethersproject/providers'
import type { Web3Provider as ProviderType } from '@ethersproject/providers'

export function getLibrary(provider: any): ProviderType {
   ...
}

export type ProviderType;

然后，可以在需要输入的地方导入getLibrary和ProviderType，并且可以将有关底层提供者的详细信息很好地封装在一个TS文件中。

有人能写类似的代码吗？

我上面的代码示例不起作用，而且我还没有弄清楚如何让TS正确地完成这个任务。

谢谢!

Answer 1

这看起来很好，并且包含了关于如果我在一个文件中使用web3或ethers的所有内容，如果我要更改@web3-react library，就减少了更改多个文件的需要。我创建了一个getLibrary.ts文件，其内容如下：

import { Web3Provider } from '@ethersproject/providers';
import type { Web3Provider as ProviderType } from '@ethersproject/providers';

export function getLibrary(provider: any): ProviderType {
  const library = new Web3Provider(provider);
  library.pollingInterval = 12000;
  return library;
}

export type Provider = ProviderType;

与其在整个代码库中导入特定的import { Web3Provider } from '@ethersproject/providers'，不如根据需要从getLibrary.ts导入。

每当我想使用typesafe useWeb3React()调用时，我只需执行以下操作：

import { useWeb3React } from '@web3-react/core';

import { Provider } from '../ProviderLibrary';

function myFunctionalComponent() {
  const { chainId, library, etc... } = useWeb3React<Provider>();
  ...
}

我可以走了。这似乎是一种封装得很好的方法，但很想知道其他人的想法。