feat: adding powered by ZBD badge if its enabled payment processor

Author: andrerfneves

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% {

resources/index.html

@@ -17,12 +17,20 @@ <h1 class="mt-4 mb-4 text-center text-nowrap">{{name}}</h1>
         </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 @@ <h1 class="mt-4 mb-4 text-center text-nowrap">{{name}}</h1>
             <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">

resources/invoices.html

@@ -23,13 +23,13 @@ <h1 class="mt-4 mb-4 text-center text-nowrap">{{name}}</h1>
         <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 @@ <h1 class="mt-4 mb-4 text-center text-nowrap">{{name}}</h1>
             <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 @@ <h1 class="mt-4 mb-4 text-center text-nowrap">{{name}}</h1>
                   <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 @@ <h2 class="text-danger">Invoice expired</h2>
             <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/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

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'"],