neardevhub-bos icon indicating copy to clipboard operation
neardevhub-bos copied to clipboard

Research the near-social-bridge approach

Open ailisp opened this issue 1 year ago • 7 comments

Problem Currently, we are not able to use npm packages like css libraries and third party react compoents in near social viewer. The event handler also has some limitations that prevent us from implementing a better search bar experience, see problem 1 in this comment: https://github.com/near/neardevhub-widgets/pull/85#issuecomment-1501391631.

User Story As a developer, I want to use npm packages and reuse the react ecosystem's tooling.

Acceptance Criteria

  • Research https://github.com/wpdas/near-social-bridge, which implements a mechanism to create normal ReactJS App and inject it in a controlled way into a Widget on Near Social.
  • Experiment to ensure:
    • we can use npm packages, such as tailwindcss and nextjs
    • we can use the full apis of react-bootstrap-typeahead that was not available in near social widget. For example, feature in this comment blocked by this: https://github.com/near/neardevhub-widgets/issues/18#issuecomment-1510604454
    • above search bar problem can be solved by either use a form with submit button, or <input> with both onKeyDown and onChange event handlers
    • test whether we can access SocialDB / transaction committing functionality from inside near-social-bridge
  • Also figure out an estimation of cost (performance, effort) to migrate entire neardevhub-widgets to a standard react app

If everything goes well, scope after this ticket:

  • Re-architect the neardevhub-widgets to be standard react app, setup with standard tooling and common configuration
  • Inject it to BOS, make sure everything still works
  • Makes it run as a React App locally.
  • improve the search bar typing experience.
  • clean up and configure styles with proper css libraries and css files, adjust styles that more precisely follows the @Ori's design.
  • Reuse the react-bootstrap-typeahead or some similar library to address https://github.com/near/neardevhub-widgets/issues/18#issuecomment-1510604454

ailisp avatar May 02 '23 03:05 ailisp