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:

npm i -g https://get_ao.arweave.net

2. AO Connect installed in your project:

npm install --save @permaweb/aoconnect

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

Installation

Install the package in your React project:

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:

cd src/handlers

2. Start AOS:

aos

3. Load the handler:

.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

// 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:

<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

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

Custom Class Names

<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