# React MetaMask Integration Example

React example for integrating ChainID 138 with MetaMask.

## Installation

```bash
cd examples/metamask-react
npm install
```

## Usage

```bash
npm run dev
```

## Components

### useChain138 Hook

Custom hook for managing ChainID 138 connection:

```typescript
import { useChain138 } from './useChain138';

function MyComponent() {
  const { isConnected, isLoading, connect } = useChain138();
  
  // Use the hook
}
```

### Chain138Button

Button component for connecting to ChainID 138:

```typescript
import { Chain138Button } from './Chain138Button';

function App() {
  return <Chain138Button />;
}
```

### AddTokenButton

Button component for adding tokens:

```typescript
import { AddTokenButton } from './AddTokenButton';

function App() {
  return (
    <AddTokenButton
      address="0xYourTokenAddress"
      symbol="WETH"
      decimals={18}
      image="https://explorer.d-bis.org/images/tokens/weth.png"
    />
  );
}
```

## Example Usage

```typescript
import React from 'react';
import { useChain138 } from './useChain138';
import { AddTokenButton } from './AddTokenButton';

function App() {
  const { isConnected, connect } = useChain138();

  return (
    <div>
      {!isConnected && (
        <button onClick={connect}>
          Connect to ChainID 138
        </button>
      )}
      {isConnected && (
        <AddTokenButton
          address="0xYourWETHAddress"
          symbol="WETH"
          decimals={18}
        />
      )}
    </div>
  );
}
```