diff --git a/public/index.html b/public/index.html index 49c2a328..3ce761ba 100644 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,7 @@ + @@ -60,4 +61,4 @@ To create a production bundle, use `npm run build` or `yarn build`. --> - + \ No newline at end of file diff --git a/src/components/pnk-widget.js b/src/components/pnk-widget.js new file mode 100644 index 00000000..d89f918c --- /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: 'USD', + borderRadius: 24, + borderWithShadow: true, + theme: 'light', + referral: 'kleros-court-v1', + }); + + widget.onReady(() => widget.setWalletAddress(wallet)); + + return () => widget?.destroy?.(); + }, [wallet]); + + return
; +} \ No newline at end of file diff --git a/src/containers/tokens.js b/src/containers/tokens.js index 650e7233..22f745f5 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" /> +

Crypto-to-Crypto

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

Fiat-to-Crypto

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

Crypto-to-Crypto

+

Fiat-to-Crypto

+