Prediction market
A prediction market prices and settles every position in USDC on Polygon. Before a user can take a side, they need USDC on Polygon sitting in their wallet.
The friction
A user reads a market, forms a view, taps Buy YES — and discovers their funds are ETH on Base. The honest path from there is a bridge to Polygon and a swap to USDC: several screens, a few minutes, and a real chance the conviction fades before they come back. Belief is strongest the instant it forms; that is the worst possible moment to hand someone off to a third-party bridge.
The integration
Point the provider's asset at your home asset and settle deposits to the user's own wallet. An "Add funds" button opens the deposit dialog over the market:
import { StridgeProvider, useDeposit } from "@stridge/kit"
import { DepositDialog } from "@stridge/kit/deposit/dialog"
function AddFundsButton() {
const { open } = useDeposit()
return (
<button type="button" onClick={() => open()}>
Add funds
</button>
)
}
export function MarketPage({ userWallet }: { userWallet: `0x${string}` }) {
return (
<StridgeProvider
gatewayKey={process.env.NEXT_PUBLIC_STRIDGE_GATEWAY_KEY!}
// The market's settlement token.
// 966 = Polygon, see Supported networks for the full list.
asset={{ networkId: "966", symbol: "USDC" }}
// Funds settle to the user's own wallet.
flows={{ deposit: { destination: { address: userWallet } } }}
>
<Market />
<AddFundsButton />
<DepositDialog />
</StridgeProvider>
)
}What the user does
The deposit dialog opens over the market — the user never leaves the page they were reading.
They pick any token on any supported chain — the ETH on Base they already had — and send it.
Stridge routes and settles; seconds later the user's own wallet holds USDC on Polygon.
The market reads the freshly funded balance and the position goes through — same session, same conviction.
Funding is fastest when the dialog has nothing to fetch on open. Call usePrefetchDeposit() while the user is still reading a market, so the chain and token catalogue is already warm by the time they tap Add funds.
How they tend to customize
Prediction markets are dense, fast-reading product surfaces. The deposit step has to feel like it belongs inside the market, not on top of it. Two customization moves do most of the work:
- Skin (theming) — stay on drop-in dialogs and skin them. Set
appearance.accentto the market's CTA color andappearance.radiusto match the surrounding cards; both are CSS-variable driven, so the change propagates to every screen of the flow. - Compound components — when the dialog modal disrupts the read flow, drop the dialog and embed the same parts inline. A market sidebar can show
<Deposit.Steps>directly under the YES/NO buttons, so funding and trading share a single composition.
The Kit's deposit FSM, status polling, and settlement watcher are reused either way — only the chrome changes.
The result
The user funds a position with the assets they already had, on the chains they already used, without leaving the market — and your team never built a bridge or a swap integration to make it happen.
Next
- Usecases — the pattern and the other examples.
- Web3 trading app — funding margin and cashing out.
- DeFi app — funding collateral.
- Gateway Kit — overview of the three integration tiers.
- Compound components — embed the deposit flow inline.
- Theming & CSS variables — match the market's visual language.