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

$3

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.

$3

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

function App() {
return (

);
}

// With custom styling and dark theme
function StyledApp() {
return (

AO Message Signer

processId="your-process-id-here"
theme="dark"
style={{
maxWidth: '500px',
margin: '0 auto'
}}
/>

);
}
`

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:

$3

- Clean, minimal design
- White background
- Blue accent colors
- Subtle shadows and borders

$3

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

To use the dark theme:
`jsx
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

$3

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

$3

`jsx
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