BOS building with Mintbase
In the past few weeks, NEAR announced the BOS (Blockchain Operating System) as a solution for building decentralized and composable frontends. In this article, we will explore the different gateways and their widgets, set to transform the way we engage with decentralized applications.
Gateways
Gateways make locally run, decentralized front-ends available to the masses. A gateway consists of a specially designed virtual machine that loads and runs frontends for protocols built on Ethereum, L2s, and other Layer 1s like NEAR. The code for these frontends is stored on the NEAR blockchain.
There are several gateways being built by different groups: Near Social, Near Alpha, BOS, or Cantopia. It is fairly easy to deploy one of your own:
The common piece to these gateways is the social.near contract that these read and write data to.
Components
At the core of NEAR Social’s capabilities are the widgets: modular, reusable components that developers can embed into their dApps to boost functionality and usability. These widgets function as the foundation for crafting dynamic and interactive dApp frontends, enabling seamless integration of crucial social elements.
Blockchains
BOS is a new development paradigm that tackles access, security, composability, and agility in front-end development for blockchain apps. It supports EVM chains/L2s and NEAR, with source code stored on NEAR for cost efficiency.
Users can locally run apps for robustness and censorship resistance, while the on-chain code is auditable. BOS enables easy component reuse, rapid deployment, and chain agnosticism, catering to developers working with various blockchains.
Why build components on the BOS?
- Rapid development: The modular and reusable nature of BOS components allows developers to quickly build and deploy new dApps, reducing development time and costs.
- Flexibility: The wide range of available components enables developers to create highly customized and feature-rich dApps tailored to their specific requirements.
- Seamless integration: BOS components are designed to work together seamlessly, making it easy for developers
Components Built With Mintbase
Mintbase is a platform focused on developing key components for the future of NFTs. Here we will cover a few already-built components such as an NFT marketplace, a mass-listing tool, and a collection selector that can be easily integrated into other components.
This is the first part of a series of posts about components built with Mintbase. We will focus on market features such as buying and selling.
Marketplace
The Mintbase Marketplace component is an essential building block for NFT-based dApps. This customizable widget allows developers to integrate a fully functional NFT marketplace into their projects, providing users with an intuitive and seamless way to buy non-fungible tokens.
The marketplace component can be easily tailored to fit specific project requirements. It fetches NFT listing data from the Mintbase Indexer API and provides a simple interface for users to view and purchase NFTs. By using the marketplace component, developers can save time and effort in creating a robust and user-friendly NFT marketplace from scratch.
The script initializes variables with data from either passed properties (props) or default values. These variables include accountId, contracts, marketId, and AFFILIATE_ACCOUNT.
The AFFILIATE_ACCOUNT variable will determine which account gets 1.25% of sales done through the market. Ideally, the user who forks this market should set this variable to themselves. It can also be passed as a query param in the URL via ?affiliateAccount=someaccount.near.
The contractsis an array of NFT token contract account ids. This should be used for filtering tokens of the contracts the user wants to display in the marketplace. The following snippet of code shows the accounts displayed in the image above.
const contracts = [
"asac.near",
"mrbrownproject.near",
"spin-nft-contract.near",
"citizen.bodega-lab.near",
"ff.nekotoken.near",
];Collection Selector
The Collection Selector component displays a gallery of non-fungible token images owned by a specific account. This component can be integrated into a wide range of dApps, from digital galleries to gaming platforms, where users may have extensive NFT collections to manage. It uses the InfiniteScroll library to load more NFT images as the user scrolls down.
The component accepts the following props:
- accountId: The account ID whose owned NFTs are to be displayed.
- onChange: A callback function to be called when a user clicks on an NFT.
- compressImages: A boolean flag to determine whether to display compressed images or not (default is false).
- size: The size of the NFT images is set to 100% by default.
It fetches the NFT data from the Mintbase API and updates the state with the fetched NFT tokens.
query QueryName($accountId: String, $limit: Int = 50, $offset: Int = 0) {
tokens: mb_views_nft_owned_tokens(where: {owner: {_eq: $accountId}}, limit: $limit, offset: $offset) {
tokenId: token_id
contractId: nft_contract_id
media
}
totalOwnedTokens: mb_views_nft_owned_tokens_aggregate(where: {owner: {_eq: $accountId}}) {
aggregate {
count
}
}
}By using the Collection Selector, developers can enhance the user experience by simplifying the process of navigating and organizing large collections, making it easier for users to find and interact with their desired NFTs.
List To Market
The List To Market component is designed to streamline the process of listing multiple NFTs for sale in a single action. This component allows users to select multiple NFTs from their collection, set a price in NEAR tokens, and list them all at once.
The CollectionSelector widget is used in this code snippet to display and allow users to select NFTs from their collection to be mass-listed on the Mintbase Market. It provides a convenient and user-friendly interface for browsing and selecting multiple NFTs owned by the user.
<Widget
src="mintbase.near/widget/CollectionSelector"
props={{
compressImages: true,
onChange: ({ contractId, tokenId }) => {
addToListCart(tokenId, contractId);
},
}}
/>By using the CollectionSelector widget, the code snippet enables users to easily view their NFT collection, select NFTs they want to list and add them to the mass-listing tool. The widget takes care of fetching and displaying the NFTs, as well as handling user interactions such as scrolling and selecting items, making the integration process straightforward for developers.
The method listMarket calculates the necessary storage deposit for listing the tokens and generates a series of Near.call() transactions to approve the NFTs to be sold in the Mintbase market and deposit the storage fee.
const approvals = Object.values(state.tokens).map((token) => {
return {
methodName: "nft_approve",
contractName: token.nftContractId,
gas: gas,
args: {
token_id: token.tokenId,
account_id: marketAddress,
msg: JSON.stringify({
price: _price,
}),
},
deposit: 800000000000000000000,
};
});
Near.call([
{
contractName: marketAddress,
methodName: "deposit_storage",
args: {},
gas: gas,
deposit: storageDeposit,
},
…approvals,
]);
};By incorporating the mass-listing component into a dApp, developers can offer their users a powerful and efficient way to manage their NFT collections and make it more convenient for them to participate in the marketplace.
This is the first of more posts to come on building components for the BOS with Mintbase. We can feature your component in the future if you build something with Mintbase and use the BuiltWithMintbase widget.
Include the Mintbase tag by adding this to your code:
<Widget src="mintbase.near/widget/BuiltWithMintbase" />
