NSLVWidget.jsx

/**
 * This is a widget created to be used with "NEAR Social Local Viewer" CLI.
 * A tool that enables you to develop your widgets locally.
 * Learn more here: https://github.com/wpdas/near-social-local-viewer
 *
 * This Widget lives here: https://near.social/#/wendersonpires.near/widget/NSLVWidget
 *
 * How it works:
 *
 * 1 - This widget connects to both local and remote widgets;
 * 2 - Example of use:
 *
 * <Widget
 *   src="wendersonpires.near/widget/NSLVWidget"
 *   props={{ src: "wendersonpires.near/widget/Profile" }}
 * />
 *
 * Where "NSLVWidget" Loads the Near Social Local Viewer logic to render local or remote widget
 * and "props={src: "wendersonpires.near/widget/Profile"}" is the widget path
 *
 * It will always try to find a local Widget first, if it fails, the remote Widget will be used.
 */

const src = props.src;

State.init({
  code: null,
  ready: false,
  props: props.srcProps || {},
});

if (!src) {
  return (
    <div>
      <p
        style={{ fontWeight: 600, color: "#AB2E28", fontFamily: "Courier new" }}
      >
        This is a widget created to be used with
        <a href="https://github.com/wpdas/near-social-local-viewer">
          "NEAR Social Local Viewer"
        </a>{" "}
        CLI. A tool that enables you to develop your widgets locally.
      </p>
      <p
        style={{ fontWeight: 600, color: "#AB2E28", fontFamily: "Courier new" }}
      >
        Learn more here:{" "}
        <a href="https://github.com/wpdas/near-social-local-viewer">
          https://github.com/wpdas/near-social-local-viewer
        </a>
      </p>
    </div>
  );
}

const localWidgetPath = src.split("/");
const localWidgetName = localWidgetPath[localWidgetPath.length - 1];

const fetchCode = () => {
  asyncFetch(`http://localhost:9000/widget/get/${localWidgetName}`)
    .then((localWidgetSrc) => {
      if (
        localWidgetSrc &&
        localWidgetSrc?.status === 200 &&
        localWidgetSrc?.body?.code
      ) {
        // Set local widget code
        State.update({ code: localWidgetSrc.body.code });

        // If it's local (because its using local code server), refresh every 1 sec (to get most updated local widget)
        setTimeout(() => {
          fetchCode();
        }, 1000);
      }
    })
    .finally(() => {
      State.update({ ready: true });
    });
};

fetchCode();

// Wait till it loads
if (!state.ready) {
  return <div />;
}

if (state.ready && state.code) {
  // Render local widget
  return <Widget code={state.code} props={state.props} />;
}

// Render remote widget
if (state.ready && !state.code) {
  return <Widget src={src} props={state.props} />;
}