Quick Start | Blockchain Operating System (BOS)

·

The Blockchain Operating System (BOS) is a powerful platform that enables developers to build and deploy decentralized applications seamlessly on the NEAR blockchain. By combining smart contract interaction, dynamic state management, and modern UI rendering, BOS simplifies the development process while maintaining high performance and scalability. This guide walks you through a complete example using Lido—a popular Ethereum staking protocol—to demonstrate how you can interact with external contracts, manage user state, and render responsive components.

Whether you're new to BOS or looking to deepen your understanding, this walkthrough provides practical insights into real-world implementation.

Interacting with Smart Contracts Using ethers.js

At the core of many decentralized applications is the ability to communicate with smart contracts. In this example, we use ethers.js to interface with Lido’s staking contract deployed on Ethereum. The first step involves fetching the contract's Application Binary Interface (ABI), which defines its functions and data structures.

const lidoContract = "0xae7ab96520de3a18e5e111b5eaab095312d7fe84";
const tokenDecimals = 18;

const lidoAbi = fetch(
  "https://raw.githubusercontent.com/lidofinance/lido-subgraph/master/abis/Lido.json"
);

Once retrieved, the ABI is used to create an interface object via ethers.utils.Interface, enabling function encoding and decoding for secure contract calls.

👉 Discover how to integrate cross-chain smart contracts effortlessly

Fetching Real-Time Staking Data

To provide users with up-to-date information, the component fetches Lido’s current staking Annual Percentage Rate (APR):

const apr = fetch(
  "https://api.allorigins.win/get?url=https://stake.lido.fi/api/sma-steth-apr"
);

This value is stored in the component’s state using State.update(), ensuring the UI reflects live economic conditions. Displaying accurate APR helps users make informed decisions about their staking activities.

Managing User State and Balances

User experience hinges on real-time data. The component detects the connected wallet address:

State.update({ sender: Ethers.send("eth_requestAccounts", [])[0] });

It then retrieves the sender’s ETH balance and staked stETH balance by calling the balanceOf method on the Lido contract:

const getStakedBalance = (receiver) => {
  const encodedData = iface.encodeFunctionData("balanceOf", [receiver]);
  return Ethers.provider()
    .call({
      to: lidoContract,
      data: encodedData,
    })
    .then((rawBalance) => {
      const receiverBalanceHex = iface.decodeFunctionResult("balanceOf", rawBalance);
      return Big(receiverBalanceHex.toString())
        .div(Big(10).pow(tokenDecimals))
        .toFixed(2)
        .replace(/\d(?=(\d{3})+\.)/g, "$&,");
    });
};

This asynchronous approach ensures smooth rendering while data loads in the background.

Handling Transactions and Gas Estimation

Submitting a transaction requires both correct formatting and cost transparency. When a user enters an amount and clicks "Submit", the system parses the input into wei units and sends the transaction:

let amount = ethers.utils.parseUnits(strEther, tokenDecimals).toHexString();
erc20.submit(lidoContract, { value: amount }).then((transactionHash) => {
  console.log("transactionHash is " + transactionHash);
});

Before submission, users see an estimate of the transaction cost. This is calculated by combining gas estimates with current ETH prices pulled from Uniswap’s subgraph:

const gasEstimate = ethers.BigNumber.from(1875000);
const gasPrice = ethers.BigNumber.from(1500000000);
const gasCostInWei = gasEstimate.mul(gasPrice);
const gasCostInEth = ethers.utils.formatEther(gasCostInWei);

A GraphQL query retrieves the latest ETH-to-USD price, allowing conversion of gas costs into fiat for better user comprehension.

👉 Learn how to optimize gas usage in cross-chain dApps

Styling Components with Dynamic CSS

A polished UI enhances trust and engagement. BOS supports dynamic styling through external CSS and web fonts:

const cssFont = fetch("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800").body;
const css = fetch("https://pluminite.mypinata.cloud/ipfs/Qmboz8aoSvVXLeP5pZbRtNKtDD3kX5D9DEnfMn2ZGSJWtP").body;

These styles are injected into a styled.div component only after successful retrieval, preventing layout shifts and ensuring visual consistency.

Deploying on BOS: NEAR Account Requirements

To deploy this component on BOS, you must sign in with a NEAR account and pay a small storage deposit in NEAR tokens. This is because BOS leverages the NEAR blockchain for data persistence and execution. Unlike traditional hosting, this model ensures censorship resistance and decentralization.

Once deployed, your component becomes globally accessible and composable—other developers can embed or extend it within their own apps.

Core Keywords for SEO Optimization

To align with search intent and improve discoverability, key terms naturally integrated throughout this guide include:

These keywords reflect common queries from developers exploring BOS and decentralized infrastructure.

Frequently Asked Questions

Q: What is the Blockchain Operating System (BOS)?
A: BOS is a decentralized platform built on the NEAR blockchain that allows developers to create, deploy, and compose dApps using modular components and smart contracts.

Q: Why do I need a NEAR account to deploy on BOS?
A: BOS uses NEAR as its underlying blockchain for security, scalability, and decentralized execution. A NEAR account is required to cover storage fees and authenticate deployments.

Q: Can I interact with Ethereum contracts from BOS?
A: Yes. Using libraries like ethers.js, BOS components can securely query and transact with Ethereum-based smart contracts, enabling true cross-chain functionality.

Q: How are transaction fees displayed to users?
A: Gas costs are estimated using known gas limits and current ETH prices from decentralized sources like Uniswap’s subgraph, then converted into USD for clarity.

Q: Is state management automatic in BOS components?
A: BOS provides a reactive State object. Developers can use State.update() to modify state, triggering automatic UI re-renders when values change.

Q: Can I customize the UI of my BOS component?
A: Absolutely. You can import external CSS files and Google Fonts directly into your component, giving full control over design and branding.

👉 Start building scalable dApps on a high-performance blockchain platform

Conclusion

This Lido integration example showcases the full potential of the Blockchain Operating System—combining cross-chain interoperability, real-time data fetching, elegant UI rendering, and seamless user interactions. With minimal setup and powerful tooling, BOS lowers the barrier to entry for creating production-ready decentralized applications.

By leveraging familiar tools like ethers.js and embracing modern development practices, BOS empowers developers to innovate faster while staying anchored in decentralization principles. Whether you're building financial protocols, social platforms, or NFT marketplaces, BOS offers the flexibility and performance needed to succeed in today’s evolving Web3 landscape.