);
}
```
### Create Trading Hook
Build the trading hook that interfaces with the Polymarket CLOB API using a viem wallet client. Create `src/lib/hooks/usePolymarketTrading.ts`:
```typescript src/lib/hooks/usePolymarketTrading.ts theme={"system"}
"use client";
import { useState, useCallback, useRef } from "react";
import { useWallet } from "@/lib/providers";
import { createWalletClientForWalletAccount } from "@dynamic-labs-sdk/evm/viem";
import { polygon } from "viem/chains";
import { ClobClient, Side, OrderType } from "@polymarket/clob-client";
import type { UserMarketOrder } from "@polymarket/clob-client";
import { Contract, providers, BigNumber } from "ethers";
import {
POLYMARKET_CONTRACTS,
POLYMARKET_USDC_SPENDERS,
POLYMARKET_OUTCOME_TOKEN_SPENDERS,
ERC20_APPROVAL_ABI,
ERC1155_APPROVAL_ABI,
} from "@/lib/constants/contracts";
const SIGNATURE_TYPE_EOA = 0;
const CLOB_API_URL = "https://clob.polymarket.com";
const POLYGON_CHAIN_ID = 137;
const MAX_ALLOWANCE = BigNumber.from(
"0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff"
);
export interface UserApiCredentials {
key: string;
secret: string;
passphrase: string;
}
export interface TradeParams {
marketId: string;
conditionId: string;
tokenId: string;
side: "yes" | "no";
amount: number;
isMarketOrder?: boolean;
negRisk?: boolean;
}
export function usePolymarketTrading() {
const { evmAccount } = useWallet();
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const credentialsRef = useRef(null);
const signerRef = useRef(null);
const address = evmAccount?.address;
const getEthersSigner = useCallback(async (): Promise => {
if (!evmAccount) return null;
if (signerRef.current) return signerRef.current;
try {
const walletClient = createWalletClientForWalletAccount({
walletAccount: evmAccount,
chain: polygon,
});
const provider = new providers.Web3Provider(walletClient as any);
signerRef.current = provider.getSigner();
return signerRef.current;
} catch {
return null;
}
}, [evmAccount]);
const initializeCredentials = useCallback(async (): Promise => {
const ethersSigner = await getEthersSigner();
if (!ethersSigner || !address) {
setError("Wallet not connected");
return null;
}
if (credentialsRef.current) return credentialsRef.current;
setIsLoading(true);
setError(null);
try {
const tempClient = new ClobClient(CLOB_API_URL, POLYGON_CHAIN_ID, ethersSigner as any);
let credentials: UserApiCredentials | null = null;
try {
const derivedCreds = await tempClient.deriveApiKey();
if (derivedCreds?.key) credentials = derivedCreds;
} catch {}
if (!credentials) {
const newCreds = await tempClient.createApiKey();
if (newCreds?.key) credentials = newCreds;
else throw new Error("Failed to create API credentials");
}
credentialsRef.current = credentials;
return credentials;
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to initialize credentials");
return null;
} finally {
setIsLoading(false);
}
}, [getEthersSigner, address]);
const placeOrder = useCallback(async (
params: TradeParams
): Promise<{ success: boolean; orderId?: string; error?: string }> => {
if (!address) return { success: false, error: "Wallet not connected" };
setIsLoading(true);
setError(null);
const ethersSigner = await getEthersSigner();
if (!ethersSigner) {
setIsLoading(false);
return { success: false, error: "Failed to get wallet signer" };
}
const credentials = credentialsRef.current || (await initializeCredentials());
if (!credentials) {
setIsLoading(false);
return { success: false, error: "Failed to initialize trading credentials" };
}
try {
const client = new ClobClient(
CLOB_API_URL, POLYGON_CHAIN_ID, ethersSigner as any, credentials, SIGNATURE_TYPE_EOA
);
const marketOrder: UserMarketOrder = {
tokenID: params.tokenId,
amount: params.amount,
side: Side.BUY,
feeRateBps: 0,
};
const response = await client.createAndPostMarketOrder(
marketOrder,
{ negRisk: params.negRisk },
OrderType.FOK
);
const orderId = response.orderID || response.orderId || response.id;
setIsLoading(false);
if (orderId) return { success: true, orderId };
if (response.success) return { success: true, orderId: "pending" };
throw new Error(response.error || "Order submission failed");
} catch (err) {
const errorMessage = err instanceof Error ? err.message : "Failed to place order";
setError(errorMessage);
setIsLoading(false);
return { success: false, error: errorMessage };
}
}, [address, getEthersSigner, initializeCredentials]);
return { placeOrder, initializeCredentials, isLoading, error };
}
```
The key difference from the React SDK version is using `createWalletClientForWalletAccount` from `@dynamic-labs-sdk/evm/viem` to get a viem wallet client from the `EvmWalletAccount`, which is then wrapped with ethers.js for compatibility with the Polymarket CLOB client.
### Create Markets API Route
Create an API route to fetch markets from Polymarket. Create `src/app/api/polymarket/route.ts`:
```typescript src/app/api/polymarket/route.ts theme={"system"}
import { NextResponse } from "next/server";
export async function GET(request: Request) {
try {
const { searchParams } = new URL(request.url);
const limit = searchParams.get("limit") || "100";
const url = new URL("https://gamma-api.polymarket.com/markets");
url.searchParams.set("limit", limit);
url.searchParams.set("closed", "false");
url.searchParams.set("active", "true");
const response = await fetch(url.toString(), {
headers: { Accept: "application/json" },
next: { revalidate: 60 },
});
if (!response.ok) throw new Error(`Polymarket API error: ${response.status}`);
const data = await response.json();
return NextResponse.json(data);
} catch (error) {
return NextResponse.json(
{ error: "Failed to fetch markets" },
{ status: 500 }
);
}
}
```
### Build the Main Page
Update `src/app/page.tsx` to display markets using the hooks:
```typescript src/app/page.tsx theme={"system"}
"use client";
import { useMemo, useState } from "react";
import { Header } from "@/components/Header";
import { MarketCard } from "@/components/MarketCard";
import {
usePolymarketMarkets,
type Market,
calculateTimeRemaining,
} from "@/lib/hooks/usePolymarketMarkets";
export default function Home() {
const [searchQuery, setSearchQuery] = useState("");
const { data: markets = [], isLoading, error } = usePolymarketMarkets();
const filteredMarkets = useMemo(() => {
const lowerQuery = searchQuery.toLowerCase();
return markets.filter((m: Market) =>
!lowerQuery || m.question.toLowerCase().includes(lowerQuery)
);
}, [markets, searchQuery]);
return (
<>
{isLoading ? (
Loading markets...
) : error ? (
Error loading markets. Please try again later.
) : filteredMarkets.length > 0 ? (
{filteredMarkets.map((market: Market) => (
))}
) : (
No markets found
)}
);
}
```
### Run the Application
Start the development server:
```bash npm theme={"system"}
npm run dev
```
```bash yarn theme={"system"}
yarn dev
```
```bash pnpm theme={"system"}
pnpm dev
```
```bash bun theme={"system"}
bun dev
```
The application will be available at `http://localhost:3000`.
## How Trading Works
When a user places a trade on Polymarket through this app:
1. **Authentication**: The user signs in via Google, email OTP, or external EVM wallet using the custom `DynamicButton`
2. **Wallet Provisioning**: After auth, an EVM embedded wallet is automatically created via `createWaasWalletAccounts`
3. **Wallet Client**: `createWalletClientForWalletAccount` from `@dynamic-labs-sdk/evm/viem` creates a viem-compatible wallet client
4. **Credential Initialization**: The app derives or creates Polymarket API credentials by signing a message
5. **Approvals**: The app checks and requests necessary ERC20/ERC1155 approvals for USDC and outcome tokens
6. **Order Placement**: A market order is submitted to Polymarket's CLOB API
7. **Confirmation**: The user sees success/error feedback
## Conclusion
If you want to take a look at the full source code, check out the [GitHub repository](https://github.com/dynamic-labs/examples/tree/main/examples/nextjs-polymarket-demo).
This integration demonstrates how Dynamic's JS SDK embedded wallets can seamlessly connect to prediction markets like Polymarket. The `@dynamic-labs-sdk/evm` package provides the `createWalletClientForWalletAccount` helper to bridge embedded wallets with viem, enabling complex trading operations with minimal friction.
### Additional Resources
* [Dynamic JS SDK Documentation](https://www.dynamic.xyz/docs/javascript/)
* [Polymarket CLOB API Documentation](https://docs.polymarket.com/)
* [Polygon Network Documentation](https://polygon.technology/developers)