@kodex-react/ctx-ethers/README.md

Provides a React context provider for the Ethers.js library, which allows you to interact with Ethereum smart contracts.

# @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`:

```shell
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:

```tsx
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`:

```tsx
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:

```tsx
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>
  )
}
```