feat: use latest simple-boost package & add boost again feat

zap-widget/package.json

@@ -15,11 +15,12 @@
   },
   "dependencies": {
     "@getalby/lightning-tools": "^5.2.1",
+    "@lit/react": "^1.0.8",
     "@tailwindcss/vite": "^4.1.11",
     "clsx": "^2.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "simple-boost": "^2.0.2",
+    "simple-boost": "^3.0.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11"
   },

zap-widget/src/components/SearchBox.tsx

@@ -155,26 +155,22 @@ function SearchBox() {
                   </p>
                   <div className="flex flex-col gap-1">
                     <p>🤩 Wow, thanks for tipping this project!</p>
-                    {/* TODO -  Enable boosting AGAIN once the limitation with simple-boost is fixed. addressed here - (https://github.com/getAlby/simple-boost/issues/8) */}
-                    {/* <p>Fancy to add another one on top? 😏</p> */}
+                    <p>Fancy to add another one on top? 😏</p>
                   </div>
                 </div>
               ) : (
                 <p>🎉 Hurray! You can tip this package. Be generous 😏</p>
               )}
-
-              {/* TODO -  Enable boosting AGAIN once the limitation with simple-boost is fixed. addressed here - (https://github.com/getAlby/simple-boost/issues/8) */}
               <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
-                {!amountSats &&
-                  BOOST_AMOUNTS.map((amount) => (
-                    <div key={`boost-${amount}`}>
-                      <SimpleBoostWrapper
-                        address={packageInfo.details.lnAddress}
-                        amount={amount}
-                        className="w-full text-center text-black bg-white rounded-full p-2 font-bold cursor-pointer"
-                      />
-                    </div>
-                  ))}
+                {BOOST_AMOUNTS.map((amount) => (
+                  <div key={`boost-${amount}`}>
+                    <SimpleBoostWrapper
+                      address={packageInfo.details.lnAddress}
+                      amount={amount}
+                      className="w-full text-center text-black bg-white rounded-full p-2 font-bold cursor-pointer"
+                    />
+                  </div>
+                ))}
               </div>
             </div>
           )}

zap-widget/src/components/SimpleBoostWrapper.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useRef } from "react";
-import "simple-boost";
+import { SimpleBoostButton } from "simple-boost/react";
 import { useClient } from "../context";
 
 const SimpleBoostWrapper = ({
@@ -13,41 +12,22 @@ const SimpleBoostWrapper = ({
   currency?: string;
   className?: string;
 }) => {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
   const { setInvoice } = useClient();
-  useEffect(() => {
-    let boostEl: Element | null = null;
-    const handleSuccess = (e: Event) => {
-      const customEvent = e as CustomEvent<{ pr: string }>;
-      setInvoice(customEvent.detail.pr);
-    };
-
-    import("simple-boost").then(() => {
-      boostEl = wrapperRef.current?.querySelector("simple-boost");
-      if (boostEl) {
-        boostEl.addEventListener("success", handleSuccess);
-      }
-    });
-
-    return () => {
-      if (boostEl) {
-        boostEl.removeEventListener("success", handleSuccess);
-      }
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const handleSuccess = (e: Event) => {
+    const customEvent = e as CustomEvent<{ pr: string }>;
+    setInvoice(customEvent.detail.pr);
+  };
 
-  // TODO: remove  dangerouslySetInnerHTML Delay rendering until custom element is ready and you're in the browser
-  // Do this once (https://github.com/getAlby/simple-boost/issues/8) is fixed
   return (
-    <div
-      ref={wrapperRef}
-      dangerouslySetInnerHTML={{
-        __html: `<simple-boost address="${address}" amount="${amount}" currency="${currency}" class="${className}">$${amount}</simple-boost>`,
-      }}
-    />
+    <SimpleBoostButton
+      address={address}
+      amount={amount}
+      currency={currency}
+      onSuccess={(e) => handleSuccess(e)}
+      className={className}
+    >
+      {amount}
+    </SimpleBoostButton>
   );
 };