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/ --testnetThe 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