ao-message-signer/README.md

A React component for signing messages with AO Protocol

# AO Message Signer

A React component for signing messages with the AO Protocol on Arweave. This package includes both a React component for the frontend and a Lua handler for AO Protocol integration.

## Prerequisites

Before using this package, ensure you have:

1. AOS Client installed globally:
```bash
npm i -g https://get_ao.arweave.net
```

2. AO Connect installed in your project:
```bash
npm install --save @permaweb/aoconnect
```

3. An Arweave wallet (like ArConnect) installed in your browser

## Installation

Install the package in your React project:

```bash
npm install ao-message-signer
# or
yarn add ao-message-signer
```

## Setup

### 1. Lua Handler Setup

When you install this package, a Lua handler will be automatically copied to your project's `src/handlers` directory.

To deploy the handler:

1. Navigate to the handlers directory:
```bash
cd src/handlers
```

2. Start AOS:
```bash
aos
```

3. Load the handler:
```bash
.load sign-message.lua
```

4. After loading, you'll receive a Process ID. **Save this ID** - you'll need it for the React component.

### 2. React Component Usage

```jsx
// Basic usage
import { AOMessageSigner } from 'ao-message-signer';

function App() {
  return (
    <AOMessageSigner processId="your-process-id-here" />
  );
}

// With custom styling and dark theme
function StyledApp() {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">AO Message Signer</h1>
      <AOMessageSigner 
        processId="your-process-id-here"
        theme="dark"
        style={{
          maxWidth: '500px',
          margin: '0 auto'
        }}
      />
    </div>
  );
}
```

## Component Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| processId | string | Yes | - | The Process ID obtained from loading your Lua handler |
| className | string | No | "" | Additional CSS classes for styling |
| style | object | No | {} | Inline styles for the component |
| theme | 'light' \| 'dark' | No | 'light' | Color theme for the component |

## Themes

The component comes with two built-in themes:

### Light Theme (Default)
- Clean, minimal design
- White background
- Blue accent colors
- Subtle shadows and borders

### Dark Theme
- Dark background
- Light text
- Blue accent colors
- Optimized for dark mode

To use the dark theme:
```jsx
<AOMessageSigner 
  processId="your-process-id"
  theme="dark"
/>
```

## Features

- 🎨 Built-in light and dark themes
- 🔒 Secure message signing with AO Protocol
- 💅 Modern, responsive design
- ⚡ Loading animations and states
- 🚨 Error handling with visual feedback
- 🔄 Automatic Lua handler installation
- 📱 Mobile-friendly interface

## Styling Examples

### Custom Container Style
```jsx
<AOMessageSigner 
  processId="your-process-id"
  style={{
    maxWidth: '600px',
    margin: '20px auto',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
  }}
/>
```

### Custom Class Names
```jsx
<AOMessageSigner 
  processId="your-process-id"
  className="my-custom-class"
  theme="dark"
/>
```

## Troubleshooting

1. **Component not rendering?**
   - Check if Tailwind CSS is installed and configured
   - Verify that you have an Arweave wallet extension installed
   - Ensure you're using a valid Process ID

2. **Lua handler not loading?**
   - Make sure AOS is installed globally
   - Check if you're in the correct directory
   - Verify the handler file exists in `src/handlers`

3. **Styling issues?**
   - Ensure Tailwind CSS is properly configured
   - Check for CSS conflicts with your existing styles
   - Try using the built-in themes before custom styling

4. **Signing errors?**
   - Confirm your Arweave wallet is connected
   - Verify your Process ID is correct
   - Check browser console for detailed error messages

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT