Components

BOS allows you to create a decentralized frontend by writing and composing small applications known as Components.

Components are stored in the NEAR blockchain, and execute locally in a custom Virtual Machine, thus ensuring the component can not access local storage or cookies.

BOS API

Components use the BOS API to process data, fetch data from other websites, and interact with blockchains.

---

Creating a Component

To create a component you simply need to implement a return statement, returning some HTML code.

Loading...

---

VM context

You can access the context object to get specific information about the VM instance.

networkId

You can detect the current network (mainnet or testnet) using context.networkId. For example:

const childSrc =
  context.networkId === "mainnet"
    ? "near/src/Foobar"
    : "preview.testnet/src/Foobar";

return (
  <div>
    <p>A child dependency:</p>
    <Widget src={childSrc} />
  </div>
);

accountId

You can get the current signed-in user account (e.g., user.near) using context.accountId. For example:

let user_account = context.accountId;

return (
  <>
    <div class="container border border-info p-3 text-center min-vw-100">
      <h1>Hello</h1>
      <p> {user_account} </p>
    </div>
  </>
);

---

Props: Receiving Input

Components can take arbitrary input, which will be reflected in the props variable. In the example below, we are passing as input name="Anna".

Loading...

---

State: Storing Information

Components have an internal state were they can store information.

Loading...

---

Composing Components

To compose components you will use the Predefined Widget component. For this, you will only need the NEAR username of who created the component, and the component's name.

Loading...