chore: Add decomission note to frontend (#1019)

As QueryAPi is being decommissioned, this PR adds a note to the frontend
and a link to the documentation, where we can provide additional
details.

<img width="1519" alt="image"
src="https://github.com/user-attachments/assets/3eafa001-e71e-48ef-9c89-e38ea5330b64">

frontend/README.md

@@ -21,11 +21,11 @@ npm run serve:widgets:prod // for running prod enviornment
 
 **Then, Head to `dev.near.org/flags` and enter `http://127.0.0.1:3030`**
 
-> In order to tell our BOS gateway (near.org), where to load the local widgets from, we head to `near.org/flags` and enter the local path we got from running the previous command. If you have not changed any configurations then the default should be `http://127.0.0.1:3030`
+> In order to tell our BOS gateway (near.org), where to load the local widgets from, we head to `dev.near.org/flags` and enter the local path we got from running the previous command. If you have not changed any configurations then the default should be `http://127.0.0.1:3030`
 
 **Finally**, run the following to serve the local NextJS frontend
 ```bash
-npm dev
+npm run dev
 ```
 
 **Now, head to the path where the widgets are served on the BOS.**

frontend/widgets/src/QueryApi.Dashboard.jsx

@@ -2,6 +2,14 @@ const Wrapper = styled.div`
   margin-top: calc(var(--body-top-padding) * -1);
 `;
 
+const Banner = styled.div`
+  background-color: #f8d7da; /* Light red background color */
+  color: #721c24; /* Dark red text color */
+  padding: 5px; /* Padding around the text */
+  text-align: center; /* Center the text */
+  border-radius: 4px; /* Rounded corners */
+`;
+
 const Main = styled.div`
   display: block;
 `;
@@ -63,6 +71,10 @@ const selectIndexerPage = (viewName) => {
 
 return (
   <Wrapper>
+    <Banner>
+        <p>QueryApi is being decommissioned by Dec 9, 2024. New Indexer creation has been disabled. Please refer to <a href="https://docs.near.org/build/data-infrastructure/query-api/intro">documentation</a> for more details. </p>
+      </Banner>
+
     <Tabs>
       {IS_DEV && (
         <TabsButton
@@ -98,7 +110,6 @@ return (
       </TabsButton>
     </Tabs>
 
-
     <Main>
       {activeTab === 'launchpad' && IS_DEV && (
         <Section >