A React component for signing messages with AO Protocol
npm install ao-message-signerbash
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`