Near Protocol | Web4 Profile Widget

A working example of deploying widget process on near.social BOS

Demo · Explore other examples · Report Bug

Developed by

Near Ukrainians Guild is a fast-growing guild based in Ukraine, aimed at providing high-quality educational content and assistance to grow a strong community of developers/entrepreneurs within the Near Protocol ecosystem

---

About The Project

This example covers the process of deploying your own widget on top of near.social BOS & SocialDB

If you're not familiar with BOS & SocialDB concepts, read these resources before following further:

• https://near.org/blog/near-announces-the-blockchain-operating-system
• https://docs.near.org/discovery/tutorial/quickstart
• https://thewiki.near.page/near.social_docs

The widget uses factory smart contract written on Near Protocol to deploy Web4 Profile on your behalf

Built With

• 
• Near Protocol factory smart contract
• near-social CLI

---

Getting Started

💡 Before you begin, make sure you have the following installed

• npm
• Cargo
• Git

Prerequisites

Follow these simple instructions to setup the required dependencies before usage

1. Clone the repo

   git clone https://github.com/nearuaguild/web4-profile-widgets.git

2. Install project dependencies

   npm install

3. Install near-social binary to be able to deploy widgets to SocialDB by single command

   cargo install --git https://github.com/FroVolod/near-social

---

Development

JSX files in this repository are NEAR Social widgets, so before you start, get familiar with these resources about platform:

• https://thewiki.near.page/PastPresentAndFutureOfNearSocial
• https://thewiki.near.page/near.social_tutorial

Making Changes to common.jsx

common.jsx contains a set of shared utilities that is often reused within the project

When you need to change it, just edit the file in the root of the project, and update the widgets with this one command

npm run build

Code Formatter

This project is following prettier to unify code formatting

If you're going to follow as well then use this command

npm run fmt

Deployment

Follow these simple instructions to deploy your widgets

1. Build project

   npm run build

2. Apply code style

   npm run fmt

3. Run deploy command and follow the interactive questionary

   near-social deploy

After successful deployment, you will see a full command that could be used to re-deploy the widgets without interactive questionary, like this

Keys are provided here just for example

near-social deploy web4_profile.testnet sign-as web4_profile.testnet network-config testnet sign-with-plaintext-private-key --signer-public-key ed25519:6jRoreKb7RXAQZBuKZs7WDzsFHHrg62GkMmkXuiWqtKm --signer-private-key ed25519:edpktx799pgw7M4z8551URER52VcENNCSZwE9f9cst4v6h5vCrQmJE send

Usage

Once deployed, follow link, like this, to open widget

Keep in mind you need to replace YOUR_ACCOUNT_ID with actual account you've deployed widgets to

https://test.near.social/#/YOUR_ACCOUNT_ID.testnet/widget/pages.Home

License

Distributed under the MIT License. See LICENSE.txt for more information.