feat: ahoracrypto widget

kemuru · kemuru · commit 3667a5b48c7a · 2025-06-20T14:07:33.000+02:00
diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <script src="https://webwidget.ahoracrypto.com/webwidget.js"></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" />
diff --git a/src/components/pnk-widget.js b/src/components/pnk-widget.js
@@ -0,0 +1,22 @@
+import React, { useEffect } from "react";
+
+export default function PNKWidget({ wallet }) {
+  useEffect(() => {
+    let widget = window.AhoraCrypto.renderWebwidget({
+      containerId: 'ahora-widget',
+      language: 'en',
+      cryptoCurrency: 'PNK',
+      fiatCurrency: 'EUR',
+      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" }} />;
+}
diff --git a/src/containers/tokens.js b/src/containers/tokens.js
@@ -3,6 +3,7 @@ import React, { useCallback } from "react";
 import { drizzleReactHooks } from "@drizzle/react-plugin";
 import BuyPNKCard from "../components/buy-pnk-card";
 import OTCCard from "../components/otc-card";
+import PNKWidget from "../components/pnk-widget";
 import PNKBalanceCard from "../components/pnk-balance-card";
 import PNKMainnetExchangesCard from "../components/pnk-exchanges-card";
 import PNKXdaiExchangesCard from "../components/pnk-xdai-exchanges-card";
@@ -64,6 +65,7 @@ export default function Tokens() {
           title="Buy PNK"
         />
         <PNKBalanceCard />
+        <PNKWidget wallet={drizzleState.account} />
         <Row gutter={40}>
           <Col lg={8} md={12}>
             <BuyPNKCard />
@@ -110,6 +112,7 @@ export default function Tokens() {
           title="Buy PNK"
         />
         <PNKBalanceCard />
+        <PNKWidget wallet={drizzleState.account} />
         <Row gutter={40}>
           <Col>
             <PNKXdaiExchangesCard />
