chore: revert iframe

kemuru · kemuru · commit 3139f74be88a · 2025-06-25T02:42:18.000+02:00
diff --git a/public/ahora-crypto-widget.html b/public/ahora-crypto-widget.html
diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <script src="https://cdn.kleros.link/ipfs/Qmbpgr39VKCvfxSdq2gRNRCt2K6Ju6Uu1AsGFKeSX2CoFc"></script>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@@ -60,4 +61,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-</html>
+</html>
diff --git a/src/components/pnk-widget.js b/src/components/pnk-widget.js
@@ -1,17 +1,22 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 export default function PNKWidget({ wallet }) {
-  const src = `/ahora-crypto-widget.html?wallet=${encodeURIComponent(wallet)}`;
-  return (
-    <div style={{ display: "flex", justifyContent: "center" }}>
-      <iframe
-        src={src}
-        width="416"
-        height="532"
-        style={{  border: 0 }}
-        sandbox="allow-scripts"
-        title="PNK Widget"
-      />
-    </div>
-  );
-}
+  useEffect(() => {
+    let widget = window.AhoraCrypto.renderWebwidget({
+      containerId: 'ahora-widget',
+      language: 'en',
+      cryptoCurrency: 'PNK',
+      fiatCurrency: 'USD',
+      borderRadius: 24,
+      borderWithShadow: true,
+      theme: 'light',
+      referral: 'kleros-court-v1',
+    });
+
+    widget.onReady(() => widget.setWalletAddress(wallet));
+
+    return () => widget?.destroy?.();
+  }, [wallet]);
+
+  return <div id="ahora-widget" style={{ maxWidth: 416, margin: "0 auto", marginBottom: "28px" }} />;
+}
