@ar-dacity/ardacity-message-signer v1.0.1

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

LuaIDE

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