# @scpdemo/test-sdk-card

React wrapper around the Scallop card widget. Ships a single component (`ScPrefixWidgetWrapper`) that renders the hosted experience out of the box—no need to specify an iframe URL unless you host your own.

## Install

```bash
npm install @scpdemo/test-sdk-card
# or: pnpm add @scpdemo/test-sdk-card
```

You can also pass`clientId` directly as props if you prefer not to use env vars. If neither is provided, the built-in default URL is used.

## Usage

```tsx
import "./App.css";
import {
  ScPrefixWidgetWrapper,
  ScallopSDKTransactions,
} from "@scpdemo/test-sdk-card";

function App() {
  return (
    <div className="App">
      <div className="widget-grid">
        <div className="panel">
          <ScPrefixWidgetWrapper
            style={{ minHeight: "720px" }}
            allow="clipboard-write"
            clientId="clientId"
          />
        </div>
        <div className="panel">
          <ScallopSDKTransactions
            style={{ minHeight: "720px" }}
            theme="default"
            clientId="clientId"
            cardId="cardId"
          />
        </div>
      </div>
    </div>
  );
}
```

All extra props are forwarded to the underlying `<iframe>`, so you can control sizing, permissions, sandboxing, `className`, etc.

## Hooks (optional)

The hook `useScPrefixSdk` is also exported if you want direct programmatic access to submit requests and check status from React components.

## Transactions iframe

If you need the transactions view, use the `ScPrefixTransactionsWrapper` component. It accepts the same props as `ScPrefixWidgetWrapper` and defaults to the hosted transactions endpoint; override only if you host your own. Optional card scoping: pass `cardId` as a prop or via env var (`REACT_APP_SC_PREFIX_CARD_ID` / `VITE_SC_PREFIX_CARD_ID` / `NEXT_PUBLIC_SC_PREFIX_CARD_ID` / `SC_PREFIX_CARD_ID`).

Example:

```tsx
import {
  ScallopSDKCards,
  ScallopSDKTransactions,
} from "@scpdemo/test-sdk-card";

function App() {
  return (
    <>
      <ScallopSDKCards
        theme="default"
        clientId="1234"
        allow="clipboard-write"
      />
      <ScallopSDKTransactions
        theme="default"
        clientId="1234"
        cardId="card_abc123"
        style={{ marginTop: 24 }}
      />
    </>
  );
}
```

The transactions iframe expects the user session (username/access token) to be present in `sessionStorage`, typically set by completing the cards/KYC flow first. Ensure the cards iframe runs before loading transactions so session data exists.