near-social-local-viewer

NEAR Social Local Viewer

A CLI tool that allows you to run and test your Near Social Widgets locally using just your preferred code editor and your default browser.

Tool intended only for Widgets that will run within Near Social

Check out an example project using this tool here.

Node: 16.10.0

Install it using npm or yarn:

# npm
npm install near-social-local-viewer --save-dev

# yarn
yarn add near-social-local-viewer -D

Starting the Viewer

You can start by running the following command:

# mainnet
npx init-viewer path/to/widgets/

# testnet
npx init-viewer path/to/widgets/ --testnet

The Viewer is going to open automatically and watch all the widgets inside path/to/widgets/ folder.

Changing the Viewer PORT

You can change the viewer port:

VIEWER_PORT=3005 npx init-viewer path/to/widgets/

Widgets example

Below is an example of 2 widgets with interactions:

UserNameAccountView

const userName = props.name;
const userAccoundId = props.accountId;

return (
  <div>
    <span>{userName}</span> <span>(@{userAccoundId})</span>
  </div>
);

ProfileView

const IPFS_NEAR_SOCIAL_THUMBNAIL_URL =
  "https://i.near.social/thumbnail/https://ipfs.near.social/ipfs/";

const accountId = context.accountId || "wendersonpires.near";
const profile = socialGetr(`${accountId}/profile`);
const profileImage = `${IPFS_NEAR_SOCIAL_THUMBNAIL_URL}${profile.image.ipfs_cid}`;

return (
  <div>
    <img src={profileImage} alt="profile avatar" />
    {/* Using another local or remote widget */}
    <Widget
      src="wendersonpires.near/widget/NSLVWidget"
      props={{
        src: "wendersonpires.near/widget/UserNameAccountView",
        srcProps: { name: "Wendz", accountId },
      }}
    />
  </div>
);

Testnet

Use wendersonpires.testnet/widget/NearSocialBridgeCore while creating your application using testnet. E.g.:

const accountId = context.accountId || "wendersonpires.testnet";

return (
  <div>
    <Widget
      src="wendersonpires.testnet/widget/NSLVWidget"
      props={{
        src: "wendersonpires.testnet/widget/UserNameAccountView",
        srcProps: { name: "Wendz", accountId },
      }}
    />
  </div>
);

Good to know

This project was inspired by NearSocial Viewer