dflow-phantom-connect

# Phantom Connect + DFlow Skill

## Instructions

### Step 1: Identify What the User Wants to Build

Determine the domain, then route to the right references.

**Wallet connection and Solana interactions:**

- Connecting a Phantom wallet (React, React Native, vanilla JS)
- Signing messages or transactions
- Token-gated access
- NFT minting
- Crypto payments
- Solana transfers (SOL or SPL tokens)

**DFlow trading & market data:**

- Spot token swaps (quote, sign, submit, confirm)
- Live prices, order-book depth, or priority-fee streaming

Many tasks combine both (for example, a swap UI needs wallet connection AND DFlow trading). Read all relevant references before writing code.

### Step 2: Read the Relevant References

**Phantom Connect SDKs** (wallet connection, signing, auth):

- `references/react-sdk.md`: React hooks, components, theming, PhantomProvider
- `references/react-native-sdk.md`: Expo config, polyfills, deep links, mobile auth
- `references/browser-sdk.md`: BrowserSDK init, events, wallet discovery, vanilla JS

**Solana patterns** (transactions, gating, minting, payments):

- `references/transactions.md`: SOL/SPL transfers, signing, fee estimation
- `references/token-gating.md`: client-side and server-side token-gated access
- `references/nft-minting.md`: mint pages, Metaplex Core, compressed NFTs
- `references/payments.md`: SOL/USDC payments, checkout with backend verification

**DFlow** (swaps, streaming):

- `references/dflow-crypto-trading.md`: spot swaps via `/order` (atomic units, base58 mints, quote-without-wallet, priority/platform/sponsor fees)
- `references/dflow-websockets.md`: real-time quote, order-book, and priority-fee streaming (browser proxies through the backend)

### Step 3: Ask the Right Questions

Before implementing, ask questions based on the domain:

**For Phantom Connect tasks:**

- Which platform? (React, React Native, vanilla JS)
- Do they need social login (Google/Apple) or extension only?

**For DFlow tasks:**

- Do you have a DFlow API key? (Yes: prod host with `x-api-key`. No: dev host, rate-limited. Prod key: pond.dflow.net/get-started/api-key.) It's one key for everything DFlow.
- Client environment? (web, mobile, backend, CLI) Browser apps keep the key on the backend and proxy DFlow HTTP and WebSocket through it.
- Platform fees? If yes, what bps and which builder-owned fee account (which must already exist)?

### Step 4: Implement

Follow the patterns in the reference files. Key rules by domain:

**Phantom Connect:**

- All SDK details (provider setup, hooks, components, auth providers) are in the SDK reference files. Read them before writing Phantom integration code.

**DFlow:**

- Trades are synchronous: one `/order` call returns a signed-ready transaction that you sign, submit, and confirm.
- As a security best practice, keep the DFlow API key on the backend, not in browser code. Browser apps proxy DFlow HTTP (`/order` serves no CORS) and the WebSocket streams through their backend.
- Dev endpoints (`dev-quote-api.dflow.net`) work without a key but are rate-limited; production requires a key from pond.dflow.net/get-started/api-key. In production, quote and book stream access is granted per key.

### Step 5: Handle Errors

Each reference file contains domain-specific error handling. Key cross-cutting concerns:

- User rejects a transaction or signature request
- Wallet not connected when a signed action is attempted
- DFlow API returns 429 (rate limited): retry with backoff or get a production API key
- `route_not_found` from DFlow: a likely cause is insufficient liquidity for the pair at that size; also check the mint addresses and that `amount` is in atomic units

## Examples

### Example 1: React wallet connection

User says: "Add Phantom wallet login to my Next.js app"

Actions:

1. Read `references/react-sdk.md`
2. Install `@phantom/react-sdk`
3. Wrap app in PhantomProvider with desired auth providers and appId
4. Use `useModal` hook for a connect button
5. Use `useAccounts` to display the connected wallet address

Result: Working wallet connection with social login and extension support

### Example 2: Token-gated page

User says: "Build a page that only BONK holders can see"

Actions:

1. Read `references/react-sdk.md` and `references/token-gating.md`
2. Set up wallet connection
3. Query the BONK token balance for the connected wallet
4. Conditionally render content based on balance threshold
5. For production: add server-side signature verification

Result: Page that checks wallet token balance and gates content

### Example 3: DFlow token swap

User says: "Add a swap feature using DFlow"

Actions:

1. Ask: API key? Client environment? Platform fees?
2. Read `references/dflow-crypto-trading.md`
3. Use the `/order` flow: request the order (proxy through the backend in a browser), deserialize the returned transaction, sign, submit, and confirm
4. In a browser, sign and send with the Phantom SDK (see `references/transactions.md`); server-side, sign with a keypair and submit through your RPC

Result: Working swap with DFlow routing

### Example 4: Full swap page with wallet connection

User says: "Build a full swap page with wallet connect and DFlow"

Actions:

1. Ask: which platform? API key? Platform fees?
2. Read the relevant SDK reference AND `references/dflow-crypto-trading.md`
3. Set up wallet connection with the Phantom SDK
4. Build the swap form; proxy `/order` through the backend so the key stays server-side
5. Sign and send with the Phantom SDK, then confirm

Result: End-to-end swap page combining Phantom wallet and DFlow trading

### Example 5: Live order book

User says: "Show a live order book for a token pair"

Actions:

1. Read `references/dflow-websockets.md`
2. Stand up a backend relay that holds the key, opens `/book-stream` with the `x-api-key` header, and relays frames to the browser
3. Subscribe with `{ op: "subscribe", base_mint, quote_mint }`; render the batched per-slot `updates[]`
4. Reconnect and re-subscrib