让DAPP实现钱包保持链接

钱包在有效期内自动连接，然后使用hooks函数获取对应的信息和之后跟智能合约交互做准备。钱包连接其实也可以直接用web3和meta mask提供的方法写，但是这样有一个问题是需要考虑很多场景和多钱包，这样导致代码量很大并且问题可能很多。于是我们应该寻找一些现成的方案来实现。

在react里面有一个很优秀的库叫web3-react

还有一个很酷的连接钱包的react连接UI的库叫web3modal，连接的过程不需要我们操作。这个两个库都已经在最大的交易网站上面使用了，不怕出问题。

而因为这些优秀的库，所以导致所有知名的区块链行业代码都是使用react

下面多代码预警，但是核心就一个，设置Providers,一个是web3-react需要的，一个是自定义管理web3连接的Providers。基于这个目的，我们需要编写一些hooks等代码。

下面直接附上代码。（解析uniswap出来的，可放心食用）

web3-react

配置常量
/constants/index

import { InjectedConnector } from '@web3-react/injected-connector'
import NetworkConnector from 'modules/web3/utils/netWork'

const MainChaid = 56
export const NetworkContextName = 'NETWORK'
export const connectorLocalStorageKey = 'connectorId'
export const injected = new InjectedConnector({
 supportedChainIds: [MainChaid],
})

export const RPC = {
 56: 'https://bsc-dataseed4.binance.org',
}

export const NETWORK_CHAIN_ID: number = parseInt(process.env.REACT_APP_CHAIN_ID ?? MainChaid.toString())
export const network = new NetworkConnector({
 urls: {
   [NETWORK_CHAIN_ID]: "https://bsc-dataseed1.defibit.io",
 },
})

全局基本注入钩子
/Providers.tsx

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName)
const Providers: React.FC = ({ children }) => {
return (<Web3ReactProvider getLibrary={getLibrary}>
     <Web3ProviderNetwork getLibrary={getLibrary}>
       {children}
     </Web3ProviderNetwork>
</Web3ReactProvider>)
}

再设置管理的Provider， 下次自动连接而不需要重新重新签名

Web3ReactManager.tsx

import React, { useState, useEffect } from 'react'
import { useWeb3React } from '@web3-react/core'
import { network, NetworkContextName } from '../../constants'
import { useEagerConnect, useInactiveListener } from 'modules/web3/hooks'

export default function Web3ReactManager ({ children }: { children: JSX.Element }) {
 const { active } = useWeb3React()
 const { active: networkActive, error: networkError, activate: activateNetwork } = useWeb3React(NetworkContextName)

 // try to eagerly connect to an injected provider, if it exists and has granted access already
 const triedEager = useEagerConnect()

 // after eagerly trying injected, if the network connect ever isn't active or in an error state, activate itd
 useEffect(() => {
   if (triedEager && !networkActive && !networkError && !active) {
     activateNetwork(network)
   }
 }, [triedEager, networkActive, networkError, activateNetwork, active])

 // when there's no account connected, react to logins (broadly speaking) on the injected provider, if it exists
 useInactiveListener(!triedEager)

 // handle delayed loader state
 const [showLoader, setShowLoader] = useState(false)
 useEffect(() => {
   const timeout = setTimeout(() => {
     setShowLoader(true)
   }, 600)

   return () => {
     clearTimeout(timeout)
   }
 }, [])

 // on page load, do nothing until we've tried to connect to the injected connector
 if (!triedEager) {
   return null
 }

 // if the account context isn't active, and there's an error on the network context, it's an irrecoverable error
 if (!active && networkError) {
   return (
     <div>unknownError</div>
   )
 }

 // if neither context is active, spin
 if (!active && !networkActive) {
   return showLoader ? (<div>Loader</div>) : null
 }

 return children
}

hooks.ts

import { useEffect, useState } from 'react'
import { useWeb3React as useWeb3ReactCore } from '@web3-react/core'
import { connectorLocalStorageKey, injected } from 'constants/index'
import { isMobile } from 'web3modal'

export function useEagerConnect () {
 const { activate, active } = useWeb3ReactCore() // specifically using useWeb3ReactCore because of what this hook does
 const [tried, setTried] = useState(false)

 useEffect(() => {
   injected.isAuthorized().then((isAuthorized) => {
     const hasSignedIn = window.localStorage.getItem(connectorLocalStorageKey)
     if (isAuthorized && hasSignedIn) {
       activate(injected, undefined, true).catch(() => {
         setTried(true)
       })
     } else if (isMobile() && window.ethereum && hasSignedIn) {
       activate(injected, undefined, true).catch(() => {
         setTried(true)
       })
     } else {
       setTried(true)
     }
   })
 }, [activate]) // intentionally only running on mount (make sure it's only mounted once :))

 // if the connection worked, wait until we get confirmation of that to flip the flag
 useEffect(() => {
   if (active) {
     setTried(true)
   }
 }, [active])

 return tried
}


/**
* Use for network and injected - logs user in
* and out after checking what network theyre on
*/
export function useInactiveListener (suppress = false) {
 const { active, error, activate } = useWeb3ReactCore() // specifically using useWeb3React because of what this hook does

 useEffect(() => {
   const { ethereum } = window

   if (ethereum && ethereum.on && !active && !error && !suppress) {
     const handleChainChanged = () => {
       // eat errors
       activate(injected, undefined, true).catch((e) => {
         console.error('Failed to activate after chain changed', e)
       })
     }

     const handleAccountsChanged = (accounts: string[]) => {
       if (accounts.length > 0) {
         // eat errors
         activate(injected, undefined, true).catch((e) => {
           console.error('Failed to activate after accounts changed', e)
         })
       }
     }

     ethereum.on('chainChanged', handleChainChanged)
     ethereum.on('accountsChanged', handleAccountsChanged)

     return () => {
       if (ethereum.removeListener) {
         ethereum.removeListener('chainChanged', handleChainChanged)
         ethereum.removeListener('accountsChanged', handleAccountsChanged)
       }
     }
   }
   return undefined
 }, [active, error, suppress, activate])
}

netWork.ts

import { ConnectorUpdate } from '@web3-react/types'
import { AbstractConnector } from '@web3-react/abstract-connector'
import invariant from 'tiny-invariant'

interface NetworkConnectorArguments {
 urls: { [chainId: number]: string }
 defaultChainId?: number
}

// taken from ethers.js, compatible interface with web3 provider
type AsyncSendable = {
 isMetaMask?: boolean
 host?: string
 path?: string
 sendAsync?: (request: any, callback: (error: any, response: any) => void) => void
 send?: (request: any, callback: (error: any, response: any) => void) => void
}

class RequestError extends Error {
 constructor(message: string, public code: number, public data?: unknown) {
   super(message)
 }
}

interface BatchItem {
 request: { jsonrpc: '2.0'; id: number; method: string; params: unknown }
 resolve: (result: any) => void
 reject: (error: Error) => void
}

class MiniRpcProvider implements AsyncSendable {
 public readonly isMetaMask: false = false

 public readonly chainId: number

 public readonly url: string

 public readonly host: string

 public readonly path: string

 public readonly batchWaitTimeMs: number

 private nextId = 1

 private batchTimeoutId: ReturnType<typeof setTimeout> | null = null

 private batch: BatchItem[] = []

 constructor(chainId: number, url: string, batchWaitTimeMs?: number) {
   this.chainId = chainId
   this.url = url
   const parsed = new URL(url)
   this.host = parsed.host
   this.path = parsed.pathname
   // how long to wait to batch calls
   this.batchWaitTimeMs = batchWaitTimeMs ?? 50
 }

 public readonly clearBatch = async () => {
   // console.info('Clearing batch', this.batch)
   const { batch } = this
   this.batch = []
   this.batchTimeoutId = null
   let response: Response
   try {
     response = await fetch(this.url, {
       method: 'POST',
       headers: { 'content-type': 'application/json', accept: 'application/json' },
       body: JSON.stringify(batch.map((item) => item.request)),
     })
   } catch (error) {
     batch.forEach(({ reject }) => reject(new Error('Failed to send batch call')))
     return
   }

   if (!response.ok) {
     batch.forEach(({ reject }) => reject(new RequestError(`${response.status}: ${response.statusText}`, -32000)))
     return
   }

   let json
   try {
     json = await response.json()
   } catch (error) {
     batch.forEach(({ reject }) => reject(new Error('Failed to parse JSON response')))
     return
   }
   const byKey = batch.reduce<{ [id: number]: BatchItem }>((memo, current) => {
     memo[current.request.id] = current
     return memo
   }, {})
   // eslint-disable-next-line no-restricted-syntax
   for (const result of json) {
     const {
       resolve,
       reject,
       request: { method },
     } = byKey[result.id]
     if (resolve) {
       if ('error' in result) {
         reject(new RequestError(result?.error?.message, result?.error?.code, result?.error?.data))
       } else if ('result' in result) {
         resolve(result.result)
       } else {
         reject(new RequestError(`Received unexpected JSON-RPC response to ${method} request.`, -32000, result))
       }
     }
   }
 }

 public readonly sendAsync = (
   request: { jsonrpc: '2.0'; id: number | string | null; method: string; params?: any },
   callback: (error: any, response: any) => void
 ): void => {
   this.request(request.method, request.params)
     .then((result) => callback(null, { jsonrpc: '2.0', id: request.id, result }))
     .catch((error) => callback(error, null))
 }

 public readonly request = async (
   method: string | { method: string; params: unknown[] },
   params?: any
 ): Promise<unknown> => {
   if (typeof method !== 'string') {
     return this.request(method.method, method.params)
   }
   if (method === 'eth_chainId') {
     return `0x${this.chainId.toString(16)}`
   }
   const promise = new Promise((resolve, reject) => {
     this.batch.push({
       request: {
         jsonrpc: '2.0',
         id: this.nextId++,
         method,
         params,
       },
       resolve,
       reject,
     })
   })
   this.batchTimeoutId = this.batchTimeoutId ?? setTimeout(this.clearBatch, this.batchWaitTimeMs)
   return promise
 }
}

export class NetworkConnector extends AbstractConnector {
 private readonly providers: { [chainId: number]: MiniRpcProvider }

 private currentChainId: number

 constructor({ urls, defaultChainId }: NetworkConnectorArguments) {
   invariant(defaultChainId || Object.keys(urls).length === 1, 'defaultChainId is a required argument with >1 url')
   super({ supportedChainIds: Object.keys(urls).map((k): number => Number(k)) })

   this.currentChainId = defaultChainId || Number(Object.keys(urls)[0])
   this.providers = Object.keys(urls).reduce<{ [chainId: number]: MiniRpcProvider }>((accumulator, chainId) => {
     accumulator[Number(chainId)] = new MiniRpcProvider(Number(chainId), urls[Number(chainId)])
     return accumulator
   }, {})
 }

 public get provider (): MiniRpcProvider {
   return this.providers[this.currentChainId]
 }

 public async activate (): Promise<ConnectorUpdate> {
   return { provider: this.providers[this.currentChainId], chainId: this.currentChainId, account: null }
 }

 public async getProvider (): Promise<MiniRpcProvider> {
   return this.providers[this.currentChainId]
 }

 public async getChainId (): Promise<number> {
   return this.currentChainId
 }

 public async getAccount (): Promise<null> {
   return null
 }

 public deactivate () {
   return null
 }
}

export default NetworkConnector

最后记得在连接钱包成功后设置

window.localStorage.setItem(connectorLocalStorageKey, walletConfig.connectorId);

use

const { account } = useWeb3React()

这样就可以了。 上面代码基本写玩后后面不需要改动，只需要配置constants的代码即可，之后我会考虑再研究下web3-react然后出一些更高级易用的组件发布。

--完成--