@kodex-react/ctx-ethers

The @kodex-react/ctx-ethers package provides a React context provider for the Ethers.js library, which allows you to interact with Ethereum smart contracts.

Installation

To install @kodex-react/ctx-ethers, use npm or yarn:

npm install @kodex-react/ctx-ethers 
# or
yarn add @kodex-react/ctx-ethers 

Usage

To use the EthersProvider in your app, wrap your application with it in your top-level component:

import { EthersProvider } from '@kodex-react/ctx-ethers'

const App: React.FC = ({ children }) => {
  return <EthersProvider>
    {children}
  </EthersProvider>
}

export default App

By wrapping your app with the EthersProvider, the context will be available to all child components of your app.

Accessing Ethers Context

Once you have wrapped your app with EthersProvider, you can access the context by importing the useEthers hook from @kodex-react/ctx-ethers:

import { useEthers } from '@kodex-react/ctx-ethers'

const MyComponent: React.FC = () => {
  const { provider } = useEthers()

  // use the ethers object to interact with Ethereum
  // ...
}

useEthers returns an object with an provider property, which is an instance of the ethers library. This object can be used to interact with Ethereum and smart contracts.

Example

Here's an example of how to use @kodex-react/ctx-ethers to interact with a smart contract:

import { useEthers } from '@kodex-react/ctx-ethers'
import { useState } from 'react'
import MyContract from './MyContract.json'

const MyComponent: React.FC = () => {
  const { provider } = useEthers();
  const [result, setResult] = useState<number | undefined>(undefined);

  const handleButtonClick = async () => {
    if (!ethers) return

    const contract = new ethers.Contract(
      '0x1234567890123456789012345678901234567890',
      MyContract.abi,
      provider.getSigner(),
    )

    const result = await contract.myFunction()
    setResult(result)
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Call MyContract</button>
      <div>Result: {result}</div>
    </div>
  )
}