Операционная система блокчейна NEAR Protocol

В марте 2023 года Near Protocol запустил операционную систему Blockchain (BOS), чтобы создать идеальную точку входа в Open Web. Идея состоит в том, чтобы плавно преодолеть разрыв между web2 и web3. В этой статье мы подробно рассмотрим BOS и поймем, как она работает.

Что такое открытая сеть?

«Открытая сеть» — это термин, используемый для описания Интернета, когда он становится глобальным общедоступным ресурсом и никем не контролируемым. Итак, почему открытая сеть желательна?

• Это необходимо для свободной и открытой коммуникации и самовыражения.
• Открытая сеть — это Интернет, созданный людьми и для людей. Это дает людям возможность вмешаться и внести положительный вклад в общество.

С самого начала видение NEAR заключалось в том, чтобы способствовать созданию Открытой сети. Поскольку открытая сеть должна быть децентрализована, NEAR необходимо было создать масштабируемую цепочку блоков первого уровня, которая абстрагируется от сложностей. Удалось ли им это сделать? Давайте взглянем.

• NEAR имеет гибкую модель учетной записи и удобочитаемые учетные записи.
• Механизм сегментирования Nightshade делает NEAR чрезвычайно масштабируемым.
• NEAR также предоставляет сложные инструменты, помогающие разработчикам разрабатывать на протоколе.

Заложив фундамент, NEAR теперь необходимо создать стек web3, который поможет упростить адаптацию Открытой сети для пользователей и разработчиков.

Как BOS добивается открытости Интернета?

Подумайте, что делает операционная система или “ОС”. ОС позволяет пользователям взаимодействовать со сложной техникой, не вникая в сложности. Абстрагирование от фоновых сложностей имеет решающее значение для массового внедрения технологии.

Теперь распространите эту логику на web3. По словам соучредителя NEAR Protocol Ильи Полосухина, BOS — это общий уровень для просмотра и обнаружения продуктов Web 3. Кроме того, во время запуска BOS будет поддерживать цепочки Near Protocol и Ethereum Virtual Machine. Представьте себе создание нового крутого приложения DeFi на Ethereum и получение пользователей из NEAR через BOS.

Создание компонуемых внешних интерфейсов

Прежде чем мы пойдем дальше, давайте разберемся, что такое интерфейс. Интерфейс — это то, как пользователь взаимодействует с приложением. Когда дело доходит до dApps, необходимо создавать компонуемые и децентрализованные приложения. Сама суть web3 — децентрализация. Так почему же мы до сих пор используем централизованные службы для доступа к этим службам? Доверие к этим посредникам сопряжено с рядом проблем безопасности.

BOS помогает добавлять компонуемые интерфейсы в технический стек и легко интегрировать пользователей в web3. Что касается потенциала BOS в качестве внешнего интерфейса, Полосухин сказал:

«Компонуемый децентрализованный внешний интерфейс в качестве фреймворка может работать с любым внутренним интерфейсом Web2 или Web3 и любым кошельком. В будущем мы будем предлагать [использование] кошельков из одной цепочки для взаимодействия с другой посредством беспрепятственного моста».

3 столпа BOS

BOS базируется на трех столпах:

• Шлюзы
• Компоненты
• Блокчейны

Шлюзы

Шлюзы предназначены для того, чтобы сделать локальные децентрализованные интерфейсы доступными для всех. Шлюз представляет собой специально разработанную виртуальную машину, которая загружает и запускает внешние интерфейсы для протоколов, построенных на Ethereum, L2 и первых уровнях, таких как NEAR. Код этих интерфейсов хранится в блокчейне NEAR.

Компоненты

Компоненты — это внешние интерфейсы для сетевых протоколов уровня приложений, таких как Lido, Uniswap и Aave. Разработчики могут просматривать код этих приложений в шлюзе, подобно просмотру смарт-контракта в Etherscan. Кроме того, они могут разветвлять эти приложения и развертывать свои собственные версии или даже создавать компоненты.

Блокчейны

Компоненты могут вызывать функции в любой цепочке блоков. В настоящее время поддерживаются все цепочки EVM/L2 и NEAR. Кроме того, исходный код интерфейсов (приложений) хранится на NEAR из-за его способности дешево хранить HTML/CSS/JS.

Посмотрим на интерфейс BOS NEAR

Давайте посмотрим, как интерфейс работает в режиме реального времени. Зайдите на alpha.near.org.

Внешний интерфейс соединяет пользователей со всеми различными возможностями Web3 в рамках экосистемы. Любой участник экосистемы Open Web может создавать собственные интерфейсы, совместимые с выбранной им цепочкой блоков. Давайте поиграем с интерфейсом и посмотрим, как это работает.

Когда вы прокрутите вверх, наведите курсор на «Обнаружение» и нажмите «Компоненты».

Компоненты — это небольшие приложения, которые решают определенные проблемы. В настоящее время у вас есть несколько встроенных компонентов, которые вы можете использовать для создания внешнего интерфейса. Вот некоторые из них.

Виджет

Виджет — это минимальная единица внешнего интерфейса. Он позволяет вам включать существующий компонент в ваш код, тем самым позволяет  создавать сложные приложения путем компоновки компонентов.

Код:

​​const user = "gagdiez.near";
const props = { name: "Learn NEAR" };

return (
  <>
    <div class="container min-vw-100">

       <h3> Widgets </h3>
      <p> Here is a Widget </p>
      <hr />

      <Widget src={`${user}/widget/Greetings`} props={props} />
    </div>
  </>
);

Результат:

Загрузчик изображений

Средство загрузки изображений позволяет пользователям напрямую загружать изображения в файловую систему (IPFS).

Код:

State.init({
  img: null,
});

return (
  <div className='container row'>
    <div>
      Image upload: <br />
      <IpfsImageUpload image={state.img} />
    </div>
    <div>
      Raw State:
      <pre>{JSON.stringify(state)}</pre>
    </div>
    <div className='mt-2'>
      {state.img.cid && (
        <img
          src={`https://ipfs.near.social/ipfs/${state.img.cid}`}
          alt='uploaded'
        />
      )}
    </div>
  </div>
);

Результат:

Вы можете использовать кнопку для загрузки изображения:

Файлы

Загружайте файлы с поддержкой перетаскивания.

Код:

State.init({ img: null });

const uploadFileUpdateState = (body) => {
  asyncFetch(
    "https://ipfs.near.social/add",
    {
      method: "POST",
      headers: { Accept: "application/json" },
      body
    }
  ).then(
    (res) => {
      const cid = res.body.cid;
      State.update({ img: { cid } });
    }
  )
};

const filesOnChange = (files) => {
  if (files) {
    State.update({ img: { uploading: true, cid: null } });
    uploadFileUpdateState(files[0]);
  }
};

return (
  <div className="d-inline-block">
    { state.img?
      <img class="rounded w-100 h-100"
        style={{ objectFit: "cover" }}
        src={`https://ipfs.near.social/ipfs/${state.img.cid}`}
        alt="upload preview" />
      : ""
    }
    <Files
      multiple={false}
      accepts={["image/*"]}
      minFileSize={1}
      clickable
      className="btn btn-outline-primary"
      onChange={filesOnChange}
    >
      { state.img?.uploading ? <> Uploading </> : "Upload an Image" }
    </Files>
  </div>
);

Результат:

Markdown

Встроенный компонент, который позволяет отображать Markdown.

Код:

const text = `
  #### Markdown Section
  Checkout Learn NEAR [here](https://learnnear.club/)
`;

return (
  <>
    <div class="container border border-info pt-3 min-vw-100 text-center">
      <Markdown text={text} />
    </div>
  </>
);

Результат:

OverlayTrigger

Виджет OverlayTrigger позволяет разработчикам отображать наложенный текст или значок, когда указатель мыши находится над определенным элементом.

Код:

State.init({
  show: false,
});

const handleOnMouseEnter = () => {
  State.update({ show: true });
};
const handleOnMouseLeave = () => {
  State.update({ show: false });
};

const overlay = (
  <div
    className='border m-3 p-3 rounded-4 bg-white shadow'
    style={{ maxWidth: "24em", zIndex: 1070 }}
    onMouseEnter={handleOnMouseEnter}
    onMouseLeave={handleOnMouseLeave}
  >
    This is the overlay Message
  </div>
);

return (
  <OverlayTrigger
    show={state.show}
    trigger={["hover", "focus"]}
    delay={{ show: 250, hide: 300 }}
    placement='auto'
    overlay={overlay}
  >
    <span
      className='d-inline-flex'
      style={{ backgroundColor: "gray", borderRadius: "10px", padding: "10px" }}
      onMouseEnter={handleOnMouseEnter}
      onMouseLeave={handleOnMouseLeave}
    >
      Place Mouse Over Me
    </span>
  </OverlayTrigger>
);

Результат:

Бесконечная прокрутка

Этот компонент позволяет создавать простую и легкую страницу или элемент с бесконечной прокруткой, поддерживая как оконные, так и прокручиваемые элементы.

Код:

const allNumbers = Array.from(Array(100).keys())

State.init({
  displayNums: [],
  lastNumber: 0,
});

const loadNumbers = (page) => {
  allNumbers
    .slice(state.lastNumber, state.lastNumber + 10)
    .map((n) => numberToElem(n))
    .forEach((i) => state.displayNums.push(i));
  state.lastNumber += 10;
  State.update();
};

const numberToElem = (number) => <div> {number} </div>;

return (
  <div>
    <InfiniteScroll
      loadMore={loadNumbers}
      hasMore={state.displayNums.length < allNumbers.length}
    >
      {state.displayNums}
    </InfiniteScroll>
  </div>
);

Результат:

Бесконечно загружаемый список:

Упреждающий ввод

Этот компонент предоставляет поле ввода с опережением ввода для выбора параметра из списка вариантов. Проще говоря, этот компонент используется для создания функций автозаполнения текста.

Код:

const options = ["Apple", "Banana", "Cherry", "Durian", "Elderberry"];

return (
  <div class="container min-vh-100 min-vw-100">
    <Typeahead
      options={options}
      multiple
      onChange={(value) => {State.update({choose: value})}}
      placeholder='Choose a fruit...'
    />
    <hr />
    <p> Selected: {JSON.stringify(state.choose)} </p>
  </div>
);

Результат:

Этот упреждающий ввод позволяет выбрать фрукт.

Стилизованные компоненты

Инструмент Styled Components используется для стилизации компонентов React с использованием CSS-in-JS.

Код:

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${(props) => (props.primary ? "palevioletred" : "white")};
  color: ${(props) => (props.primary ? "white" : "palevioletred")};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 10px;
`;

return (
  <div>
    <Button>White</Button>
    <Button primary>Red</Button>
  </div>
);

Результат:

Подсказка

Этот компонент позволяет разработчикам добавлять подсказки к определенным элементам. Просто создайте кнопку и добавьте наложенный текст в качестве всплывающей подсказки.

Код:

return (
  <>
    {["top", "right", "bottom", "left"].map((placement) => (
      <div style={{ margin: "2.5rem 1rem", float: "left" }}>
        <OverlayTrigger
          key={placement}
          placement={placement}
          overlay={
            <Tooltip id={`tooltip-${placement}`}>
              Tooltip on <strong>{placement}</strong>.
            </Tooltip>
          }
        >
          <button variant="secondary">Tooltip on {placement}</button>
        </OverlayTrigger>
      </div>
    ))}
  </>
);

Результат:

Заключение

BOS помогает решить основные проблемы, связанные с созданием веб-интерфейсов 3, такие как доступ, безопасность, компонуемость и гибкость. С BOS пользователи могут запускать блокчейн-приложения локально, что помогает обеспечить надежность и устойчивость к цензуре, сохраняя при этом удобство для пользователя.

Если вы хотите узнать больше о внешнем интерфейсе BOS, прочитайте документацию здесь.