@0day-network/mod-renderer

Module renderer components for 0day Network dApps. Provides React components to dynamically load and render modules with support for encryption, dependency injection, and various SDK types.

Installation

npm install @0day-network/mod-renderer
# or
pnpm add @0day-network/mod-renderer
# or
yarn add @0day-network/mod-renderer

Features

• ModuleRenderer: Full-featured module renderer with built-in loading and error states
• SimpleModuleRenderer: Simplified renderer with customizable loading/error components
• Dynamic Module Loading: Support for ESM and ESM-DI module types
• Encryption Support: Decrypt and load encrypted modules
• Dependency Injection: Automatic dependency resolution for common libraries
• TypeScript Support: Full TypeScript definitions included

Usage

Basic Usage with ModuleRenderer

import { ModuleRenderer } from '@0day-network/mod-renderer';
import { ManifestType } from '@0day-network/react-sdk';

function MyApp() {
  const manifest: ManifestType = {
    sdk: {
      kind: 'esm-di',
      entry: 'https://example.com/module.js'
    },
    // ... other manifest properties
  };

  return (
    <ModuleRenderer
      manifest={manifest}
      props={{ customProp: 'value' }}
      className="my-module"
    />
  );
}

Using SimpleModuleRenderer with Custom Loading

import { SimpleModuleRenderer } from '@0day-network/mod-renderer';

function MyApp() {
  return (
    <SimpleModuleRenderer
      manifest={manifest}
      props={{ customProp: 'value' }}
      loading={<div>Loading your module...</div>}
      error={(err) => <div>Error: {err}</div>}
    />
  );
}

With Encryption

import { ModuleRenderer } from '@0day-network/mod-renderer';

function EncryptedModule() {
  const encryptionKey = await getEncryptionKey(); // Your key retrieval logic

  return (
    <ModuleRenderer
      manifest={manifest}
      encryptionKey={encryptionKey}
      props={{ secure: true }}
    />
  );
}

With Session and Config

import { ModuleRenderer, registerGlobalPackage } from '@0day-network/mod-renderer';
import * as viem from 'viem';

function ConfiguredModule() {
  const session = useSession(); // Your session hook

  // Register viem globally so modules can access it
  useEffect(() => {
    registerGlobalPackage('viem', viem);
  }, []);

  return (
    <ModuleRenderer
      manifest={manifest}
      session={session}
      config={{
        subgraphUrl: 'https://api.subgraph.com',
        apiKey: 'your-api-key'
      }}
      props={{ userId: session.userId }}
    />
  );
}

API Reference

ModuleRenderer Props

| Prop | Type | Description | |------|------|-------------| | manifest | ManifestType | Required. Module manifest configuration | | props | any | Props to pass to the loaded module | | encryptionKey | CryptoKey \| null | Encryption key for decrypting modules | | className | string | CSS class for the wrapper element | | compiledCode | string | Pre-compiled module code (bypasses fetching) | | session | any | Session data to inject into the module | | config | object | Configuration object with subgraphUrl and other settings |

SimpleModuleRenderer Props

All ModuleRenderer props, plus:

| Prop | Type | Description | |------|------|-------------| | loading | React.ReactNode | Custom loading component | | error | (error: string) => React.ReactNode | Custom error renderer function |

Styling

Import the default styles:

import '@0day-network/mod-renderer/styles.css';

Or create your own styles targeting these classes:

• .module-renderer - Main wrapper
• .module-loading - Loading state container
• .module-error - Error state container
• .module-mount-point - Module mounting point
• .simple-module-renderer - Simple renderer wrapper
• .simple-module-loading - Simple renderer loading
• .simple-module-error - Simple renderer error

Supported Dependencies

The module renderer provides the following dependencies via dependency injection:

• react - React library
• react-dom - React DOM utilities
• @tanstack/react-query - React Query for data fetching
• wagmi (optional) - Ethereum interactions
• viem (optional) - Ethereum utilities
• framer-motion (optional) - Animation library
• d3 (optional) - Data visualization
• @lens-chain/storage-client (optional) - Lens storage
• @0day-network/react-sdk (optional) - 0day SDK

License

MIT