Skip to content

feat(prediction-markets): migrate prediction market examples to Dynamic JS SDK #51

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

Draft
avneesh0612 wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

feat(prediction-markets): migrate prediction market examples to Dynamic JS SDK #51

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
d3a7fca
feat(swaps): migrate mayan and lifi examples to JS SDK
avneesh0612 May 4, 2026
f18fbba
feat(yield): migrate aave, morpho, pods examples to JS SDK
avneesh0612 May 4, 2026
aee7696
feat(ramps): migrate iron and moneygram examples to JS SDK
avneesh0612 May 4, 2026
a6ed114
feat(prediction-markets): migrate polymarket and kalshi examples to J…
avneesh0612 May 4, 2026
2ec4a86
chore(prediction-markets): remove non-prediction-market files from br…
avneesh0612 May 13, 2026
c8b3cf0
chore(swaps): remove remaining stray files from non-swaps examples
avneesh0612 May 13, 2026
8dee450
chore(prediction-markets): remove remaining stray bridge files
avneesh0612 May 13, 2026
83cb4ff
feat(prediction-markets): light theme, trading fixes, Solana-only Kalshi
avneesh0612 May 14, 2026
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
8 changes: 8 additions & 0 deletions examples/nextjs-kalshi-demo/empty-module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// Empty module stub for optional peer dependencies
// This file is used to replace optional dependencies that may not be installed

// Export empty object for CommonJS
module.exports = {};

// Also export named empty object for ESM compatibility
module.exports.default = {};
1 change: 1 addition & 0 deletions examples/nextjs-kalshi-demo/next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { NextConfig } from "next";

const nextConfig: NextConfig = {
reactStrictMode: true,
transpilePackages: ["@lifi/sdk"],
webpack: (config, { isServer }) => {
// Add externals for server-side only modules
config.externals.push("pino-pretty", "lokijs", "encoding");
Expand Down
5 changes: 2 additions & 3 deletions examples/nextjs-kalshi-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@
"lint": "next lint"
},
"dependencies": {
"@dynamic-labs/sdk-react-core": "^4.52.2",
"@dynamic-labs/solana": "^4.52.2",
"@dynamic-labs/solana-core": "^4.52.2",
"@dynamic-labs-sdk/client": "^0.24.1",
"@dynamic-labs-sdk/solana": "^0.24.1",
"@lifi/sdk": "^3.14.1",
"@solana/buffer-layout-utils": "^0.3.0",
"@solana/spl-token": "^0.4.14",
Expand Down
2,182 changes: 594 additions & 1,588 deletions examples/nextjs-kalshi-demo/pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

33 changes: 24 additions & 9 deletions examples/nextjs-kalshi-demo/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import type { Metadata } from "next";
import { Roboto } from "next/font/google";
import "../styles/globals.css";
import Providers from "@/lib/providers";

const roboto = Roboto({
subsets: ["latin"],
weight: ["300", "400", "500", "700"],
variable: "--font-roboto",
display: "swap",
});

export const metadata: Metadata = {
title: "Dynamic: Predictions Market Demo",
description: "Predictions Market Demo by Dynamic",
title: "Dynamic: Kalshi Predictions Demo",
description: "Kalshi Predictions Market Demo by Dynamic",
};

export default function RootLayout({
Expand All @@ -13,20 +21,27 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en" className="bg-[#0a0b0f]">
<html lang="en" className={roboto.variable}>
<body>
<Providers>
<div className="bg-[#0a0b0f] flex justify-center min-h-screen">
<div
className="box-border w-full px-[20px] sm:px-[32px] md:px-[48px] lg:px-[64px] xl:px-[80px]"
style={{ maxWidth: "1440px" }}
>
<div className="flex flex-col min-h-screen">
<div className="flex-1">
{children}
</div>
<footer className="border-t border-[#DADADA] py-4 text-center text-sm text-[#606060]">
Powered by{" "}
<a
href="https://dynamic.xyz"
target="_blank"
rel="noopener noreferrer"
className="text-[#4779FF] hover:underline font-medium"
>
Dynamic
</a>
</footer>
</div>
</Providers>
</body>
</html>
);
}

10 changes: 7 additions & 3 deletions examples/nextjs-kalshi-demo/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,20 @@ export default function Home() {
return (
<>
<Header />
<div className="px-[20px] sm:px-[32px] md:px-[48px] lg:px-[64px] xl:px-[80px]">
<div style={{ maxWidth: "1440px", margin: "0 auto" }}>

{/* Market Cards Grid */}
<div className="pt-[27px] pb-[93px]">
{isLoading ? (
<div className="flex flex-col items-center justify-center py-20">
<p className="font-['Clash_Display',sans-serif] text-[18px] text-[rgba(221,226,246,0.3)]">
<p className="text-[18px] text-[#606060]">
Loading markets...
</p>
</div>
) : error ? (
<div className="flex flex-col items-center justify-center py-20">
<p className="font-['Clash_Display',sans-serif] text-[18px] text-[rgba(221,226,246,0.3)]">
<p className="text-[18px] text-[#606060]">
Error loading markets. Please try again later.
</p>
</div>
Expand All @@ -52,12 +54,14 @@ export default function Home() {
</div>
) : (
<div className="flex flex-col items-center justify-center py-20">
<p className="font-['Clash_Display',sans-serif] text-[18px] text-[rgba(221,226,246,0.3)]">
<p className="text-[18px] text-[#606060]">
No markets found
</p>
</div>
)}
</div>
</div>
</div>
</>
);
}
Expand Down
21 changes: 5 additions & 16 deletions examples/nextjs-kalshi-demo/src/components/DepositModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
"use client";

import {
useDynamicContext,
useFundWithWallet,
} from "@dynamic-labs/sdk-react-core";
import { useWallet } from "@/lib/providers";
import { ArrowLeft, X } from "lucide-react";
import { useId, useState } from "react";
import { DepositOptionsView } from "./deposit/DepositOptionsView";
Expand All @@ -18,27 +15,19 @@ interface DepositModalProps {
type View = "options" | "qr" | "lifi";

export function DepositModal({ isOpen, onClose }: DepositModalProps) {
const { connectWalletForFunding, promptAmountAndFund } = useFundWithWallet();
const { primaryWallet } = useDynamicContext();
const { solanaAccount } = useWallet();

const modalTitleId = useId();
const [view, setView] = useState<View>("options");

const walletAddress = primaryWallet?.address || "";
const walletAddress = solanaAccount?.address || "";

const handleReceiveByQR = () => setView("qr");
const handleLiFi = () => setView("lifi");

const handleFundWallet = async () => {
try {
const externalWallet = await connectWalletForFunding();
if (externalWallet) {
promptAmountAndFund({ wallet: externalWallet });
}
onClose();
} catch (err) {
console.error("Failed to connect wallet for funding:", err);
}
// Fund wallet functionality not available in JS SDK — show QR instead
setView("qr");
};

const handleBack = () => {
Expand Down
Loading