Notifications page

apps/builddao/widget/app.jsx

@@ -100,6 +100,14 @@ const config = {
         },
         hide: true,
       },
+      notifications: {
+        path: "${config_account}/widget/page.notifications",
+        blockHeight: "final",
+        init: {
+          name: "Notifications",
+        },
+        hide: true,
+      },
     },
   },
 };

apps/builddao/widget/app/view.jsx

@@ -82,6 +82,7 @@ const Container = styled.div`
 const Content = styled.div`
   width: 100%;
   height: 100%;
+  background: var(--bg-1, #000);
 `;
 
 // const Template = config.Template ?? (({children}) => <>{children}</>);

apps/builddao/widget/components/CSS.jsx

@@ -198,6 +198,10 @@ const CSS = styled.div`
     background: #007bff;
     color: #fff;
   }
+
+  .placeholder-glow {
+    background: var(--bg-1, black);
+  }
 `;
 
 return { CSS };

apps/builddao/widget/components/Navbar.jsx

@@ -2,10 +2,6 @@ const { Button } = VM.require("${config_account}/widget/components") || {
   Button: () => <></>,
 };
 
-if (!Button) {
-  return "";
-}
-
 const { href } = VM.require("${config_account}/widget/lib.url") || {
   href: () => {},
 };
@@ -221,6 +217,25 @@ const MobileContent = styled.div`
   justify-content: space-between;
 `;
 
+const getNotificationCount = () => {
+  const notificationFeedSrc = "${alias_mob}/widget/NotificationFeed";
+
+  const lastBlockHeight = Storage.get("lastBlockHeight", notificationFeedSrc);
+  if (lastBlockHeight === null) {
+    return "";
+  }
+
+  const notifications = Social.index("notify", context.accountId, {
+    order: "asc",
+    from: (lastBlockHeight ?? 0) + 1,
+    subscribe: true,
+  });
+
+  return notifications.length;
+};
+
+const unreadNotifications = getNotificationCount();
+
 function Navbar(props) {
   const { page, routes } = props;
   const [dropdown, setDropdown] = useState(false);
@@ -290,69 +305,116 @@ function Navbar(props) {
           </NavLinks>
         </Left>
         <Right>
-          <StyledDropdown className="dropdown ">
-            <div className="d-flex justify-content-end align-items-center gap-3">
-              <button
-                className="dropdown-toggle"
-                type="button"
-                id="dropdownMenu2222"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-              >
-                <i style={{ color: "white" }} className="bi bi-three-dots"></i>
-              </button>
-              <ul className="dropdown-menu" aria-labelledby="dropdownMenu2222">
-                <li>
-                  <Link
-                    style={{ textDecoration: "none" }}
-                    href={href({
-                      widgetSrc: "${config_account}/widget/app",
-                      params: {
-                        page: "inspect",
-                        widgetPath: routes[page].path,
-                      },
-                    })}
-                    type="icon"
-                    variant="outline"
-                    className="d-flex align-tiems-center gap-2"
-                  >
-                    <i className="bi bi-code"></i>
-                    <span>View source</span>
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    style={{ textDecoration: "none" }}
-                    href={`/edit/${routes[page].path}`}
-                    type="icon"
-                    variant="outline"
-                    className="d-flex align-items-center gap-2"
-                  >
-                    <i className="bi bi-pencil"></i>
-                    <span>Edit code</span>
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </StyledDropdown>
-          {context.accountId ? (
-            <Widget
-              src="${config_account}/widget/components.buttons.UserDropdown"
-              loading=""
-              props={props}
-            />
-          ) : (
+          {context.accountId && (
             <Button
-              variant="primary"
-              linkClassName="d-flex"
-              href="${alias_gateway_url}/join"
-              noLink={true}
-              className="w-100"
+              className="rounded-3 position-relative"
+              type="icon"
+              href={href({
+                widgetSrc: "${config_account}/widget/app",
+                params: {
+                  page: "notifications",
+                },
+              })}
             >
-              Sign In
+              <i className="bi bi-bell"></i>
+              {unreadNotifications > 0 && (
+                <div
+                  className="position-absolute d-flex align-items-center justify-content-center text-white fw-bold"
+                  style={{
+                    top: 0,
+                    background: "red",
+                    borderRadius: "100%",
+                    right: 0,
+                    width: 18,
+                    height: 18,
+                    fontSize: 10,
+                    margin: -4,
+                  }}
+                >
+                  {unreadNotifications}
+                </div>
+              )}
             </Button>
           )}
-          <TestBtn />
+          <div
+            style={{
+              flex: 1,
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "center",
+              gap: "0.5rem",
+            }}
+          >
+            <StyledDropdown className="dropdown ">
+              <div className="d-flex justify-content-end align-items-center gap-3">
+                <button
+                  className="dropdown-toggle"
+                  type="button"
+                  id="dropdownMenu2222"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                >
+                  <i
+                    style={{ color: "white" }}
+                    className="bi bi-three-dots"
+                  ></i>
+                </button>
+                <ul
+                  className="dropdown-menu"
+                  aria-labelledby="dropdownMenu2222"
+                >
+                  <li>
+                    <Link
+                      style={{ textDecoration: "none" }}
+                      href={href({
+                        widgetSrc: "${config_account}/widget/app",
+                        params: {
+                          page: "inspect",
+                          widgetPath: routes[page].path,
+                        },
+                      })}
+                      type="icon"
+                      variant="outline"
+                      className="d-flex align-tiems-center gap-2"
+                    >
+                      <i className="bi bi-code"></i>
+                      <span>View source</span>
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      style={{ textDecoration: "none" }}
+                      href={`/edit/${routes[page].path}`}
+                      type="icon"
+                      variant="outline"
+                      className="d-flex align-items-center gap-2"
+                    >
+                      <i className="bi bi-pencil"></i>
+                      <span>Edit code</span>
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+            </StyledDropdown>
+            {context.accountId ? (
+              <Widget
+                src="${config_account}/widget/components.buttons.UserDropdown"
+                loading=""
+                props={props}
+              />
+            ) : (
+              <Button
+                variant="primary"
+                linkClassName="d-flex"
+                href="${alias_gateway_url}/join"
+                noLink={true}
+                className="w-100"
+              >
+                Sign In
+              </Button>
+            )}
+            <TestBtn />
+          </div>
         </Right>
         <MobileNavigation>
           <Link
@@ -371,14 +433,46 @@ function Navbar(props) {
               alt="BuildDAO"
             />
           </Link>
-          <Button
-            type="icon"
-            variant="outline"
-            className="rounded-2 border-0"
-            onClick={toggleDropdown}
-          >
-            <i style={{ fontSize: 24 }} className="bi bi-list"></i>
-          </Button>
+          <div className="d-flex align-items-center gap-2">
+            {context.accountId && (
+              <Button
+                className="rounded-3 position-relative"
+                type="icon"
+                href={href({
+                  widgetSrc: "${config_account}/widget/app",
+                  params: {
+                    page: "notifications",
+                  },
+                })}
+              >
+                <i className="bi bi-bell"></i>
+                {unreadNotifications > 0 && (
+                  <div
+                    className="position-absolute d-flex align-items-center justify-content-center text-white fw-bold"
+                    style={{
+                      top: 0,
+                      background: "red",
+                      borderRadius: "100%",
+                      right: 0,
+                      width: 18,
+                      height: 18,
+                      fontSize: 10,
+                      margin: -4,
+                    }}
+                  >
+                    {unreadNotifications}
+                  </div>
+                )}
+              </Button>
+            )}
+            <Button
+              type="icon"
+              className="rounded-2 border-0"
+              onClick={toggleDropdown}
+            >
+              <i style={{ fontSize: 24 }} className="bi bi-list"></i>
+            </Button>
+          </div>
         </MobileNavigation>
       </MainContent>
 

apps/builddao/widget/page/notifications.jsx

@@ -0,0 +1,91 @@
+const { Button } = VM.require("buildhub.near/widget/components") || {
+  Button: () => <></>,
+};
+
+const accountId = context.accountId;
+
+const LoginContainer = styled.div`
+  background-color: #23242b;
+  color: #fff;
+
+  width: 100%;
+  height: 16rem;
+  border-radius: 1rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+
+  margin-bottom: 1rem;
+`;
+
+if (!accountId) {
+  return (
+    <LoginContainer>
+      <p>Please login in order to see notifications.</p>
+      <a href={"${alias_gateway_url}/join"} style={{ textDecoration: "none" }}>
+        <Button variant="primary">Login</Button>
+      </a>
+    </LoginContainer>
+  );
+}
+
+const index = {
+  action: "notify",
+  key: accountId,
+  options: {
+    limit: 50,
+    order: "desc",
+    subscribe: true,
+  },
+  cacheOptions: {
+    ignoreCache: true,
+  },
+};
+
+const StyledNotification = styled.div`
+  .me-2.text-truncate,
+  .text-muted {
+    color: white !important;
+  }
+
+  .btn.rounded-5 {
+    border-radius: 8px !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    font-family: "Poppins", sans-serif !important;
+    font-weight: 500 !important;
+    color: white !important;
+    background: black !important;
+  }
+`;
+
+const renderItem = (item, i) => {
+  if (i === 0) {
+    Storage.set("lastBlockHeight", item.blockHeight);
+  }
+  return (
+    <StyledNotification>
+      <Widget
+        loading={
+          <div className="mb-3">
+            <div className="placeholder" style={{ height: "48px" }} />
+          </div>
+        }
+        src="${alias_mob}/widget/Notification.Item"
+        key={i}
+        props={item}
+      />
+    </StyledNotification>
+  );
+};
+
+return (
+  <div className="placeholder-glow container-xl mt-3">
+    <Widget
+      src="${alias_mob}/widget/FilteredIndexFeed"
+      props={{ index, renderItem }}
+    />
+  </div>
+);