Skip to content

feat: ahoracrypto widget #493

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

feat: ahoracrypto widget #493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3667a5b
feat: ahoracrypto widget
kemuru Jun 20, 2025
76fe110
chore: usd as default
kemuru Jun 20, 2025
4b3799c
fix: add titles with colors
kemuru Jun 20, 2025
6337de9
chore: center titles
kemuru Jun 20, 2025
cb74646
fix: use iframe instead
kemuru Jun 24, 2025
21dfaa7
chore: height adjustment
kemuru Jun 24, 2025
13d6578
chore: use widget from ipfs
kemuru Jun 24, 2025
3139f74
chore: revert iframe
kemuru Jun 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" />
Expand Down Expand Up @@ -60,4 +61,4 @@
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</html>
22 changes: 22 additions & 0 deletions src/components/pnk-widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <div id="ahora-widget" style={{ maxWidth: 416, margin: "0 auto", marginBottom: "28px" }} />;
}
7 changes: 7 additions & 0 deletions src/containers/tokens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -64,6 +65,7 @@ export default function Tokens() {
title="Buy PNK"
/>
<PNKBalanceCard />
<h2 style={{ margin: "24px 0", color: "#1F1F1F", textAlign: "center" }}>Crypto-to-Crypto</h2>
<Row gutter={40}>
<Col lg={8} md={12}>
<BuyPNKCard />
Expand All @@ -72,6 +74,8 @@ export default function Tokens() {
<PNKMainnetExchangesCard />
</Col>
</Row>
<h2 style={{ margin: "24px 0", color: "#1F1F1F", textAlign: "center" }}>Fiat-to-Crypto</h2>
<PNKWidget wallet={drizzleState.account} />
<Divider />
<Row>
<OTCCard />
Expand Down Expand Up @@ -110,11 +114,14 @@ export default function Tokens() {
title="Buy PNK"
/>
<PNKBalanceCard />
<h2 style={{ margin: "24px 0", color: "#1F1F1F", textAlign: "center" }}>Crypto-to-Crypto</h2>
<Row gutter={40}>
<Col>
<PNKXdaiExchangesCard />
</Col>
</Row>
<h2 style={{ margin: "24px 0", color: "#1F1F1F", textAlign: "center" }}>Fiat-to-Crypto</h2>
<PNKWidget wallet={drizzleState.account} />
<Divider />
<Row>
<OTCCard />
Expand Down