From 3667a5b48c7a63d197a88872b683518680081b6d Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Fri, 20 Jun 2025 14:07:33 +0200 Subject: [PATCH 1/8] feat: ahoracrypto widget --- public/index.html | 1 + src/components/pnk-widget.js | 22 ++++++++++++++++++++++ src/containers/tokens.js | 3 +++ 3 files changed, 26 insertions(+) create mode 100644 src/components/pnk-widget.js diff --git a/public/index.html b/public/index.html index 49c2a328..12db0819 100644 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,7 @@ + diff --git a/src/components/pnk-widget.js b/src/components/pnk-widget.js new file mode 100644 index 00000000..df5005f4 --- /dev/null +++ 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
; +} diff --git a/src/containers/tokens.js b/src/containers/tokens.js index 650e7233..260cf094 100644 --- 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" /> + @@ -110,6 +112,7 @@ export default function Tokens() { title="Buy PNK" /> + From 76fe110c862d2a8646ead0cbc52bb9da8da9c040 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Fri, 20 Jun 2025 14:15:55 +0200 Subject: [PATCH 2/8] chore: usd as default --- src/components/pnk-widget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pnk-widget.js b/src/components/pnk-widget.js index df5005f4..3f9f6393 100644 --- a/src/components/pnk-widget.js +++ b/src/components/pnk-widget.js @@ -6,7 +6,7 @@ export default function PNKWidget({ wallet }) { containerId: 'ahora-widget', language: 'en', cryptoCurrency: 'PNK', - fiatCurrency: 'EUR', + fiatCurrency: 'USD', borderRadius: 24, borderWithShadow: true, theme: 'light', From 4b3799cfb44beb5bc756e45f2184e79e3c725d49 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Fri, 20 Jun 2025 17:30:06 +0200 Subject: [PATCH 3/8] fix: add titles with colors --- src/containers/tokens.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/containers/tokens.js b/src/containers/tokens.js index 260cf094..6f30805b 100644 --- a/src/containers/tokens.js +++ b/src/containers/tokens.js @@ -65,7 +65,7 @@ export default function Tokens() { title="Buy PNK" /> - +

Crypto-to-Crypto

@@ -74,6 +74,8 @@ export default function Tokens() { +

Fiat-to-Crypto

+ @@ -112,12 +114,14 @@ export default function Tokens() { title="Buy PNK" /> - +

Crypto-to-Crypto

+

Fiat-to-Crypto

+ From 6337de915f94fec4a8492c9d28283bc0d7058e23 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Fri, 20 Jun 2025 17:39:44 +0200 Subject: [PATCH 4/8] chore: center titles --- src/containers/tokens.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/containers/tokens.js b/src/containers/tokens.js index 6f30805b..22f745f5 100644 --- a/src/containers/tokens.js +++ b/src/containers/tokens.js @@ -65,7 +65,7 @@ export default function Tokens() { title="Buy PNK" /> -

Crypto-to-Crypto

+

Crypto-to-Crypto

@@ -74,7 +74,7 @@ export default function Tokens() { -

Fiat-to-Crypto

+

Fiat-to-Crypto

@@ -114,13 +114,13 @@ export default function Tokens() { title="Buy PNK" /> -

Crypto-to-Crypto

+

Crypto-to-Crypto

-

Fiat-to-Crypto

+

Fiat-to-Crypto

From cb74646161c1121285ac0327c2f9d5bbddb697f1 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 24 Jun 2025 13:43:24 +0200 Subject: [PATCH 5/8] fix: use iframe instead --- public/ahora-crypto-widget.html | 26 ++++++++++++++++++++++++++ public/index.html | 1 - src/components/pnk-widget.js | 33 ++++++++++++++------------------- 3 files changed, 40 insertions(+), 20 deletions(-) create mode 100644 public/ahora-crypto-widget.html diff --git a/public/ahora-crypto-widget.html b/public/ahora-crypto-widget.html new file mode 100644 index 00000000..b36d5d97 --- /dev/null +++ b/public/ahora-crypto-widget.html @@ -0,0 +1,26 @@ + + + + + + PNK Widget + + + +
+ + + diff --git a/public/index.html b/public/index.html index 12db0819..49c2a328 100644 --- a/public/index.html +++ b/public/index.html @@ -1,7 +1,6 @@ - diff --git a/src/components/pnk-widget.js b/src/components/pnk-widget.js index 3f9f6393..de2f52bb 100644 --- a/src/components/pnk-widget.js +++ b/src/components/pnk-widget.js @@ -1,22 +1,17 @@ -import React, { useEffect } from "react"; +import React from "react"; export default function PNKWidget({ wallet }) { - 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
; + const src = `/ahora-crypto-widget.html?wallet=${encodeURIComponent(wallet)}`; + return ( +
+