Module: EthersAppContext
A context for your react app with useEthersContext that provides you access to IEthersContext. It gives you access to consistent interface to get the current provider EthersModalConnector. Additionally integration with web3Modal gives you an easy way to guide your user with their web3 journey.
See the EthersAppContext docs for detailed explanation and examples.
Interfaces
Classes
- EthersModalConnector
- UserClosedModalError
- CouldNotActivateError
- NoEthereumProviderFoundError
- NoStaticJsonRPCProviderFoundError
EthersAppContext
useEthersAppContext
▸ useEthersAppContext(contextKey?): IEthersContext
Summary
This Hook provides you with access to the current Ethers Provider Context. This provider would be the one selected by using EthersModalConnector and Web3Modal
✨ Features
Gives you access to consistent interface to get the current provider information EthersModalConnector
- ethers compatable provider TEthersProvider
- a callback to change the current account (signer)
- the current account, chainId and signer
- callbacks to open the web3Modal, logout or change theme
✏️ Notes
- currently providerKey isnt being used
Parameters
| Name | Type |
|---|---|
contextKey? | string |
Returns
Defined in
src/context/ethers-app/EthersAppContext.tsx:35
useEthersContext
▸ useEthersContext(contextKey?): IEthersContext
Summary
This Hook provides you with access to the current Ethers Provider Context. This provider would be the one selected by using EthersModalConnector and Web3Modal
✨ Features
Gives you access to consistent interface to get the current provider information EthersModalConnector
- ethers compatable provider TEthersProvider
- a callback to change the current account (signer)
- the current account, chainId and signer
- callbacks to open the web3Modal, logout or change theme
✏️ Notes
- currently providerKey isnt being used
Parameters
| Name | Type |
|---|---|
contextKey? | string |
Returns
Defined in
src/context/ethers-app/EthersAppContext.tsx:35
EthersAppContext
▸ EthersAppContext(props, context?): null | ReactElement<any, any>
Summary
Ethers App Context for your react app to be used with useEthersAppContext. This is a wrapper around Web3ReactProvider that provides additional functionality such as a BlockNumberContext and access to IEthersContext. See TEthersAppContextProps for more information on props for alternate context roots.
Parameters
| Name | Type | Description |
|---|---|---|
props | TEthersAppContextProps | TEthersAppContextProps |
context? | any | - |
Returns
null | ReactElement<any, any>
Defined in
node_modules/@types/react/index.d.ts:520
ConnectToStaticJsonRpcProvider
▸ ConnectToStaticJsonRpcProvider(_package, opts): Promise<undefined | StaticJsonRpcProvider>
Summary
A connector that can be used by apps to connect to a StaticJsonRpcProvider
- For example you can use this to connect to a localhost provider
✏️ Notes
See scaffold-eth-typescript for an example that uses it to connect to a localhost burner wallet.
Parameters
| Name | Type | Description |
|---|---|---|
_package | unknown | not used |
opts | IStaticJsonRpcProviderConnectorOptions |
Returns
Promise<undefined | StaticJsonRpcProvider>
Defined in
src/context/ethers-app/connectors/StaticJsonRpcProviderConnector.ts:33
useBlockNumberContext
▸ useBlockNumberContext(chainId?, override?): number
Summary
A hook that gets you the current blocknumber and saves it to the store
- can be shared by your whole app.
❔Use
Make sure to wrap your main app with the EthersAppContext.
✏️ Notes
- this extensively used by eth-hooks to trigger hooks when a new block arrives
- uses the current provider ethersProvider from useEthersContext
Parameters
| Name | Type |
|---|---|
chainId? | number |
override? | TOverride |
Returns
number
current block number
Defined in
src/context/ethers-app/useBlockNumberContext.tsx:27
Misc
TEthersAppContextProps
Ƭ TEthersAppContextProps: Object
Summary
Props for context
✏️ Notes
- allow you specify alternate web3ReactRoot See docs. You must provide both an alternate key and its root.
- allows you to use your own QueryClientProvider
Type declaration
| Name | Type | Description |
|---|---|---|
children? | React.ReactNode | - |
secondaryWeb3ReactRoot? | { contextKey: string ; web3ReactRoot: JSX.Element } | Props for context that allow you specify alternate web3ReactRoot See docs. You must provide both an alternate key and its root. |
secondaryWeb3ReactRoot.contextKey | string | - |
secondaryWeb3ReactRoot.web3ReactRoot | JSX.Element | - |
disableDefaultQueryClientRoot? | boolean | disables the local queryClientRoot and QueryClientProvider for react-query and allows you to use your own |
customGetEthersAppProviderLibrary? | TGetEthersAppProviderLibrary | if you want to pass in your own provider. Make sure it is compatable with ethers.js, see TGetEthersAppProviderLibrary for details |
Defined in
src/context/ethers-app/EthersAppContext.tsx:116
TGetEthersAppProviderLibrary
Ƭ TGetEthersAppProviderLibrary: (provider: TEthersProvider | ExternalProvider | JsonRpcFetchFunc | any, connector?: AbstractConnector) => TEthersProvider
Type declaration
▸ (provider, connector?): TEthersProvider
Parameters
| Name | Type |
|---|---|
provider | TEthersProvider | ExternalProvider | JsonRpcFetchFunc | any |
connector? | AbstractConnector |
Returns
Defined in
src/context/ethers-app/EthersAppContext.tsx:136
TEthersModalConnector
Ƭ TEthersModalConnector: ICommonModalConnector & AbstractConnector
Defined in
src/context/ethers-app/connectors/EthersModalConnector.ts:55
connectorErrorText
• Const connectorErrorText: Object
Type declaration
| Name | Type |
|---|---|
NoStaticJsonRPCProviderFoundError | "Could not find a static json-rpc provider. Is it running?" |
NoEthereumProviderFoundError | "No web3 provider found" |
CouldNotActivateError | "Could not activate the web3 provider" |
UserClosedModalError | "Did not log in, the user did not select a web3 provider" |
Defined in
src/context/ethers-app/connectors/connectorErrors.ts:1
defaultQueryClient
• Const defaultQueryClient: QueryClient