This library allows you to create applications for BOS with a focus on performance, in addition to requiring concepts that are based on ReactJS.

You can create any component file using JavaScript or TypeScript. The entrypoint must be an App component like so:

// App.tsx
const App = () => {
  return (
    <>
      <h1>Hello World</h1>
    </>
  );
};

Components must be created following react standards:

// Hero.tsx
type HeroProps = { text: string };

const Hero = ({ text }: HeroProps) => {
  return (
    <div>
      <p>This is the Hero section</p>
      <p>
        <strong>{text}</strong>
      </p>
    </div>
  );
};

export default Hero;

All the features will be right available to be used. e.g.:

(updating App.tsx including the Hero component)

import Hero from "./Hero"

// App.tsx
const App = () => {
  return (
    <>
      <h1>Hello World</h1>
      <Hero text="First Component">
    </>
  );
};

The state management is made using built in useStore hook. This feature is used to create store objects that can be used over the app in any level down the tree.

// store.ts
// initializing a store
useStore("cartStore", { items: 2, totalPrice: 24 });
// creating a hook for the store above
const useCartStore = () => useStore("cartStore");

// app.tsx
// using the cart store hook
// reading data
const { items, totalPrice, update } = useCartStore();
console.log(items, totalPrice); // 2, 24

// changing store data
update({ items: 4, newValue: "Joe" });
console.log(items, newValue); // 4, 'Joe'

Here's an example of this being used into the components we created above:

(updating Hero.tsx to use a store)

// Hero.tsx
type HeroProps = { text: string };

const Hero = ({ text }: HeroProps) => {
  const { items } = useCartStore();

  return (
    <div>
      <p>This is the Hero section</p>
      <p>
        <strong>{text}</strong>
      </p>
      <p>Cart has {items} items</p>
    </div>
  );
};

Create an bos.config.json file at the root of the project with the following content:

{
  "isIndex": true,
  "account": "potlock.near",
  "name": "PotLock",
  "description": "PotLock is transforming the way public goods are funded. Create your project, donate to your favroite project, or earn automatic on-chain referrals from funding for your favorite public goods.\n\nLearn more at https://docs.potlock.io ",
  "linktree": {
    "website": "potlock.io/app"
  },
  "image": {
    "ipfs_cid": "bafkreicwzq6dlcynhceovrtslsjja2d76b7ysnjih4qmqlk7atre3w2nay"
  },
  "tags": ["your", "dapp", "tags", "here"]
}

isIndex: This field is used to inform whether this is the account's main application or not. You can have multiple apps for the same account, but there can only be one main app (Index).

The linktree and image can be different. For instance, you can use a URL for image like so: "image": { "url": "https://link-to-the/image.jpg" }.

Take a look at https://docs.near.org/social/contract to get to know more.

This file is mandatory because it is from it that information will be extracted for application deployments.

• props é global do BOS. Por isso, deve-se usar outro nome para referenciar as props de um componente (ex: componentProps).

• useParams use isso ao invés de props

• promisify: Usado para criar uma promessa.

• RouteLink: Usado para criar um link para um rota

• navigate: Quando usado, ignora o parametro "path=" da URL para ir para rota especificada

• clearStore: Apaga todos os dados de store

• useLocation:

• instancias globais devem ter nomes únicos para evitar conflito entre elas