From 54684a76f3e49a8823f63c2b42e0c4d6bcd6e555 Mon Sep 17 00:00:00 2001
From: Andre Neves <andre@zebedee.io>
Date: Tue, 31 Jan 2023 21:30:30 -0800
Subject: [PATCH] feat: adding powered by ZBD badge if its enabled payment
 processor

---
 resources/css/style.css         | 12 ++++++++++++
 resources/index.html            | 27 +++++++++++++++++++++------
 resources/invoices.html         | 19 +++++++++++++------
 src/factories/worker-factory.ts |  1 +
 4 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/resources/css/style.css b/resources/css/style.css
index df3066e..1ec11f2 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -100,6 +100,18 @@
   transform: rotate(-45deg);
   background-color: #FFFFFF;
 }
+.description-text {
+  max-width: 400px;
+}
+.poweredbyzbd-img {
+  width: 150px;
+  transition: 0.15s all ease-in-out;
+}
+.poweredbyzbd-img:hover {
+  cursor: pointer;
+  transform: scale(1.05);
+  transition: 0.15s all ease-in-out;
+}
 
 @keyframes rotate-circle {
   0% {
diff --git a/resources/index.html b/resources/index.html
index a05bf75..d6bef0e 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -17,12 +17,20 @@
         </div>
         <div class="row">
           <div class="col text-center">
-            <p>
-              This <a href="https://github.com/nostr-protocol/nostr">Nostr</a> relay <strong>requires</strong> a one-time admission fee.
-            </p>
-            <p>
-              Provide your public key to generate an invoice.
-            </p>
+            <div class="row">
+              <div class="d-flex justify-content-center mt-2">
+                <p class="description-text">
+                  This <a href="https://github.com/nostr-protocol/nostr">Nostr</a> relay <strong>requires</strong> a one-time
+                  admission
+                  fee. <br /> Once payment is complete, you will be able to post and fetch events from this relay.
+                </p>
+              </div>
+              <div class="d-flex justify-content-center mb-1 mt-2">
+                <p class="description-text">
+                  Provide your Nostr public key to generate a Bitcoin Lightning invoice.
+                </p>
+              </div>
+            </div>
           </div>
         </div>
         <div class="row justify-content-center">
@@ -50,6 +58,13 @@
             <button id="submitBtn" class="btn btn-lg btn-warning" type="submit">Pay {{amount}} sats</button>
           </div>
         </div>
+        <div class="row">
+          <div class="d-flex justify-content-center mb-3 mt-4">
+            <a href="https://zeb.gg/nostr-zbd-quickstart" target="_blank">
+              <img class="poweredbyzbd-img" src="https://cdn.zebedee.io/an/nostr/poweredbyzbd.png" />
+            </a>
+          </div>
+        </div>
       </form>
     </main>
     <div class="modal" id="tosModal" tabindex="-1">
diff --git a/resources/invoices.html b/resources/invoices.html
index fe5cd9d..d2d29ec 100644
--- a/resources/invoices.html
+++ b/resources/invoices.html
@@ -23,13 +23,13 @@
         <div class="row">
           <div class="col text-center">
             <p class="pending">
-              Scan with your bitcoin lightning wallet
+              Scan with your preferred Bitcoin Lightning wallet:
             </p>
             <p class="paid d-none text-success">
-              You may connect to {{relay_url}}
+              You may now connect to {{relay_url}}
             </p>
             <p class="expired d-none text-secondary">
-              Your invoice expired
+              Your invoice expired. Try again!
             </p>
           </div>
         </div>
@@ -47,7 +47,7 @@
             <div class="card-body d-flex flex-row justify-content-center">
               <div>
                 <div class="spinner-grow spinner-grow-sm" role="status"></div>
-                Waiting for payment
+                Waiting for payment...
               </div>
             </div>
           </div>
@@ -61,13 +61,13 @@
                   <div class="icon-fix"></div>
                 </div>
               </div>
-              <h2 class="text-success">Payment successful</h2>
+              <h2 class="text-success">Payment successful!</h2>
               <p class="text-secondary">{{amount}} sats received</p>
             </div>
           </div>
           <div class="card expired d-none col-8 col-lg-4 justify-content-center mb-4">
             <div class="card-body text-center">
-              <h2 class="text-danger">Invoice expired</h2>
+              <h2 class="text-danger">Invoice expired!</h2>
             </div>
           </div>
         </div>
@@ -86,6 +86,13 @@
             <button class="btn btn-lg btn-primary" type="submit">Get another invoice</button>
           </div>
         </div>
+        <div class="row">
+          <div class="d-flex justify-content-center mb-3 mt-4">
+            <a href="https://zeb.gg/nostr-zbd-quickstart" target="_blank">
+              <img class="poweredbyzbd-img" src="https://cdn.zebedee.io/an/nostr/poweredbyzbd.png" />
+            </a>
+          </div>
+        </div>
       </form>
     </main>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
diff --git a/src/factories/worker-factory.ts b/src/factories/worker-factory.ts
index 086d3ae..b66b6ec 100644
--- a/src/factories/worker-factory.ts
+++ b/src/factories/worker-factory.ts
@@ -32,6 +32,7 @@ export const workerFactory = (): AppWorker => {
         /**
          * TODO: Remove 'unsafe-inline'
          */
+        'img-src': ["'self'", 'https://cdn.zebedee.io/an/nostr/'],
         'connect-src': [settings.info.relay_url as string],
         'default-src': ['"self"'],
         'script-src-attr': ["'unsafe-inline'"],