ArDacity Message Signer

A beautiful, interactive message signing component with Lua code editor for React applications.

Features

• 🔒 Sign messages with custom Lua handlers
• 📝 Embedded Lua code editor
• 🎨 Beautiful UI with smooth animations
• 🧩 Customizable appearance and behavior
• 📱 Responsive design for all devices

Installation

npm install @ar-dacity/ardacity-message-signer
# or
yarn add @ar-dacity/ardacity-message-signer

During installation, the package will automatically copy the necessary components to your project's /src/components/ArDacityUi/MessageSigner/ directory.

Usage

Basic Usage

import { MessageSignerForm } from './components/ArDacityUi/MessageSigner';

function App() {
  const handleSign = (result) => {
    console.log('Message:', result.message);
    console.log('Signature:', result.signature);
    console.log('Lua Code:', result.luaCode);
  };

  return (
    <div className="container mx-auto p-4">
      <MessageSignerForm 
        onSign={handleSign}
      />
    </div>
  );
}

Custom Configuration

import { MessageSignerForm } from './components/ArDacityUi/MessageSigner';

function App() {
  // Custom Lua code for signing
  const customLuaCode = `
function signMessage(message)
  -- Custom signature implementation
  local signature = "custom_" .. message:gsub("%s+", "_")
  return {
    signature = signature,
    timestamp = os.time()
  }
end
  `;

  return (
    <div className="container mx-auto p-4">
      <MessageSignerForm 
        title="Custom Message Signer"
        description="Sign your messages with our custom implementation"
        initialLuaCode={customLuaCode}
        onSign={(result) => {
          // Handle the signed message
          alert(`Message signed: ${result.signature}`);
        }}
        className="my-8"
        style={{ maxWidth: '800px' }}
      />
    </div>
  );
}

Using LuaIDE Separately

import { LuaIDE } from './components/ArDacityUi/MessageSigner';

function LuaEditor() {
  return (
    <div className="container mx-auto p-4">
      <h2>Lua Code Editor</h2>
      <LuaIDE
        cellId="my-lua-editor"
        initialCode="-- Enter your Lua code here\nprint('Hello, World!')"
        onProcessId={(pid) => console.log('Process started with ID:', pid)}
        onNewMessage={(messages) => console.log('New messages:', messages)}
        onInbox={(inbox) => console.log('Inbox updated:', inbox)}
      />
    </div>
  );
}

API Reference

MessageSignerForm

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | 'Message Signer' | Title displayed at the top of the form | | description | string | 'Sign messages using Lua handlers' | Description text displayed below the title | | initialLuaCode | string | (Default Lua code) | Initial code to display in the Lua editor | | onSign | function | undefined | Callback function called when a message is signed. Receives an object with message, signature, and luaCode properties | | className | string | '' | Additional CSS classes to apply to the component | | style | object | {} | Additional inline styles to apply to the component |

LuaIDE

| Prop | Type | Default | Description | |------|------|---------|-------------| | cellId | string | required | Unique identifier for the Lua code cell | | initialCode | string | required | Initial Lua code to display in the editor | | onProcessId | function | undefined | Callback function called when a process is started. Receives the process ID as a parameter | | onNewMessage | function | undefined | Callback function called when new messages are received. Receives an array of messages | | onInbox | function | undefined | Callback function called when the inbox is updated. Receives the inbox data |

Customization

The MessageSigner component uses TailwindCSS for styling. You can customize its appearance by:

1. Passing additional classes via the className prop
2. Passing inline styles via the style prop
3. Overriding the default styles in your CSS

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

If you want to contribute to this project:

1. Clone the repository
2. Install dependencies: npm install
3. Make your changes
4. Build the package: npm run build
5. Test your changes
6. Submit a pull request

License

MIT © ArDacity