@efiz.near [Posted on DevHub](https://near.social/#/devgovgigs.near/widget/Post?id=1097) ## Idea: Custom Notifications on BOS Last week, @marior.near released [Protocol Pawns](https://near.social/chess-game.near/widget/ChessGameLobby) -- fully on chain Chess powered by the BOS. This new chess game features a custom notification when opponents challenge you to play. In order to create a new notification on near.social's [notification feed](https://near.social/mob.near/widget/NotificationFeed), @marior.near needed to request a modification in @mob.near's [Notification Item widget](https://near.social/mob.near/widget/WidgetSource?src=mob.near/widget/Notification.Item) to add a new case for notification with type "chess-game": ```javascript value.type === "chess-game" ? ( <Widget src="chess-game.near/widget/Notification.Item.ChessGame@98857466" props={props} /> ) ``` And now there is support for Protocol Pawns notifications on near.social! But [near.org](https://near.org) is a different story. In order for the notification to show up on near.org's [NotificationsPage](https://near.org/near/widget/ComponentDetailsPage?src=near/widget/NotificationsPage&tab=source), we either need a modification to near's [Notification](https://near.org/near/widget/ComponentDetailsPage?src=near/widget/Notification) widget, or we need the notification type to equal "custom". ```javascript const actionable = type === "like" || type === "comment" || type === "mention" || type === "custom"; let notificationMessage = { follow: "Followed you", unfollow: "Unfollowed you", poke: "Poked you", like: isPost ? "Liked your post" : isComment ? "Liked your comment" : "", comment: "Commented on your post", mention: "Mentioned you", custom: value.message ?? "", }; ``` And in this case, only a custom string message and a link to view the notification is available for integration. On near.social, the chess game notification has a button to "Accept" a challenge, which is a direct contract call rather than a link. This challenge has prompted discussion on adding a [notification standard](https://github.com/NearSocial/standards/issues/20), which seems to have been suggested in April as well, via this [pull request](https://github.com/NearSocial/standards/pull/19). ## How Notifications Work To create a notification within a widget, we can draw inspiration from: * [mob.near/widget/LikeButton](https://near.social/mob.near/widget/WidgetSource?src=mob.near/widget/LikeButton) * [nearui.near/widget/Social.FollowButton](https://near.social/mob.near/widget/WidgetSource?src=nearui.near/widget/Social.FollowButton) * [hack.near/widget/StarButton](https://near.social/mob.near/widget/WidgetSource?src=hack.near/widget/StarButton) Creating a notification means doing a social set like: ```javascript Social.set({ graph: { follow: { [toBeFollowed]: isFollowing ? null : "" } }, index: { graph: JSON.stringify({ key: "follow", value: { type, accountId: toBeFollowed, }, }), notify: JSON.stringify({ key: toBeFollowed, value: { type, }, }), }, }); ``` Then when we read them to a feed, we Social.index like so: ```javascript const notifications = Social.index("notify", accountId, { limit: 10, order: "desc", subscribe: true, }); ``` As you can see, the key is the account to notify, and then the value holds the type. If we were to do a custom notification following near.org's standards, we would describe a message and params too: ```javascript Social.set({ index: { notify: JSON.stringify({ key: accountId, value: { type: "custom", message: "Custom notified you" widget: "gagdiez.near/widget/Greetings" params: { "name": accountId} }, }), }, }); ``` This would show a notification with message "{{accountId}} Custom notified you", then a link https://near.org/gagdiez.near/widget/Greetings?name=bob.near, which when clicked would render @gagdiez.near's greetings widget with message "Hello bob.near. Have a great day". # Discuss Below * How can we support custom notifications across gateways? * Ask questions, leave comments, reply with a solution * Share other examples of notifications in the ecosystem.