@moonpay/platform-sdk-react-native 1.9.0 → 1.10.0

package/README.md

@@ -63,6 +63,53 @@ export function App() {
 
 Pass an optional `theme={{ appearance: 'light' | 'dark' }}` to render every MoonPay frame in light or dark mode. Omit it to follow the customer's system preference. The connect flow can override it per call (`client.connect({ theme })` or `<MoonPayConnect theme={...} />`).
 
+#### Providing the session token later
+
+The `sessionToken` prop is optional. If you don't have it when the provider mounts (for example, you fetch it from your server after the customer signs in), mount `MoonPayProvider` without it and call `initialize()` from `useMoonPay()` once the token is available:
+
+```tsx
+import { MoonPayProvider, useMoonPay } from '@moonpay/platform-sdk-react-native';
+
+export function App() {
+  return (
+    <MoonPayProvider>
+      <YourApp />
+    </MoonPayProvider>
+  );
+}
+
+function SignInScreen() {
+  const { initialize, isInitialized } = useMoonPay();
+
+  const onSignedIn = async () => {
+    const sessionToken = await fetchSessionTokenFromYourServer();
+    initialize(sessionToken); // the SDK is now ready
+  };
+
+  // ...
+}
+```
+
+`isInitialized` is `true` once a token is available (via the prop or `initialize()`). Calling a connection method before then resolves to an `err()` Result. You can also call `initialize()` again later to replace the token (for example, after a refresh). Choose one style — the controlled `sessionToken` prop or `initialize()`; if both are used, the prop wins.
+
+Because `initialize()` updates React state, the `client` that carries the new token is available on the **next render** — not synchronously within the same call. Gate your connection flow on `isInitialized` (or read `client` from `useMoonPay()` after the re-render) rather than reusing a `client` captured before `initialize()`:
+
+```tsx
+function BuyScreen() {
+  const { client, isInitialized } = useMoonPay();
+
+  useEffect(() => {
+    if (!isInitialized) return;
+    // `client` here reflects the initialized session token
+    client.getConnection().then((result) => {
+      // ...
+    });
+  }, [isInitialized, client]);
+}
+```
+
+Reusing a `client` reference captured before `initialize()` runs against the pre-initialization client and resolves to an `err()` (no session token).
+
 **3. Check the connection and connect the customer:**
 
 ```tsx

package/dist/index.cjs

@@ -198,6 +198,14 @@ function applyCredentialsOnComplete(msg, ctx) {
   ctx.core.context.setAccessToken(creds.accessToken);
   ctx.core.context.setClientToken(creds.clientToken);
 }
+function requireSessionToken(ctx) {
+  if (!ctx.sessionToken) {
+    throw new Error(
+      "No session token \u2014 pass sessionToken to <MoonPayProvider> or call initialize() from useMoonPay() before starting a connection."
+    );
+  }
+  return ctx.sessionToken;
+}
 var connectionCheckSpec = {
   channelPrefix: "check",
   path: import_platform_sdk_core.FRAME_PATHS.checkConnection,
@@ -205,7 +213,7 @@ var connectionCheckSpec = {
   needsKeyPair: true,
   handshakeTimeout: 1e4,
   buildParams: (ctx, props, publicKey) => ({
-    sessionToken: ctx.sessionToken,
+    sessionToken: requireSessionToken(ctx),
     publicKey,
     ...props.skipKyc && { skipKyc: true }
   }),
@@ -227,7 +235,7 @@ var connectSpec = {
   hidden: false,
   needsKeyPair: true,
   buildParams: (ctx, props, publicKey) => ({
-    sessionToken: ctx.sessionToken,
+    sessionToken: requireSessionToken(ctx),
     publicKey,
     // Per-call override; `applyThemeParam` in the engine fills the client
     // default for connect (and every other visible frame) when this is absent.
@@ -441,7 +449,7 @@ var connectionResetSpec = {
   path: import_platform_sdk_core.FRAME_PATHS.reset,
   hidden: true,
   handshakeTimeout: 5e3,
-  buildParams: (ctx) => ({ sessionToken: ctx.sessionToken }),
+  buildParams: (ctx) => ({ sessionToken: requireSessionToken(ctx) }),
   mapMessage: (msg) => {
     if (msg.kind === "complete") return { kind: "complete" };
     if (msg.kind === "error") {
@@ -1184,13 +1192,15 @@ var styles = import_react_native2.StyleSheet.create({
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var MoonPayContext = (0, import_react3.createContext)(null);
 function MoonPayProvider({
-  sessionToken,
+  sessionToken: sessionTokenProp,
   apiBaseUrl,
   frameBaseUrl,
   theme,
   children
 }) {
   const [frameSlots, setFrameSlots] = (0, import_react3.useState)([]);
+  const [internalToken, setInternalToken] = (0, import_react3.useState)(void 0);
+  const sessionToken = sessionTokenProp ?? internalToken;
   const addSlot = (0, import_react3.useCallback)((slot) => {
     setFrameSlots((prev) => [...prev, slot]);
   }, []);
@@ -1206,6 +1216,14 @@ function MoonPayProvider({
     });
   }
   const core = coreRef.current;
+  const initialize = (0, import_react3.useCallback)(
+    (token) => {
+      core.context.setAccessToken("");
+      core.context.setClientToken("");
+      setInternalToken(token);
+    },
+    [core]
+  );
   const client = (0, import_react3.useMemo)(() => {
     const specCtx = { sessionToken, core, frameBaseUrl, theme };
     return createRNClient({
@@ -1213,21 +1231,28 @@ function MoonPayProvider({
       core
     });
   }, [sessionToken, frameBaseUrl, core, addSlot, removeSlot, theme?.appearance]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MoonPayContext.Provider, { value: { client, sessionToken, core, frameBaseUrl, theme }, children: [
-    children,
-    frameSlots.filter((slot) => slot.hidden).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoonPayFrame, { transport: slot.transport, hidden: true }, slot.id)),
-    frameSlots.filter((slot) => !slot.hidden).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      VisibleFrameSlotSheet,
-      {
-        slot,
-        onClose: () => {
-          slot.dispose();
-          removeSlot(slot.id);
-        }
-      },
-      slot.id
-    ))
-  ] });
+  const isInitialized = sessionToken !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    MoonPayContext.Provider,
+    {
+      value: { client, sessionToken, core, frameBaseUrl, theme, initialize, isInitialized },
+      children: [
+        children,
+        frameSlots.filter((slot) => slot.hidden).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoonPayFrame, { transport: slot.transport, hidden: true }, slot.id)),
+        frameSlots.filter((slot) => !slot.hidden).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          VisibleFrameSlotSheet,
+          {
+            slot,
+            onClose: () => {
+              slot.dispose();
+              removeSlot(slot.id);
+            }
+          },
+          slot.id
+        ))
+      ]
+    }
+  );
 }
 function useMoonPayContext() {
   const ctx = (0, import_react3.useContext)(MoonPayContext);
@@ -1237,7 +1262,8 @@ function useMoonPayContext() {
   return ctx;
 }
 function useMoonPay() {
-  return useMoonPayContext();
+  const { client, initialize, isInitialized } = useMoonPayContext();
+  return { client, initialize, isInitialized };
 }
 
 // src/frame-view.tsx