@scpdemo/test-sdk-card 1.2.0 → 1.3.0

package/README.md

@@ -1,31 +1,62 @@
-# @scallop-card/sdk-react
+# @scpdemo/test-sdk-card
 
-This package exposes the React hook (`useScPrefixSdk`) and the iframe wrapper component (`ScPrefixWidgetWrapper`) for embedding the Scallop Card widget that now lives inside the Next.js iframe app.
+React wrapper around the Scallop card widget. Ships a single component (`ScPrefixWidgetWrapper`) that renders the hosted iframe. No other setup is needed in the consuming app besides providing the iframe URL.
 
-## Embedding the widget
+## Install
 
-1. Deploy the iframe app located at `packages/iframe-app` (or run it locally via `pnpm --filter @scallop-card/iframe-app dev`).
-2. Provide the iframe URL via env (`VITE_SC_PREFIX_IFRAME_URL`, `NEXT_PUBLIC_SC_PREFIX_IFRAME_URL`, `REACT_APP_SC_PREFIX_IFRAME_URL`, or `SC_PREFIX_IFRAME_URL`) or pass it explicitly:
+```bash
+npm install @scpdemo/test-sdk-card
+# or: pnpm add @scpdemo/test-sdk-card
+```
+
+## Configure the iframe URL
+
+Set one of these env vars in your app (the wrapper will pick any of them):
+
+- `REACT_APP_SC_PREFIX_IFRAME_URL` (Create React App)
+- `VITE_SC_PREFIX_IFRAME_URL` (Vite)
+- `NEXT_PUBLIC_SC_PREFIX_IFRAME_URL` (Next.js)
+- `SC_PREFIX_IFRAME_URL` (generic fallback)
+
+Example `.env` for CRA:
+
+```
+REACT_APP_SC_PREFIX_IFRAME_URL=https://your-hosted-iframe-app.example.com
+```
+
+You can also pass `iframeUrl` directly as a prop if you prefer not to use env vars.
+
+## Usage
 
 ```tsx
-import { ScPrefixWidgetWrapper } from "@scallop-card/sdk-react";
+import { ScPrefixWidgetWrapper } from "@scpdemo/test-sdk-card";
+
+function App() {
+  const iframeUrl = process.env.REACT_APP_SC_PREFIX_IFRAME_URL;
+
+  if (!iframeUrl) {
+    return (
+      <div>
+        Missing <code>REACT_APP_SC_PREFIX_IFRAME_URL</code> in your <code>.env</code>.
+        Add it and restart the dev server.
+      </div>
+    );
+  }
 
-export function CardWidget(): JSX.Element {
   return (
     <ScPrefixWidgetWrapper
       style={{ minHeight: "720px" }}
       allow="clipboard-write"
+      iframeUrl={iframeUrl} // optional if the env var is set
     />
   );
 }
-```
-
-The component forwards any additional props to the underlying `<iframe>` element, so you can control sizing, permissions, sandboxing, and more.
 
-## Server-side API proxy
+export default App;
+```
 
-The iframe app hides the raw SDK calls (`scPrefixSubmitRequest`, `scPrefixGetStatus`) behind server-side API routes. Configure your Scallop credentials via environment variables (see `packages/iframe-app/.env.example`).
+All extra props are forwarded to the underlying `<iframe>`, so you can control sizing, permissions, sandboxing, `className`, etc.
 
-## Hooks
+## Hooks (optional)
 
-`useScPrefixSdk` remains available if you need direct access to the core SDK from React components (for example, to build custom dashboards or orchestration flows).
+The hook `useScPrefixSdk` is also exported if you want direct programmatic access to submit requests and check status from React components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scpdemo/test-sdk-card",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "React hook + iframe wrapper for the Scallop card SDK",
   "license": "MIT",
   "type": "module",