Displaying SBTs

Displaying SBTs in a gallery like view can be done with masa-react quite easily. You can use the Masa React Sample Application as a boilerplate.

Install Masa React

Install via yarn

yarn add @masa-finance/masa-react --save

Install via npm

npm i @masa-finance/masa-react --save

Displaying Masa Green details on a webpage

import {useMasa} from "@masa-finance/masa-react";

export const Green = () => {
  const { masa, greens, isGreensLoading, reloadGreens } = useMasa();

  return (
    <div>
      <div>
        <button onClick={reloadGreens}>Reload Greens</button>
      </div>
      {!isGreensLoading && greens ? (
        greens.length > 0 ? (
          greens.map((green) => (
            <div key={green.tokenId.toString()}>
              <div>TokenId: {green.tokenId.toString()}</div>
              <div>TokenId: {green.tokenUri}</div>
            </div>
          ))
        ) : (
          <>no greens on {masa.config.networkName}</>
        )
      ) : (
        <div>Loading ...</div>
      )}
    </div>
  );
};

Try Masa React