Developers

Web3 trading app

A perps app uses USDC on Arbitrum as margin. Funding margin is the first thing every new trader has to do — and the single most common place they drop off.

The friction

Cold-start funding. A trader signs up ready to trade, then finds their capital sitting on three other chains. Every bridge-and-swap hop between signup and their first position is another chance to lose them. The reverse hurts too: a trader who can only cash out to one chain and one token feels locked in, and locked-in users churn.

The integration

Wire the deposit dialog into "Deposit" and the withdraw dialog into "Withdraw". Withdraw is the same flow in reverse — traders cash PnL out to any chain and asset — so a single provider configures both:

TradeApp.tsx
import { StridgeProvider } from "@stridge/kit"
import { DepositDialog } from "@stridge/kit/deposit/dialog"
import { WithdrawDialog } from "@stridge/kit/withdraw/dialog"

export function TradeApp({ userWallet }: { userWallet: `0x${string}` }) {
  return (
    <StridgeProvider
      gatewayKey={process.env.NEXT_PUBLIC_STRIDGE_GATEWAY_KEY!}
      // Margin asset. 9001 = Arbitrum One.
      asset={{ networkId: "9001", symbol: "USDC" }}
      flows={{
        deposit: { destination: { address: userWallet } },
        withdraw: { owner: { address: userWallet } },
      }}
    >
      <Terminal />
      <DepositDialog />
      <WithdrawDialog balance={marginBalance} onSubmit={handleWithdraw} />
    </StridgeProvider>
  )
}

useDeposit().open() drives the "Deposit" button; useWithdraw().open() drives "Withdraw". <WithdrawDialog /> asks your app to broadcast the source transaction — see Drop-in dialogs for its balance and onSubmit contract.

What the user does

Funds margin from any chain

A new trader taps Deposit, pays with any token on any supported chain, and their Arbitrum wallet receives USDC margin — one step, no bridge.

Trades

The terminal reads the funded balance and the trader opens positions immediately.

Withdraws PnL anywhere

On Withdraw, the trader chooses the destination chain and token; the Kit runs the deposit flow in reverse and the funds leave to wherever they want them.

Note

Deposit and withdraw share one StridgeProvider. Enabling both is a matter of adding the sibling key under flows — the settlement asset is configured once and both directions inherit it.

How they tend to customize

Trading terminals are visual: dark UI, charts, dense data. Three customization moves come up over and over:

  • Skin (theming) — drop the Kit into the terminal's theme by setting appearance.theme="dark", appearance.accent to the terminal's primary CTA, and appearance.radius="sharp" for the squared-off look most terminals share. Sub-part overrides via data-stridge-slot cover anything the appearance prop doesn't.
  • Compound + the shadcn registry — terminal teams that want full control over every screen scaffold the compound composition with pnpm dlx shadcn@latest add @stridge/kit and edit the dropped wrappers directly. The Kit still owns the FSM, state, and settlement watcher; the wrapper files use the compound parts and are yours to restyle.
  • Events — wire useStridgeFlowEvents() into your analytics or PnL feed. The bus emits typed events at every state transition (deposit:quote-resolved, withdraw:settlement-confirmed, …), so you can light up margin in the terminal the instant a deposit settles.

The result

A trader funds margin in one step from any chain and withdraws profits to whatever chain and token they prefer — and your team ships it without building or maintaining a single bridge integration.

Next

Was this page helpful?