From ca3ca4557e7323588f40cccbc4c00d656f95eedc Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Tue, 7 Jun 2022 22:52:08 -0400
Subject: [PATCH] Add note on api limits

---
 frontend/src/app/docs/api-docs/api-docs.component.html | 3 ++-
 frontend/src/app/docs/api-docs/api-docs.component.scss | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/docs/api-docs/api-docs.component.html b/frontend/src/app/docs/api-docs/api-docs.component.html
index d25a60653..91d10a72f 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.html
+++ b/frontend/src/app/docs/api-docs/api-docs.component.html
@@ -34,7 +34,8 @@
 
       <div class="doc-content">
 
-        <p class="hide-on-mobile no-bottom-space">Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API service</ng-container>.</p>
+        <p class="api-note">Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API service</ng-container>.</p>
+        <p class="api-note no-bottom-space">Note that we enforce rate limits. If you exceed these limits, you will get a polite error encouraging you to run your own Mempool instance.     If you repeatedly exceed the limits, you may be banned from accessing the service altogether.</p>
 
         <div class="doc-item-container" *ngFor="let item of restDocs">
           <h3 *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )">{{ item.title }}</h3>
diff --git a/frontend/src/app/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss
index 4841601ab..1729a7dbd 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs.component.scss
@@ -199,6 +199,10 @@ h3 {
 
 @media (max-width: 992px) {
 
+  h3 {
+    margin: 1.5rem 0 0 0;
+  }
+
   .hide-on-mobile {
     display: none;
   }
@@ -237,6 +241,10 @@ h3 {
     opacity: 0;
     transition: 0.5s opacity ease;
   }
+
+  .api-note {
+    font-size: 0.85rem;
+  }
 }
 
 @media (min-width: 992px) {