react-abi

A modern React component library built with TypeScript for working with Ethereum ABIs.

Installation

# Install the library
npm install react-abi

# Install peer dependencies
npm install viem

Or using Yarn:

# Install the library
yarn add react-abi

# Install peer dependencies
yarn add viem

Usage

import { AbiInput } from 'react-abi';

function App() {
  return (
    <div>
      <AbiInput 
        abi="function transfer(address to, uint256 amount)" 
        onChange={(values, bytecode) => {
          console.log('Values:', values);
          console.log('Bytecode:', bytecode);
        }}
      />
    </div>
  );
}

Components

AbiInput

A component that renders form fields based on an Ethereum ABI specification, allowing users to input parameters for a smart contract function.

import { AbiInput } from 'react-abi';

<AbiInput 
  abi="function approve(address spender, uint256 value)" 
  onChange={(values, bytecode) => {
    console.log('Parameter values:', values);
    console.log('Generated bytecode:', bytecode);
  }}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | abi | string | 'function transfer(address to, uint256 amount)' | The ABI of the method as a string | | onChange | (values: Record<string, string>, bytecode: string) => void | - | Callback function called when any input value changes | | className | string | '' | Additional CSS class names |

Development

Setup

Clone the repository and install dependencies:

git clone https://github.com/yourusername/react-abi.git
cd react-abi

For installation, you can use either:

# Using Yarn (recommended)
yarn install

# OR using npm with legacy-peer-deps flag
npm install --legacy-peer-deps

Note: When using npm, the --legacy-peer-deps flag is necessary due to peer dependency relationships in the project.

Running Storybook

npm run storybook
# or
yarn storybook

Building

npm run build
# or
yarn build

Testing

npm run test
# or
yarn test

License

MIT