Introducing fred, a Functional Reactive Editor

This week, our team is celebrating a new milestone in our Optimism RFG UI for Smart Contracts project. The OKcontract proposal addresses the friction involved in interacting with ABIs by creating user-friendly interfaces that automatically handle integer conversions, parameters, and other tasks that can slow down developers. The goal is straightforward interaction with smart contracts on OP — benefiting both builders and everyday users.

ABI2UI proposal

Optimism’s RFG challenge calls for a general, user-friendly UI for ABI contracts. The goal is to remove pitfalls like numeric type conversions and confusing input fields, while maintaining a decentralized approach.

The OKcontract ABI2UI proposal aims to deliver an automated user interface generator for any contract, simplifying interactions with contract ABIs.

We previously released OKcontract UI Components as part of our progress. Now, we’re releasing a new open-source library called fred.

fred: A Functional Reactive Editor

fred is a functional reactive editor, designed for dynamic and structured data manipulation using cells as a runtime. fred leverages functional reactivity to track and manage updates in data structures like arrays, objects, and dictionaries.

Core concepts

Data Schema

Define your data structure with LabelledTypeDefinition to specify structure, validation rules, and properties of the data.

Editor Nodes

fred models data as a graph of nodes that can represent objects, arrays, or dictionaries, each updating reactively when values change.

Functional Operations

fred allows to easily add, remove, or modify elements with reactive actions — everything stays in sync.

Example

Below is a quick look at fred in action, including both an object and an array.

import { Sheet, SheetProxy } from "@okcontract/cells";
import { DataEditor, newSchema, objectDefinition } from "@okcontract/fred";
const sheet = new Sheet();
const proxy = new SheetProxy(sheet);

// Initialize reactive data
const testArray = proxy.new([], "test");
const data = proxy.new({ test: testArray }, "data");

// Define schema using helpers
const values = objectDefinition(proxy, {
  test: {
    label: "Test",
    array: () =>
      proxy.new({
        label: "Test Item",
        base: "string",
      }),
  },
});
const schema = newSchema(proxy, values);
const editor = new DataEditor(proxy, data, schema);

// Add an element to the array
const arrNode = await editor.follow(["test"]);
await editor.addElement(arrNode);
await proxy.working.wait();

// Verify the new state
console.log(await proxy.get(arrNode.value)); // [{}, "", ...]

Looking Ahead

Our next steps involve refining the front-end experience and expanding our ABI generation approach. By giving developers tools that work with a wide range of ABI data, we aim to make OP Mainnet more accessible.

Stay tuned for more updates from OKcontract and the Optimism RFG journey.

Learn more

If you’d like to explore fred now, check out our GitHub repo and share your feedback!