From 34e792fbc5ef065c2d2463254327725581e2d45a Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Thu, 9 May 2024 07:56:42 -0700
Subject: [PATCH 1/5] Useless fallback

---
 apps/builddao/widget/components/Navbar.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/builddao/widget/components/Navbar.jsx b/apps/builddao/widget/components/Navbar.jsx
index af9934d8..7f84a7d6 100644
--- a/apps/builddao/widget/components/Navbar.jsx
+++ b/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: () => {},
 };

From 8d3263a71438f3f8744a28e0ca1d497596c173cd Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Thu, 9 May 2024 07:52:45 -0700
Subject: [PATCH 2/5] Add notifications page

---
 apps/builddao/widget/TrialAccountBanner.jsx |  2 +-
 apps/builddao/widget/app.jsx                | 10 ++-
 apps/builddao/widget/app/view.jsx           |  1 +
 apps/builddao/widget/components/CSS.jsx     |  4 +
 apps/builddao/widget/components/Navbar.jsx  | 98 +++++++++++++++++++--
 apps/builddao/widget/login.jsx              |  2 +-
 apps/builddao/widget/logout.jsx             |  2 +-
 apps/builddao/widget/page/notifications.jsx | 63 +++++++++++++
 8 files changed, 170 insertions(+), 12 deletions(-)
 create mode 100644 apps/builddao/widget/page/notifications.jsx

diff --git a/apps/builddao/widget/TrialAccountBanner.jsx b/apps/builddao/widget/TrialAccountBanner.jsx
index 92c42502..9d8faaf0 100644
--- a/apps/builddao/widget/TrialAccountBanner.jsx
+++ b/apps/builddao/widget/TrialAccountBanner.jsx
@@ -20,7 +20,7 @@ const Container = styled.div`
 
   img {
     width: 100%;
-    max-height: 100vh;
+    min-height: 100vh;
     object-fit: cover;
     object-position: center top;
     position: absolute;
diff --git a/apps/builddao/widget/app.jsx b/apps/builddao/widget/app.jsx
index 770c3d92..36f86cc3 100644
--- a/apps/builddao/widget/app.jsx
+++ b/apps/builddao/widget/app.jsx
@@ -9,7 +9,7 @@ const config = {
     "--secondary-color": "white",
     background: "var(--main-color)",
     color: "var(--secondary-color)",
-    height: "100vh",
+    height: "100%",
   },
   layout: {
     src: "${alias_devs}/widget/Layout",
@@ -100,6 +100,14 @@ const config = {
         },
         hide: true,
       },
+      notifications: {
+        path: "${config_account}/widget/page.notifications",
+        blockHeight: "final",
+        init: {
+          name: "Notifications",
+        },
+        hide: true,
+      },
     },
   },
 };
diff --git a/apps/builddao/widget/app/view.jsx b/apps/builddao/widget/app/view.jsx
index 4f532ee3..4217972c 100644
--- a/apps/builddao/widget/app/view.jsx
+++ b/apps/builddao/widget/app/view.jsx
@@ -82,6 +82,7 @@ const Container = styled.div`
 const Content = styled.div`
   width: 100%;
   height: 100%;
+  background: black;
 `;
 
 // const Template = config.Template ?? (({children}) => <>{children}</>);
diff --git a/apps/builddao/widget/components/CSS.jsx b/apps/builddao/widget/components/CSS.jsx
index 881a3f32..cfe88922 100644
--- a/apps/builddao/widget/components/CSS.jsx
+++ b/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 };
diff --git a/apps/builddao/widget/components/Navbar.jsx b/apps/builddao/widget/components/Navbar.jsx
index 7f84a7d6..8645d211 100644
--- a/apps/builddao/widget/components/Navbar.jsx
+++ b/apps/builddao/widget/components/Navbar.jsx
@@ -204,6 +204,25 @@ const MobileContent = styled.div`
   justify-content: space-between;
 `;
 
+const getNotificationCount = () => {
+  const notificationFeedSrc = "mob.near/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);
@@ -259,6 +278,37 @@ function Navbar(props) {
           </NavLinks>
         </Left>
         <Right>
+          {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>
+          )}
           <div
             style={{
               flex: 1,
@@ -347,14 +397,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>
 
diff --git a/apps/builddao/widget/login.jsx b/apps/builddao/widget/login.jsx
index 39f55bd1..7490f4bc 100644
--- a/apps/builddao/widget/login.jsx
+++ b/apps/builddao/widget/login.jsx
@@ -11,7 +11,7 @@ const LoginContainer = styled.div`
 
   img {
     width: 100%;
-    max-height: 100vh;
+    min-height: 100vh;
     object-fit: cover;
     object-position: center top;
     position: absolute;
diff --git a/apps/builddao/widget/logout.jsx b/apps/builddao/widget/logout.jsx
index 06f4beea..4c0117d6 100644
--- a/apps/builddao/widget/logout.jsx
+++ b/apps/builddao/widget/logout.jsx
@@ -11,7 +11,7 @@ const LogoutContainer = styled.div`
 
   img {
     width: 100%;
-    max-height: 100vh;
+    min-height: 100vh;
     object-fit: cover;
     object-position: center top;
     position: absolute;
diff --git a/apps/builddao/widget/page/notifications.jsx b/apps/builddao/widget/page/notifications.jsx
new file mode 100644
index 00000000..95ae8328
--- /dev/null
+++ b/apps/builddao/widget/page/notifications.jsx
@@ -0,0 +1,63 @@
+const accountId = context.accountId;
+
+if (!accountId) {
+  return "Sign in with NEAR Wallet";
+}
+
+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="mob.near/widget/Notification.Item"
+        key={i}
+        props={item}
+      />
+    </StyledNotification>
+  );
+};
+
+return (
+  <div className="placeholder-glow container-xl mt-3">
+    <Widget
+      src="mob.near/widget/FilteredIndexFeed"
+      props={{ index, renderItem }}
+    />
+  </div>
+);

From 735d52fb070220852e341cf2af1c677014b5701b Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Mon, 13 May 2024 08:42:14 -0700
Subject: [PATCH 3/5] Resolve comments

---
 apps/builddao/widget/TrialAccountBanner.jsx | 2 +-
 apps/builddao/widget/app.jsx                | 2 +-
 apps/builddao/widget/app/view.jsx           | 2 +-
 apps/builddao/widget/components/Navbar.jsx  | 2 +-
 apps/builddao/widget/login.jsx              | 2 +-
 apps/builddao/widget/logout.jsx             | 2 +-
 apps/builddao/widget/page/notifications.jsx | 4 ++--
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/builddao/widget/TrialAccountBanner.jsx b/apps/builddao/widget/TrialAccountBanner.jsx
index 9d8faaf0..92c42502 100644
--- a/apps/builddao/widget/TrialAccountBanner.jsx
+++ b/apps/builddao/widget/TrialAccountBanner.jsx
@@ -20,7 +20,7 @@ const Container = styled.div`
 
   img {
     width: 100%;
-    min-height: 100vh;
+    max-height: 100vh;
     object-fit: cover;
     object-position: center top;
     position: absolute;
diff --git a/apps/builddao/widget/app.jsx b/apps/builddao/widget/app.jsx
index 36f86cc3..8cccc8df 100644
--- a/apps/builddao/widget/app.jsx
+++ b/apps/builddao/widget/app.jsx
@@ -9,7 +9,7 @@ const config = {
     "--secondary-color": "white",
     background: "var(--main-color)",
     color: "var(--secondary-color)",
-    height: "100%",
+    height: "100vh",
   },
   layout: {
     src: "${alias_devs}/widget/Layout",
diff --git a/apps/builddao/widget/app/view.jsx b/apps/builddao/widget/app/view.jsx
index 4217972c..ef0262c3 100644
--- a/apps/builddao/widget/app/view.jsx
+++ b/apps/builddao/widget/app/view.jsx
@@ -82,7 +82,7 @@ const Container = styled.div`
 const Content = styled.div`
   width: 100%;
   height: 100%;
-  background: black;
+  background: var(--bg-1, #000);
 `;
 
 // const Template = config.Template ?? (({children}) => <>{children}</>);
diff --git a/apps/builddao/widget/components/Navbar.jsx b/apps/builddao/widget/components/Navbar.jsx
index 8645d211..2979aa67 100644
--- a/apps/builddao/widget/components/Navbar.jsx
+++ b/apps/builddao/widget/components/Navbar.jsx
@@ -205,7 +205,7 @@ const MobileContent = styled.div`
 `;
 
 const getNotificationCount = () => {
-  const notificationFeedSrc = "mob.near/widget/NotificationFeed";
+  const notificationFeedSrc = "${alias_mob}/widget/NotificationFeed";
 
   const lastBlockHeight = Storage.get("lastBlockHeight", notificationFeedSrc);
   if (lastBlockHeight === null) {
diff --git a/apps/builddao/widget/login.jsx b/apps/builddao/widget/login.jsx
index 7490f4bc..39f55bd1 100644
--- a/apps/builddao/widget/login.jsx
+++ b/apps/builddao/widget/login.jsx
@@ -11,7 +11,7 @@ const LoginContainer = styled.div`
 
   img {
     width: 100%;
-    min-height: 100vh;
+    max-height: 100vh;
     object-fit: cover;
     object-position: center top;
     position: absolute;
diff --git a/apps/builddao/widget/logout.jsx b/apps/builddao/widget/logout.jsx
index 4c0117d6..06f4beea 100644
--- a/apps/builddao/widget/logout.jsx
+++ b/apps/builddao/widget/logout.jsx
@@ -11,7 +11,7 @@ const LogoutContainer = styled.div`
 
   img {
     width: 100%;
-    min-height: 100vh;
+    max-height: 100vh;
     object-fit: cover;
     object-position: center top;
     position: absolute;
diff --git a/apps/builddao/widget/page/notifications.jsx b/apps/builddao/widget/page/notifications.jsx
index 95ae8328..9a383247 100644
--- a/apps/builddao/widget/page/notifications.jsx
+++ b/apps/builddao/widget/page/notifications.jsx
@@ -45,7 +45,7 @@ const renderItem = (item, i) => {
             <div className="placeholder" style={{ height: "48px" }} />
           </div>
         }
-        src="mob.near/widget/Notification.Item"
+        src="${alias_mob}/widget/Notification.Item"
         key={i}
         props={item}
       />
@@ -56,7 +56,7 @@ const renderItem = (item, i) => {
 return (
   <div className="placeholder-glow container-xl mt-3">
     <Widget
-      src="mob.near/widget/FilteredIndexFeed"
+      src="${alias_mob}/widget/FilteredIndexFeed"
       props={{ index, renderItem }}
     />
   </div>

From 27cda8d0959ef23179b1c7b1a904f1d9c393af05 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Mon, 13 May 2024 08:45:49 -0700
Subject: [PATCH 4/5] fmt

---
 apps/builddao/widget/components/Navbar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/builddao/widget/components/Navbar.jsx b/apps/builddao/widget/components/Navbar.jsx
index 2979aa67..d7f1d129 100644
--- a/apps/builddao/widget/components/Navbar.jsx
+++ b/apps/builddao/widget/components/Navbar.jsx
@@ -215,7 +215,7 @@ const getNotificationCount = () => {
   const notifications = Social.index("notify", context.accountId, {
     order: "asc",
     from: (lastBlockHeight ?? 0) + 1,
-    // subscribe: true,
+    subscribe: true,
   });
 
   return notifications.length;

From e008d4d1ee55bc3884af33818a06376aa29baff7 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Mon, 13 May 2024 13:43:25 -0700
Subject: [PATCH 5/5] Prompt for login on notifications page

---
 apps/builddao/widget/page/notifications.jsx | 30 ++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/apps/builddao/widget/page/notifications.jsx b/apps/builddao/widget/page/notifications.jsx
index 9a383247..fd2681ce 100644
--- a/apps/builddao/widget/page/notifications.jsx
+++ b/apps/builddao/widget/page/notifications.jsx
@@ -1,7 +1,35 @@
+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 "Sign in with NEAR Wallet";
+  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 = {