feat: Web Monetization playground (#466)

* Web Monetization Playground

* Update site title and description

* Fix stylings

* Remove unused fonts

* change styling on playground page and add to footer

* change action button border color

* Move to `/play`; do not validate wallet address in the playground

* Remove log

* Apply suggestions from code review

Co-authored-by: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>

* Use class instead of attr

* Fix image size

* Add notice if browser does not support WM

* Improve Web Monetization detection

* use details instead of toolitp; format code

Co-authored-by: Sid Vishnoi <sidvishnoi@users.noreply.github.com>

---------

Co-authored-by: Chen Hui Jing <1461498+huijing@users.noreply.github.com>
Co-authored-by: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Co-authored-by: Sid Vishnoi <sidvishnoi@users.noreply.github.com>

Author: 3 people

public/img/wm-logo--full-animated.svg

@@ -4,6 +4,7 @@
   <div class="contentWrapperLg">
     <div class="linkWrapper">
       <ul>
+        <li><a href="/play">Web Monetization Playground</a></li>
         <li><a href="/link-tag">Link Element Generator</a></li>
         <li><a href="/prob-revshare">Probabilistic Revshare Generator</a></li>
       </ul>

src/components/pages/Footer.astro

@@ -1,2 +1,20 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+declare global {
+  interface MonetizationEvent extends Event {
+    readonly paymentPointer: string
+    readonly incomingPayment: string
+    readonly amountSent: PaymentCurrencyAmount
+  }
+
+  interface ElementEventMap {
+    monetization: MonetizationEvent
+  }
+
+  interface Window {
+    MonetizationEvent: MonetizationEvent
+  }
+}
+
+export {}