@decentldotland/react-mem-api

Your easiest foray into Web3. Molecular Execution Machine APIs for React Devs 👷‍♂️ Web3 batteries included.

Overview

• Lightweight

We've made sure unecessary bloat is kept at bay. Check out the package size:

`dist/index.es.js` 4.97 kB │ gzip: 1.78 kB

`dist/index.umd.js` 3.41 kB │ gzip: 1.48 kB

• Fast setup

All you need to get started with is within the useMEM hook:

export default function Homepage() {
  const shop = useMEM("xyz1...1yzq");

  const buyItem = async (item) => {
    const result = await shop.write([{ input: { function: "buy", item } }]);
    const errors = Object.keys(result.data.execution.errors);
    if (!errors.length) console.log("Successfully purchased " + item)
    else console.error("Couldn't buy " + item)
  }

  return (
    <div>
      <div>
        <p>Hockey Puck</p>
        <button onClick={() => buyItem("Hockey Puck")}>Buy</button>
      </div>
      <div>
        <p>Helmet</p>
        <button onClick={() => buyItem("Helmet")}>Buy</button>
      </div>
    </div>
  )
}

Install

Add it to your project:

# npm
npm install react-mem-api

# yarn
yarn add react-mem-api

# pnpm
pnpm add react-mem-api

# bun
bun add react-mem-api

Setup

First, let's wrap the app with our provider:

// If you're using next.js, this should be your _app.tsx file
import React from 'react';

import { MEMContext } from "react-mem-api";
import "../styles/globals.css";

function ExampleApp({ Component, pageProps }) {
  return (
    <MEMContext.Provider value={{}}>
      <Component {...pageProps} />
    </MEMContext.Provider>
  );
}

export default ExampleApp;

Then, within your app, call useMEM:

export default function Home() {
  const library = useMEM("yBgIzbc3lvwlBjw6V-G9Woy5Hx2uY37aDQIPoQ5kRRw");

  const [books, setBooks] = useState([]);
  
  return (
    <div>
      {books?.length > 0 && (
        books.map(bookName => <div>{bookName}</div>)
      )}
    </div>
  )
}

Examples

Check out the example Next.js app.

API

MEMContext

A wrapper around useContext that manages the store of MEM instances. Doesn't accept any arguments.

// Next.js
<MEMContext.Provider value={{}}>
  <Component {...pageProps} />
</MEMContext.Provider>

currentFunction

Returns the current function being used

setFunctionId

Swaps the functionID used in MEM

destroyFunctionId

Delete the functionId inside the MEM store.

allFunctions

Returns all currently tracked MEM instances. Each one is accessible via the functionId as the key and implement MEMInstance interface.

state

Return latest state of a function as parsed JSON object.

read

Query a function. Accept another functionId as argument:

const { read, state } = useMEM("241-...djKK");
// reads and saves to local state
console.log(await read());
// reading other function ID, won't be saved in local state
console.log(await read("AI-F...La2T"));

write

Write to function. Accepts input and otherFunctionId Params.

const { write } = useMEM("241-...djKK");
const result = await write([{ input: { function: "save", bookName } }]);
console.log(result);

testnet

Test functions and their parameters in a MEM-sandbox environment. Example:

const { testnet } = useMEM();

const contractType = 0; // Language, 0 is JavaScript
const initState = JSON.stringify({ name: "Carl", publicFunctions: { changeName: ["newName"] } })
const input = JSON.stringify({ function: "changeName", newName: "Lukas (Computer)" })
const contractSrc = `
export async function handle(state, action) {
  const input = action.input;
  if (input.function === "save") {
    const { newName } = input;
    const nameLength = newName.trim().length;
    ContractAssert(!!nameLength, "Error: No newName provided");
    state.name = newName;
    // this is important: without it, function invokation won't return the state
    return { state };
  }
}
`

const options = {
  contractType,
  initState,
  input,
  contractSrc,
};
const result = await testnet(options);
// will output new state object, have to manually compare changes

Roadmap

• Core API built ✅
• Add everpay.js and arseed file uploading helpers for MEM ⏳
• Wallet APIs like ETH, SOL, and more 🔜

License

This project is licensed under the MIT license