Add page not found banner (#971)

* feat: page not found all instances + proposal id prop missing page.Proposal

* missing id check rfp page

instances/devhub.near/widget/app.jsx

@@ -234,8 +234,7 @@ function Page() {
       );
     }
     default: {
-      // TODO: 404 page
-      return <p>404</p>;
+      return <Widget src={"${REPL_DEVHUB}/widget/devhub.page.notfound"} />;
     }
   }
 }

instances/devhub.near/widget/devhub/entity/proposal/Proposal.jsx

@@ -263,6 +263,16 @@ const LinkProfile = ({ account, children }) => {
 const stepsArray = [1, 2, 3, 4, 5];
 
 const { id, timestamp } = props;
+
+if (id === undefined) {
+  return (
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.page.notfound`}
+      props={{ missing: "proposal id" }}
+    />
+  );
+}
+
 const proposal = Near.view("${REPL_DEVHUB_CONTRACT}", "get_proposal", {
   proposal_id: parseInt(id),
 });

instances/devhub.near/widget/devhub/page/notfound.jsx

@@ -0,0 +1,44 @@
+const { missing } = props;
+
+const BannerWrapper = styled.div`
+  margin-top: 3rem;
+  background-color: #ffd2d2;
+  .text-sm {
+    font-size: 13px;
+  }
+`;
+
+return (
+  <div className="container-xl gap-3">
+    <Widget src={`${REPL_DEVHUB}/widget/devhub.components.island.banner`} />
+    <BannerWrapper className="d-flex gap-3 align-items-center mb-4 p-3 rounded-3">
+      <div>
+        <i class="bi bi-exclamation-triangle-fill"></i>
+      </div>
+      <div>
+        <div className="fw-bold">Page not found! </div>
+        <div className="text-sm">
+          Please visit the{" "}
+          <a
+            href="?page=home"
+            className="text-decoration-underline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Home Page
+          </a>
+          .
+          {missing ? (
+            <span>The {missing} prop is missing from the url</span>
+          ) : (
+            <span>
+              We searched high and low but couldn't found what you're looking
+              for.{" "}
+            </span>
+          )}
+          .
+        </div>
+      </div>
+    </BannerWrapper>
+  </div>
+);

instances/events-committee.near/widget/app.jsx

@@ -81,12 +81,7 @@ function Page() {
       );
     }
     default: {
-      return (
-        <Widget
-          src={"${REPL_EVENTS}/widget/devhub.page.proposals"}
-          props={passProps}
-        />
-      );
+      return <Widget src={"${REPL_DEVHUB}/widget/devhub.page.notfound"} />;
     }
   }
 }

instances/events-committee.near/widget/devhub/entity/proposal/Proposal.jsx

@@ -260,6 +260,16 @@ const LinkProfile = ({ account, children }) => {
 const stepsArray = [1, 2, 3, 4, 5];
 
 const { id, timestamp } = props;
+
+if (id === undefined) {
+  return (
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.page.notfound`}
+      props={{ missing: "proposal id" }}
+    />
+  );
+}
+
 const proposal = Near.view("${REPL_EVENTS_CONTRACT}", "get_proposal", {
   proposal_id: parseInt(id),
 });

instances/infrastructure-committee.near/widget/app.jsx

@@ -105,8 +105,7 @@ function Page() {
       );
     }
     default: {
-      // TODO: 404 page
-      return <p>404</p>;
+      return <Widget src={"${REPL_DEVHUB}/widget/devhub.page.notfound"} />;
     }
   }
 }

instances/infrastructure-committee.near/widget/components/proposals/Proposal.jsx

@@ -259,6 +259,16 @@ const LinkProfile = ({ account, children }) => {
 const stepsArray = [1, 2, 3, 4, 5];
 
 const { id, timestamp } = props;
+
+if (id === undefined) {
+  return (
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.page.notfound`}
+      props={{ missing: "proposal id" }}
+    />
+  );
+}
+
 const proposal = Near.view(
   "${REPL_INFRASTRUCTURE_COMMITTEE_CONTRACT}",
   "get_proposal",

instances/infrastructure-committee.near/widget/components/rfps/Rfp.jsx

@@ -34,6 +34,15 @@ const accountId = context.accountId;
 
 const { id, timestamp } = props;
 
+if (id === undefined) {
+  return (
+    <Widget
+      src={`${REPL_DEVHUB}/widget/devhub.page.notfound`}
+      props={{ missing: "rfp id" }}
+    />
+  );
+}
+
 const Container = styled.div`
   .full-width-div {
     width: 100vw;